/* Page layout: header, sections, results, add-ons, steps, FAQ, footer. */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:6px}
.skip:focus{left:8px}
html{scroll-padding-top:84px}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .25s,border-color .25s,color .25s}
.site-header.is-dark{background:rgba(10,13,18,.35);border-color:rgba(255,255,255,.1);color:#fff}
.header-inner{height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-chip{display:inline-flex;padding:5px 9px;border-radius:8px;background:#fff;transition:box-shadow .25s}
.site-header.is-dark .brand-chip{box-shadow:0 6px 20px rgba(0,0,0,.25)}
.brand img{width:104px;height:auto}
.nav{display:flex;gap:24px;margin-left:auto;font-weight:700;font-size:.92rem}
.nav a{text-decoration:none;opacity:.86}
.nav a:hover{opacity:1;color:var(--signal)}
.site-header.is-dark .nav a:hover{color:#9cc3ff}
.header-cta{min-height:44px}
@media (max-width:980px){.nav{display:none}.header-cta{margin-left:auto}}
@media (max-width:420px){.header-cta{padding:0 .9em;font-size:.9rem}.brand img{width:88px}}

/* Sections */
.section{padding:clamp(72px,10vw,128px) 0}
.section-white{background:var(--white)}
.section-ink{background:var(--ink);color:var(--on-dark)}
.section-ink .muted,.section-ink .fine{color:var(--on-dark-muted)}
.section h2 em{font-style:italic;color:var(--signal)}
.section-ink h2 em{color:#7fb2ff}
.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 60px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.section-head .kicker{margin-bottom:14px}
.section-head p{margin:0;max-width:44ch}
@media (max-width:800px){.section-head{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card-tag{position:absolute;top:-12px;left:22px}
.card-dark{background:var(--ink-2);border-color:var(--line-dark);color:var(--on-dark)}
.card-dark .muted{color:var(--on-dark-muted)}
.card-dark:hover{border-color:#3d4a5e}
.featured-blue{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal),0 24px 60px rgba(24,119,255,.2)}
.fine{font-size:.85rem;color:var(--steel);margin-top:22px;max-width:80ch}
.promo-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 0;font-weight:700}

/* Value strip */
.values{background:var(--white);border-bottom:1px solid var(--line)}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.value{display:flex;gap:14px;padding:26px 18px;border-left:1px solid var(--line)}
.value:first-child{border-left:0;padding-left:0}
.value .mono{color:var(--signal);font-weight:700}
.value strong{display:block;font-size:.98rem}
.value small{display:block;color:var(--steel);font-size:.86rem;line-height:1.4}
@media (max-width:900px){.values-grid{grid-template-columns:1fr 1fr}.value:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:520px){.values-grid{grid-template-columns:1fr}.value{border-left:0;padding:16px 0;border-top:1px solid var(--line)}.value:first-child{border-top:0}}

/* Add-ons */
.addons-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.brand-panel{overflow:hidden;align-self:start;position:sticky;top:96px;
  display:flex;flex-direction:column;gap:22px;padding:clamp(22px,4vw,44px);border-radius:var(--radius-l);
  background:radial-gradient(circle at 78% 12%,rgba(24,119,255,.38),transparent 52%),
    radial-gradient(circle at 10% 100%,rgba(24,119,255,.16),transparent 45%),linear-gradient(160deg,#141c29,#07090d 70%);
  border:1px solid #1f2a3b;box-shadow:var(--shadow-strong);color:var(--on-dark)}
.brand-panel::before{content:"";position:absolute;top:-30px;right:-40px;width:260px;height:120px;transform:skewX(var(--slant));
  background:repeating-linear-gradient(90deg,rgba(24,119,255,.55) 0 10px,transparent 10px 22px);opacity:.35;pointer-events:none}
.brand-panel-mark{color:#9cc3ff;font-weight:700;position:relative}
.brand-plate{position:relative;border-radius:12px;padding:clamp(18px,3.4vw,36px);
  background:linear-gradient(180deg,#ffffff,#eef2f7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 4px rgba(24,119,255,.28),0 24px 60px rgba(0,0,0,.5)}
.brand-plate img{width:100%;max-width:440px;height:auto;margin:0 auto}
.brand-panel-line{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;color:var(--on-dark-muted);position:relative}
.brand-panel-line span:not(:last-child)::after{content:"·";margin:0 .7em;color:var(--signal)}
@media (max-width:520px){.brand-panel-line{font-size:.66rem;letter-spacing:.05em}}
.addons-grid h2{margin:14px 0 16px}
.addon-list{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--line)}
.addon-list li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.addon-list strong{display:block;font-size:.98rem}
.addon-list small{display:block;color:var(--steel);font-size:.85rem}
.addon-list b{font-family:var(--font-mono);white-space:nowrap;color:var(--ink)}
.addon-list b.range{color:var(--signal)}
@media (max-width:900px){.addons-grid{grid-template-columns:1fr}.brand-panel{position:relative;top:auto}}

/* Before / after */
.ba-card h3{margin-top:16px}
.ba-card p{margin:6px 0 0;font-size:.92rem}
.ba{position:relative;overflow:hidden;border-radius:var(--radius-l);background:#111;aspect-ratio:4/5;width:100%;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-divider::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:var(--signal);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ba-badge{position:absolute;top:12px;padding:5px 9px;border-radius:4px;font-size:.66rem;font-weight:700;background:rgba(10,13,18,.72);color:#fff}
.ba-badge-before{left:12px}.ba-badge-after{right:12px;background:var(--signal)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-range:focus-visible + *,.ba:focus-within .ba-divider::after{outline:3px solid #fff;outline-offset:2px}
.results-grid{align-items:start}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps li{padding:24px;border-top:4px solid var(--ink);background:var(--white);border-radius:0 0 var(--radius) var(--radius)}
.steps li:first-child{border-top-color:var(--signal)}
.step-num{font:700 .8rem var(--font-mono);color:var(--signal)}
.steps h3{margin:10px 0 8px}
.steps p{margin:0;font-size:.95rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.faq-wrap h2{margin-top:14px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:800;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:700 1.4rem var(--font-mono);color:var(--signal)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;color:var(--steel);max-width:62ch}
@media (max-width:800px){.faq-wrap{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--ink);color:var(--on-dark);padding:64px 0 110px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;align-items:start}
.footer-logo{width:220px;height:auto;background:#fff;border-radius:var(--radius);padding:10px}
.footer-label{color:var(--on-dark-muted);margin:0 0 6px}
.footer-grid p{margin:0 0 18px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:.82rem;color:var(--on-dark-muted)}
.muted-2{max-width:60ch}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr}}

/* Sticky mobile CTA */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;transition:transform .25s var(--ease),opacity .25s}
  .mobile-cta .btn{width:100%;min-height:54px;box-shadow:0 14px 30px rgba(10,13,18,.35)}
  .on-stage .mobile-cta,.booking-in-view .mobile-cta{transform:translateY(140%);opacity:0;pointer-events:none}
}