:root{
  --canvas:#0a0a0a;
  --canvas-soft:#1a1c20;
  --canvas-card:#191919;
  --canvas-mid:#363a3f;
  --hairline:#212327;
  --ink:#ffffff;
  --body:#dadbdf;
  --mute:#7d8187;
  --page-x:clamp(32px,4.445vw,96px);
  --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Geist Variable","Geist Sans",Inter,"Segoe UI",Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;font-synthesis:none}
button,input{font:inherit;font-family:inherit}
button{font-weight:400}

/* HERO — approved composition, desktop reference 1440px */
.hero{height:100svh;min-height:760px;position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(4,8,12,.98) 0%,rgba(4,8,12,.94) 22%,rgba(4,8,12,.73) 40%,rgba(4,8,12,.31) 61%,rgba(4,8,12,.07) 82%,rgba(4,8,12,.02) 100%),
  linear-gradient(0deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.04) 42%,rgba(0,0,0,.08) 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px var(--page-x);width:100%;max-width:none}
.brand{position:absolute;top:48px;left:var(--page-x);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;line-height:16px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)}
.hero h1{font-size:96px;line-height:96px;margin:0 0 28px;font-weight:400;letter-spacing:-2.4px;color:var(--ink)}
.hero p{font-size:24px;line-height:30px;margin:0 0 32px;font-weight:400;letter-spacing:-.5px;color:var(--ink)}
.pill{width:320px;min-height:44px;padding:11px 18px;border-radius:9999px;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,10,.12);color:var(--ink);font-size:14px;line-height:20px;letter-spacing:0;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.pill:hover{border-color:rgba(255,255,255,.48);background:rgba(10,10,10,.34)}

/* GLOBAL SECTION SYSTEM */
.section{padding:64px var(--page-x);border-bottom:1px solid var(--hairline);overflow:hidden;background:var(--canvas)}
.eyebrow{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;line-height:16px;font-weight:400;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px}
.section h2{font-size:48px;line-height:48px;letter-spacing:-1.2px;font-weight:400;margin:0}
.arrows{display:flex;gap:8px;flex:none}
.arrows button{width:44px;height:44px;border-radius:9999px;background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.18);font-size:18px;line-height:1;cursor:pointer}
.scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:var(--body) var(--hairline);scrollbar-width:thin;padding-bottom:16px;overscroll-behavior-x:contain}
.cards{gap:16px}
.card{position:relative;flex:0 0 calc((100% - 48px)/3.18);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;border:1px solid var(--hairline);background:var(--canvas-card)}
.placeholder{position:absolute;inset:0;background:linear-gradient(145deg,#3e4c5a,#111820 55%,#090b0d)}
.p2{background:linear-gradient(145deg,#32413d,#18231f 55%,#090b0d)}
.p3{background:linear-gradient(145deg,#4a4038,#171513 55%,#090b0d)}
.card:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(5,7,9,.96))}
.card-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}
.card small{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;line-height:16px;letter-spacing:1.2px}
.card h3{font-size:24px;line-height:28px;letter-spacing:-.3px;font-weight:400;margin:8px 0 0}
.future{opacity:.5}

.gallery-track{gap:16px}
.gallery-slide{flex:0 0 80%;scroll-snap-align:start}
.gallery-placeholder{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--hairline);background:linear-gradient(135deg,var(--canvas-soft),#0d1726);display:grid;place-items:center;color:var(--mute);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;letter-spacing:1.2px}

.location{display:grid;grid-template-columns:1fr 1fr .8fr;gap:32px;align-items:stretch}
.loc-copy h2,.lead-card h2{font-size:48px;line-height:48px;letter-spacing:-1.2px}
.loc-list{margin-top:40px;color:var(--body);line-height:24px;font-size:16px}
.loc-list p{padding:14px 0;border-bottom:1px solid var(--hairline);margin:0}
.map-placeholder{min-height:460px;border-radius:var(--radius);background:linear-gradient(135deg,var(--canvas-card),#0d1726);border:1px solid var(--hairline);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mute)}
.map-placeholder b{font-size:42px;color:var(--ink)}
.lead-card{border:1px solid var(--hairline);border-radius:var(--radius);padding:24px;background:var(--canvas-card)}
.lead-card p{color:var(--body);font-size:14px;line-height:20px}
.lead-card form,dialog form{display:grid;gap:10px;margin-top:24px}
input{width:100%;padding:12px 16px;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--canvas-soft);color:var(--ink);outline:none;font-size:16px;line-height:24px}
input:focus{border-color:rgba(255,255,255,.35)}
.submit{min-height:44px;padding:11px 18px;border:1px solid var(--ink);border-radius:9999px;background:var(--ink);color:var(--canvas);cursor:pointer;font-size:14px;line-height:20px}
.tg{font-size:12px!important;line-height:16px!important;color:var(--mute)!important;margin-top:20px}
footer{padding:32px var(--page-x) 48px;color:var(--mute);font-size:11px;line-height:16px;max-width:1320px}

dialog{width:min(520px,calc(100% - 32px));background:var(--canvas);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius);padding:32px}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
dialog h2{font-size:48px;line-height:48px;font-weight:400;letter-spacing:-1.2px;margin:12px 0}
.close{position:absolute;right:16px;top:12px;background:none;border:0;color:var(--ink);font-size:28px;cursor:pointer}

/* Mobile baseline — we tune this after desktop approval */
@media(max-width:800px){
  :root{--page-x:20px}
  .hero{min-height:680px}
  .hero-content{padding:28px var(--page-x) 72px;justify-content:flex-end;max-width:none}
  .brand{top:28px;left:var(--page-x)}
  .hero h1{font-size:48px;line-height:48px;letter-spacing:-1.2px;margin-bottom:20px}
  .hero p{font-size:22px;line-height:28px;margin-bottom:28px}
  .pill{width:100%;min-height:44px}
  .section{padding:48px var(--page-x)}
  .section-head{align-items:flex-start}
  .section h2,.loc-copy h2,.lead-card h2{font-size:38px;line-height:40px;letter-spacing:-.8px}
  .card{flex-basis:88%}
  .gallery-slide{flex-basis:90%}
  .location{grid-template-columns:1fr}
  .map-placeholder{min-height:330px}
  .arrows{display:none}
  footer{padding:26px var(--page-x) 36px}
  .hero-img{object-position:48% center}
}

/* PATCH 03 — fluid desktop scale, tuned for 1440 → 2560 while preserving approved composition */
@media (min-width:801px){
  :root{
    --page-x:clamp(64px,3.75vw,96px);
    --section-y:clamp(64px,4.2vw,108px);
  }

  .hero-content{
    padding:clamp(64px,4.2vw,108px) var(--page-x);
    max-width:clamp(760px,43vw,1100px);
  }
  .brand{
    top:clamp(48px,3vw,76px);
    font-size:clamp(12px,.55vw,14px);
    line-height:1.35;
    letter-spacing:clamp(1.2px,.07vw,1.8px);
  }
  .hero h1{
    font-size:clamp(96px,6.64vw,170px);
    line-height:.96;
    letter-spacing:clamp(-4.2px,-.165vw,-2.4px);
    margin-bottom:clamp(28px,1.8vw,46px);
  }
  .hero p{
    font-size:clamp(24px,1.48vw,38px);
    line-height:1.16;
    letter-spacing:clamp(-.9px,-.035vw,-.5px);
    margin-bottom:clamp(32px,2vw,52px);
  }
  .pill{
    width:clamp(320px,18vw,460px);
    min-height:clamp(44px,2.4vw,62px);
    padding:clamp(11px,.7vw,18px) clamp(18px,1.05vw,27px);
    font-size:clamp(14px,.7vw,18px);
    line-height:1.3;
  }

  .section{
    padding:var(--section-y) var(--page-x);
  }
  .eyebrow{
    font-size:clamp(12px,.55vw,14px);
    line-height:1.35;
    letter-spacing:clamp(1.2px,.07vw,1.8px);
    margin-bottom:clamp(20px,1.25vw,32px);
  }
  .section-head{
    gap:clamp(32px,2vw,52px);
    margin-bottom:clamp(32px,2vw,52px);
  }
  .section h2,
  .loc-copy h2,
  .lead-card h2{
    font-size:clamp(48px,2.95vw,76px);
    line-height:1;
    letter-spacing:clamp(-1.9px,-.075vw,-1.2px);
  }
  .arrows button{
    width:clamp(44px,2.4vw,62px);
    height:clamp(44px,2.4vw,62px);
    font-size:clamp(18px,1vw,26px);
  }
  .cards,
  .gallery-track{
    gap:clamp(16px,1vw,26px);
  }
  .card-copy{
    left:clamp(24px,1.3vw,34px);
    right:clamp(24px,1.3vw,34px);
    bottom:clamp(24px,1.3vw,34px);
  }
  .card small{
    font-size:clamp(12px,.55vw,14px);
    line-height:1.35;
  }
  .card h3{
    font-size:clamp(24px,1.32vw,34px);
    line-height:1.15;
    margin-top:clamp(8px,.5vw,13px);
  }
  .gallery-placeholder{
    font-size:clamp(12px,.55vw,14px);
  }

  .location{
    gap:clamp(32px,2vw,52px);
    grid-template-columns:1.05fr 1fr .82fr;
  }
  .loc-list{
    margin-top:clamp(40px,2.4vw,62px);
    font-size:clamp(16px,.78vw,20px);
    line-height:1.5;
  }
  .loc-list p{
    padding:clamp(14px,.8vw,20px) 0;
  }
  .map-placeholder{
    min-height:clamp(460px,24vw,615px);
  }
  .map-placeholder b{
    font-size:clamp(42px,2.2vw,56px);
  }
  .lead-card{
    padding:clamp(24px,1.35vw,35px);
  }
  .lead-card p{
    font-size:clamp(14px,.68vw,17px);
    line-height:1.45;
  }
  input{
    padding:clamp(12px,.7vw,18px) clamp(16px,.9vw,23px);
    font-size:clamp(16px,.72vw,18px);
    line-height:1.4;
  }
  .submit{
    min-height:clamp(44px,2.35vw,60px);
    padding:clamp(11px,.7vw,18px) clamp(18px,1vw,26px);
    font-size:clamp(14px,.68vw,17px);
  }
  footer{
    padding:clamp(32px,2vw,52px) var(--page-x) clamp(48px,3vw,76px);
    max-width:none;
    font-size:clamp(11px,.5vw,13px);
    line-height:1.45;
  }
}

/* PATCH 05 — approved desktop hierarchy at 2560×1440. Geist stays; structure unchanged. */
@media (min-width:801px){
  :root{
    --page-x:clamp(64px,4.1vw,105px);
    --section-y:clamp(72px,4.45vw,114px);
  }

  .hero-content{
    padding:clamp(72px,4.45vw,114px) var(--page-x);
    max-width:clamp(820px,46vw,1180px);
  }
  .brand{
    top:clamp(52px,3.1vw,80px);
    font-size:clamp(13px,.66vw,17px);
    line-height:1.3;
    letter-spacing:clamp(1.3px,.075vw,1.9px);
  }
  .hero h1{
    font-size:clamp(112px,7.7vw,197px);
    line-height:.92;
    letter-spacing:clamp(-5px,-.19vw,-2.8px);
    margin-bottom:clamp(30px,1.65vw,42px);
  }
  .hero p{
    font-size:clamp(28px,1.7vw,44px);
    line-height:1.12;
    letter-spacing:clamp(-1px,-.04vw,-.6px);
    margin-bottom:clamp(34px,1.9vw,49px);
  }
  .pill{
    width:clamp(360px,20vw,512px);
    min-height:clamp(50px,2.65vw,68px);
    padding:clamp(13px,.75vw,19px) clamp(20px,1.1vw,28px);
    font-size:clamp(15px,.78vw,20px);
  }

  .eyebrow{
    font-size:clamp(12px,.62vw,16px);
    letter-spacing:clamp(1.2px,.075vw,1.9px);
  }
  .section h2,
  .loc-copy h2,
  .lead-card h2{
    font-size:clamp(54px,3.35vw,86px);
    line-height:.98;
    letter-spacing:clamp(-2.15px,-.084vw,-1.35px);
  }
  .section-head{margin-bottom:clamp(36px,2.2vw,56px)}
  .card h3{
    font-size:clamp(25px,1.42vw,36px);
    line-height:1.12;
    letter-spacing:-.025em;
  }
  .card small{
    font-size:clamp(12px,.62vw,16px);
    letter-spacing:.1em;
  }
  .loc-list{
    font-size:clamp(17px,.86vw,22px);
  }
  .lead-card p{
    font-size:clamp(15px,.74vw,19px);
  }
  input{
    font-size:clamp(16px,.78vw,20px);
  }
  .submit{
    font-size:clamp(14px,.74vw,19px);
  }
}

/* PATCH 06 — hero matched to the approved composition + final desktop type scale.
   1440px remains the design baseline; 2560×1440 is the primary real desktop viewport. */
@media (min-width:801px){
  :root{
    --page-x:clamp(72px,4.5vw,116px);
    --section-y:clamp(76px,4.7vw,120px);
  }

  /* HERO: only composition/scale changes; source render and approved copy stay untouched. */
  .hero-content{
    justify-content:flex-start;
    align-items:flex-start;
    padding:clamp(210px,18.2vh,262px) var(--page-x) 72px;
    max-width:none;
  }
  .brand{
    top:clamp(58px,5.4vh,78px);
    left:var(--page-x);
    font-size:clamp(14px,.72vw,18px);
    line-height:1.25;
    letter-spacing:.14em;
  }
  .hero h1{
    font-size:clamp(128px,8.45vw,216px);
    line-height:.88;
    letter-spacing:-.035em;
    margin:0 0 clamp(30px,2.2vh,38px);
    font-weight:400;
  }
  .hero p{
    width:min(760px,42vw);
    font-size:clamp(30px,1.78vw,46px);
    line-height:1.12;
    letter-spacing:-.025em;
    margin:0 0 clamp(36px,2.7vh,46px);
    font-weight:400;
  }
  .pill{
    width:clamp(400px,21.5vw,550px);
    min-height:clamp(54px,4.8vh,70px);
    padding:0 clamp(22px,1.2vw,31px);
    font-size:clamp(15px,.78vw,20px);
    letter-spacing:.035em;
  }

  /* Type scale across screens 2–4: one coherent hierarchy, no structural changes. */
  .eyebrow{
    font-size:clamp(13px,.66vw,17px);
    line-height:1.3;
    letter-spacing:.13em;
    margin-bottom:clamp(20px,1.25vw,32px);
  }
  .section h2,
  .loc-copy h2,
  .lead-card h2{
    font-size:clamp(58px,3.6vw,92px);
    line-height:.96;
    letter-spacing:-.035em;
    font-weight:400;
  }
  .section-head{
    margin-bottom:clamp(38px,2.35vw,60px);
  }
  .card h3{
    font-size:clamp(27px,1.52vw,39px);
    line-height:1.08;
    letter-spacing:-.025em;
  }
  .card small{
    font-size:clamp(13px,.66vw,17px);
    line-height:1.25;
    letter-spacing:.13em;
  }
  .loc-list{
    font-size:clamp(18px,.92vw,24px);
    line-height:1.45;
  }
  .lead-card p{
    font-size:clamp(16px,.78vw,20px);
    line-height:1.45;
  }
  input{
    font-size:clamp(16px,.82vw,21px);
  }
  .submit{
    font-size:clamp(15px,.78vw,20px);
  }
  footer{
    font-size:clamp(12px,.55vw,14px);
    line-height:1.5;
  }
}

/* PATCH 07 — desktop hero is a true first-screen scene. */
@media (min-width:801px){
  .hero{
    height:100vh;
    height:100svh;
    min-height:100vh;
    min-height:100svh;
  }
  .hero-content{
    height:100%;
  }
}

/* PATCH 11 — first-load letter reveal for “СКОРО”.
   One calm entrance only; no looping shimmer. */
.hero h1.soon-reveal{
  display:inline-flex;
  color:var(--ink);
  background:none;
  overflow:hidden;
}

.hero h1.soon-reveal span{
  display:inline-block;
  opacity:0;
  transform:translate3d(0, .62em, 0) scale(.985);
  filter:blur(10px);
  animation:soonLetterIn 920ms cubic-bezier(.16,1,.3,1) forwards;
  will-change:transform,opacity,filter;
}

.hero h1.soon-reveal span:nth-child(1){animation-delay:120ms}
.hero h1.soon-reveal span:nth-child(2){animation-delay:205ms}
.hero h1.soon-reveal span:nth-child(3){animation-delay:290ms}
.hero h1.soon-reveal span:nth-child(4){animation-delay:375ms}
.hero h1.soon-reveal span:nth-child(5){animation-delay:460ms}

@keyframes soonLetterIn{
  0%{
    opacity:0;
    transform:translate3d(0,.62em,0) scale(.985);
    filter:blur(10px);
  }
  58%{opacity:1}
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero h1.soon-reveal span{
    opacity:1;
    transform:none;
    filter:none;
    animation:none;
  }
}

/* PATCH 12 — remove the visible shared reveal frame from “СКОРО”.
   Each glyph now reveals inside its own shape, so there is no hard horizontal crop line above the subtitle. */
.hero h1.soon-reveal{
  overflow:visible;
}

.hero h1.soon-reveal span{
  opacity:0;
  transform:translate3d(0,.24em,0);
  filter:blur(5px);
  clip-path:inset(100% 0 0 0);
  animation:soonLetterInSoft 860ms cubic-bezier(.16,1,.3,1) forwards;
  will-change:transform,opacity,filter,clip-path;
}

.hero h1.soon-reveal span:nth-child(1){animation-delay:100ms}
.hero h1.soon-reveal span:nth-child(2){animation-delay:175ms}
.hero h1.soon-reveal span:nth-child(3){animation-delay:250ms}
.hero h1.soon-reveal span:nth-child(4){animation-delay:325ms}
.hero h1.soon-reveal span:nth-child(5){animation-delay:400ms}

@keyframes soonLetterInSoft{
  0%{
    opacity:0;
    transform:translate3d(0,.24em,0);
    filter:blur(5px);
    clip-path:inset(100% 0 0 0);
  }
  42%{
    opacity:.92;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
    clip-path:inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero h1.soon-reveal span{
    opacity:1;
    transform:none;
    filter:none;
    clip-path:none;
    animation:none;
  }
}

/* PATCH 13 — ParticleText-style “СКОРО” adapted to the existing static site.
   Keeps the approved Geist typography and xAI-like restrained palette, without adding a React build step. */
.hero .particle-soon{
  position:relative;
  display:block;
  width:clamp(560px,34vw,870px);
  height:clamp(132px,9.2vw,236px);
  margin:0 0 clamp(30px,2.2vh,38px);
  overflow:visible;
  touch-action:none;
  isolation:isolate;
}
.particle-soon__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.particle-soon__sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Disable the previous glyph-reveal implementation after ParticleText is mounted. */
.hero h1.soon-reveal{display:none!important}

@media(max-width:800px){
  .hero .particle-soon{
    width:min(100%,520px);
    height:clamp(72px,20vw,112px);
    margin-bottom:20px;
  }
}

/* PATCH 14 — align the approved subtitle/CTA to ParticleText and add a restrained
   SpecularButton-style rim highlight adapted to this static build. */
@media (min-width:801px){
  .hero-lockup{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:clamp(650px,37vw,950px);
  }
  .hero .particle-soon{
    width:100%;
    height:clamp(150px,9.6vw,246px);
    margin:0 0 clamp(34px,2.45vh,42px);
  }
  .hero-meta{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-meta p{
    width:min(760px,100%);
    margin-bottom:clamp(38px,2.9vh,50px);
  }
  .hero-meta .pill{
    width:clamp(410px,22vw,560px);
  }
}

.specular-pill{
  --spec-angle:135deg;
  --spec-alpha:0;
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-color:rgba(255,255,255,.24);
  background:rgba(10,10,10,.13);
  box-shadow:none;
}
.specular-pill::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(
    from var(--spec-angle),
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0) 150deg,
    rgba(255,255,255,calc(var(--spec-alpha) * .22)) 164deg,
    rgba(255,255,255,calc(var(--spec-alpha) * .98)) 179deg,
    rgba(222,232,239,calc(var(--spec-alpha) * .92)) 186deg,
    rgba(255,255,255,calc(var(--spec-alpha) * .18)) 202deg,
    rgba(255,255,255,0) 216deg,
    rgba(255,255,255,0) 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 0 4px rgba(230,238,244,calc(var(--spec-alpha) * .16)));
}
.specular-pill__fx{
  position:absolute;
  inset:-16px;
  border-radius:9999px;
  pointer-events:none;
  z-index:-1;
}
.specular-pill__label,
.specular-pill__arrow{
  position:relative;
  z-index:3;
}
.specular-pill__arrow{
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.specular-pill:hover .specular-pill__arrow{transform:translateX(3px)}
.specular-pill:active{transform:scale(.985)}
.specular-pill:focus-visible{outline:2px solid rgba(255,255,255,.58);outline-offset:4px}

@media(max-width:800px){
  .hero-lockup,.hero-meta{width:100%}
  .hero-meta .pill{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .specular-pill{--spec-alpha:0!important}
  .specular-pill__arrow{transition:none}
}

/* PATCH 15 — align subtitle + CTA to the actual left edge of the ParticleText glyphs,
   not to the ParticleText canvas/container. The JS writes --soon-glyph-left after sampling. */
@media (min-width:801px){
  .hero-lockup{
    --soon-glyph-left:0px;
  }
  .hero-meta{
    margin-left:var(--soon-glyph-left);
    width:calc(100% - var(--soon-glyph-left));
  }
}

/* PATCH 23 — BorderGlow removed; card/gallery interaction retained without shine. */

/* PATCH 17 — React Bits Stack-style interaction for gallery + hidden native scrollbars. */
/* Keep horizontal swipe/scroll mechanics for USP cards, but remove the browser chrome. */
#benefitScroller,
#galleryScroller{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#benefitScroller::-webkit-scrollbar,
#galleryScroller::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

/* Gallery becomes an overlapping 16:9 stack. The front card can be dragged/clicked
   to the back; the cards behind remain visible as restrained architectural layers. */
.gallery-track.stack-gallery{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:20/9;
  overflow:visible;
  padding:0;
  touch-action:pan-y;
  perspective:900px;
}
.gallery-track.stack-gallery .gallery-slide{
  position:absolute;
  inset:0 auto auto 0;
  width:80%;
  height:100%;
  flex:none;
  scroll-snap-align:none;
  transform-origin:90% 90%;
  will-change:transform;
  cursor:grab;
  user-select:none;
  transition:transform 560ms cubic-bezier(.2,.8,.2,1),opacity 360ms ease,filter 360ms ease;
}
.gallery-track.stack-gallery .gallery-slide.is-top{cursor:grab}
.gallery-track.stack-gallery .gallery-slide.is-dragging{
  cursor:grabbing;
  transition:none;
}
.gallery-track.stack-gallery .gallery-placeholder{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  pointer-events:none;
}
.gallery-track.stack-gallery .gallery-slide:not(.is-top){
  pointer-events:none;
}
@media(max-width:800px){
  .gallery-track.stack-gallery{aspect-ratio:1.42/1}
  .gallery-track.stack-gallery .gallery-slide{width:90%}
}
@media(prefers-reduced-motion:reduce){
  .gallery-track.stack-gallery .gallery-slide{transition:none}
}

/* PATCH 18 — Stack-style motion for USP cards while preserving the approved 3-card layout. */
#benefitScroller .card{
  transform-style:preserve-3d;
  will-change:transform;
  touch-action:pan-y;
  cursor:grab;
  transition:transform 560ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease;
}
#benefitScroller .card.is-utp-dragging{
  cursor:grabbing;
  transition:none;
  z-index:8;
}
#benefitScroller .card.is-utp-sending{
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  #benefitScroller .card{transition:none!important;transform:none!important}
}

/* PATCH 19 — UTP uses the actual Stack interaction instead of drag-to-reorder row logic. */
#benefitScroller.stack-benefits{
  position:relative;
  display:block;
  width:min(42vw, 920px);
  max-width:100%;
  aspect-ratio:4/5;
  overflow:visible;
  padding:0;
  margin-top:clamp(28px,2.2vw,48px);
  touch-action:pan-y;
  perspective:900px;
}
#benefitScroller.stack-benefits .card{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:100%;
  flex:none;
  aspect-ratio:auto;
  scroll-snap-align:none;
  transform-origin:90% 90%;
  will-change:transform;
  cursor:default;
  user-select:none;
}
#benefitScroller.stack-benefits .card.is-utp-top{cursor:grab}
#benefitScroller.stack-benefits .card.is-utp-dragging{cursor:grabbing}
#benefitScroller.stack-benefits .card:not(.is-utp-top){pointer-events:none}
#benefitScroller.stack-benefits .card.future{display:block}
#benefitScroller.stack-benefits .placeholder,
#benefitScroller.stack-benefits .card::after{pointer-events:none}

@media (max-width: 800px){
  #benefitScroller.stack-benefits{width:88vw;max-width:88vw}
}
@media (prefers-reduced-motion: reduce){
  #benefitScroller.stack-benefits .card{transition:none!important}
}

/* PATCH 20 — USP AccordionGallery interaction based on the supplied GSAP component.
   This replaces the previous Stack treatment on screen 2 while preserving approved card content. */
#benefitScroller.accordion-benefits{
  position:relative;
  display:flex;
  flex-direction:row;
  gap:clamp(10px,.7vw,18px);
  width:100%;
  max-width:100%;
  height:clamp(520px,36vw,780px);
  aspect-ratio:auto;
  overflow:hidden;
  padding:0;
  margin-top:0;
  perspective:1400px;
  perspective-origin:50% 50%;
  touch-action:pan-y;
}
#benefitScroller.accordion-benefits .card{
  position:relative;
  inset:auto;
  flex:1 1 0;
  width:auto;
  height:100%;
  min-width:0;
  aspect-ratio:auto;
  opacity:1;
  overflow:hidden;
  scroll-snap-align:none;
  transform-origin:center center;
  transform-style:preserve-3d;
  cursor:pointer;
  user-select:none;
  pointer-events:auto;
  transition:
    flex-grow 600ms cubic-bezier(.22,1,.36,1),
    transform 600ms cubic-bezier(.22,1,.36,1),
    filter 600ms cubic-bezier(.22,1,.36,1);
}
#benefitScroller.accordion-benefits .card.future{display:block;opacity:.58}
#benefitScroller.accordion-benefits .card .placeholder{
  transform:scale(1.08) translateX(var(--utp-parallax,0px));
  filter:brightness(var(--utp-brightness,.68)) saturate(var(--utp-saturation,.78));
  transition:
    transform 600ms cubic-bezier(.22,1,.36,1),
    filter 600ms cubic-bezier(.22,1,.36,1);
  will-change:transform,filter;
}
#benefitScroller.accordion-benefits .card::after{
  background:linear-gradient(180deg,transparent 38%,rgba(5,7,9,.95) 100%);
  transition:background 600ms cubic-bezier(.22,1,.36,1),opacity 600ms ease;
}
#benefitScroller.accordion-benefits .card .card-copy{
  opacity:.72;
  transform:translate3d(-8px,8px,0);
  transition:opacity 420ms ease,transform 600ms cubic-bezier(.22,1,.36,1);
}
#benefitScroller.accordion-benefits .card.is-accordion-active{
  flex-grow:3.25;
  transform:rotateY(0deg);
  z-index:2;
}
#benefitScroller.accordion-benefits .card.is-accordion-active .placeholder{
  --utp-brightness:1;
  --utp-saturation:1;
  transform:scale(1.02) translateX(0);
}
#benefitScroller.accordion-benefits .card.is-accordion-active .card-copy{
  opacity:1;
  transform:translate3d(0,0,0);
}
#benefitScroller.accordion-benefits .card.is-before-active{
  transform:rotateY(5deg);
}
#benefitScroller.accordion-benefits .card.is-after-active{
  transform:rotateY(-5deg);
}
#benefitScroller.accordion-benefits .card.is-before-active .placeholder{--utp-parallax:-12px}
#benefitScroller.accordion-benefits .card.is-after-active .placeholder{--utp-parallax:12px}

@media(max-width:800px){
  #benefitScroller.accordion-benefits{
    height:auto;
    display:flex;
    overflow-x:auto;
    gap:12px;
    perspective:none;
    scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
  }
  #benefitScroller.accordion-benefits .card,
  #benefitScroller.accordion-benefits .card.is-accordion-active{
    flex:0 0 88%;
    height:auto;
    aspect-ratio:4/5;
    transform:none!important;
    scroll-snap-align:start;
  }
  #benefitScroller.accordion-benefits .card .placeholder{transform:scale(1.02)!important}
  #benefitScroller.accordion-benefits .card .card-copy{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  #benefitScroller.accordion-benefits .card,
  #benefitScroller.accordion-benefits .card .placeholder,
  #benefitScroller.accordion-benefits .card .card-copy{transition:none!important}
}

/* Patch 21 — real UTP renders */
#benefitScroller .card .placeholder[style*="background-image"]{background-size:cover;background-position:center;background-repeat:no-repeat;}
#benefitScroller .card:nth-child(1) .placeholder{background-position:52% center;}
#benefitScroller .card:nth-child(2) .placeholder{background-position:50% center;}
#benefitScroller .card:nth-child(3) .placeholder{background-position:50% center;}

/* PATCH 22 — approved architectural renders in gallery */
.gallery-render{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:transparent;
}

/* PATCH 24 — interactive Rhino 3DM location model. */
.map-3d{
  position:relative;
  min-height:clamp(460px,24vw,615px);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(116,139,160,.12),transparent 36%),
    linear-gradient(145deg,#12171d,#080a0d 70%);
  isolation:isolate;
}
.map-3d__stage{position:absolute;inset:0;cursor:grab;touch-action:none}
.map-3d__stage:active{cursor:grabbing}
.map-3d__stage canvas{display:block;width:100%;height:100%;outline:none}
.map-3d__hud{
  position:absolute;z-index:3;left:18px;top:16px;
  display:flex;flex-direction:column;gap:3px;pointer-events:none;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  text-transform:uppercase;letter-spacing:1.2px;
}
.map-3d__hud span{font-size:11px;line-height:15px;color:rgba(255,255,255,.82)}
.map-3d__hud small{font-size:9px;line-height:13px;color:var(--mute);letter-spacing:.8px}
.map-3d__loading{
  position:absolute;z-index:2;inset:0;display:grid;place-items:center;
  color:var(--mute);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;pointer-events:none;
  transition:opacity .35s ease;
}
.map-3d.is-ready .map-3d__loading{opacity:0}
.map-3d.is-error .map-3d__loading{color:#aeb6bf}
@media(max-width:800px){
  .map-3d{min-height:360px}
  .map-3d__hud{left:14px;top:13px}
}

/* PATCH 25 — GradientWaves hero atmosphere + higher-contrast 3D location. */
.hero-waves{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:auto;
  opacity:.50;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.95) 30%,rgba(0,0,0,.48) 58%,transparent 82%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.95) 30%,rgba(0,0,0,.48) 58%,transparent 82%);
  mix-blend-mode:screen;
}
.hero-waves canvas{display:block;width:100%;height:100%}
.hero-shade{z-index:1;pointer-events:none}
.hero-content{z-index:2}

.map-3d{
  background:
    radial-gradient(circle at 48% 46%,rgba(154,184,209,.20),transparent 44%),
    linear-gradient(145deg,#161c22,#080a0d 74%);
}
.map-3d::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 28%,rgba(0,0,0,.15));
}
.map-3d__hud{z-index:4}
.map-3d__hud span{font-size:12px;color:#f4f7f9}
.map-3d__hud small{font-size:9px;color:#a4adb5}
.map-3d__stage canvas{filter:saturate(.82) contrast(1.12)}

@media(prefers-reduced-motion:reduce){.hero-waves{display:none}}


/* PATCH 26 — robust visible hero waves + Yandex map. */
.hero-waves{
  z-index:1;
  opacity:.92;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.82) 58%,rgba(0,0,0,.16) 84%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.82) 58%,rgba(0,0,0,.16) 84%,transparent 100%);
}
.hero-waves::before,
.hero-waves::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  border-radius:48%;
  filter:blur(18px);
  opacity:.46;
  background:
    radial-gradient(70% 35% at 24% 58%, rgba(184,213,233,.32), transparent 64%),
    radial-gradient(62% 28% at 44% 42%, rgba(97,137,166,.26), transparent 68%),
    radial-gradient(65% 30% at 34% 76%, rgba(220,231,238,.16), transparent 70%);
  transform:translate3d(-2%,0,0) rotate(-4deg) scale(1.08);
  animation:heroWaveDrift 8s ease-in-out infinite alternate;
}
.hero-waves::after{
  opacity:.28;
  filter:blur(28px);
  transform:translate3d(3%,2%,0) rotate(5deg) scale(1.15);
  animation-duration:11s;
  animation-direction:alternate-reverse;
}
.hero-waves canvas{position:absolute;inset:0;z-index:2;opacity:.85}
.hero-shade{z-index:2}
.hero-content{z-index:3}
@keyframes heroWaveDrift{
  from{transform:translate3d(-4%,-1%,0) rotate(-5deg) scale(1.06)}
  to{transform:translate3d(5%,2%,0) rotate(3deg) scale(1.18)}
}

.yandex-map{
  position:relative;
  min-height:460px;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
  background:#0a0a0a;
}
.yandex-map iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:460px;
  border:0;
  filter:saturate(.72) contrast(1.05) brightness(.78);
}
.yandex-map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
@media(max-width:800px){
  .yandex-map,.yandex-map iframe{min-height:360px}
}
@media(prefers-reduced-motion:reduce){
  .hero-waves::before,.hero-waves::after{animation:none}
}


/* PATCH 27 — animation-only hero: remove architectural render and align the brand
   to the actual visual start of the ParticleText word “СКОРО”. */
.hero{
  background:#0a0a0a;
}
.hero-img{display:none!important}
.hero-waves{
  inset:0;
  opacity:1;
  mix-blend-mode:screen;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-waves::before,
.hero-waves::after{
  opacity:.62;
}
.hero-waves::after{opacity:.38}
.hero-waves canvas{opacity:.96}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(10,10,10,.54) 0%,rgba(10,10,10,.34) 31%,rgba(10,10,10,.12) 58%,rgba(10,10,10,.02) 100%),
    linear-gradient(0deg,rgba(10,10,10,.24) 0%,transparent 42%,rgba(10,10,10,.08) 100%);
}
@media (min-width:801px){
  .hero-content{--soon-glyph-left:0px}
  .brand{
    left:calc(var(--page-x) + var(--soon-glyph-left));
  }
}


/* PATCH 28 — replace GradientWaves/fog with Scanner. */
.hero-waves{z-index:1;opacity:1;mix-blend-mode:screen;pointer-events:auto;overflow:hidden;mask-image:none!important;-webkit-mask-image:none!important}
.hero-waves::before,.hero-waves::after{content:none!important;display:none!important;animation:none!important}
.hero-waves canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:1}
.hero-shade{z-index:2;background:linear-gradient(90deg,rgba(10,10,10,.34) 0%,rgba(10,10,10,.18) 34%,rgba(10,10,10,.05) 66%,transparent 100%),linear-gradient(0deg,rgba(10,10,10,.14),transparent 45%)}
.hero-content{z-index:3}


/* PATCH 29 — Topography replaces Scanner on the hero. */
.hero-waves{
  z-index:1;
  opacity:1;
  mix-blend-mode:screen;
  pointer-events:none;
  overflow:hidden;
}
.hero-waves canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:1;
}
.hero-shade{
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.20) 0%,rgba(10,10,10,.10) 34%,rgba(10,10,10,.02) 68%,transparent 100%),
    linear-gradient(0deg,rgba(10,10,10,.10),transparent 48%);
}
.hero-content{z-index:3}

/* PATCH 30 — ImageTrail hero. Replaces the previous Topography animation. */
.hero{
  background:#0a0a0a;
  overflow:hidden;
}
.hero-trail{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
}
.trail-item{
  position:absolute;
  top:0;
  left:0;
  width:clamp(190px,10.5vw,280px);
  aspect-ratio:1.18;
  opacity:0;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#191919;
  will-change:transform,opacity;
  transform-origin:center center;
}
.trail-inner{
  position:absolute;
  inset:-10px;
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  will-change:transform,filter;
}
.hero-shade{
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.76) 0%,rgba(10,10,10,.45) 32%,rgba(10,10,10,.12) 58%,rgba(10,10,10,.05) 100%),
    linear-gradient(0deg,rgba(10,10,10,.18),transparent 48%);
}
.hero-content{z-index:3}

@media (prefers-reduced-motion:reduce){
  .hero-trail{display:none}
}

/* PATCH 31 — softer approved graphite palette across all screens. */
:root{
  --canvas:#1a1c20;
  --canvas-soft:#212327;
  --canvas-card:#212327;
  --hairline:#363a3f;
}
html,body,.hero,.section{background:var(--canvas)}
.hero{
  background:var(--canvas);
}
.trail-item{
  background:var(--canvas-card);
  border-color:rgba(255,255,255,.14);
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(26,28,32,.72) 0%,rgba(26,28,32,.42) 32%,rgba(26,28,32,.11) 58%,rgba(26,28,32,.04) 100%),
    linear-gradient(0deg,rgba(26,28,32,.16),transparent 48%);
}
.pill{background:rgba(33,35,39,.18)}
.pill:hover{background:rgba(33,35,39,.46)}


/* PATCH 33 — stable Masonry hero. Keeps ParticleText and Specular CTA animation layers untouched. */
.hero-trail{display:none!important}
.hero{background:var(--canvas);overflow:hidden}
.hero-masonry{
  position:absolute;
  z-index:1;
  top:7.5%;
  right:clamp(28px,3.75vw,96px);
  width:min(43vw,1080px);
  height:85%;
  overflow:hidden;
  pointer-events:auto;
  border-radius:8px;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);
}
.hero-masonry__item{
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  padding:6px;
  opacity:0;
  will-change:transform,width,height,opacity,filter;
  transform-origin:center;
  transition:scale .30s cubic-bezier(.22,.68,.2,1),filter .30s ease;
  scale:1;
  cursor:pointer;
}
.hero-masonry__item.is-hovered{
  /* Use the individual scale property so hover composes with the Masonry translate transform. */
  scale:.94;
  z-index:20!important;
}
.hero-masonry__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  filter:saturate(.86) brightness(.88);
  transition:filter .30s ease,transform .45s cubic-bezier(.22,.68,.2,1),border-color .30s ease;
}
.hero-masonry__item.is-hovered img{
  filter:saturate(1.04) brightness(1.06);
  transform:scale(1.035);
  border-color:rgba(255,255,255,.22);
}
/* Keep the approved hero animation stack interactive. */
.hero-content{z-index:3;pointer-events:auto}
.hero-shade{z-index:2;pointer-events:none}
.particle-soon{pointer-events:auto}
.specular-pill{pointer-events:auto}

@media(max-width:800px){
  .hero{min-height:760px}
  .hero-masonry{
    top:18px;
    left:var(--page-x);
    right:var(--page-x);
    width:auto;
    height:42vh;
    max-height:360px;
    min-height:250px;
    border-radius:8px;
    mask-image:linear-gradient(180deg,#000 0%,#000 85%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 85%,transparent 100%);
  }
  .hero-content{padding-top:46vh}
}

@media(prefers-reduced-motion:reduce){
  .hero-masonry__item{opacity:1!important;transition:none!important}
}

/* PATCH 36 — robust Masonry hover interaction.
   Hover is applied to the inner image layer only, so it cannot conflict with
   Masonry's translate3d positioning / entrance animation on the wrapper. */
.hero-masonry{z-index:4;pointer-events:auto}
.hero-content{z-index:6}
.hero-shade{z-index:2}
.hero-masonry__item{
  pointer-events:auto;
  cursor:pointer;
  scale:1!important;
}
.hero-masonry__item.is-hovered{scale:1!important}
.hero-masonry__item img{
  transform:translateZ(0) scale(1);
  transform-origin:center;
  transition:transform .38s cubic-bezier(.16,1,.3,1),filter .38s ease,border-color .38s ease,opacity .38s ease;
  will-change:transform,filter;
}
.hero-masonry__item:hover img,
.hero-masonry__item:focus-within img,
.hero-masonry__item.is-hovered img{
  transform:translateZ(0) scale(1.075);
  filter:saturate(1.08) brightness(1.10) contrast(1.03);
  border-color:rgba(255,255,255,.34);
}
.hero-masonry:hover .hero-masonry__item:not(:hover) img{
  filter:saturate(.74) brightness(.72);
  opacity:.82;
}
@media (hover:none){
  .hero-masonry:hover .hero-masonry__item:not(:hover) img{filter:saturate(.86) brightness(.88);opacity:1}
  .hero-masonry__item:hover img{transform:translateZ(0) scale(1)}
}

/* PATCH 37 — fix Hero Masonry pointer hit-testing.
   .hero-content spans the full viewport and was intercepting pointer events above
   the right-hand Masonry. Make the wrapper transparent to hit-testing and only
   re-enable interaction on the actual left-side controls/content. */
.hero-content{
  pointer-events:none !important;
}
.hero-content .brand,
.hero-content .hero-lockup,
.hero-content .particle-soon,
.hero-content .hero-meta,
.hero-content .specular-pill{
  pointer-events:auto;
}
.hero-masonry{
  pointer-events:auto !important;
  z-index:4;
}
.hero-masonry__item{
  pointer-events:auto !important;
}

/* Make the hover state unmistakable while preserving the restrained look. */
.hero-masonry__item img{
  transition:transform .34s cubic-bezier(.16,1,.3,1),filter .34s ease,border-color .34s ease,opacity .34s ease;
}
.hero-masonry__item:hover img,
.hero-masonry__item.is-hovered img{
  transform:scale(1.08);
  filter:saturate(1.06) brightness(1.10) contrast(1.04);
  border-color:rgba(255,255,255,.38);
}
.hero-masonry:has(.hero-masonry__item:hover) .hero-masonry__item:not(:hover) img{
  filter:saturate(.78) brightness(.76);
  opacity:.84;
}

/* PATCH 38 — mobile hero spacing: keep brand clear of the Masonry block. */
@media (max-width:800px){
  .hero{
    min-height:780px;
  }
  .hero-content{
    padding:28px var(--page-x) 56px;
    justify-content:flex-end;
  }
  .hero-content .brand{
    top:24px;
    left:var(--page-x);
    z-index:8;
  }
  .hero-masonry{
    top:68px;
    left:var(--page-x);
    right:var(--page-x);
    width:auto;
    height:32vh;
    min-height:220px;
    max-height:300px;
    z-index:4;
  }
  .hero-lockup{
    position:relative;
    z-index:7;
  }
}

/* PATCH 39 — mobile interaction pass: compact hero + deliberate horizontal gestures. */
@media (max-width:800px){
  .hero{
    height:100svh;
    min-height:720px;
  }
  .hero-content{
    padding:0 var(--page-x) 34px;
    justify-content:flex-end;
  }
  .hero-content .brand{
    top:18px;
    left:var(--page-x);
    font-size:14px;
    line-height:18px;
    letter-spacing:1.45px;
    font-weight:500;
  }
  .hero-masonry{
    top:54px;
    left:var(--page-x);
    right:var(--page-x);
    width:auto;
    height:36vh;
    min-height:235px;
    max-height:300px;
    mask-image:linear-gradient(180deg,#000 0%,#000 91%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 91%,transparent 100%);
  }
  .hero-lockup{
    width:100%;
    margin-top:0;
  }
  .hero .particle-soon{
    width:min(100%,520px);
    height:clamp(70px,19vw,104px);
    margin:0 0 14px;
  }
  .hero-meta p{margin-bottom:18px}

  /* Screen 2: horizontal finger swipe owns the gesture while the finger is on cards. */
  #benefitScroller.accordion-benefits{
    overflow-x:auto;
    overflow-y:hidden;
    touch-action:pan-x;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  #benefitScroller.accordion-benefits::-webkit-scrollbar{display:none}
  #benefitScroller.accordion-benefits .card{
    touch-action:pan-x;
    scroll-snap-stop:always;
  }

  /* Screen 3: dragging the Stack must not simultaneously scroll the page. */
  #galleryScroller.stack-gallery,
  #galleryScroller.stack-gallery .gallery-slide.is-top{
    touch-action:none;
    overscroll-behavior:contain;
  }
}

/* PATCH 40 — mobile Hero composition: remove the dead zone between Masonry and the lockup. */
@media (max-width:800px){
  .hero{
    height:100svh;
    min-height:720px;
  }
  .hero-content{
    position:relative;
    height:100%;
    padding:0 var(--page-x);
    display:block;
  }
  .hero-content .brand{
    top:18px;
    left:var(--page-x);
    font-size:15px;
    line-height:19px;
    letter-spacing:1.55px;
  }
  .hero-masonry{
    top:58px;
    height:clamp(235px,36vh,300px);
  }
  .hero-lockup{
    position:absolute;
    top:calc(58px + clamp(235px,36vh,300px) + 18px);
    left:var(--page-x);
    right:var(--page-x);
    width:auto;
    margin:0;
  }
  .hero .particle-soon{
    margin:0 0 12px;
  }
  .hero-meta p{
    margin-bottom:16px;
  }
}

/* Patch 42 — location contact details */
.loc-list p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
}
.loc-label { color: var(--mute, #7d8187); }
.loc-value { color: var(--ink, #fff); text-align: right; }
@media (max-width: 767px) {
  .loc-list p { grid-template-columns: 1fr; gap: 4px; }
  .loc-value { text-align: left; }
}

/* PATCH 43 — personal data consent in all lead forms */
.consent-check{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin:4px 0 2px;
  color:var(--body);
  font-size:12px;
  line-height:16px;
  cursor:pointer;
}
.consent-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:4px;
  background:var(--canvas-soft);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.consent-check input[type="checkbox"]::after{
  content:"";
  width:8px;
  height:4px;
  border-left:1.5px solid var(--canvas);
  border-bottom:1.5px solid var(--canvas);
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .16s ease;
}
.consent-check input[type="checkbox"]:checked{
  background:var(--ink);
  border-color:var(--ink);
}
.consent-check input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1)}
.consent-check input[type="checkbox"]:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
.consent-check a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px}
.consent-check a:hover{text-decoration-color:var(--ink)}
@media (min-width:1440px){.consent-check{font-size:clamp(12px,.62vw,15px);line-height:1.4}}

/* PATCH 44 — visually hide the page scrollbar while keeping normal scrolling. */
html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* PATCH 46 — hero render mosaic + ParticleText breathing room. */
.hero-masonry.hero-mosaic{
  --mosaic-gap:4px;
  width:min(43vw,1080px);
  height:auto;
  aspect-ratio:16 / 9;
  top:50%;
  transform:translateY(-50%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 100%);
}
.hero-mosaic .hero-masonry__item{padding:0}
.hero-mosaic .hero-masonry__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  border-radius:2px;
}

/* The canvas used to end almost exactly on the first/last glyph. Give the
   particle field horizontal overscan without moving the approved lockup. */
@media (min-width:801px){
  .hero .particle-soon{width:112%}
}
@media (max-width:800px){
  .hero-masonry.hero-mosaic{
    top:58px;
    transform:none;
    height:auto;
    aspect-ratio:16 / 9;
    --mosaic-gap:3px;
  }
  .hero-lockup{
    top:calc(58px + (100vw - (2 * var(--page-x))) * .5625 + 18px);
  }
  .hero .particle-soon{width:calc(100% + 24px);max-width:none}
}

/* PATCH 47 — desktop hero mosaic follows the visual height of the left lockup. */
@media (min-width:801px){
  .hero-masonry.hero-mosaic{
    right:var(--page-x);
    left:auto;
    /* JS sets top/width/height from .hero-lockup; keep the source 16:9 ratio. */
    transform:none;
    max-width:none;
    max-height:none;
  }
}

/* PATCH 48 — visual alignment pass for the Hero mosaic. */
@media (min-width:801px){
  .hero-masonry.hero-mosaic{
    right:var(--page-x);
    left:auto;
    transform:none;
    max-width:none;
    max-height:none;
    /* The old left fade made the first column look narrower and visually
       disconnected from the lockup. Keep the image whole. */
    mask-image:none;
    -webkit-mask-image:none;
  }
}


/* PATCH 49 — final desktop hero geometry repair.
   Keep the ParticleText canvas at the approved lockup width; clipping is fixed
   in the sampler itself, not by stretching the DOM box. The mosaic remains a
   strict 16:9 reconstruction with only hairline seams. */
@media (min-width:801px){
  .hero .particle-soon{
    width:100%;
    max-width:none;
    overflow:visible;
  }
  .particle-soon__canvas{overflow:visible}
  .hero-masonry.hero-mosaic{
    --mosaic-gap:2px;
    overflow:hidden;
    border-radius:6px;
  }
  .hero-mosaic .hero-masonry__item{
    overflow:hidden;
  }
  .hero-mosaic .hero-masonry__item img{
    border-radius:0;
  }
}


/* PATCH 50 — larger desktop hero mosaic.
   Geometry is set by JS; CSS only keeps the visual treatment stable. */
@media (min-width:801px){
  .hero-masonry.hero-mosaic{
    max-width:none;
    max-height:none;
    border-radius:8px;
  }
}


/* PATCH 56 — TextLoop rebuilt from the supplied reference geometry. */
.hero-wave-loop{
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  bottom:-42px;
  height:292px;
  overflow:hidden;
  pointer-events:auto;
}
.hero-wave-loop__svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.hero-wave-loop__ribbon{
  fill:none;
  stroke:#607582;
  stroke-width:94;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hero-wave-loop__measure{
  visibility:hidden;
  pointer-events:none;
  font-family:"Geist Variable","Geist Sans",Inter,"Segoe UI",Arial,sans-serif;
  font-size:48px;
  font-weight:800;
  letter-spacing:2px;
}

.hero-wave-loop__text{
  fill:#f3f5f5;
  font-family:"Geist Variable","Geist Sans",Inter,"Segoe UI",Arial,sans-serif;
  font-size:48px;
  font-weight:800;
  letter-spacing:2px;
  dominant-baseline:central;
  user-select:none;
  pointer-events:none;
}
@media(max-width:800px){
  .hero-wave-loop{height:176px;bottom:-24px}
  .hero-wave-loop__ribbon{stroke-width:78}
  .hero-wave-loop__text{font-size:40px;font-weight:800;letter-spacing:1.5px}
  .hero-wave-loop__measure{font-size:40px;font-weight:800;letter-spacing:1.5px}
}
@media(prefers-reduced-motion:reduce){.hero-wave-loop__text{opacity:1}}


/* PATCH 59 — privacy policy links in forms and footer */
footer{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(24px,4vw,72px)}
.footer-disclaimer{max-width:980px}
.footer-privacy{flex:0 0 auto;color:var(--mute);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px;white-space:nowrap}
.footer-privacy:hover{color:var(--ink);text-decoration-color:currentColor}
@media(max-width:800px){footer{display:grid;gap:18px}.footer-privacy{white-space:normal;justify-self:start}}

/* PATCH 61 — ImageTrail in the lower part of the Hero, replacing TextLoop. */
.hero-image-trail{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;
  height:34vh;
  min-height:260px;
  max-height:420px;
  overflow:visible;
  pointer-events:auto;
  touch-action:pan-y;
}
.hero-image-trail__img{
  position:absolute;
  top:0;
  left:0;
  width:clamp(210px,15vw,310px);
  aspect-ratio:1.42 / 1;
  border-radius:12px;
  overflow:hidden;
  opacity:0;
  transform:translate3d(0,0,0) scale(1);
  will-change:transform,opacity,filter;
  box-shadow:0 18px 55px rgba(0,0,0,.24);
  pointer-events:none;
}
.hero-image-trail__inner{
  position:absolute;
  inset:-10px;
  background-position:center;
  background-size:cover;
  transform:translateZ(0);
}
@media(max-width:800px){
  .hero-image-trail{
    height:25vh;
    min-height:180px;
    max-height:250px;
    bottom:8px;
    pointer-events:auto;
  }
  .hero-image-trail__img{
    width:clamp(150px,46vw,205px);
    border-radius:10px;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-image-trail{display:none}
}


/* PATCH 68 — supplied project logo + responsive brand sizing */
.hero-content .brand{width:clamp(150px,10vw,190px);height:auto;line-height:0;letter-spacing:0}
.hero-content .brand img{display:block;width:100%;height:auto;object-fit:contain}
@media (max-width:760px){.hero-content .brand{width:132px}}

/* Semantic SEO heading: available to search engines and screen readers without changing the hero layout. */
.seo-h1{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* MOBILE HERO — clean final composition.
   Desktop is intentionally untouched. */
@media (max-width:800px){

  /* Cursor ImageTrail is desktop-only. */
  .hero-image-trail{
    display:none !important;
  }

  /* Header stays at the top. */
  .hero-content .brand{
    top:18px;
    left:0;
  }

  /* Text/CTA occupy the upper part of the screen. */
  .hero-lockup{
    top:150px;
    left:0;
    right:0;
    width:auto;
    margin:0;
  }

  .hero .particle-soon{
    margin:0 0 12px;
  }

  .hero-meta p{
    margin-bottom:16px;
  }

  /* Render lives in the lower part of the Hero
     and is bounded by hero-content's content box. */
  .hero-masonry.hero-mosaic{
    left:0 !important;
    right:0 !important;
    width:auto !important;
    max-width:none !important;
    top:auto !important;
    bottom:28px !important;
    height:auto !important;
    aspect-ratio:16 / 9;
    transform:none !important;
    margin:0 !important;
    box-sizing:border-box;
    overflow:hidden !important;

    /* No desktop fade on touch devices. */
    mask-image:none !important;
    -webkit-mask-image:none !important;

    --mosaic-gap:3px;
  }

  .hero-mosaic .hero-masonry__item{
    box-sizing:border-box;
    overflow:hidden;
    padding:0;
  }

  .hero-mosaic .hero-masonry__item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
    border-radius:0;
  }
}

/* MOBILE HERO — restore horizontal gutters for the lower render. */
@media (max-width:800px){
  .hero-masonry.hero-mosaic{
    left:var(--page-x) !important;
    right:var(--page-x) !important;
    width:auto !important;
    max-width:none !important;
  }
}

/* MOBILE HERO — restore global horizontal gutters. */
@media (max-width:800px){
  .hero-content{
    padding-left:var(--page-x) !important;
    padding-right:var(--page-x) !important;
    box-sizing:border-box;
  }

  .hero-content .brand{
    left:0;
  }

  .hero-lockup{
    left:0;
    right:0;
  }

  .hero-masonry.hero-mosaic{
    left:0 !important;
    right:0 !important;
    width:auto !important;
    max-width:none !important;
  }
}

/* MOBILE HERO — final alignment to the 20px page grid. */
@media (max-width:800px){
  .hero-content .brand{
    left:var(--page-x) !important;
  }

  .hero-lockup{
    left:var(--page-x) !important;
    right:var(--page-x) !important;
  }

  .hero-masonry.hero-mosaic{
    left:var(--page-x) !important;
    right:var(--page-x) !important;
    width:auto !important;
    max-width:none !important;
  }
}

/* PATCH 68 — final mobile Hero grid.
   Mosaic is a sibling of hero-content, so it gets the page gutters directly. */
@media (max-width:800px){
  .hero-masonry.hero-mosaic{
    left:20px !important;
    right:20px !important;
    width:auto !important;
    max-width:none !important;
    box-sizing:border-box !important;

    top:auto !important;
    bottom:28px !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    transform:none !important;

    overflow:hidden !important;
    margin:0 !important;

    mask-image:none !important;
    -webkit-mask-image:none !important;
  }
}

/* PATCH 69 — final mobile Hero geometry.
   Mobile mosaic is a fixed 20px-inset box inside the Hero. */
@media (max-width:800px){

  .hero-content{
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box !important;
  }

  .hero-content .brand{
    left:0 !important;
  }

  .hero-lockup{
    left:0 !important;
    right:0 !important;
  }

  .hero-masonry.hero-mosaic{
    left:20px !important;
    right:auto !important;
    width:calc(100% - 40px) !important;
    max-width:none !important;
    box-sizing:border-box !important;

    top:auto !important;
    bottom:28px !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    margin:0 !important;
    transform:none !important;

    overflow:hidden !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
  }

  /* Touch devices do not need desktop hover enlargement. */
  .hero-mosaic .hero-masonry__item img,
  .hero-mosaic .hero-masonry__item:hover img,
  .hero-mosaic .hero-masonry__item.is-hovered img{
    transform:translateZ(0) scale(1) !important;
  }
}

/* PATCH 70 — restore Hero content grid and fix mobile mosaic against viewport. */
@media (max-width:800px){

  /* Restore the original 20px mobile content grid. */
  .hero-content{
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box !important;
  }

  .hero-content .brand{
    left:20px !important;
  }

  .hero-lockup{
    left:20px !important;
    right:20px !important;
    width:auto !important;
  }

  /* The mosaic is a sibling of .hero-content.
     Bind its geometry directly to the viewport. */
  .hero-masonry.hero-mosaic{
    left:20px !important;
    right:auto !important;
    width:calc(100vw - 40px) !important;
    max-width:calc(100vw - 40px) !important;
    box-sizing:border-box !important;

    top:auto !important;
    bottom:28px !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;

    overflow:hidden !important;
    margin:0 !important;
    transform:none !important;

    mask-image:none !important;
    -webkit-mask-image:none !important;
  }
}

/* PATCH 71 — mobile mosaic cards must not add padding to JS-calculated cells. */
@media (max-width:800px){
  .hero-masonry.hero-mosaic .hero-masonry__item{
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .hero-masonry.hero-mosaic .hero-masonry__item img{
    box-sizing:border-box !important;
  }
}





/* FIX 78 — mobile mosaic:
   old min-height:235px forced 16:9 width to 417.77px on real Safari */
@media (max-width:800px){
  #heroMasonry.hero-mosaic{
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
  }
}