/* ==========================================================================
   Homepage — The Lift
   ========================================================================== */

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:76px}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45% 55% at 74% 56%,rgba(232,93,42,.16),transparent 70%)}
.hero-in{flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(24px,4vh,56px) var(--gutter) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.hero-copy{grid-column:1/span 7;position:relative;z-index:2}
.hero-meta{font-size:var(--t-s);color:var(--sub);margin:0 0 clamp(16px,3vh,32px)}
.hero-title{font-size:min(10vw,17vh);font-stretch:66%;line-height:.84}
.hero-lede{font-size:var(--t-l);line-height:1.4;max-width:38ch;margin:clamp(20px,3.4vh,36px) 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 12px}
.hero-o{grid-column:8/span 5;justify-self:center;width:min(100%,58vh);aspect-ratio:1;margin-bottom:calc(min(100%,58vh) * .36);position:relative}
.hero-o .o-still{position:absolute;left:-12%;top:-4%;width:124%}
.hero-foot{list-style:none;margin:0 auto;padding:22px var(--gutter) 26px;width:100%;max-width:var(--max);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:var(--t-s);color:var(--sub);border-top:1px solid var(--rule)}
.hero-foot li+li::before{content:'';display:inline-block;width:7px;height:7px;margin-right:12px;background:var(--orange);vertical-align:middle;transform:translateY(-1px)}
@media (max-width:900px){
  .hero-in{align-content:start}
  .hero-copy{grid-column:1/-1}
  .hero-title{font-size:min(16vw,10.5vh)}
  .hero-lede{font-size:var(--t-m)}
  .hero-o{grid-column:1/-1;width:min(58vw,300px);justify-self:end;margin:8px 0 calc(min(58vw,300px) * .4)}
}

/* ---------- STORY: The Lift in six chapters ---------- */
.story{position:relative}
.story-pin{position:relative}
.story-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto auto;align-content:start;column-gap:clamp(28px,4vw,72px);padding-top:var(--sec-t);padding-bottom:calc(var(--sec-b) + 48px)}
/* The section is only as tall as its content and pins centred on screen, so it sits the same distance from its
   neighbours as every other section. Short screens pin from the top instead (see home.js). */
.story-head{grid-column:1;grid-row:1;display:flex;align-items:center;gap:clamp(16px,1.6vw,24px)}
.story-dial{position:relative;flex:none;width:clamp(78px,10vh,116px);aspect-ratio:1;display:grid;place-items:center;--p:0}
.dial-n{position:relative;font-weight:800;font-stretch:72%;font-size:clamp(19px,2.5vh,28px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ivory)}
/* Without the 3D O the dial is drawn in CSS: an ivory ring with the story's progress in orange. */
html.o-off .story-dial{border-radius:50%;background:radial-gradient(closest-side,var(--ink) 61%,transparent 62%),conic-gradient(var(--orange) calc(var(--p) * 1turn),var(--ivory) 0)}
.story-kicker{margin:0 0 10px;font-size:var(--t-xs);font-weight:600;color:var(--ash)}
.story-head h2{font-size:var(--t-2xl)}
.story-rail{grid-column:1;grid-row:2;align-self:start;list-style:none;margin:clamp(22px,4.5vh,52px) 0 0;padding:0}
.ch-btn{position:relative;display:flex;align-items:baseline;gap:16px;width:100%;padding:clamp(11px,1.7vh,17px) 0;border:0;border-top:1px solid var(--rule);background:none;color:var(--ash);font:700 var(--t-l)/1.1 var(--font);font-stretch:86%;text-align:left;cursor:pointer;transition:color .35s}
.ch-btn:hover,.ch.on .ch-btn{color:var(--ivory)}
.ch-n{min-width:22px;font-size:var(--t-xs);font-weight:650;font-stretch:100%;font-variant-numeric:tabular-nums;transition:color .35s}
.ch.on .ch-n{color:var(--orange)}
.ch.done .ch-n{color:var(--ivory)}
.ch-bar{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.ch.on .ch-bar{opacity:1}
.ch-bar b{position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--t,0));transform-origin:left}
.ch-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease-out)}
.ch-body>div{overflow:hidden;min-height:0}
.ch.on .ch-body{grid-template-rows:1fr}
.ch-k{display:none}
.ch-body p{margin:0;padding:0 0 clamp(14px,2.2vh,22px) 38px;font-weight:800;font-stretch:72%;font-size:clamp(25px,2.4vw,38px);line-height:.98;text-wrap:balance;color:var(--ivory);opacity:0;transform:translateY(12px);transition:opacity .5s .1s,transform .7s .1s var(--ease-out)}
.ch.on .ch-body p{opacity:1;transform:none}
.ch-body .btn{margin:0 0 20px 38px}
.story-stage{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;width:min(100%,calc((100svh - 230px) * 1.7778));min-width:0}
.story-screen{position:relative;aspect-ratio:16/9;background:#0B0A09;overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.8)}
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .7s var(--ease-out),transform 1.6s var(--ease-out)}
.clip.on{opacity:1;transform:none}
.story-sound{position:absolute;right:clamp(10px,1.4vw,18px);bottom:clamp(10px,1.4vw,18px);z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--orange);color:var(--ink);font:650 var(--t-xs)/1 var(--font);cursor:pointer;transition:background-color .3s,color .3s,transform .3s var(--ease-out)}
.story-sound:hover{transform:translateY(-2px)}
.story-sound[aria-pressed=true]{background:rgba(14,14,14,.66);color:var(--ivory);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.story-sound[aria-pressed=true] .sound-bars i{animation:sound-eq .9s ease-in-out infinite alternate}
.story-sound[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:.2s}
.story-sound[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:.4s}
.story-credit{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font-size:var(--t-xs);color:var(--ash)}
.story-credit .link-btn{font-size:var(--t-xs);color:var(--ivory)}
/* Without the scroll engine (reduced motion): no pin, the same layout at its natural height. */
@media (max-width:900px){
  .story-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start}
  .story-head{gap:14px}
  .story-dial{width:clamp(58px,8.5vh,72px)}
  .dial-n{font-size:18px}
  .story-kicker{margin-bottom:6px}
  .story-head h2{font-size:clamp(30px,8vw,44px)}
  .story-stage{grid-column:1;grid-row:2;justify-self:stretch;width:100%;margin-top:clamp(14px,2.4vh,24px)}
  .story-credit{margin-top:10px}
  .story-credit>span{display:none}
  .story-rail{grid-row:3;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:6px;margin-top:clamp(12px,2.4vh,22px)}
  .ch{display:contents}
  .ch-btn{grid-row:1;justify-content:flex-start;padding:12px 0 10px;min-height:44px}
  .ch-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ch-n{font-size:var(--t-s)}
  .ch.done .ch-bar{opacity:1}
  .ch.done .ch-bar b{transform:none}
  .ch-body{grid-row:2;grid-column:1/-1;display:none}
  .ch.on .ch-body{display:block;animation:ch-in .55s var(--ease-out)}
  .ch-k{display:block;margin-top:14px;font-size:var(--t-xs);font-weight:650;color:var(--orange)}
  .ch-body p{padding:8px 0 0;font-size:clamp(25px,7.2vw,36px)}
  .ch-body .btn{margin:18px 0 0}
  .story-sound{min-height:38px;padding:0 14px;font-size:12px}
}
@keyframes ch-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.clip,.ch-body,.ch-body p{transition:none}.clip{transform:none}}

/* Full-film player (also used by the product films) */
.film-modal{width:min(1100px,calc(100% - 24px));max-width:none;padding:0;border:0;background:#000;color:var(--ivory);overflow:visible}
.film-modal::backdrop{background:rgba(14,14,14,.9)}
.film-modal video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.film-modal-title{position:absolute;left:0;top:-40px;margin:0;font-size:var(--t-s);font-weight:600}
.film-modal .modal-close{top:-50px;right:-6px;color:var(--ivory)}
.film-modal[open]{animation:modal-in .55s var(--ease-out)}

/* ---------- SERVICES: one screen ---------- */
.services{padding:var(--sec-t) 0 var(--sec-b)}
.services .wrap{position:relative}
.services-head{margin-bottom:clamp(32px,4.4vw,60px)}
.services-head h2{font-size:var(--t-2xl);max-width:13ch}
.services-head p{max-width:44ch;margin:16px 0 0;color:var(--sub);font-size:var(--t-l);line-height:1.4}
.svc{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(24px,4vw,64px);align-items:center}
.services .worlds{border-top:1.5px solid var(--fg)}
.services .world{display:grid;grid-template-columns:44px minmax(0,5fr) minmax(0,6fr);column-gap:clamp(16px,2vw,32px);align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--rule)}
.services .world-n{font-size:var(--t-xs);font-weight:650;font-variant-numeric:tabular-nums;color:var(--sub);transition:color .4s}
.services .world h3{grid-column:auto;font-size:clamp(28px,3.1vw,48px);line-height:.92;transition:opacity .5s var(--ease-out)}
.services .world-body{grid-column:auto;padding:0}
.services .world-body p{margin:0 0 6px;font-size:var(--t-m);line-height:1.45}
.services .world-links{display:flex;flex-wrap:wrap;gap:2px 22px}
.services .world.active .world-n{color:var(--orange)}
.services .worlds-bar{display:none}
/* One O beside the rows; each row also has its own small slot, used on phones only. */
.services .world-o{display:none}
.svc-stage{display:grid;place-items:center;align-self:stretch}
.svc-o{width:min(100%,300px);aspect-ratio:1}
.services .worlds.has-active .world:not(.active) h3{opacity:1}
@media (min-width:901px) and (pointer:fine){
  .services .worlds.has-active .world:not(.active) h3{opacity:.38}
}
html.o-off .svc{grid-template-columns:minmax(0,1fr)}
html.o-off .svc-stage{display:none}
@media (max-width:900px){
  .services-head h2{font-size:clamp(36px,10vw,56px)}
  .services-head p{font-size:var(--t-m)}
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc-stage{display:none}
  .services .world{grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"n o" "h o" "b b";column-gap:16px;padding:22px 0}
  .services .world-n{grid-area:n}
  .services .world h3{grid-area:h;font-size:clamp(30px,8.6vw,44px);margin-top:6px}
  .services .world-body{grid-area:b;margin-top:14px}
  .services .world-o{display:block;grid-area:o;align-self:center;width:84px;aspect-ratio:1}
}

/* ---------- PRICING / PODIUM ---------- */
.pricing{padding:var(--sec-t) 0 var(--sec-b)}
.pricing-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:clamp(48px,7vw,96px)}
.pricing-head h2{grid-column:1/span 7;font-size:var(--t-3xl);max-width:8ch}
.pricing-head p{grid-column:9/span 4;margin:0;color:var(--sub)}
.quote-row{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1.5px solid var(--fg)}
.quote-row h3{font-weight:800;font-stretch:72%;font-size:var(--t-xl);line-height:1;max-width:22ch;margin-bottom:10px}
.quote-row p{margin:0;color:var(--sub);max-width:56ch}
@media (max-width:900px){
  .pricing-head h2,.pricing-head p{grid-column:1/-1}
  .pricing-head p{margin-top:20px}
  .podium{grid-template-columns:1fr;gap:56px}
  .plinth{height:calc(var(--rise) * 14px)}
}

/* ---------- CONTACT ---------- */
.contact{padding:var(--sec-t) 0 var(--sec-b)}
.contact-head h2{font-size:var(--t-4xl);max-width:11ch;line-height:.84}
.contact-head .barred::after{bottom:-.02em}
.contact-intents{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(32px,5vw,56px);align-items:end}
.contact-intents p{grid-column:1/span 5;margin:0;font-size:var(--t-l);line-height:1.35}
.contact-links{grid-column:7/span 6;display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}
.desk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:clamp(56px,7vw,96px);background:var(--ink);color:var(--ivory)}
.desk-aside{padding:clamp(28px,4vw,56px);border-right:1px solid rgba(243,238,229,.12);display:flex;flex-direction:column}
.desk-status{display:flex;align-items:center;gap:10px;font-size:var(--t-xs);font-weight:650;color:var(--ash)}
.desk-status i{width:9px;height:9px;border-radius:50%;background:var(--orange);animation:blink 1.6s steps(1) infinite}
.desk-aside h3{font-weight:800;font-stretch:72%;font-size:var(--t-2xl);line-height:.9;margin:auto 0 18px;padding-top:56px;max-width:9ch}
.desk-aside>p{color:var(--ash);max-width:36ch}
.desk-steps{list-style:none;counter-reset:s;padding:0;margin:24px 0 0;border-top:1px solid rgba(243,238,229,.12)}
.desk-steps li{counter-increment:s;display:flex;gap:16px;padding:12px 0;border-bottom:1px solid rgba(243,238,229,.12);font-size:var(--t-s)}
.desk-steps li::before{content:counter(s);color:var(--orange);font-variant-numeric:tabular-nums;font-weight:650}
.desk-main{padding:clamp(28px,4vw,56px);background:var(--stage)}
.desk-main h3{font-weight:800;font-stretch:72%;font-size:var(--t-xl);line-height:1;margin-bottom:12px}
.lead-note{color:var(--ash);font-size:var(--t-s);margin-bottom:28px}
.lead-note a{color:var(--ivory);text-decoration-color:var(--orange);text-underline-offset:4px;text-decoration-thickness:1.5px}
.desk label{color:var(--ivory)}
.lead-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:24px}
.lead-actions .btn{min-height:56px;padding:0 30px}
.lead-disclosure{margin:22px 0 0;font-size:var(--t-xs);color:var(--ash)}
.lead-feedback{margin:12px 0 0;min-height:1.4em;font-size:var(--t-s);color:#F6B08F}
.lead-feedback.error{color:#FF9C78}
.lead-feedback.success{color:#9FD7A6}
#humanVerification:empty{display:none}
@media (max-width:900px){
  .contact-intents p,.contact-links{grid-column:1/-1}
  .contact-links{justify-content:flex-start;margin-top:24px}
  .desk{grid-template-columns:1fr}
  .desk-aside{border-right:0;border-bottom:1px solid rgba(243,238,229,.12)}
  .desk-aside h3{padding-top:32px}
}
@media (max-width:520px){.lead-actions .btn{width:100%}.contact-links .btn{width:100%}}

/* ---------- WORK: product films ---------- */
.work{padding:var(--sec-t) 0 var(--sec-b);overflow-x:clip}
.reels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(56px,8vw,110px)}
.reel-a{grid-column:1/span 8}
.reel-b{grid-column:5/span 8}
.reel-screen{display:block;position:relative;width:100%;padding:0;border:0;background:#000;aspect-ratio:16/9;overflow:hidden;cursor:pointer;box-shadow:0 40px 90px rgba(14,14,14,.22);transform-style:preserve-3d}
.reel-screen video{width:100%;height:100%;object-fit:cover;display:block}
.reel-time{position:absolute;right:14px;bottom:14px;font-size:var(--t-xs);font-weight:650;color:var(--ivory);background:rgba(14,14,14,.7);padding:4px 8px;font-variant-numeric:tabular-nums}
.reel-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px 32px;margin-top:22px;align-items:baseline}
.reel-meta h3{font-weight:800;font-stretch:72%;font-size:var(--t-xl);line-height:1}
.reel-meta p{margin:0;color:var(--sub);font-size:var(--t-s)}
.reel-tags{grid-column:2;font-size:var(--t-xs)!important}
@media (max-width:900px){.reel-a,.reel-b{grid-column:1/-1}.reel-meta{grid-template-columns:1fr}.reel-tags{grid-column:1}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.hero-cue::after{animation:none!important}}

/* ---------- Pricing: one floor, one lift ----------
   Three equal cards share one floor line. Only Growth is lifted, 24px, above a thin orange bar that stays on
   the floor: the logo's lifted O, at the scale of a card. The O hangs above it as a stage light. */
.pricing .plan-flag{background:var(--orange);color:var(--ink)}
.pricing .podium{--lift:24px;position:relative;align-items:stretch;gap:clamp(14px,1.6vw,24px);padding-top:clamp(110px,9.5vw,138px);border-bottom:1px solid rgba(243,238,229,.24)}
.pricing .plan{position:relative;padding:clamp(22px,2.1vw,30px);box-shadow:inset 0 0 0 1px rgba(243,238,229,.14)}
.pricing .plan h3{font-size:clamp(32px,2.8vw,44px)}
.pricing .plan-copy{display:flex;flex-direction:column;flex:1;padding:0}
.pricing .plan-copy>.btn,.pricing .plan-actions{margin-top:auto}
.pricing .plan-feature{z-index:1;transform:translateY(calc(var(--lift) * -1));background:rgba(24,24,22,.9);box-shadow:inset 0 0 0 1px rgba(243,238,229,.26),0 30px 60px -30px rgba(0,0,0,.8)}
/* The bar stays on the floor while the card lifts: 12px gap, 12px bar, like the lockup. */
.pricing .plan-bar{position:absolute;left:0;right:0;top:calc(100% + var(--lift) - 12px);height:12px;background:var(--orange);transform-origin:left}
.pricing .plan-lip{position:absolute;left:0;right:0;top:22px;height:0}
.pricing .plan-o{position:absolute;left:50%;bottom:calc(100% + 18px);width:clamp(80px,6.6vw,98px);margin:0;transform:translateX(-50%)}

/* ---------- Pricing packages (Starter / Growth / Authority) ---------- */
.pricing .plan-tag{margin:10px 0 0;font-size:var(--t-m);font-weight:650;line-height:1.3;color:var(--fg)}
.pricing .plan-price{margin:10px 0 12px}
.pricing .plan-desc{margin:0;font-size:var(--t-s);line-height:1.5;color:var(--sub);max-width:42ch}
.pricing .plan ul{margin:16px 0 20px}
.pricing .plan li{padding:7px 0;line-height:1.3}
.pricing .plan-note{margin:-8px 0 22px;font-size:var(--t-xs);color:var(--sub)}
.pricing .plan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.pricing .plan-actions .link-btn{color:var(--fg)}
/* Growth reads first through hierarchy: the lift, the bar, the stage light, a lit panel and the only solid button. */
/* Founding-client offer: static launch copy, quiet and factual (no timers, no counters). */
.founding{margin:2px 0 16px;padding:14px 16px;border:1px solid rgba(232,93,42,.6);background:rgba(232,93,42,.07)}
.founding p{margin:0}
.founding-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.founding-price{margin-top:6px!important;font-size:var(--t-m);color:var(--fg)}
.founding-price b{font-weight:800;font-stretch:80%;font-size:var(--t-xl);margin-right:2px}
.founding-meta{margin-top:6px!important;font-size:var(--t-s);font-weight:600;color:var(--fg)}
.founding-terms{margin-top:8px!important;font-size:var(--t-xs);line-height:1.5;color:var(--sub)}
/* Comparison: collapsed by default, full table in the HTML (crawlable). */
.compare{margin-top:clamp(48px,6vw,80px);border-top:1.5px solid rgba(243,238,229,.5)}
.compare .faq-a{overflow:hidden}
.compare-scroll{overflow-x:auto;padding-bottom:26px}
.compare-scroll:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.compare table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--t-s);font-variant-numeric:tabular-nums}
.compare thead th:first-child{width:28%}
.compare th,.compare td{padding:12px 14px;overflow-wrap:anywhere;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.compare thead th{font-weight:700;color:var(--fg);border-bottom:1.5px solid rgba(243,238,229,.4)}
.compare tbody th{font-weight:500;color:var(--sub)}
.compare td{color:var(--fg)}
.compare .is-growth{background:rgba(243,238,229,.05)}
.compare thead .is-growth{color:var(--orange)}
.compare td small{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--sub)}
.scope{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:24px;margin-top:clamp(32px,4vw,52px)}
.scope h3{font-size:var(--t-m);font-weight:700;margin:0}
.scope ul{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.scope li{break-inside:avoid;padding:0 0 10px;font-size:var(--t-s);line-height:1.45;color:var(--sub)}
@media (max-width:900px){
  .pricing .plan-feature{order:-1}          /* the recommended plan comes first on phones */
  .pricing .podium{gap:52px;padding-top:120px;border-bottom:0}
  .scope{grid-template-columns:1fr}
  .scope h3{margin-bottom:12px}
  .scope ul{columns:1}
  .compare table{font-size:13px}
  .compare th,.compare td{padding:10px 6px}
  .compare thead th:first-child{width:31%}
}