/* ============================================================
   FG Media Group — Homepage styles
   Original code (© FG Media Group). Built from rebuild-spec.md.
   Phase 0: design tokens + base resets only.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* --- Color palette (rebuild-spec §0) --- */
  --c-bg:            #040508;   /* page base (near-black)               */
  --c-dark:          #0C0C0C;   /* hero / dark panels / buttons         */
  --c-light-section: #C3C3C3;   /* "Design in Motion" section bg        */
  --c-panel:         #F5F4F1;   /* nav side panel (light)               */
  --c-panel-white:   #FFFFFF;   /* pure white panel variant             */

  --c-text-light:    #EAEAEA;   /* body text on dark                    */
  --c-text-light-2:  #D8D8D8;   /* secondary light text                 */
  --c-text-dark:     #2B2B2B;   /* text on light panels                 */
  --c-text-dark-2:   #434343;   /* secondary dark text                  */
  --c-divider:       #2F323B;   /* hairlines on dark                    */

  /* --- Brand gradient (my gold → orange) --- */
  --c-gold:          #ffc95a;   /* gradient start (top/left)            */
  --c-orange:        #ff7506;   /* gradient end (bottom/right)          */
  --grad-brand-h:    linear-gradient(90deg,  #ffc95a 0%, #ff7506 100%); /* horizontal */
  --grad-brand-v:    linear-gradient(180deg, #ffc95a 0%, #ff7506 100%); /* vertical (headers) */

  /* --- Type: family per role (rebuild-spec §0) --- */
  --font-display: "Familjen Grotesk", system-ui, sans-serif; /* headings   */
  --font-body:    "Inter", system-ui, sans-serif;            /* body text  */
  --font-mono:    "Martian Mono", ui-monospace, monospace;   /* labels/btn */
  --font-serif:   "Fraunces", Georgia, serif;                /* accents    */

  /* --- Layout scale --- */
  --container-max: 1640px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);

  /* --- z-index scale --- */
  --z-base:      1;
  --z-canvas:    0;
  --z-content:   10;
  --z-nav:       99;
  --z-panel:     120;
  --z-preloader: 9050;
}

/* ---------- Base reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* NOTE: no CSS `scroll-behavior: smooth` here — it fights Lenis's JS smooth
   scroll and causes slow/janky/stuck scrolling. Lenis owns smooth scrolling;
   see the Lenis block below. */
html { -webkit-text-size-adjust: 100%; }

/* ---------- Lenis (recommended stylesheet) ---------- */
html.lenis,
html.lenis body { height: auto; }

/* Kill native smooth scroll only while Lenis is actively smoothing, so it can't
   fight the JS scroll loop. */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--c-bg);
  color: var(--c-text-light);
  font-family: var(--font-body);
  font-size: 1.25rem;          /* base body size (spec) */
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 500; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img, svg, canvas, video { display: block; max-width: 100%; }

ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Type utility classes (per role) ---------- */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.font-serif   { font-family: var(--font-serif); font-weight: 300; font-variation-settings: "opsz" 72; }

/* Gold gradient text helper (reused for buttons/headers/labels) */
.grad-text {
  background: var(--grad-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Respect reduced motion globally (animations opt back in per-section) */
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
}

/* ---------- Phase 0 scaffold marker (temporary) ---------- */
.app { position: relative; min-height: 100dvh; }

.scaffold-note {
  position: fixed;
  inset: auto 0 1rem 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-dark-2);
  opacity: .5;
}

/* ============================================================
   Phase 2.1 — NAV HEADER + HERO (static layout)
   ============================================================ */

/* ---------- Nav header ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: calc(var(--z-panel) + 5);   /* header stays above the side panel */
  padding-block: 36px;                 /* spec: 36px vertical */
}
/* Blend only the CONTROLS (so they invert for contrast over any bg); the warm
   FG logo stays NORMAL so its true colors show — not inverted to purple over
   the light "Design in Motion" section. (spec: blend controls, not the logo) */
.nav__controls { mix-blend-mode: difference; }
.nav__logo { mix-blend-mode: normal; }
.nav__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2.2vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo img { height: 30px; width: auto; }

.nav__controls { display: flex; align-items: center; gap: .75rem; }

/* sound toggle (round icon button) */
.nav__sound {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(217, 217, 217, .1);
  color: #fff;
  transition: background .3s ease;
}
.nav__sound:hover { background: rgba(217, 217, 217, .2); }
.nav__sound svg { width: 16px; height: 15px; }

/* Sound-toggle icon states (mirror-exact):
   MUTED  (aria-pressed=false, default) → speaker dimmed to 0.4 + slash shown.
   UNMUTED(aria-pressed=true)           → full-opacity speaker, slash hidden. */
.nav__sound .snd-ico   { opacity: .4; transition: opacity .25s ease; }
.nav__sound .snd-slash { opacity: .6; transition: opacity .25s ease; }
.nav__sound[aria-pressed="true"] .snd-ico   { opacity: 1; }
.nav__sound[aria-pressed="true"] .snd-slash { opacity: 0; }

/* pill buttons (LET'S TALK / MENU) — white pills; blend keeps them readable */
.nav__cta,
.nav__menu {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: #0C0C0C;
  background: #fff;
  border: 1px solid #fff;
  padding: .55rem 1.1rem; border-radius: 999px;
  transition: background .3s ease, border-color .3s ease;
}
.nav__cta:hover { background: rgba(255,255,255,.85); }
.nav__menu { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.nav__menu:hover { border-color: #fff; }
.nav__menu-icon { display: inline-flex; flex-direction: column; gap: 3px; }
.nav__menu-icon i { display: block; width: 15px; height: 1.5px; background: currentColor; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  background: transparent;             /* show the fixed 3D-logo layer behind it */
  overflow: hidden;
}

/* 3D glass monogram layer — full-bleed behind the hero text (Three.js canvas) */
/* FIXED full-viewport background layer (mirror: fixed inset-0 z-0). Persists
   behind the text as you scroll; z-index -1 keeps it below all section content
   (text readable) while transparent sections (hero/about/vision) show it through
   and the first OPAQUE section after Vision (Design in Motion, #C3C3C3) covers it
   — the same opaque-background handoff the mirror uses to end the logo. */
.hero__logo {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__logo canvas { display: block; width: 100%; height: 100%; }

/* Hero content overlay */
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 7.5rem 3.5rem;        /* clears the fixed header */
}
.hero__top { display: flex; flex-direction: column; align-items: flex-start; gap: 2.25rem; }

/* headline — text layer inverts over the moving 3D bg */
.hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.75rem, 6.614vw, 6.25rem);
  line-height: clamp(3.5rem, 5.952vw, 5.625rem);
  letter-spacing: -.06em;
  color: var(--c-text-light-2);        /* #D8D8D8 */
  mix-blend-mode: difference;
}
.hero__line { display: block; }

/* CTA pill (gold gradient, true color — outside blend) */
.hero__cta-wrap { mix-blend-mode: normal; }
.btn-pill {
  display: inline-flex; align-items: center;
  width: fit-content;
  background: var(--grad-brand-h);
  color: #0C0C0C;
  border-radius: 999px;
  padding: .7rem 1.5rem;
  padding-right: 2.9rem;               /* reserves room for the arrow (no overlap) */
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  transition: opacity .3s ease;
}
.btn-pill:hover { opacity: .95; }
.btn-pill__text { display: inline-block; }
.btn-pill__arrow {
  position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: #0C0C0C;
}

/* Interaction cue — bottom center, desktop only */
.hero__cue {
  align-self: center;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  color: var(--c-text-light-2);
  mix-blend-mode: difference;
}
.hero__cue-arrow {
  display: flex; justify-content: center; margin-bottom: .55rem;
  mix-blend-mode: normal;              /* true gradient color */
  will-change: transform;
  animation: fgCueBounce 1.5s ease-in-out infinite;
}
.hero__cue-line {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .9rem; letter-spacing: .02em; line-height: 1;   /* match mirror .title (leading-1) */
}
.hero__cue-line + .hero__cue-line { margin-top: .5rem; }

@keyframes fgCueBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* Reduced motion: keep the gentle cue bounce (small, non-vestibular). */

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .nav__cta { display: none; }                 /* keep menu + sound on mobile */
  .hero__cue { display: none; }                /* hover cue is desktop-only */
  .hero__inner { padding-block: 6.5rem 2.5rem; }
  .hero__logo-placeholder { width: min(80vw, 340px); }
}

/* ============================================================
   Phase 2.2 — ABOUT + VISION
   ============================================================ */

/* ---------- ABOUT ---------- */
.about {
  position: relative;
  z-index: var(--z-content);
  background: transparent;             /* fixed 3D-logo layer persists behind */
  padding-block: clamp(5rem, 9vw, 9.4rem) 5rem;
  min-height: 100dvh;
  display: flex; align-items: center;
}
.about__inner { width: 100%; }

.about__title-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.about__label {
  grid-column: 1 / span 1;
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.1vw, .96rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--c-text-light-2);
}
.about__headline {
  grid-column: 2 / span 11;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.35vw, 5.35rem);
  line-height: 1.06;
  letter-spacing: normal;             /* match mirror; negative tracking made the
                                         per-word reveal glyphs overflow/touch */
  color: var(--c-text-light-2);
  text-indent: 8.33%;                 /* hanging first-word indent (~1/12) */
}

.about__divider {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  margin-block: clamp(3rem, 6vw, 6.25rem);
}
.about__line {
  grid-column: 2 / span 11;
  height: 1px; width: 100%;
  background: var(--c-divider);
}
.about__plus {
  grid-column: 9 / span 1;
  grid-row: 1;
  justify-self: center;
  font-family: var(--font-mono);
  color: var(--c-text-light-2);
  font-size: 1rem;
  transform: translateX(-50%);
}

.about__subtitle-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.about__subline {
  grid-column: 2 / span 3;
  max-width: 16rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.35;
  color: var(--c-text-light-2);
}
.about__col {
  grid-column: 9 / span 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem;
}
.about__para {
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5;
  color: var(--c-text-light);
  opacity: .92;
}

/* text-arrow button ("Who We Are →") */
.btn-text {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-light-2);
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(216,216,216,.4);
  transition: color .25s ease, border-color .25s ease;
}
.btn-text:hover { color: #fff; border-color: #fff; }
.btn-text__arrow { display: inline-flex; transition: transform .25s ease; }
.btn-text:hover .btn-text__arrow { transform: translateX(4px); }

/* ---------- VISION ---------- */
.vision {
  position: relative;
  z-index: var(--z-content);
  min-height: 100dvh;
  overflow: hidden;
  background: transparent;             /* fixed 3D-logo layer persists behind; DIM (opaque) ends it */
}
/* reserved centered zone for the floating 3D logo (added later) */
.vision__logo-space {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vision__inner {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: clamp(4rem, 9vw, 9.4rem);
  color: var(--c-text-light-2);
  mix-blend-mode: difference;         /* text inverts over the 3D that floats here */
}
.vision__head { display: grid; grid-template-columns: repeat(12, 1fr); }
.vision__headline {
  grid-column: 2 / span 11;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(.95rem, 1.15vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--c-text-light-2);
}

/* marquee */
.vision__marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: none;
}
.vision__track {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: fgMarquee 26s linear infinite;
}
.vision__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 9.2vw, 8.25rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  padding-inline: 1.5rem;
  color: var(--c-text-light-2);
}
/* crossing-line separator (·) between words */
.vision__sep {
  position: relative;
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: clamp(1.5rem, 3vw, 2.75rem);
  flex: 0 0 auto;
  margin-inline: clamp(1.5rem, 3vw, 4rem);
}
.vision__sep::before,
.vision__sep::after {
  content: ""; position: absolute; background: var(--c-text-light-2);
}
.vision__sep::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.vision__sep::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

@keyframes fgMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* content duplicated -> seamless loop */
}
@media (prefers-reduced-motion: reduce) {
  .vision__track { animation-duration: 60s; }   /* slower, still scrolls (reduce, not kill) */
}

.vision__foot { display: grid; grid-template-columns: repeat(12, 1fr); }
.vision__closing {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.15vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--c-text-light-2);
}

/* ============================================================
   7. FOOTER  (#footer) — closing CTA, "FG MEDIA" waveform, contact
   Static layout + waveform visual. Hover-audio is a later module.
   ============================================================ */
.footer {
  position: relative;
  z-index: var(--z-base);
  min-height: 100dvh;
  overflow: hidden;
  background: var(--c-bg);              /* near-black #040508 */
  color: var(--c-text-light);
}
/* reserved layer for the WebGL background effect (mounted later) */
.footer__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* The inner uses a 3-band vertical rhythm anchored to the viewport:
   top (eyebrow+headline / CTA), middle (copyright+contact), bottom (waveform). */
.footer__inner {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* top padding clears the ~110px fixed nav so the eyebrow/CTA row sits
     inside the footer's top-right, not under the header */
  padding-block: clamp(7rem, 14vh, 9rem) 0;
}

/* Shared small uppercase UI label (grotesk, wide tracking) */
.footer__eyebrow,
.footer__cta-text,
.footer__copy,
.footer__soundnote,
.footer__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: clamp(.72rem, .95vw, .875rem);
  line-height: 1.4;
}

/* ---- TOP band ---- */
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer__eyebrow {
  display: block;
  color: var(--c-text-light);
  letter-spacing: .01em;
  margin-bottom: clamp(1.4rem, 3vh, 2.4rem);
}
.footer__headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.015em;
  font-size: clamp(3rem, 7.2vw, 7.5rem);
}

/* CTA = underlined text link (not a pill) */
.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  width: clamp(230px, 19vw, 300px);
  margin-top: .4rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text-light) 45%, transparent);
  color: var(--c-text-light);
  transition: border-color .25s ease;
}
.footer__cta-text { letter-spacing: .08em; }
.footer__cta-arrow { display: inline-flex; transition: transform .25s ease; }
.footer__cta:hover { border-color: var(--c-text-light); }
.footer__cta:hover .footer__cta-arrow { transform: translateX(4px); }

/* ---- MIDDLE band ---- */
.footer__mid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(3rem, 12vh, 8.5rem);
}
.footer__meta { display: flex; flex-direction: column; }
.footer__copy {
  color: color-mix(in srgb, var(--c-text-light) 50%, transparent);
  margin-bottom: clamp(3rem, 8vh, 5rem);
}
.footer__soundnote {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--c-text-light);
}
.footer__soundicon { display: inline-block; opacity: .85; }

/* right cluster: Business Enquiry + Social columns */
.footer__contact {
  display: flex;
  gap: clamp(2.5rem, 7vw, 7rem);
}
.footer__contact-col { display: flex; flex-direction: column; }
.footer__label {
  color: color-mix(in srgb, var(--c-text-light) 50%, transparent);
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
.footer__link {
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--c-text-light-2);
  transition: color .25s ease;
  width: fit-content;
}
.footer__pfx { color: color-mix(in srgb, var(--c-text-light) 45%, transparent); }
.footer__link:hover { color: #fff; }

/* ---- BOTTOM band: giant scanline "FG MEDIA" waveform ---- */
.footer__waveform {
  margin-top: auto;                 /* push to viewport bottom */
  width: 100%;
  /* bleed the tall waveform past the bottom edge (cropped, like the mirror) */
  margin-bottom: clamp(-7rem, -9vh, -4rem);
}
.wf {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.wf-line {
  fill: none;
  stroke: url(#wfGrad);              /* brand gold→orange vertical gradient */
  stroke-width: 2;
  stroke-linecap: butt;
  opacity: .55;
  transition: stroke .3s ease, opacity .3s ease;
}
/* gentle per-line hover feedback (visual only — audio is a later module) */
.wf-line:hover { opacity: 1; }

/* ---------- Reveal animation base state (JS drives the reveal) ---------- */
[data-reveal], [data-reveal-words] .rw-word { will-change: transform, opacity, filter; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .about__title-block, .about__subtitle-block { grid-template-columns: 1fr; gap: 1rem; }
  .about__label, .about__headline { grid-column: 1; }
  .about__headline { text-indent: 0; font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .about__subline, .about__col { grid-column: 1; max-width: none; }
  .about__divider { grid-template-columns: 1fr; margin-block: 3rem; }
  .about__line { grid-column: 1; }
  .about__plus { grid-column: 1; justify-self: start; transform: none; }
  .vision__headline, .vision__closing { grid-column: 1 / -1; }
  .vision__word { font-size: clamp(2.75rem, 14vw, 4.5rem); }

  /* Footer: stack CTA under headline; stack meta + contact/social */
  .footer__top { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .footer__cta { width: 100%; max-width: 300px; }
  .footer__mid { flex-direction: column; align-items: flex-start; gap: 2.5rem; margin-top: 3rem; }
  .footer__copy { margin-bottom: 1.25rem; }
  .footer__contact { gap: 2.5rem; }

  /* FG MEDIA wordmark: the desktop negative-bleed crop (clamp(-7rem,-9vh,-4rem))
     is a FIXED ~64px pull, but the full-width waveform is only ~90–110px tall on
     phones, so that crop hid most of it. On mobile, drop the crop and add a little
     space so the whole gold→orange wordmark is visible edge-to-edge. */
  .footer__waveform { margin-top: 2.5rem; margin-bottom: 1.5rem; }
}

/* word-reveal spans (JS-generated).
   Inter-word gap comes from a consistent margin on the word (immune to the
   headline's negative letter-spacing — like the mirror's padding-left words),
   so every gap is identical. The .rw-space keeps a real space in the DOM for
   copy/SEO/a11y but contributes zero visual width. */
/* text-indent:0 — the parent's hanging first-word indent (text-indent) is
   inherited by these inline-blocks and would otherwise indent EACH word by a %
   of its own width (long words drift into the next word). Reset it here. */
.rw-word { display: inline-block; white-space: nowrap; margin-right: 0.26em; text-indent: 0; }
.rw-space { display: inline-block; width: 0; overflow: hidden; }
.rw-inner { display: inline-block; text-indent: 0; }

/* Per-character scroll color-scrub (About statement). Chars stay inline so natural
   word-wrapping and spacing are preserved; JS drives color from dim to bright. */
.cs-char { color: rgba(216, 216, 216, 0.1); will-change: color; }

/* ============================================================
   2b. NAV SIDE PANEL  (.panel) — slides in from the right
   White by default; flips to BLACK while an accordion is open.
   ============================================================ */
.panel-overlay {
  position: fixed; inset: 0;
  z-index: calc(var(--z-panel) - 1);
  background: rgba(4, 5, 8, .35);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.panel-overlay[data-show="true"] { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-panel);
  width: min(27.5rem, 92vw);
  max-height: 100dvh;
  height: 100dvh;
  background: var(--c-panel);           /* white #F5F4F1 */
  color: var(--c-text-dark);
  border-radius: 7px 0 0 7px;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.76, 0, .24, 1),
              background-color .35s ease, color .35s ease;
  will-change: transform;
  box-shadow: -30px 0 80px rgba(4, 5, 8, .25);
}
.panel[data-open="true"] { transform: translateX(0); }

/* BLACK flip while any accordion is open */
.panel[data-dark="true"] { background: var(--c-dark); color: var(--c-text-light); }

.panel__scroll {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(6.5rem, 12vh, 8rem) clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vh, 3rem);
  -webkit-overflow-scrolling: touch;
}

/* ---- Menu list ---- */
.panel__list { display: flex; flex-direction: column; }
.panel__item { border: 0; }
.panel__link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.9;
  letter-spacing: -.01em;
  color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: opacity .2s ease;
}
.panel__link:hover { opacity: .6; }
.panel__acc-toggle[aria-expanded="true"] { opacity: 1; }

/* ---- Inline accordion body (pushes items below down) ---- */
.panel__acc {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .4s cubic-bezier(.76, 0, .24, 1), opacity .3s ease;
}
.panel__item--acc[data-expanded="true"] .panel__acc { opacity: 1; }

.acc { display: flex; flex-direction: column; padding: .5rem 0 1rem; }

/* Category header — gold gradient text, +/- sign */
.acc__cat { border-top: 1px solid rgba(255,255,255,.12); }
.acc__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; padding: .95rem 0; cursor: pointer;
  text-align: left;
}
.acc__title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(.8rem, 1.05vw, .92rem);
  line-height: 1.3;
}
.acc__sign {
  font-family: var(--font-mono);
  font-size: 1.1rem; line-height: 1;
  color: var(--c-gold);
  transition: color .2s ease, transform .2s ease;
  flex: none;
}
.acc__head[aria-expanded="true"] .acc__sign { color: var(--c-orange); }

/* Category items */
.acc__items {
  overflow: hidden; height: 0; opacity: 0;
  transition: height .35s cubic-bezier(.76,0,.24,1), opacity .25s ease;
}
.acc__cat[data-open="true"] .acc__items { opacity: 1; }
.acc__link {
  display: block;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.35;
  padding: .5rem 0;
  color: var(--c-text-light-2);
  transition: color .2s ease;
}
.acc__link:hover { color: #fff; }

/* Programs simple list — gold bullet accents */
.acc--simple { padding-top: 1rem; }
.acc--simple .acc__link { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; }
.acc__dot {
  width: .5rem; height: .5rem; border-radius: 999px; flex: none;
  background: var(--grad-brand-h);
}

/* ---- Contact block (bottom of panel) ---- */
.panel__contact { display: flex; gap: clamp(2rem, 5vw, 3.5rem); }
.panel__contact-col { display: flex; flex-direction: column; }
.panel__contact-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  opacity: .5;
  margin-bottom: 1rem;
}
.panel__contact-link {
  font-family: var(--font-body);
  font-size: .9rem; line-height: 1.7;
  color: inherit;
  transition: opacity .2s ease;
}
.panel__contact-link:hover { opacity: .6; }
.panel__pfx { opacity: .5; }

/* Panel open: turn the MENU button into a close (×) affordance */
.nav__menu[aria-expanded="true"] .nav__menu-label::after { content: "Close"; }

@media (prefers-reduced-motion: reduce) {
  .panel { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
}

/* ============================================================
   6. DESIGN IN MOTION — pinned arc carousel (.dim)
   Scroll-scrubbed CSS-3D ring conveyor + opposite word marquees.
   ============================================================ */
.dim {
  position: relative;
  background: var(--c-light-section);   /* #C3C3C3 */
  color: var(--c-text-dark);
}
/* the element GSAP pins — exactly one viewport tall */
.dim__pin {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

/* ---- Drifting word marks ---- */
.dim__words {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.dim__word {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .8;            /* mirror: leading-[0.8] — tight, so words clear subtext */
  font-size: clamp(4rem, 11vw, 12rem);
  color: #2b2c31;
  opacity: .42;
  white-space: nowrap;
  will-change: transform;
}
.dim__word--top    { align-self: flex-start; transform: translateX(-8vw); }
.dim__word--bottom { align-self: flex-end;   transform: translateX(8vw); }

/* ---- Center subtext (flows between the two display words) + caption ---- */
.dim__subtext {
  align-self: center;         /* mirror: mx-auto text-center */
  margin: 0.75rem auto;       /* mirror: my-3 — clearance from both display words */
  z-index: 1;                 /* behind the card canvas (z-2) so cards pass over it */
  text-align: center;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(.72rem, 1vw, .9rem);
  line-height: 1.6;
  color: var(--c-text-dark-2);
}
.dim__caption {
  position: absolute; left: clamp(1.25rem, 4vw, 3rem); bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 3;
  font-family: var(--font-body);
  font-size: clamp(.75rem, .95vw, .9rem);
  line-height: 1.55;
  color: var(--c-text-dark-2);
  max-width: 22rem;
}

/* ---- Curved conveyor stage (Three.js canvas) ---- */
.dim__stage {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
}
.dim__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .dim__word { font-size: clamp(3rem, 16vw, 6rem); }
}

/* ============================================================
   1. PRELOADER (authored, cinematic — iris/scale reveal)
   Composition: gradient-bordered square + white FG monogram,
   four "+" corner accents, a 0→100 counter below, tagline at
   the bottom. JS drives entrance → roll → iris scale-up reveal.
   ============================================================ */
.pl {
  --pl-bg: #0C0C0C;
  --pl-idle: #434343;
  --pl-corner-off: -0.75rem;                  /* "+" marks just outside the corners */
  --pl-ease-cine: cubic-bezier(.83, 0, .17, 1);  /* cinematic in-out for the reveal scale */
  --pl-ease-soft: cubic-bezier(.16, 1, .3, 1);   /* gentle out for fades/entrance     */
  position: fixed; inset: 0;
  z-index: var(--z-preloader);
  font-family: var(--font-display);
}
/* reveal: dissolve the whole overlay's dark base + let the scaled frame fade out */
.pl.is-revealing .pl__screen { opacity: 0; transition: opacity .8s var(--pl-ease-soft); }

/* base solid screen (dissolves on reveal) */
.pl__screen {
  position: fixed; inset: 0; background: var(--pl-bg); z-index: 9050;
  will-change: opacity;
}

/* centered vertical stack: square (+ monogram) then counter */
.pl__center {
  position: fixed; inset: 0; z-index: 9350;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.25rem;
  perspective: 900px;
  pointer-events: none;
}
.pl__logo-wrap {
  position: relative;
  width: clamp(10rem, 22vw, 17.5rem);
  height: clamp(10.25rem, 22.3vw, 17.75rem);
  transform-origin: 50% 50%;
  /* entrance base state (JS adds .is-in to play it) */
  opacity: 0; transform: scale(.86);
  transition: opacity .55s var(--pl-ease-soft), transform .55s var(--pl-ease-soft);
  will-change: transform, opacity;
}
.pl__logo-wrap.is-in { opacity: 1; transform: scale(1); }
/* iris reveal — the square scales up to fill the viewport, then fades */
.pl.is-revealing .pl__logo-wrap {
  transition: transform .8s var(--pl-ease-cine), opacity .8s var(--pl-ease-soft);
  transform: scale(9);
  opacity: 0;
}

/* interior fill behind the monogram */
.pl__box {
  position: absolute; inset: 0; z-index: 0;
  background: var(--pl-bg);
  border: 1.5px solid #ffffff0a; border-radius: 3px;
  transition: opacity .5s var(--pl-ease-soft);
}
.pl.is-revealing .pl__box { opacity: 0; }

/* square gold→orange gradient border */
.pl__border { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; overflow: visible; }

/* FG monogram (white) centered in the square; gentle ambient shimmer during load */
.pl__mono {
  position: absolute; inset: 0; z-index: 500;
  width: 74%; height: 74%; margin: auto; display: block;
  animation: plShimmer 2.6s ease-in-out infinite;
}
.pl.is-revealing .pl__mono { animation: none; transition: opacity .5s var(--pl-ease-soft) .15s; opacity: 0; }
@keyframes plShimmer { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }

/* four "+" accent marks just outside the square's corners; slow ambient drift */
.pl__mark { position: absolute; z-index: 10; width: .813rem; height: .813rem; opacity: 0; }
.pl__mark svg { display: block; width: .813rem; height: .813rem; }
.pl__mark.is-in { opacity: 1; transition: opacity .5s var(--pl-ease-soft); }
.pl__mark--tl { top: var(--pl-corner-off);    left: var(--pl-corner-off);  animation: plDriftTL 4.5s ease-in-out infinite; }
.pl__mark--tr { top: var(--pl-corner-off);    right: var(--pl-corner-off); animation: plDriftTR 4.5s ease-in-out infinite; }
.pl__mark--br { bottom: var(--pl-corner-off); right: var(--pl-corner-off); animation: plDriftBR 4.5s ease-in-out infinite; }
.pl__mark--bl { bottom: var(--pl-corner-off); left: var(--pl-corner-off);  animation: plDriftBL 4.5s ease-in-out infinite; }
.pl.is-revealing .pl__mark { animation: none; opacity: 0; transition: opacity .35s var(--pl-ease-soft); }
@keyframes plDriftTL { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-2px,-2px); } }
@keyframes plDriftTR { 0%,100% { transform: translate(0,0); } 50% { transform: translate( 2px,-2px); } }
@keyframes plDriftBR { 0%,100% { transform: translate(0,0); } 50% { transform: translate( 2px, 2px); } }
@keyframes plDriftBL { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-2px, 2px); } }

/* counter 0→100 (gradient digits), directly below the square */
.pl__counter {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  opacity: 0; transition: opacity .5s var(--pl-ease-soft);
}
.pl__counter.is-in { opacity: 1; }
.pl.is-revealing .pl__counter { opacity: 0; transition: opacity .3s var(--pl-ease-soft); }
.pl__reel {
  position: relative; display: block; overflow: hidden;
  width: .8rem; height: .938rem;
}
.pl__strip {
  display: block; will-change: transform;
  background: linear-gradient(180deg, #ffc95a, #ff7506);
  background-size: 100% .938rem;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pl__digit {
  display: block; height: 1rem;
  font-size: 1rem; line-height: 1rem; letter-spacing: .02em; text-align: center;
}
/* JS drives the roll; parked at 0 pre-run */
.pl__strip--h, .pl__strip--t, .pl__strip--u { transform: translateY(0); }

/* tagline pinned at the bottom center */
.pl__tagline {
  position: fixed; left: 50%; bottom: 2.75rem; z-index: 9400;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .063rem;
  pointer-events: none;
}
.pl.is-revealing .pl__tagline { opacity: 0; transition: opacity .3s var(--pl-ease-soft); }
.pl__word {
  text-transform: uppercase;
  font-size: .95rem; line-height: 1; letter-spacing: .04em;
  background: linear-gradient(180deg, #ffc95a, #ff7506);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--pl-ease-soft), transform .5s var(--pl-ease-soft);
}
.pl__word.is-in { opacity: 1; transform: translateY(0); }
.pl__dot {
  color: #ff750699; font-size: 1rem; margin: 0 .5rem;
  opacity: 0; transition: opacity .5s var(--pl-ease-soft) .1s;
}
.pl__dot.is-in { opacity: 1; }