@font-face{font-family:'Jost';src:url(/ux/assets/fonts/jost.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/ux/assets/fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/ux/assets/fonts/fraunces-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#FFFFFF;--paper-warm:#FAFAFA;--panel:#F4F4F4;--panel-line:#F0F0F0;
  --hairline:#E5E5E5;--ink:#0A0A0A;--ink-body:#1A1A1A;--ink-mid:#444;--mute:#666;--faint:#767676;
  --purple:#C687FF;--purple-mid:#A855F7;--purple-ink:#7A3FB5;--purple-hover:#63348F;--purple-tint:#F5EBFF;
  --folio:#ECECEC;--folio-soft:#F0F0F0;--ledger-line:#D7C9E6;--ledger-rule:#CDB9E3;--on-purple:#FFFFFF;--shadow-ink:#4B3455;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;--serif:'Fraunces',Georgia,serif;--mono:'SF Mono',Menlo,monospace;
  /* Corner system — three registers, deliberately distinct.
     --r-media  : photographs and films. Softened to sit in the same family as the
                  phone frames without imitating their device radius (43px on a
                  300px screen would read as an app card at 660px wide).
     --r-chrome : browser-window frames (the fake chrome bar + its viewport).
                  Tighter than media, because a window is a UI object, not an image.
     Interface chrome — buttons, inputs, the nav CTA — stays at 2px on purpose.
     Logos and wordmarks are never rounded. */
  --r-media:16px;--r-chrome:10px;
  color-scheme:light;
}
/* the corner is an absolute arc, so it grows in proportion as the media shrinks —
   step it down on narrow screens or a 16:9 at 330px wide starts reading bubbly */
@media(max-width:639px){:root{--r-media:12px;--r-chrome:8px}}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink-body);background:var(--paper);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wrap{max-width:1240px;margin:0 auto;padding:0 36px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--purple-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;z-index:60;text-decoration:none}
.skip:focus{left:12px;top:12px}
.edge{height:6px;background:var(--purple)}
/* ── masthead ── */
/* Asymmetric padding: baseline alignment leaves the CTA pill hanging below the
   shared baseline, which rode the whole text row 5px high — this re-centres it,
   returning the wordmark ink to its original vertical position. */
header{padding:23px 0 13px;border-bottom:1px solid var(--hairline);background:var(--paper);position:sticky;top:0;z-index:40}
/* Baseline-align the whole strip: nav labels share the lockup's baseline instead
   of box-centring against it (which parked them ~10px above the "media" baseline). */
.hstrip{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
/* Official LOVE YOURS wordmark + redesigned italic suffix. The mark is all-caps
   with no descenders and "media" has none either, so both sit on one baseline. */
.masthead{display:inline-flex;align-items:baseline;gap:13px;text-decoration:none;white-space:nowrap;line-height:1;flex:0 0 auto}
.masthead img{height:29px;width:auto;display:block}
/* "media" is deliberately subordinate: Fraunces italic stays chunky even at low
   weight, so matching the hairline caps by weight fails — matching by scale works. */
.masthead em{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;
  color:var(--purple-ink);line-height:1}
@media(max-width:639px){.masthead{gap:10px}.masthead img{height:23px}.masthead em{font-size:15px}}
/* heart monogram: centred between the wordmark lockup and the nav (desktop only —
   below 900px the strip wraps and a floating mark reads as an orphan) */
.heartmark{height:26px;width:auto;display:block;align-self:center;margin:0 auto;flex:0 0 auto}
@media(max-width:899px){.heartmark{display:none}}
nav{display:flex;gap:30px;flex-wrap:wrap;align-items:baseline}
nav a{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mid);text-decoration:none;padding:12px 4px;margin:0 -4px}
nav a:hover{color:var(--purple-ink)}
nav a.navcta{border:1px solid var(--purple-ink);color:var(--purple-ink);padding:9px 18px;border-radius:2px}
nav a.navcta:hover{background:var(--purple-ink);color:#fff}
/* ── hero ── */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;padding:84px 0 84px}
.kick{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--purple-ink);margin:0 0 24px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(44px,5.6vw,86px);line-height:1.02;letter-spacing:-.015em;color:var(--ink);margin:0 0 30px;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--purple-mid);font-weight:480}
.stand{font-size:19px;color:var(--ink-mid);max-width:52ch;margin:0 0 38px}
.stand b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 32px;border-radius:2px;border:0;cursor:pointer;font-family:var(--sans)}
.btn-solid{background:var(--purple-ink);color:#fff}
.btn-solid:hover{background:var(--purple-hover)}
.btn-line{color:var(--ink);border-bottom:2px solid var(--purple);padding:0 0 6px;border-radius:0;background:none}
.btn-line:hover{color:var(--purple-ink)}
.heroimg{position:relative;margin:0;isolation:isolate}
.heroimg img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;position:relative;z-index:1;border-radius:var(--r-media)}
/* homepage hero: film inside the (notchless) device frame, websites-page sizing */
.herophone{display:flex;flex-direction:column;align-items:center}
.herophone .phoneframe{margin:0}
.herophone figcaption{width:100%;max-width:340px}
/* /ai typographic moment: the full stop IS the human-gate diamond */
.h1gate{width:.34em;height:.34em;display:inline-block;margin-left:.12em;transform-origin:center}
@media(prefers-reduced-motion:no-preference){.h1gate{animation:markbeat 2.4s ease-in-out .9s 2}}
/* ── ambient ground (Layer A, whisper density) ── */
body{background:transparent}
#ambient{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* page transitions: masthead persists, content crossfades */
@view-transition{navigation:auto}
header{view-transition-name:lym-masthead}
.heroimg .frame{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--purple);z-index:0}
.heroimg figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:14px;display:flex;justify-content:space-between}
/* ── credits logo band ── */
.credband{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:40px 0 36px}
.credband .k{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);display:block;text-align:center;margin-bottom:30px}
.logoband{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:28px 48px}
.logo{position:relative;display:inline-block}
.logo img{display:block;width:auto}
.logo .c{position:absolute;inset:0;opacity:0}
.logo:hover .c,.logo:focus-visible .c{opacity:1}
.lg-jf img{height:46px}.lg-km img{height:42px}.lg-mkic img{height:34px}.lg-paramount img{height:62px}.lg-damac img{height:28px}
/* ── section chrome ── */
section{padding:96px 0}
.joined{padding-top:0}
.seclabel{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--purple-ink);margin:0 0 12px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.8vw,50px);line-height:1.06;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
.underbar{width:48px;height:3px;background:var(--purple);margin:22px 0 0}
.secintro{font-size:17.5px;color:var(--ink-mid);max-width:60ch;margin:26px 0 0}
/* ── services ── */
.svc{border-top:1px solid var(--hairline);margin-top:56px}
.svcrow{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);gap:36px;padding:34px 0;border-bottom:1px solid var(--hairline);align-items:start}
.svcrow .i{font-family:var(--mono);font-size:11px;color:var(--purple-ink);padding-top:10px}
.svcrow h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.15;color:var(--ink);margin:0}
.svcrow h3 span{display:block;font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-ink);margin-bottom:10px}
.svcrow .d p{margin:0;font-size:16px;color:var(--ink-mid)}
.svcrow .d .measure{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:14px;display:block}
.svcrow .d .measure b{color:var(--ink);font-weight:600}
/* ── work ── */
.spread{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;margin-top:64px;align-items:start}
.spread.flip .imgcol{order:2}
.imgcol{margin:0;position:relative}
.imgcol img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-media)}
.imgcol.browser img{border-radius:0}
.imgcol.browser{border:1px solid var(--hairline);border-radius:var(--r-chrome);overflow:hidden}
.imgcol.browser .bar{display:flex;gap:6px;align-items:center;background:var(--panel);padding:10px 14px;border-bottom:1px solid var(--hairline)}
.imgcol.browser .bar i{width:9px;height:9px;border-radius:50%;background:#D9D9D9;display:block}
.imgcol.browser .bar .url{font-family:var(--mono);font-size:9.5px;color:var(--mute);letter-spacing:.06em;margin-left:10px}
.imgcol figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.imgcol.browser figcaption{margin:12px 14px 14px}
.case-kick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-ink);margin:0 0 14px}
.caselink{display:inline-block;margin-top:22px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-ink);text-decoration:none;border-bottom:2px solid var(--purple);padding-bottom:5px}
.caselink:hover{color:var(--ink)}
/* ── graphics system (GRAPHICS-PLAN v1.1) ─────────────────────────────
   Price line as each block's graphic anchor; proof tiles carry the stats
   the prose used to; hairline flow diagrams replace list items; bespoke
   glyphs identify disciplines. All inline, zero external requests. */
.fromprice{margin-top:20px;font-family:var(--serif)}
.fromprice b{font-size:44px;font-weight:560;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fromprice span{font-size:14px;color:var(--mute);margin-left:8px}
@media(max-width:560px){.fromprice b{font-size:34px}}
.prooffigs{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.prooftile{border:1px solid var(--hairline);border-top:2px solid var(--purple);padding:13px 18px 12px;background:var(--paper)}
.prooftile b{display:block;font-family:var(--serif);font-size:30px;font-weight:600;color:var(--purple-ink);line-height:1.1;font-variant-numeric:tabular-nums}
.prooftile span{display:block;margin-top:5px;font-size:11.5px;color:var(--mute);max-width:20ch}
.measuretile{margin-top:24px;border:1px solid var(--hairline);border-left:3px solid var(--purple);padding:13px 18px;background:var(--paper)}
.measuretile .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.measuretile b{display:block;margin-top:4px;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.measuretile .g{display:block;margin-top:4px;font-size:11.5px;color:var(--mute)}
.ledger{margin-top:26px;border:1px solid var(--hairline);background:var(--paper);font-family:var(--mono)}
.ledger .lhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 16px;border-bottom:1px solid var(--hairline);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ledger .lhead b{color:var(--purple-ink);font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.ledger ol{list-style:none;margin:0;padding:4px 0;min-height:186px}
.ledger li{display:grid;grid-template-columns:64px 52px 70px 1fr;gap:10px;padding:6px 16px;font-size:11px;color:var(--ink-mid);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(5px);transition:opacity .3s ease-out,transform .3s ease-out}
.ledger li.on{opacity:1;transform:none}
.ledger li b{font-weight:600;color:var(--mute);text-align:right}
.ledger li b.q{color:var(--purple-ink)}
.ledger li b.q::after{content:" ✓"}
.ledger .lnote{display:block;padding:9px 16px;border-top:1px solid var(--hairline);font-size:9.5px;color:var(--mute)}
@media(prefers-reduced-motion:reduce){.ledger li{opacity:1;transform:none;transition:none}}
.glyph{width:44px;height:44px;display:block;margin-bottom:18px;color:var(--purple-ink)}
.glyph *{vector-effect:non-scaling-stroke}
.svcblock>div{min-width:0}
.flowdia{margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.flowdia svg{width:100%;min-width:500px;height:auto;display:block;color:var(--ink-mid)}
.flowdia text{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-mid)}
.flowdia text.gl{font-size:11px}
.flowdia .n{fill:var(--paper);stroke:var(--purple-ink);stroke-width:1.5}
.flowdia .gate{fill:var(--purple-tint);stroke:var(--purple-ink);stroke-width:1.5}
.flowdia .gl{fill:var(--purple-ink);font-weight:600}
.flowdia .c{stroke:var(--hairline-dark,#C9C2D4);stroke-width:1.5}
.flowdia .cb{stroke:var(--hairline-dark,#C9C2D4);stroke-width:1.5;stroke-dasharray:4 4}
.js .reveal .flowdia .c{stroke-dasharray:80;stroke-dashoffset:80}
.js .reveal.in .flowdia .c{animation:fd-draw .7s ease-out forwards}
.js .reveal .flowdia .n,.js .reveal .flowdia .gate{opacity:0}
.js .reveal.in .flowdia .n,.js .reveal.in .flowdia .gate{animation:fd-pop .4s ease-out forwards}
.js .reveal.in .flowdia .d1{animation-delay:.1s}.js .reveal.in .flowdia .d2{animation-delay:.22s}
.js .reveal.in .flowdia .d3{animation-delay:.34s}.js .reveal.in .flowdia .d4{animation-delay:.46s}
.js .reveal.in .flowdia .d5{animation-delay:.58s}.js .reveal.in .flowdia .d6{animation-delay:.7s}
@keyframes fd-draw{to{stroke-dashoffset:0}}
@keyframes fd-pop{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .js .reveal .flowdia .c{stroke-dasharray:none;stroke-dashoffset:0}
  .js .reveal .flowdia .n,.js .reveal .flowdia .gate{opacity:1;animation:none}
}
.aiplain{margin-top:72px;border:1px solid var(--hairline);border-left:3px solid var(--purple);background:var(--paper-warm);padding:34px 38px}
.aiplain .gatemark{width:34px;height:34px;display:block;margin-bottom:14px}
.aiplain p{margin:10px 0 0;max-width:74ch;color:var(--ink-mid)}
.aiplain p b{color:var(--ink);font-weight:600}
.midcta{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--paper-warm)}
.midcta .inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:34px 0}
.midcta p{margin:0;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink)}
.midcta p em{font-style:italic;color:var(--purple-mid);font-weight:480}
.spread h3,.spread .casetitle{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.15;color:var(--ink);margin:0 0 16px;text-wrap:balance}
.spread p.body{font-size:16.5px;color:var(--ink-mid);margin:0 0 30px;max-width:56ch}
.spread p.body b{color:var(--ink);font-weight:600}
.statrow{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--hairline)}
.stat{padding:20px 18px 22px 0}
.stat+.stat{border-left:1px solid var(--panel-line);padding-left:22px}
.stat .n{font-weight:700;font-size:34px;color:var(--purple-ink);font-variant-numeric:tabular-nums;line-height:1.1}
.stat .n small{font-size:.55em;font-weight:700}
.stat .k{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);display:block;margin-top:7px}
/* flagship */
.flagship{background:var(--paper-warm);border:1px solid var(--panel-line);border-top:3px solid var(--purple);padding:46px 50px;margin-top:64px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:center}
.flagship h3,.flagship .casetitle{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,34px);line-height:1.18;color:var(--ink);margin:0 0 16px;text-wrap:balance}
.flagship h3 em,.flagship .casetitle em{font-style:italic;color:var(--purple-mid);font-weight:480}
.flagship p{font-size:16.5px;color:var(--ink-mid);margin:0;max-width:58ch}
.flagship .quotecol{border-left:3px solid var(--purple);padding-left:28px}
.flagship .quotecol blockquote{margin:0;font-family:var(--serif);font-style:italic;font-weight:480;font-size:18.5px;line-height:1.5;color:var(--ink)}
.flagship .quotecol cite{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-ink);margin-top:16px}
.flagship .quotecol img{height:44px;width:auto;margin-top:20px}
.flagship:has(.jfcol)>div:first-child{align-self:end}
.flagship .jfcol{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;gap:28px}
.flagship .jfphone{margin:0}
.flagship .jfphone .phoneframe{--screen-w:200px;--bezel:8px;--radius:30px;margin:0}
.flagship .jfphone figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.flagship .jfquote{margin-top:auto}
.flagship .jfquote blockquote{font-size:17px}
.flagship .jfquote .sig{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:14px}
.flagship .jfquote .sig cite{margin-top:0;line-height:1.5;padding-bottom:2px;white-space:nowrap}
.flagship .jfquote .sig cite span{display:block;color:var(--mute);font-weight:500;letter-spacing:.14em;font-size:9.5px}
.flagship .jfquote .sig img{height:34px;margin-top:0;flex:0 0 auto}
.flagship .statrow{margin-top:26px}
.flagship .casecard.ctacard{order:99}
.casecard.ctacard a{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:280px;border:1px dashed var(--purple-ink);border-radius:var(--r-chrome);padding:28px;text-decoration:none;background:var(--purple-tint)}
.casecard.ctacard a:hover{background:#EFE0FF}
.casecard.ctacard h3{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);margin:0 0 8px}
.casecard.ctacard p{font-size:14.5px;color:var(--ink-mid);margin:0 0 12px}
.permission{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:18px;display:block}
/* dubai strip */
/* Dubai credits: film still leads (proof), text + marks sit beside it — same
   image-left/text-right idiom as the case blocks above, at credit scale. */
.dubai{border-top:1px solid var(--hairline);margin-top:72px;padding-top:44px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.dubaifilm{margin:0}
.dubaifilm img,.dubaifilm video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-media)}
.dubaifilm figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:12px;display:flex;justify-content:space-between;gap:16px}
.dubaitext{display:flex;flex-direction:column;gap:28px}
.dubai p{font-size:16.5px;color:var(--ink-mid);margin:0;max-width:58ch}
.dubai p b{color:var(--ink);font-weight:600}
.dubai .marks{display:flex;gap:44px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.dubai .marks img{width:auto}
.dubai .p-mark{height:64px}.dubai .d-mark{height:26px}
/* ── process ── */
.timeline{border-top:1px solid var(--hairline);margin-top:56px}
.trow{display:grid;grid-template-columns:190px 1fr;gap:36px;padding:28px 0;border-bottom:1px solid var(--hairline)}
.trow .m{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-ink);padding-top:3px}
.trow p{margin:0;font-size:16.5px;color:var(--ink-mid);max-width:66ch}
.trow p b{color:var(--ink);font-weight:600}
/* ── FAQ ── */
/* FAQ as ledger rows: mono Q-index via CSS counter, + rotates to x on open,
   answers sit behind a purple hairline. Markup unchanged (<details>/<summary>);
   browsers without the niceties just get an instant, fully-working accordion. */
.faq{border-top:1px solid var(--hairline);margin-top:56px;max-width:880px;counter-reset:faq}
.faq details{border-bottom:1px solid var(--hairline);counter-increment:faq}
.faq summary{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);padding:24px 40px 24px 64px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q·0" counter(faq);position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--purple-ink)}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:400;font-size:24px;color:var(--purple-ink);transition:transform .28s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--purple-hover)}
.faq .a{padding:2px 0 28px 64px;max-width:64ch;position:relative}
.faq .a::before{content:"";position:absolute;left:8px;top:4px;bottom:30px;width:2px;background:var(--purple)}
.faq .a p{margin:0;font-size:16px;color:var(--ink-mid)}
@media(prefers-reduced-motion:no-preference){.faq details[open] .a{animation:rise .32s ease-out both}}
@media(max-width:639px){.faq summary{padding-left:46px}.faq .a{padding-left:46px}.faq .a::before{left:4px}}
/* ── CTA band + form ── */
.ctaband{background:var(--purple-tint);border-top:1px solid var(--purple);border-bottom:1px solid var(--purple)}
.ctainner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start;padding:78px 0}
.ctainner h2{margin:0 0 14px}
.ctainner .lead{font-size:17.5px;color:var(--ink-mid);margin:0 0 26px;max-width:52ch}
.mail{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--purple-ink);text-decoration:none;border-bottom:1px solid var(--purple);display:inline-block;padding:5px 0;margin:-5px 0}
.mail:hover{color:var(--ink)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
label{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mid)}
input,select,textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:2px;padding:13px 14px}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:96px;resize:vertical}
.formfoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.formnote{font-size:12.5px;color:var(--mute);max-width:34ch;margin:0}
.formnote a{color:var(--purple-ink)}
/* contact form, ledger idiom (2026-08-18 review): hairline-underline fields,
   focus draws a 2px purple rule left-to-right (paint-only). The drawn rule IS the
   focus indicator, so the global outline is dropped for these fields only. */
.contactgrid form{gap:26px 22px}
.contactgrid label{font-family:var(--mono);letter-spacing:.2em;font-size:9.5px}
.contactgrid :is(input,select,textarea){border:0;border-bottom:1px solid var(--mute);border-radius:0;
  padding:10px 2px 12px;background:linear-gradient(var(--purple-ink),var(--purple-ink)) no-repeat left bottom/0% 2px;
  transition:background-size .35s ease}
.contactgrid :is(input,select,textarea):focus-visible{outline:none;background-size:100% 2px}
.contactgrid select{padding-right:28px}
.contactgrid .formfoot{align-items:flex-start}
.contactgrid .formfoot .btn{padding:19px 46px}
.replyproof{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:12px 0 0}
@media(max-width:899px){.contactside .regoffice{display:none}}
/* about colophon: a print-native full stop for the page — heart + set-in line */
.colophon{border-top:1px solid var(--hairline);margin-top:88px;padding:56px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.colophon img{height:34px;width:auto}
.colophon p{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0}
/* ── insights: index rows + article typography (2026-08-18 content engine) ── */
.insightlist{border-top:1px solid var(--hairline);margin-top:56px;max-width:960px}
.insightrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:start;
  padding:36px 8px 34px 0;border-bottom:1px solid var(--hairline);text-decoration:none}
.insightrow .inum{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--purple-ink);padding-top:9px}
.insightrow h2{font-size:clamp(22px,2.4vw,29px);margin:0 0 10px;max-width:30ch}
.insightrow p{font-size:15.5px;color:var(--ink-mid);margin:0 0 12px;max-width:62ch}
.insightrow .imeta{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.insightrow:hover h2{color:var(--purple-hover)}
@media(max-width:639px){.insightrow{grid-template-columns:1fr;gap:4px}.insightrow .inum{padding:0}}
.article{max-width:760px;padding-bottom:32px}
.article h1{font-size:clamp(34px,4.2vw,54px)}
.artmeta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:22px 0 0}
.article .lede{font-size:19.5px;line-height:1.6;color:var(--ink-mid);margin:36px 0 0;border-left:2px solid var(--purple);padding-left:22px}
.article .lede,.article>p{max-width:66ch}
.article h2{font-size:clamp(24px,2.8vw,32px);margin:56px 0 18px}
.article h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.25;color:var(--ink);margin:36px 0 10px}
/* legal/reference docs: tighten the row-block rhythm inside a reading column */
.article .timeline,.article .belief{margin-top:26px}
.article .artcta{margin:32px 0 8px}
.article>p{font-size:17px;color:var(--ink-body);margin:0 0 18px}
.article>p b{color:var(--ink)}
.article .mono{font-family:var(--mono);font-size:.88em;background:var(--panel);padding:2px 6px;border-radius:2px;white-space:nowrap}
.artchk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-ink);font-weight:400}
.article .tblwrap{margin:8px 0 18px}
.article td .tsub{font-size:12px;color:var(--mute)}
.artcta{border:1px solid var(--hairline);border-top:2px solid var(--purple);background:var(--paper-warm);
  padding:30px 32px;margin-top:56px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.artcta p{margin:0;font-size:16px;color:var(--ink-mid);max-width:52ch}
.artcta a:not(.btn){color:var(--purple-ink)}
/* ── footer ── */
footer{border-top:1px solid var(--hairline);background:var(--paper-warm)}
.fstrip{display:flex;gap:52px;flex-wrap:wrap;padding:34px 0 30px;font-style:normal}
.fstrip .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:5px}
.fstrip .v{font-size:13px;font-weight:600;color:var(--ink);font-style:normal}
.fstrip a.v{text-decoration:none;border-bottom:1px solid #CCC}
.fstrip a.v:hover{color:var(--purple-ink)}
.fbottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--panel-line);padding:18px 0 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.fbottom a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--hairline)}
.fbottom a:hover{color:var(--purple-ink)}
.fedge{height:6px;background:var(--purple)}
/* ── responsive ── */
@media(max-width:1024px){.flagship{grid-template-columns:1fr;gap:36px}.flagship .logos{justify-content:flex-start}.flagship .jfcol{gap:24px}.flagship .jfphone .phoneframe{--screen-w:220px;--bezel:9px;--radius:33px}}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:48px;padding:64px 0}
  .spread,.spread.flip{grid-template-columns:1fr;gap:40px}.spread.flip .imgcol{order:0}
  .heroimg .frame{inset:14px -14px -14px 14px}
  .svcrow{grid-template-columns:48px 1fr;row-gap:10px}
  .svcrow .i{padding-top:0}
  .svcrow .d{grid-column:2}
  .dubai{grid-template-columns:1fr;gap:32px}.dubai .marks{justify-content:flex-start}
  .ctainner{grid-template-columns:1fr;gap:44px;padding:64px 0}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .hstrip{gap:12px}
  nav{gap:16px}
  nav a{font-size:10px;letter-spacing:.14em}
  nav a.navcta{padding:7px 12px}
  section{padding:72px 0}
  .heroimg .frame{inset:10px -10px -10px 10px}
  .statrow{grid-template-columns:1fr}
  .stat+.stat{border-left:none;padding-left:0;border-top:1px solid var(--panel-line)}
  .trow{grid-template-columns:1fr;gap:8px}
  .flagship{padding:32px 26px}
  .logoband{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;justify-items:center;gap:26px 40px}
  .logoband .lg-damac{grid-column:1/-1}
  .lg-paramount img{height:52px}.lg-jf img{height:38px}.lg-km img{height:34px}.lg-mkic img{height:28px}
}
/* ── motion ── */
.reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .rise{animation:rise .45s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* DESIGN-UPLIFT v1.1 — masked typeset reveal for hero headlines: a clip wipe
     with a small rise, then the italic em arrives a beat later. */
  .rise2{animation:typeset .62s .08s cubic-bezier(.22,.7,.3,1) both}
  @keyframes typeset{from{opacity:0;clip-path:inset(0 0 92% 0);transform:translateY(10px)}
    60%{opacity:1}to{opacity:1;clip-path:inset(0 0 -8% 0);transform:none}}
  .rise2 em{animation:emset .5s .5s ease-out both}
  @keyframes emset{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .rise3{animation:rise .45s .16s ease-out both}
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .42s ease-out,transform .42s ease-out}
  .js .reveal.in{opacity:1;transform:none}
  /* drawn rules: the underbar draws itself */
  .pagehero .underbar{animation:bardraw .5s .55s ease-out both}
  .js .reveal .underbar{width:0;transition:width .45s .12s ease-out}
  .js .reveal.in .underbar{width:48px}
  @keyframes bardraw{from{width:0}}
  /* proof tiles: staggered stamp-in (ledger idiom) */
  .js .reveal .prooftile{opacity:0;transform:translateY(8px) scale(.97)}
  .js .reveal.in .prooftile{opacity:1;transform:none;transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,1.2,.4,1)}
  .js .reveal.in .prooftile:nth-child(2){transition-delay:.14s}
  .js .reveal.in .prooftile:nth-child(3){transition-delay:.28s}
  /* case imagery: reveal-crop — image settles from a slight zoom as it enters */
  .js .reveal .casecard .frame img,.js .reveal .imgcol>img{transform:scale(1.05);transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
  .js .reveal.in .casecard .frame img,.js .reveal.in .imgcol>img{transform:scale(1)}
  .casecard .frame,.imgcol{overflow:hidden}
  /* human-gate diamond heartbeat — the signature mark, alive */
  .flowdia .gate{transform-box:fill-box;transform-origin:center;animation:gatebeat 2.6s ease-in-out 1.4s infinite}
  @keyframes gatebeat{0%,100%{transform:rotate(45deg) scale(1)}6%{transform:rotate(45deg) scale(1.09)}12%{transform:rotate(45deg) scale(1)}}
  .aiplain .gatemark{transform-origin:center;animation:markbeat 2.6s ease-in-out 1s 2}
  @keyframes markbeat{0%,100%{transform:scale(1)}8%{transform:scale(1.06)}16%{transform:scale(1)}}
  /* typographic moments */
  .momenta em{background:linear-gradient(var(--purple),var(--purple)) no-repeat 0 96%/0% 3px;animation:emline .01s 1.3s both}
  @keyframes emline{to{background-size:100% 3px}}
  .momenta em{transition:background-size .5s ease-out}
  /* RETIRED 2026-08-18: the /websites mono-draft -> Fraunces swap. Two fonts at
     two sizes means two sets of metrics, so the swap reflowed the h1 and cost
     CLS 0.02-0.36 on a sales page. The headline keeps the `typeset` clip wipe
     and the em keeps `emset` — both animate paint, not layout, so both are free. */
  .logo .c{transition:opacity .25s}
  .wm-enter .masthead img{animation:wmwipe .7s .1s ease-out both}
  .wm-enter .masthead em{animation:emset .4s .68s ease-out both}
  @keyframes wmwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ── inner-page chrome ── */
.pagehero{padding:76px 0 8px}
.pagehero h1{font-size:clamp(38px,4.8vw,68px)}
.pagehero .intro{font-size:18.5px;color:var(--ink-mid);max-width:58ch;margin:26px 0 0}
.pagehero .intro b{color:var(--ink);font-weight:600}
.flinks a{color:var(--mute);text-decoration:none;border-bottom:1px solid #CCC;display:inline-block;padding:6px 0;margin:-6px 0}
.flinks a:hover{color:var(--purple-ink)}
/* ledger table (work page) */
.tblwrap{overflow-x:auto;border:1px solid var(--hairline);margin-top:56px}
table{width:100%;border-collapse:collapse;min-width:720px}
thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mid);text-align:left;background:var(--panel);border-top:2px solid var(--ink);border-bottom:1px solid var(--hairline);padding:13px 18px;font-weight:500}
tbody td{padding:15px 18px;border-bottom:1px solid var(--panel-line);font-size:15px;color:var(--ink-mid)}
tbody td b{color:var(--ink);font-weight:600}
td.right,th.right{text-align:right}
.pill{display:inline-block;border:1px solid #16A34A;color:#137A3B;background:#F0FDF4;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.pill.done{border-color:var(--purple-ink);color:var(--purple-ink);background:var(--purple-tint)}
/* service detail blocks */
.svcdetail{border-top:1px solid var(--hairline);margin-top:56px}
.svcblock{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;padding:52px 0;border-bottom:1px solid var(--hairline)}
.svcblock .i{font-family:var(--mono);font-size:11px;color:var(--purple-ink);display:block;margin-bottom:12px}
.svcblock h2{font-size:clamp(26px,3vw,38px);margin:0 0 14px}
.svcblock .lead{font-size:16.5px;color:var(--ink-mid);margin:0;max-width:52ch}
.svcblock .lead b{color:var(--ink);font-weight:600}
.svcblock ul{list-style:none;margin:0 0 24px;padding:0}
.svcblock ul li{padding:10px 0 10px 26px;border-bottom:1px solid var(--panel-line);font-size:15.5px;color:var(--ink-mid);position:relative}
.svcblock ul li::before{content:"—";position:absolute;left:0;color:var(--purple-mid)}
.svcblock .inclabel{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:8px}
/* about page */
.belief{border-top:1px solid var(--hairline);margin-top:56px}
.beliefrow{display:grid;grid-template-columns:220px 1fr;gap:36px;padding:30px 0;border-bottom:1px solid var(--hairline)}
.beliefrow .m{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink)}
.beliefrow p{margin:0;font-size:16.5px;color:var(--ink-mid);max-width:64ch}
.metapanel{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:64px}
.metapanel .cell{padding:24px 20px 26px 0}
.metapanel .cell+.cell{border-left:1px solid var(--panel-line);padding-left:24px}
.metapanel .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:6px}
.metapanel .v{font-weight:600;font-size:15px;color:var(--ink)}
/* contact page */
.contactgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;padding:56px 0 96px}
.contactside .mail{font-size:14px}
.contactside .block{margin-top:36px}
.contactside .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:8px}
.contactside p{margin:0;font-size:15.5px;color:var(--ink-mid);max-width:40ch}
.formok{display:none;background:#F0FDF4;border:1px solid #16A34A;color:#137A3B;padding:16px 18px;font-size:15px;margin-bottom:18px}
@media(max-width:960px){.svcblock{grid-template-columns:1fr;gap:28px}.beliefrow{grid-template-columns:1fr;gap:8px}.metapanel{grid-template-columns:repeat(2,1fr)}.metapanel .cell:nth-child(3){border-left:none;padding-left:0}.contactgrid{grid-template-columns:1fr;gap:44px}}
@media(max-width:560px){.metapanel{grid-template-columns:1fr}.metapanel .cell+.cell{border-left:none;padding-left:0;border-top:1px solid var(--panel-line)}}
.formerr{display:none;background:#FEF2F2;border:1px solid #DC2626;color:#B91C1C;padding:16px 18px;font-size:15px;margin-bottom:18px}
.goalfield{min-height:120px;font-size:16px}
.trustline{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-mid);border-left:3px solid var(--purple);padding-left:20px;margin:34px 0 0;max-width:56ch}
.trustline span{font-family:var(--sans);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-ink);display:block;margin-top:8px}
/* ── Stage 4 gate round-2 fixes ── */
[id]{scroll-margin-top:96px}
.svcblock .measure{display:block;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.svcblock .measure b{color:var(--ink);font-weight:600}
input,select,textarea{border-color:#949494}
.midcta p{font-size:24px}
nav a[aria-current]{color:var(--purple-ink);border-bottom:2px solid var(--purple)}
.inlink{color:var(--purple-ink);text-decoration:none;border-bottom:1px solid var(--purple)}
.inlink:hover{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:560px){form{grid-template-columns:1fr}}
/* ── /websites pricing (unlisted until launch) ── */
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:72px}
.pricecard{border:1px solid var(--hairline);padding:40px 34px 44px;display:flex;flex-direction:column;background:var(--paper)}
.pricecard.featured{border-color:var(--purple-ink);border-top:3px solid var(--purple-ink)}
.pricecard .i{display:block;margin-bottom:22px}
.pricecard .price{font-family:var(--serif);margin:0 0 14px}
.pricecard .price b{font-size:52px;font-weight:640;color:var(--ink)}
.pricecard .price span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:8px}
.pricecard h2{font-size:22px;margin:0 0 12px}
.pricecard .lead{font-size:15.5px;color:var(--ink-mid);margin:0 0 22px}
.pricecard ul{list-style:none;margin:0 0 30px;padding:0;flex:1}
.pricecard li{font-size:14.5px;color:var(--ink-mid);padding:9px 0 9px 22px;border-bottom:1px solid var(--panel-line);position:relative}
.pricecard li::before{content:"·";color:var(--purple-ink);font-weight:700;position:absolute;left:4px}
.pricecard li b{color:var(--ink);font-weight:600}
.pricecard .btn{align-self:flex-start}
/* Split-payment terms. Deliberately BELOW the button and in mono at small size:
   the card headline is the all-in total, and the deposit must never read as a
   second price competing with it. */
.pricecard .paynote{font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--mute);margin:14px 0 0}
/* Review Engine — an add-on sold against any tier, so it sits outside the grid
   rather than becoming a fourth column that implies a fourth package. */
.addonband{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--hairline);border-left:3px solid var(--purple-ink);padding:32px 34px;margin-top:28px;background:#fff}
.addonband h3{font-size:22px;margin:10px 0 10px}
.addonband p{font-size:15px;color:var(--ink-mid);margin:0;max-width:62ch}
.addonbuy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:0 0 auto}
.addonbuy .price{font-family:var(--serif);margin:0}
.addonbuy .price b{font-size:40px;font-weight:640;color:var(--ink)}
.addonbuy .price span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:8px}
@media(max-width:960px){.addonband{flex-direction:column;align-items:flex-start;gap:22px}}
.careband{border:1px solid var(--hairline);border-left:3px solid var(--purple);padding:44px 40px;margin-top:64px;background:var(--panel)}
.careband h2{font-size:30px;margin:14px 0 16px}
.careband .lead{max-width:70ch;color:var(--ink-mid)}
.careband .measure{margin-top:20px}
@media(max-width:960px){.pricegrid{grid-template-columns:1fr;gap:22px}}
/* ── case studies (websites page proof section) ── */
.proof{border-top:1px solid var(--hairline);margin-top:96px;padding-top:88px}
/* /websites opens straight into the work — its page hero was removed 2026-08-18.
   As the lead block .proof must drop the section rule (it would double the header's
   own hairline) and the 96+88px section gap, taking the pagehero's opening rhythm.
   Its h2 was promoted to h1 so the page keeps a top-level heading; these overrides
   are the h1-vs-h2 deltas, so it renders exactly as the section heading it still is. */
main>.wrap>.proof:first-child{border-top:0;margin-top:0;padding-top:76px}
main>.wrap>.proof:first-child>h1{font-size:clamp(30px,3.8vw,50px);line-height:1.06;
  letter-spacing:-.01em;margin:0 0 8px;max-width:24ch}
.proof .openers{display:grid;gap:88px;margin-top:64px}
.caseopen{display:grid;grid-template-columns:352px minmax(0,1fr);gap:64px;align-items:center}
.caseopen.flip{grid-template-columns:minmax(0,1fr) 352px}
.caseopen.flip .imgcol{order:2}
/* Device frame. The screen's aspect-ratio equals the encoded video's exactly
   (640x1386 from ffprobe), so cover crops nothing and no letterbox bar can appear. */
.phoneframe{--screen-w:300px;--bezel:11px;--radius:43px;
  width:calc(var(--screen-w) + var(--bezel)*2);margin:0 auto;position:relative;padding:var(--bezel);
  border-radius:calc(var(--radius) + var(--bezel));
  background:linear-gradient(158deg,#46464B 0%,#141418 14%,#1D1D22 48%,#0C0C10 84%,#424247 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.14) inset,0 26px 52px -20px rgba(26,20,38,.42)}
.phoneframe .screen{position:relative;border-radius:var(--radius);overflow:hidden;background:#0B0B0E;
  aspect-ratio:640/1386;box-shadow:0 0 0 1px rgba(0,0,0,.85) inset}
.phoneframe .screen video,.phoneframe .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.phoneframe .island{position:absolute;z-index:3;top:calc(var(--screen-w)*.033);left:50%;transform:translateX(-50%);
  width:calc(var(--screen-w)*.287);height:calc(var(--screen-w)*.083);border-radius:999px;background:#08080A;
  box-shadow:0 0 0 .5px rgba(255,255,255,.05)}
.phoneframe::before{content:"";position:absolute;left:-1.5px;top:calc(var(--screen-w)*.30);width:2px;height:calc(var(--screen-w)*.085);
  border-radius:2px;background:#34343A;box-shadow:0 calc(var(--screen-w)*.145) 0 #34343A,0 calc(var(--screen-w)*.29) 0 #34343A}
.phoneframe::after{content:"";position:absolute;right:-1.5px;top:calc(var(--screen-w)*.42);width:2px;height:calc(var(--screen-w)*.185);
  border-radius:2px;background:#34343A}
.caseopen .devlabel{display:block;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.caseopen .imgcol figcaption{text-align:center;margin-top:16px}
.casegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;margin-top:88px}
.casecard{position:relative}
.casecard .num{position:absolute;top:-38px;right:2px;font-family:var(--serif);font-weight:640;font-size:96px;line-height:1;color:#EBEBEB;z-index:0;user-select:none}
.casecard .frame{position:relative;z-index:1;border:1px solid var(--hairline);border-radius:var(--r-chrome);overflow:hidden;background:var(--paper)}
a.casecard-link,a.frame{display:block;color:inherit;text-decoration:none}
@media(hover:hover) and (pointer:fine){a.frame{transition:border-color .35s ease,box-shadow .35s ease}a.frame:hover{border-color:var(--purple);box-shadow:0 12px 28px -18px rgba(48,33,61,.35)}a.frame:hover .url{color:var(--purple-ink)}}
.casecard .bar{display:flex;gap:5px;align-items:center;background:var(--panel);padding:8px 12px;border-bottom:1px solid var(--hairline)}
.casecard .bar i{width:8px;height:8px;border-radius:50%;background:#D9D9D9;display:block}
.casecard .bar .url{font-family:var(--mono);font-size:9px;color:var(--mute);letter-spacing:.06em;margin-left:8px}
.casecard .frame img{width:100%;display:block;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top}
/* assets are born 4:3 (build-asserted) so the cover above can never crop */
.casecard .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-ink);display:block;margin:18px 0 8px}
.casecard h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;color:var(--ink);margin:0 0 8px}
.casecard p{font-size:14.5px;color:var(--ink-mid);margin:0 0 10px}
.casecard .chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.casecard .chip b{color:var(--ink);font-weight:600}
.casecard.ctacard{order:99}
.casecard.ctacard a{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:280px;border:1px dashed var(--purple-ink);border-radius:var(--r-chrome);padding:28px;text-decoration:none;background:var(--purple-tint)}
.casecard.ctacard a:hover{background:#EFE0FF}
.casecard.ctacard h3{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);margin:0 0 8px}
.casecard.ctacard p{font-size:14.5px;color:var(--ink-mid);margin:0 0 12px}
/* --faint (#767676) measures 4.35:1 on --paper-warm — under the 4.5 floor at 9px */
.permission{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block;margin-top:8px}
@media(max-width:1023px){.casegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.caseopen,.caseopen.flip{grid-template-columns:1fr;gap:32px}.caseopen.flip .imgcol{order:0}
  .phoneframe{--screen-w:248px;--bezel:9px;--radius:36px}}
@media(max-width:400px){.phoneframe{--screen-w:216px;--bezel:8px;--radius:32px}}
@media(max-width:639px){.casegrid{grid-template-columns:1fr;gap:56px}.casecard .num{font-size:64px;top:-28px}}
.caseopen .casetitle{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.15;color:var(--ink);margin:0 0 16px;text-wrap:balance}
.caseopen p{font-size:16px;color:var(--ink-mid);margin:0 0 14px}
.speclist{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--hairline)}
.speclist li{font-size:14.5px;color:var(--ink-mid);padding:9px 0;border-bottom:1px solid var(--hairline)}
.caseopen .measure{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.caseopen .measure b{color:var(--ink);font-weight:600}
blockquote.pull.small{margin:18px 0 0;border-left:3px solid var(--purple);padding:4px 0 4px 18px}
blockquote.pull.small p{font-family:var(--serif);font-style:italic;font-weight:480;font-size:16.5px;line-height:1.55;color:var(--ink);margin:0 0 8px}
blockquote.pull.small footer{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-ink)}
.pricebridge{margin:96px 0 8px}
.fmark{display:inline-flex;align-items:center;gap:10px}
.fmark img{height:18px;width:auto;display:block;opacity:.9}
/* KM banner loop: native 16:9, centred in its column (the .imgcol default is
   a 16:10 cover crop — this keeps the client's actual banner uncropped) */
/* height:auto is load-bearing — without it the HTML height attribute sets a fixed
   630px box and object-fit letterboxes the film inside it */
.imgcol video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-media)}
/* browser-framed recording: square corners (the window owns the radius) and 16:10 —
   it IS a 1280x800 browser viewport, so forcing 16:9 would crop real UI */
.imgcol.browser video{border-radius:0;aspect-ratio:16/10}
/* media inside a device frame is clipped by the screen's own 43px curve — a second,
   smaller radius on the element is redundant and can seam under WebKit compositing */
.phoneframe img,.phoneframe video{border-radius:0}
/* centre the whole figure (film + caption) against the taller text column,
   rather than stretching it and stranding the caption at the bottom */
.spread .imgcol:has(video){align-self:center}

/* ── /book: slot picker ── */
.bookhero{padding-bottom:40px}
.bookpanel{border-top:1px solid var(--hairline);padding:28px 0 96px}
.booknote{font-size:15px;color:var(--ink-mid);margin:0 0 18px;max-width:62ch}
.booknote[hidden]{display:none}
.bookdays{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 20px;margin-top:8px}
.bookday h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-ink);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.bookday .slots{display:grid;gap:8px}
.slot{font:600 12px/1 var(--sans);letter-spacing:.08em;padding:12px 10px;min-height:44px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);border-radius:2px;cursor:pointer;transition:border-color .25s ease,background-color .25s ease}
.slot:hover,.slot:focus-visible{border-color:var(--purple);background:var(--purple-tint);outline:none}
.slot:disabled{cursor:default;opacity:.55}
.slot.is-picked{background:var(--purple-ink);border-color:var(--purple-ink);color:#fff;opacity:1}
.bookdays .tznote{grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:8px 0 0}
.bookdone h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.15;color:var(--ink);margin:12px 0 16px}
.bookdone h2 em{font-style:italic;color:var(--purple-mid);font-weight:480}
.bookdone p{font-size:16px;color:var(--ink-mid);max-width:58ch}
.bookpanel[data-state="loading"] [data-when="nojs"]{display:none}
/* follow-up choice on the enquiry forms */
.followup{display:grid;gap:10px}
.followup legend{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-ink);margin-bottom:6px;padding:0}
.followup label{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans);font-size:14.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-mid);cursor:pointer;padding:10px 12px;border:1px solid var(--hairline);border-radius:2px;margin:0}
.followup label span{font:inherit;letter-spacing:0;text-transform:none}
.followup label:has(input:checked){border-color:var(--purple);background:var(--purple-tint);color:var(--ink)}
.followup input{margin-top:2px;accent-color:var(--purple-ink)}

/* /work: the page title is the kicker itself */
.pagehero h1.workkick{font:600 11px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--purple-ink);margin:0 0 8px;text-wrap:normal;max-width:none}
h1.seclabel,main>.wrap>.proof:first-child>h1.seclabel{font:600 10.5px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--purple-ink);margin:0 0 12px;text-wrap:normal;max-width:none}

/* ── the heart is the switch between the white and black variants ── */
.theme-toggle{background:none;border:0;padding:6px;margin:0 auto;display:flex;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;min-width:44px;min-height:44px;cursor:pointer;border-radius:50%;transition:transform .35s cubic-bezier(.23,1,.32,1)}
.theme-toggle .heartmark{margin:0;display:block}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover{transform:scale(1.08)}}
.theme-toggle:focus-visible{outline:2px solid var(--purple-ink);outline-offset:2px}
@media(max-width:899px){.theme-toggle{margin:0 0 0 auto;order:2}.theme-toggle .heartmark{display:block;height:20px}nav{order:3;width:100%}}
html.theme-switching body,html.theme-switching header,html.theme-switching footer{transition:background-color .22s ease,color .22s ease}
html[data-theme="dark"]{
  --paper:#0A0A0A;--paper-warm:#111111;--panel:#161616;--panel-line:#1F1F1F;
  --hairline:#262626;--ink:#F5F5F5;--ink-body:#E8E8E8;--ink-mid:#B8B8B8;--mute:#8F8F8F;--faint:#7A7A7A;
  --purple-ink:#C687FF;--purple-mid:#B98BF5;--purple-hover:#DDB8FF;--purple-tint:#1D1430;
  --folio:#1A1A1A;--folio-soft:#161616;--ledger-line:#3A2D4A;--ledger-rule:#3A2D4A;--on-purple:#0A0A0A;--shadow-ink:#000000;
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink-body)}
/* client logos are grey PNGs drawn for white paper: white silhouettes on black. The LYM wordmark and heart are purple and untouched. */
html[data-theme="dark"] .logos img,html[data-theme="dark"] .logoband img,html[data-theme="dark"] .credband .logo img,html[data-theme="dark"] .quotecol img,html[data-theme="dark"] .marks img,html[data-theme="dark"] .jfquote img{filter:brightness(0) invert(1) opacity(.85)}
html[data-theme="dark"] .btn-solid,html[data-theme="dark"] nav a.navcta:hover,html[data-theme="dark"] .slot.is-picked{color:var(--on-purple)}
html[data-theme="dark"] .skip{color:var(--on-purple)}

/* ── /book done state ── */
.bookfilm{margin:0 0 40px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"clip clip" "cap cap"}
.filmframe{grid-area:clip;position:relative;border:1px solid var(--hairline);border-top:3px solid var(--purple);background:var(--paper);overflow:hidden;border-radius:var(--r-media);box-shadow:0 28px 60px -40px color-mix(in srgb,var(--shadow-ink) 45%,transparent)}
.filmframe video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--paper);border-radius:inherit}
.soundbtn{grid-area:clip;justify-self:end;align-self:end;z-index:1;margin:0 16px 16px 0;min-height:44px;padding:0 16px;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--purple-ink);background:var(--paper);border:1px solid var(--purple-ink);border-radius:2px;cursor:pointer}
.soundbtn .off{display:none}.soundbtn[aria-pressed="true"] .on{display:none}.soundbtn[aria-pressed="true"] .off{display:inline}
.soundbtn[aria-pressed="true"]{background:var(--purple-ink);color:var(--on-purple)}
.filmcap{grid-area:cap;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:12px 0 0;max-width:none}
@media(max-width:760px){.bookfilm{grid-template-areas:"clip clip" "cap btn";align-items:center;column-gap:14px}.soundbtn{grid-area:btn;justify-self:end;align-self:center;margin:10px 0 0;min-height:38px;padding:0 13px;font-size:10px;letter-spacing:.14em}.filmcap{margin:12px 0 0}.filmcap .capx{display:none}}
.bookcard{position:relative;border:1px solid var(--panel-line);border-top:3px solid var(--purple);background:var(--paper-warm);padding:40px 44px 36px 44px;margin-top:8px}
.bookcard .tick{position:absolute;right:40px;top:36px;width:56px;height:56px}
.bookcard .kick{margin-bottom:14px}
.bookcard h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.15;color:var(--ink);margin:0 0 10px;max-width:22ch;text-wrap:balance}
.bookcard h2 em{font-style:italic;color:var(--purple-mid);font-weight:480}
.bookline{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 26px}
.bookmeta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:18px 0}
.bookmeta .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.bookmeta b{font-weight:600;color:var(--ink);font-size:14.5px;overflow-wrap:anywhere}
.bookactions{margin-top:26px;gap:12px 14px;flex-wrap:wrap}
.bookmanage{font-size:14px;color:var(--ink-mid);margin:22px 0 0;max-width:62ch}
.bookmanage .inlink{font-weight:600}
.bookecho{margin-top:40px;border-top:1px solid var(--hairline);padding-top:28px}
.bookecho dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 40px;margin:0}
.bookecho dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.bookecho dd{margin:0;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink)}
.bookagenda{margin-top:40px;border-top:1px solid var(--hairline);padding-top:28px}
.agenda{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.agenda li{position:relative;padding-top:8px}
.agenda .i{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--purple-ink);margin-bottom:10px}
.agenda h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;color:var(--ink);margin:0 0 8px}
.agenda p{font-size:15px;color:var(--ink-mid);margin:0;max-width:34ch}
.bookagenda .booknote{margin:22px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-ink)}
.bookproof{margin-top:44px;border-top:1px solid var(--hairline);padding-top:28px}
.proofrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:8px}
.proofrow figure{margin:0}
.proofrow .phoneframe{--screen-w:180px;--bezel:7px;--radius:28px;margin:0 auto}
.proofrow figcaption{text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:12px}
@media(prefers-reduced-motion:no-preference){
  .bookcard .tickpath{stroke-dasharray:40;stroke-dashoffset:40;animation:tickdraw .6s .35s cubic-bezier(.23,1,.32,1) forwards}
  @keyframes tickdraw{to{stroke-dashoffset:0}}
  .bookdone>*{opacity:0;transform:translateY(10px);animation:bookrise .6s cubic-bezier(.23,1,.32,1) forwards}
  .bookdone>*:nth-child(2){animation-delay:.05s}.bookdone>*:nth-child(3){animation-delay:.18s}.bookdone>*:nth-child(4){animation-delay:.3s}.bookdone>*:nth-child(5){animation-delay:.42s}
  @keyframes bookrise{to{opacity:1;transform:none}}
}
@media(max-width:900px){.bookmeta{grid-template-columns:1fr 1fr}.agenda{grid-template-columns:1fr;gap:22px}.proofrow{grid-template-columns:1fr;gap:28px}.bookecho dl{grid-template-columns:1fr}.bookcard{padding:30px 22px 28px}.bookcard .tick{right:22px;top:26px;width:44px;height:44px}.bookcard h2{padding-right:56px}}

/* /book done state: hero shrinks so the film sits above the fold on a desktop and mid-screen on a phone */
html.book-done .pagehero.bookhero{padding:36px 0 20px}
html.book-done .bookhero .kick{margin-bottom:14px}
html.book-done .bookhero h1{font-size:clamp(26px,2.6vw,36px);line-height:1.1;margin:0 0 8px}
html.book-done .bookhero .intro{font-size:15px;margin:8px 0 0}
html.book-done .bookpanel{padding-top:22px}
html.book-done .bookfilm{max-width:max(560px,min(100%,calc((100vh - 340px) * 16 / 9)))}
@media(max-width:760px){html.book-done .pagehero.bookhero{padding:22px 0 14px}html.book-done .bookhero .kick{margin-bottom:10px}html.book-done .bookhero h1{font-size:25px}html.book-done .bookhero .intro{font-size:14.5px}html.book-done .bookpanel{padding-top:16px}html.book-done .bookfilm{max-width:none}}

/* /about: the studio's own story, told in footage */
.abouttop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;padding:56px 0 0}
.abouttext .intro{font-size:17.5px;color:var(--ink-mid);max-width:52ch;margin:22px 0 0}.abouttext .intro b{color:var(--ink);font-weight:600}
.aboutline{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.012em;color:var(--ink);max-width:24ch;margin:0}
.aboutline em{font-style:italic;color:var(--purple-mid);font-weight:480}
.aboutfilm{display:grid;grid-template-columns:1fr}
.aboutfilm .filmframe video{aspect-ratio:16/9;object-fit:cover}
.aboutgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;margin-top:40px;align-items:start}
.aboutgrid.rev{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.aboutcopy p{font-size:17px;line-height:1.7;color:var(--ink-mid);max-width:56ch;margin:0 0 20px}
.aboutcopy p b{color:var(--ink);font-weight:600}
.aboutstills{display:grid;gap:20px}
.aboutstills figure,.aboutwide{margin:0}
.aboutstills img,.aboutwide img,.filmframe.small video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-media);border:1px solid var(--hairline)}
.aboutstills figcaption,.aboutwide figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:10px 0 0}
.aboutloop .filmframe.small{border-top-width:1px;box-shadow:none}
.aboutwide{margin-top:48px;max-width:760px}
.stayed{border-top:1px solid var(--hairline);margin-top:48px}
.stayrow{display:grid;grid-template-columns:190px 1fr;gap:36px;padding:26px 0;border-bottom:1px solid var(--hairline)}
.stayrow .m{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-ink);padding-top:6px}
.stayrow p{font-size:16.5px;line-height:1.65;color:var(--ink-mid);max-width:58ch;margin:0}
@media(max-width:960px){.abouttop{grid-template-columns:1fr;gap:28px;align-items:start}.aboutgrid,.aboutgrid.rev{grid-template-columns:1fr;gap:28px}.stayrow{grid-template-columns:1fr;gap:8px}}
@media(max-width:760px){.aboutfilm{max-width:none}.aboutline{font-size:24px;max-width:none}.aboutcopy p{font-size:16px}}
.aboutcentre{display:grid;margin-top:40px}
.aboutcentre .filmframe{border-top-width:1px}
.aboutreel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:300px 300px;gap:14px;margin-top:40px;grid-template-areas:"a b c f" "a b d e"}
.reeltile{position:relative;overflow:hidden;border-radius:var(--r-media);border:1px solid var(--hairline);background:var(--panel)}
.reeltile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reeltile span{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);z-index:1}
.reeltile.a{grid-area:a}.reeltile.b{grid-area:b}.reeltile.c{grid-area:c}.reeltile.d{grid-area:d}.reeltile.e{grid-area:e}.reeltile.f{grid-area:f}
.aboutstills .reeltile.tall{aspect-ratio:9/16;max-width:320px;margin-left:auto}
@media(max-width:960px){.aboutreel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"a b" "c f" "d e"}.reeltile{aspect-ratio:9/16}.reeltile.a,.reeltile.b{aspect-ratio:9/16}.aboutstills .reeltile.tall{margin-left:0}}
@media(max-width:600px){.aboutreel{gap:10px}}
/* /about hero: three phones, three films, fanned; hover untilts */
@property --tilt{syntax:"<angle>";inherits:false;initial-value:0deg}
.herofan{display:flex;justify-content:center;align-items:flex-end;gap:0;padding:12px 0 24px}
.herofan .phone-plane{position:relative;flex:0 0 auto;transform:rotate(var(--tilt)) translateY(var(--lift,0px));transition:--tilt .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.herofan .p1{--tilt:-6deg;--lift:18px;z-index:1;margin-right:-22px}
.herofan .p2{--tilt:0deg;--lift:-10px;z-index:3}
.herofan .p3{--tilt:6deg;--lift:18px;z-index:2;margin-left:-22px}
.herofan .phoneframe{--screen-w:176px;--bezel:7px;--radius:28px;margin:0;box-shadow:0 30px 60px -34px var(--shadow-ink)}
.herofan .phoneframe .screen{aspect-ratio:9/16}
.herofan .fancap{display:block;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:14px;opacity:0;transition:opacity .4s}
.herofan .phone-plane:hover .fancap{opacity:1}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.herofan:hover .phone-plane{--tilt:0deg;--lift:0px}.herofan .phone-plane:hover{transform:rotate(0deg) translateY(-8px)}}
@media(max-width:1100px) and (min-width:761px){.herofan .phoneframe{--screen-w:150px}}
@media(max-width:760px){.abouttop{padding-top:24px}.herofan{justify-content:flex-start;align-items:center;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 20px;margin:0 calc(-1 * var(--gutter,22px));padding-inline:var(--gutter,22px);scrollbar-width:none;-webkit-overflow-scrolling:touch}.herofan::-webkit-scrollbar{display:none}.herofan .phone-plane{scroll-snap-align:center;--tilt:0deg;--lift:0px;margin:0;transform:none}.herofan .phoneframe{--screen-w:min(62vw,236px);--bezel:8px;--radius:32px}.herofan .fancap{opacity:1}}


/* /about v6: the shrine. Gallery grammar around hero A: a six-phone reel wall modelled on the hero, then the film */
.herolabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:20px 0 0}
.aboutgrow{--fp:1;margin:28px auto 0;width:calc(64% + 36% * var(--fp));grid-template-areas:"clip" "cap"}.aboutgrow .filmcap{grid-area:cap}
.aboutgrow .filmframe{border-radius:calc(var(--r-media) + 26px * (1 - var(--fp)))}
.phonewall,.landfan{--rx:0deg;--ry:0deg;--wp:0;perspective:1800px;margin-top:8px}
.phonewall .wallstage,.landfan .landstage{transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
.herofan.six{justify-content:center;align-items:flex-end;gap:0;padding:28px 0 12px}
.herofan.six .phoneframe{--screen-w:150px;--bezel:6px;--radius:26px}
.herofan.six .phone-plane{margin:0 -6px}
.herofan.six .q1{--tilt:-7deg;--lift:26px;z-index:1}.herofan.six .q2{--tilt:-4deg;--lift:10px;z-index:2}.herofan.six .q3{--tilt:-1.5deg;--lift:0px;z-index:3}
.herofan.six .q4{--tilt:1.5deg;--lift:0px;z-index:3}.herofan.six .q5{--tilt:4deg;--lift:10px;z-index:2}.herofan.six .q6{--tilt:7deg;--lift:26px;z-index:1}
.herofan.six .phone-plane{transform:rotate(var(--tilt)) translateY(calc(var(--lift,0px) + var(--wp) * var(--drift,0px)))}
.herofan.six .q1,.herofan.six .q6{--drift:-22px}.herofan.six .q2,.herofan.six .q5{--drift:-10px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.herofan.six:hover .phone-plane{--tilt:0deg;--lift:0px}.herofan.six .phone-plane:hover{transform:rotate(0deg) translateY(-10px)}}
@media(max-width:1200px) and (min-width:761px){.herofan.six .phoneframe{--screen-w:120px;--bezel:5px;--radius:22px}}
@media(max-width:760px){.aboutgrow{width:100%}.aboutgrow .filmframe{border-radius:var(--r-media)}.phonewall{perspective:none}.phonewall .wallstage{transform:none}.herofan.six{justify-content:flex-start;align-items:center;gap:16px;padding:8px 0 20px}.herofan.six .phone-plane{margin:0;transform:none}.herofan.six .phoneframe{--screen-w:min(62vw,236px);--bezel:8px;--radius:32px}}
/* /about: two landscape phones, one in front of the other; hover or tap swaps the focus */
.phoneframe.land{--screen-w:640px;--bezel:9px;--radius:34px;margin:0}
.phoneframe.land .screen{aspect-ratio:16/9}
.phoneframe.land .screen video{object-position:center}
.phoneframe.land .island{top:50%;left:calc(var(--screen-w)*.019);transform:translateY(-50%);width:calc(var(--screen-w)*.047);height:calc(var(--screen-w)*.16)}
.phoneframe.land::before{left:calc(var(--screen-w)*.17);top:-1.5px;width:calc(var(--screen-w)*.048);height:2px;box-shadow:calc(var(--screen-w)*.082) 0 0 #34343A,calc(var(--screen-w)*.164) 0 0 #34343A}
.phoneframe.land::after{right:auto;left:calc(var(--screen-w)*.42);bottom:-1.5px;top:auto;width:calc(var(--screen-w)*.104);height:2px}
.landfan{position:relative;height:520px;margin-top:36px;perspective:none;transform:perspective(1800px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
.landfan .phone-plane{position:absolute;transition:--tilt .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),filter .6s,z-index 0s .3s}
.landfan .phone-plane .phoneframe{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.14) inset,0 40px 80px -36px var(--shadow-ink)}
.landfan .l1{left:0;top:72px;--tilt:-2deg;z-index:2;transform:rotate(var(--tilt)) translateY(calc(var(--wp) * -14px))}
.landfan .l2{right:0;top:0;--tilt:2.5deg;z-index:1;transform:rotate(var(--tilt)) translateY(calc(var(--wp) * 22px)) scale(.94);filter:brightness(.82) saturate(.9)}
.landfan[data-front="l2"] .l1{z-index:1;transform:rotate(var(--tilt)) translateY(calc(var(--wp) * -14px)) scale(.94);filter:brightness(.82) saturate(.9)}
.landfan[data-front="l2"] .l2{z-index:2;transform:rotate(var(--tilt)) translateY(calc(var(--wp) * 22px)) scale(1);filter:none}
.landfan .fancap{display:block;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:14px;opacity:0;transition:opacity .4s}
.landfan .phone-plane:hover .fancap{opacity:1}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.landfan:hover .phone-plane{--tilt:0deg}}
@media(max-width:1200px) and (min-width:761px){.phoneframe.land{--screen-w:min(56vw,560px)}.landfan{height:calc(min(56vw,560px) * 9 / 16 + 140px)}}
@media(max-width:760px){.landfan{height:auto;transform:none;display:grid;gap:28px;margin-top:20px}.landfan .phone-plane,.landfan[data-front="l2"] .l1,.landfan[data-front="l2"] .l2{position:static;transform:none;filter:none}.phoneframe.land{--screen-w:calc(100vw - 2 * var(--gutter,22px) - 14px);--bezel:7px;--radius:26px;margin:0 auto}.landfan .fancap{opacity:1}}
/* /about: the craft, a mirror of the hero (phones left, line right) */
.abouttop.craft{grid-template-columns:minmax(0,6fr) minmax(0,5fr);padding:0}
.abouttop.craft .abouttext{padding-left:8px}
@media(max-width:960px){.abouttop.craft{grid-template-columns:1fr}.abouttop.craft .herofan{order:2}.abouttop.craft .abouttext{order:1;padding-left:0}}