/* ==========================================================================
   BRANDxBUILD — Brand Infrastructure & PMC
   assets/css/style.css
   --------------------------------------------------------------------------
   01  Tokens
   02  Reset & base
   03  Utilities
   04  Header
   05  Hero — shell & layers
   06  Hero — eyebrow / title / band
   07  Buttons
   08  Dark transition strip
   09  Responsive
   10  Reduced motion & fallbacks
   ========================================================================== */


/* 01  Tokens ============================================================== */

:root{
  /* light sheet (hero) */
  --paper:      #FFFFFF;
  --paper-2:    #F7F7F5;
  --paper-hi:   #FFFFFF;
  --ink:        #101010;
  --ink-soft:   #55554F;   /* 7.4:1 on white */
  --line:       #E4E3DE;

  /* signal — two values on purpose.
     --signal is the poster orange, reserved for large display type and
     decorative marks (3.4:1 on white → passes the 3:1 large-text bar).
     --signal-ink is the darkened variant for anything set small
     (4.6:1 on white → passes the 4.5:1 body bar). */
  --signal:     #FF4600;
  --signal-ink: #D93900;

  /* dark sheet (everything after the hero) */
  --void:       #0C0C0A;
  --void-line:  #2B2A24;
  --void-text:  #EAE8E1;
  --void-soft:  #9C998E;

  /* metrics */
  --wrap:       1400px;
  --gutter:     clamp(20px, 4vw, 56px);
  --header-h:   76px;
  --tap:        44px;      /* minimum interactive target */

  /* type */
  --f-display:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-text:     'Inter', system-ui, -apple-system, sans-serif;

  --hl-size:    clamp(38px, 9.3vw, 132px);

  --ease:       cubic-bezier(.22, .85, .24, 1);
}


/* 02  Reset & base ======================================================== */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

/* Lenis owns scrolling once it boots — native smooth scroll fights it */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img, svg, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--signal); color:var(--paper-hi); }

:focus-visible{
  outline:2px solid var(--signal-ink);
  outline-offset:3px;
}


/* 03  Utilities =========================================================== */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.mono{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.4;
}


/* 04  Header ============================================================== */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  padding-top:0;
  pointer-events:none;
  transition:padding-top .35s var(--ease);
}

.bar{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  pointer-events:auto;
  border-radius:0;
  border:1px solid transparent;
  transition:all .35s var(--ease);
}

.site-header.is-stuck{
  padding-top:5px;
}

.site-header.is-stuck .bar{
  height:70px;
  max-width:min(calc(100% - clamp(20px, 4vw, 56px)), 1280px);
  margin-inline:auto;
  padding-inline:clamp(20px, 2.5vw, 32px);
  background:linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(247, 247, 243, 0.58) 100%);
  -webkit-backdrop-filter:saturate(2.2) blur(24px);
  backdrop-filter:saturate(2.2) blur(24px);
  border-radius:100px;
  position:relative;
  isolation:isolate;

  /* Optical Liquid Glass Lens: Prism Rim + Inset Refraction Bulge + Drop Shadow */
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.14),
    0 8px 24px -4px rgba(0, 0, 0, 0.06),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -8px 20px -4px rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px 0 rgba(0, 0, 0, 0.05),
    inset 1.5px 0 4px 0 rgba(255, 70, 0, 0.22),      /* Chromatic Red/Orange Rim */
    inset -1.5px 0 4px 0 rgba(77, 159, 255, 0.22),    /* Chromatic Blue Rim */
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  will-change:transform, -webkit-backdrop-filter, backdrop-filter;
}

/* Chromatic Prism Outer Lens Rim */
.site-header.is-stuck .bar::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:100px;
  padding:1.5px;
  background:linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 70, 0, 0.4) 22%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(77, 159, 255, 0.4) 78%,
    rgba(255, 255, 255, 0.9) 100%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0.9;
  z-index:2;
}

/* Touch & Pointer Tracked Liquid Glare Spot */
.site-header.is-stuck .bar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(
    180px circle at var(--gx, 35%) var(--gy, 30%),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.12) 45%,
    transparent 70%
  );
  pointer-events:none;
  z-index:3;
  animation:liquidGlint 7s ease-in-out infinite alternate;
}

@keyframes liquidGlint{
  0%{ opacity:0.8; }
  50%{ opacity:1.0; }
  100%{ opacity:0.85; }
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
  min-height:var(--tap);
}
.brand-mark{
  width:26px;
  height:26px;
  color:var(--ink);
  transition:transform .35s var(--ease), color .2s ease;
}
.brand-mark svg{ width:100%; height:100%; }
.brand:hover .brand-mark{ transform:rotate(90deg); color:var(--signal-ink); }

.brand-name{
  font-family:var(--f-display);
  font-weight:900;
  font-size:15px;
  letter-spacing:0.005em;
}
.brand-name .x{ color:var(--signal-ink); }

.nav-links{
  display:flex;
  gap:clamp(16px, 2.1vw, 32px);
}
.nav-links a{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  display:flex;
  align-items:center;
  min-height:var(--tap);
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:24px;
  height:1.5px;
  width:0;
  background:var(--signal);
  transition:width .25s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }

.bar-end{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-cta{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  padding:0 18px;
  min-height:var(--tap);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  background:transparent;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .25s ease, border-color .25s ease, border-radius .35s var(--ease), min-height .35s var(--ease), padding .35s var(--ease);
}
.nav-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s var(--ease);
}
.nav-cta:hover::before,
.nav-cta:focus-visible::before{ transform:scaleX(1); }
.nav-cta:hover,
.nav-cta:focus-visible{ color:var(--paper-hi); }
.cta-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  transition:transform .25s var(--ease);
}
.cta-ico svg{ width:12px; height:12px; }
.nav-cta:hover .cta-ico{ transform:translate(2px, -2px); }

.site-header.is-stuck .nav-cta{
  border-radius:100px;
  min-height:38px;
  padding:0 16px;
  font-size:11.5px;
}

.nav-toggle{
  display:none;
  width:var(--tap);
  height:var(--tap);
  border:1.5px solid var(--ink);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:border-radius .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.site-header.is-stuck .nav-toggle{
  border-radius:50%;
  width:38px;
  height:38px;
}
.nav-toggle span{
  display:block;
  width:17px;
  height:1.5px;
  background:var(--ink);
  transition:transform .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }


/* 05  Hero — shell & layers =============================================== */

.hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  background:var(--paper);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-block:calc(var(--header-h) + 30px) 36px;
}

/* No z-index here on purpose. A z-index (or any transform/opacity) would make
   .hero-inner a stacking context and trap .hero-title.is-back above the
   canvas — killing the layering. Each child carries its own layer instead. */
.hero-inner{
  position:relative;
  flex:1;
  display:grid;
  grid-template-rows:1fr auto;
  gap:clamp(24px, 4vh, 48px);
  pointer-events:none;             /* links re-enable themselves below */
}
.hero-inner a,
.hero-inner button{ pointer-events:auto; }

/* the WebGL sheet — sits between the two title plates */
#glassCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 1s var(--ease);
}
#glassCanvas.is-ready{ opacity:1; }

.grain{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* 06  Hero — eyebrow / title / band ======================================= */

.hero-core{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-eyebrow{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(18px, 2.6vh, 34px);
}
.hero-eyebrow .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--signal);
  flex-shrink:0;
}
.hero-eyebrow .mono{ color:var(--ink); }
.hero-eyebrow .rule{
  flex:1;
  height:1px;
  max-width:300px;
  background:linear-gradient(to right, var(--line), transparent);
}

/* --- the two-plate title --- */
.hero-title-wrap{
  position:relative;
  width:100%;
}

.hero-title{
  font-family:var(--f-display);
  font-weight:900;
  font-size:var(--hl-size);
  line-height:0.87;
  letter-spacing:-0.035em;
  text-transform:uppercase;
  color:var(--ink);
  pointer-events:none;
  margin:0;
}
.hero-title .ln{
  display:block;
  white-space:nowrap;
}
.hero-title .stop{ color:var(--signal); }

/* back plate — read THROUGH the glass */
.hero-title.is-back{
  position:relative;
  z-index:1;
}
.hero-title.is-back .ln-2{ opacity:0; }

/* front plate — drawn OVER the glass, pixel-identical box */
.hero-title.is-front{
  position:absolute;
  inset:0;
  z-index:3;
}
.hero-title.is-front .ln-1{ opacity:0; }

/* --- entrance -----------------------------------------------------------
   Held by the `.js` class that script.js sets synchronously, then released
   by the GSAP timeline. `.anim-fallback` is the escape hatch if GSAP never
   loads — without it a CDN failure would leave the hero permanently blank. */

.js .hero-eyebrow,
.js .hero-band{ opacity:0; }
.js .hero-title .ln{ clip-path:inset(-25% 100% -20% 0); }

/* --- interactive letters -------------------------------------------------
   Split by JS into .char spans. transform only, never a size or margin
   change, so a lifting letter can never reflow the line beside it. */

.hero-title .char{
  display:inline-block;
  transition:transform .38s var(--ease), color .25s ease;
}

@media (hover: hover) and (pointer: fine){
  /* Hit-testing has to be split across the two plates. Line 1 is the visible
     one on the BACK plate, line 2 on the FRONT plate; their opposites are
     opacity:0 but still occupy the same box. pointer-events is inherited, so
     .hero-title's `none` keeps the invisible twin from swallowing the hover,
     and each visible line owns its own pointer — which means plain :hover
     works and no JS mirroring between plates is needed. */
  .hero-title.is-back  .ln-1 .char,
  .hero-title.is-front .ln-2 .char{ pointer-events:auto; }

  .hero-title .char:hover{
    transform:translateY(-0.09em);
    color:var(--signal);
  }
  /* neighbours follow at half height — :has() reaches the previous sibling */
  .hero-title .char:hover + .char,
  .hero-title .char:has(+ .char:hover){
    transform:translateY(-0.045em);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-title .char:hover,
  .hero-title .char:hover + .char,
  .hero-title .char:has(+ .char:hover){ transform:none; }
}

.anim-fallback .hero-eyebrow,
.anim-fallback .hero-band{ opacity:1 !important; transform:none !important; }
.anim-fallback .hero-title .ln{ clip-path:none !important; }

/* --- bottom band -------------------------------------------------------
   Three columns split by hairlines rather than by gap alone. With gap only,
   the statement capped at ~14ch inside a ~400px column and the leftover
   read as an accident; the rules make the same whitespace look measured. */

.hero-band{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.3fr) minmax(268px, 0.72fr);
  align-items:stretch;
  border-top:1px solid var(--ink);   /* heavier than the inner rules */
}

.hero-band > *{
  padding-top:clamp(22px, 3vh, 34px);
  padding-right:clamp(24px, 2.8vw, 46px);
}
.hero-band > *:last-child{ padding-right:0; }

.hero-copy,
.hero-actions{
  border-left:1px solid var(--line);
  padding-left:clamp(24px, 2.8vw, 46px);
}

.hero-statement{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(19px, 1.55vw, 25px);
  line-height:1.16;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-wrap:balance;
  /* no max-width: the column width IS the measure. Capping it at ~15ch
     inside a wider column is what left the dead gap in the first place. */
}
.hero-statement .stop{ color:var(--signal); }

.hero-copy{
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-soft);
  /* max-width:56ch; */
  font-weight: 600;
}

.hero-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}


/* 07  Buttons ============================================================= */

.btn{
  position:relative;
  isolation:isolate;               /* lets ::before sit above the background */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:62px;
  padding:0 16px 0 22px;
  border:1px solid var(--ink);
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  overflow:hidden;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}

/* fill wipes in from the left */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .42s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before{ transform:scaleX(1); }

/* circular icon badge — two stacked arrows that swap on hover */
.ico{
  position:relative;
  flex-shrink:0;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  overflow:hidden;
}
.ico svg{
  grid-area:1 / 1;
  width:12px;
  height:12px;
  transition:transform .4s var(--ease);
}
.ico svg:nth-child(2){ transform:translate(-150%, 150%); }
.btn:hover .ico svg:nth-child(1){ transform:translate(150%, -150%); }
.btn:hover .ico svg:nth-child(2){ transform:translate(0, 0); }

/* the down variant swaps on the vertical axis instead */
.ico--down svg:nth-child(2){ transform:translate(0, -170%); }
.btn:hover .ico--down svg:nth-child(1){ transform:translate(0, 170%); }
.btn:hover .ico--down svg:nth-child(2){ transform:translate(0, 0); }

/* solid → orange fill with INK text. White on #FF4600 is only 3.4:1;
   ink on orange is 5.5:1. */
.btn-solid{
  background:var(--ink);
  color:var(--paper-hi);
  border-color:var(--ink);
}
.btn-solid::before{ background:var(--signal); }
/* focus-visible must swap the text colour too — the ::before wipe fires on
   focus, and without this a keyboard user gets ink text on an ink fill */
.btn-solid:hover,
.btn-solid:focus-visible{ color:var(--ink); border-color:var(--signal); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
}
.btn-ghost::before{ background:var(--ink); }
.btn-ghost:hover,
.btn-ghost:focus-visible{ color:var(--paper-hi); }


/* 08  Dark transition strip =============================================== */
/* Placeholder for section 01 — proves the light→dark break and gives the
   hero something to scroll against. Replace when the real section lands. */

.next-strip{
  position:relative;
  background:var(--void);
  color:var(--void-text);
  min-height:62vh;
  display:flex;
  align-items:center;
  border-top:1px solid var(--void-line);
}
.next-tag{
  color:var(--signal);          /* on near-black: 7.5:1 */
  display:block;
  margin-bottom:18px;
}
.next-line{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(16px, 2vw, 26px);
  letter-spacing:-0.01em;
  color:var(--void-soft);
  max-width:32ch;
}


/* 09  Responsive ========================================================== */

@media (max-width: 1180px){
  .nav-status{ display:none; }
  .hero-band{ grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); }

  /* actions drop to their own full-width row — a left rule would be
     dangling, so it becomes a top rule instead */
  .hero-actions{
    grid-column:1 / -1;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
    margin-top:clamp(18px, 2.4vh, 26px);
  }
  .hero-actions .btn{ flex:1 1 250px; }
}

@media (max-width: 1000px){
  .nav-links{
    position:fixed;
    top:calc(var(--header-h) + 6px);
    left:var(--gutter);
    right:var(--gutter);
    max-width:min(calc(100vw - (var(--gutter) * 2)), 520px);
    margin-inline:auto;
    flex-direction:column;
    gap:0;
    background:rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter:saturate(1.8) blur(20px);
    backdrop-filter:saturate(1.8) blur(20px);
    border:1px solid var(--line);
    border-radius:20px;
    padding:8px 24px 16px;
    box-shadow:0 20px 48px -10px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04);
    clip-path:inset(0 0 100% 0);
    opacity:0;
    pointer-events:none;
    transition:clip-path .35s var(--ease), opacity .25s ease, transform .35s var(--ease), top .35s var(--ease);
    transform:translateY(-8px);
    z-index:100;
  }

  .site-header.is-stuck .nav-links{
    top:calc(70px + 5px + 8px);
  }

  .nav-links.is-open{
    clip-path:inset(0 0 0 0);
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-links a{
    font-size:13.5px;
    min-height:50px;
    border-bottom:1px solid var(--line);
    justify-content:space-between;
    color:var(--ink);
    font-weight:600;
  }
  .nav-links a:last-child{
    border-bottom:0;
  }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:flex; pointer-events:auto; }
  .nav-cta{ display:none; }
}

@media (max-width: 860px){
  /* 8.8vw, not a 36px floor. "BUILDING BRANDS" measures ~8.96em in Archivo
     900, so at a 320px viewport (280px of content) anything above ~31px
     overflows — which is exactly what the old clamp floor was doing. */
  :root{ --hl-size:clamp(23px, 8.8vw, 76px); }

  .hero-band{ grid-template-columns:1fr; }
  .hero-band > *{ padding-right:0; }

  .hero-copy{
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
    margin-top:15px;
    font-size:12.5px;
    line-height:1.6;
    max-width:none;
  }
  .hero-statement{ font-size:16px; }

  /* both buttons keep their labels, split the row evenly */
  .hero-actions{
    margin-top:15px;
    flex-wrap:nowrap;
    gap:8px;
  }
  .hero-actions .btn{
    flex:1 1 0;
    min-width:0;
    justify-content:center;
    text-align:center;
    padding:0 14px;
    min-height:58px;
    font-size:10.5px;
    letter-spacing:0.12em;
  }
  /* labels wrap to two lines rather than shrink further */
  .hero-actions .btn-label{ white-space:normal; }

  /* The icon badge costs ~52px per button (32px + the 20px gap). Two full
     labels plus two badges cannot fit a 320px row, and the labels matter
     more than the badges — so the badges are a desktop detail. */
  .hero-actions .ico{ display:none; }
}

@media (max-width: 640px){
  /* One word per line. Three lines left line 1 full-width against two stubs;
     four lines is an even stack — the words measure 4.10em–4.94em, a 17%
     spread — and it lets the type run ~2x larger, which is the whole point
     of a poster headline. Sized off "THROUGH" at 4.94em, the widest. */
  :root{ --hl-size:clamp(34px, 16.8vw, 118px); }

  .hero-title .w{ display:block; }
  .hero-title{ line-height:0.88; letter-spacing:-0.035em; }

  .hero-inner{ gap:20px; }
  .hero-band{ padding-top:0; }
  .hero-band > *{ padding-top:18px; }
}

@media (max-width: 560px){
  .hero{ padding-block:calc(var(--header-h) + 16px) 24px; }
  .hero-eyebrow{ margin-bottom:14px; }
  .hero-eyebrow .rule{ display:none; }
  .hero-statement{ font-size:16px; }
}


/* 10  Reduced motion & fallbacks ========================================== */

/* CSS-only glass stand-in — revealed by JS when WebGL can't run */
.hero-fallback{
  position:absolute;
  top:50%;
  left:50%;
  width:min(58vw, 540px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  z-index:2;
  display:none;
  border-radius:50%;
  opacity:.5;
  filter:blur(38px) saturate(1.6);
  background:
    conic-gradient(from 210deg,
      rgba(255, 70, 0, .5), rgba(120, 170, 255, .5), rgba(255, 255, 255, .9),
      rgba(180, 120, 255, .45), rgba(20, 19, 16, .6), rgba(255, 70, 0, .5));
  animation:fbDrift 24s linear infinite;
}
.no-webgl .hero-fallback{ display:block; }
.no-webgl #glassCanvas{ display:none; }

@keyframes fbDrift{
  to{ transform:translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .js .hero-eyebrow,
  .js .hero-band{ opacity:1; transform:none; }

  .js .hero-title .ln{ clip-path:none; }
}