/* Vanik Hospitality Co. — brand system (Identity v1)
   Aqua #6BC4CA (fill/accent only, never small text on light)
   Charcoal #4C4E4D (text) · derived neutrals per brand guide */

@font-face{font-family:'Metropolis';font-weight:400;font-display:swap;src:url('../fonts/Metropolis-Regular.woff2') format('woff2')}
@font-face{font-family:'Metropolis';font-weight:500;font-display:swap;src:url('../fonts/Metropolis-Medium.woff2') format('woff2')}
@font-face{font-family:'Metropolis';font-weight:600;font-display:swap;src:url('../fonts/Metropolis-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Metropolis';font-weight:700;font-display:swap;src:url('../fonts/Metropolis-Bold.woff2') format('woff2')}

:root{
  --aqua:#6BC4CA; --aqua-ink:#1F7C83; --charcoal:#4C4E4D; --ink:#2B3A3C;
  --slate:#5F6D6B; --line:#DBE3E2; --mist:#EEF3F2; --paper:#F4F7F6; --white:#FEFEFE;
  --shadow:0 1px 2px rgba(43,58,60,.05),0 10px 34px rgba(43,58,60,.09);
  --maxw:1120px; --radius:16px; --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
section[id]{scroll-margin-top:88px}
::selection{background:var(--aqua); color:var(--ink)}
:focus-visible{outline:3px solid var(--aqua-ink); outline-offset:2px}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--charcoal);
  font-family:'Metropolis',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--aqua-ink)}
h1,h2,h3{color:var(--ink); margin:0; letter-spacing:-.02em; line-height:1.06; text-wrap:balance}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
.eyebrow{font-weight:600; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua-ink); margin:0 0 14px}
section{padding:clamp(56px,9vw,104px) 0}
.sec-h{font-weight:700; font-size:clamp(27px,4.4vw,42px)}
.sec-lead{color:var(--slate); max-width:60ch; font-size:clamp(16px,2vw,18.5px); margin-top:14px}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-weight:600; font-size:15.5px; border-radius:12px; padding:14px 26px; text-decoration:none; letter-spacing:.01em; border:2px solid transparent; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease)}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(43,58,60,.16)}
.btn-ghost:hover{background:rgba(254,254,254,.14)}
.btn-ghost-dark:hover{background:var(--ink); border-color:var(--ink); color:var(--white)}
.btn:focus-visible{outline:3px solid var(--aqua); outline-offset:2px}
.btn-primary{background:var(--ink); color:var(--white)}
.btn-accent{background:var(--aqua); color:var(--ink)}
.btn-ghost{background:transparent; border-color:rgba(254,254,254,.55); color:var(--white)}
.btn-ghost-dark{background:transparent; border-color:var(--charcoal); color:var(--ink)}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,36px);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.scrolled{background:rgba(244,247,246,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line)}
.nav .logo{height:44px; width:auto; --lg-ink:var(--white); --lg-aqua:var(--aqua)}
.nav.scrolled .logo{--lg-ink:var(--charcoal)}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2.6vw,30px)}
.nav-links a{font-weight:600; font-size:15px; text-decoration:none; color:var(--white); transition:color .3s}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav-links a:hover{color:var(--aqua)}
.nav.scrolled .nav-links a:hover{color:var(--aqua-ink)}
.nav-links .btn{padding:10px 20px; font-size:14px}
.burger{display:none; background:none; border:0; padding:10px 4px 10px 10px; cursor:pointer}
.burger span{display:block; width:22px; height:2.5px; border-radius:2px; background:var(--white); margin:4.5px 0; transition:background .3s}
.nav.scrolled .burger span, .nav.open .burger span{background:var(--ink)}
@media (max-width:720px){
  .burger{display:block}
  .nav-links a:not(.btn){display:none}
  .nav.open{background:rgba(244,247,246,.97); box-shadow:0 1px 0 var(--line)}
  .nav.open .logo{--lg-ink:var(--charcoal)}
  .nav.open .nav-links{position:fixed; top:72px; left:0; right:0; background:rgba(244,247,246,.97); backdrop-filter:blur(10px); flex-direction:column; align-items:flex-start; padding:8px 24px 20px; gap:2px; box-shadow:0 18px 34px rgba(43,58,60,.14)}
  .nav.open .nav-links a:not(.btn){display:block; color:var(--ink); padding:11px 0; font-size:17px; width:100%}
  .nav.open .nav-links .btn{margin-top:10px}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:0; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:60% 55%}
.hero-media::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(34,48,47,.5) 0%, rgba(34,48,47,.26) 38%, transparent 68%),
    linear-gradient(180deg, rgba(34,48,47,.5) 0%, rgba(34,48,47,.14) 18%, transparent 42%,
      rgba(43,58,60,.12) 60%, rgba(43,58,60,.3) 74%, rgba(34,48,47,.52) 87%, rgba(34,48,47,.66) 100%)}
.hero-inner{position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px) clamp(44px,8vh,84px); color:var(--white)}
.hero h1{color:var(--white); font-weight:700; font-size:clamp(34px,6.2vw,64px)}
.hero .h-sub{font-size:clamp(16px,2.1vw,21px); font-weight:500; letter-spacing:0; line-height:1.45; color:rgba(255,255,255,.85); margin:18px 0 0; max-width:44ch; text-wrap:pretty}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-scroll{position:absolute; right:clamp(20px,4vw,44px); bottom:clamp(44px,8vh,84px); color:rgba(255,255,255,.75); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; writing-mode:vertical-rl; display:flex; align-items:center; gap:10px}
.hero-scroll::after{content:""; width:1px; height:44px; background:linear-gradient(180deg, var(--aqua), transparent)}
@media (max-width:720px){ .hero-scroll{display:none} }
@media (max-width:420px){ .hero-ctas .btn{flex:1 1 100%; text-align:center} }

/* ---------- manifesto ---------- */
.manifesto{background:var(--paper); padding:clamp(76px,12vw,148px) 0}
.manifesto h2{font-weight:700; font-size:clamp(27px,4.4vw,42px); max-width:22ch}
.manifesto .maybe{margin-top:26px; display:grid; gap:10px; max-width:62ch}
.manifesto .maybe p{margin:0; font-size:clamp(17px,2.3vw,21px); line-height:1.5; color:var(--slate)}
.manifesto .maybe p b{color:var(--ink); font-weight:600}
.manifesto .lands{margin-top:18px; font-size:clamp(18px,2.5vw,23px); font-weight:600; color:var(--ink); max-width:52ch}
.manifesto .lands em{color:var(--aqua-ink); font-style:normal}

/* ---------- turnover-day slot (static v1; 3D drops in later) ---------- */
.tday{background:var(--ink); color:var(--white); position:relative; overflow:hidden}
.tday::before{content:""; position:absolute; inset:0; background:radial-gradient(100% 130% at 88% -10%, rgba(107,196,202,.15), transparent 55%); pointer-events:none}
.tday .wrap{position:relative}
.tday .eyebrow{color:var(--aqua)}
.tday h2{color:var(--white); font-weight:700; font-size:clamp(26px,4.4vw,42px)}
.tday .sec-lead{color:rgba(255,255,255,.72)}
.tday-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:44px}
.tbeat{background:rgba(254,254,254,.05); border:1px solid rgba(254,254,254,.12); border-radius:var(--radius); padding:20px 18px; position:relative}
.now-tag{position:absolute; top:16px; right:16px; display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua)}
.now-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--aqua); animation:nowpulse 2.6s var(--ease) infinite}
@keyframes nowpulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){ .now-tag::before{animation:none} }
.tbeat:last-child{background:rgba(107,196,202,.10); border-color:rgba(107,196,202,.42)}
.tbeat:last-child .tt{color:var(--white)}
.tbeat .tt{font-weight:700; color:var(--aqua); font-size:13px; letter-spacing:.06em; font-variant-numeric:tabular-nums}
.tbeat .tl{font-weight:600; color:var(--white); margin-top:8px; font-size:16px; line-height:1.35}
.tbeat .td{font-size:13.5px; color:rgba(255,255,255,.62); margin-top:6px; line-height:1.5}
.tday-cap{margin-top:34px; text-align:center; font-weight:700; font-size:clamp(19px,2.8vw,26px); color:var(--white)}
.tday-cap em{color:var(--aqua); font-style:normal}
@media (max-width:900px){ .tday-strip{grid-template-columns:1fr 1fr} .tday-strip .tbeat:last-child{grid-column:1 / -1} }
@media (max-width:520px){ .tday-strip{grid-template-columns:1fr} }

/* ---------- services grid ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0 36px; margin-top:44px}
.svc{background:none; border:0; box-shadow:none; border-radius:0; padding:24px 0 28px; border-top:1px solid var(--line)}
.svc .ic{display:flex; align-items:center; margin-bottom:16px}
.svc .ic svg{width:26px; height:26px; stroke:var(--aqua-ink); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.svc .t{font-weight:600; color:var(--ink); font-size:16px; line-height:1.3}
.svc .d{font-size:13.5px; color:var(--slate); margin-top:5px; line-height:1.5}
.svc-more{margin-top:26px}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){
  .svc-grid{grid-template-columns:1fr; gap:0; margin-top:28px}
  .svc{display:grid; grid-template-columns:32px 1fr; gap:2px 16px; padding:16px 0}
  .svc:first-child{border-top:0}
  .svc .ic{grid-row:1 / span 2; margin:0}
  .svc .d{margin-top:0}
}

/* ---------- why vanik ---------- */
.why{background:var(--mist)}
.tiers{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(14px,2vw,24px); margin-top:40px}
.tier{background:none; border:0; box-shadow:none; border-radius:0; padding:20px 0 0; border-top:1px solid var(--line)}
.tier .cap{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); font-weight:600}
.tier .nm{font-weight:700; color:var(--ink); font-size:18px; margin:8px 0 6px}
.tier .ds{font-size:14px; color:var(--slate); line-height:1.55}
.tier.us{background:var(--ink); border:0; border-top:0; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.tier.us .cap{color:var(--aqua); display:flex; align-items:center; gap:8px}
.tier.us .capmark{width:16px; height:16px; flex:none} .tier.us .nm{color:var(--white)} .tier.us .ds{color:rgba(255,255,255,.78)}
@media (max-width:820px){ .tiers{grid-template-columns:1fr} }

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0 36px; margin-top:44px}
.step{background:none; border:0; box-shadow:none; border-radius:0; padding:24px 0 0; border-top:1px solid var(--line); position:relative}
.step .n{display:block; font-weight:700; font-size:clamp(40px,4.5vw,56px); -webkit-text-stroke:1.5px var(--aqua); color:transparent; line-height:1; margin-bottom:14px}
@supports not (-webkit-text-stroke:1px #000){ .step .n{color:var(--aqua)} }
.step .t{font-weight:700; color:var(--ink); font-size:18px}
.step .d{font-size:14.5px; color:var(--slate); margin-top:8px; line-height:1.55}
@media (max-width:820px){
  .steps{grid-template-columns:1fr; gap:0}
  .step{display:grid; grid-template-columns:56px 1fr; gap:2px 18px; padding:18px 0}
  .step:first-child{border-top:0}
  .step .n{grid-row:1 / span 2; font-size:40px; margin:0}
}

/* ---------- gallery band ---------- */
.gallery{padding-top:0}
.band{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; max-width:min(1440px, 100% - 2*clamp(12px,2.5vw,32px)); margin:44px auto 0}
.band figure{margin:0}
.band .ph{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3}
.band .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.band figure:hover .ph img{transform:scale(1.04)}
.band figcaption{padding:12px 2px 0; color:var(--slate); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
@media (max-width:720px){ .band{grid-template-columns:1fr} .band figure{aspect-ratio:16/10} }

/* ---------- proof ---------- */
.proof{background:var(--ink); color:var(--white); position:relative; overflow:hidden}
.proof::before{content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 8% -10%, rgba(107,196,202,.13), transparent 55%); pointer-events:none}
.proof .wrap{position:relative}
.proof .eyebrow{color:var(--aqua)}
.proof h2{color:var(--white); font-weight:700; font-size:clamp(30px,5vw,48px)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px}
.stat{background:none; border:0; border-radius:0; padding:6px 0 6px 32px; border-left:1px solid rgba(254,254,254,.16)}
.stat:first-child{border-left:0; padding-left:0}
.stat .num{font-weight:700; font-size:clamp(44px,6vw,76px); color:var(--aqua); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.stat .star{font-size:.52em; vertical-align:.16em; margin-left:2px}
.stat .lab{font-size:14px; color:rgba(255,255,255,.68); margin-top:12px; line-height:1.45}
.quote-slot{margin-top:44px; max-width:52ch}
.quote-slot p{margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.6)}
.quote-slot .who{margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.55); font-weight:600}
@media (max-width:720px){ .stats{grid-template-columns:1fr; gap:30px} .stat{border-left:0; padding-left:0} }

/* ---------- three doors ---------- */
.doors{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(14px,2vw,24px); margin-top:40px}
.door{display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:box-shadow .22s var(--ease)}
.door::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--aqua); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.door:hover{box-shadow:0 14px 40px rgba(43,58,60,.13)}
.door:hover::before{transform:scaleX(1)}
.door .q{font-weight:700; color:var(--ink); font-size:19px; letter-spacing:-.01em}
.door .a{font-size:15px; color:var(--slate); margin-top:8px; line-height:1.55}
.door .go{display:inline-block; margin-top:16px; font-weight:600; font-size:14px; color:var(--aqua-ink); transition:transform .25s var(--ease)}
.door:hover .go{transform:translateX(4px)}
.fee-line{text-align:center; margin-top:28px; color:var(--slate); font-size:15px}
.fee-line a{font-weight:600}
@media (max-width:820px){ .doors{grid-template-columns:1fr} }

/* ---------- final cta ---------- */
.final{background:var(--mist); text-align:center; position:relative; overflow:hidden; padding:clamp(80px,12vw,140px) 0}
.final .vmark-bg{position:absolute; right:-6%; bottom:-18%; width:min(52vw,480px); height:auto; opacity:.09; pointer-events:none}
.final .wrap{position:relative}
.final h2{font-weight:700; font-size:clamp(30px,5vw,48px)}
.final p{color:var(--slate); font-size:clamp(16px,2vw,18.5px); max-width:46ch; margin:16px auto 0}
.final .btn{margin-top:28px}

/* ---------- footer ---------- */
footer{background:var(--ink); color:rgba(255,255,255,.72); padding:56px 0 40px; font-size:14.5px}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; align-items:start}
footer .logo{height:56px; width:auto; --lg-ink:var(--white); --lg-aqua:var(--aqua)}
footer .area{margin-top:16px; color:rgba(255,255,255,.55); font-size:13.5px; max-width:34ch}
footer .foot-h{color:var(--white); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px}
footer a{color:rgba(255,255,255,.78); text-decoration:none; display:block; padding:3px 0}
footer a:hover{color:var(--aqua)}
footer .sun-line{margin:36px 0 0; font-size:13px; color:rgba(255,255,255,.5)}
footer .sun-line span{color:var(--aqua); font-variant-numeric:tabular-nums}
footer .legal{margin-top:40px; padding-top:20px; border-top:1px solid rgba(254,254,254,.12); font-size:12.5px; color:rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
@media (max-width:760px){ footer .cols{grid-template-columns:1fr} }

/* ---------- mobile sticky cta ---------- */
.sticky-cta{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; display:none}
.sticky-cta a svg{width:18px; height:18px; vertical-align:-3px; margin-right:9px}
.sticky-cta a{display:block; text-align:center; background:var(--aqua); color:var(--ink); font-weight:700; font-size:15.5px; padding:15px; border-radius:14px; text-decoration:none; box-shadow:0 8px 30px rgba(43,58,60,.25)}
@media (max-width:720px){ .sticky-cta.show{display:block} }
.sticky-cta.suppress{display:none}

/* ---------- reveal ---------- */
.js .fade{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.fade.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .fade{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- subpages ---------- */
.nav-links a[aria-current="page"]{color:var(--aqua)}
.nav.scrolled .nav-links a[aria-current="page"]{color:var(--aqua-ink)}
.page-head{background:radial-gradient(110% 130% at 88% -8%, rgba(107,196,202,.16), transparent 55%), var(--ink); color:var(--white); padding:clamp(120px,18vh,180px) 0 clamp(48px,8vw,84px)}
.page-head .eyebrow{color:var(--aqua)}
.page-head h1{color:var(--white); font-weight:700; font-size:clamp(32px,5.4vw,54px); letter-spacing:-.02em; line-height:1.05; max-width:20ch}
.page-head .lead-inv{color:rgba(255,255,255,.75); font-size:clamp(16px,2.1vw,19.5px); max-width:56ch; margin-top:16px}
.page-head .lead-inv b{color:var(--white)}

.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(26px,5vw,64px); align-items:center}
.split .ph{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.split .ph img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.split h3, .split .split-h{font-weight:700; font-size:clamp(22px,3.4vw,32px); letter-spacing:-.015em}
.split .big-d{color:var(--slate); margin-top:12px; font-size:clamp(15.5px,2vw,18px)}
.svc-mini{list-style:none; margin:22px 0 0; padding:0}
.svc-mini li{padding:11px 0; border-top:1px solid var(--line); font-size:15px}
.svc-mini li b{color:var(--ink); font-weight:600}
.split.rev .ph{order:-1}
@media (max-width:820px){ .split{grid-template-columns:1fr} .split.rev .ph{order:0} }

.exploded-svg{width:min(100%,900px); margin:44px auto 0; display:block; height:auto}
.exploded-svg .wl{stroke:#FEFEFE; stroke-width:9; fill:none; stroke-linecap:round; stroke-linejoin:round}
.exploded-svg .al{stroke:#6BC4CA; stroke-width:9; fill:none; stroke-linecap:round; stroke-linejoin:round}
.exploded-svg .thin{stroke-width:6}
.exploded-svg text{font-family:'Metropolis',system-ui,sans-serif; font-weight:600}
.exploded-svg .lb{fill:#6BC4CA; font-size:24px; letter-spacing:.04em}
.exploded-svg .ls{fill:rgba(255,255,255,.72); font-size:17px}
.exploded-svg .ldr{stroke:rgba(107,196,202,.5); stroke-width:2; stroke-dasharray:5 6}
.js .exploded-svg .wl, .js .exploded-svg .al{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease)}
.js .exploded-svg.in .wl, .js .exploded-svg.in .al{stroke-dashoffset:0}
.exploded-svg.in .al{transition-delay:.5s}
.js .exploded-svg .ldr-g{opacity:0; transition:opacity .6s var(--ease) 1.1s}
.exploded-svg.in .ldr-g{opacity:1}
.svg-labels{display:none}
@media (max-width:720px){
  .exploded-svg text, .exploded-svg .ldr-g{display:none}
  .svg-labels{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin-top:28px; list-style:none; padding:0}
  .svg-labels .lb2{font-weight:700; color:var(--aqua); font-size:15px}
  .svg-labels .ls2{color:rgba(255,255,255,.72); font-size:13px; margin-top:2px}
}
.page-head + .tday{padding-top:clamp(8px,2vw,24px)}

.mech-list{list-style:none; margin:36px 0 0; padding:0; display:grid; gap:0}
.mech-list li{display:grid; grid-template-columns:220px 1fr; gap:8px 28px; padding:20px 0; border-top:1px solid rgba(254,254,254,.14)}
.mech-list .m-k{font-weight:700; color:var(--aqua); font-size:15px}
.mech-list .m-v{color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.6}
.mech-list .m-v b{color:var(--white)}
@media (max-width:640px){ .mech-list li{grid-template-columns:1fr; gap:2px} }

.plate{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(24px,4vw,40px)}
.plate .p-big{font-weight:700; color:var(--ink); font-size:clamp(19px,2.8vw,25px); letter-spacing:-.01em; line-height:1.35}
.plate .p-big em{color:var(--aqua-ink); font-style:normal}
.model-rows{list-style:none; margin:26px 0 0; padding:0}
.model-rows li{display:grid; grid-template-columns:220px 1fr; gap:8px 28px; padding:16px 0; border-top:1px solid var(--line); font-size:15.5px}
.model-rows .k{font-weight:700; color:var(--ink)}
.model-rows .v{color:var(--slate); line-height:1.55}
@media (max-width:640px){ .model-rows li{grid-template-columns:1fr; gap:2px} }

.faq{margin-top:36px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 0; font-weight:600; color:var(--ink); font-size:clamp(16px,2.2vw,18px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--aqua-ink)}
.faq summary::after{content:"+"; font-weight:600; font-size:22px; color:var(--aqua-ink); flex:none; transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px; color:var(--slate); max-width:64ch; font-size:15.5px; line-height:1.65}

.journey{margin-top:44px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px}
.journey-track{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; min-width:0; position:relative}
@media (max-width:900px){ .journey-track{grid-template-columns:repeat(5,210px); min-width:1050px} .journey{mask-image:linear-gradient(90deg,#000 90%,transparent)} }
.journey-track::before{content:""; position:absolute; left:8px; width:calc(80% + 8px); top:7px; height:2px; background:var(--aqua)}
.jstop{scroll-snap-align:start; padding:0 22px 0 0; position:relative}
.jstop::before{content:""; position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%; background:var(--paper); border:3px solid var(--aqua)}
.jstop .d{font-weight:700; color:var(--aqua-ink); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-top:30px; font-variant-numeric:tabular-nums}
.jstop .t{font-weight:700; color:var(--ink); font-size:17px; margin-top:6px}
.jstop .s{color:var(--slate); font-size:14px; margin-top:5px; line-height:1.5}
.jstop:last-child::before{background:var(--aqua)}
.jstop:last-child .t{color:var(--aqua-ink)}

.traits-rows{margin-top:36px}
.trait-row{display:grid; grid-template-columns:220px 1fr; gap:8px 28px; padding:20px 0; border-top:1px solid var(--line)}
.trait-row .t{font-weight:700; color:var(--ink); font-size:17px}
.trait-row .d{color:var(--slate); font-size:15.5px; line-height:1.6}
@media (max-width:640px){ .trait-row{grid-template-columns:1fr; gap:2px} }

.page-head.ph-photo{position:relative; overflow:hidden; padding:clamp(150px,26vh,240px) 0 clamp(64px,10vw,110px)}
.ph-photo .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.ph-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(34,48,47,.55), rgba(34,48,47,.28) 45%, rgba(34,48,47,.66))}
.ph-photo .wrap{position:relative; z-index:1}

.form-wrap{max-width:680px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-weight:600; font-size:13.5px; color:var(--ink); letter-spacing:.02em}
.field label .opt{color:var(--slate); font-weight:500}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; transition:border-color .2s var(--ease)}
.field textarea{min-height:110px; resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none; border-color:var(--aqua-ink); box-shadow:0 0 0 3px rgba(107,196,202,.32)}
.field input:user-invalid,.field select:user-invalid{border-color:#B4544A}
.field select{appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235F6D6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px}
.form-actions{margin-top:22px}
.form-note{font-size:13.5px; color:var(--slate); margin-top:14px}
.form-status{display:none; margin-top:18px; padding:16px 18px; border-radius:12px; font-size:15px; line-height:1.55}
.form-status.ok{display:block; background:rgba(107,196,202,.16); color:var(--aqua-ink); font-weight:600}
.form-status.err{display:block; background:#F7EEEC; color:#7A4A42; border:1px solid #E5CFC9}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr} }
#leadform{transition:opacity .45s var(--ease)}
#leadform.done{opacity:0; pointer-events:none; position:absolute; visibility:hidden}
.success-arc{display:none; text-align:center; padding:34px 0 10px}
.success-arc.show{display:block}
.success-arc .mark{width:120px; height:120px; margin:0 auto}
.success-arc .mark path, .success-arc .mark polyline{stroke:var(--aqua-ink); stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.js .success-arc .mark path, .js .success-arc .mark polyline{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease)}
.js .success-arc.show .mark path, .js .success-arc.show .mark polyline{stroke-dashoffset:0}
.success-arc h2{font-weight:700; font-size:clamp(26px,4.4vw,38px); margin-top:22px}
.success-arc p{color:var(--slate); margin-top:10px}
.plate-gap{margin-top:34px}
.p-sm{font-size:17px}
.sig{margin-top:18px; font-weight:600; color:var(--ink); border-top:2px solid var(--aqua); padding-top:14px; width:fit-content}