/* the shell's base rules (the artifact's build() inlined these); hub article HTML carries its own <img> tags */
body{margin:0}img{max-width:100%}[hidden]{display:none!important}.art img{height:auto;display:block;margin:24px 0}
/* OLS home · one long page that scrolls like a page. Open Sans + one PT Serif italic accent, ink #220925, outline pills,
   the deck's numbered rules and soft gradient fields. Things sit at different depths and drift at their own rate. */
:root{--ink:#220925;--white:#ffffff;--mist:#f6f8fc;--lilac:#e9ecf5;--peach:#f9f4f1;--sky:#c5d7f4;--blue:#5d87a1;--steel:#a9c7df;--muted:#5b6478;
 --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'PT Serif',Georgia,serif;
 --vh:100vh;--gut:clamp(24px,5vw,88px);
 --hero:min(clamp(38px,3.9vw,70px),calc(var(--vh)*.08));
 --h1:min(clamp(34px,3.4vw,60px),calc(var(--vh)*.075));
 --xl:min(clamp(44px,5vw,92px),calc(var(--vh)*.11));
 --h2:min(clamp(28px,2.6vw,46px),calc(var(--vh)*.06));
 --lead:clamp(17px,1.22vw,21px);--body:clamp(15px,.98vw,17px);
 --phoneH:min(calc(var(--vh) * .64),560px,38vw);color-scheme:light;scroll-behavior:smooth}
*{box-sizing:border-box}
html{background:#eef2f8}
body{margin:0;background:#eef2f8;color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
p,h1,h2,h3{margin:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em;background:linear-gradient(transparent 58%, rgba(197,215,244,.9) 58%, rgba(197,215,244,.9) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;padding:0 .06em}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.7vw,28px);padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));max-width:calc(1280px + 2 * var(--gut));margin:0 auto;width:100%}

.hero-h{font-size:var(--hero);line-height:1.1;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:var(--h1);line-height:1.12;font-weight:500;letter-spacing:-.018em;text-wrap:balance}
.xl{font-size:var(--xl);line-height:1.02;font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.h2{font-size:var(--h2);line-height:1.15;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.stat{font-size:min(clamp(64px,7vw,128px),calc(var(--vh)*.14));line-height:.95;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lead{font-size:var(--lead);line-height:1.6}
.body{font-size:var(--body);line-height:1.62}
.meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--blue)}
.pill{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1px solid var(--ink);border-radius:99px;font-size:13px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;align-self:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:99px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-weight:500;font-size:15px;white-space:nowrap;transition:background .35s,color .35s}
.btn:hover{background:var(--ink);color:#fff}
.more{display:inline-flex;align-items:center;gap:10px;font-size:var(--body);font-weight:500;padding-bottom:4px;position:relative}
.more:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.more svg{width:18px;height:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.more:hover svg{transform:translateX(6px)}
.more:hover:after{transform:scaleX(1)}
.need{border:2px dashed #a43c88;background:#fdf4fa;color:#6d2459;font-size:12px;line-height:18px;padding:10px 14px;font-weight:400}
.need b{letter-spacing:.1em;font-size:10px;display:block;margin-bottom:2px}
.fill{width:100%;height:100%;object-fit:cover;display:block}
#hero .btn{background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
[data-lines]{position:relative;z-index:0}
[data-lines]:before{content:'';position:absolute;z-index:-1;inset:-.12em -.5em;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);clip-path:var(--clip,none);-webkit-clip-path:var(--clip,none)}
[data-lines] .ln{display:block;width:max-content;max-width:calc(100% + .4em);padding:0 .2em;margin:0 -.2em;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3) .9em,rgba(255,255,255,.3) calc(100% - .9em),rgba(255,255,255,0))}
[data-lines] em{white-space:nowrap;line-height:.95}
.vph{background:linear-gradient(120deg,#e3edef,#ecf3fa 50%,#dbe7fa);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;width:100%;height:100%}
section{position:relative}
.sec{padding-block:clamp(72px,12vh,150px)}
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:100;height:84px;background:transparent;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s;will-change:transform}
header.away{transform:translateY(-110%);opacity:0}
header nav a{display:inline-flex;gap:8px;align-items:baseline;position:relative;padding-bottom:6px}
header nav a i{font-style:italic;font-family:var(--serif);font-size:12px;color:var(--blue)}
header nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
header nav a:hover:after,header nav a.is:after{transform:scaleX(1)}
#bg{position:fixed;inset:0;z-index:0;background:#eef2f8}
#wm{position:fixed;left:max(var(--gut),env(safe-area-inset-left,0px));right:0;bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:0;pointer-events:none;height:0;overflow:visible}
#wm span{position:absolute;left:0;bottom:0;transform:translate(0,.12em);white-space:nowrap;font-family:var(--sans);font-weight:800;font-size:clamp(84px,13.3vw,238px);line-height:1;letter-spacing:-.045em;color:var(--ink);opacity:0;transition:opacity .9s ease;will-change:transform,opacity}
#wm span.on{opacity:.045}
#content{position:relative;z-index:1}
/* deck device: numbered rule as a section opener */
.rule{grid-column:1 / -1;display:flex;align-items:center;gap:18px;margin-bottom:clamp(8px,1.6vh,16px)}
.rule .num{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--blue)}
.rule .lab{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.rule .lab + .lab{margin-left:auto;color:var(--muted);font-weight:400}
.circ{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;border:1px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:.5em;font-weight:400;vertical-align:.35em;margin-right:.1em}
/* hero */
#hero{height:calc(var(--vh) * 2.3);z-index:5}
#hero .pin{position:sticky;top:0;height:var(--vh);z-index:4}
#hero .pin>.grid{z-index:4;pointer-events:none}
#hero .pin>.grid a{pointer-events:auto}
#reel{position:absolute;left:0;top:0;width:100%;height:calc(var(--vh) * 1.8);display:block;z-index:3;pointer-events:none}
/* clients: sticky, short */
#clients{height:calc(var(--vh) * 1.8)}
#clients .pin{position:sticky;top:0;height:var(--vh);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,36px);padding-top:84px}
.lrow{display:flex;gap:clamp(40px,5vw,90px);align-items:center;width:max-content;will-change:transform;padding-block:clamp(6px,1.2vh,12px)}
.lrow img{height:clamp(36px,3.6vw,68px);width:auto;max-width:clamp(130px,11vw,210px);object-fit:contain;flex:none;will-change:transform,opacity,filter}
.feats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,56px);align-items:center}
.feat{display:flex;align-items:center;justify-content:flex-start;height:clamp(56px,7vh,96px);will-change:transform}
.feat img{max-height:100%;max-width:100%;width:auto;height:clamp(40px,4.4vw,80px);object-fit:contain}
/* the rail: copy flows left, one phone sticks right */
.rail{align-items:start;max-width:calc(1480px + 2 * var(--gut))}
.rail-l{grid-column:1 / -1;grid-row:1;display:flex;flex-direction:column}
.blk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.7vw,28px);align-content:center}
.blk>.in{grid-column:2 / span 4;display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px)}
.blk.r>.in{grid-column:8 / span 4}
.rail-r{grid-column:1 / -1;grid-row:1;position:relative;align-self:stretch;pointer-events:none}
.rail-r .stick{position:sticky;top:calc(58vh - var(--phoneH) * .5);height:var(--phoneH);will-change:transform}
.rail-r .phone{position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:auto}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.thread.front{z-index:7}
.spl{position:absolute;inset:0;pointer-events:none;z-index:6}
.spl a{position:absolute;pointer-events:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);white-space:nowrap;transform:translateY(-50%);opacity:.32;transition:opacity .3s,font-weight .2s}
.spl a.l{transform:translate(-100%,-50%);padding-right:16px}
.spl a.r{padding-left:16px}
.spl a.past{opacity:.6}
.spl a.is{opacity:1;font-weight:700}
.spl a:hover{opacity:1}
#content>section,#content>.rail{position:relative;z-index:1}
#edgenav a{position:fixed;z-index:100;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);opacity:0;transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none;padding:8px 14px}
#edgenav a.on{opacity:.38;pointer-events:auto}
#edgenav a.top{top:calc(78px + env(safe-area-inset-top,0px));transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.2,1),top .55s cubic-bezier(.2,.7,.2,1)}
#edgenav.up a.top{top:env(safe-area-inset-top,0px)}
#edgenav a.bot{bottom:env(safe-area-inset-bottom,0px)}
#subbar{bottom:auto!important;top:calc(116px + env(safe-area-inset-top,0px));transition:top .55s cubic-bezier(.2,.7,.2,1)}
#subbar.up{top:calc(44px + env(safe-area-inset-top,0px))}
#edgenav a i{display:block;width:5px;height:5px;border-radius:50%;background:var(--ink)}
#edgenav a.page i{background:none;border:1.5px solid var(--ink);width:7px;height:7px}
.chips{display:flex;gap:10px;flex-wrap:wrap}.chips a{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;border:1px solid rgba(34,9,37,.25);font-size:14px;color:var(--ink);text-decoration:none;transition:background .3s,color .3s,border-color .3s}.chips a.is,.chips a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}.wcard{display:block;text-decoration:none;color:inherit}.wcard .fimg{overflow:hidden;background:rgba(255,255,255,.4)}.wcard .fimg img{width:100%;height:100%;object-fit:cover;display:block}.wcard .meta{display:block;margin-top:18px}.wcard .h2{margin:8px 0 0}.wcard .lead{margin:8px 0 0}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}@media(max-width:900px){.wgrid,.fgrid{grid-template-columns:1fr}}
.collage{position:relative;width:100%}.collage .cp{position:absolute;will-change:transform}.collage .cp img{display:block;width:100%;height:auto;border:5px solid #fff;box-sizing:border-box;box-shadow:0 16px 34px rgba(34,9,37,.2)}.collage .cd{position:absolute;will-change:transform;z-index:9}.collage .cd img{display:block;width:100%;height:auto;border-radius:50%;border:4px solid #fff;box-sizing:border-box;box-shadow:0 12px 26px rgba(34,9,37,.22)}.collage .dd{position:absolute;will-change:transform;pointer-events:none}.collage .dd svg{width:100%;height:auto;display:block;overflow:visible}.collage .dd.bg{z-index:0;opacity:.9}.collage .dd.fg{z-index:10}.star{position:absolute;width:56px;height:56px;will-change:transform;pointer-events:none}.star.bg{opacity:.55}.star svg{width:100%;height:100%;display:block;overflow:visible}

/* stream rows: media one side, copy the other, alternating; sized to the screen */
.srow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.7vw,28px);align-items:center;min-height:calc(var(--vh) * .72);padding-block:clamp(24px,5vh,56px)}
.srow .sm{grid-column:1 / span 6;position:relative}.srow .sc{grid-column:8 / span 5;display:flex;flex-direction:column;gap:clamp(14px,2.2vh,24px)}
.srow.r .sm{grid-column:7 / span 6;grid-row:1}.srow.r .sc{grid-column:1 / span 5;grid-row:1}
.sm .fr{height:min(calc(var(--vh) * .62),560px);max-width:100%;margin:0 auto;will-change:transform}.sm .fr.sq{aspect-ratio:1/1}.sm .fr.tall{aspect-ratio:4/5}.sm .fr.wide{aspect-ratio:4/3;height:min(calc(var(--vh) * .52),460px)}
.srow.r .sm .fr{margin-right:0}.srow:not(.r) .sm .fr{margin-left:0}
/* feed: a dated stream, entries alternate either side of the spine */
.feed{display:grid;grid-template-columns:5fr 2fr 5fr;column-gap:clamp(16px,1.7vw,28px);align-items:start}
.fcol{display:flex;flex-direction:column;gap:clamp(64px,16vh,180px)}.fcol.r{grid-column:3;padding-top:clamp(80px,14vh,140px)}
.fe{display:flex;flex-direction:column;gap:14px}
.fe.post{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(14px,1.6vw,24px);align-items:start}.fe.post .ft{display:flex;flex-direction:column;gap:12px}
.fe.r.post .fpi2{order:2}
.fpi2{aspect-ratio:4/5;overflow:hidden;background:var(--mist);box-shadow:0 20px 50px rgba(34,9,37,.12);will-change:transform}.fe.work .fpi2{aspect-ratio:4/3}
.fe .date{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue)}.fe .date b{color:var(--ink);font-weight:600;margin-left:10px}
.fe .ftitle{font-size:clamp(20px,1.7vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.012em;text-wrap:balance}.fe.work .ftitle{font-size:var(--h2)}
.fe.note{border-top:1px solid rgba(34,9,37,.16);padding-top:22px}
.feedmore{grid-column:1 / -1;display:flex;justify-content:center;padding-block:clamp(24px,5vh,56px)}
/* people */
.people{grid-column:1 / -1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(14px,1.8vw,28px) clamp(12px,1.4vw,22px)}
.person{display:flex;flex-direction:column;gap:10px}.person .ph{aspect-ratio:333/417;border-radius:4px;background:var(--mist) no-repeat 0 0 / 300% 100%;box-shadow:0 14px 34px rgba(34,9,37,.12);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}.person:hover .ph{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 24px 44px rgba(34,9,37,.2);animation:faces 1.2s steps(1) infinite}@keyframes faces{0%{background-position:0 0}34%{background-position:50% 0}67%{background-position:100% 0}}
.person b{font-weight:500;font-size:var(--body)}.person span{font-size:13px;color:var(--muted);line-height:1.4}
.values{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);align-items:stretch}.values>div{display:flex;flex-direction:column;gap:14px;padding-top:22px;position:relative;min-height:calc(var(--vh) * .34)}.values .rl{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden}.values .rl i{display:block;height:100%;background:var(--ink);will-change:transform}.values .n{font-family:var(--serif);font-style:italic;color:var(--blue);font-size:clamp(28px,2.6vw,44px);line-height:1}.values .w{font-size:var(--h2);font-weight:500;letter-spacing:-.015em;line-height:1.05}.values .how{margin-top:auto;padding-top:14px;border-top:1px dashed rgba(34,9,37,.18);font-size:13px;line-height:1.5;color:var(--muted)}.values .how b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:4px}.values>div:hover .n{color:#ea3d84}
.tl{display:flex;flex-direction:column}.tl>div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding-block:18px;border-top:1px solid rgba(34,9,37,.14)}.tl>div:last-child{border-bottom:1px solid rgba(34,9,37,.14)}.tl .y{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--blue)}
.photo{position:relative;will-change:transform}.photo img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(34,9,37,.16))}
.logos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(28px,5vh,64px) clamp(16px,2vw,36px);align-items:center}.logos>div{display:flex;align-items:center;justify-content:center;height:clamp(40px,4.4vw,80px)}.logos img{height:clamp(36px,3.6vw,68px);width:auto;max-width:clamp(130px,11vw,210px);object-fit:contain}
.form{display:flex;flex-direction:column;gap:16px}.form label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue)}.form input,.form textarea{font:inherit;font-size:var(--lead);font-weight:300;color:var(--ink);background:rgba(255,255,255,.55);border:0;border-bottom:1px solid rgba(34,9,37,.35);padding:12px 2px;outline:0;border-radius:0}.form input:focus,.form textarea:focus{border-bottom-color:var(--ink)}.form textarea{min-height:120px;resize:vertical}
.art{display:flex;flex-direction:column;gap:22px;max-width:40em}.art h3{font-size:var(--h2);font-weight:500;letter-spacing:-.015em;margin-top:14px}
@media(max-width:900px){.srow .sm,.srow .sc,.srow.r .sm,.srow.r .sc{grid-column:1 / -1;grid-row:auto}.feed{grid-template-columns:1fr}.fcol.r{grid-column:1;padding-top:0}.people{grid-template-columns:repeat(3,1fr)}.values{grid-template-columns:1fr 1fr}.logos{grid-template-columns:repeat(3,1fr)}}
/* page-to-page: the old page lifts away and the new one rises in (the artifact's .leave/.enter, now via the View Transitions API; browsers without it just navigate) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-leave .26s ease both}::view-transition-new(root){animation:vt-enter .26s ease both}
@keyframes vt-leave{to{opacity:0;transform:translateY(-28px)}}@keyframes vt-enter{from{opacity:0;transform:translateY(28px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
#edgenav a:hover{opacity:1;transform:translateX(-50%) scale(1.25)}
#edgenav a.top:hover{transform:translateX(-50%) translateY(6px) scale(1.25)}
#edgenav a.bot:hover{transform:translateX(-50%) translateY(-6px) scale(1.25)}
#subbar{position:fixed;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:100;display:flex;justify-content:center;pointer-events:none}
#subbar>div{display:none;align-items:baseline;gap:clamp(14px,2vw,30px);padding:10px 18px;border-radius:99px;background:rgba(246,248,252,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(34,9,37,.08);transform:translateY(-140%);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s;pointer-events:auto}
#subbar>div.on{display:flex}
#subbar>div.in{transform:none;opacity:1}
#subbar .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-right:6px}
#subbar a{display:inline-flex;gap:7px;align-items:baseline;font-size:13px;font-weight:400;color:var(--muted);position:relative;padding-bottom:3px;transition:color .3s}
#subbar a i{font-style:italic;font-family:var(--serif);font-size:11px;color:var(--blue)}
#subbar a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#subbar a.is{color:var(--ink);font-weight:500}
#subbar a.is:after,#subbar a:hover:after{transform:scaleX(1)}
.thread path{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.46}
.thread path.far{stroke-width:1.1;opacity:.34}
.thread .live{display:none}
.thread circle{fill:#fff;stroke:var(--ink);stroke-width:1.4;opacity:.42}
.thread circle.past{fill:var(--ink)}
.thread circle.is{fill:var(--ink);opacity:.85}
.blk{min-height:calc(var(--vh) * .86);padding-block:clamp(40px,8vh,96px)}
.blk.first{min-height:calc(var(--vh) * .8)}
.blk .ln{display:block;width:48px;height:2px;background:var(--ink)}
.opener{padding-top:clamp(40px,8vh,96px);display:flex;flex-direction:column;gap:clamp(18px,3vh,32px)}
.subnav{display:flex;gap:clamp(12px,1.6vw,28px);flex-wrap:wrap;padding:0}
.shead{position:sticky;top:calc(50vh - var(--phoneH) * .5);z-index:5;display:flex;align-items:baseline;gap:clamp(18px,2.4vw,40px);height:0;overflow:visible;pointer-events:none}
.shead .h2{font-size:clamp(18px,1.4vw,22px);white-space:nowrap}
.shead{width:118%}
.subnav a{font-size:clamp(13px,.95vw,15px)}
.shead>*{pointer-events:auto}
.blk{scroll-margin-top:calc(50vh - var(--phoneH) * .5 - 20px)}
.subnav a{pointer-events:auto;display:flex;gap:9px;align-items:baseline;color:var(--muted);font-size:clamp(14px,1.05vw,17px);font-weight:400;transition:color .35s;position:relative;padding-bottom:8px}
.subnav a .n{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--blue)}
.subnav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.subnav a.is{color:var(--ink);font-weight:500}
.subnav a.is:after{transform:scaleX(1)}
.phone{position:relative;height:var(--phoneH);aspect-ratio:9/19;will-change:transform;transform-style:preserve-3d}
.phone .pbody{position:absolute;inset:0;border-radius:calc(var(--phoneH) * .085);background:var(--ink);box-shadow:0 30px 70px rgba(34,9,37,.18),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone .screen{position:absolute;inset:calc(var(--phoneH) * .018);border-radius:calc(var(--phoneH) * .07);overflow:hidden;background:var(--white)}
.phone .notch{position:absolute;top:calc(var(--phoneH) * .03);left:50%;width:30%;height:calc(var(--phoneH) * .032);margin-left:-15%;border-radius:99px;background:var(--ink);z-index:5}
.phone .layer{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.phone .layer:first-child{opacity:1}
.phone .shadow{position:absolute;left:-30%;right:-30%;bottom:-16%;height:16%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(34,9,37,.2),rgba(34,9,37,0) 72%);filter:blur(18px);z-index:-1}
/* per-letter reveal */
.letters .w{display:inline-block;white-space:nowrap}
.lm{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em;margin:0 -.02em}
.lt{display:inline-block;will-change:transform,opacity,filter;transform:translateY(115%) rotate(3deg) scale(.96);opacity:0;filter:blur(14px)}
[data-tilt]{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* frames that drift */
.fr{position:relative;overflow:hidden;background:var(--mist);box-shadow:0 30px 80px rgba(34,9,37,.16);will-change:transform}
.fr img,.fr video{width:100%;height:100%;object-fit:cover;display:block}
.card{background:#fff;box-shadow:0 20px 60px rgba(34,9,37,.12);padding:6%}
.card img{width:100%;height:100%;object-fit:contain;display:block}
/* AI composition */
.ai-row{align-items:center;row-gap:clamp(40px,8vh,96px)}
/* proof */
.stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:start}
.stats>div{display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(34,9,37,.16);padding-top:22px}
/* feed */
.fpost{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.7vw,28px);align-items:center;row-gap:24px}
.fpost .fpi{grid-column:1 / span 6;aspect-ratio:4/3;overflow:hidden;background:var(--mist);box-shadow:0 30px 80px rgba(34,9,37,.14);will-change:transform}
.fpost .fpt{grid-column:8 / span 5;display:flex;flex-direction:column;gap:18px}
.fpost.alt .fpi{grid-column:7 / span 6;grid-row:1}
.fpost.alt .fpt{grid-column:1 / span 5;grid-row:1}
.fpi img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fpost:hover .fpi img,.fcard:hover .fimg img{transform:scale(1.05)}
.fcards{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,32px);align-items:start}
.fcard{display:flex;flex-direction:column;gap:12px}
.fimg{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--mist);box-shadow:0 20px 50px rgba(34,9,37,.12)}
.fimg img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ftitle{font-size:var(--lead);line-height:1.35;font-weight:500}
/* progress strip along the bottom edge */
#prog{position:fixed;top:0;bottom:0;right:max(10px,env(safe-area-inset-right,0px));z-index:101;width:2px}
#prog i{position:absolute;inset:0;background:rgba(34,9,37,.08)}
#prog .tick{position:absolute;right:-6px;top:50%;height:14px;width:14px;display:block;will-change:transform,opacity;margin-top:-7px}
#prog .tick i{position:absolute;left:5px;top:5px;width:4px;height:4px;border-radius:50%;background:var(--ink);transition:transform .3s}
#prog .tick.is i{transform:scale(1.7)}
#prog .tick span{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);white-space:nowrap;transition:font-weight .2s}
#prog .tick.is span{font-weight:700}
#prog .tick:hover span{text-decoration:underline;text-underline-offset:3px}
#prog .sub{position:absolute;right:22px;top:26px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;opacity:0;transform:translateX(8px);transition:opacity .35s,transform .35s;pointer-events:none}
#prog .tick.is .sub{opacity:1;transform:none;pointer-events:auto}
#prog .sub a{font-size:12px;font-weight:400;color:rgba(34,9,37,.45);white-space:nowrap;transition:color .3s;padding:1px 0}
#prog .sub a.is,#prog .sub a:hover{color:var(--ink);font-weight:500}
#prog:hover{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#prog .bar{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--ink);transform-origin:top;transform:scaleY(0);opacity:.6}
#prog .tk{position:absolute;left:0;top:8px;display:flex;gap:40px;width:max-content;will-change:transform;white-space:nowrap}
#prog .tk a{pointer-events:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(34,9,37,.32);transition:color .3s}
#prog .tk a i{font-style:normal;font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none;font-weight:400;margin-right:8px;color:var(--blue)}
#prog .tk a.is{color:var(--ink)}
.only-m{display:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

@media (max-width:680px){
 :root{--hero:clamp(32px,8.6vw,44px);--h1:clamp(30px,8vw,40px);--xl:clamp(36px,10vw,52px)}
 .grid{grid-template-columns:1fr;row-gap:24px}.grid>*{grid-column:1/-1!important;grid-row:auto!important}
 .hide-m{display:none!important}.only-m{display:block}header nav{display:none!important}
 #hero{height:var(--vh)}#clients{height:auto}#clients .pin{position:relative;height:auto;padding-block:96px 48px}.feats{grid-template-columns:1fr 1fr}
 .blk{min-height:0;padding-block:40px}.stats{grid-template-columns:1fr}.fpost .fpi,.fpost .fpt{grid-column:1/-1!important;grid-row:auto!important}
 .blk>.in{grid-column:1/-1!important}.fcards{grid-template-columns:1fr}.fcard{margin-top:0!important}.blk{padding-top:24px}.card{position:relative!important;left:auto!important;bottom:auto!important;width:70%!important;margin-top:16px}
}