/* =========================================================
   ADINATH INFRA SOLUTIONS — adinathinfra.com
   Design system: Modern Dark (Cinema) + warm brass accent
   Type: Cormorant Garamond (display) / Inter Tight (UI) / JetBrains Mono (labels)
   ========================================================= */

/* ---------------- TOKENS ---------------- */
:root{
  /* surface */
  --bg:            #0B0B0C;
  --bg-2:          #101012;
  --bg-3:          #151518;
  --surface:       #131316;
  --surface-2:     #191A1E;
  --light:         #F4F1EC;
  --light-2:       #EAE5DD;

  /* ink */
  --ink:           #F2EFEA;
  --ink-2:         #B9B4AC;
  --ink-3:         #7C7871;
  --ink-dark:      #14141A;
  --ink-dark-2:    #4A4841;

  /* accent */
  --gold:          #C8A15A;
  --gold-2:        #E0C286;
  --gold-3:        #8E7038;
  --gold-glow:     rgba(200,161,90,.28);

  /* lines */
  --line:          rgba(242,239,234,.10);
  --line-2:        rgba(242,239,234,.16);
  --line-dark:     rgba(20,20,26,.12);

  /* type scale (fluid) */
  --fs-xs:   clamp(.68rem, .64rem + .18vw, .78rem);
  --fs-sm:   clamp(.82rem, .78rem + .22vw, .92rem);
  --fs-base: clamp(1rem, .95rem + .28vw, 1.08rem);
  --fs-lg:   clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-2xl:  clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-3xl:  clamp(2.4rem, 1.5rem + 4vw, 5rem);
  --fs-4xl:  clamp(2.9rem, 1.4rem + 6.4vw, 7.6rem);

  /* spacing (density 4/10 — standard-spacious) */
  --sp-1: 6px;  --sp-2: 12px; --sp-3: 20px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 72px; --sp-7: 104px; --sp-8: 148px;

  --sec-y: clamp(84px, 11vw, 168px);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1360px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 30px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.76,0,.24,1);

  /* nav sits ABOVE the mobile menu so the close (burger) stays reachable */
  --z-nav: 520; --z-menu: 500; --z-bar: 450;
  --z-cursor: 900; --z-lb: 800; --z-pre: 1000;
}

/* ---------------- RESET ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  font-weight:300;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.menu-open{ overflow:hidden; }
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; object-fit:cover; background:var(--bg-3); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--gold); color:#0B0B0C; }

:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
  border-radius:2px;
}

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

.h-display{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:300;
  font-size:var(--fs-3xl);
  line-height:1.02;
  letter-spacing:-.02em;
}
.h-display i{ font-style:italic; color:var(--gold); }
.h-display b{ font-weight:500; }

.sec-label{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:var(--fs-xs); font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--sp-4);
}
.sec-label i{ width:44px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); display:block; }
.sec-label--light{ color:var(--gold-2); }

.sec-head{ max-width:820px; margin-bottom:var(--sp-6); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .sec-label{ justify-content:center; }
.sec-head__note{ margin-top:var(--sp-3); color:var(--ink-2); max-width:56ch; font-size:var(--fs-lg); line-height:1.6; }
.sec-head--center .sec-head__note{ margin-inline:auto; }

.lead{ font-size:var(--fs-lg); color:var(--ink); line-height:1.6; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family:'JetBrains Mono', monospace;
  font-size:var(--fs-sm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); padding-bottom:8px;
  border-bottom:1px solid rgba(200,161,90,.3);
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow svg{ width:18px; height:18px; }
.link-arrow:hover{ gap:16px; border-color:var(--gold); }

/* ---------------- BUTTONS ---------------- */
.btn{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:16px 30px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:100px;
  font-family:'Inter Tight',sans-serif;
  font-size:var(--fs-sm); font-weight:500; letter-spacing:.03em;
  text-align:center; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; flex:none; position:relative; z-index:2; }
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:1;
  background:var(--gold-2);
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:scaleY(1); transform-origin:top center; }
.btn:hover{ color:#0B0B0C; border-color:var(--gold-2); }
.btn:active{ transform:scale(.97); }

.btn--gold{ --btn-bg:var(--gold); --btn-fg:#0B0B0C; --btn-bd:var(--gold); font-weight:600; box-shadow:0 8px 34px -12px var(--gold-glow); }
.btn--gold::before{ background:#F2EFEA; }
.btn--gold:hover{ color:#0B0B0C; border-color:#F2EFEA; }

.btn--outline{ --btn-bd:var(--line-2); }
.btn--ghost{ --btn-bd:rgba(242,239,234,.22); --btn-fg:var(--ink-2); }
.btn--sm{ min-height:44px; padding:12px 22px; font-size:var(--fs-xs); }
.btn--lg{ min-height:60px; padding:19px 38px; font-size:var(--fs-base); }
.btn--block{ display:flex; width:100%; }

.magnetic{ will-change:transform; }

/* ---------------- PRELOADER ---------------- */
.preloader{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:var(--z-pre);
  background:none;              /* the panels below ARE the backdrop */
  overflow:hidden;
}
.preloader__canvas{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  width:100%; height:100%; display:block; z-index:2;
}
.preloader__grid{
  position:absolute; top:-20%; right:-20%; bottom:-20%; left:-20%; inset:-20%; z-index:1;
  background-image:
    linear-gradient(rgba(200,161,90,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,161,90,.055) 1px, transparent 1px);
  background-size:58px 58px;
  animation:gridDrift 26s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 12%, transparent 66%);
  mask-image:radial-gradient(circle at 50% 45%, #000 12%, transparent 66%);
}
@keyframes gridDrift{ to{ transform:translate(58px,58px); } }

.preloader__vignette{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,9,11,.72) 0%, rgba(9,9,11,0) 26%, rgba(9,9,11,0) 58%, rgba(9,9,11,.94) 100%);
}

/* --- wordmark, top left --- */
.preloader__plan{
  position:absolute; z-index:2; left:50%; top:46%;
  width:min(62vw, 420px); height:auto;
  transform:translate(-50%,-50%);
  opacity:1; transition:opacity .8s var(--ease);
}
.preloader__plan .pl-plan path{
  stroke:var(--gold); stroke-width:2; stroke-linecap:square;
  stroke-dasharray:280; stroke-dashoffset:280;
  animation:planDraw 1.1s var(--ease) forwards;
  filter:drop-shadow(0 0 6px rgba(200,161,90,.45));
}
.preloader__plan .pl-plan path:nth-child(1){ animation-delay:.15s }
.preloader__plan .pl-plan path:nth-child(2){ animation-delay:.32s }
.preloader__plan .pl-plan path:nth-child(3){ animation-delay:.49s }
.preloader__plan .pl-plan path:nth-child(4){ animation-delay:.66s }
.preloader__plan .pl-plan path:nth-child(5){ animation-delay:.88s }
.preloader__plan .pl-plan path:nth-child(6){ animation-delay:1.02s }
.preloader__plan .pl-plan path:nth-child(7){ animation-delay:1.16s }
.preloader__plan .pl-plan path:nth-child(8){ animation-delay:1.30s }
.preloader__plan .pl-plan path:nth-child(9){ animation-delay:1.40s }
.preloader__plan .pl-dim path{
  stroke:rgba(200,161,90,.4); stroke-width:1;
  stroke-dasharray:280; stroke-dashoffset:280;
  animation:planDraw 1s var(--ease) 1.5s forwards;
}
@keyframes planDraw{ to{ stroke-dashoffset:0; } }
/* once the WebGL scene is live the flat plan steps aside */
.preloader.pre-3d .preloader__plan{ opacity:0; }

.preloader__brand{
  position:absolute; z-index:4; top:clamp(24px,4vh,44px); left:var(--gutter);
  display:flex; align-items:center; gap:13px; color:var(--gold);
}
.preloader__brand svg{ width:38px; height:38px; }
.pl-draw{
  fill:none; stroke-dasharray:180; stroke-dashoffset:180;
  animation:plDraw 1.5s var(--ease) forwards;
}
.pl-draw:nth-child(2){ animation-delay:.35s; }
@keyframes plDraw{ to{ stroke-dashoffset:0; } }
.preloader__brand span{ display:flex; flex-direction:column; line-height:1; color:var(--ink); }
.preloader__brand strong{
  font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:500; letter-spacing:.19em;
}
.preloader__brand em{
  font-family:'JetBrains Mono',monospace; font-style:normal; font-size:8px;
  letter-spacing:.3em; color:var(--ink-3); margin-top:6px;
}

/* --- progress block, bottom --- */
.preloader__foot{
  position:absolute; z-index:4; left:var(--gutter); right:var(--gutter);
  bottom:clamp(26px,5vh,52px);
}
.preloader__stage{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.preloader__stageNum{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--gold);
}
.preloader__stageText{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(1.4rem,4.4vw,2.2rem); line-height:1.1; color:var(--ink);
  letter-spacing:-.01em;
}
.preloader__bar{ height:1px; background:rgba(242,239,234,.12); overflow:hidden; }
.preloader__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2));
  box-shadow:0 0 12px rgba(200,161,90,.6);
}
.preloader__meta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:13px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.preloader__count{ color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums; }
.preloader__count b{ font-weight:400; }

/* Backdrop AND exit curtain. Must stay at z-index 0: at rest these panels
   are opaque, so anything above them is hidden — which is exactly what was
   blanking the whole loading screen. On exit they slide up and reveal the page. */
.preloader__panels{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:flex; z-index:0; pointer-events:none;
}
.preloader__panels i{
  flex:1; transform:translateY(0);
  background:
    radial-gradient(160% 85% at 55% 40%, rgba(200,161,90,.10), transparent 60%),
    linear-gradient(180deg,#0E0E11 0%,#09090B 100%);
}

body.loaded .preloader{ pointer-events:none; }

@media (max-width:600px){
  .preloader__brand em{ display:none; }
  .preloader__meta span:first-child{ display:none; }
  .preloader__meta{ justify-content:flex-end; }
}

/* ---------------- CURSOR ---------------- */
.cursor{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; mix-blend-mode:difference; opacity:0; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--light); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(244,241,236,.5);
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  transition:width .35s var(--ease), height .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.cursor__label{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#0B0B0C; opacity:0; transition:opacity .25s;
  white-space:nowrap;
}
.cursor.is-link .cursor__ring{ width:60px; height:60px; border-color:var(--light); }
.cursor.is-cta .cursor__ring{ width:76px; height:76px; background:var(--light); border-color:var(--light); }
.cursor.is-view .cursor__ring,
.cursor.is-drag .cursor__ring{ width:88px; height:88px; background:var(--light); border-color:var(--light); }
.cursor.is-view .cursor__label,
.cursor.is-drag .cursor__label,
.cursor.is-cta .cursor__label{ opacity:1; }
.cursor.is-view .cursor__dot,
.cursor.is-drag .cursor__dot,
.cursor.is-cta .cursor__dot{ opacity:0; }

/* ---------------- SCROLL PROGRESS ---------------- */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:var(--z-bar);
  background:rgba(242,239,234,.05);
}
.scrollbar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-3),var(--gold-2)); }

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding:22px 0;
  transition:padding .5s var(--ease), background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:12px 0;
  background:rgba(11,11,12,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-100%); }
/* While the menu is open the bar must stay visible and chrome-free */
body.menu-open .nav{
  transform:none !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom-color:transparent !important;
}
.nav{ transition:transform .5s var(--ease), padding .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease); }

.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
.nav__logo{ display:flex; align-items:center; gap:12px; min-height:48px; color:var(--gold); flex:none; }
/* Whatever logo file is uploaded is constrained by HEIGHT and lets its own
   width follow, so any aspect ratio sits correctly without distortion. */
.brandmark{
  height:clamp(30px,3.4vw,42px); width:auto;
  max-width:min(58vw,240px); object-fit:contain; display:block;
}
.brandmark--lg{ height:clamp(36px,4vw,52px); max-width:min(70vw,280px); }
.brandfallback{ display:flex; align-items:center; gap:12px; }
.brandfallback[hidden]{ display:none; }
.nav__logo svg{ width:34px; height:34px; }
.nav__logo-text{ display:flex; flex-direction:column; line-height:1; color:var(--ink); }
.nav__logo-text strong{ font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:500; letter-spacing:.16em; }
.nav__logo-text em{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:8px; letter-spacing:.28em; color:var(--ink-3); margin-top:4px; }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); }
.nav__links a{
  position:relative; font-size:var(--fs-sm); font-weight:400; color:var(--ink-2);
  padding:6px 0; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--gold); }

.nav__actions{ display:flex; align-items:center; gap:var(--sp-2); flex:none; }
.nav__call{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs); letter-spacing:.06em;
  color:var(--ink-2); padding:8px 4px; transition:color .3s;
}
.nav__call svg{ width:16px; height:16px; color:var(--gold); }
.nav__call:hover{ color:var(--ink); }

.nav__burger{
  display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%;
  place-items:center; flex-direction:column; gap:5px; flex:none;
}
.nav__burger i{ display:block; width:17px; height:1px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s; }
.nav__burger.is-open i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger.is-open i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ---------------- MOBILE MENU ---------------- */
.mmenu{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:var(--z-menu);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(88px + env(safe-area-inset-top)) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  visibility:hidden; pointer-events:none;
}
.mmenu.is-open{ visibility:visible; pointer-events:auto; }
.mmenu__bg{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:var(--bg-2);
  -webkit-clip-path:circle(0% at 92% 5%); clip-path:circle(0% at 92% 5%);
  transition:clip-path .8s var(--ease-io);
}
.mmenu__bg::after{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  background-image:linear-gradient(rgba(200,161,90,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,161,90,.05) 1px,transparent 1px);
  background-size:48px 48px;
}
.mmenu.is-open .mmenu__bg{ -webkit-clip-path:circle(150% at 92% 5%); clip-path:circle(150% at 92% 5%); }

.mmenu__list{ position:relative; display:flex; flex-direction:column; gap:2px; margin-bottom:auto; margin-top:auto; }
.mmenu__list a{
  display:flex; align-items:baseline; gap:16px;
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(1.8rem,8vw,2.6rem); line-height:1.32;
  color:var(--ink); opacity:0; transform:translateY(24px);
  min-height:48px;
}
.mmenu.is-open .mmenu__list a{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .7s var(--ease); }
.mmenu.is-open .mmenu__list a:nth-child(1){ transition-delay:.28s; }
.mmenu.is-open .mmenu__list a:nth-child(2){ transition-delay:.34s; }
.mmenu.is-open .mmenu__list a:nth-child(3){ transition-delay:.40s; }
.mmenu.is-open .mmenu__list a:nth-child(4){ transition-delay:.46s; }
.mmenu.is-open .mmenu__list a:nth-child(5){ transition-delay:.52s; }
.mmenu.is-open .mmenu__list a:nth-child(6){ transition-delay:.58s; }
.mmenu.is-open .mmenu__list a:nth-child(7){ transition-delay:.64s; }
.mmenu__list em{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:11px; color:var(--gold); letter-spacing:.14em; }

.mmenu__foot{ position:relative; display:flex; flex-direction:column; gap:10px; padding-top:var(--sp-4); border-top:1px solid var(--line); }
.mmenu__foot p{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.08em; text-align:center; margin-top:6px; }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  /* bottom padding clears the scroll cue + blueprint readout */
  padding:calc(122px + env(safe-area-inset-top)) 0 clamp(96px,13vh,140px);
  overflow:hidden; isolation:isolate;
}
/* canvas is alpha-transparent, so the gradient below stays visible and also
   acts as the fallback if the WebGL module never runs */
.hero__canvas{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; z-index:1; display:block; }
.hero__fallback{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(200,161,90,.18), transparent 55%),
    radial-gradient(90% 70% at 20% 80%, rgba(60,70,90,.22), transparent 60%),
    linear-gradient(180deg,#0E0E11,#0B0B0C);
}
.hero__vignette{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,12,.7) 0%, rgba(11,11,12,0) 26%, rgba(11,11,12,.22) 52%, rgba(11,11,12,.92) 100%),
    linear-gradient(90deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.55) 34%, rgba(11,11,12,0) 62%),
    radial-gradient(150% 110% at 55% 45%, transparent 48%, rgba(11,11,12,.7) 100%);
}
.hero__scanline{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hero__content{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
  padding:9px 18px 9px 14px; border:1px solid var(--line-2); border-radius:100px;
  background:rgba(11,11,12,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  margin-bottom:var(--sp-4);
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--gold); position:relative; flex:none; }
.pulse::after{ content:''; position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; inset:-4px; border-radius:50%; border:1px solid var(--gold); animation:pulseRing 2.4s var(--ease) infinite; }
@keyframes pulseRing{ 0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.7);opacity:0} }

.hero__title{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:var(--fs-4xl); line-height:.96; letter-spacing:-.025em;
  margin-bottom:var(--sp-4); max-width:16ch;
}
.hero__title i{ font-style:italic; color:var(--gold); }
.hero__title b{ font-weight:500; position:relative; }
.hero__title b::after{
  content:''; position:absolute; left:0; bottom:.1em; width:100%; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  animation:underlineIn 1s var(--ease) 1.7s forwards;
}
@keyframes underlineIn{ to{ transform:scaleX(1); } }

.hero__sub{
  font-size:var(--fs-lg); color:var(--ink-2); max-width:52ch;
  line-height:1.6; margin-bottom:var(--sp-5);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:var(--sp-6); }

.hero__proof{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,3vw,40px);
  padding-top:var(--sp-4); border-top:1px solid var(--line);
  max-width:820px;
}
.hero__proof li{ display:flex; align-items:baseline; gap:10px; }
.hero__proof strong{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(1.7rem,4.2vw,2.7rem); line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.hero__proof span{
  font-family:'JetBrains Mono',monospace; font-size:9px; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

.hero__scroll{
  position:absolute; left:var(--gutter); bottom:clamp(18px,3vh,34px); z-index:3;
  display:flex; align-items:center; gap:14px;
}
.hero__scroll-line{ width:1px; height:52px; background:var(--line-2); position:relative; overflow:hidden; display:block; }
.hero__scroll-line i{ position:absolute; top:0; left:0; width:100%; height:40%; background:var(--gold); animation:scrollDrop 2.2s var(--ease) infinite; }
@keyframes scrollDrop{ 0%{transform:translateY(-100%)} 100%{transform:translateY(250%)} }
.hero__scroll-text{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

.hero__blueprint{
  position:absolute; right:var(--gutter); bottom:clamp(18px,3vh,34px); z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.18em;
  color:var(--ink-3); text-align:right;
}
.hero__blueprint span:first-child{ color:var(--gold-3); }

/* ---------------- MARQUEE ---------------- */
.marquee{
  border-block:1px solid var(--line);
  background:var(--bg-2);
  overflow:hidden; padding:22px 0;
}
.marquee__track{ display:flex; width:max-content; }
.marquee__set{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.marquee__set span{
  font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.marquee__set i{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none; }

/* ---------------- STORY ---------------- */
.story{ position:relative; padding-block:var(--sec-y); overflow:hidden; }
.story__bgnum{
  position:absolute; top:6%; right:-2%;
  font-family:'Cormorant Garamond',serif; font-size:clamp(14rem,32vw,30rem);
  line-height:.7; color:rgba(242,239,234,.022); pointer-events:none; z-index:0; font-weight:300;
}
.story .container{ position:relative; z-index:1; }

.story__statement{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:var(--fs-3xl); line-height:1.06; letter-spacing:-.02em;
  margin-bottom:var(--sp-7); max-width:19ch;
}
.story__statement i{ font-style:italic; color:var(--ink-3); }
.story__statement b{ font-weight:500; color:var(--gold); }

.story__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,6vw,110px); align-items:start; }
.story__col p{ color:var(--ink-2); margin-bottom:var(--sp-3); max-width:48ch; }
.story__col .lead{ color:var(--ink); margin-bottom:var(--sp-4); }
.story__col .link-arrow{ margin-top:var(--sp-3); }

.story__media{ position:relative; padding-bottom:14%; }
.story__img{ position:relative; overflow:hidden; border-radius:var(--r-md); }
.story__img img{ width:100%; height:100%; object-fit:cover; }
.story__img--a{ width:78%; aspect-ratio:4/5; }
.story__img .reveal-img{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; }
.story__img--b{ position:absolute; right:0; bottom:0; width:52%; aspect-ratio:4/5; border:6px solid var(--bg); border-radius:var(--r-md); }


.story__stamp{
  position:absolute; left:58%; top:38%; width:clamp(96px,13vw,140px); aspect-ratio:1;
  display:grid; place-items:center; z-index:4;
  background:var(--bg); border-radius:50%; border:1px solid var(--line-2);
}
.story__stamp svg{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; animation:spin 24s linear infinite; }
.story__stamp text{ font-family:'JetBrains Mono',monospace; font-size:8.4px; letter-spacing:.14em; fill:var(--ink-3); }
.story__stamp b{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:400; color:var(--gold); line-height:1; }
.story__stamp b em{ display:block; font-family:'JetBrains Mono',monospace; font-style:normal; font-size:8px; letter-spacing:.2em; color:var(--ink-3); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- STICKY 3D STAGE TRACK ----------------
   Native `position: sticky` instead of a JS pin. A JS pin bakes its scroll
   distance from window.innerHeight at creation time, which Android changes
   every time the URL bar hides — desyncing the pin from its spacer so the
   section scrolls past while the scene barely moves. Sticky cannot desync,
   needs no spacer, and behaves identically on every device. */
.stage3d{ position:relative; }
.stage3d > .build__stage,
.stage3d > .fit__stage{ position:sticky; top:0; }

/* Scroll runway the scene is scrubbed against. Sized so each of the eight
   stages gets roughly 300–470px of scroll — under ~250px they blur past. */
.stage3d{ height:520vh; }
@media (max-width:860px){ .stage3d{ height:440vh; } }
@media (max-width:600px){ .stage3d{ height:400vh; } }

/* ---------------- 3D CONSTRUCTION SEQUENCE ---------------- */
.build{
  position:relative; background:var(--bg-2);
  border-block:1px solid var(--line);
  padding-top:var(--sec-y);
}
.build__intro{ padding-bottom:var(--sp-5); max-width:900px; }
.build__intro .h-display{ max-width:15ch; }
.build__intro .sec-head__note{ margin-top:var(--sp-3); }

.build__stage{
  position:relative; width:100%; height:100vh; height:100svh; min-height:520px;
  overflow:hidden; background:
    radial-gradient(120% 90% at 60% 15%, rgba(200,161,90,.10), transparent 58%),
    radial-gradient(90% 70% at 15% 85%, rgba(70,92,124,.16), transparent 62%),
    linear-gradient(180deg,#0D0D10,#0A0A0C);
}
.build__canvas{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; display:block; }

/* always drawn, so a device that cannot run the 3D module still gets a
   designed blueprint backdrop rather than an empty box */
.build__fallbackArt{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; opacity:.55; transition:opacity .6s var(--ease);
  background-image:
    linear-gradient(rgba(200,161,90,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,161,90,.08) 1px,transparent 1px);
  background-size:56px 56px;
}
.build__stage.is-ready .build__fallbackArt{ opacity:.3; }
.build__stage.is-ready .build__fallbackArt{ opacity:.28; }
.build__stage.is-fallback .build__fallbackArt{ opacity:1; }
.build__stage.is-fallback .build__hint{ display:none; }

/* HUD */
.build__hud{
  position:absolute; top:auto; right:0; bottom:0; left:0; inset:auto 0 0 0; z-index:3; pointer-events:none;
  padding:0 var(--gutter) clamp(22px,4vh,44px);
  display:grid; gap:clamp(14px,2vh,22px);
}
.build__phase{
  display:flex; align-items:flex-start; gap:18px;
  max-width:560px;
  background:rgba(11,11,12,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(16px,2vw,24px);
}
.build__num{
  font-family:'JetBrains Mono',monospace; font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1; color:var(--gold); font-weight:300; flex:none;
}
.build__phase h3{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:var(--fs-xl); line-height:1.1; margin-bottom:6px;
}
.build__phase p{ color:var(--ink-2); font-size:var(--fs-sm); line-height:1.6; }

.build__steps{ display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,20px); }
.build__steps li{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  transition:color .4s var(--ease);
}
.build__steps li i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--line-2); transition:background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.build__steps li.is-on{ color:var(--ink-2); }
.build__steps li.is-on i{ background:var(--gold); }
.build__steps li.is-now{ color:var(--gold); }
.build__steps li.is-now i{ transform:scale(1.5); box-shadow:0 0 0 4px rgba(200,161,90,.18); }

.build__progress{ height:2px; background:rgba(242,239,234,.09); overflow:hidden; }
.build__progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-3),var(--gold-2)); }

.build__hint{
  position:absolute; top:calc(var(--gutter) + 8px); right:var(--gutter); z-index:3;
  display:flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  padding:9px 16px; border:1px solid var(--line); border-radius:100px;
  background:rgba(11,11,12,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.build__hintDot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:hintPulse 1.8s var(--ease) infinite; }
@keyframes hintPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

.build__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3); padding-block:var(--sp-5) var(--sec-y);
}
.build__footNote{ color:var(--ink-2); font-size:var(--fs-base); max-width:56ch; }

@media (max-width:860px){
  .build__stage{ height:78vh; height:78svh; min-height:440px; }
  .build__phase{ max-width:none; gap:14px; }
  .build__steps li span{ display:none; }
  .build__steps{ gap:12px; }
  .build__steps li i{ width:8px; height:8px; }
  .build__hint{ top:auto; bottom:calc(100% + 0px); right:auto; left:var(--gutter); display:none; }
  .build__foot{ flex-direction:column; align-items:flex-start; }
  .build__foot .btn{ width:100%; }
}

/* ---------------- INTERIOR FIT-OUT (3D) ----------------
   Shares the build section's structure but runs warmer and lighter, so
   the two 3D chapters never read as the same section twice. */
.fit{
  position:relative; background:var(--bg);
  border-block:1px solid var(--line);
  padding-top:var(--sec-y);
}
.fit__intro{ padding-bottom:var(--sp-5); max-width:900px; }
.fit__intro .h-display{ max-width:15ch; }
.fit__intro .sec-head__note{ margin-top:var(--sp-3); }

.fit__stage{
  position:relative; width:100%;
  height:100vh; height:100svh; min-height:520px;
  overflow:hidden;
  background:
    radial-gradient(110% 80% at 40% 20%, rgba(200,161,90,.13), transparent 58%),
    radial-gradient(90% 70% at 85% 90%, rgba(150,120,80,.10), transparent 62%),
    linear-gradient(180deg,#131013 0%,#0C0B0C 100%);
}
.fit__canvas{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  width:100%; height:100%; display:block;
}
.fit__fallbackArt{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  opacity:.5; transition:opacity .6s var(--ease);
  background-image:
    linear-gradient(rgba(200,161,90,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,161,90,.07) 1px, transparent 1px);
  background-size:48px 48px;
}
.fit__stage.is-ready .fit__fallbackArt{ opacity:.24; }
.fit__stage.is-fallback .fit__fallbackArt{ opacity:1; }
.fit__stage.is-fallback .fit__hint{ display:none; }

.fit__hud{
  position:absolute; top:auto; right:0; bottom:0; left:0; inset:auto 0 0 0;
  z-index:3; pointer-events:none;
  padding:0 var(--gutter) clamp(22px,4vh,44px);
  display:grid; gap:clamp(14px,2vh,22px);
}
.fit__phase{
  display:flex; align-items:flex-start; gap:18px; max-width:560px;
  background:rgba(14,12,13,.62);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(16px,2vw,24px);
}
.fit__num{
  font-family:'JetBrains Mono',monospace; font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1; color:var(--gold); font-weight:300; flex:none;
}
.fit__phase h3{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:var(--fs-xl); line-height:1.1; margin-bottom:6px;
}
.fit__phase p{ color:var(--ink-2); font-size:var(--fs-sm); line-height:1.6; }

.fit__steps{ display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,20px); }
.fit__steps li{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  transition:color .4s var(--ease);
}
.fit__steps li i{
  width:7px; height:7px; border-radius:50%; flex:none; background:var(--line-2);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.fit__steps li.is-on{ color:var(--ink-2); }
.fit__steps li.is-on i{ background:var(--gold); }
.fit__steps li.is-now{ color:var(--gold); }
.fit__steps li.is-now i{ transform:scale(1.5); box-shadow:0 0 0 4px rgba(200,161,90,.18); }

.fit__progress{ height:2px; background:rgba(242,239,234,.09); overflow:hidden; }
.fit__progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-3),var(--gold-2)); }

.fit__hint{
  position:absolute; top:calc(var(--gutter) + 8px); right:var(--gutter); z-index:3;
  display:flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  padding:9px 16px; border:1px solid var(--line); border-radius:100px;
  background:rgba(14,12,13,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.fit__hintDot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:hintPulse 1.8s var(--ease) infinite; }

.fit__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding-block:var(--sp-5) var(--sec-y);
}
.fit__facts{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); }
.fit__facts strong{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(1.9rem,4vw,2.8rem); line-height:1; color:var(--gold); margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.fit__facts span{
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:block; max-width:22ch; line-height:1.6;
}

@media (max-width:860px){
  .fit__stage{ height:78vh; height:78svh; min-height:440px; }
  .fit__phase{ max-width:none; gap:14px; }
  .fit__steps li span{ display:none; }
  .fit__steps{ gap:12px; }
  .fit__steps li i{ width:8px; height:8px; }
  .fit__hint{ display:none; }
  .fit__foot{ flex-direction:column; align-items:flex-start; }
  .fit__facts{ gap:22px 32px; }
  .fit__foot .btn{ width:100%; }
}

/* ---------------- TEXT HIGHLIGHTS ---------------- */
mark.hl{
  background:none; color:inherit; position:relative;
  white-space:normal; padding:0 .06em;
}
mark.hl::before{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.42em; z-index:-1;
  background:linear-gradient(90deg, rgba(200,161,90,.42), rgba(200,161,90,.16));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1s var(--ease) .25s;
  border-radius:2px;
}
mark.hl.is-lit::before{ transform:scaleX(1); }
mark.hl--solid{ color:var(--gold); }

/* ---------------- TYPING ---------------- */
.type{ display:inline-block; position:relative; }
.type--hero{ color:var(--gold); font-style:italic; }
.type__cursor{
  display:inline-block; width:2px; height:.92em; vertical-align:-.08em;
  background:var(--gold); margin-left:4px;
  animation:caret 1s steps(1) infinite;
}
@keyframes caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ---------------- ANIMATED ICONS ---------------- */
.ico-draw path,.ico-draw circle,.ico-draw rect,.ico-draw line,.ico-draw polyline{
  stroke-dasharray:var(--len,120); stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset 1.2s var(--ease);
}
.ico-draw.is-drawn path,.ico-draw.is-drawn circle,.ico-draw.is-drawn rect,
.ico-draw.is-drawn line,.ico-draw.is-drawn polyline{ stroke-dashoffset:0; }

/* ---------------- BACKGROUND TEXTURE ---------------- */
body::before{
  content:''; position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:1; pointer-events:none;
  opacity:.032; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- JOURNEY: WINDING ROAD ---------------- */
.road{
  position:relative; padding-block:var(--sec-y);
  background:var(--bg-2); border-block:1px solid var(--line); overflow:hidden;
}
.road__head{ max-width:900px; margin-bottom:var(--sp-5); }
.road__head .h-display{ max-width:16ch; }

.road__wrap{
  position:relative; width:100%;
  height:clamp(660px, 54vw, 800px);
  padding-inline:var(--gutter);
}
.road__svg{ position:absolute; top:0; right:var(--gutter); bottom:0; left:var(--gutter); inset:0 var(--gutter); width:calc(100% - var(--gutter)*2); height:100%; overflow:visible; }
.road__base{
  fill:none; stroke:rgba(242,239,234,.10); stroke-width:14;
  stroke-linecap:round; stroke-linejoin:round;
}
.road__fill{
  fill:none; stroke:var(--gold); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(200,161,90,.45));
}

/* Must share the SVG's inset — otherwise every marker is offset from the
   curve by one gutter. Items are positioned by JS on desktop. */
.road__stops{ position:absolute; top:0; right:var(--gutter); bottom:0; left:var(--gutter); inset:0 var(--gutter); list-style:none; }
.stop{ position:absolute; top:0; left:0; }

/* Circular marker centred exactly on the path point. A teardrop needs a
   rotate(), which shifts the element's anchor and desyncs it from the curve. */
.stop__pin{
  position:absolute; z-index:4;
  width:46px; height:46px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--gold);
  border:1px solid rgba(200,161,90,.5);
  opacity:0; transition:opacity .5s var(--ease), transform .6s var(--ease);
  box-shadow:0 0 0 6px rgba(11,11,12,.85), 0 14px 30px -10px rgba(0,0,0,.85);
}
.stop__pin svg{ width:20px; height:20px; }
.stop__pin b{
  position:absolute; top:-8px; right:-12px;
  min-width:22px; height:22px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--gold); color:#0B0B0C; border-radius:100px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500;
}
.stop__pin--gold{ background:var(--gold); color:#0B0B0C; border-color:var(--gold); }
.stop__pin--gold b{ background:#0B0B0C; color:var(--gold-2); }
.stop.is-on .stop__pin{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.stop__leader{
  position:absolute; z-index:1; width:1px;
  background:linear-gradient(180deg, rgba(200,161,90,.5), rgba(200,161,90,.05));
  transform-origin:top center; transform:scaleY(0);
  transition:transform .6s var(--ease) .1s;
}
.stop.is-on .stop__leader{ transform:scaleY(1); }

.stop__card{
  position:absolute; z-index:3; width:clamp(210px,17vw,255px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px 20px;
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease) .12s, transform .6s var(--ease) .12s, border-color .4s var(--ease);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
}
.stop.is-on .stop__card{ opacity:1; transform:none; }
.stop__card:hover{ border-color:rgba(200,161,90,.4); }
.stop__card header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.stop__no{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.stop__time{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
  color:var(--ink-3); white-space:nowrap;
}
.stop__card h3{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:1.22rem; line-height:1.16; letter-spacing:-.01em; margin-bottom:12px;
}
.stop__gate{
  display:flex; align-items:center; gap:8px;
  padding-top:11px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-2); line-height:1.4;
}
.stop__gate svg{ width:15px; height:15px; color:var(--gold); flex:none; }
.stop__card--gold{ border-color:rgba(200,161,90,.38); background:linear-gradient(180deg,rgba(200,161,90,.09),var(--surface)); }

.road__pay{
  position:absolute; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:100px; white-space:nowrap;
  background:rgba(200,161,90,.14); border:1px solid rgba(200,161,90,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.1em; color:var(--gold-2);
  transform:translate(-50%,-50%) scale(.7); opacity:0;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.road__pay i{
  font-style:normal; width:19px; height:19px; border-radius:50%;
  background:var(--gold); color:#0B0B0C; display:grid; place-items:center;
  font-size:10px; font-weight:700; flex:none;
}
.road__pay.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.road__pill{
  position:absolute; z-index:5;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:100px; white-space:nowrap;
  background:rgba(11,11,12,.72); border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  transform:translate(-50%,-50%) scale(.75); opacity:0;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.road__pill i{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.road__pill--end i{ background:#5BD066; }
.road__pill.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.road__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-top:var(--sp-5);
  padding-top:var(--sp-4); border-top:1px solid var(--line);
}
.road__gateNote,.road__payNote{
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-sm); color:var(--ink-2);
}
.road__gateNote svg{ width:18px; height:18px; color:var(--gold); flex:none; }
.road__payNote i{
  font-style:normal; width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:#0B0B0C; display:grid; place-items:center;
  font-size:11px; font-weight:700; flex:none;
}
.road__payNote b{ color:var(--gold); font-weight:600; letter-spacing:.04em; }

/* ---- vertical fallback: tablet & phone ---- */
@media (max-width:1024px){
  .road__wrap{ height:auto; padding-inline:var(--gutter); }
  .road__svg,.road__pill{ display:none; }

  .road__stops{ position:static; display:grid; gap:14px; padding-left:34px; }
  .road__stops::before{
    content:''; position:absolute; left:calc(var(--gutter) + 13px); top:10px; bottom:10px;
    width:2px; background:linear-gradient(180deg,var(--gold),rgba(200,161,90,.12));
  }
  .stop{ position:relative; top:auto; left:auto; }

  .stop__leader{ display:none; }
  .stop__pin{
    position:absolute; left:-34px; top:14px;
    transform:none;
    width:28px; height:28px; border-radius:50%;
    opacity:1; transition:none;
  }
  .stop__pin > *{ rotate:0deg; }
  .stop__pin svg{ display:none; }
  .stop__pin b{
    position:static; background:none; color:var(--gold);
    min-width:auto; height:auto; padding:0; font-size:10px;
  }
  .stop__pin--gold b{ color:#0B0B0C; }

  .stop__card{
    position:relative; width:100%;
    opacity:0; transform:translateY(20px);
  }
  .stop.is-on .stop__card,
  .stop__card{ transition:opacity .6s var(--ease), transform .6s var(--ease); }

  .road__pay{
    position:relative; transform:none; opacity:1;
    margin:2px 0 2px 34px; align-self:flex-start;
  }
  .road__pay.is-on{ transform:none; }
  .road__foot{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:760px){
  .road__head .h-display{ max-width:none; }
  .stop__card h3{ font-size:1.15rem; }
}

/* ---------------- SERVICES (no photography — animated icons) ---------------- */
.services{ padding-block:var(--sec-y); position:relative; }
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.svc{
  position:relative; background:var(--bg);
  padding:clamp(30px,3.2vw,50px) clamp(24px,2.6vw,40px) clamp(34px,3.4vw,52px);
  display:flex; flex-direction:column; min-height:clamp(300px,26vw,360px);
  transition:background-color .55s var(--ease);
  overflow:hidden;
}
.svc::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .65s var(--ease);
}
.svc::after{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 80% 0%, rgba(200,161,90,.10), transparent 62%);
  opacity:0; transition:opacity .6s var(--ease);
}
.svc:hover,.svc:focus-within{ background:var(--surface); }
.svc:hover::before,.svc:focus-within::before{ transform:scaleX(1); }
.svc:hover::after,.svc:focus-within::after{ opacity:1; }

.svc__num{
  position:absolute; top:clamp(22px,2.2vw,30px); right:clamp(22px,2.4vw,34px);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:var(--ink-3); transition:color .5s var(--ease);
}
.svc:hover .svc__num{ color:var(--gold); }

.svc__iconwrap{
  width:clamp(62px,6vw,78px); height:clamp(62px,6vw,78px);
  display:grid; place-items:center; margin-bottom:clamp(22px,2.4vw,32px);
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:rgba(200,161,90,.04);
  transition:border-color .55s var(--ease), background-color .55s var(--ease), transform .55s var(--ease);
}
.svc:hover .svc__iconwrap{
  border-color:rgba(200,161,90,.5); background:rgba(200,161,90,.09); transform:translateY(-3px);
}
.svc__icon{ width:clamp(32px,3.2vw,42px); height:auto; color:var(--gold); }

.svc h3{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:var(--fs-xl); line-height:1.14; letter-spacing:-.01em;
  margin-bottom:14px; max-width:16ch;
}
.svc p{ color:var(--ink-2); font-size:var(--fs-sm); line-height:1.72; max-width:38ch; }
.svc__rule{
  display:block; width:38px; height:1px; margin-top:auto;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .6s var(--ease);
}
.svc:hover .svc__rule{ width:92px; }

.svc-cta{ margin-top:var(--sp-6); text-align:center; }
.svc-cta p{ font-family:'Cormorant Garamond',serif; font-size:var(--fs-xl); color:var(--ink-2); margin-bottom:var(--sp-3); font-style:italic; }

@media (max-width:1024px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc{ min-height:0; }
}

/* ---------------- BEFORE / AFTER ---------------- */
.transform{ padding-block:var(--sec-y); background:var(--bg-2); border-block:1px solid var(--line); }

.ba{ position:relative; max-width:1180px; margin-inline:auto; }
.ba__frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.ba__frame img{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* clip-path (not width) so both images stay in identical registration —
   sizing the before image independently makes the halves drift apart. */
.ba__beforeWrap{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; -webkit-clip-path:inset(0 50% 0 0); clip-path:inset(0 50% 0 0); will-change:clip-path; }
.ba__before{ filter:saturate(.45) brightness(.78) contrast(1.05); }

.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:5;
  transform:translateX(-50%); pointer-events:none; will-change:left;
}
.ba__line{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:var(--gold); box-shadow:0 0 26px 3px var(--gold-glow); display:block; }
.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  background:var(--gold); color:#0B0B0C; display:grid; place-items:center;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.7);
}
.ba__knob svg{ width:26px; height:26px; }
.ba__knob::after{
  content:''; position:absolute; top:-8px; right:-8px; bottom:-8px; left:-8px; inset:-8px; border-radius:50%;
  border:1px solid rgba(200,161,90,.4); animation:pulseRing 2.6s var(--ease) infinite;
}

.ba__range{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; z-index:6;
}
.ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:64px; height:100%; }
.ba__range::-moz-range-thumb{ width:64px; height:100%; border:0; background:transparent; }

/* --- drag feedback: the divider blooms and the panels breathe --- */
.ba__glow{
  position:absolute; top:0; bottom:0; left:50%; width:160px;
  transform:translateX(-50%); pointer-events:none; opacity:0; z-index:4;
  background:linear-gradient(90deg, transparent, rgba(200,161,90,.22), transparent);
  transition:opacity .35s var(--ease);
}
.ba__frame img{ transition:transform .55s var(--ease); }
.ba__knob{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.ba__line{ transition:box-shadow .3s var(--ease); }
.ba.is-dragging .ba__glow{ opacity:1; }
.ba.is-dragging .ba__frame img{ transform:scale(1.025); }
.ba.is-dragging .ba__knob{ transform:translate(-50%,-50%) scale(1.14); box-shadow:0 16px 46px -8px rgba(0,0,0,.8); }
.ba.is-dragging .ba__line{ box-shadow:0 0 38px 6px var(--gold-glow); }

.transform__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px);
  margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);
}
.transform__facts strong{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(2rem,4.4vw,3.2rem); color:var(--gold); line-height:1; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.transform__facts span{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.5; display:block; max-width:26ch; }

/* ---------------- GALLERY (auto-fills from the folder) ---------------- */
.gallery{ padding-block:var(--sec-y); }
.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(240px, 24vw, 330px), 1fr));
  gap:clamp(10px,1.2vw,18px);
}
.gal-item{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--line); aspect-ratio:4/3;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
  cursor:pointer;
}
.gal-item .reveal-img{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s var(--ease); filter:brightness(.9); }
.gal-item:hover img,.gal-item:focus-visible img{ transform:scale(1.06); filter:brightness(1.04); }
.gal-item:hover,.gal-item:focus-visible{ border-color:rgba(200,161,90,.45); }
/* subtle corner marks instead of a text caption */
.gal-item::after{
  content:''; position:absolute; right:12px; bottom:12px; width:18px; height:18px;
  border-right:1px solid rgba(200,161,90,.6); border-bottom:1px solid rgba(200,161,90,.6);
  opacity:0; transform:translate(6px,6px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gal-item:hover::after,.gal-item:focus-visible::after{ opacity:1; transform:none; }
.gal-grid.is-empty{ display:none; }

.gal-cta{ margin-top:var(--sp-6); text-align:center; }

@media (max-width:600px){
  .gal-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
}

/* ---------------- INFINITE REEL (folder-driven, no labels) ---------------- */
.reel{ margin-top:var(--sp-6); display:grid; gap:clamp(10px,1.2vw,16px); overflow:hidden; }
.reel__row{ overflow:hidden; }
.reel__row.is-empty{ display:none; }
.reel__track{ display:flex; width:max-content; }
.reel__set{ display:flex; gap:clamp(10px,1.2vw,16px); padding-right:clamp(10px,1.2vw,16px); }
.reel__set figure{
  position:relative; flex:none;
  width:clamp(200px,21vw,310px); aspect-ratio:4/3;
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
}
.reel__set img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(.96);
  transition:filter .5s var(--ease), transform 1s var(--ease);
}
.reel__set figure:hover img{ filter:brightness(1.05) saturate(1); transform:scale(1.05); }

/* ---------------- SOCIAL PROOF ---------------- */
.proof{ padding-block:var(--sec-y); background:var(--bg-2); border-block:1px solid var(--line); }
.proof__grid{
  display:grid; grid-template-columns:.85fr 1.3fr .85fr;
  gap:clamp(20px,3vw,44px); align-items:stretch;
}
.proof__rating,.proof__ticker{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,2.6vw,34px);
}
.proof__stars{ display:flex; gap:5px; margin-bottom:16px; }
.proof__stars i{
  width:15px; height:15px; background:var(--gold); flex:none;
  -webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.proof__rating strong{
  display:flex; align-items:baseline; gap:2px;
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(2.8rem,6vw,4rem); line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums; margin-bottom:12px;
}
.proof__rating strong em{ font-style:normal; font-size:.42em; color:var(--ink-3); }
.proof__rating p{ color:var(--ink-2); font-size:var(--fs-sm); line-height:1.6; margin-bottom:12px; }
.proof__source{
  display:block;
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

.proof__stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; list-style:none;
}
.proof__stats li{
  background:var(--bg-2); padding:clamp(20px,2.4vw,32px);
  display:flex; flex-direction:column; justify-content:center;
}
.proof__stats strong{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1; color:var(--ink);
  margin-bottom:10px; font-variant-numeric:tabular-nums;
}
.proof__stats span{
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

.proof__tickerHead{
  display:flex; align-items:center; gap:9px; margin-bottom:18px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.proof__live{ width:7px; height:7px; border-radius:50%; background:#5BD066; position:relative; flex:none; }
.proof__live::after{
  content:''; position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; inset:-4px;
  border-radius:50%; border:1px solid #5BD066; animation:pulseRing 2s var(--ease) infinite;
}
#proofFeed{ display:grid; gap:2px; list-style:none; }
#proofFeed li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  padding:11px 0; border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5;
}
#proofFeed li:first-child{ border-top:0; }
#proofFeed li b{ color:var(--ink); font-weight:500; }
#proofFeed li em{
  margin-left:auto; font-style:normal; font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
#proofFeed li.is-new{ animation:feedIn .6s var(--ease); }
@keyframes feedIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

@media (max-width:1024px){
  .proof__grid{ grid-template-columns:1fr 1fr; }
  .proof__ticker{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .proof__grid{ grid-template-columns:1fr; }
  .proof__stats{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------- ON SITE ---------------- */
.onsite{ position:relative; padding-block:var(--sec-y); overflow:hidden; background:var(--bg-2); border-block:1px solid var(--line); }
.onsite__parallax{ position:absolute; top:-12%; right:0; bottom:-12%; left:0; inset:-12% 0; z-index:0; }
.onsite__layer{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; }
.onsite__layer--bg{
  background:radial-gradient(70% 50% at 20% 20%, rgba(200,161,90,.09), transparent 60%),
             radial-gradient(60% 50% at 85% 75%, rgba(70,90,120,.12), transparent 60%);
}
.onsite__layer--mid{
  background-image:linear-gradient(rgba(200,161,90,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(200,161,90,.045) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.onsite .container{ position:relative; z-index:1; }
.onsite__head{ margin-bottom:var(--sp-6); }

.onsite__strip{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(260px, 27vw, 380px), 1fr));
  gap:clamp(10px,1.4vw,18px);
  margin-bottom:var(--sp-7);
}
.onsite__strip.is-empty{ display:none; }
.onsite__strip figure{ position:relative; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--line); }
.onsite__strip .reveal-img{ aspect-ratio:3/2; }
.onsite__strip img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(.9); transition:transform 1.2s var(--ease); }
.onsite__strip figure:hover img{ transform:scale(1.05); }


.onsite__quote{ max-width:840px; margin-inline:auto; text-align:center; }
.onsite__quote p{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:var(--fs-2xl); line-height:1.28; letter-spacing:-.01em; color:var(--ink);
  margin-bottom:var(--sp-4);
}
.onsite__quote footer{ display:flex; align-items:center; justify-content:center; gap:16px; }
.onsite__quote img{ width:58px; height:58px; border-radius:50%; object-fit:cover; border:1px solid rgba(200,161,90,.4); }
.onsite__quote cite{ font-style:normal; text-align:left; }
.onsite__quote cite b{ display:block; font-weight:500; font-size:var(--fs-base); }
.onsite__quote cite span{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

/* ---------------- AUTHORITY ---------------- */
.authority{ padding-block:var(--sec-y); }
.auth-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.auth{
  background:var(--bg); padding:clamp(28px,3vw,44px);
  transition:background-color .5s var(--ease);
  position:relative;
}
.auth:hover{ background:var(--surface); }
.auth::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.auth:hover::before{ transform:scaleX(1); }
.auth__k{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:20px; }
.auth h3{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:var(--fs-xl); line-height:1.16; margin-bottom:14px; letter-spacing:-.01em; }
.auth p{ color:var(--ink-2); font-size:var(--fs-sm); line-height:1.7; }
.auth p b{ color:var(--ink); font-weight:500; }

.auth-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px);
  margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);
}
.auth-stat strong{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; color:var(--gold); margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.auth-stat span{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1.6; display:block; max-width:20ch; }

/* ---------------- TESTIMONIALS ---------------- */
.testi{ padding-block:var(--sec-y); background:var(--bg-2); border-block:1px solid var(--line); overflow:hidden; }
.testi__viewport{ overflow:hidden; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); }
.testi__rail{ display:flex; gap:clamp(14px,1.6vw,22px); will-change:transform; }
.testi__card{
  flex:none; width:clamp(280px,29vw,400px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px); display:flex; flex-direction:column;
}
.testi__stars{ display:flex; gap:5px; margin-bottom:20px; }
.testi__stars i{
  width:12px; height:12px; background:var(--gold); flex:none;
  -webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.testi__card p{
  font-family:'Cormorant Garamond',serif; font-size:var(--fs-lg); line-height:1.5;
  color:var(--ink); margin-bottom:auto; padding-bottom:26px; font-style:italic; font-weight:300;
}
.testi__card footer{ border-top:1px solid var(--line); padding-top:18px; }
.testi__card footer b{ display:block; font-weight:500; font-size:var(--fs-sm); }
.testi__card footer span{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

.testi__nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:var(--sp-5); }
.testi__btn{
  width:52px; height:52px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2);
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.testi__btn svg{ width:20px; height:20px; }
.testi__btn:hover{ color:#0B0B0C; background:var(--gold); border-color:var(--gold); }
.testi__dots{ display:flex; gap:2px; }
/* 44px hit area, 7px visible dot */
.testi__dots button{
  width:24px; height:44px; padding:0; background:none;
  display:grid; place-items:center;
}
.testi__dots button::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--line-2); transition:background-color .3s var(--ease), width .3s var(--ease);
}
.testi__dots button.is-active::before{ background:var(--gold); width:22px; border-radius:100px; }

/* ---------------- FAQ ---------------- */
.faq{ padding-block:var(--sec-y); }
.faq__wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,100px); align-items:start; }
.faq__left .h-display{ max-width:12ch; }
.faq__note{ margin-block:var(--sp-3) var(--sp-4); color:var(--ink-2); max-width:36ch; }

.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-child{ border-top:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 0; text-align:left; min-height:56px;
  font-family:'Cormorant Garamond',serif; font-size:var(--fs-xl); font-weight:400;
  line-height:1.3; color:var(--ink-2); transition:color .35s var(--ease);
}
.faq__q:hover{ color:var(--ink); }
.faq__q i{
  position:relative; width:22px; height:22px; flex:none;
  transition:transform .5s var(--ease);
}
.faq__q i::before,.faq__q i::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--gold);
  transform:translate(-50%,-50%);
}
.faq__q i::before{ width:16px; height:1px; }
.faq__q i::after{ width:1px; height:16px; transition:transform .5s var(--ease); }
.faq__item.is-open .faq__q{ color:var(--gold); }
.faq__item.is-open .faq__q i::after{ transform:translate(-50%,-50%) scaleY(0); }

.faq__a{ overflow:hidden; height:0; }
.faq__a p{ color:var(--ink-2); font-size:var(--fs-sm); line-height:1.75; padding-bottom:28px; max-width:60ch; }

/* ---------------- CONSULT ---------------- */
.consult{ position:relative; padding-block:var(--sec-y); background:var(--bg-3); overflow:hidden; border-top:1px solid var(--line); }
.consult__glow{
  position:absolute; top:-30%; left:-10%; width:70vw; height:70vw; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(200,161,90,.11), transparent 62%);
  filter:blur(20px);
}
.consult__wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.04fr; gap:clamp(36px,5vw,84px); align-items:start; }

.consult__title{
  font-family:'Cormorant Garamond',serif; font-weight:300; font-size:var(--fs-3xl);
  line-height:1.02; letter-spacing:-.02em; margin-bottom:var(--sp-3);
}
.consult__lead{ color:var(--ink-2); font-size:var(--fs-lg); max-width:46ch; line-height:1.6; margin-bottom:var(--sp-4); }

.consult__points{ display:grid; gap:12px; margin-bottom:var(--sp-5); }
.consult__points li{ display:flex; align-items:center; gap:12px; font-size:var(--fs-sm); color:var(--ink-2); }
.consult__points svg{ width:18px; height:18px; color:var(--gold); flex:none; }

.consult__direct{ display:grid; gap:12px; max-width:420px; }
.consult__direct-item{
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.015);
  min-height:72px; transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.consult__direct-item:hover{ border-color:rgba(200,161,90,.4); background:rgba(200,161,90,.06); }
.consult__direct-item svg{ width:26px; height:26px; color:var(--gold); flex:none; }
.consult__direct-item em{ display:block; font-style:normal; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
.consult__direct-item b{ font-family:'Cormorant Garamond',serif; font-size:var(--fs-lg); font-weight:500; letter-spacing:.02em; }

/* --- FORM --- */
.cform{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,42px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.cform__head{ margin-bottom:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); }
.cform__head h3{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:var(--fs-2xl); line-height:1.1; }
.cform__head p{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:8px; }

.cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.cfield{ margin-bottom:18px; display:flex; flex-direction:column; }
.cfield label{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.cfield label b{ color:var(--gold); font-weight:400; }
.cfield label .opt{ color:rgba(124,120,113,.65); text-transform:none; letter-spacing:.06em; }

.cfield input,.cfield textarea,.cselect select{
  width:100%; min-height:52px; padding:15px 16px;
  background:rgba(255,255,255,.025); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink); font-size:16px; font-weight:300;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.cfield textarea{ min-height:96px; resize:vertical; line-height:1.6; }
.cfield input::placeholder,.cfield textarea::placeholder{ color:rgba(124,120,113,.7); }
.cfield input:focus,.cfield textarea:focus,.cselect select:focus{
  outline:none; border-color:var(--gold); background:rgba(200,161,90,.05);
}
.cfield.has-error input,.cfield.has-error select{ border-color:#D9534F; }
.cfield__err{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em;
  color:#E58A86; margin-top:7px; display:none;
}
.cfield.has-error .cfield__err{ display:block; }

.cselect{ position:relative; }
.cselect select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer; }
.cselect select option{ background:var(--bg-2); color:var(--ink); }
.cselect svg{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--gold); pointer-events:none; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:11px 18px;
  border:1px solid var(--line); border-radius:100px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em;
  color:var(--ink-3); transition:all .3s var(--ease);
}
.chip:hover span{ border-color:var(--line-2); color:var(--ink-2); }
.chip input:checked + span{ background:var(--gold); border-color:var(--gold); color:#0B0B0C; font-weight:500; }
.chip input:focus-visible + span{ outline:2px solid var(--gold-2); outline-offset:2px; }

.cform__submit{ margin-top:var(--sp-3); position:relative; }
.cform__spinner{
  width:18px; height:18px; border:2px solid rgba(11,11,12,.25); border-top-color:#0B0B0C;
  border-radius:50%; display:none; animation:spin .8s linear infinite; position:relative; z-index:2;
}
.cform.is-sending .cform__spinner{ display:block; }
.cform.is-sending .cform__submit{ pointer-events:none; opacity:.75; }

.cform__legal{ font-size:11px; color:var(--ink-3); text-align:center; margin-top:16px; line-height:1.6; }

.cform__status{ margin-top:16px; font-size:var(--fs-sm); line-height:1.6; display:none; padding:16px; border-radius:var(--r-sm); }
.cform__status.is-ok{ display:block; background:rgba(200,161,90,.1); border:1px solid rgba(200,161,90,.35); color:var(--gold-2); }
.cform__status.is-bad{ display:block; background:rgba(217,83,79,.1); border:1px solid rgba(217,83,79,.35); color:#E58A86; }

/* ---------------- FOOTER ---------------- */
.footer{ position:relative; padding-top:var(--sec-y); background:var(--bg); border-top:1px solid var(--line); overflow:hidden; }
.footer .container{ position:relative; z-index:1; }
.footer__top{ display:grid; grid-template-columns:1.5fr .8fr .8fr 1.1fr; gap:clamp(28px,4vw,60px); padding-bottom:var(--sp-6); }
.footer__logo{ display:flex; align-items:center; gap:12px; min-height:52px; color:var(--gold); margin-bottom:var(--sp-3); }
.footer__logo svg{ width:38px; height:38px; }
.footer__logo span{ display:flex; flex-direction:column; line-height:1; color:var(--ink); }
.footer__logo strong{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:500; letter-spacing:.16em; }
.footer__logo em{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:8px; letter-spacing:.28em; color:var(--ink-3); margin-top:5px; }
.footer__tag{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:var(--fs-lg); color:var(--gold); margin-bottom:var(--sp-2); max-width:30ch; line-height:1.4; }
.footer__desc{ font-size:var(--fs-sm); color:var(--ink-3); max-width:42ch; line-height:1.7; }

.footer__col h4{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-3);
}
.footer__col a{ display:flex; align-items:center; min-height:44px; font-size:var(--fs-sm); color:var(--ink-2); padding:6px 0; transition:color .3s, transform .3s var(--ease); }
.footer__col a:hover{ color:var(--gold); transform:translateX(4px); }
.footer__big{ font-family:'Cormorant Garamond',serif; font-size:var(--fs-xl) !important; color:var(--ink) !important; letter-spacing:.02em; margin-bottom:4px; }
.footer__col address{ font-style:normal; font-size:var(--fs-sm); color:var(--ink-3); line-height:1.8; margin-top:var(--sp-2); }
.footer__hours{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--ink-3); margin-top:14px; }
.footer__social{ display:flex; gap:10px; margin-top:var(--sp-3); }
.footer__social a{
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2); padding:0;
  transition:all .35s var(--ease);
}
.footer__social a:hover{ color:#0B0B0C; background:var(--gold); border-color:var(--gold); transform:none; }
.footer__social svg{ width:19px; height:19px; }

.footer__map{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; height:clamp(220px,32vw,340px); }
.footer__map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.85); }
.footer__mapbtn{
  position:absolute; right:16px; bottom:16px; padding:12px 20px; min-height:44px;
  display:inline-flex; align-items:center;
  background:var(--gold); color:#0B0B0C; border-radius:100px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-block:var(--sp-4); margin-top:var(--sp-5); border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:var(--ink-3);
}
.footer__watermark{
  position:absolute; left:50%; bottom:-.22em; transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif; font-size:clamp(4rem,19vw,17rem); font-weight:300;
  letter-spacing:.02em; color:rgba(242,239,234,.028); white-space:nowrap; pointer-events:none; z-index:0; line-height:.8;
}

/* ---------------- MOBILE BAR ---------------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  display:none; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,11,12,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.mbar.is-visible{ transform:none; }
.mbar__btn{
  flex:1; min-height:50px; display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:100px; font-size:12px; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--line-2); color:var(--ink);
}
.mbar__btn svg{ width:17px; height:17px; flex:none; }
.mbar__btn--wa{ color:#5BD066; border-color:rgba(91,208,102,.35); }
.mbar__btn--cta{ flex:1.35; background:var(--gold); color:#0B0B0C; border-color:var(--gold); font-weight:600; }
.mbar__btn:active{ transform:scale(.97); }

/* ---------------- WHATSAPP FLOAT ---------------- */
.wafloat{
  position:fixed; right:24px; bottom:24px; z-index:var(--z-bar);
  display:flex; align-items:center; gap:0;
  width:58px; height:58px; border-radius:100px; overflow:hidden;
  background:#1E1E22; border:1px solid rgba(91,208,102,.4); color:#5BD066;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.8);
  transition:width .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
}
.wafloat.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wafloat svg{ width:26px; height:26px; flex:none; margin-inline:16px; }
.wafloat em{ font-style:normal; font-size:13px; font-weight:500; white-space:nowrap; opacity:0; transition:opacity .3s; padding-right:22px; }
.wafloat:hover{ width:196px; background:#5BD066; color:#08210C; border-color:#5BD066; }
.wafloat:hover em{ opacity:1; transition-delay:.15s; }

/* ---------------- LIGHTBOX ---------------- */
.lightbox{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:var(--z-lb);
  background:rgba(6,6,7,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:grid; place-items:center; padding:clamp(50px,8vh,90px) clamp(16px,6vw,90px);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__fig{ max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:18px; }
.lightbox__fig img{ max-width:100%; max-height:78vh; width:auto; object-fit:contain; border-radius:var(--r-md); transform:scale(.94); transition:transform .5s var(--ease); }
.lightbox.is-open .lightbox__fig img{ transform:none; }
.lightbox__fig figcaption{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); text-align:center; }
.lightbox__close,.lightbox__nav{
  position:absolute; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink);
  background:rgba(11,11,12,.6); transition:all .35s var(--ease); z-index:2;
}
.lightbox__close svg,.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__close{ top:clamp(16px,3vh,28px); right:clamp(16px,4vw,34px); }
.lightbox__nav--prev{ left:clamp(10px,2.4vw,28px); top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:clamp(10px,2.4vw,28px); top:50%; transform:translateY(-50%); }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--gold); color:#0B0B0C; border-color:var(--gold); }

/* ---------------- REVEAL PRIMITIVES ---------------- */
.reveal-img{ position:relative; overflow:hidden; background:var(--bg-3); }
.reveal-img img{ width:100%; height:100%; object-fit:cover; }
.px-mask{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:3; display:grid; pointer-events:none; }
.px-mask i{ background:var(--bg-2); display:block; opacity:1; }
.reveal-img.is-masked img{ transform:scale(1.14); }
html.no-anim .px-mask{ display:none; }
html.no-anim .reveal-img.is-masked img{ transform:none; }

/* --- Scroll reveals ---------------------------------------------------
   Driven by CSS transitions + IntersectionObserver, never by tweens.
   A killed tween would strand content at ~1% opacity forever; a CSS
   transition always lands on its end state. `.no-anim` on <html> is the
   no-JS / reduced-motion escape hatch. */
.split-line{ display:block; overflow:hidden; }
.split-line > span{ display:block; will-change:transform; }
.split-line > span{
  transform:translateY(115%);
  transition:transform 1.15s var(--ease);
}
.split-line.is-in > span{ transform:none; }

.reveal-up,[data-anim]{
  opacity:0; transform:translateY(28px);
  transition:opacity .85s var(--ease), transform .95s var(--ease);
  will-change:transform,opacity;
}
.reveal-up.is-in,[data-anim].is-in{ opacity:1; transform:none; }

/* Cards keep a touch of depth on entry */
[data-anim="card"]{ transform:translateY(46px) scale(.97); }

/* The hero is driven by its own GSAP intro timeline, and gsap.from() reads
   the element's CURRENT value as the tween's end state — so anything the
   hero animates must sit at its final value in CSS, not a hidden one.
   The preloader covers the hero until the timeline starts. */
.hero .reveal-up{ opacity:1; transform:none; transition:none; }
.hero .split-line > span{ transform:none; transition:none; }

html.no-anim .reveal-up,
html.no-anim [data-anim]{ opacity:1 !important; transform:none !important; }
html.no-anim .split-line > span{ transform:none !important; }

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width:1180px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .auth-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .nav__call span{ display:none; }
  .nav__call{ width:44px; height:44px; justify-content:center; border:1px solid var(--line); border-radius:50%; }
  .nav__call svg{ width:18px; height:18px; }

  /* Nav must never exceed the viewport — the burger sits at the right edge
     and pushing it off-screen makes the menu unreachable. */
  .nav__inner{ gap:var(--sp-2); }
  .nav__logo-text em{ display:none; }

  .story__grid{ grid-template-columns:1fr; gap:var(--sp-6); }
  .story__media{ max-width:600px; }
  .faq__wrap{ grid-template-columns:1fr; gap:var(--sp-5); }
  .consult__wrap{ grid-template-columns:1fr; }
  .consult__direct{ max-width:none; }
  .onsite__strip{ grid-template-columns:repeat(2,1fr); }
  .gal-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(180px,30vw,260px); }
  .cursor{ display:none !important; }
  .wafloat{ display:none; }
}

@media (max-width:860px){
  .transform__facts{ grid-template-columns:repeat(2,1fr); row-gap:var(--sp-4); }
  .auth-stats{ grid-template-columns:repeat(2,1fr); row-gap:var(--sp-4); }
  .hero__proof{ grid-template-columns:repeat(2,1fr); row-gap:20px; }
  .journey__steps span:nth-child(even){ display:none; }
}

@media (max-width:760px){
  :root{ --sec-y:clamp(64px,13vw,96px); }

  body{ font-size:16px; }

  .mbar{ display:flex; }
  main{ padding-bottom:0; }
  .footer{ padding-bottom:82px; }

  /* The sticky bottom bar already carries the CTA — drop it from the nav so
     the logo, call button and burger all fit a 320px screen. */
  .nav__actions .btn--gold{ display:none; }
  .nav__logo svg{ width:30px; height:30px; }
  .nav__logo-text strong{ font-size:16px; letter-spacing:.13em; }

  .hero{ min-height:100vh; min-height:100svh; padding-top:calc(104px + env(safe-area-inset-top)); padding-bottom:118px; align-items:center; }
  .hero__title{ max-width:none; }
  .hero__sub{ font-size:1.02rem; margin-bottom:var(--sp-4); }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:var(--sp-5); }
  .hero__cta .btn{ width:100%; }
  .hero__scroll,.hero__blueprint{ display:none; }
  .hero__proof strong{ font-size:1.7rem; }

  .story__grid{ gap:var(--sp-5); }
  .story__media{ padding-bottom:20%; }
  .story__img--a{ width:82%; }
  .story__img--b{ width:56%; border-width:5px; }
  .story__stamp{ left:auto; right:2%; top:auto; bottom:2%; width:84px; }
  .story__stamp text{ font-size:8px; }

  .svc-grid{ grid-template-columns:1fr; }
  .svc{ min-height:300px; }
  .svc p{ opacity:1; max-height:none; }
  .svc__num{ top:auto; right:auto; position:static; margin-bottom:12px; }

  .gal-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .gal-item{ aspect-ratio:4/3; grid-row:auto !important; grid-column:auto !important; }
  .gal-item--tall{ aspect-ratio:3/4; }
  .gal-item figcaption{ opacity:1; transform:none; }

  .onsite__strip{ grid-template-columns:1fr; }
  .auth-grid{ grid-template-columns:1fr; }

  .ba__frame{ aspect-ratio:4/3; }
  .ba__knob{ width:52px; height:52px; }
  .cform__row{ grid-template-columns:1fr; gap:0; }
  .footer__top{ grid-template-columns:1fr; gap:var(--sp-5); }
  .footer__bottom{ flex-direction:column; text-align:center; align-items:center; }

  .testi__nav{ gap:16px; }
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__nav--prev{ left:8px; }
  .lightbox__nav--next{ right:8px; }
}

@media (max-width:420px){
  .journey__steps span:nth-child(3),
  .journey__steps span:nth-child(5){ display:none; }
  .hero__eyebrow{ font-size:9px; letter-spacing:.14em; padding:8px 14px 8px 11px; }
  .mbar__btn span{ font-size:11px; }
  .mbar__btn--wa span{ display:none; }
  .mbar__btn--wa{ flex:.5; }
}

/* landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:110px 60px; }
  .hero__proof{ display:none; }
}

/* =========================================================
   LEGACY / ANDROID COMPATIBILITY
   Older Android Chrome, Samsung Internet and in-app WebViews lag behind
   on newer CSS. Each block below keeps the layout intact when a feature
   is missing, rather than letting a container collapse to zero height.
   ========================================================= */

/* --- aspect-ratio (Chrome <88, Samsung Internet <15) --- */
@supports not (aspect-ratio: 1 / 1){
  /* Containers whose children are absolutely positioned collapse without
     it — hold the box open with the classic padding-ratio trick. */
  .ba__frame{ height:0; padding-bottom:62.5%; }          /* 16:10 */
  .gal-item{ height:0; padding-bottom:75%; }             /* 4:3  */
  .gal-item--tall{ padding-bottom:137.5%; }
  .gal-item--wide{ padding-bottom:57%; }
  .story__stamp{ height:clamp(96px,13vw,140px); }

  /* Containers whose image sits in normal flow can simply let the file's
     own intrinsic ratio take over. */
  .story__img img,
  .onsite__strip img,
  .reel__set img{ height:auto; }
  .story__img--a,.story__img--b,
  .onsite__strip .reveal-img,
  .reel__set figure{ height:auto; }

  @media (max-width:760px){
    .ba__frame{ padding-bottom:75%; }
  }
}

/* --- viewport units: keep desktop grid heights when aspect-ratio is absent --- */
@supports not (aspect-ratio: 1 / 1){
  @media (min-width:761px){
    .gal-item{ height:auto; padding-bottom:0; }          /* grid-auto-rows sizes these */
  }
}

/* --- Android tap behaviour ---
   [type=range] and the slider frame are excluded so dragging still works. */
a,button,select,textarea,label,[role="button"],.gal-item{
  -webkit-tap-highlight-color:rgba(200,161,90,.18);
  touch-action:manipulation;                              /* kills the 300ms delay */
}

/* --- iOS: stop form fields being restyled by the OS ---
   Deliberately excludes [type=range] (it would kill the before/after
   slider thumb) and does NOT reset border-radius, which would flatten
   every round icon button defined earlier in this file. */
input:not([type="range"]),textarea,select{
  -webkit-appearance:none; appearance:none;
}
/* iOS zooms any field whose text is under 16px on focus */
.cfield input,.cfield textarea,.cselect select{ font-size:16px; }

/* --- backdrop-filter renders as an opaque block on some Android GPUs.
       Only opt in where it is actually supported. --- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .nav.is-stuck{ background:rgba(11,11,12,.94); }
  .hero__eyebrow,.hero__badges li,.ba__tag,.build__phase,.build__hint,
  .road__pay,.road__pill,.mbar,.lightbox{ background:rgba(11,11,12,.94); }
}

/* --- overscroll chaining behind the mobile menu / lightbox --- */
body.menu-open{ overscroll-behavior:none; }
.mmenu,.lightbox{ overscroll-behavior:contain; }

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero__canvas{ display:none; }
  .hero__fallback{ z-index:0; }
  .px-mask{ display:none !important; }
  .story__stamp svg,.preloader__grid{ animation:none !important; }
  .cursor{ display:none !important; }
}

/* ---------------- PRINT ---------------- */
@media print{
  .nav,.mbar,.wafloat,.cursor,.preloader,.scrollbar,.hero__canvas,.lightbox{ display:none !important; }
  body{ background:#fff; color:#000; }
}