/* v8: the site as one of our films — real-time 3D story, the film as hero, springy landings, five simple sections. */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}
.btn-lg{min-height:54px;padding:0 24px;font-size:1rem}
@media (max-width:719px){.btn-lg{width:100%}}

/* hero: promise + film, 3D objects floating behind */
.v8hero{padding-block:clamp(36px,6vw,80px) clamp(56px,7vw,96px)}
.v8hero .wrap{position:relative;z-index:1;display:grid;gap:28px}
.v8hero .hero-copy{max-width:980px;gap:18px}
.v8hero h1{font-size:clamp(2.5rem,7.2vw,5.4rem)}
.v8hero .tagline{font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--ink-2)}
.hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.filmcard{margin-top:0;aspect-ratio:16/9;max-width:1100px;width:100%;justify-self:center}
.filmcard .tag{cursor:pointer}
.v8hero .credit-line{justify-content:center}
@media (max-width:719px){
  .v8hero .wrap{display:flex;flex-direction:column;gap:16px}
  .v8hero .hero-copy{display:contents}
  .v8hero .lang{order:1}.v8hero h1{order:2}.v8hero .tagline{order:3}.v8hero .filmcard{order:4}.v8hero .hero-cta{order:5}.v8hero .credit-line{order:6;justify-content:flex-start}
  .v8hero h1{font-size:clamp(2.1rem,10vw,2.9rem)}
}

/* story: sticky 3D stage, three plain sentences */
.story{position:relative;height:300vh;padding:0;border:0;background:radial-gradient(60% 55% at 50% 50%,#E4EBF5 0%,#D8E1ED 70%)}
.story-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story3d{position:absolute;inset:0;width:100%;height:100%}
.story-poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.story-copy{position:absolute;left:0;right:0;bottom:clamp(40px,10vh,110px);display:grid;place-items:center;text-align:center;padding:0 20px;pointer-events:none}
.st{grid-area:1/1;margin:0;display:grid;gap:12px;justify-items:center;opacity:0;transform:translateY(16px);filter:blur(8px);transition:opacity .6s var(--expo),transform .6s var(--expo),filter .6s var(--expo)}
.st b{font:600 clamp(2rem,5.6vw,4.2rem)/1.04 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.st b em{font-style:normal}
.st .sub{font-size:clamp(1rem,2vw,1.25rem);color:var(--ink-2);max-width:40ch}
.st .giantish{font-size:clamp(3.6rem,13vw,10rem);letter-spacing:-.06em;line-height:.9}
.story[data-stage="0"] .st0,.story[data-stage="1"] .st1,.story[data-stage="2"] .st2{opacity:1;transform:none;filter:none}
.story.static3d,.no3d .story{height:auto}
.story.static3d .story-stick,.no3d .story-stick{position:relative;height:auto;min-height:620px;padding:80px 0}
.story.static3d .story3d{position:absolute}
.no3d .story3d{display:none}
.no3d .story-poster{display:block}
.no3d .story .st,.story.static3d .st{opacity:0}
.no3d .story .st2,.story.static3d .st2{opacity:1;transform:none;filter:none;position:relative}
.no3d .hero3d{display:none}

/* how: three steps */
.how-steps{display:grid;gap:16px;grid-template-columns:1fr}
.hstep{border-radius:var(--r-lg);background:var(--surface);padding:28px;display:grid;gap:8px;align-content:start;box-shadow:inset 0 1px 0 #fff,0 24px 48px -28px rgba(11,13,18,.25)}
.hstep .day{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hstep h3{font-size:1.5rem;letter-spacing:-.03em}
.hstep p{color:var(--ink-2)}
.fine{margin-top:22px;font:500 .78rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (min-width:860px){.how-steps{grid-template-columns:repeat(3,1fr)}}

/* pricing notes */
.price-notes{margin-top:22px;display:grid;gap:8px;font-size:.95rem;color:var(--ink-2)}
.price-notes b{color:var(--ink)}

/* start: tiny FAQ */
.mini-faq{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;color:rgba(255,255,255,.85);font-size:.95rem;max-width:52ch}
.mini-faq b{color:#fff}
.mini-faq a{color:#fff}

/* springy landings for cards (bounce on objects and cards; body type stays calm) */
.reveal-3d{transition:opacity .6s var(--expo),transform .9s var(--spring),filter .6s var(--expo)}
.card .media{transition:transform .6s var(--spring),box-shadow .5s var(--expo)}
.btn{transition:transform .35s var(--spring),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}

.fpsmeter{position:fixed;right:10px;bottom:10px;z-index:200;font:500 12px var(--mono);background:#0B0D12;color:#fff;padding:4px 8px;border-radius:6px}
.story-copy::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,110vw);height:150%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(216,225,237,.92),rgba(216,225,237,.65) 45%,transparent 72%);z-index:-1}
.story-copy{isolation:isolate}

/* v9 hero: the Cycles sculpture floats on a page that matches its background exactly (#D8E1ED) */
.sculpt{background:linear-gradient(180deg,#D8E1ED 0%,#D8E1ED 78%,#FFFFFF 100%);padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,80px);overflow:hidden}
.sculpt::before,.sculpt::after{display:none}
.sculpt-copy{display:grid;gap:18px;justify-items:center;text-align:center;max-width:1000px;margin:0 auto}
.sculpt h1{font-size:clamp(2.4rem,6.6vw,5.2rem)}
.sculpt .tagline{font-size:clamp(1.1rem,2.3vw,1.45rem);color:var(--ink-2)}
.sculpt .hero-cta{justify-content:center}
.sculpt .btn-ghost{background:rgba(255,255,255,.55)}
.sculpt-stage{position:relative;margin:clamp(-10px,-1vw,0px) auto 0;max-width:1500px}
.sculpt-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#D8E1ED;
  -webkit-mask-image:radial-gradient(75% 72% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(75% 72% at 50% 50%,#000 62%,transparent 100%)}
.sculpt .credit-line{justify-content:center;margin-top:8px}
@media (max-width:719px){.sculpt-video{width:150%;margin-left:-25%}.sculpt .credit-line{justify-content:flex-start}}
.ownfilm .filmcard{max-width:1100px;margin:0 auto}
@media (min-width:1000px){
  .sculpt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:auto auto;align-items:center;column-gap:0;
    padding-inline:max(32px,calc((100vw - 1400px)/2));padding-block:24px 56px;min-height:min(820px,calc(100svh - 60px))}
  .sculpt > .wrap{padding:0;margin:0;max-width:none;grid-column:1}
  .sculpt > .wrap:first-child{grid-row:1;align-self:end}
  .sculpt > .wrap:last-child{grid-row:2;align-self:start;margin-top:22px}
  .sculpt-copy{justify-items:start;text-align:left;margin:0;position:relative;z-index:2}
  .sculpt h1{font-size:clamp(2.8rem,4.6vw,4.6rem)}
  .sculpt .hero-cta{justify-content:flex-start}
  .sculpt .credit-line{justify-content:flex-start}
  .sculpt-stage{grid-column:2;grid-row:1/3;margin:0 -4vw 0 -6vw;max-width:none}
}
@media (max-width:719px){.sculpt-video{width:128%;margin-left:-14%}}
@media (min-width:1000px){
  .sculpt{padding-inline:max(32px,calc((100vw - 1160px)/2));min-height:0;padding-block:40px 64px}
  .sculpt > .wrap{position:relative;z-index:2}
  .sculpt-stage{margin:0 calc(-1 * max(32px,(100vw - 1160px)/2)) 0 -4vw;z-index:1}
  .sculpt .credit-line{max-width:520px}
}
@media (min-width:1000px){.sculpt{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.sculpt h1{font-size:clamp(2.6rem,4.1vw,4.1rem)}.sculpt-copy{max-width:640px}}
@media (max-width:999px){.sculpt-video{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 78%,transparent 100%)}.sculpt{background:linear-gradient(180deg,#D8E1ED 0%,#D8E1ED 88%,#FFFFFF 100%)}}