/* Project 66 Studio — integrated preview 01.
   Layout concept: Gate B hybrid. Light editorial page on a 12-column grid, Newsreader display,
   Hanken Grotesk text and labels (no monospace, Owner rule 2026-10-15); the red square and red diagnostic frames carry structure;
   one dark cinematic band per page at most. Single deliberate light theme (brand system v1.0). */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
:root{
  --red:#FF2E2E;        /* Signal Red: display marks and graphics on white only */
  --act:#D40F14;        /* Deep Red: button fill, white label 5.42:1 */
  --ink:#0A0A0B; --white:#FFFFFF; --mist:#F6F6F7; --muted:#6C6C72;
  --ink-64:rgba(10,10,11,.66); --hair:rgba(10,10,11,.14); --w72:rgba(255,255,255,.76); --w14:rgba(255,255,255,.16);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gL:max(20px, env(safe-area-inset-left,0px)); --gR:max(20px, env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--act);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.wrap{max-width:1400px;margin:0 auto;padding-left:var(--gL);padding-right:var(--gR)}
.kick{font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.tag{font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.stop{color:var(--red)}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
em{font-style:italic}
.muted{color:var(--ink-64)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;font:600 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;border:0;transition:background .2s var(--ease),color .2s}
.btn.red{background:var(--act);color:#fff}.btn.red:hover{background:var(--ink)}
.btn.ink{background:var(--ink);color:#fff}.btn.ink:hover{background:var(--act)}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}.btn.line:hover{box-shadow:inset 0 0 0 2px currentColor}
.link{font:italic 400 20px/1.1 var(--serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;padding:12px 2px;display:inline-block}
.link:hover{text-decoration-color:var(--red)}
.arrow::after{content:" →"}
.ext::after{content:" ↗";font-style:normal;font-size:.8em}

/* ---------- header ---------- */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.hd .wrap{display:flex;align-items:center;gap:28px;height:76px;position:relative}
.logo img{height:38px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav>a,.nav .dd>button{font:500 15px/1 var(--sans);text-decoration:none;padding:12px 0;background:none;border:0;color:inherit;cursor:pointer}
.nav .w{font:italic 400 21px/1 var(--serif)}
.nav>a:not(.btn):hover,.nav .dd>button:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--red)}
.nav>a[aria-current=page]:not(.btn),.nav .dd.cur>button{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.nav .btn{min-height:44px;padding:0 18px}
/* nav variants: muted is default (Owner preference), ink is the comparison */
.nav .w{color:var(--act)}
.dd{position:relative}
.dd>button::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:10px}
.dd .panel{position:absolute;top:calc(100% + 14px);left:-24px;min-width:300px;background:#fff;border:1px solid var(--hair);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);padding:10px 0;display:none;z-index:5}
.dd.open .panel{display:block}
.dd .panel a{display:flex;flex-direction:column;gap:2px;padding:12px 24px;text-decoration:none}
.dd .panel a b{font:400 22px/1.15 var(--serif)}
.dd .panel a small{font:500 13px/1.3 var(--sans);color:var(--ink-64)}
.dd .panel a:hover b{color:var(--act)}
.menu{display:none;min-height:44px;padding:0 4px;border:0;background:none;font:italic 400 19px var(--serif);text-decoration:underline;text-underline-offset:6px;cursor:pointer;margin-left:auto}
@media (max-width:1180px){.nav .why-l{display:none}}
@media (max-width:980px){
  .nav{display:none}.menu{display:inline-block}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--hair);flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gR) 22px var(--gL);max-height:calc(100vh - 76px);overflow:auto}
  .nav.open>a:not(.btn),.nav.open .dd>button{display:block;padding:12px 0;font:400 24px var(--serif);text-align:left;width:100%}
  .nav.open .why-l{display:block}
  .nav.open .w{font-size:24px}
  .nav.open .dd .panel{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .nav.open .dd>button::after{display:none}
  .nav.open .dd .panel a{padding:8px 0}.nav.open .dd .panel a b{font-size:19px}.nav.open .dd .panel small{display:none}
  .nav.open .btn{margin-top:14px}
}
@media (max-width:560px){.hd .wrap{height:66px}.logo img{height:30px}}

/* ---------- generic sections ---------- */
.sec{padding-block:clamp(64px,8vw,120px)}
.sec.tight{padding-block:clamp(40px,5vw,72px)}
.sec.mist{background:var(--mist)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark .muted,.sec.dark p{color:var(--w72)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:clamp(32px,4.5vw,64px)}
.sec-head .kick{grid-column:1 / span 3;padding-top:14px}
.sec-head h2{grid-column:4 / span 9;margin:0;font:300 clamp(36px,4.4vw,68px)/1.04 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.sec-head h2 em{font-style:italic}
.sec-head .sub{grid-column:4 / span 7;margin:0;font:400 clamp(18px,1.4vw,21px)/1.55 var(--serif);color:var(--ink-64)}
.sec.dark .sec-head .sub{color:var(--w72)}
.sec.dark .sec-head .kick{color:var(--red)}
.h2{margin:0;font:300 clamp(34px,3.8vw,60px)/1.05 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.h3{margin:0;font:400 clamp(24px,2vw,32px)/1.12 var(--serif);letter-spacing:-.01em}
.lede{margin:0;font:400 clamp(19px,1.5vw,22px)/1.5 var(--serif);max-width:36ch}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.cols{display:grid;gap:24px}
.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.sec-head .kick,.sec-head h2,.sec-head .sub{grid-column:1 / -1}.cols.c3,.cols.c4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cols.c2,.cols.c3,.cols.c4{grid-template-columns:1fr}}
.item{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--ink)}
.sec.dark .item{border-top-color:var(--w14)}
.item p{margin:0;color:var(--ink-64)}
.sec.dark .item p{color:var(--w72)}
.item .tag{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--hair);background:#fff;color:var(--ink)}
.pill.real::before{content:"";width:8px;height:8px;border-radius:50%;background:#1F8A4C}
.pill.ill::before{content:"";width:8px;height:8px;border-radius:50%;background:#B8B8BE}
.pill.client::before{content:"";width:8px;height:8px;background:#2A5BD7}
.pill.gap::before{content:"!";font-weight:700;color:var(--act)}
.prov{font:600 11.5px/1.4 var(--sans);color:var(--muted);letter-spacing:.03em;margin-top:10px}
.sec.dark .prov{color:rgba(255,255,255,.55)}
figure{margin:0}
.ph{position:relative;overflow:hidden;background:var(--mist)}
.ph img,.ph video{width:100%;height:100%;object-fit:cover}
.frame-screen{background:#fff;border:1px solid var(--hair);box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--hair);background:#fafafa}
.chrome i{width:9px;height:9px;border-radius:50%;background:#dcdcdf}
.chrome span{margin-left:10px;font:600 11.5px/1 var(--sans);color:var(--muted);background:#fff;border:1px solid var(--hair);padding:5px 10px;flex:1;max-width:340px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.bigq{margin:0;font:300 clamp(44px,6.2vw,100px)/1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;max-width:17ch}
.bigq em{font-style:italic;font-weight:400}
.note-gap{border-left:3px solid var(--act);background:#fff;padding:14px 18px;font:400 15px/1.5 var(--sans)}
.sec.dark .note-gap{background:rgba(255,255,255,.06)}

/* ---------- page hero (inner pages) ---------- */
.phero{padding-block:clamp(40px,6vw,96px) clamp(48px,6vw,96px)}
.phero .grid12{align-items:center}
.phero .tx{grid-column:1 / span 6;display:flex;flex-direction:column;gap:24px}
.phero .crumb{color:var(--act)}
.phero h1{margin:0;font:300 clamp(46px,5.6vw,92px)/.98 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em}
.phero h1 em{font-style:italic;font-weight:400}
.phero .vis{grid-column:7 / span 6;position:relative}
@media (max-width:900px){.phero .tx,.phero .vis{grid-column:1 / -1}}

/* ---------- HOME hero (red square composition) ---------- */
.hero{padding-block:clamp(36px,6vw,88px) clamp(56px,7vw,104px)}
.hero .grid12{align-items:center}
.hero .tx{grid-column:1 / span 6;display:flex;flex-direction:column;gap:26px}
.hero h1{margin:0;font:300 clamp(50px,6.6vw,108px)/.97 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em}
.hero h1 em{font-style:italic;font-weight:400}
.hero .acts .btn.red{background:var(--ink)}.hero .acts .btn.red:hover{background:var(--act)}
.worlds{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:18px;border-top:1px solid var(--hair)}
.worlds a{font:500 14px/1 var(--sans);text-decoration:none;padding:8px 0;display:inline-flex;gap:8px;align-items:center}
.worlds a::before{content:"";width:9px;height:9px;background:var(--red)}
.worlds a:hover{text-decoration:underline;text-underline-offset:5px}
.stage{grid-column:7 / span 6;position:relative;aspect-ratio:1/1;min-height:0}
.stage .sq{position:absolute;right:0;top:0;width:78%;aspect-ratio:1;background:var(--red)}
.stage .portrait{position:absolute;left:0;bottom:0;width:62%;aspect-ratio:4/5;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.stage .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.stage .chip{position:absolute;overflow:hidden;width:30%;aspect-ratio:1;box-shadow:0 20px 40px -24px rgba(0,0,0,.5);background:#fff}
.stage .chip img{width:100%;height:100%;object-fit:cover}
.stage .c1{right:6%;bottom:31%}
.stage .c2{right:6%;bottom:0}
.stage .cap{position:absolute;right:6%;top:4%;color:#fff;text-align:right;font:700 19px/1.2 var(--sans);letter-spacing:.08em}
.stage .label{position:absolute;left:0;bottom:-30px;color:var(--ink-64)}
.stage [data-hero=orig]{display:none}
[data-hero=orig] .stage [data-hero=orig]{display:block}
[data-hero=orig] .stage [data-hero=p40]{display:none}
@media (max-width:1180px){.hero .tx{grid-column:1 / span 7}.stage{grid-column:8 / span 5}}
@media (max-width:900px){.hero .tx,.stage{grid-column:1 / -1}.stage{max-width:560px;width:100%;margin-top:12px}}
@media (max-width:560px){.acts .btn{flex:1 1 100%}}

/* ---------- three worlds (home H02) ---------- */
.world{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;padding-block:clamp(28px,4vw,56px);border-top:1px solid var(--hair)}
.world h3{margin:0;font:300 clamp(34px,3.6vw,58px)/1.02 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.world h3 em{font-style:italic;font-weight:400}
.world .who{color:var(--act);margin-bottom:14px;display:block}
.world .copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.world p{margin:0;color:var(--ink-64);max-width:42ch}
.builds{display:flex;flex-wrap:wrap;gap:8px}
.builds span{font:500 13px/1 var(--sans);border:1px solid var(--hair);padding:9px 12px}
.w-fash .media{grid-column:1 / span 7;display:grid;grid-template-columns:3fr 2fr;gap:12px;align-items:end}
.w-fash .m1{aspect-ratio:4/5}.w-fash .m2{aspect-ratio:4/5}
.w-fash .copy{grid-column:9 / span 4}
.w-soft .copy{grid-column:1 / span 4;grid-row:1}
.w-soft .media{grid-column:6 / span 7;grid-row:1;position:relative}
.w-soft .m1{aspect-ratio:7/5}
.w-soft .real-ui{position:absolute;left:-8%;bottom:-10%;width:min(420px,62%)}
.w-pers .media{grid-column:1 / span 7;position:relative}
.w-pers .m1{aspect-ratio:5/4}
.w-pers .bookchip{position:absolute;right:-6%;bottom:-8%;width:30%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.w-pers .copy{grid-column:9 / span 4}
.offers{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink)}
.offers a{text-decoration:none;padding:14px 12px 10px 0;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:4px}
.offers b{font:400 21px/1.1 var(--serif)}
.offers small{font:500 12px/1.3 var(--sans);color:var(--ink-64)}
.offers a:hover b{color:var(--act)}
@media (max-width:900px){
 .w-fash .media,.w-fash .copy,.w-soft .media,.w-soft .copy,.w-pers .media,.w-pers .copy{grid-column:1 / -1;grid-row:auto}
 .w-soft .media{margin-bottom:56px}.w-soft .real-ui{left:12px;bottom:-48px}
 .w-pers .media{margin-bottom:40px}.w-pers .bookchip{right:8px}
}

/* ---------- I05 diagnostic frames ---------- */
.diag{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.diag .scene{grid-column:1 / span 7;position:relative;aspect-ratio:4/3;overflow:hidden;background:#ddd}
.diag .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease)}
.diag .scene .fr{position:absolute;border:3px solid var(--red);clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path .9s var(--ease);pointer-events:none}
.diag .scene .flag{position:absolute;background:var(--red);color:#fff;padding:6px 9px;font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;transform:translateY(6px);opacity:0;transition:opacity .3s .7s,transform .3s .7s;white-space:nowrap}
.diag[data-step="1"] .fr,.diag[data-step="2"] .fr,.diag[data-step="3"] .fr{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.diag[data-step="1"] .flag,.diag[data-step="2"] .flag,.diag[data-step="3"] .flag{opacity:1;transform:none}
.diag .side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px;min-width:0}
.diag .tabs{display:flex;flex-wrap:wrap;gap:8px}
.diag .tabs button{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border:1px solid var(--hair);background:#fff;cursor:pointer;color:var(--ink)}
.diag .tabs button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.diag .stepline{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink)}
.diag .stepline li{list-style:none;padding:14px 0;border-bottom:1px solid var(--hair);color:var(--muted);transition:color .4s}
.diag .stepline li span{filter:blur(2px);transition:filter .4s}
.diag .stepline li.on{color:var(--ink)}
.diag .stepline li.on span{filter:none}
.diag .stepline b{display:block;font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.diag .stepline span{font:400 20px/1.35 var(--serif)}
.diag .ctrl{display:flex;gap:12px;align-items:center}
.diag .ctrl button{min-height:44px}
@media (max-width:900px){.diag .scene,.diag .side{grid-column:1 / -1}}

/* ---------- capability track (H06) ---------- */
.track{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin:0;padding:0;list-style:none}
.track::before{content:"";position:absolute;left:0;right:0;top:17px;height:2px;background:var(--w14)}
.track::after{content:"";position:absolute;left:0;top:17px;height:2px;background:var(--red);width:100%;transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
.track.pre::after{transform:scaleX(.06)}
.step{position:relative;padding:0 16px 0 0;display:flex;flex-direction:column;gap:10px}
.step .dot{width:36px;height:36px;border-radius:50%;background:var(--ink);border:2px solid var(--red);display:grid;place-items:center;font:600 12px var(--sans);color:#fff;position:relative;z-index:1}
.step h4{margin:8px 0 0;font:400 22px/1.15 var(--serif)}
.step p{margin:0;color:var(--w72);font-size:15px;line-height:1.5}
@media (max-width:1180px){.track{grid-template-columns:repeat(4,1fr);row-gap:40px}.track::before,.track::after{display:none}}
@media (max-width:560px){.track{grid-template-columns:1fr;row-gap:24px}.step{display:grid;grid-template-columns:36px 1fr;column-gap:16px}.step h4{margin:4px 0 0}.step p{grid-column:2}}

/* ---------- I01 BOOK ---------- */
.bookstage{position:relative;background:radial-gradient(120% 90% at 50% 20%,#fbfbfb 0%,#ececee 55%,#dcdcdf 100%);padding:clamp(28px,4vw,56px) var(--gR) clamp(28px,4vw,48px) var(--gL);overflow:hidden}
.bookstage .bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto 18px}
.bookpick{display:flex;gap:8px;flex-wrap:wrap}
.bookpick button{font:500 13px/1 var(--sans);padding:11px 14px;border:1px solid var(--hair);background:#fff;cursor:pointer;color:var(--ink)}
.bookpick button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.soundbtn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);padding:12px 16px;background:var(--ink);color:#fff;border:0;cursor:pointer;min-height:44px}
.soundbtn[aria-pressed=true]{background:var(--act)}
.soundbtn svg{width:18px;height:18px}
.book-scene{--bw:min(340px,38vw);--bh:calc(var(--bw)*1.5);--thick:28px;perspective:2200px;perspective-origin:50% 40%;height:calc(var(--bh) + 80px);display:grid;place-items:center;position:relative;touch-action:pan-y}
.book{position:relative;width:var(--bw);height:var(--bh);transform-style:preserve-3d;transform:translateX(0) rotateX(8deg) rotateY(-24deg);transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.book.is-open{transform:translateX(calc(var(--bw)/2)) rotateX(10deg) rotateY(0deg)}
.book.hover:not(.is-open){transform:rotateX(6deg) rotateY(-14deg) translateY(-6px)}
.book .shadow{position:absolute;left:-10%;right:-30%;bottom:calc(var(--thick) * -0.2);height:40px;transform:translateZ(calc(var(--thick) * -1)) rotateX(90deg) translateY(20px);background:radial-gradient(ellipse at center,rgba(0,0,0,.42),transparent 70%);filter:blur(6px);transition:all 1.1s}
.book.is-open .shadow{left:-110%;right:-10%}
.book .face{position:absolute;inset:0;backface-visibility:hidden}
/* page block: right edge, top edge and bottom edge show paper */
.book .block{position:absolute;inset:3px 0 3px 3px;transform:translateZ(calc(var(--thick)/-2));background:#fbf9f3;transform-style:preserve-3d}
.book .edge-r{position:absolute;top:3px;bottom:3px;right:0;width:var(--thick);transform-origin:right center;transform:translateZ(calc(var(--thick)/-1)) rotateY(90deg) translateZ(0);background:repeating-linear-gradient(90deg,#f4f1e8 0 1px,#e2ddd0 1px 2px);box-shadow:inset 0 0 12px rgba(0,0,0,.18)}
.book .edge-t{position:absolute;left:3px;right:0;top:0;height:var(--thick);transform-origin:center top;transform:rotateX(-90deg);background:repeating-linear-gradient(0deg,#f4f1e8 0 1px,#e2ddd0 1px 2px)}
.book .edge-b{position:absolute;left:3px;right:0;bottom:0;height:var(--thick);transform-origin:center bottom;transform:translateZ(calc(var(--thick)*-1)) rotateX(90deg);background:repeating-linear-gradient(0deg,#f4f1e8 0 1px,#e2ddd0 1px 2px)}
.book .spine{position:absolute;top:0;bottom:0;left:0;width:var(--thick);transform-origin:left center;transform:rotateY(-90deg);background-size:cover;background-position:center}
.book .back{position:absolute;inset:0;transform:translateZ(calc(var(--thick)*-1)) rotateY(180deg);backface-visibility:hidden}
/* leaves: each turns around the spine edge */
.book .leaf{position:absolute;inset:3px 3px 3px 0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.book .leaf .pg{position:absolute;inset:0;backface-visibility:hidden;background:#fbf9f3;overflow:hidden;padding:9% 10%;color:#1c1b19;font:400 calc(var(--bw)*.042)/1.5 var(--serif)}
.book .leaf .pg.b{transform:rotateY(180deg)}
.book .leaf .pg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.05));opacity:1}
.book .leaf .pg.b::after{background:linear-gradient(270deg,rgba(0,0,0,.16),rgba(0,0,0,0) 14%)}
.book .leaf .curl{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 60%,rgba(0,0,0,.16) 75%,rgba(0,0,0,0) 90%);opacity:0;backface-visibility:hidden}
.book .leaf.turning .curl{animation:curl 1s ease}
@keyframes curl{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
.book .leaf.cover .pg.f{padding:0;background-size:cover;background-position:center}
.book .leaf.cover .pg.f::after{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.18) 2.2%,rgba(0,0,0,.08) 4%,rgba(0,0,0,0) 9%),linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%)}
.book .leaf.cover .pg.b{background:#efe9dc}
.book .leaf.turned{transform:rotateY(-178deg)}
.pg h5{margin:0 0 .8em;font:600 .6em/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7a7468}
.pg h6{margin:0 0 .5em;font:300 1.9em/1.04 var(--serif);letter-spacing:-.01em}
.pg p{margin:0 0 .8em}
.pg .q{font-style:italic}
.pg .by{font:500 .62em/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#7a7468}
.pg .ph-note{position:absolute;left:10%;right:10%;bottom:7%;font:600 .55em/1.4 var(--sans);color:#9a9384;letter-spacing:.04em;text-transform:uppercase;border-top:1px solid #d9d2c3;padding-top:.7em}
.pg .folio{position:absolute;bottom:4%;left:0;right:0;text-align:center;font:400 .6em/1 var(--serif);color:#9a9384}
.pg .buy{display:inline-block;margin-top:.6em;background:var(--act);color:#fff;text-decoration:none;font:600 .62em/1 var(--sans);padding:1em 1.3em;letter-spacing:.04em}
.book-ctrl{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:8px;flex-wrap:wrap}
.book-ctrl button{min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--ink);background:#fff;font:600 14px/1 var(--sans);cursor:pointer;color:var(--ink)}
.book-ctrl button:disabled{opacity:.35;cursor:default}
.book-ctrl .count{font:600 12px/1 var(--sans);color:var(--muted);min-width:110px;text-align:center}
.book-hint{text-align:center;color:var(--muted);font:600 12px/1.4 var(--sans);margin-top:10px}
.bookstage .prov{text-align:center}
@media (max-width:700px){
  .book-scene{--bw:min(46vw,210px);--thick:18px}
  .book.is-open{transform:translateX(calc(var(--bw)/2)) rotateX(8deg)}
}
.reduced .book .leaf,.reduced .book{transition:none!important}

/* ---------- I02 SOFTWARE DEMO ---------- */
.demo{position:relative}
.demo .screen{position:relative;aspect-ratio:1440/723;overflow:hidden;background:#0d1330}
.demo.m .screen{aspect-ratio:390/723}
.demo .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.02);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.demo .shot.on{opacity:1;transform:none}
.demo .cursor{position:absolute;left:50%;top:50%;width:22px;height:22px;z-index:3;transform:translate(-3px,-2px);transition:left 1.1s cubic-bezier(.5,0,.2,1),top 1.1s cubic-bezier(.5,0,.2,1);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.demo .ripple{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid #fff;opacity:0;z-index:2;pointer-events:none}
.demo .ripple.go{animation:rip .6s ease-out}
@keyframes rip{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.demo .hot{position:absolute;z-index:2;border:2px solid var(--red);box-shadow:0 0 0 9999px rgba(10,10,11,.18);opacity:0;transition:opacity .4s;pointer-events:none}
.demo .hot.on{opacity:1}
.demo .cap{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-top:1px solid var(--hair);background:#fff}
.demo .cap .n{font:600 12px/1 var(--sans);color:var(--muted)}
.demo .cap p{margin:0;font:400 19px/1.35 var(--serif)}
.demo .cap .ctl{display:flex;gap:8px}
.demo .cap button{min-height:40px;min-width:40px;border:1px solid var(--ink);background:#fff;cursor:pointer;font:600 13px/1 var(--sans);padding:0 12px;color:var(--ink)}
.demo .dots{display:flex;gap:6px;padding:0 18px 16px;background:#fff}
.demo .dots button{flex:1;height:4px;border:0;background:var(--hair);cursor:pointer;padding:0}
.demo .dots button.on{background:var(--ink)}
@media (max-width:620px){.demo .cap{grid-template-columns:1fr}.demo .cap .ctl{justify-content:flex-start}}

/* ---------- I03 JOURNEY ---------- */
.journey{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.journey .rail{grid-column:1 / span 4;display:flex;flex-direction:column;border-top:1px solid var(--w14)}
.journey .rail button{display:grid;grid-template-columns:34px 1fr;gap:12px;text-align:left;background:none;border:0;border-bottom:1px solid var(--w14);color:var(--w72);padding:14px 0;cursor:pointer;font:400 17px/1.3 var(--serif)}
.journey .rail button small{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:4px}
.journey .rail button .i{font:600 12px/1 var(--sans);color:rgba(255,255,255,.62);padding-top:4px}
.journey .rail button[aria-selected=true]{color:#fff}
.journey .rail button[aria-selected=true] .i{color:var(--red)}
.journey .view{grid-column:5 / span 8;min-width:0}
.journey .device{position:relative;background:#05070d;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);aspect-ratio:16/10;overflow:hidden}
.journey .device img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(24px) scale(.985);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.journey .device img.on{opacity:1;transform:none}
.journey .device img.out{opacity:0;transform:translateX(-24px) scale(.985)}
.journey .meta{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:14px;flex-wrap:wrap}
.journey .progress{height:3px;background:var(--w14);flex:1;min-width:120px;position:relative}
.journey .progress i{position:absolute;left:0;top:0;bottom:0;background:var(--red);transition:width .5s var(--ease)}
.journey .meta button{min-height:44px;padding:0 16px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);cursor:pointer;font:600 14px/1 var(--sans)}
.journey .dest{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.journey .dest a{font:500 13px/1 var(--sans);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);padding:10px 12px}
.journey .dest a:hover{border-color:#fff}
@media (max-width:900px){.journey .rail,.journey .view{grid-column:1 / -1}.journey .rail{flex-direction:row;overflow-x:auto;border-top:0;gap:6px;padding-bottom:6px}.journey .rail button{flex:0 0 auto;grid-template-columns:auto;border:1px solid var(--w14);padding:10px 12px;font-size:14px}.journey .rail button small,.journey .rail .i{display:none}.journey .device{aspect-ratio:4/3}}

/* ---------- I04 FILM ---------- */
.film{position:relative;background:#000;color:#fff;overflow:hidden}
.film video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.film.v video{aspect-ratio:9/16}
.film .over{position:absolute;inset:auto 0 0 0;padding:18px 18px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.film .over button{min-height:44px;padding:0 16px;border:0;cursor:pointer;font:600 14px/1 var(--sans);display:inline-flex;gap:10px;align-items:center}
.film .play-sound{background:var(--act);color:#fff}
.film .ghost{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.film .ghost[aria-pressed=true]{background:#fff;color:var(--ink)}
.film .src{position:absolute;top:14px;left:14px;font:600 11px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:7px 9px;max-width:70%}
.film .cc{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);background:rgba(0,0,0,.72);padding:6px 10px;font:500 15px/1.4 var(--sans);display:none;text-align:center;max-width:90%}
.film .cc.on{display:block}
.film .time{margin-left:auto;font:600 12px/1 var(--sans);color:rgba(255,255,255,.75)}

/* ---------- pricing ---------- */
.ledger{border-top:2px solid var(--ink)}
.ledger .row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;border-bottom:1px solid var(--hair)}
.ledger .row>*{padding:16px 14px 16px 0;min-width:0}
.ledger .head{font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ledger .tier{font:400 26px/1.1 var(--serif)}
.ledger .price{font:300 34px/1 var(--serif);color:var(--muted)}
.ledger .row.hl{background:linear-gradient(90deg,rgba(255,46,46,.06),transparent)}
.ledger .col.hl{background:rgba(255,46,46,.07)}
.ledger .head .col.hl{box-shadow:inset 0 3px 0 var(--red)}
.ledger .yes::before{content:"●";color:var(--ink);margin-right:8px}
.ledger .no{color:var(--muted)}
.ledger .no::before{content:"—";margin-right:8px}
.stamp{display:inline-block;transform:rotate(-2deg);border:2px solid var(--act);color:var(--act);font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px}
.fit{display:flex;flex-wrap:wrap;gap:8px}
.fit label{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--hair);cursor:pointer;font:500 14px/1.2 var(--sans);background:#fff}
.fit input{accent-color:var(--act)}
.fit label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
@media (max-width:760px){.ledger-wrap{overflow-x:auto}.ledger{min-width:640px}}

/* ---------- forms (START, CONTACT) ---------- */
.formcard{background:#fff;border:1px solid var(--hair);padding:clamp(22px,3vw,40px);box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.steps-bar{display:flex;gap:6px;margin-bottom:24px}
.steps-bar i{flex:1;height:4px;background:var(--hair)}.steps-bar i.on{background:var(--ink)}.steps-bar i.cur{background:var(--act)}
.fs{border:0;margin:0;padding:0;display:none;flex-direction:column;gap:18px}
.fs.on{display:flex}
.fs legend{font:300 clamp(30px,3vw,44px)/1.08 var(--serif);letter-spacing:-.01em;padding:0;margin-bottom:6px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.choices label{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hair);padding:16px;cursor:pointer;font:500 16px/1.3 var(--sans);background:#fff}
.choices label small{display:block;font:400 13px/1.4 var(--sans);color:var(--ink-64);margin-top:4px}
.choices input{margin-top:3px;accent-color:var(--act)}
.choices label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 14px/1.3 var(--sans)}
.field .hint{font:400 13px/1.4 var(--sans);color:var(--ink-64)}
.field input,.field textarea,.field select{font:400 17px/1.4 var(--sans);padding:13px 14px;border:1px solid rgba(10,10,11,.35);background:#fff;color:var(--ink);border-radius:0;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--act);outline-offset:0;border-color:var(--ink)}
.field .err{display:none;color:var(--act);font:600 13px/1.4 var(--sans)}
.field.bad .err{display:block}.field.bad input,.field.bad textarea{border-color:var(--act)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.form-nav{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px}
.form-nav .back{background:none;border:0;font:italic 400 19px var(--serif);text-decoration:underline;text-underline-offset:6px;cursor:pointer;color:var(--ink);min-height:44px}
.endpoint-gap{display:flex;gap:12px;align-items:flex-start;background:var(--mist);padding:14px 16px;font:400 14px/1.5 var(--sans)}
.endpoint-gap b{color:var(--act)}

/* ---------- ventures dialogs ---------- */
.vcard{display:flex;flex-direction:column;gap:14px;text-align:left;background:#fff;border:1px solid var(--hair);padding:0;cursor:pointer;font:inherit;color:inherit;transition:box-shadow .3s,transform .3s}
.vcard:hover{box-shadow:0 30px 60px -36px rgba(0,0,0,.45);transform:translateY(-2px)}
.vcard .ph{aspect-ratio:16/10}
.vcard .t{padding:0 20px 22px;display:flex;flex-direction:column;gap:10px}
.vcard h3{margin:0;font:400 30px/1.05 var(--serif)}
.vcard p{margin:0;color:var(--ink-64)}
dialog.vd{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:0;border:0;box-shadow:0 40px 120px rgba(0,0,0,.5);overflow:auto}
dialog.vd::backdrop{background:rgba(10,10,11,.72)}
dialog.vd .in{display:grid;grid-template-columns:1.2fr 1fr;gap:0}
dialog.vd .media{background:var(--mist);min-height:320px}
dialog.vd .media img{width:100%;height:100%;object-fit:cover;object-position:left top}
dialog.vd .tx{padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:16px}
dialog.vd h2{margin:0;font:300 clamp(36px,4vw,56px)/1 var(--serif)}
dialog.vd dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;border-top:1px solid var(--ink);padding-top:14px}
dialog.vd dt{font:600 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
dialog.vd dd{margin:0}
dialog.vd .close{position:sticky;top:0;float:right;margin:10px;min-height:44px;padding:0 14px;border:1px solid var(--ink);background:#fff;cursor:pointer;font:600 14px/1 var(--sans);z-index:2}
@media (max-width:760px){dialog.vd{width:100vw;max-width:100vw;height:100%;max-height:100%;margin:0}dialog.vd .in{grid-template-columns:1fr}dialog.vd .media{min-height:220px}}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:400 23px/1.25 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:300 28px/1 var(--sans);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--ink-64);max-width:70ch}
.faq .a p{margin:0 0 10px}

/* ---------- I06 FOOTER ---------- */
.ft{background:var(--ink);color:#fff;margin-top:0}
.ft .close-cta{padding-block:clamp(64px,8vw,120px) clamp(40px,5vw,64px);border-bottom:1px solid var(--w14)}
.ft .close-cta h2{margin:0;font:300 clamp(44px,6vw,96px)/1 var(--serif);letter-spacing:-.03em;max-width:16ch}
.ft .close-cta h2 em{font-style:italic;font-weight:400}
.ft .close-cta .row{display:flex;flex-wrap:wrap;gap:24px;align-items:end;justify-content:space-between}
.ft .mail{font:italic 400 clamp(22px,2.4vw,34px)/1.2 var(--serif);color:#fff;text-decoration:none;position:relative;padding-bottom:6px;background:linear-gradient(var(--red),var(--red)) left bottom/0 2px no-repeat;transition:background-size .5s var(--ease)}
.ft .mail:hover,.ft .mail:focus-visible{background-size:100% 2px}
.ft .copy-mail{background:none;border:1px solid var(--w14);color:#fff;min-height:40px;padding:0 12px;font:600 12px/1 var(--sans);cursor:pointer;margin-left:10px}
.social{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--w14)}
.social a{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:clamp(96px,10vw,140px);color:#fff;text-decoration:none;outline:none}
.social a+a{border-left:1px solid var(--w14)}
.social a::before{content:"";position:absolute;inset:0;background:var(--act);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.social a:hover::before,.social a:focus-visible::before{transform:scaleX(1)}
.social a:focus-visible{box-shadow:inset 0 0 0 3px #fff}
.social svg{position:relative;width:28px;height:28px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.social a:hover svg,.social a:focus-visible svg{transform:translateY(-4px) scale(1.08)}
.social span{position:relative;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.0;transform:translateY(6px);transition:opacity .3s .05s,transform .3s .05s}
.social a:hover span,.social a:focus-visible span{opacity:1;transform:none}
@media (hover:none){.social span{opacity:.7;transform:none}}
.ft .whose{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:14px;color:rgba(255,255,255,.55);font:600 11.5px/1.4 var(--sans);letter-spacing:.04em;border-bottom:1px solid var(--w14)}
.ft .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;padding-block:40px}
.ft .cols h4{margin:0 0 12px;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ft .cols a{display:block;color:#fff;text-decoration:none;padding:6px 0;font:400 16px/1.3 var(--sans);width:max-content;max-width:100%;background:linear-gradient(var(--red),var(--red)) left bottom/0 1px no-repeat;transition:background-size .35s}
.ft .cols a:hover,.ft .cols a:focus-visible{background-size:100% 1px}
.ft .legal{padding-block:20px 34px;border-top:1px solid var(--w14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:rgba(255,255,255,.55);font:400 13px/1.5 var(--sans)}
.ft .logo-f img{height:34px;width:auto}
@media (max-width:900px){.social{grid-template-columns:repeat(3,1fr)}.social a:nth-child(4){border-left:0}.social a:nth-child(n+4){border-top:1px solid var(--w14)}.ft .cols{grid-template-columns:1fr 1fr}}

/* ---------- preview review dock (preview only, not a CMS) ---------- */
.dock{position:fixed;left:max(12px, env(safe-area-inset-left,0px));bottom:max(12px, env(safe-area-inset-bottom,0px));z-index:60;font:500 12px/1.3 var(--sans)}
.dock>button{background:var(--ink);color:#fff;border:0;min-height:40px;padding:0 14px;cursor:pointer;font:600 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.dock>button::before{content:"";display:inline-block;width:8px;height:8px;background:var(--red);margin-right:8px}
.dock .dp{display:none;position:absolute;bottom:48px;left:0;width:min(330px,calc(100vw - 24px));background:#fff;border:1px solid var(--hair);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);padding:16px;gap:12px;flex-direction:column;max-height:70vh;overflow:auto}
.dock.open .dp{display:flex}
.dock .dp h4{margin:0;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dock .seg{display:flex;border:1px solid var(--hair)}
.dock .seg button{flex:1;min-height:36px;border:0;background:#fff;cursor:pointer;font:500 12px/1.2 var(--sans);color:var(--ink)}
.dock .seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.dock .dp a{color:var(--ink)}
.dock .dp p{margin:0;color:var(--ink-64);font-weight:400}
.sid-on [data-sid]{position:relative}
.sid-on [data-sid]::before{content:attr(data-sid) " · " attr(data-status);position:absolute;top:6px;right:6px;z-index:30;background:#FFF3B0;color:#000;font:600 10.5px/1 var(--sans);padding:5px 7px;border:1px solid #000}
.toast{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);visibility:hidden;background:var(--ink);color:#fff;padding:12px 18px;font:italic 400 17px var(--serif);border-left:4px solid var(--red);transition:transform .25s;z-index:70;max-width:calc(100vw - 32px)}
.toast.on{transform:translate(-50%,0);visibility:visible}
.preview-banner{background:#111;color:#fff;font:600 11.5px/1.4 var(--sans);letter-spacing:.04em;text-align:center;padding:7px var(--gR) 7px var(--gL)}
.preview-banner a{color:#fff}

/* ---------- misc layouts ---------- */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.split .a{grid-column:1 / span 5;display:flex;flex-direction:column;gap:18px;min-width:0}
.split .b{grid-column:7 / span 6;min-width:0}
.split.rev .a{grid-column:8 / span 5;grid-row:1}
.split.rev .b{grid-column:1 / span 6;grid-row:1}
@media (max-width:900px){.split .a,.split .b,.split.rev .a,.split.rev .b{grid-column:1 / -1;grid-row:auto}}
.quote{font:300 clamp(30px,3.4vw,52px)/1.1 var(--serif);letter-spacing:-.02em;margin:0}
.statement{font:300 clamp(34px,4.2vw,64px)/1.06 var(--serif);letter-spacing:-.02em;margin:0;max-width:22ch}
.statement em{font-style:italic;font-weight:400}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mosaic>*{min-width:0}
.legal-doc{max-width:760px}
.legal-doc h2{font:400 28px/1.2 var(--serif);margin:36px 0 10px}
.legal-doc p,.legal-doc li{color:var(--ink-64)}
.map-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.map-list a{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);padding:16px;text-decoration:none;background:#fff}
.map-list a:hover{border-color:var(--ink)}
.map-list b{font:400 21px/1.15 var(--serif)}
.status{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;display:inline-block}
.status.done{background:#E3F4E9;color:#145C33}.status.demo{background:#E8EEFC;color:#1D3F99}.status.gap{background:#FDE7E7;color:#8F0A0D}.status.later{background:#F1F1F3;color:#4A4A50}
.table-wrap{overflow-x:auto}
table.reg{border-collapse:collapse;width:100%;min-width:760px;font:400 14px/1.4 var(--sans)}
table.reg th,table.reg td{border-bottom:1px solid var(--hair);padding:10px 10px 10px 0;text-align:left;vertical-align:top}
table.reg th{font:600 11px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
  .track.pre::after{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
.reduced *,.reduced *::before,.reduced *::after{transition-duration:.01ms!important;animation:none!important}

@media (max-width:900px){.stage .label{position:static;display:block;margin-top:calc(100% + 14px)}.stage{margin-bottom:40px}}
@media (max-width:620px){.dock>button{min-height:34px;padding:0 10px;font-size:10.5px}.film .src{font-size:10px;max-width:86%}}
@media (max-width:900px){.grid12>[style*="grid-column"]{grid-column:1 / -1!important}.grid12{gap:20px}}
@media (max-width:420px){.choices{grid-template-columns:1fr}.formcard{padding:18px}.fs legend{font-size:28px}}
@media (max-width:700px){.book-scene{--bw:min(39vw,200px);--thick:16px}}
@media (max-width:620px){.stage .cap{display:none}}
.vstat{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--hair)}
.vstat::before{content:"";width:8px;height:8px;border-radius:50%;background:#B8B8BE}.vstat.live::before{background:#1F8A4C}
.hero h1 em .stop{font-style:italic}
.nav .btn.red{background:var(--ink)}
.nav .btn.red:hover,.nav .btn.red:focus-visible{background:var(--act)}

/* =====================================================================
   OCT 15 CORRECTION LAYER — premium patterns, no monospace, no browser chrome
   ===================================================================== */
.sec{padding-block:clamp(56px,7vw,104px)}
.sec.tight{padding-block:clamp(36px,4vw,60px)}
.lead{margin:0;font:400 clamp(18px,1.45vw,21px)/1.55 var(--serif);color:var(--ink-64);max-width:46ch}
.sec.dark .lead,.theater .lead{color:var(--w72)}
.eyebrow{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--act)}
.sec.dark .eyebrow,.theater .eyebrow{color:#fff;opacity:.72}
.h1x{margin:0;font:300 clamp(44px,5.4vw,88px)/.99 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em}
.h1x em,.h2x em{font-style:italic;font-weight:400}
.h2x{margin:0;font:300 clamp(34px,4vw,62px)/1.04 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.h3x{margin:0;font:400 clamp(24px,2.1vw,32px)/1.12 var(--serif);letter-spacing:-.01em}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.stack.sm{gap:12px}
.shot{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 30px 70px -36px rgba(10,10,11,.5),0 0 0 1px rgba(10,10,11,.06)}
.sec.dark .shot,.theater .shot{box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.cap{font:400 14px/1.45 var(--sans);color:var(--muted);margin-top:10px}
.sec.dark .cap,.theater .cap{color:rgba(255,255,255,.62)}
.zoomable{cursor:zoom-in}
.go{display:inline-flex;align-items:center;gap:10px;font:italic 400 21px/1.2 var(--serif);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;align-self:flex-start}
.go::after{content:"→";font-style:normal;transition:transform .3s var(--ease)}
.go:hover{border-bottom-color:var(--red)}.go:hover::after{transform:translateX(4px)}

/* (i) editorial contrast with layered figures */
.ed{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.ed .copy{grid-column:1 / span 5}
.ed .art{grid-column:7 / span 6;position:relative;min-width:0}
.ed.flip .copy{grid-column:8 / span 5;grid-row:1}
.ed.flip .art{grid-column:1 / span 6;grid-row:1}
.ed .art .main{width:86%;aspect-ratio:4/5;object-fit:cover;display:block}
.ed.flip .art .main{margin-left:auto}
.ed .art .layer{position:absolute;width:44%;right:0;bottom:-8%;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);border:6px solid #fff;aspect-ratio:1;object-fit:cover}
.ed.flip .art .layer{right:auto;left:0}
.ed .art .sq{position:absolute;width:46%;aspect-ratio:1;background:var(--red);right:4%;top:-6%;z-index:-1}
.ed.flip .art .sq{right:auto;left:4%}
.ed .art{isolation:isolate}
@media (max-width:900px){.ed .copy,.ed .art,.ed.flip .copy,.ed.flip .art{grid-column:1 / -1;grid-row:auto}.ed .art{margin-bottom:40px}}

/* (ii) theater: dark immersive media band */
.theater{background:#0B0B0C;color:#fff;padding-block:clamp(56px,7vw,110px);position:relative;overflow:hidden}
.theater .head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.theater .head .h2x{grid-column:1 / span 7}
.theater .head .lead{grid-column:9 / span 4}
@media (max-width:900px){.theater .head .h2x,.theater .head .lead{grid-column:1 / -1}}

/* (iii) decision module */
.decide{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.decide .q{grid-column:1 / span 7}
.decide .act{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px}
.choices2{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.choices2 a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);text-decoration:none;font:400 22px/1.2 var(--serif)}
.choices2 a::after{content:"→";font-family:var(--sans);font-size:18px;transition:transform .3s var(--ease)}
.choices2 a:hover{color:var(--act)}.choices2 a:hover::after{transform:translateX(4px)}
.sec.dark .choices2{border-top-color:rgba(255,255,255,.5)}.sec.dark .choices2 a{border-bottom-color:var(--w14)}
@media (max-width:900px){.decide .q,.decide .act{grid-column:1 / -1}}

/* hero tweaks */
.hero .acts .btn.red{background:var(--act)}.hero .acts .btn.red:hover{background:var(--ink)}
.hero .kick{opacity:.8}
@media (max-width:900px){.hero{padding-block:24px 48px}.hero .tx{gap:18px}.stage{max-width:440px}}

/* home worlds: whole tiles link */
.world a.cover{position:absolute;inset:0;z-index:2}
.world{position:relative}
.world .copy a,.world .copy .builds{position:relative;z-index:3}
.w-soft .real-ui{width:min(520px,72%);left:-10%;bottom:-14%;border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);background:#fff}
.w-soft .real-ui img{display:block;width:100%}

/* buyer moments (diagnostic, H03 / WB02 / HW03) */
.moment{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.moment .stagebox{grid-column:1 / span 7;position:relative}
.moment .side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:22px}
.moment .who{display:flex;gap:18px;flex-wrap:wrap}
.moment .who button{background:none;border:0;padding:6px 0;font:italic 400 20px/1.2 var(--serif);color:var(--muted);cursor:pointer;border-bottom:1px solid transparent}
.moment .who button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--red)}
.moment blockquote{margin:0;font:300 clamp(28px,2.8vw,42px)/1.12 var(--serif);letter-spacing:-.01em}
.moment blockquote em{font-style:italic;font-weight:400}
.moment .says{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.moment .fixnote{margin:0;color:var(--ink-64);font:400 16px/1.55 var(--sans);min-height:3.2em}
.mock{position:relative;background:#fff;border-radius:12px;box-shadow:0 40px 90px -40px rgba(10,10,11,.45),0 0 0 1px rgba(10,10,11,.07);overflow:hidden;display:none;aspect-ratio:16/10.5}
.mock.on{display:grid}
.mock.beauty{grid-template-columns:1.05fr 1fr}
.mock.beauty .pic{background:#111}
.mock.beauty .pic img{width:100%;height:100%;object-fit:cover}
.mock .body{padding:clamp(18px,3vw,40px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.mock .brand{font:600 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#777}
.mock .t{font:400 clamp(22px,2.2vw,34px)/1.05 var(--serif);margin:0}
.mock .d{font:400 14px/1.6 var(--sans);color:#555;margin:0;max-width:34ch}
.mock .slot{position:relative;min-height:96px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.mock .after{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.moment.fixed .mock .after{opacity:1;transform:none}
.mock .before{transition:opacity .4s}
.moment.fixed .mock .before{opacity:.0;position:absolute;pointer-events:none}
.mock .buy{display:inline-flex;align-items:center;justify-content:center;background:#0A0A0B;color:#fff;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:14px 18px;border-radius:4px;align-self:flex-start}
.mock .sub{font:400 13px/1.4 var(--sans);color:#555;text-decoration:underline;text-underline-offset:4px}
.mock .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mock .chip{font:500 12px/1 var(--sans);padding:8px 10px;border:1px solid #ddd;border-radius:999px;color:#555}
.mock .price{font:400 18px/1 var(--serif)}
.mock.soft{grid-template-rows:auto 1fr;background:#fbfbfc}
.mock.soft .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #eee;font:600 13px/1 var(--sans)}
.mock.soft .bar span{font-weight:400;color:#888;margin-left:18px}
.mock.soft .body{align-items:flex-start}
.mock.person{grid-template-rows:1fr auto}
.mock.person .pic{position:relative}
.mock.person .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;position:absolute;inset:0}
.mock.person .pic .over{position:absolute;left:24px;bottom:20px;color:#fff;font:300 clamp(24px,2.6vw,38px)/1.05 var(--serif);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.mock.person .slot{min-height:84px;padding:14px 22px;background:#fff}
.mock.person .paths{display:flex;gap:22px;flex-wrap:wrap}
.mock.person .paths span{font:italic 400 19px/1.2 var(--serif);border-bottom:1px solid #0A0A0B;padding-bottom:3px}
/* the Signal frame: four drawn corners, not a debug outline */
.signal{position:absolute;inset:-8px;pointer-events:none}
.signal i{position:absolute;width:22px;height:22px;border:3px solid var(--red);transition:all .6s var(--ease)}
.signal i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.signal i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.signal i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.signal i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.signal b{position:absolute;left:0;top:-30px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--act);background:#fff;padding:6px 8px;white-space:nowrap}
.moment .signal{opacity:0;transform:scale(1.04);transition:opacity .5s .2s,transform .6s .2s var(--ease)}
.moment.seen .signal{opacity:1;transform:none}
@media (max-width:900px){.moment .stagebox,.moment .side{grid-column:1 / -1}.mock{aspect-ratio:auto}.mock.beauty{grid-template-columns:1fr}.mock.beauty .pic{aspect-ratio:4/3}.mock.person .pic{aspect-ratio:4/3}}

/* operating philosophy steps (H06) */
.steps6{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.steps6 ol{grid-column:1 / span 5;list-style:none;margin:0;padding:0;position:relative;border-left:2px solid var(--w14)}
.steps6 ol::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:var(--p,16%);background:var(--red);transition:height .6s var(--ease)}
.steps6 li button{display:block;width:100%;text-align:left;background:none;border:0;color:rgba(255,255,255,.55);font:300 clamp(24px,2.3vw,34px)/1.15 var(--serif);padding:10px 0 10px 24px;cursor:pointer;transition:color .3s}
.steps6 li button[aria-selected=true],.steps6 li button:hover{color:#fff}
.steps6 li button[aria-selected=true]{font-style:italic}
.steps6 .panel{grid-column:7 / span 6;position:relative;min-height:260px}
.steps6 .pane{display:none;flex-direction:column;gap:16px}
.steps6 .pane.on{display:flex;animation:fadeup .5s var(--ease)}
.steps6 .pane h3{margin:0;font:400 clamp(26px,2.4vw,36px)/1.15 var(--serif)}
.steps6 .pane p{margin:0;color:var(--w72);font:400 18px/1.6 var(--serif);max-width:44ch}
.steps6 .pane .ask{font:italic 400 22px/1.35 var(--serif);color:#fff;border-left:3px solid var(--red);padding-left:16px}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){.steps6 ol,.steps6 .panel{grid-column:1 / -1}}

/* services H04: asymmetric */
.svc{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.svc a{text-decoration:none;display:flex;flex-direction:column;gap:14px;position:relative}
.svc .big{grid-column:1 / span 7;grid-row:span 2}
.svc .s2{grid-column:8 / span 5}
.svc .s3{grid-column:8 / span 5}
.svc .med{position:relative;overflow:hidden;border-radius:10px;background:#0B0B0C}
.svc .big .med{aspect-ratio:16/11}
.svc .s2 .med,.svc .s3 .med{aspect-ratio:16/8.4}
.svc .med img,.svc .med video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc a:hover .med img,.svc a:hover .med video{transform:scale(1.03)}
.svc h3{margin:0;font:300 clamp(26px,2.4vw,38px)/1.08 var(--serif);letter-spacing:-.01em}
.svc p{margin:0;color:var(--ink-64)}
.svc .go{font-size:18px}
@media (max-width:900px){.svc .big,.svc .s2,.svc .s3{grid-column:1 / -1;grid-row:auto}}
.leadflow{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(80% 90% at 70% 30%,#1c1c20,#0B0B0C)}
.leadflow .cards{display:flex;gap:12px;align-items:center;flex-wrap:nowrap;padding:16px;max-width:100%}
.leadflow .c{background:#fff;color:#0A0A0B;border-radius:8px;padding:10px 12px;font:500 12.5px/1.35 var(--sans);min-width:0;box-shadow:0 14px 30px -16px rgba(0,0,0,.6);white-space:nowrap}
.leadflow .c b{display:block;font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#888;margin-bottom:6px}
.leadflow .arr{color:var(--red);font:400 18px/1 var(--sans)}

/* proof rows H05 */
.proofrow{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;padding-block:clamp(28px,4vw,56px)}
.proofrow+.proofrow{border-top:1px solid var(--hair)}
.proofrow .m{grid-column:1 / span 8;position:relative}
.proofrow .t{grid-column:10 / span 3;display:flex;flex-direction:column;gap:14px}
.proofrow.flip .m{grid-column:5 / span 8;grid-row:1}
.proofrow.flip .t{grid-column:1 / span 3;grid-row:1}
.proofrow .m .phone{position:absolute;right:-3%;bottom:-6%;width:24%;border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5);border:5px solid #0A0A0B}
.proofrow.flip .m .phone{right:auto;left:-3%}
.credit{font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--act)}
@media (max-width:900px){.proofrow .m,.proofrow .t,.proofrow.flip .m,.proofrow.flip .t{grid-column:1 / -1;grid-row:auto}}

/* demo without browser chrome; zoom to the action */
.demo{border-radius:14px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(10,10,11,.55),0 0 0 1px rgba(10,10,11,.08);background:#0d1330}
.demo .screen{overflow:hidden}
.demo .shot{border-radius:0;box-shadow:none;transform-origin:var(--ox,50%) var(--oy,50%)}
.demo .shot.on.zoom{transform:scale(1.22);transition:opacity .6s var(--ease),transform 1.6s cubic-bezier(.3,.6,.2,1)}
.demo .cap{grid-template-columns:1fr auto;background:#fff;border-top:0;padding:18px 22px}
.demo .cap .n{display:none}
.demo .cap p{font:400 20px/1.35 var(--serif)}
.demo .cap .ctl{gap:10px}
.demo .cap button,.round{width:44px;height:44px;min-width:44px;border-radius:50%;border:1px solid rgba(10,10,11,.25);background:#fff;color:var(--ink);font:400 18px/1 var(--sans);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s,background .2s}
.demo .cap button:hover,.round:hover{border-color:var(--ink)}
.demo .cap button[data-play]{width:auto;padding:0 16px;border-radius:999px;font:600 13px/1 var(--sans)}
.demo .dots{background:#fff;padding:0 22px 18px}
.demo .dots button{height:3px;border-radius:2px}
.demo .hot{border-radius:6px}

/* journey labels */
.journey .rail button .i{font:600 12px/1 var(--sans)}
.journey .meta .lab{font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* film */
.film{border-radius:12px}
.film .time{font:500 12px/1 var(--sans)}
.film .src{display:none}
.filmhero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.filmhero .copy{grid-column:1 / span 4}
.filmhero .media{grid-column:5 / span 8}
@media (max-width:900px){.filmhero .copy,.filmhero .media{grid-column:1 / -1}}
.formats{display:grid;grid-template-columns:2.2fr 1fr 1.25fr;gap:20px;align-items:end}
.formats figure{display:flex;flex-direction:column;gap:10px}
.formats video{width:100%;border-radius:10px;object-fit:cover;background:#000;display:block}
.formats .r169{aspect-ratio:16/9}.formats .r916{aspect-ratio:9/16}.formats .r11{aspect-ratio:1}
@media (max-width:760px){.formats{grid-template-columns:1fr 1fr}.formats figure:first-child{grid-column:1 / -1}}

/* BOOK — editorial controls */
.bookstage{background:radial-gradient(110% 90% at 30% 20%,#fdfcf9 0%,#efece6 60%,#e2ded6 100%);border-radius:0;padding:clamp(36px,5vw,72px) var(--gR) clamp(36px,5vw,64px) var(--gL)}
.bookwrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.bookwrap .scenebox{grid-column:1 / span 7;position:relative}
.bookwrap .info{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px}
.bookwrap .info .bt{margin:0;font:300 clamp(32px,3.2vw,48px)/1.02 var(--serif);letter-spacing:-.02em}
.bookwrap .info .bs{margin:0;font:italic 400 19px/1.4 var(--serif);color:var(--ink-64)}
.bookwrap .info .bd{margin:0;color:var(--ink-64)}
.bookpick{gap:14px}
.bookpick button{padding:0;border:0;background:none;width:56px;cursor:pointer;transition:transform .3s var(--ease);box-shadow:none}
.bookpick button img{display:block;width:100%;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.bookpick button[aria-pressed=true]{transform:translateY(-6px);box-shadow:0 3px 0 0 var(--red)}
.book-ctrl{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:space-between;pointer-events:none;margin:0}
.book-ctrl button{pointer-events:auto;width:46px;height:46px;min-width:46px;border-radius:50%;border:1px solid rgba(10,10,11,.25);background:rgba(255,255,255,.8);backdrop-filter:blur(4px);font:400 20px/1 var(--serif);padding:0;color:var(--ink)}
.book-ctrl button:disabled{opacity:.25}
.book-ctrl .count,.book-hint{display:none!important}
.ribbon{position:absolute;top:-2px;right:22%;width:12px;height:64px;background:linear-gradient(90deg,#b50d11,#e3171c 50%,#b50d11);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform:translateZ(1px);cursor:pointer;z-index:5;transition:height .4s var(--ease)}
.book:not(.is-open):hover .ribbon{height:76px}
.book.is-open .ribbon{opacity:0}
.soundbtn{background:transparent;color:var(--ink);border:1px solid rgba(10,10,11,.25);border-radius:999px;font:500 13px/1 var(--sans);padding:10px 14px;min-height:40px}
.soundbtn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:900px){.bookwrap .scenebox,.bookwrap .info{grid-column:1 / -1}.book-ctrl{bottom:-18px}}

/* personal site scroll */
.sitescroll{position:relative;height:clamp(420px,52vw,640px);overflow:hidden;border-radius:12px;box-shadow:0 40px 90px -40px rgba(0,0,0,.5);background:#000}
.sitescroll img{width:100%;display:block;animation:sitescroll 38s linear infinite alternate}
.sitescroll:hover img{animation-play-state:paused}
@keyframes sitescroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + clamp(420px,52vw,640px)))}}

/* scenario cards (growth) */
.scen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scen article{background:#141417;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:16px;min-height:340px}
.scen .ui{background:#fff;color:#111;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px;font:400 13.5px/1.4 var(--sans);position:relative;opacity:.0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.scen.in .ui{opacity:1;transform:none}
.scen.in article:nth-child(2) .ui{transition-delay:.5s}.scen.in article:nth-child(3) .ui{transition-delay:1s}
.scen .ui b{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#888}
.scen .ui .mis{color:var(--act);font-weight:600}
.scen h3{margin:0;font:400 23px/1.2 var(--serif)}
.scen .q{margin-top:auto;font:italic 400 20px/1.3 var(--serif);color:#fff;border-left:3px solid var(--red);padding-left:12px}
@media (max-width:900px){.scen{grid-template-columns:1fr}}

/* path map (growth G03) */
.pathmap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;margin-top:8px}
.pathmap::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--hair)}
.pathmap button{position:relative;background:none;border:0;padding:0 8px 0 0;text-align:left;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.pathmap button i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ink);margin-top:16px;transition:all .3s}
.pathmap button span{font:400 20px/1.15 var(--serif)}
.pathmap button[aria-selected=true] i{background:var(--red);border-color:var(--red);transform:scale(1.25)}
.pathmap button[aria-selected=true] span{font-style:italic}
.pathpane{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--ink);padding-top:20px}
.pathpane h4{margin:0 0 6px;font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pathpane p{margin:0;font:400 19px/1.5 var(--serif)}
@media (max-width:760px){.pathmap{grid-template-columns:repeat(3,1fr);row-gap:20px}.pathmap::before{display:none}.pathpane{grid-template-columns:1fr}}

/* tiers (pricing / websites) */
.tiers{display:grid;grid-template-columns:1fr 1.15fr 1.3fr;gap:20px;align-items:stretch}
.tier{border-radius:14px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:16px;background:#fff;box-shadow:0 0 0 1px var(--hair)}
.tier.t2{background:var(--mist)}
.tier.t3{background:#0B0B0C;color:#fff;box-shadow:none}
.tier .tn{margin:0;font:300 clamp(32px,3vw,46px)/1 var(--serif);letter-spacing:-.02em}
.tier .tf{margin:0;font:italic 400 19px/1.4 var(--serif);color:var(--ink-64)}
.tier.t3 .tf{color:var(--w72)}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.tier li{padding-left:18px;position:relative;font:400 15.5px/1.5 var(--sans)}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--red)}
.tier .ex{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);font:400 14px/1.45 var(--sans);color:var(--muted)}
.tier.t3 .ex{border-top-color:var(--w14);color:rgba(255,255,255,.6)}
.pricenote{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;margin-top:26px;padding-top:22px;border-top:1px solid var(--ink)}
.pricenote p{margin:0;font:400 20px/1.4 var(--serif)}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}

/* lightbox */
dialog.lb{padding:0;border:0;background:transparent;max-width:min(1400px,96vw);max-height:94vh}
dialog.lb::backdrop{background:rgba(10,10,11,.86)}
dialog.lb img{display:block;max-width:100%;max-height:90vh;border-radius:8px}
dialog.lb button{position:fixed;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;font:400 22px/1 var(--sans);cursor:pointer}

/* slim footer */
.ft .close-cta{display:none}
.ft .socialhead{padding-block:22px 12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.ft .socialhead p{margin:0;font:italic 400 20px/1.3 var(--serif)}
.ft .socialhead span{font:400 14px/1 var(--sans);color:rgba(255,255,255,.55)}
.social a{height:clamp(78px,7vw,104px)}
.social span{font:600 11px/1 var(--sans);letter-spacing:.12em}
.ft .cols h4{font:600 11.5px/1 var(--sans);letter-spacing:.14em}
.ft .mailrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ft .mailrow a{color:#fff;font:italic 400 20px/1.2 var(--serif);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.ft .copy-mail{font:500 12px/1 var(--sans);border-radius:999px}

/* forms polish */
.steps-bar i{height:3px;border-radius:2px}
.choices label{border-radius:10px}
.formcard{border-radius:14px}
.field input,.field textarea,.field select{border-radius:8px}

/* ventures */
.vstat{font:600 11px/1 var(--sans);letter-spacing:.12em;border-radius:999px}
dialog.vd{border-radius:14px}
.vcard{border-radius:12px;overflow:hidden}
dialog.vd dt{font:600 11px/1.4 var(--sans);letter-spacing:.12em}

/* about portrait band */
.founder{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.founder .p{grid-column:1 / span 5;position:relative}
.founder .p img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;display:block}
.founder .p .sq{position:absolute;right:-8%;top:8%;width:40%;aspect-ratio:1;background:var(--red);z-index:-1}
.founder .p{isolation:isolate}
.founder .t{grid-column:7 / span 6;display:flex;flex-direction:column;gap:22px;padding-bottom:12px}
@media (max-width:900px){.founder .p,.founder .t{grid-column:1 / -1}}

.reveal-ok{}

/* ---------- signature red diagnostic device (Owner-approved Oct 15): frame + short label, restrained ---------- */
.signal{position:absolute;inset:-6px;pointer-events:none;border:2px solid var(--red)}
.signal i{display:none}
.signal b,.mk b{position:absolute;left:-2px;bottom:100%;top:auto;margin-bottom:8px;background:var(--act);color:#fff;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 9px 6px;white-space:nowrap}
.moment.fixed .signal{border-color:var(--ink)}
.moment.fixed .signal b{background:var(--ink)}
.mk{position:absolute;border:2px solid var(--red);pointer-events:none;z-index:4;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.mk.in{opacity:1;transform:none}
.mk b{opacity:0;transform:translateY(4px);transition:opacity .5s .5s,transform .5s .5s var(--ease)}
.mk.in b{opacity:1;transform:none}
.mk.below b{bottom:auto;top:100%;margin:8px 0 0}
.mk.right b{left:auto;right:-2px}
.w-fash .media,.w-soft .media,.w-pers .media{position:relative}
.world .ph{position:relative}

/* page tops */
.sec.top{padding-top:clamp(36px,5vw,72px)}
.ed .art .main{box-shadow:0 30px 70px -36px rgba(10,10,11,.45)}
.ed .art .shot{position:relative;z-index:1}
.ed .art .phone,.collage .phone,.proofrow .m .phone{position:absolute;right:-2%;bottom:-8%;width:24%;border-radius:22px;border:6px solid #0A0A0B;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);z-index:3;background:#0A0A0B}
.ed .art .main-wide{width:100%}
.ed .art .phone2{position:absolute;left:-4%;bottom:-10%;width:26%;border-radius:22px;border:6px solid #0A0A0B;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);z-index:3}
.ed .art .bookfloat{position:absolute;right:0;bottom:-6%;width:34%;filter:drop-shadow(0 28px 30px rgba(0,0,0,.45));transform:rotate(4deg);z-index:3}
.ed .art .layer.notecard{width:auto;aspect-ratio:auto;border:0;background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:6px;max-width:300px;bottom:6%;right:-2%;border-radius:10px;font:400 14px/1.4 var(--sans)}
.notecard b{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.notecard i{font-style:normal;align-self:flex-start;background:var(--act);color:#fff;font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:7px 9px 6px;margin-top:6px}

/* websites collage */
.collage{position:relative;padding:4% 8% 10% 0;isolation:isolate}
.collage .sq{position:absolute;right:0;top:0;width:52%;aspect-ratio:1;background:var(--red);z-index:-1}
.collage .main{width:100%}
.collage .phone{right:2%;bottom:0;width:22%}
.collage .closeup{position:absolute;left:-4%;bottom:2%;width:40%;margin:0;border:6px solid #fff;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);z-index:2;aspect-ratio:16/8;overflow:hidden}
.collage .closeup img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (max-width:900px){.collage{padding:0 0 18% 0;margin-top:12px}}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(28px,4vw,48px) 0 16px}
.trio figure{margin:0;display:flex;flex-direction:column;gap:12px}
.tq{margin:0;font:italic 400 clamp(22px,2vw,28px)/1.2 var(--serif)}
.trio .shot{aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
@media (max-width:900px){.trio{grid-template-columns:1fr}}

.checks{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.checks li{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0 14px 26px;border-top:1px solid var(--hair);position:relative}
.checks li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;background:var(--red)}
.checks b{font:400 21px/1.2 var(--serif)}
.checks span{color:var(--ink-64);font:400 15.5px/1.5 var(--sans)}
.sec.dark .checks li{border-top-color:var(--w14)}.sec.dark .checks span{color:var(--w72)}

.deliv{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.deliv li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)}
.deliv li div{display:flex;flex-direction:column;gap:4px}
.deliv b{font:400 22px/1.2 var(--serif)}
.deliv span{color:var(--ink-64);font-size:15px}
.deliv em{font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted);white-space:nowrap;text-align:right}

.urlgo{display:flex;flex-direction:column;gap:12px}
.urlgo input{font:400 18px/1.3 var(--sans);padding:16px 18px;border:1px solid rgba(10,10,11,.3);border-radius:8px;background:#fff;width:100%}
.urlgo input:focus{outline:2px solid var(--act);outline-offset:2px}

/* growth */
.scen .ui .mis{background:var(--act);color:#fff;font:600 10.5px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px 6px;align-self:flex-start;margin-top:4px}
.scen .ui span{display:block}
.lp{list-style:none;margin:clamp(28px,4vw,48px) 0 14px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:lp}
.lp li{background:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 1px var(--hair),0 20px 40px -30px rgba(0,0,0,.35);position:relative;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lp.in li{opacity:1;transform:none}
.lp li:nth-child(2){transition-delay:.25s}.lp li:nth-child(3){transition-delay:.5s}.lp li:nth-child(4){transition-delay:.75s}.lp li:nth-child(5){transition-delay:1s}
.lp li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--red);font:400 18px/1 var(--sans);z-index:2}
.lp .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 13px/1 var(--sans)}
.lp li:last-child .n{background:var(--act)}
.lp b{font:400 22px/1.15 var(--serif)}
.lp span{color:var(--ink-64);font:400 14.5px/1.45 var(--sans)}
@media (max-width:900px){.lp{grid-template-columns:1fr}.lp li:not(:last-child)::after{content:"↓";right:auto;left:30px;top:auto;bottom:-15px;transform:none}}
.measure{list-style:none;margin:clamp(28px,4vw,48px) 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.measure li{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;position:relative;padding:14px 0}
.measure b{font:400 24px/1.1 var(--serif)}
.measure span{color:var(--ink-64);position:relative;z-index:1;padding-left:18px}
.measure i{position:absolute;left:200px;top:8px;bottom:8px;width:0;background:var(--mist);border-left:3px solid var(--red);transition:width 1.1s var(--ease)}
.measure.in i{width:calc((100% - 200px) * var(--w) / 100)}
@media (max-width:700px){.measure li{grid-template-columns:1fr;gap:6px}.measure i{left:0}.measure.in i{width:calc(100% * var(--w) / 100)}}

/* fashion */
.pstory{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;align-items:end;margin:clamp(28px,4vw,48px) 0 14px}
.pstory figure{margin:0;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pstory.in figure{opacity:1;transform:none}
.pstory.in figure:nth-child(2){transition-delay:.35s}.pstory.in figure:nth-child(3){transition-delay:.7s}
.pstory figure img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pstory figure:nth-child(2) img{aspect-ratio:4/5}
.pcard{background:#fff;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;box-shadow:0 40px 80px -40px rgba(0,0,0,.4),0 0 0 1px var(--hair);aspect-ratio:3/4;justify-content:center}
.pcard .brand,.phonemock b+span{font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#777}
.pcard .t{margin:0;font:400 clamp(26px,2.4vw,36px)/1.05 var(--serif)}
.pcard .d{margin:0;color:#555;font-size:15px}
.pcard .buy,.phonemock i{display:inline-flex;justify-content:center;background:var(--ink);color:#fff;font:600 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:15px 18px;border-radius:4px;font-style:normal}
.pcard .sub{font-size:14px;color:#555;text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.pstory{grid-template-columns:1fr}}
.launchset{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:end}
.launchset .v916{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:18px;border:6px solid #0A0A0B;background:#000}
.launchset .land{width:100%;aspect-ratio:4/5;object-fit:cover}
.launchset .mail{position:absolute;right:-3%;bottom:-6%;background:#fff;padding:14px 16px;border-radius:10px;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:4px;font:400 14px/1.4 var(--sans);max-width:250px}
.launchset .mail b{font:400 18px/1.2 var(--serif)}.launchset .mail i{font-style:normal;text-decoration:underline;text-underline-offset:3px;color:var(--act)}
.phonemock{position:absolute;right:0;bottom:-8%;width:36%;background:#fff;border:7px solid #0A0A0B;border-radius:26px;padding:0 0 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);overflow:hidden;z-index:3;font:400 13px/1.3 var(--sans)}
.phonemock .pm-img{aspect-ratio:1;overflow:hidden}.phonemock .pm-img img{width:100%;height:100%;object-fit:cover}
.phonemock b{font:400 18px/1.1 var(--serif);padding:0 12px}.phonemock span{padding:0 12px;color:#666}.phonemock i{margin:4px 12px 0;padding:11px}
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(28px,4vw,48px)}
.routes figure{margin:0;display:flex;flex-direction:column;gap:14px}
.routes img{width:100%;aspect-ratio:4/5;object-fit:cover}
.routes figcaption{display:flex;flex-direction:column;gap:6px}.routes figcaption p{margin:0}.routes figcaption p:last-child{color:var(--ink-64)}
@media (max-width:900px){.routes{grid-template-columns:1fr}.routes img{aspect-ratio:16/10}}

/* software */
.flow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(28px,4vw,48px)}
.flow4 figure{margin:0;display:flex;flex-direction:column;gap:12px;position:relative}
.flow4 .n{position:absolute;left:-8px;top:-8px;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--act);color:#fff;display:grid;place-items:center;font:600 13px/1 var(--sans)}
.flow4 .shot{aspect-ratio:16/10;object-fit:cover;object-position:0 0}
.flow4 figcaption{display:flex;flex-direction:column;gap:4px}.flow4 b{font:400 21px/1.2 var(--serif)}.flow4 figcaption span{color:var(--ink-64);font-size:15px}
@media (max-width:900px){.flow4{grid-template-columns:1fr 1fr}}@media (max-width:560px){.flow4{grid-template-columns:1fr}}
.launchsoft{position:relative;padding-bottom:16%}
.launchsoft .vid{position:absolute;right:-4%;bottom:0;width:56%;aspect-ratio:16/10;object-fit:cover;z-index:2}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:clamp(28px,4vw,48px)}
.duo a{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.duo figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 70px -40px rgba(0,0,0,.5)}
.duo figure img{width:100%;height:100%;object-fit:cover;object-position:0 0;transition:transform .8s var(--ease)}
.duo a:hover figure img{transform:scale(1.03)}
.duo p{margin:0;color:var(--ink-64)}
@media (max-width:800px){.duo{grid-template-columns:1fr}}

/* personal */
.recog{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:18px}
.recog > :first-child{grid-row:span 2;height:100%;object-fit:cover;object-position:0 0}
.recog .shot{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:800px){.recog{grid-template-columns:1fr}.recog > :first-child{grid-row:auto}}
.paths4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,48px)}
.paths4 a{text-decoration:none;display:flex;flex-direction:column;gap:10px}
.paths4 figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:10px;box-shadow:0 24px 50px -30px rgba(0,0,0,.45)}
.paths4 img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .8s var(--ease)}
.paths4 a:hover img{transform:scale(1.04)}
.paths4 b{font:400 22px/1.2 var(--serif)}.paths4 a:hover b{color:var(--act)}
@media (max-width:900px){.paths4{grid-template-columns:1fr 1fr}}
.stagestrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0}
.stagestrip.big{grid-template-columns:1fr;gap:16px}
.stagestrip .shot{aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.quiet3{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
@media (max-width:900px){.quiet3{grid-template-columns:1fr}}
.sitescroll img{height:auto}
.ed .art .sitescroll{width:100%}

/* video */
.panels3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;margin-top:clamp(28px,4vw,48px)}
.panels3 figure{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#000}
.panels3 figure>img,.panels3 figure>video{width:100%;height:100%;object-fit:cover;display:block}
.panels3 figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;display:flex;flex-direction:column;gap:6px}
.panels3 figcaption .eyebrow{color:#fff;opacity:.8}
.panels3 figcaption b{font:400 21px/1.25 var(--serif)}
.panels3 figcaption .cap{color:rgba(255,255,255,.7);margin:0;font-size:13px}
.panels3.light figure{aspect-ratio:16/11}
.panels3.light figcaption span{font-size:14px;opacity:.85}
@media (max-width:900px){.panels3{grid-template-columns:1fr}.panels3 figure{aspect-ratio:16/11}}
.afterwatch{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.afterwatch video{width:100%;aspect-ratio:16/10;object-fit:cover}
.afterwatch .arrow{font:400 30px/1 var(--sans);color:var(--red)}
.gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:18px}
.gal .g1{grid-row:span 2}
.gal .g2 video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.gal .g3{display:flex;justify-content:center}.gal .g3 video{height:100%;max-height:360px;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
@media (max-width:800px){.gal{grid-template-columns:1fr}.gal .g1{grid-row:auto}}
.filmhero .film{box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}

/* how / why */
.statementband{max-width:980px}
.statementband .h2x{font-size:clamp(40px,5vw,78px)}
.altrows{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);margin-top:clamp(28px,4vw,48px)}
.ar{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,3vw,48px);align-items:center;text-decoration:none}
.ar.flip{grid-template-columns:5fr 7fr}.ar.flip figure{order:2}
.ar figure{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:12px}
.ar figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ar:hover figure img{transform:scale(1.03)}
.ar div{display:flex;flex-direction:column;gap:12px}
@media (max-width:800px){.ar,.ar.flip{grid-template-columns:1fr}.ar.flip figure{order:0}}
.reasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.reasons li{font:300 clamp(30px,3.6vw,56px)/1.1 var(--serif);letter-spacing:-.02em;padding:18px 0;border-top:1px solid var(--hair)}
.reasons li:last-child{font-style:italic;font-weight:400}
.reasons li:last-child::after{content:".";color:var(--red);font-style:normal}
.reasons-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.reasons-row button{background:#fff;border:1px solid rgba(10,10,11,.2);border-radius:999px;padding:14px 20px;font:500 15px/1 var(--sans);cursor:pointer;min-height:48px}
.reasons-row button:hover,.reasons-row button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.trellan{display:grid;place-items:center;background:#0B0B0C;color:#fff}
.trellan span{font:300 clamp(30px,3vw,44px)/1 var(--serif);font-style:italic}

/* book paper cues */
.book .leaf .pg .endpaper{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent 60%),repeating-linear-gradient(45deg,#e9e3d6 0 6px,#efe9dd 6px 12px)}
.book .leaf .pg .endpaper.dark{background:repeating-linear-gradient(45deg,#4a2a1c 0 6px,#56301f 6px 12px)}
.book .leaf .pg .tp{font:400 calc(var(--bw)*.085)/1.05 var(--serif);margin:28% 0 .5em;text-align:center}
.book .leaf .pg .tps{text-align:center;font-style:italic}
.book .leaf .pg .by{text-align:center;font:600 calc(var(--bw)*.03)/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#6b675f}
.book .leaf .pg .q{font:italic 400 calc(var(--bw)*.05)/1.45 var(--serif);margin-top:30%}
.book .leaf .pg h6{font:400 calc(var(--bw)*.06)/1.15 var(--serif);margin:30% 0 1em}
.book .leaf .pg .buy{display:inline-block;background:#0A0A0B;color:#fff;font:600 calc(var(--bw)*.032)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:.9em 1.2em;text-decoration:none}
.bookstage .bar,.bookstage .vh-title{display:none}
/* fixes r2 */
.collage .cmain{width:100%;display:block}
.svc .big .med{aspect-ratio:1600/797}
.svc .s2 .med,.svc .s3 .med{aspect-ratio:16/9}
.svc .big{grid-row:auto}
.svc{align-items:start}
.mock .slot{display:grid;margin-top:34px;padding:14px;position:relative}
.mock .slot>.before,.mock .slot>.after{grid-area:1/1;display:flex;flex-direction:column;gap:10px}
.moment.fixed .mock .before{opacity:0;position:static;pointer-events:none}
.mock.soft{aspect-ratio:auto;min-height:380px}
.mock.soft .bar{justify-content:flex-start;gap:22px}.mock.soft .bar span{margin-left:0}
.mock.person .slot{margin:0;padding:34px 22px 18px}
.mock.person .slot .signal{inset:26px 12px 8px}
.mock.beauty .body{padding-top:28px}
.ed .art .launchsoft .vid{position:absolute;right:-4%;bottom:0;width:56%;aspect-ratio:16/10;object-fit:cover;z-index:2}
.proofrow .m .bookfloat{position:absolute;right:-3%;bottom:-10%;width:20%;filter:drop-shadow(0 28px 30px rgba(0,0,0,.45));transform:rotate(4deg);z-index:3}
.ed.wide .copy{grid-column:1 / span 5}.ed.wide .art{grid-column:6 / span 7}
@media (max-width:900px){.ed.wide .copy,.ed.wide .art{grid-column:1 / -1}}
.paths4 figure{aspect-ratio:4/3}.paths4 img{object-position:50% 0}
.real-ui .mk b{font-size:9.5px}
.panels3{align-items:stretch}
.panels3 figure,.panels3.light figure{aspect-ratio:auto;height:clamp(380px,36vw,560px)}
.panels3.light figure{height:clamp(260px,22vw,340px)}
.formats figure video.r11{aspect-ratio:1/1;height:auto}
.formats figure video.r169{aspect-ratio:16/9;height:auto}
.formats figure video.r916{aspect-ratio:9/16;height:auto}
@media (max-width:900px){.panels3 figure{height:clamp(320px,90vw,460px)}}
@media (max-width:900px){.w-soft .real-ui{left:4%;bottom:-12%;width:70%}.w-soft .media{margin-bottom:48px}
 .leadflow .cards{gap:6px;padding:10px}.leadflow .c{padding:8px 9px;font-size:11px}.leadflow .arr{font-size:14px}}
.demo .cap p{color:var(--ink);margin:0}
.demo .cap{margin-top:0;display:grid;align-items:center;gap:16px}
.soundbtn{align-self:flex-start;width:auto}
/* fixes r3 (independent review) */
.svc{align-items:stretch}
.svc .big{grid-row:span 2}
.svc .big .med{flex:1;aspect-ratio:auto;min-height:340px}
.svc .big .med img{object-position:0 50%}
.svc .s2 .med video,.svc .s2 .med img{object-position:50% 25%}
.leadflow .c{font-size:13.5px;padding:12px 14px}
.pcard{aspect-ratio:auto;justify-content:flex-start}
.pcard .pc-img{aspect-ratio:4/3;overflow:hidden;margin:-8px -8px 8px}.pcard .pc-img img{width:100%;height:100%;object-fit:cover}
.lp li.cold{z-index:2}
.lp .mk{position:absolute}
.lp li.cold .n{background:var(--act)}
.lp li:last-child .n{background:var(--ink)}
.proofrow .m .phone{width:20%}
.collage .closeup{aspect-ratio:1169/640}
.collage .closeup img{object-position:0 0}
@media (max-width:900px){
 .collage .closeup{left:0;width:44%}
 .collage .phone,.ed .art .phone,.proofrow .m .phone{right:0}
 .ed .art .launchsoft .vid{right:0}
 .launchset .mail{right:0}
 .ed .art .phone2{left:0}
 .svc .big{grid-row:auto}.svc .big .med{min-height:0;aspect-ratio:1600/797;flex:none}
 .proofrow .m{margin-bottom:28px}
 .lp .mk b{left:auto;right:-2px}
 .routes{grid-template-columns:1fr 1fr 1fr;gap:10px}.routes img{aspect-ratio:3/4}.routes .tq{font-size:17px}.routes figcaption p:last-child{display:none}
}
@media (max-width:560px){.routes{grid-template-columns:1fr}.routes figure{display:grid;grid-template-columns:40% 1fr;gap:14px;align-items:center}.routes img{aspect-ratio:1}.routes figcaption p:last-child{display:block}}
main{overflow-x:clip}
@media (max-width:1100px){.founder .p .sq{right:0}.ed .art .layer.notecard{right:0}.w-pers .bookchip{right:0}}
.stage .cap{color:#fff;max-width:72%;line-height:1.25}
@media (max-width:620px){.stage .cap{display:block;font-size:13px;letter-spacing:.06em;max-width:64%;top:5%;right:5%}}
@media (max-width:620px){.stage .cap{max-width:none;left:32%;font-size:12.5px;letter-spacing:.04em;white-space:nowrap}}
@media (max-width:620px){.stage .cap{left:auto;right:4%;font-size:11px;letter-spacing:.02em}}

/* =====================================================================
   HOME · GATE 3A/3B (2026-10-15): six chapters + hero openings A/B/C/D
   ===================================================================== */
em.rd{color:var(--act)}
/* ---------- H01 hero engine ---------- */
.hx2 .stage .sq{z-index:0;will-change:transform,clip-path}
.hx2 .stage .sq .cap{position:absolute;right:6%;top:4%;left:auto}
.hx2 .stage .sqsh{position:absolute;right:0;top:0;width:78%;aspect-ratio:1;background:radial-gradient(60% 40% at 50% 100%,rgba(0,0,0,.28),transparent 70%);transform:translateY(6%) scale(.96);opacity:0;filter:blur(18px);z-index:0}
.hx2 [data-slot]{z-index:1;margin:0}
.hx2 .portrait{z-index:1}.hx2 .chip{z-index:2}
.hx2 .lys{position:absolute;inset:0;overflow:hidden}
.hx2 .ly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hx2 .ly.on{opacity:1}
.hx2 .scan,.hx2 .shut{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3}
.hx2 .scan{background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px),linear-gradient(180deg,transparent 0,rgba(255,46,46,.18) 48%,rgba(0,200,255,.14) 52%,transparent 100%);mix-blend-mode:screen}
.hx2 .shut{background:var(--red);transform-origin:top;opacity:1;transform:scaleY(0)}
.hx2 .dframe{position:absolute;left:0;top:0;width:10px;height:10px;pointer-events:none;z-index:6;opacity:0}
.hx2 .dframe i{position:absolute;background:var(--red)}
.hx2 .dframe .t{left:0;top:0;right:0;height:2px;transform-origin:left}.hx2 .dframe .b{left:0;bottom:0;right:0;height:2px;transform-origin:right}
.hx2 .dframe .l{left:0;top:0;bottom:0;width:2px;transform-origin:bottom}.hx2 .dframe .r{right:0;top:0;bottom:0;width:2px;transform-origin:top}
.hx2.pre .stage .sq,.hx2.pre .stage [data-slot]{visibility:hidden}
.herosw{position:fixed;left:16px;bottom:16px;z-index:80;display:flex;gap:6px;align-items:center;background:#fff;border-radius:999px;padding:6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);font:600 12px/1 var(--sans)}
.herosw span{padding:0 8px;color:var(--muted)}
.herosw button{border:0;background:none;padding:9px 12px;border-radius:999px;cursor:pointer;font:inherit}
.herosw button[aria-pressed=true]{background:var(--ink);color:#fff}
@media (max-width:620px){.hx2 .stage .sq .cap{left:auto;right:4%;font-size:11px;letter-spacing:.02em;white-space:nowrap}}

/* ---------- H02 leaks ---------- */
.leaks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(28px,4vw,48px)}
.lk{display:flex;flex-direction:column;gap:14px;min-width:0}
.lk .hook{margin:0;font:400 clamp(22px,1.9vw,28px)/1.15 var(--serif)}
.lk .mock{display:flex!important;flex-direction:column;aspect-ratio:auto;grid-template-columns:none}
.lk .mock .pic{position:relative;aspect-ratio:16/10;overflow:hidden}
.lk .mock .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk .mock .body{padding:18px 20px 22px;gap:8px}
.lk .mock .t{font-size:24px}
.lk .mock .slot{margin-top:30px;min-height:120px}
.lk .mock.soft{min-height:0}
.lk .mock.soft .body{min-height:260px;justify-content:flex-start;padding-top:20px}
.lk .mock.person .pic{aspect-ratio:16/10}
.lk .mock.person .slot{min-height:110px}
.lk .signal{opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease),transform .6s var(--ease),border-color .4s}
.lk.seen .signal{opacity:1;transform:none}
.lk .mock .after{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lk .mock .before{transition:opacity .4s}
.lk.fixed .mock .after{opacity:1;transform:none}
.lk.fixed .mock .before{opacity:0}
.lk.fixed .signal{border-color:var(--ink)}.lk.fixed .signal b{background:var(--ink)}
.lk .mock.soft .bar{gap:18px;padding:12px 18px;font-size:12px}
.bridge{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--ink)}
.bridge p{margin:0;font:400 clamp(22px,2vw,30px)/1.2 var(--serif);flex:1 1 360px}
.bridge p em{color:var(--act)}
.bridge .replay{background:none;border:1px solid rgba(10,10,11,.25);border-radius:999px;padding:10px 16px;font:500 13px/1 var(--sans);cursor:pointer;min-height:40px}
@media (max-width:900px){.leaks{grid-template-columns:1fr;gap:40px}}

/* ---------- H03 worlds stage ---------- */
.wsec{padding-block:clamp(56px,7vw,100px)}
.wstage{display:grid;grid-template-columns:minmax(0,33fr) minmax(0,67fr);gap:clamp(24px,3vw,48px);align-items:stretch}
.wleft{display:flex;flex-direction:column;gap:22px}
.wleft .h2x{font-size:clamp(34px,3.4vw,52px)}
.wsel{display:flex;flex-direction:column;border-top:1px solid var(--w14);margin-top:8px}
.wsel button{display:flex;gap:16px;align-items:baseline;background:none;border:0;border-bottom:1px solid var(--w14);color:rgba(255,255,255,.5);text-align:left;padding:14px 0;font:400 clamp(20px,1.6vw,24px)/1.2 var(--serif);cursor:pointer;transition:color .3s}
.wsel button span{font:600 11px/1 var(--sans);letter-spacing:.14em;color:inherit}
.wsel button[aria-selected=true]{color:#fff;font-style:italic}
.wsel button[aria-selected=true] span{color:var(--red)}
.wsel button:hover{color:#fff}
.wcopy{display:none;flex-direction:column;gap:12px}.wcopy.on{display:flex;animation:fadeup .6s var(--ease)}
.wcopy h3,.scene .mcopy h3{margin:0;font:300 clamp(26px,2.2vw,34px)/1.12 var(--serif)}
.wcopy h3 em,.scene .mcopy h3 em{font-style:italic;font-weight:400}
.wcopy p,.scene .mcopy p{margin:0;color:var(--w72);font:400 17px/1.55 var(--serif)}
.wcopy .go,.scene .mcopy .go{color:#fff}
.wprog{height:2px;background:var(--w14);margin-top:auto}.wprog i{display:block;height:100%;width:0;background:var(--red)}
.wright{position:relative;min-height:clamp(460px,44vw,680px)}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.scene.on{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
.scene .mcopy{display:none}
.scene .media{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.scene .fv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .fv.dark{object-fit:contain;background:#0d1330}
.scene .ins{position:absolute;left:24px;bottom:24px;max-width:300px;background:rgba(255,255,255,.96);color:var(--ink);padding:16px 18px;border-radius:10px;font:400 15px/1.45 var(--sans);display:flex;flex-direction:column;gap:6px;z-index:5;opacity:0;transform:translateY(10px);transition:opacity .6s .9s var(--ease),transform .6s .9s var(--ease)}
.scene .ins b{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--act)}
.scene.on .ins{opacity:1;transform:none}
/* fashion beats */
.scene .site2{position:absolute;right:4%;top:8%;width:60%;border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);transform:translateX(115%);transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.scene .site2 img{display:block;width:100%}
.scene .ph2{position:absolute;right:2%;bottom:6%;width:15%;border-radius:16px;border:5px solid #0A0A0B;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transform:translateY(130%);transition:transform 1.2s .3s cubic-bezier(.2,.7,.1,1)}
.scene.b2 .site2{transform:none}.scene.b2 .ph2{transform:none}
/* software beats */
.scene .zoomui{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity 1s var(--ease)}
.scene .zoomui img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 0;transform:scale(1);transform-origin:92% 15%;transition:transform 6s cubic-bezier(.3,.6,.2,1)}
.scene .zoomui .mk{opacity:0}
.scene.b2 .zoomui{opacity:1}.scene.b2 .zoomui img{transform:scale(1.55)}
.scene.b2 .zoomui .mk{opacity:0;transition:opacity .6s 1.2s}
.scene.b3 .zoomui .mk{opacity:1}
.scene .zoomui .mk{left:58%!important;top:8%!important;width:38%!important;height:58%!important}
/* personal composed site */
.psite{position:absolute;inset:0;background:#f7f5f1;overflow:hidden}
.pscroll{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:22px;padding-bottom:30px;transition:transform 7s cubic-bezier(.45,.05,.25,1)}
.scene.b2 .pscroll{transform:translateY(calc(-100% + clamp(460px,44vw,680px)))}
.ps-hero{position:relative;height:clamp(300px,30vw,440px);overflow:hidden}
.ps-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ps-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.75),rgba(10,10,11,.1) 60%)}
.ps-nav{position:absolute;left:0;right:0;top:0;display:flex;gap:22px;align-items:center;padding:18px 26px;color:#fff;z-index:2;font:500 13px/1 var(--sans)}
.ps-nav b{font:400 19px/1 var(--serif);margin-right:auto;letter-spacing:.02em}
.ps-h{position:absolute;left:26px;bottom:28px;margin:0;color:#fff;z-index:2;font:300 clamp(36px,3.6vw,56px)/1 var(--serif)}
.ps-h em{font-style:italic;color:#ff6b6b}
.ps-row{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding:6px 26px}
.ps-book{perspective:900px}
.ps-book .cover{width:120px;aspect-ratio:2/3;background:linear-gradient(160deg,#1b1b1d,#0A0A0B);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:14px 12px;transform:rotateY(-18deg);box-shadow:14px 18px 30px -12px rgba(0,0,0,.5);border-left:6px solid var(--red)}
.ps-book small{font:600 8px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.7}.ps-book b{font:400 19px/1.05 var(--serif)}
.ps-tx span,.ps-quiz span,.ps-talk span{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--act)}
.ps-tx p,.ps-quiz p,.ps-talk p{margin:8px 0;font:400 22px/1.2 var(--serif);color:var(--ink)}
.ps-tx i,.ps-talk i{font:italic 400 17px/1 var(--serif);border-bottom:1px solid var(--ink);color:var(--ink);padding-bottom:3px}
.ps-quiz{margin:0 26px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 20px 40px -26px rgba(0,0,0,.35)}
.ps-quiz .opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ps-quiz .opts em{font:400 15px/1.3 var(--sans);font-style:normal;border:1px solid #ddd;border-radius:8px;padding:11px 14px;color:#333}
.scene.b2 .ps-quiz .opts .pick{border-color:var(--ink);background:var(--ink);color:#fff;transition:all .4s 3.8s}
.ps-talk{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;padding:0 26px}
.ps-talk img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
@media (max-width:900px){
 .wstage{grid-template-columns:1fr}
 .wsel,.wcopy,.wprog{display:none!important}
 .wright{min-height:0;display:flex;flex-direction:column;gap:44px}
 .scene{position:relative;inset:auto;opacity:1;visibility:visible}
 .scene .mcopy{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
 .scene .media{position:relative;aspect-ratio:4/5}
 .scene .site2{width:78%;right:4%;top:6%}.scene .ph2{width:26%}
 .scene .ins{left:12px;right:12px;bottom:12px;max-width:none;font-size:14px;padding:12px 14px}
 .scene.b2 .pscroll{transform:translateY(-38%)}
 .ps-hero{height:240px}.ps-h{font-size:32px}.ps-nav span{display:none}
 .ps-talk{grid-template-columns:1fr}
}

/* ---------- H04 connected flow ---------- */
.flow{margin-top:clamp(28px,4vw,48px)}
.fstage{position:relative;aspect-ratio:16/8.2;border-radius:16px;overflow:hidden;background:#0B0B0C;box-shadow:0 50px 100px -50px rgba(0,0,0,.6)}
.fb{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),transform 1.1s var(--ease),visibility 0s .9s}
.fb.on{opacity:1;visibility:visible;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.fb.b1 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ftitle{position:absolute;left:5%;bottom:9%;color:#fff;display:flex;flex-direction:column;gap:6px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.ftitle small{font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.8}.ftitle b{font:300 clamp(36px,4vw,64px)/1 var(--serif)}
.fb.b1.out{transform:scale(.62) translate(-30%,-8%);opacity:0}
.fb.b2{background:#f7f4ef}
.pp{position:absolute;inset:0;display:flex;flex-direction:column}
.pp-nav{display:flex;gap:26px;align-items:center;padding:18px 4%;border-bottom:1px solid #e6e1d8;font:500 13px/1 var(--sans);color:#555}
.pp-nav b{font:400 18px/1 var(--serif);letter-spacing:.24em;color:var(--ink);margin-right:auto}
.pp-grid{flex:1;display:grid;grid-template-columns:1.15fr 1fr;min-height:0}
.pp-img{position:relative;overflow:hidden}.pp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fb.b2.on .pp-img img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.pp-tx{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:0 7%}
.pp-tx small{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#888}
.pp-t{margin:0;font:300 clamp(34px,3.6vw,56px)/1 var(--serif)}
.pp-d{margin:0;font:400 17px/1.5 var(--serif);color:#555;max-width:30ch}
.pp-buy{align-self:flex-start;background:var(--ink);color:#fff;font:600 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:16px 22px}
.pp-book{align-self:flex-start;font:italic 400 18px/1.2 var(--serif);border-bottom:1px solid var(--ink);padding-bottom:3px;transition:color .3s}
.fb.b2.click .pp-book{color:var(--act);border-color:var(--act)}
.pp .cur{position:absolute;width:26px;left:40%;top:80%;transition:left 1.4s cubic-bezier(.3,.7,.2,1),top 1.4s cubic-bezier(.3,.7,.2,1);z-index:4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.fb.b2.aim .cur{left:var(--cx,70%);top:var(--cy,70%)}
.fb.b3{background:#f7f4ef;display:grid;place-items:center}
.fm{width:min(460px,80%);background:#fff;border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.45);transform:translateY(30px);transition:transform 1s var(--ease)}
.fb.b3.on .fm{transform:none}
.fm-h{margin:0 0 4px;font:400 26px/1.1 var(--serif)}
.fm label{display:flex;flex-direction:column;gap:6px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#888}
.fm label span{display:block;min-height:44px;border:1px solid #ddd;border-radius:8px;padding:12px 14px;font:400 16px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.fm label span.typing::after{content:"";display:inline-block;width:1px;height:1em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.fm-btn{align-self:flex-start;background:var(--act);color:#fff;font:600 13px/1 var(--sans);padding:15px 22px;border-radius:4px;transition:background .3s}
.fb.b3.sent .fm-btn{background:var(--ink)}
.fb.b4{background:#0B0B0C;display:grid;place-items:center;gap:20px;align-content:center}
.mailx{width:min(520px,82%);background:#fff;border-radius:14px;padding:26px 28px;display:flex;flex-direction:column;gap:8px;transform:translateY(40px) scale(.96);opacity:0;transition:all 1s .2s var(--ease)}
.fb.b4.on .mailx{transform:none;opacity:1}
.mailx small{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#888}
.mx-h{margin:4px 0 0;font:400 28px/1.1 var(--serif)}.mailx p{margin:0;color:#444;font:400 16px/1.5 var(--serif)}
.crm{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.crm span{font:500 13px/1 var(--sans);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 14px;opacity:0;transform:translateY(8px);transition:all .5s var(--ease)}
.fb.b4.on .crm span{opacity:1;transform:none}.fb.b4.on .crm span:nth-child(2){transition-delay:.9s}.fb.b4.on .crm span:nth-child(3){transition-delay:1.6s}.fb.b4.on .crm span:nth-child(1){transition-delay:.4s}
.crm .ok{background:var(--act);border-color:var(--act)}
.fbar{display:flex;align-items:stretch;gap:16px;margin-top:16px}
.fbar ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.fbar li button{width:100%;text-align:left;background:none;border:0;border-top:2px solid var(--hair);padding:12px 0 0;cursor:pointer;display:flex;flex-direction:column;gap:4px;position:relative}
.fbar li button::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--red)}
.fbar li button.done::before{width:100%}
.fbar li button.cur::before{animation:fbfill var(--d,4s) linear forwards}
@keyframes fbfill{to{width:100%}}
.fbar b{font:400 20px/1.1 var(--serif)}.fbar small{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fbar li button.cur b{font-style:italic}
.fpause{align-self:center;background:none;border:1px solid rgba(10,10,11,.25);border-radius:999px;padding:10px 16px;font:500 13px/1 var(--sans);cursor:pointer;min-height:40px}
.flinks{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px}
@media (max-width:900px){.fstage{aspect-ratio:4/5}.pp-grid{grid-template-columns:1fr;grid-template-rows:1fr auto}.pp-tx{padding:18px 6% 22px;gap:8px}.pp-t{font-size:32px}.pp-d{font-size:15px}.pp-nav span{display:none}.fbar ol{grid-template-columns:1fr 1fr;row-gap:16px}.fbar{flex-direction:column}.fpause{align-self:flex-start}}

/* ---------- H05 cinematic ---------- */
.cine{background:#000;color:#fff;padding-top:clamp(56px,7vw,100px)}
.chead{max-width:880px;margin-bottom:clamp(28px,4vw,44px)}
.chead .h2x{font-size:clamp(40px,4.6vw,76px)}
.cine .eyebrow{color:#fff;opacity:.72}.cine .lead{color:var(--w72)}
.cinef{margin:0;border-radius:0!important;max-width:none}
.cinef video{width:100%;display:block;aspect-ratio:2.2/1;object-fit:cover;background:#000}
@media (max-width:760px){.cinef video{aspect-ratio:16/10}}

/* ---------- H06 ---------- */
.invite{max-width:900px;display:flex;flex-direction:column;gap:28px;padding-block:clamp(20px,3vw,40px);border-left:2px solid var(--red);padding-left:clamp(20px,3vw,40px)}
.invite .h2x{font-size:clamp(40px,4.6vw,72px)}
.mock .slot{grid-template-columns:minmax(0,1fr);justify-content:stretch;align-content:center}
.lk .mock .pic{aspect-ratio:16/9}
.lk .mock.beauty .body{padding-top:16px}
.lk .mock{height:100%}
.leaks{align-items:stretch}
.lk .mock.soft .body{flex:1}
.lk .mock.person{flex:1}.lk .mock.person .slot{flex:1}
@media (min-width:621px){.hx2 .stage .sq .cap{max-width:none;white-space:nowrap}}
.fstage{aspect-ratio:auto;height:clamp(420px,46vw,600px)}
@media (max-width:900px){.fstage{height:auto;aspect-ratio:4/5}}
.invite{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end}
.invite>.stack{grid-column:1}.invite>.cta-row{grid-column:2;justify-content:flex-start;padding-bottom:10px}
@media (max-width:900px){.invite{grid-template-columns:1fr}.invite>.cta-row{grid-column:1}}
.lk .mock.person{flex:none}.lk .mock.person .slot{flex:none;min-height:150px}
button,input,select,textarea{font-family:var(--sans)}
.hx2 .sq canvas.tv{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;z-index:2;filter:contrast(1.08) saturate(1.15)}
.hx2.pre .stage [data-slot]{visibility:visible}
.hx2.pre[data-opening=D] .stage [data-slot]{visibility:hidden}
/* studio line — fine label with rule */
.hx2 .stage .sq .cap{top:6%;bottom:auto;right:6%;left:auto;max-width:none;white-space:nowrap;font:600 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.hx2 .stage .sq .cap::before{content:"";display:inline-block;vertical-align:middle;width:34px;height:1px;background:rgba(255,255,255,.9);margin:-2px 14px 0 0}
@media (max-width:620px){.hx2 .stage .sq .cap{top:6%;right:6%;width:64%;white-space:normal;text-align:right;font-size:9px;line-height:1.7;letter-spacing:.2em}.hx2 .stage .sq .cap::before{width:18px;margin-right:8px}}
/* Home hero actions — Owner 2026-10-15 15:21 */
.hx2 .acts .btn.red{background:var(--ink);color:#fff}.hx2 .acts .btn.red:hover,.hx2 .acts .btn.red:focus-visible{background:var(--act)}
.hx2 .acts .link{text-decoration-color:var(--act);text-decoration-thickness:1.5px;transition:text-decoration-color .2s var(--ease)}.hx2 .acts .link:hover,.hx2 .acts .link:focus-visible{text-decoration-color:var(--ink)}
/* Owner 15:42 — underline under the words only; Hospitality & Restaurants (no page yet, so not a link) */
.hx2 .acts .link.arrow::after{content:"→";display:inline-block;margin-left:.3em;text-decoration:none}
.worlds span{font:500 14px/1 var(--sans);padding:8px 0;display:inline-flex;gap:8px;align-items:center}
.worlds span::before{content:"";width:9px;height:9px;background:var(--red)}
/* ---------- H02 restored: Attention is not the same as a sale ---------- */
.opp .ohead{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:baseline;margin-bottom:clamp(36px,5vw,72px)}
.opp .okick{font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.opp .ohead h2{margin:0;font:300 clamp(44px,5.6vw,84px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.opp .stop{color:var(--red)}
.ocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px)}
.oc{background:#fff;display:flex;flex-direction:column;min-width:0}
.oph{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-bottom:5px solid var(--ink)}
.ov{position:absolute;inset:0;display:none}
.ov img{width:100%;height:100%;object-fit:cover;display:block}
.ofr{position:absolute;border:2px solid var(--red);opacity:0;transform:scale(1.08);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.ofr b{position:absolute;left:-2px;bottom:100%;margin-bottom:0;background:var(--red);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px 7px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .45s .35s var(--ease),transform .45s .35s var(--ease)}
.oc.seen .ofr,.oc.seen .ofr b{opacity:1;transform:none}
.otx{padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:12px}
.ok{font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.otx h3{margin:0;font:400 clamp(28px,2.4vw,38px)/1.08 var(--serif);color:var(--ink)}
.otx h3 em{font-style:italic}
.otx p{margin:0;font:400 16px/1.6 var(--sans);color:#555}
@media (max-width:900px){.opp .ohead{grid-template-columns:1fr;gap:12px}.ocards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ofr,.ofr b{opacity:1;transform:none;transition:none}}
.opp .ohead{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.opp .ohead h2{font-size:clamp(38px,4.9vw,78px)}
@media (min-width:1100px){.opp .ohead h2{white-space:nowrap}}
.ofr[style*="left:77%"] b{left:auto;right:-2px}
.oph{aspect-ratio:1/1}
.ofr[style*="left:77%"] b{left:-2px;right:auto}
/* restored originals: 4:3 photos, single set */
.oph{aspect-ratio:4/3}
.ocards .ov{display:block}
.ov img{object-fit:cover}
.ofr.pv{border-radius:12px;background:#07070f;box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.ofr.pv .opv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;border-radius:10px}
.ofr.pv b{left:-2px}
.ocards .ov img{filter:grayscale(1) contrast(1.06)}
/* text treatment (Owner 17:51–17:53): "Attention is not" Signal Red at 450; "the same as a sale" italic; red full stop; "lost" red underline; first word of each card title red */
.opp .oc .stop{color:inherit}
.opp .ohead .hw1{color:var(--red);font-weight:450}
.opp .ohead .ht{font-style:italic}
.opp .ohead .stop{color:var(--red)}
.opp .okick{color:var(--ink)}
.opp .okick .ul{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.opp .otx h3 .fw{color:var(--red)}
.opp .ohead h2{font-size:clamp(36px,4.55vw,72px)}
/* card quotes: what the buyer feels, in their own words (Master §50–52) */
.otx .oq{margin:4px 0 0;padding:0}
.otx .oq p{margin:0;font:400 clamp(18px,1.35vw,20px)/1.45 var(--serif);color:#3a3a3e;text-indent:-.42em}
.otx .oq p{text-wrap:pretty}
/* moving line of examples (Owner 18:01–18:14): continuous, leftward, eases to a stop on hover; drag or swipe to move it by hand */
.ocards{display:block;overflow:hidden;container-type:inline-size;touch-action:pan-y;cursor:grab}
.ocards.drag{cursor:grabbing}
.ocards.drag *{user-select:none}
.ocards img{-webkit-user-drag:none;pointer-events:none}
.otrack{display:flex;gap:28px;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.odup{display:contents}
.otrack .oc{flex:0 0 calc((100cqw - 56px)/3)}
.onav{display:none}
/* mobile: stays sideways, two and a half cards in view, edge to edge */
@media (max-width:700px){
 .ocards{margin-inline:calc(50% - 50vw)}
 .otrack{gap:10px;padding-inline:10px}
 .otrack .oc{flex-basis:calc((100cqw - 30px)/2.5)}
 .opp .otx{padding:12px 11px 16px;gap:6px}
 .opp .ok{font-size:7.5px;letter-spacing:.12em}
 .opp .otx h3{font-size:17px;line-height:1.08}
 .opp .otx .oq p{font-size:12.5px;line-height:1.4}
 .opp .oph{border-bottom-width:3px}
 .opp .ofr{border-width:1.5px}
 .opp .ofr b{font-size:6.5px;letter-spacing:.1em;padding:4px 5px 3px;left:-1.5px}
}
/* reduced motion: a still row you scroll by hand; the next card is visibly cut at the edge and arrows say there is more */
@media (prefers-reduced-motion:reduce){
 .ocards{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:auto;touch-action:auto}
 .ocards::-webkit-scrollbar{display:none}
 .odup{display:none}
 .otrack .oc{scroll-snap-align:start;flex-basis:calc((100cqw - 84px)/3.35)}
 .onav{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
 .onav button{width:48px;height:48px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:400 20px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
 .onav button:hover,.onav button:focus-visible{background:var(--ink);color:#fff}
 .onav button:disabled{opacity:.25;cursor:default;background:transparent;color:var(--ink)}
}
@media (prefers-reduced-motion:reduce) and (max-width:700px){.otrack .oc{flex-basis:calc((100cqw - 30px)/2.5)}.onav{margin-top:16px;padding-inline:0}}
/* frames on the right half of a photo carry their label from the right edge, so it is never cut */
@media (max-width:900px){.opp .ohead{grid-template-columns:1fr;gap:14px}}
.ocards{position:relative}
.ofr{--bw:2px}
@media (max-width:700px){.ofr{--bw:1.5px}}
/* ---- reveal options for review (?fx=a|b|c) ---- */
/* A · Settle (the original): the frame settles in from slightly larger, then the flag rises */
.opp .ofr{transition:opacity .55s var(--ease),transform .8s var(--ease)}
.opp .ofr b{transition:opacity .45s .45s var(--ease),transform .45s .45s var(--ease)}
/* B · Draw: the red line draws itself around the problem, clockwise, then the flag slides out of the frame */
.opp[data-fx="b"] .ofr{border-color:transparent;opacity:1;transform:none;transition:none;
 background:linear-gradient(var(--red),var(--red)) 0 0/0 var(--bw) no-repeat,linear-gradient(var(--red),var(--red)) 100% 0/var(--bw) 0 no-repeat,linear-gradient(var(--red),var(--red)) 100% 100%/0 var(--bw) no-repeat,linear-gradient(var(--red),var(--red)) 0 100%/var(--bw) 0 no-repeat}
.opp[data-fx="b"] .ofr b{opacity:1;transform:none;transition:none;clip-path:inset(0 100% 0 0)}
.opp[data-fx="b"] .oc.seen .ofr{animation:odraw 1.1s cubic-bezier(.6,0,.3,1) forwards}
.opp[data-fx="b"] .oc.seen .ofr b{animation:oslide .5s 1.05s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes odraw{0%{background-size:0 var(--bw),var(--bw) 0,0 var(--bw),var(--bw) 0}
 25%{background-size:100% var(--bw),var(--bw) 0,0 var(--bw),var(--bw) 0}
 50%{background-size:100% var(--bw),var(--bw) 100%,0 var(--bw),var(--bw) 0}
 75%{background-size:100% var(--bw),var(--bw) 100%,100% var(--bw),var(--bw) 0}
 100%{background-size:100% var(--bw),var(--bw) 100%,100% var(--bw),var(--bw) 100%}}
@keyframes oslide{to{clip-path:inset(0 0 0 0)}}
/* C · Spotlight: the photo dims around the problem as the frame snaps on, then the flag types itself out */
.opp[data-fx="c"] .ofr{transform:none;box-shadow:0 0 0 200vmax rgba(10,10,12,0);transition:opacity .25s var(--ease),box-shadow .9s var(--ease)}
.opp[data-fx="c"] .oc.seen .ofr{box-shadow:0 0 0 200vmax rgba(10,10,12,.42)}
.opp[data-fx="c"] .ofr b{opacity:1;transform:none;transition:none;clip-path:inset(0 100% 0 0)}
.opp[data-fx="c"] .oc.seen .ofr b{animation:otype 1s .5s steps(16,end) forwards}
@keyframes otype{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.opp .ofr b{clip-path:none!important}.opp[data-fx="b"] .ofr{background-size:100% var(--bw),var(--bw) 100%,100% var(--bw),var(--bw) 100%!important}}
/* mobile (Owner 18:20): eyebrow above the headline, quotes a step smaller, arrows under the line */
@media (max-width:700px){
 .opp .ohead{margin-bottom:28px}
 .opp .otx .oq p{font-size:11.5px;line-height:1.38}
 .opp .otx h3{font-size:16px}
}
@media (max-width:360px){.opp .ofr b{font-size:6px;letter-spacing:.06em;padding:3px 4px 3px}}
/* arrows: shown in every mode; with motion they move the line on by one example */
.onav{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.onav button{width:48px;height:48px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:400 20px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s;padding:0}
.onav button:hover,.onav button:focus-visible{background:var(--ink);color:#fff}
.onav button:disabled{opacity:.25;cursor:default;background:transparent;color:var(--ink)}
@media (max-width:700px){.onav{margin-top:14px}.onav button{width:44px;height:44px;font-size:18px}}
/* Spotlight, twice as slow (Owner 18:26). C: the box and dimming first, then the label types itself out. D: box, dimming and label arrive together */
.opp[data-fx="c"] .ofr,.opp[data-fx="d"] .ofr{transform:none;box-shadow:0 0 0 200vmax rgba(10,10,12,0);transition:opacity .9s var(--ease),box-shadow 1.8s var(--ease)}
.opp[data-fx="c"] .oc.seen .ofr,.opp[data-fx="d"] .oc.seen .ofr{box-shadow:0 0 0 200vmax rgba(10,10,12,.42)}
.opp[data-fx="c"] .oc.seen .ofr b{animation:otype 2s 1.1s steps(16,end) forwards}
.opp[data-fx="d"] .ofr b{opacity:0;transform:none;clip-path:none;transition:opacity .9s var(--ease)}
.opp[data-fx="d"] .oc.seen .ofr b{opacity:1}
/* flag placement varies per example (Owner 18:27): above or below the box, left, centred or right; JS nudges it to stay inside the photo */
.opp .ofr b{width:max-content}
.opp .ofr.lb-tl b{left:calc(-1*var(--bw));right:auto;bottom:100%;top:auto}
.opp .ofr.lb-tc b{left:0;right:0;margin-inline:auto;bottom:100%;top:auto}
.opp .ofr.lb-tr b{left:auto;right:calc(-1*var(--bw));bottom:100%;top:auto}
.opp .ofr.lb-bl b{left:calc(-1*var(--bw));right:auto;top:100%;bottom:auto}
.opp .ofr.lb-bc b{left:0;right:0;margin-inline:auto;top:100%;bottom:auto}
.opp .ofr.lb-br b{left:auto;right:calc(-1*var(--bw));top:100%;bottom:auto}
@media (max-width:700px){.opp .ofr b{white-space:normal;max-width:calc((100cqw - 30px)/2.5 - 10px);line-height:1.35}}
/* W · Sweep (Owner 18:32): all examples at once; the spotlight, box and flag sweep in together, top-down on 1st/3rd/5th, bottom-up on 2nd/4th */
.olay{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.opp[data-fx="w"] .ofr{opacity:1;transform:none;transition:none;box-shadow:0 0 0 200vmax rgba(10,10,12,.42)}
.opp[data-fx="w"] .ofr b{opacity:1;transform:none;transition:none;clip-path:none}
.opp[data-fx="w"] .oc.down .olay{clip-path:inset(0 0 100% 0)}
.opp[data-fx="w"] .oc.up .olay{clip-path:inset(100% 0 0 0)}
.opp[data-fx="w"] .oc.seen .olay{clip-path:inset(0 0 0 0);transition:clip-path 1.6s cubic-bezier(.45,0,.2,1)}
@media (prefers-reduced-motion:reduce){.opp[data-fx="w"] .oc .olay{clip-path:none!important;transition:none!important}}
/* Hero: after the opening, the portrait turns black and white top to bottom and a white box marks the owner (Owner 18:45) */
.hx2 .hown{position:absolute;inset:0;z-index:4;overflow:hidden;clip-path:inset(0 0 100% 0);pointer-events:none}
.hx2 .hown.on{clip-path:inset(0 0 0 0);transition:clip-path 1.6s cubic-bezier(.45,0,.2,1)}
.hx2 .hown img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.hx2 .hfr{position:absolute;left:25%;top:5%;width:40%;height:37%;border:2px solid #fff;box-shadow:0 0 0 200vmax rgba(10,10,12,.32)}
.hx2 .hfr b{position:absolute;left:-2px;top:100%;background:#fff;color:var(--ink);font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px 7px;white-space:nowrap}
@media (max-width:700px){.hx2 .hfr{border-width:1.5px}.hx2 .hfr b{font-size:8px;padding:5px 6px 4px;left:-1.5px}}
@media (prefers-reduced-motion:reduce){.hx2 .hown.on{transition:none}}
/* the thread */
svg.thread{position:absolute;left:0;top:0;pointer-events:none;z-index:30;overflow:visible;opacity:0;transition:opacity .4s}
svg.thread.on{opacity:1}
svg.thread .tl,svg.thread .tw{fill:none;stroke:var(--red);stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter}
svg.thread .tw{stroke:#fff}
svg.thread .th path{fill:var(--red);stroke:none}
svg.thread .to{fill:#fff;stroke:none}
svg.thread .tm{display:none}
/* "Needs to sell" (Owner 19:23): a red flag where the line leaves her photo (Owner 19:16) */
.thr-flag{position:absolute;z-index:31;transform:translate(-50%,-50%) scale(.92);opacity:0;background:var(--red);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 11px 7px;white-space:nowrap;pointer-events:none;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.thr-flag.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:700px){.thr-flag{font-size:8px;padding:5px 7px 4px}}
@media (prefers-reduced-motion:reduce){.thr-flag{transition:none}}
/* red square: what we do (Owner 19:26, proposal 5) */
.hx2 .sq .svc{position:absolute;inset:0;color:#fff;pointer-events:none;z-index:3}

.svc.v5 .lb{position:absolute;left:56%;right:6%;top:34%;display:grid;gap:12px;justify-items:start}
.svc.v5 .lb b{background:#fff;color:var(--ink);font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px 7px}
.svc.v5 .lb b.r{background:var(--ink);color:#fff}
.svc.v5 .lb small{font:600 9px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin:-6px 0 0 2px}
.svc.v5 .lb b{color:var(--ink)}.svc.v5 .lb b.r{color:#fff}
.hx2 .sq .svc small{color:#fff}
.hx2 .sq .svc .lb b{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hx2 .sq .svc.on .lb b{opacity:1;transform:none}
.hx2 .sq .svc .lb small{opacity:0;transition:opacity .6s var(--ease)}.hx2 .sq .svc.on .lb small{opacity:.9}
.hx2 .sq .svc.on .lb b:nth-child(2){transition-delay:.12s}.hx2 .sq .svc.on .lb b:nth-child(3){transition-delay:.24s}.hx2 .sq .svc.on .lb b:nth-child(4){transition-delay:.36s}.hx2 .sq .svc.on .lb small{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.hx2 .sq .svc .lb b,.hx2 .sq .svc .lb small{opacity:1;transform:none;transition:none}}
@media (max-width:700px){.svc.v5 .lb{left:auto;right:5%;top:auto;bottom:6%;gap:7px;justify-items:end;width:38%}.svc.v5 .lb b{font-size:7.5px;padding:5px 6px 4px;letter-spacing:.12em;white-space:nowrap}.svc.v5 .lb small{font-size:7px;letter-spacing:.1em;text-align:right;margin:-3px 0 0}}
/* studio line (Owner 19:29): black, right above the red square, aligned to its right edge; typed out once the TV opening ends */
.hx2 .stage .stcap{position:absolute;right:0;bottom:calc(100% + 16px);margin:0;display:flex;align-items:center;gap:14px;white-space:nowrap;font:600 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);z-index:4}
.hx2 .stage .stcap::before{content:"";width:34px;height:1px;background:var(--ink);transform-origin:right;transform:scaleX(0);transition:transform .5s var(--ease)}
.hx2 .stage .stcap.on::before{transform:none}
.hx2 .stage .stcap .t{min-height:1em}
.hx2 .stage .stcap .k{display:inline-block;width:1px;height:1.1em;background:var(--red);margin-left:3px;vertical-align:-2px;animation:ocaret .9s steps(1) infinite}
@keyframes ocaret{50%{opacity:0}}
.hx2 .stage .stcap.pending .t{visibility:hidden}
@media (max-width:700px){.hx2 .stage .stcap{font-size:8px;letter-spacing:.16em;gap:8px;bottom:calc(100% + 10px)}.hx2 .stage .stcap::before{width:18px}}
@media (prefers-reduced-motion:reduce){.hx2 .stage .stcap::before{transform:none;transition:none}}
/* service labels type out with the studio line (Owner 19:33) */
.hx2 .sq .svc .lb b,.hx2 .sq .svc.on .lb b{opacity:1;transform:none;transition:none}
.hx2 .sq .svc .lb small,.hx2 .sq .svc.on .lb small{opacity:.9;transition:none}
.hx2 .sq .svc .lb b:empty,.hx2 .sq .svc .lb small:empty{visibility:hidden}
/* phone: the category list moves under the picture (Owner 19:33) */
@media (max-width:900px){.hx2 .grid12{row-gap:18px}.hx2 .tx{display:contents}.hx2 .tx>*{grid-column:1 / -1}.hx2 .stage{order:2;margin-top:44px}.hx2 .worlds{order:3;margin-top:40px}}

/* ===== 16 Oct 2026 (Olia): studio line as a corner cutout; light carousel arrows; the signature film ===== */
.hx2 .stage .sq{position:absolute}
.hx2 .stage .sq .stcap{position:absolute;top:0;right:0;bottom:auto;left:auto;margin:0;padding:15px 20px 14px;background:var(--ink);color:#fff;gap:0;z-index:4}
.hx2 .stage .sq .stcap::before{display:none}
@media (max-width:700px){.hx2 .stage .sq .stcap{padding:8px 10px 7px;font-size:8.5px;letter-spacing:.18em}}
.opp .wrap{position:relative}
.opp .onav{position:absolute;display:flex;justify-content:space-between;align-items:stretch;margin:0;padding:0;gap:0;pointer-events:none;z-index:6}
.opp .onav button{pointer-events:auto;width:120px;height:100%;border:0;padding:0;margin:0;display:flex;align-items:center;cursor:pointer;color:#fff;transition:opacity .25s;opacity:.9}
.opp .onav button[data-ostep="-1"]{justify-content:flex-start;padding-left:22px;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.opp .onav button[data-ostep="1"]{justify-content:flex-end;padding-right:22px;background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.opp .onav button:hover,.opp .onav button:focus-visible{opacity:1;background-color:transparent;color:#fff}
.opp .onav button:disabled{opacity:.25;background-color:transparent;color:#fff}
.opp .onav svg{width:22px;height:44px;display:block;overflow:visible}
@media (max-width:700px){.opp .onav button{width:44px}.opp .onav button[data-ostep="-1"]{padding-left:9px}.opp .onav button[data-ostep="1"]{padding-right:9px}.opp .onav svg{width:7.5px;height:15px}.opp .onav svg polyline{stroke-width:2.6}}
.pfilm{position:relative;background:#fff;padding:clamp(40px,6vw,96px) 0}
.pfilm .pf-box{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.pfilm .pf-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.pfilm .pf-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(10,10,11,.08);cursor:pointer;transition:opacity .7s var(--ease,ease)}
.pfilm .pf-cover.gone{opacity:0;pointer-events:none}
.pfilm .pf-line{margin:0;padding:0 6%;text-align:center;font:300 clamp(30px,4.6vw,76px)/1.08 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.pfilm .pf-line em{font-style:italic}
.pfilm .pf-line .w{display:inline-block;opacity:0;transform:translateY(.3em);filter:blur(8px);transition:opacity .8s,transform .8s,filter .8s}
.pfilm .pf-cover.on .pf-line .w{opacity:1;transform:none;filter:none}
.pfilm .pf-dot{display:inline-block;width:.2em;height:.2em;margin-left:.06em;border-radius:50%;background:#FF2E2E;box-shadow:0 0 .25em .06em rgba(255,46,46,.4);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.pfilm .pf-cover.dot .pf-dot{transform:scale(1)}
.pfilm .pf-mute{position:absolute;right:20px;bottom:18px;width:44px;height:44px;padding:9px;border:0;background:none;color:#fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.35));cursor:pointer;z-index:3;opacity:0;transition:opacity .4s}
.pfilm .pf-box.playing .pf-mute{opacity:.92}
.pfilm .pf-mute svg{width:26px;height:26px;display:block}
.pfilm .pf-mute .m-on{display:none}.pfilm .pf-mute[aria-pressed="true"] .m-on{display:inline}.pfilm .pf-mute[aria-pressed="true"] .m-off{display:none}
@media (max-width:700px){.pfilm .pf-mute{right:8px;bottom:6px}}

/* 16 Oct 2026 (Olia): start a project — the choices look like the film's final page */
.choices.v66{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.choices.v66 label{position:relative;display:block;padding:22px 52px 22px 22px;min-height:132px;border:1.5px solid rgba(10,10,11,.16);background:#fff;font:300 25px/1.12 var(--serif);color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.choices.v66 label small{display:block;margin-top:10px;font:400 13.5px/1.45 var(--sans);color:var(--ink-64)}
.choices.v66 input{-webkit-appearance:none;appearance:none;position:absolute;right:18px;top:20px;width:22px;height:22px;margin:0;border:1.5px solid rgba(10,10,11,.3);border-radius:50%;background:#fff;cursor:pointer}
.choices.v66 input:checked{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 4px #fff}
.choices.v66 label:has(input:checked){border-color:var(--red);background:rgba(255,46,46,.05);box-shadow:0 14px 40px rgba(255,46,46,.14)}
.choices.v66 label:hover{border-color:rgba(10,10,11,.45)}
.formcard legend em{font-style:italic}
@media (max-width:700px){.choices.v66 label{min-height:0;font-size:22px;padding:18px 48px 18px 18px}}

/* 16 Oct 2026 (Olia, 17:52): the film's cover is the industries screen with "Let's look at an example."; it ends on the same screen without it */
.pfilm .pf-cover{background:#fff;border:0}
.pfilm .pf-cover img,.pfilm .pf-end img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pfilm .pf-end{position:absolute;inset:0;z-index:2;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s}
.pfilm .pf-end.on{opacity:1;pointer-events:auto}
.pfilm .pf-v{cursor:pointer}
/* 16 Oct 2026 (Olia): footer — studio line under the logo, no copy buttons, no founder heading */
.ft .ft-tag{margin:14px 0 0;font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ft .social{border-top:1px solid var(--w14)}
/* 16 Oct 2026 (Olia): menu = What we do (hero) · Who we help (film) · How we work (section before the form). No dropdowns. */
.pf-box .pf-play{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(12px,2vw,22px);width:clamp(26px,2.6vw,38px);height:clamp(26px,2.6vw,38px);color:var(--red);pointer-events:none;transition:transform .3s,opacity .3s}
.pf-box .pf-play svg{width:100%;height:100%;display:block}
.pf-box:hover .pf-play{transform:scale(1.12)}
.pf-box.playing .pf-play,.pf-cover.gone~.pf-play{opacity:0}
.pf-cover{cursor:pointer}
.pfilm .pf-worlds{justify-content:space-between;margin-top:22px;border-top:0;padding-top:0}
.pfilm .pf-worlds a,.pfilm .pf-worlds span{font:400 clamp(17px,1.5vw,22px)/1.2 var(--serif)}
.ft .cols span.nl{display:block;padding:6px 0;font:400 16px/1.3 var(--sans);color:rgba(255,255,255,.72)}
#how .how-head{margin-bottom:clamp(40px,5vw,64px);row-gap:18px}
#how .how-lead{grid-column:9 / span 4;align-self:end;margin:0;font:400 clamp(19px,1.5vw,22px)/1.5 var(--serif);color:rgba(255,255,255,.82)}
.track.t7{grid-template-columns:repeat(7,1fr)}
#how .oneq{margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--w14);display:grid;grid-template-columns:repeat(12,1fr);gap:18px 24px;align-items:start}
#how .oneq .kick{grid-column:1/-1;color:rgba(255,255,255,.6)}
#how .oneq-q{grid-column:1 / span 6;margin:0;font:300 clamp(30px,3.4vw,52px)/1.08 var(--serif);letter-spacing:-.02em}
#how .oneq-q em{font-style:italic;font-weight:400}
#how .oneq ul{grid-column:8 / span 5;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
#how .oneq li{display:flex;gap:10px;align-items:baseline;font:400 clamp(17px,1.3vw,19px)/1.35 var(--sans);color:#fff}
#how .oneq li::before{content:"";flex:0 0 9px;height:9px;background:var(--red);transform:translateY(-1px)}
@media (max-width:1180px){.track.t7{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){#how .how-head>*{grid-column:1/-1!important}#how .oneq-q,#how .oneq ul{grid-column:1/-1}}
@media (max-width:560px){.track.t7{grid-template-columns:1fr}#how .oneq ul{grid-template-columns:1fr}.pfilm .pf-worlds{justify-content:flex-start;gap:4px 18px}.pfilm .pf-worlds a,.pfilm .pf-worlds span{font-size:16px}}
.pf-box .pf-play{z-index:4}
.pfilm .pf-worlds{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;gap:8px}
@media (max-width:560px){.pfilm .pf-worlds{grid-template-columns:1fr 1fr;justify-items:start}}
@media (max-width:560px){.pfilm .pf-worlds a,.pfilm .pf-worlds span{font-size:15px}.pfilm .pf-worlds{margin-top:16px}}
/* 16 Oct 2026 18:25 (Olia): on the phone the header never sits on top of the text — it slides away while you read down and comes back when you scroll up. Solid white, no see-through. */
@media (max-width:900px){.hd{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.hd.away{transform:translateY(-101%)}}
/* How we work: the one question sits in a red block so the section does not read as one long black page */
#how .oneq{background:var(--red);color:#fff;border-top:0;padding:clamp(28px,4vw,56px);margin-top:clamp(48px,6vw,88px)}
#how .oneq .kick{color:rgba(255,255,255,.85)}
#how .oneq li::before{background:#fff}
/* Phone: the seven steps run left to right as a swipe row, like on the desktop line */
@media (max-width:700px){
 #how .track.t7{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:calc(-1 * var(--gR,20px));padding-right:var(--gR,20px);row-gap:0}
 #how .track.t7::-webkit-scrollbar{display:none}
 #how .track.t7 .step{flex:0 0 74%;display:flex;flex-direction:column;gap:10px;padding:0 18px 4px 0;scroll-snap-align:start}
 #how .track.t7 .step::after{content:"";position:absolute;left:36px;right:0;top:17px;height:2px;background:var(--red);opacity:.55}
 #how .track.t7 .step:last-child::after{display:none}
 #how .track.t7 .step h4{margin:8px 0 0}
 #how .swipe{display:block;margin-top:14px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
 #how .oneq{margin-left:calc(-1 * var(--gL,20px));margin-right:calc(-1 * var(--gR,20px));padding:32px var(--gR,20px) 36px var(--gL,20px)}
 #how .oneq ul{gap:12px}
 #how .how-head{margin-bottom:32px}
}
#how .swipe{display:none}
@media (max-width:700px){#how .swipe{display:block}}
/* 16 Oct 18:30 (Olia): a clear play button — black circle, white triangle — right after "Let's look at an example." On the end frame it sits centred under the industries. */
.pf-box .pf-play{left:73%;top:83.6%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:clamp(40px,5.4vw,76px);height:clamp(40px,5.4vw,76px);border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.pf-box .pf-play svg{width:52%;height:52%;transform:translateX(6%)}
.pf-box:hover .pf-play{transform:translate(-50%,-50%) scale(1.08)}
.pf-box:has(.pf-end.on) .pf-play{left:50%}
/* phone: the red block closes the section, no black strip under it */
@media (max-width:700px){#how{padding-bottom:0}}
@media (max-width:700px){.pf-box .pf-play{width:30px;height:30px;left:74%}}
/* 16 Oct 18:35 (Olia): start form — short choices, email under the form on the right */
.form-mail{margin:16px 0 0;text-align:right;font:400 15px/1.4 var(--sans);color:var(--ink-64)}
.form-mail a{color:var(--ink);text-underline-offset:4px}

/* footer: studio line in two lines */
.ft .ft-tag{line-height:1.55}
.ft .cols span.nl{color:#fff}

/* 16 Oct 19:35 (Olia): industries row under the film removed; play button sits in the middle and breathes */
.pf-box .pf-play{left:50%!important;top:76.7%!important;width:clamp(30px,3.7vw,56px)!important;height:clamp(30px,3.7vw,56px)!important;transform:translate(-50%,-50%)!important;background:var(--ink);box-shadow:0 0 0 0 rgba(10,10,11,.35);animation:pfPulse 2.4s ease-out infinite}
.pf-box:hover .pf-play{transform:translate(-50%,-50%) scale(1.06)!important}
@keyframes pfPulse{0%{box-shadow:0 0 0 0 rgba(10,10,11,.38)}70%{box-shadow:0 0 0 14px rgba(10,10,11,0)}100%{box-shadow:0 0 0 0 rgba(10,10,11,0)}}

.pf-box:has(.pf-end.on) .pf-play{top:76.7%!important}
@media (max-width:700px){.pf-box .pf-play{width:22px!important;height:22px!important;top:75.4%!important;animation-name:pfPulseS}}
@keyframes pfPulseS{0%{box-shadow:0 0 0 0 rgba(10,10,11,.38)}70%{box-shadow:0 0 0 7px rgba(10,10,11,0)}100%{box-shadow:0 0 0 0 rgba(10,10,11,0)}}

/* 17 Oct 2026 (Olia): opening film between the hero and "Attention is not the same as a sale." Cover = MARKETING. / SALES. (0:06.6);
   white play button on the film's red line. The red thread runs into the film along that line to the play button, fades inside the
   frame while the film plays, and after a pause, the end or scrolling past continues out to the right and down to "lost". */
.pfo .pf-cover{background:#000}
.pfo .pf-box .pf-play{left:50%!important;top:50%!important;background:#fff!important;color:var(--ink)!important;z-index:31;animation:pfPulseW 2.4s ease-out infinite!important}
@keyframes pfPulseW{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.pfo .thr-in{position:absolute;left:0;top:50%;width:1px;height:1px;pointer-events:none}
.thread .mbox{opacity:0;transition:opacity .6s ease}.thread .mbox.on{opacity:1}
@media (max-width:700px){.pfo .pf-box .pf-play{animation:pfPulseWS 2.4s ease-out infinite!important}}
@keyframes pfPulseWS{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
.pfo .pf-box:has(.pf-end.on) .pf-play{top:50%!important;left:50%!important}

/* 2026-10-17 · How we work: the one question as its own white panel inside the black section, set like the hero (Olia).
   Left: the promise; right: the question. Both centred. */
#how .oneq.oneq-w{background:#fff;color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;padding:clamp(40px,5vw,80px) clamp(28px,4vw,64px);border:0}
#how .oneq-w .oneq-l{margin:0;padding-right:clamp(24px,4vw,64px);text-align:center;font:400 clamp(22px,2.1vw,32px)/1.3 var(--serif);color:var(--ink);border-right:1px solid rgba(10,10,11,.14);align-self:stretch;display:flex;align-items:center;justify-content:center;text-wrap:balance}
#how .oneq-w .oneq-q{grid-column:auto;margin:0;padding-left:clamp(24px,4vw,64px);text-align:center;color:var(--ink);font:300 clamp(34px,3.6vw,58px)/1.06 var(--serif);letter-spacing:-.02em}
#how .oneq-w .oneq-q em{font-style:italic;font-weight:400;color:var(--ink)}
#how .oneq-w .stop{color:var(--red)}
@media (max-width:900px){#how .oneq.oneq-w{grid-template-columns:1fr;row-gap:22px}#how .oneq-w .oneq-l{border-right:0;padding:0 0 22px;border-bottom:1px solid rgba(10,10,11,.14)}#how .oneq-w .oneq-q{padding:0}}
@media (max-width:700px){#how .oneq.oneq-w{margin-left:0;margin-right:0;padding:32px 20px 36px}#how.sec{padding-bottom:48px}}
/* 2026-10-17 · How we work: five steps as frames (Olia, option 4). Computer: frames side by side, one open. Phone: the frames go down.
   The open frame is red with white words; its number is solid white (a faded number on red was hard to read). "Fix the leaks" is open by default. */
#how .hframes{list-style:none;margin:0;padding:0;display:flex;gap:10px;height:clamp(360px,30vw,430px)}
#how .hf{position:relative;flex:1 1 0;min-width:0;background:#151517;border:1px solid rgba(255,255,255,.09);padding:24px 20px;overflow:hidden;cursor:pointer;outline:0;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),background-color .35s,border-color .35s}
#how .hf .n{display:block;font:300 clamp(54px,5vw,76px)/1 var(--serif);color:var(--red);letter-spacing:-.02em}
#how .hf h4{position:absolute;left:20px;bottom:24px;margin:0;font:400 clamp(22px,1.8vw,27px)/1.1 var(--serif);color:rgba(255,255,255,.85);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
#how .hf p{position:absolute;left:24px;right:24px;bottom:26px;margin:0;font:400 clamp(18px,1.45vw,21px)/1.4 var(--serif);color:#fff;opacity:0;transition:opacity .3s}
#how .hf:hover:not(.on),#how .hf:focus-visible:not(.on){border-color:rgba(255,255,255,.3)}
#how .hf.on{flex-grow:2.7;background:var(--red);border-color:var(--red);cursor:default}
#how .hf.on .n{color:#fff}
#how .hf.on h4{position:static;writing-mode:horizontal-tb;transform:none;white-space:normal;color:#fff;font-size:clamp(30px,2.6vw,40px);margin-top:16px}
#how .hf.on p{opacity:1;transition-delay:.2s}
@media (max-width:700px){
 #how .hframes{flex-direction:column;height:auto;gap:8px}
 #how .hf{flex:none;display:flex;align-items:center;gap:16px;padding:0 18px;height:64px}
 #how .hf .n{font-size:30px;width:42px;flex:none}
 #how .hf h4{position:static;writing-mode:horizontal-tb;transform:none;font-size:21px;white-space:normal}
 #how .hf p{display:none}
 #how .hf.on{display:block;height:auto;padding:20px 20px 24px}
 #how .hf.on .n{font-size:50px}#how .hf.on h4{font-size:30px;margin-top:10px}#how .hf.on p{display:block;position:static;margin-top:12px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){#how .hf,#how .hf p{transition:none}}