@font-face {
    font-family: "Circular Std";
    src: url("/wp-content/themes/twentytwenty/assets/fonts/circular-std/CircularStd-Book.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("/wp-content/themes/twentytwenty/assets/fonts/circular-std/CircularStd-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font: "Circular Std", sans-serif;
}

body {
    font-family: var(--font);
}

/* =========================================================
   ConQuest 2027 — base
   Scaling: the Figma frame is 1524 design-px wide. 1rem = 10 design px
   at a 152.4rem viewport, and everything scales with the window,
   so every fold keeps the exact Figma proportions on any desktop.
   ========================================================= */

:root {
  /* Brand */
  --brand-orange: #f36a24;
  --brand-orange-2: #f3703a;
  --brand-blue: #0a72ba;
  --brand-cyan: #29b5e8;
  --brand-navy: #194376;
  --nav-ink: #032d60;
  --accent-gold: #ffc46b;
  --accent-coral: #ff8a4c;
  --white: #ffffff;
  --black: #000000;
  --seafloor: #020a12;
  --charcoal: #3a4756;
    --font: "Circular Std", sans-serif;
  /* Palette (from Figma variables) */
  --sand-base: #f7e7cb;  --sand-50: #f9f7f3;  --sand-100: #f7efdf; --sand-300: #ebd5ae;
  --sand-500: #cca26d;   --sand-600: #b48856; --sand-700: #8c6d4f; --sand-800: #67503a; --sand-900: #413325;
  --navy-50: #f3f6f9;    --navy-700: #194376;
  --blue-500: #1690e4;   --blue-900: #042f4d;
  --lagoon-400: #51cdd4; --lagoon-500: #2bb8c5; --lagoon-800: #165d63; --lagoon-900: #0f3f43;
  --sunshine-200: #f0e0b2; --sunshine-500: #f5bc1b; --sunshine-800: #7c5d05; --sunshine-900: #4e3b03;
  --sunset-50: #faf5f2;  --sunset-500: #f36a24;

  /* Temporary: Figtree. Swap to "Circular Std" once font files are available. */

    --font: "Circular Std", sans-serif;

}

/* Design-scale: 1rem = 1rem @ 152.4rem viewport */
html { font-size: calc(100vw / 152.4); -webkit-text-size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--seafloor);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

/* ---------- Shared buttons ---------- */
.btn-icon {
  display: inline-flex; align-items: center; gap: 1.54rem;
  padding: 1.232rem 4.0039rem 1.232rem 1.232rem;
  background: var(--brand-orange-2);
  border-radius: 999.9rem; overflow: hidden;
}
.btn-icon__circle {
  display: flex; align-items: center; justify-content: center;
  width: 5.5439rem; height: 5.5439rem; flex-shrink: 0;
  background: var(--white); border-radius: 50%;
}
.btn-icon__circle img { width: 2.31rem; height: 2.31rem; }
/* every arrow CTA: chevron nudges back and forth forever */
.btn-icon__circle img { animation: arrow-nudge 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.btn-icon:hover .btn-icon__circle img { animation-duration: 0.8s; }
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(-0.2rem); }
  50%      { transform: translateX(0.3rem); }
}
@media (prefers-reduced-motion: reduce) { .btn-icon__circle img { animation: none; } }
.btn-icon__label { font-weight: 700; font-size: 2.31rem; line-height: normal; color: var(--white); white-space: nowrap; }

/* smaller icon buttons (passes, boss, final CTA) */
.btn-icon--sm { gap: 0.8693rem; padding: 0.6955rem 2.2602rem 0.6955rem 0.6955rem; }
.btn-icon--sm .btn-icon__circle { width: 3.1296rem; height: 3.1296rem; }
.btn-icon--sm .btn-icon__circle img { width: 1.304rem; height: 1.304rem; }
.btn-icon--sm .btn-icon__label { font-size: 1.304rem; }

.btn-icon--md { gap: 0.9656rem; padding: 0.7725rem 2.5106rem 0.7725rem 0.7725rem; }
.btn-icon--md .btn-icon__circle { width: 3.4763rem; height: 3.4763rem; }
.btn-icon--md .btn-icon__circle img { width: 1.4484rem; height: 1.4484rem; }
.btn-icon--md .btn-icon__label { font-size: 1.4484rem; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch;
  padding: 1.232rem 2.464rem;
  background: var(--white); border-radius: 999.9rem;
  font-weight: 500; font-size: 2.31rem; line-height: normal; letter-spacing: -0.0231rem;
  color: var(--seafloor); white-space: nowrap;
}

/* =========================================================
   Page-load reveal system (used by every fold)
   Usage:  <el data-reveal style="--d:2">          fade + rise (default)
           data-reveal="down" | "left" | "scale" | "mask" | "fade"
   --d  = order step. Timing = --reveal-start + --d × --reveal-step.
   Animations sit paused until JS adds .is-loaded to <html>.
   ========================================================= */
:root {
  --reveal-step: 0.08s;
  --reveal-start: 0.1s;
  --reveal-dur: 0.9s;
  --reveal-dist: 2.4rem;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes reveal-up    { from { opacity: 0; transform: translateY(var(--reveal-dist)); } }
@keyframes reveal-down  { from { opacity: 0; transform: translateY(calc(var(--reveal-dist) * -1)); } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(calc(var(--reveal-dist) * -1)); } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(0.85); } }
@keyframes reveal-mask  { from { transform: translateY(110%); } }
@keyframes reveal-fade  { from { opacity: 0; } }
@keyframes reveal-bar   { from { transform: translateY(-100%); } }

.js [data-reveal] {
  animation: reveal-up var(--reveal-dur) var(--reveal-ease) both;
  animation-delay: calc(var(--reveal-start) + var(--d, 0) * var(--reveal-step));
  animation-play-state: paused;
}
.js [data-reveal="down"]  { animation-name: reveal-down; }
.js [data-reveal="left"]  { animation-name: reveal-left; }
.js [data-reveal="scale"] { animation-name: reveal-scale; }
.js [data-reveal="mask"]  { animation-name: reveal-mask; animation-duration: calc(var(--reveal-dur) + 0.2s); }
.js [data-reveal="fade"]  { animation-name: reveal-fade; }
.js [data-reveal="bar"]   { animation-name: reveal-bar; animation-duration: 0.7s; }

.js.is-loaded [data-reveal] { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { animation-name: reveal-fade !important; animation-duration: 0.5s !important; }
}

/* =========================================================
   3D beach balls (js/ball3d.js) — shared styles
   Canvas = 2× the ball; the circular .ball3d__hit (middle 50%) takes the pointer,
   so whatever sits under the transparent canvas margin stays clickable.
   Each ball sets its own position/size in its fold's CSS.
   ========================================================= */
.ball3d { position: absolute; z-index: 3; pointer-events: none; }
.ball3d canvas {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 1rem 1.2rem rgba(4, 14, 28, 0.35));
}
.ball3d__hit {
  position: absolute; left: 25%; top: 25%; width: 50%; height: 50%;
  border-radius: 50%;
  pointer-events: auto; cursor: grab; touch-action: none;
}
.ball3d__hit.is-dragging { cursor: grabbing; }
.ball3d__fallback { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; display: none; }
.ball3d.is-fallback canvas { display: none; }
.ball3d.is-fallback .ball3d__fallback { display: block; }
.nowrap { white-space: nowrap; }

/* =========================================================
   Scroll-in reveal (js/main.js → initInview adds html.has-io)
   ========================================================= */
.has-io [data-inview] {
  opacity: 0; transform: translateY(2.6rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.has-io [data-inview].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-io [data-inview] { opacity: 1; transform: none; transition: none; }
}