/* ============================================================
   HATCH — Light "Holo" homepage skin, Oryzo-style scroll motion
   Scoped to body.home-cinema (class name kept for JS hooks).
   Reference: tryholo.ai (white, bold, pill, one gradient accent)
   + oryzo.ai (scroll-driven storytelling, pinned scenes).
   ============================================================ */

body.home-cinema{
  --h-bg:#F5EFE4;          /* cream — matches the diorama backgrounds */
  --h-card:#FFFDF8;
  --h-ink:#2D2A26;
  --h-dim:#75695C;
  --h-line:#E7DCC9;
  --h-accent-a:#E07850;    /* terracotta */
  --h-accent-b:#F2B84B;    /* sun yellow */
  --h-teal:#3E8E8C;
  --h-sage:#8FB98A;
  --h-grad:linear-gradient(135deg,#E07850,#F2B84B);
  background:var(--h-bg);
  color:var(--h-ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
body.home-cinema ::selection{background:#E07850;color:#fff}
body.home-cinema .container{width:min(1160px,92vw);margin-inline:auto}

/* ---------- floating pill nav ---------- */
body.home-cinema .nav{position:fixed;top:16px;left:0;right:0;z-index:50;background:transparent;border:0}
body.home-cinema .nav__inner{display:flex;align-items:center;justify-content:space-between;padding:0}
body.home-cinema .nav__logo{font-family:'Geist',sans-serif;font-weight:700;font-size:21px;color:var(--h-ink);text-decoration:none;letter-spacing:-.02em;
  background:#fff;border:1px solid var(--h-line);border-radius:999px;padding:10px 20px;box-shadow:0 2px 10px rgba(17,17,20,.05)}
body.home-cinema .nav__logo i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--h-grad);margin-left:2px}
body.home-cinema .nav__links{display:flex;gap:2px;background:#fff;border:1px solid var(--h-line);border-radius:999px;padding:5px;box-shadow:0 2px 10px rgba(17,17,20,.05)}
body.home-cinema .nav__links a{color:var(--h-ink);text-decoration:none;font-size:14px;font-weight:500;padding:8px 16px;border-radius:999px;transition:background .2s}
body.home-cinema .nav__links a:hover{background:var(--h-bg)}
body.home-cinema .nav.is-scrolled .nav__inner{}
body.home-cinema .btn{border-radius:999px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.5em;justify-content:center;border:0;transition:transform .2s,box-shadow .2s,filter .2s}
body.home-cinema .btn-primary{background:var(--h-grad);color:#fff;padding:14px 30px;font-size:15.5px;box-shadow:0 8px 26px rgba(224,120,80,.35)}
body.home-cinema .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 34px rgba(224,120,80,.45)}
body.home-cinema .btn-ghost{background:#fff;color:var(--h-ink);border:1px solid var(--h-line);padding:14px 30px;font-size:15.5px;box-shadow:0 2px 10px rgba(17,17,20,.05)}
body.home-cinema .btn-ghost:hover{border-color:#cfcfc9;transform:translateY(-1px)}
body.home-cinema .nav__cta{padding:11px 22px;font-size:14px}

/* ---------- SCROLL-WORLD: pinned diorama story ---------- */
/* padding:0 is load-bearing — inherited section padding offsets the pinned child,
   so the story visibly slides up before the pin engages (a hitch at scroll 0). */
body.home-cinema .sw{position:relative;padding:0;margin:0}
.sw__pin{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* opacity-driven, never visibility — a binary visibility flip reads as a snap
   at the crossfade zero-crossing. GSAP owns opacity; scenes are non-interactive. */
.sw__scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;will-change:opacity,transform}
.sw__scene:first-of-type{opacity:1}
.sw__scene img{width:min(62vw,880px);max-height:74svh;object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(90,60,30,.22))}
.sw__copy{position:absolute;left:max(24px,5vw);bottom:10svh;max-width:400px;z-index:4;opacity:0}
.sw__copy:first-of-type{opacity:1}
.sw__copy--right{left:auto;right:max(24px,5vw)}
.sw__eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--h-teal);font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.sw__eyebrow::after{content:"";width:30px;height:1px;background:var(--h-teal);opacity:.5}
.sw__title{font-family:'Geist',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.03em;line-height:1.05;margin:0 0 10px}
.sw__title em{font-style:normal;background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sw__body{color:var(--h-dim);font-size:15.5px;line-height:1.6;margin:0 0 14px;max-width:40ch}
.sw__tags{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.sw__tags li{border:1px solid var(--h-line);background:var(--h-card);border-radius:999px;padding:6px 14px;font-size:12.5px;color:var(--h-dim)}
.sw__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
/* progress rail */
.sw__rail{position:absolute;right:max(18px,2.4vw);top:50%;translate:0 -50%;z-index:5;display:flex;flex-direction:column;gap:12px}
.sw__dot{width:10px;height:10px;border-radius:50%;background:transparent;border:2px solid rgba(45,42,38,.35);cursor:pointer;padding:0;transition:all .25s}
.sw__dot.is-on{background:var(--h-accent-a);border-color:var(--h-accent-a);box-shadow:0 0 0 4px rgba(224,120,80,.2)}
/* scroll hint */
.sw__hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:5;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--h-dim);display:flex;align-items:center;gap:8px}
.sw__hint::after{content:"↓";letter-spacing:0}
/* soft ground glow behind scenes */
.sw__glow{position:absolute;left:50%;bottom:6svh;translate:-50% 0;width:60vw;height:26svh;z-index:0;
  background:radial-gradient(closest-side,rgba(242,184,75,.35),transparent 72%);filter:blur(30px);pointer-events:none}

/* ---------- marquee ---------- */
.cin-marquee{overflow:hidden;border-top:1px solid var(--h-line);border-bottom:1px solid var(--h-line);padding:16px 0;background:#fff}
.cin-marquee__track{display:flex;gap:44px;white-space:nowrap;width:max-content}
.cin-marquee__track span{font-family:'Geist',sans-serif;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--h-dim)}
.cin-marquee__track span b{background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- bands ---------- */
.cin-band{position:relative;padding:110px 0;background:var(--h-bg)}
.cin-band--tint{background:#fff}
.cin-count{font-family:'Geist',sans-serif;font-size:12.5px;letter-spacing:.26em;color:var(--h-dim);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cin-count::after{content:"";flex:0 0 44px;height:1px;background:var(--h-line)}
.cin-h2{font-family:'Geist',sans-serif;font-weight:700;font-size:clamp(30px,4vw,52px);letter-spacing:-.03em;line-height:1.06;margin:0 0 14px}
.cin-h2 em{font-style:normal;background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cin-lede{color:var(--h-dim);font-size:16.5px;line-height:1.65;max-width:56ch;margin:0 0 40px}

/* band 02: timeline */
.cin-days{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;margin-top:48px}
.cin-days::before{content:"";position:absolute;top:27px;left:6%;right:6%;height:2px;background:var(--h-line)}
.cin-days__line{position:absolute;top:27px;left:6%;height:2px;width:0;background:var(--h-grad);box-shadow:0 0 14px rgba(224,120,80,.35)}
.cin-day{position:relative;padding-top:56px;text-align:center}
.cin-day i{position:absolute;top:16px;left:calc(50% - 12px);width:24px;height:24px;border-radius:50%;background:var(--h-bg);border:2px solid #cfcfc9;display:block}
.cin-day.is-key i{background:var(--h-grad);border-color:transparent;box-shadow:0 4px 16px rgba(224,120,80,.35)}
.cin-day b{font-family:'Geist',sans-serif;font-size:20px;display:block;margin-bottom:6px}
.cin-day span{color:var(--h-dim);font-size:14.5px;line-height:1.55;display:block;max-width:30ch;margin:0 auto}
.cin-vow{margin-top:56px;border:1px solid var(--h-line);background:#fff;border-radius:24px;padding:34px 38px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between;box-shadow:0 14px 44px rgba(17,17,20,.06)}
.cin-vow p{margin:0;font-family:'Geist',sans-serif;font-size:clamp(19px,2vw,26px);font-weight:700;letter-spacing:-.01em}
.cin-vow p em{font-style:normal;background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cin-vow span{color:var(--h-dim);font-size:14.5px;max-width:44ch}

/* band 03: proof mosaic */
.cin-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.cin-shot{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--h-line);aspect-ratio:16/10;background:#fff;box-shadow:0 8px 26px rgba(17,17,20,.06)}
.cin-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cin-shot figcaption{position:absolute;left:10px;bottom:10px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--h-line);border-radius:999px;padding:5px 12px}
.cin-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.cin-stats .cin-chip{position:static;background:#fff;border:1px solid var(--h-line);border-radius:18px;padding:14px 20px;box-shadow:0 6px 20px rgba(17,17,20,.05)}
.cin-chip b{font-family:'Geist',sans-serif;font-size:clamp(20px,1.8vw,26px);display:block;font-weight:700;line-height:1.1}
.cin-chip span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--h-dim);display:block;margin-top:2px}
.cin-proof__cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}

/* band 04: quote calculator */
body.home-cinema .quote__panel{background:#fff;border:1px solid var(--h-line);border-radius:28px;padding:38px;max-width:760px;box-shadow:0 20px 60px rgba(17,17,20,.07)}
body.home-cinema .qfield{margin-bottom:20px}
body.home-cinema .qfield label,body.home-cinema .qfeatures legend{display:block;font-size:12.5px;letter-spacing:.05em;color:var(--h-dim);margin-bottom:8px;text-transform:uppercase;font-weight:600}
body.home-cinema .qfield input,body.home-cinema .qfield select,body.home-cinema .qfield textarea{width:100%;background:var(--h-bg);
  border:1px solid var(--h-line);border-radius:14px;color:var(--h-ink);padding:13px 16px;font-size:15px;font-family:inherit}
body.home-cinema .qfield :is(input,select,textarea):focus{outline:none;border-color:var(--h-accent-a);box-shadow:0 0 0 3px rgba(224,120,80,.18);background:#fff}
body.home-cinema .qfield--split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.home-cinema .qfeatures{border:0;padding:0;margin:0 0 24px}
body.home-cinema .qchips{display:flex;flex-wrap:wrap;gap:9px}
body.home-cinema .qchip{cursor:pointer}
body.home-cinema .qchip input{position:absolute;opacity:0;pointer-events:none}
body.home-cinema .qchip span{display:inline-block;border:1px solid var(--h-line);background:#fff;border-radius:999px;padding:9px 17px;font-size:13.5px;color:var(--h-ink);transition:all .2s}
body.home-cinema .qchip input:checked + span{background:var(--h-grad);border-color:transparent;color:#fff}
body.home-cinema .qerr{color:#D14343;font-size:13.5px;margin:10px 0 0;min-height:1.2em}
body.home-cinema .quote__result{margin-top:26px;border-top:1px solid var(--h-line);padding-top:26px}
body.home-cinema .qresult__eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--h-dim);font-weight:600}
body.home-cinema .qresult__range{font-family:'Geist',sans-serif;font-size:clamp(30px,3.4vw,44px);font-weight:700;margin:.2em 0;
  background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
body.home-cinema .qresult__why,body.home-cinema .qresult__note,body.home-cinema .qresult__disclaimer{color:var(--h-dim);font-size:14.5px;line-height:1.6}
body.home-cinema .qresult__disclaimer{font-size:12.5px;opacity:.85}
body.home-cinema .qscope{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
body.home-cinema .qscope li{padding-left:22px;position:relative;font-size:14.5px}
body.home-cinema .qscope li::before{content:"✓";position:absolute;left:0;background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
body.home-cinema .qroi{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
body.home-cinema .qroi > div{background:var(--h-bg);border:1px solid var(--h-line);border-radius:16px;padding:12px 16px;min-width:120px}
body.home-cinema .qroi b{font-family:'Geist',sans-serif;font-size:20px;display:block}
body.home-cinema .qroi span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--h-dim)}
body.home-cinema .qroi__hint{font-size:12.5px;color:var(--h-dim)}
body.home-cinema .qresult__cta{margin-top:18px}

/* band 05: steps + ownership */
.cin-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.cin-step{border:1px solid var(--h-line);border-radius:20px;padding:26px;background:#fff;box-shadow:0 8px 26px rgba(17,17,20,.05)}
.cin-step i{font-family:'Geist',sans-serif;font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--h-dim);display:block;margin-bottom:14px;font-weight:600}
.cin-step h3{font-family:'Geist',sans-serif;font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.cin-step p{color:var(--h-dim);font-size:14px;line-height:1.55;margin:0}
.cin-own{margin-top:56px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  border:1px solid var(--h-line);background:#fff;border-radius:24px;padding:34px 38px;box-shadow:0 14px 44px rgba(17,17,20,.06)}
.cin-own p{margin:0;font-family:'Geist',sans-serif;font-size:clamp(19px,2vw,26px);font-weight:700}
.cin-own p em{font-style:normal;background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cin-own span{color:var(--h-dim);font-size:14.5px;max-width:44ch}

/* FAQ */
body.home-cinema .faq__list{max-width:720px;margin-top:36px}
body.home-cinema .faq__item{border:1px solid var(--h-line);border-radius:16px;background:#fff;margin-bottom:10px;padding:0 20px;box-shadow:0 4px 16px rgba(17,17,20,.04)}
body.home-cinema .faq__item summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
body.home-cinema .faq__item summary::after{content:"+";font-size:20px;color:var(--h-dim);transition:rotate .2s}
body.home-cinema .faq__item[open] summary::after{rotate:45deg}
body.home-cinema .faq__item p{color:var(--h-dim);font-size:14.5px;line-height:1.65;padding:0 0 18px;margin:0}

/* final CTA */
.cin-final{position:relative;padding:130px 0;text-align:center;overflow:hidden;background:#fff;border-top:1px solid var(--h-line)}
.cin-final::before{content:"";position:absolute;left:50%;bottom:-40%;translate:-50% 0;width:64vw;aspect-ratio:2/1;
  background:radial-gradient(closest-side,rgba(242,184,75,.18),transparent 70%);filter:blur(30px)}
.cin-final .container{position:relative}
.cin-final .cin-h2{font-size:clamp(34px,5vw,64px)}
.cin-final .cin-count{justify-content:center}
.cin-final .cin-count::after{display:none}
.cin-final__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cin-final__note{color:var(--h-dim);font-size:13.5px;margin-top:18px}

/* footer */
body.home-cinema .footer{border-top:1px solid var(--h-line);padding:48px 0;background:var(--h-bg)}
body.home-cinema .footer__inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
body.home-cinema .footer a{color:var(--h-dim);text-decoration:none;font-size:14px}
body.home-cinema .footer a:hover{color:var(--h-ink)}
body.home-cinema .footer__links{display:flex;gap:18px;flex-wrap:wrap}
body.home-cinema .muted{color:var(--h-dim)}
body.home-cinema .footer__legal{font-size:12.5px;margin-top:8px}
body.home-cinema .footer .nav__logo{background:none;border:0;box-shadow:none;padding:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body.home-cinema .nav__links{display:none}
  .cin-hero{padding-top:100px}
  .cin-stage .cin-chip--a{left:2%;top:8%}
  .cin-stage .cin-chip--b{right:2%;top:30%}
  .cin-stage .cin-chip--c{display:none}
  .cin-days{grid-template-columns:1fr;gap:30px}
  .cin-days::before,.cin-days__line{display:none}
  .cin-day{padding-top:0;text-align:left}
  .cin-day i{display:none}
  .cin-day span{margin:0;max-width:none}
  .cin-proof{grid-template-columns:1fr 1fr}
  .cin-steps{grid-template-columns:1fr 1fr}
  body.home-cinema .qfield--split{grid-template-columns:1fr}
  body.home-cinema .quote__panel{padding:26px}
  .cin-band{padding:76px 0}
}
@media (max-width:560px){
  .cin-proof{grid-template-columns:1fr}
  .cin-steps{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .cin-marquee__track{transform:none!important}
  body.home-cinema *{transition:none!important;animation:none!important}
}

/* ---------- static fallback (no JS / reduced motion) ---------- */
.sw--static .sw__pin{height:auto;overflow:visible;display:block;padding:110px 0 40px}
.sw--static .sw__scene{position:static;visibility:visible;opacity:1!important;transform:none!important;margin:30px auto 6px}
.sw--static .sw__scene img{width:min(720px,88vw);max-height:none}
.sw--static .sw__copy{position:static;visibility:visible;opacity:1!important;pointer-events:auto!important;max-width:560px;margin:0 auto 54px;text-align:center}
.sw--static .sw__eyebrow{justify-content:center}
.sw--static .sw__eyebrow::after{display:none}
.sw--static .sw__tags,.sw--static .sw__cta{justify-content:center}
.sw--static .sw__rail,.sw--static .sw__hint,.sw--static .sw__glow{display:none}

/* mobile world tweaks */
@media (max-width:860px){
  .sw__scene{align-items:flex-start;padding-top:11svh}
  /* heavy drop-shadow blur is a GPU tax during scrub on phones — go light */
  .sw__scene img{width:min(96vw,600px);max-height:50svh;filter:drop-shadow(0 16px 22px rgba(90,60,30,.18))}
  .sw__copy{left:20px;right:20px;bottom:calc(6svh + env(safe-area-inset-bottom,0px));max-width:none}
  .sw__copy--right{left:20px;right:20px}
  /* ≥44px tap targets: the button is an invisible 40px hitbox, the visible
     dot is a centered pseudo-element */
  .sw__rail{right:2px;gap:0}
  .sw__dot{width:40px;height:40px;border:0;background:transparent;box-shadow:none;display:grid;place-items:center}
  .sw__dot::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(45,42,38,.35);transition:all .25s}
  .sw__dot.is-on{background:transparent;box-shadow:none}
  .sw__dot.is-on::before{background:var(--h-accent-a);border-color:var(--h-accent-a);box-shadow:0 0 0 4px rgba(224,120,80,.2)}
  .sw__hint{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .sw__title{font-size:clamp(26px,7.4vw,34px)}
  /* 16px floor stops iOS auto-zoom on focus */
  body.home-cinema .qfield input,body.home-cinema .qfield select,body.home-cinema .qfield textarea{font-size:16px}
  body.home-cinema .tf__input{font-size:16px}
}

/* CRO: hero micro-note under CTA */
.sw__note{font-size:12.5px;color:var(--h-dim);margin:12px 0 0}
@media (max-width:860px){
  .sw__note{font-size:11.5px}
  .sw__body{font-size:14.5px;margin-bottom:10px}
}