/* v3.css — DN Studio v3 design system: tokens, base, type, layout and every shared component.
   Spec: _board/v3/MASTER_SPEC.md §4 · kit and markup snippets: _board/v3/KIT.md.
   Rules: ink 80% / white 17% / red ≤3% of any viewport · hairlines, not boxes · one mega moment per page ·
   red text under 24px always uses --red-text · native scroll, nothing pinned · every motion stops under reduced motion. */

/* ------------------------------------------------------------------ fonts (self-hosted; font-src 'self') */
@font-face{font-family:"Cabinet";src:url("/assets/fonts/cabinet-500.woff2?v=b39b4abd1d") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet";src:url("/assets/fonts/cabinet-800.woff2?v=c29ab71289") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight-latin.woff2?v=4179443c53") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2?v=bb87500e32") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2?v=d32f0e0701") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens (spec §4.1) */
:root{
  /* colour */
  --ink:#0A0A0A; --ink-2:#111111; --ink-3:#1A1A1A; --hero-black:#050505;
  --paper:#FFFFFF; --paper-ink:#0A0A0A; --paper-2:rgba(10,10,10,.72); --paper-3:rgba(10,10,10,.6); --paper-line:rgba(10,10,10,.14);
  --fg-1:#FFFFFF; --fg-2:rgba(255,255,255,.72); --fg-3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.24);
  --red:#E1251B; --red-text:#EC3B30; --red-hover:#C81E15; --on-red:#FFFFFF; --focus:#FFFFFF;
  /* legacy aliases (DN Assist CSS and older components read these) */
  --red-t:var(--red-text); --card:#0d0d0c; --ok:#3ecf8e;

  /* type */
  --font-display:"Cabinet","Cabinet Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-text:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-mega:clamp(64px,11.5vw,184px);
  --fs-d1:clamp(44px,6.4vw,104px);
  --fs-h2:clamp(32px,3.75vw,60px);
  --fs-h3:clamp(24px,2.25vw,36px);
  --fs-lede:clamp(20px,1.75vw,28px);
  --fs-body:clamp(17px,1.25vw,19px);
  --fs-small:14px; --fs-label:11px;

  /* grid + space */
  --cols:12; --margin:clamp(20px,3.33vw,48px); --gutter:clamp(12px,1.67vw,24px); --maxw:1680px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px; --s-11:192px; --section:clamp(88px,10vw,160px);
  --radius:0; --radius-ui:2px; --hd:72px;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.83,0,.17,1);
  --ease-ui:cubic-bezier(.32,.72,0,1);
  --t-micro:160ms; --t-ui:320ms; --t-reveal:900ms; --t-media:1200ms; --t-page:700ms;
  --stagger-line:80ms; --stagger-item:60ms;
}
@media (max-width:767px){:root{--cols:4;--hd:60px}}
@media (min-width:768px) and (max-width:1023px){:root{--cols:8}}
@media (max-width:599px){:root{--fs-label:12px}}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);color-scheme:dark;scroll-padding-top:calc(var(--hd) + 16px);overflow-x:clip}
body{margin:0;min-height:100vh;background:var(--ink);color:var(--fg-1);font-family:var(--font-text);font-size:var(--fs-body);line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg,picture{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ol,ul,figure,blockquote,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
.sec--paper :focus-visible{outline-color:var(--paper-ink);box-shadow:0 0 0 2px var(--paper)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:200;left:var(--margin);top:-80px;padding:14px 18px;background:var(--paper);color:var(--paper-ink);font:500 14px/1 var(--font-text);transition:top var(--t-micro) var(--ease-ui)}
.skip:focus{top:12px}
main{display:block}
html:not([data-hd="over"]) main{padding-top:var(--hd)}

/* ------------------------------------------------------------------ type */
.mega{font-family:var(--font-display);font-weight:800;font-size:var(--fs-mega);line-height:.86;letter-spacing:-.05em}
.d1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-d1);line-height:.94;letter-spacing:-.035em;text-wrap:balance}
.h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.h3{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.lede{font-family:var(--font-text);font-weight:400;font-size:var(--fs-lede);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.body{font-size:var(--fs-body);line-height:1.55;max-width:64ch;text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.45}
.muted{color:var(--fg-2)}
.faint{color:var(--fg-3)}
.label{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.label b,.label strong{color:var(--fg-1);font-weight:500}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);vertical-align:middle;margin-right:10px;flex:none;position:relative;top:-1px}
.red-text{color:var(--red-text)}
.nw{white-space:nowrap}
.prose p+p{margin-top:1em}
.prose a,.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line-strong);transition:text-decoration-color var(--t-micro)}
.prose a:hover,.tl:hover{text-decoration-color:currentColor}

/* ------------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.sec{position:relative;padding-block:var(--section)}
.sec--tight{padding-block:calc(var(--section) * .6)}
.sec--paper{background:var(--paper);color:var(--paper-ink)}
.sec--paper .label{color:var(--paper-3)}
.sec--paper .muted{color:var(--paper-2)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ------------------------------------------------------------------ buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--radius-ui);
  font:500 15px/1 var(--font-text);letter-spacing:-.005em;white-space:nowrap;transition:background-color var(--t-micro) var(--ease-ui),color var(--t-micro) var(--ease-ui),box-shadow var(--t-micro) var(--ease-ui)}
.btn--red{background:var(--red);color:var(--on-red)}
.btn--line{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--fg-1)}
.btn--ink{background:var(--paper-ink);color:var(--paper)}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.btn .go{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover){
  .btn--red:hover{background:var(--red-hover)}
  .btn--line:hover{box-shadow:inset 0 0 0 1px var(--fg-1)}
  .btn--ink:hover{background:#2a2a2a}
  .btn:hover .go{transform:translateX(4px)}
}
.go{display:inline-block;font-family:var(--font-text);font-weight:400}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1 var(--font-text);color:var(--fg-1);
  background:linear-gradient(currentColor,currentColor) 0 calc(50% + .85em)/100% 1px no-repeat;padding:0;transition:background-size var(--t-ui) var(--ease-out)}
.tlink .ic{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);display:grid;place-items:center;flex:none;transition:box-shadow var(--t-micro)}
.tlink .ic svg{width:9px;height:9px;margin-left:2px}
.tlink.has-ic{background-position:38px calc(50% + .85em);background-size:calc(100% - 38px) 1px}
@media (hover:hover){.tlink:hover{background-size:0 1px}.tlink.has-ic:hover{background-size:0 1px}.tlink:hover .ic{box-shadow:inset 0 0 0 1px var(--fg-1)}}
.sec--paper .tlink{color:var(--paper-ink)}
.sec--paper .tlink .ic{box-shadow:inset 0 0 0 1px var(--paper-line)}

/* ------------------------------------------------------------------ header (spec §3.2) */
.hd{position:fixed;z-index:60;top:0;left:0;right:0;height:var(--hd);color:var(--fg-1);view-transition-name:dn-hd;
  transition:background-color var(--t-ui) var(--ease-ui),box-shadow var(--t-ui) var(--ease-ui)}
.hd::before{content:"";position:absolute;inset:0 0 -40px;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.6),rgba(5,5,5,0));opacity:0;transition:opacity var(--t-ui) var(--ease-ui)}
html[data-hd="over"] .hd:not(.is-solid)::before{opacity:1}
.hd.is-solid,html:not([data-hd="over"]) .hd{background:var(--ink);box-shadow:0 1px 0 var(--line)}
.hd-in{position:relative;height:100%;display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.hd-brand{display:flex;align-items:center;gap:12px;flex:none;min-height:44px;margin-right:auto}
.hd-mark{width:auto;height:26px;overflow:visible}
.hd-mark .w{fill:#fff}.hd-mark .k{fill:var(--ink)}.hd-mark .r{fill:var(--red)}
.hd-studio{font:500 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-1);padding-top:1px}
.hd-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px)}
.hd-nav>a,.hd-svc{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;font:500 15px/1 var(--font-text);color:var(--fg-2);transition:color var(--t-micro)}
.hd-nav>a[aria-current="page"],.hd-svc[aria-expanded="true"],.hd-svc[data-current="true"]{color:var(--fg-1)}
.hd-nav>a[aria-current="page"]::after,.hd-svc[data-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor}
.hd-svc .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t-ui) var(--ease-ui)}
.hd-svc[aria-expanded="true"] .chev{transform:translateY(1px) rotate(-135deg)}
@media (hover:hover){.hd-nav>a:hover,.hd-svc:hover{color:var(--fg-1)}}
.hd-cta{flex:none}
.hd-menu{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;justify-content:center;font:500 15px/1 var(--font-text);color:var(--fg-1)}
.hd-menu i{display:block;width:18px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
/* the mark claps once on first load (0.6 s), static after */
.hd-mark .mark-arm{transform-box:fill-box;transform-origin:4% 100%}
.hd.clap .hd-mark .mark-arm{animation:hd-clap .6s var(--ease-ui) both}
@keyframes hd-clap{0%{transform:rotate(0)}35%{transform:rotate(-16deg)}70%{transform:rotate(0)}82%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@media (max-width:899px){
  .hd-nav{display:none}
  .hd-menu{display:inline-flex}
  .hd-cta{min-height:40px;padding:0 14px;font-size:14px}
}
@media (max-width:379px){.hd-studio{display:none}.hd-menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* Services sheet (desktop): four lines with their "from" figures */
.sheet{position:absolute;left:0;right:0;top:100%;background:var(--ink-2);box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line);
  clip-path:inset(0 0 0 0);transition:clip-path var(--t-ui) var(--ease-ui)}
.sheet[data-state="closed"]{clip-path:inset(0 0 100% 0)}
.sheet-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:var(--s-6) var(--s-7)}
.sheet-row{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-5) 0;margin-right:var(--s-5);border-top:1px solid var(--line);min-height:180px;transition:border-color var(--t-micro)}
.sheet-row .label{display:flex;justify-content:space-between}
.sheet-t{font:500 clamp(24px,2vw,32px)/1.05 var(--font-display);letter-spacing:-.015em}
.sheet-c{font-size:15px;line-height:1.45;color:var(--fg-2);max-width:30ch}
.sheet-f{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;font:500 15px/1 var(--font-text)}
.sheet-f .go{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover){.sheet-row:hover{border-color:var(--fg-1)}.sheet-row:hover .go{transform:translateX(4px)}}
.hd.sheet-open{background:var(--ink-2)}
.hd.sheet-open::before{opacity:0!important}
@media (max-width:899px){.sheet{display:none!important}}

/* Menu sheet (phone): nav, services, DN Assist, WhatsApp, email */
.msheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--fg-1);overflow-y:auto;overscroll-behavior:contain}
.msheet::backdrop{background:rgba(0,0,0,.6)}
.msheet[open]{animation:ms-in var(--t-ui) var(--ease-ui) both}
@keyframes ms-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.msheet-top{position:sticky;top:0;height:var(--hd);display:flex;align-items:center;justify-content:space-between;background:var(--ink);box-shadow:0 1px 0 var(--line)}
.msheet-x{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;justify-content:flex-end;font:500 15px/1 var(--font-text)}
.msheet-x i{position:relative;width:16px;height:16px}
.msheet-x i::before,.msheet-x i::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.msheet-x i::after{transform:rotate(-45deg)}
.msheet-body{padding-block:var(--s-5) var(--s-7);display:flex;flex-direction:column;gap:var(--s-6)}
.msheet-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font:500 30px/1.05 var(--font-display);letter-spacing:-.015em}
.msheet-nav a[aria-current="page"]{color:var(--fg-1)}
.msheet-nav a[aria-current="page"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);align-self:center}
.msheet-svc a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.msheet-svc b{font:500 18px/1.2 var(--font-text)}
.msheet-svc small{grid-column:1;font-size:14px;line-height:1.4;color:var(--fg-2)}
.msheet-svc em{grid-column:2;grid-row:1/span 2;align-self:center;font:500 12px/1 var(--font-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.msheet-acts{display:flex;flex-direction:column;gap:12px}
.msheet-acts .btn{width:100%}
.msheet-foot{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--fg-2)}
.msheet-foot a{min-height:44px;display:flex;align-items:center}

/* ------------------------------------------------------------------ section header: "TAKE 0N · NAME" over a Cabinet 500 H2 (component 17) */
.sh{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-5);align-items:end;margin-bottom:clamp(40px,5vw,80px)}
.sh-label{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-top:var(--s-4);border-top:1px solid var(--line)}
.sec--paper .sh-label{border-top-color:var(--paper-line)}
.sh-h{grid-column:1/span 7}
.sh-sub{grid-column:9/-1;color:var(--fg-2);font-size:var(--fs-body);line-height:1.5;max-width:44ch;justify-self:start;padding-bottom:.3em}
.sec--paper .sh-sub{color:var(--paper-2)}
@media (max-width:1023px){.sh-h{grid-column:1/-1}.sh-sub{grid-column:1/-1}}

/* line-rise text and reveals (spec §4.2 #5) — JS adds .in once at 15% visibility */
.ln{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}
html.js [data-rv="lines"] .ln>span{transform:translateY(.6em);opacity:0;transition:transform var(--t-reveal) var(--ease-out),opacity var(--t-reveal) var(--ease-out);transition-delay:calc(var(--l,0) * var(--stagger-line))}
html.js [data-rv="lines"].in .ln>span{transform:none;opacity:1}
html.js [data-rv="up"]{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger-item))}
html.js [data-rv="up"].in{opacity:1;transform:none}
/* media plate: an ink panel retracts upward (the look of clip-path inset(100% 0 0 0) → inset(0); a clip on the observed
   element itself would hide it from IntersectionObserver), while the image inside settles from scale 1.06 to 1 */
html.js [data-rv="media"]{position:relative}
html.js [data-rv="media"]::after{content:"";position:absolute;inset:0;z-index:6;background:var(--ink);transform-origin:50% 0;pointer-events:none;
  transition:transform var(--t-media) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger-item))}
html.js [data-rv="media"].in::after{transform:scaleY(0)}
html.js [data-rv="media"] .rv-in{transform:scale(1.06);transition:transform var(--t-media) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger-item))}
html.js [data-rv="media"].in .rv-in{transform:none}
html.js [data-rv].in.done,html.js [data-rv].in.done::after{transition:none}

/* ------------------------------------------------------------------ video primitive (component 16) */
.vid{position:relative;overflow:hidden;background:var(--hero-black);aspect-ratio:var(--ar,16/9)}
.vid>img,.vid>picture,.vid>picture>img,.vid>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid>video{opacity:0;transition:opacity 600ms var(--ease-inout)}
.vid>video.is-playing{opacity:1}
.vid.is-still>video{display:none}
.vtog{position:absolute;z-index:3;right:var(--s-4);bottom:var(--s-4);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 12px;
  background:rgba(10,10,10,.55);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius-ui);color:var(--fg-1);
  font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:box-shadow var(--t-micro)}
.vtog svg{width:12px;height:12px;flex:none}
.vtog .i-play{display:none}
.vtog[data-state="paused"] .i-play{display:block}
.vtog[data-state="paused"] .i-pause{display:none}
@media (hover:hover){.vtog:hover{box-shadow:inset 0 0 0 1px var(--fg-1)}}

/* ------------------------------------------------------------------ home hero (spec §3.4 #1, §5.4) */
.hero{position:relative;min-height:max(600px,100svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--hero-black);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-film{opacity:0;transition:opacity 800ms var(--ease-inout)}
.hero-film.is-playing{opacity:1}
.hero.is-still .hero-film{display:none}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.5) 38%,rgba(5,5,5,0) 70%),linear-gradient(0deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.4) 34%,rgba(5,5,5,0) 58%)}
@media (max-width:767px){.hero-shade{background:linear-gradient(0deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.78) 38%,rgba(5,5,5,.2) 64%,rgba(5,5,5,.35) 100%)}}
.hero-in{padding-top:calc(var(--hd) + 48px);padding-bottom:clamp(28px,5.5vh,64px);padding-right:calc(var(--margin) + 120px)}
@media (max-width:767px){.hero-in{padding-right:var(--margin);padding-bottom:88px}}
.hero-meta{display:flex;align-items:center;margin-bottom:clamp(18px,2.4vw,32px);color:var(--fg-2)}
.hero-h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:min(var(--fs-mega),18.6vw);line-height:.86;letter-spacing:-.05em;color:var(--fg-1)}
.hero-h1 .l1,.hero-h1 .l2{display:block;white-space:nowrap}
.hero-h1 .l2{color:var(--red)}
.hero-h1 .l2[data-decode]{animation:dc-show 0s 1.2s both}
html.js .hero-h1 .l2[data-decode]{animation:none}
@keyframes dc-show{from{visibility:hidden}to{visibility:visible}}
.dc{position:relative;display:inline}
.dc.scr{color:transparent}
.dc.scr::after{content:attr(data-g);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--red);font:400 .56em/1 var(--font-mono);letter-spacing:0;opacity:.95}
.hero-h1 .l2.sweep{background:linear-gradient(100deg,var(--red) 0 42%,#FFD7D3 50%,var(--red) 58% 100%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sweep 800ms var(--ease-inout) forwards}
@keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}
.hero-sub{max-width:31ch;margin-top:clamp(20px,2.4vw,32px);color:var(--fg-1)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(24px,3vw,40px)}
.hero .vtog{right:var(--margin);bottom:clamp(28px,5.5vh,64px)}
@media (max-width:767px){.hero .vtog{bottom:24px}}

/* ------------------------------------------------------------------ reel switcher (spec §4.2 #2) */
.rl{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-5)}
.rl-side{grid-column:1/span 4;display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.rl-rail{border-top:1px solid var(--line);counter-reset:rl}
.rl-view{grid-column:5/-1;min-width:0}
.rl-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--hero-black)}
.rl-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 600ms var(--ease-inout),visibility 0s linear 600ms}
.rl-slide.is-on{opacity:1;visibility:visible;transition:opacity 600ms var(--ease-inout),visibility 0s}
.rl-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(36px) brightness(.38) saturate(1.1);transform:translateZ(0)}
.rl-slide[data-ar="wide"] .rl-bg{display:none}
.rl-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rl-slide[data-ar="wide"] .rl-media{object-fit:cover}
.rl-slide video.rl-media{opacity:0;transition:opacity 600ms var(--ease-inout)}
.rl-slide video.rl-media.is-playing{opacity:1}
.rl-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;cursor:pointer}
.rl-stage .vtog{z-index:4}
.rl-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-4) var(--s-6);padding-top:var(--s-5)}
.rl-meta{display:flex;align-items:center}
.rl-title{grid-column:1;margin-top:var(--s-3)}
.rl-acts{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;gap:20px}
.rl-title.swap .ln>span{animation:ln-rise var(--t-reveal) var(--ease-out) both}
@keyframes ln-rise{from{transform:translateY(.6em);opacity:0}to{transform:none;opacity:1}}
.rl-tab{position:relative;display:grid;grid-template-columns:24px 64px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:12px 0;border-bottom:1px solid var(--line);color:var(--fg-2);transition:color var(--t-micro)}
.rl-tab::before{counter-increment:rl;content:counter(rl,decimal-leading-zero);font:500 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-3)}
.rl-thumb{position:relative;width:64px;height:40px;display:grid;place-items:center;background:var(--hero-black);overflow:hidden;outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--t-micro)}
.rl-thumb img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain}
.rl-thumb img.wide{width:100%;height:100%;object-fit:cover}
.rl-t{font:500 16px/1.3 var(--font-text);color:inherit;min-width:0}
.rl-t small{display:block;margin-top:3px;font:500 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.rl-d{font:500 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-3)}
.rl-tab[aria-selected="true"]{color:var(--fg-1)}
.rl-tab[aria-selected="true"] .rl-thumb{outline-color:var(--fg-1)}
.rl-tab[aria-selected="true"] .rl-d::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
@media (hover:hover){.rl-tab:hover{color:var(--fg-1)}}
@media (max-width:1023px){
  .rl-side{grid-column:1/-1;order:2}
  .rl-rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;border-top:0;padding-bottom:6px;scrollbar-width:none;
    margin-inline:calc(var(--margin) * -1);padding-inline:var(--margin);scroll-padding-inline:var(--margin)}
  .rl-rail::-webkit-scrollbar{display:none}
  .rl-rail li{flex:none;scroll-snap-align:start}
  .rl-tab{grid-template-columns:auto;width:148px;gap:10px;padding:0;border-bottom:0}
  .rl-tab::before{display:none}
  .rl-thumb{width:148px;height:92px}
  .rl-d{display:none}
  .rl-t{font-size:14px}
  .rl-view{grid-column:1/-1;order:1}
}
@media (max-width:767px){
  .rl-stage{aspect-ratio:4/5}
  .rl-slide[data-ar="wide"] .rl-bg{display:block}
  .rl-slide[data-ar="wide"] .rl-media{object-fit:contain}
  .rl-cap{grid-template-columns:minmax(0,1fr)}
  .rl-acts{grid-column:1;grid-row:auto}
}

/* Quick View player (dialog) */
.qv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,5,5,.96);color:var(--fg-1)}
.qv::backdrop{background:rgba(5,5,5,.9)}
.qv[open]{display:grid;place-items:center;animation:qv-in var(--t-ui) var(--ease-ui) both}
@keyframes qv-in{from{opacity:0}to{opacity:1}}
.qv-in{width:min(100% - 2 * var(--margin),1600px);display:flex;flex-direction:column;gap:14px;align-items:center}
.qv-media{position:relative;width:100%;display:grid;place-items:center}
.qv-media video{max-width:100%;max-height:calc(100svh - 140px);width:auto;height:auto;background:#000}
.qv-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.qv-title{font:500 15px/1.35 var(--font-text);color:var(--fg-2)}
.qv-x{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.qv-x i{position:relative;width:14px;height:14px}
.qv-x i::before,.qv-x i::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.qv-x i::after{transform:rotate(-45deg)}
html.qv-on,html.ms-on{overflow:hidden}

/* ------------------------------------------------------------------ statement: the page's one paper band */
.statement{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);align-items:start}
.st-label{grid-column:1/-1;display:flex;align-items:center;padding-top:var(--s-4);border-top:1px solid var(--paper-line)}
.st-h{grid-column:1/span 5}
.st-p{grid-column:7/-1;max-width:34ch;color:var(--paper-ink)}
@media (max-width:1023px){.st-h,.st-p{grid-column:1/-1}}

/* ------------------------------------------------------------------ services rows (component 7) */
.svc-rows{border-top:1px solid var(--line);counter-reset:svc}
.svc-row{position:relative;display:grid;grid-template-columns:48px minmax(0,3fr) minmax(0,4fr) minmax(0,3fr) minmax(120px,2fr) 32px;gap:var(--s-5) var(--gutter);align-items:center;
  padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);transition:background-color var(--t-ui) var(--ease-ui)}
.svc-n{align-self:start;padding-top:.7em}
.svc-t{transition:transform var(--t-ui) var(--ease-out)}
.svc-p{color:var(--fg-2);font-size:var(--fs-body);line-height:1.5;max-width:40ch}
.svc-tiles{display:flex;align-items:center;gap:8px;min-height:84px}
.tile{position:relative;height:84px;overflow:hidden;background:var(--ink-3);flex:none}
.tile img{height:100%;width:auto;object-fit:cover}
.tile--tall img{width:100%;object-position:50% 28%}
.tile--type{display:flex;flex-direction:column;justify-content:space-between;width:148px;padding:12px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.tile--type b{font:500 17px/1.1 var(--font-display);letter-spacing:-.01em}
.tile--type small{font:500 10.5px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.svc-from{display:flex;flex-direction:column;gap:6px;font:500 clamp(18px,1.4vw,22px)/1 var(--font-text);letter-spacing:-.01em;white-space:nowrap}
.svc-go{justify-self:end;font-size:22px;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover){.svc-row:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.025) 30%,transparent)}.svc-row:hover .svc-t{transform:translateX(8px)}.svc-row:hover .svc-go{transform:translateX(6px)}}
@media (max-width:1023px){
  .svc-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"n t go" ". p p" ". tiles tiles" ". from from";row-gap:var(--s-4)}
  .svc-n{grid-area:n;padding-top:.55em}.svc-t{grid-area:t}.svc-p{grid-area:p}.svc-tiles{grid-area:tiles;min-height:0}.svc-from{grid-area:from;flex-direction:row;align-items:baseline;gap:10px}.svc-go{grid-area:go}
  .svc-tiles:empty{display:none}
}
@media (max-width:599px){
  .svc-row{grid-template-columns:28px minmax(0,1fr) auto}
  .tile{height:72px}.tile--type{width:132px}
}

/* ------------------------------------------------------------------ craft slider (spec §4.2 #3) */
.craft{position:relative}
.craft-stage{position:relative;aspect-ratio:var(--ar,16/9);overflow:hidden;background:var(--hero-black);touch-action:pan-y;--pos:50%}
.craft-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.craft-after{clip-path:inset(0 0 0 var(--pos))}
.craft-line{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--fg-1);pointer-events:none;transform:translateX(-.5px)}
.craft-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--fg-1);color:var(--ink);display:grid;place-items:center;pointer-events:none;font:500 13px/1 var(--font-text)}
.craft-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.craft-range:focus-visible+.craft-knob{outline:2px solid var(--focus);outline-offset:3px}
.craft-ends{display:flex;justify-content:space-between;gap:16px;margin-top:var(--s-4)}
.craft-tabs{display:flex;gap:6px;margin-top:var(--s-4)}
.craft-tabs button{min-height:40px;padding:0 14px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-ui)}
.craft-tabs button[aria-pressed="true"]{color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--fg-1)}

/* ------------------------------------------------------------------ process steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gutter);counter-reset:step}
.step{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line-strong)}
.step-t{font:500 clamp(20px,1.6vw,24px)/1.15 var(--font-display);letter-spacing:-.01em;margin-top:var(--s-4)}
.step-p{font-size:16px;line-height:1.5;color:var(--fg-2);max-width:30ch}
@media (min-width:1024px){.steps:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps-note{margin-top:var(--s-7);color:var(--fg-3);font-size:var(--fs-small)}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-7)}}
@media (max-width:599px){.steps{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}.step-t{margin-top:var(--s-2)}}

/* ------------------------------------------------------------------ proof block (component 10) */
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos li{display:grid;place-items:center;min-height:clamp(96px,9vw,140px);padding:var(--s-5);border-left:1px solid var(--line)}
.logos li:first-child{border-left:0}
.logos img{height:var(--lh,26px);max-height:var(--lh,26px);width:auto;opacity:.78}
@media (max-width:767px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logos li:nth-child(3){border-left:0}.logos li:nth-child(n+3){border-top:1px solid var(--line)}.logos img{height:calc(var(--lh,26px) * .82);max-height:none;max-width:100%}}
.quote{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);margin-top:clamp(56px,7vw,112px)}
.quote blockquote{grid-column:2/span 9;font:400 var(--fs-lede)/1.35 var(--font-text);letter-spacing:-.01em;text-wrap:pretty}
.quote blockquote p::before{content:"\201C";margin-left:-.42em}
.quote blockquote p::after{content:"\201D"}
.quote figcaption{grid-column:2/span 9;margin-top:var(--s-6);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.quote figcaption b{font:500 16px/1 var(--font-text)}
.proof-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(48px,6vw,96px);padding-top:var(--s-5);border-top:1px solid var(--line)}
.proof-rate{font:500 var(--fs-h3)/1.1 var(--font-display);letter-spacing:-.015em}
.proof-rate small{display:block;margin-top:8px;font:400 15px/1.4 var(--font-text);letter-spacing:0;color:var(--fg-2)}
@media (max-width:1023px){.quote blockquote,.quote figcaption{grid-column:1/-1}.quote blockquote p::before{margin-left:0}}

/* ------------------------------------------------------------------ director block */
.director{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-7);align-items:end}
.dir-photo{grid-column:1/span 5;aspect-ratio:2/3;max-height:86svh;position:relative;overflow:hidden;background:var(--ink-2)}
.dir-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dir-copy{grid-column:7/-1;display:flex;flex-direction:column;gap:var(--s-5);padding-bottom:var(--s-2)}
.dir-copy .body{color:var(--fg-2)}
@media (max-width:1023px){.dir-photo{grid-column:1/span 6;max-height:none}.dir-copy{grid-column:1/-1}}
@media (max-width:767px){.dir-photo{grid-column:1/-1}}

/* ------------------------------------------------------------------ engagement card: fixed or from (component 9) */
.ecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:var(--gutter);row-gap:var(--s-8)}
.ecard{display:flex;flex-direction:column;gap:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line-strong);min-width:0}
.ecard.is-pick{border-top-color:var(--fg-1)}
.ecard-k{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ecard-h{margin-top:var(--s-3)}
.ecard-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font:500 clamp(32px,2.8vw,44px)/1 var(--font-display);letter-spacing:-.025em}
.ecard-price .ecard-from{font:500 var(--fs-label)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ecard-price .ecard-unit{font:400 16px/1 var(--font-text);letter-spacing:0;color:var(--fg-2);white-space:nowrap}
.ecard-typ{color:var(--fg-3);font-size:var(--fs-small)}
.ecard-sum{color:var(--fg-2);font-size:16px;line-height:1.5}
.ecard-specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;border-top:1px solid var(--line)}
.ecard-specs dt,.ecard-specs dd{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4}
.ecard-specs dt{font:500 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding-top:12px}
.ecard-specs dd{color:var(--fg-1);text-align:right}
.ecard-inc li{position:relative;padding:7px 0 7px 18px;font-size:15px;line-height:1.45;color:var(--fg-2)}
.ecard-inc li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--fg-3)}
.ecard-cta{margin-top:auto;padding-top:var(--s-3)}
.ecard-cta .btn{width:100%}
.ecard-fine{font-size:13px;color:var(--fg-3);line-height:1.45;margin-top:auto}
.ecard-fine+.ecard-cta{margin-top:0}   /* the note sits above the button, so every button in a row lines up */

/* ------------------------------------------------------------------ FAQ block */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font:500 clamp(18px,1.4vw,22px)/1.3 var(--font-text);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform var(--t-ui) var(--ease-ui)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 0 24px;max-width:64ch;color:var(--fg-2)}
.faq-wrap{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6)}
.faq-wrap .sh{grid-column:1/span 4;display:block;margin:0}
.faq-wrap .sh .sh-h{margin-top:var(--s-5)}
.faq-wrap .faq{grid-column:6/-1}
@media (max-width:1023px){.faq-wrap .sh,.faq-wrap .faq{grid-column:1/-1}}

/* ------------------------------------------------------------------ CTA band */
.cta-band{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);align-items:end}
.cta-band .cta-h{grid-column:1/span 8}
.cta-band .cta-side{grid-column:9/-1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
.cta-band .cta-side p{color:var(--fg-2)}
@media (max-width:1023px){.cta-band .cta-h,.cta-band .cta-side{grid-column:1/-1}}

/* ------------------------------------------------------------------ footer: a business card (spec §3.2) */
.ft{position:relative;background:var(--ink);border-top:1px solid var(--line);padding-top:var(--section);padding-bottom:var(--s-6)}
.ft-close{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);align-items:end;padding-bottom:var(--section)}
.ft-close .label{grid-column:1/-1;display:flex;align-items:center}
.ft-close .d1{grid-column:1/span 8}
.ft-close-side{grid-column:9/-1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding-bottom:.4em}
.ft-close-side p{color:var(--fg-2);font-size:16px}
.ft-close-side .tl{color:var(--fg-1)}
.ft-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line)}
.ft-card{grid-column:1/span 4;display:flex;flex-direction:column;gap:var(--s-4)}
.ft-card .ft-mail{font:500 clamp(20px,1.6vw,26px)/1.2 var(--font-display);letter-spacing:-.01em;width:fit-content;max-width:100%;overflow-wrap:anywhere}
.ft-card p:not(.label){color:var(--fg-2);font-size:15px;line-height:1.5;max-width:34ch}
.ft-social{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:15px}
.ft-social a{min-height:44px;display:inline-flex;align-items:center;color:var(--fg-2)}
.ft-cols{grid-column:6/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--gutter)}
.ft-col h3{margin-bottom:var(--s-3)}
.ft-col a{display:flex;align-items:center;min-height:36px;font-size:15px;color:var(--fg-2);transition:color var(--t-micro)}
@media (hover:hover){.ft-col a:hover,.ft-social a:hover{color:var(--fg-1)}}
.ft-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}
@media (max-width:1023px){.ft-close .d1,.ft-close-side{grid-column:1/-1}.ft-card{grid-column:1/-1}.ft-cols{grid-column:1/-1}}
@media (max-width:599px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------------------ label cursor (spec §4.2 #6): fine pointer, media only */
.lc{position:fixed;z-index:90;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--fg-1);color:var(--ink);
  display:grid;place-items:center;text-align:center;pointer-events:none;font:500 10.5px/1.15 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;
  opacity:0;transform:translate3d(-200px,-200px,0);scale:.4;transition:opacity var(--t-micro) var(--ease-ui),scale var(--t-ui) var(--ease-out);will-change:transform}
.lc.on{opacity:1;scale:1}
.lc.on.down{scale:.88}
.lc span{display:block;max-width:56px}

/* ------------------------------------------------------------------ price list (component 18): one row per option, at most four to a list */
.plist{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--line)}
.pl{display:grid;grid-template-columns:minmax(0,1fr) 120px 200px 210px;align-items:center;column-gap:var(--gutter);padding-block:var(--s-6);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hd) + 16px)}
.pl-h{font:500 var(--fs-h3)/1.15 var(--font-display);letter-spacing:-.015em}
.pl-tag{display:inline-flex;align-items:center;margin-left:14px;vertical-align:middle;color:var(--fg-1)}
.pl-sum{margin-top:6px;color:var(--fg-2);font-size:var(--fs-body);line-height:1.45;max-width:52ch;text-wrap:pretty}
.pl-note{margin-top:4px;color:var(--fg-3);font-size:var(--fs-small)}
.pl-time{color:var(--fg-2);font-size:16px;line-height:1.3}
.pl-price{font:500 clamp(26px,2.4vw,36px)/1.1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.pl-from{display:block;margin-bottom:4px;font:500 var(--fs-label)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pl-per{margin-left:5px;font:400 15px/1 var(--font-text);letter-spacing:0;color:var(--fg-2)}
.pl-cta{justify-self:end;width:100%;max-width:210px}
.pl-cta .btn{width:100%}
.plist-note{margin-top:var(--s-5);max-width:70ch;color:var(--fg-2);font-size:16px;line-height:1.5}
.plist-note+.plist-note{margin-top:var(--s-3)}
@media (max-width:899px){
  .pl{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-3);padding-block:var(--s-5)}
  .pl-main,.pl-cta{grid-column:1/-1}
  .pl-tag{display:flex;margin:8px 0 0}
  .pl-price{grid-row:2;grid-column:1}
  .pl-time{grid-row:2;grid-column:2;text-align:right;align-self:end}
  .pl-cta{max-width:none;justify-self:stretch}
}

/* ------------------------------------------------------------------ DN Assist: never above the fold (shown after 40% scroll by v3.js) */
html.assist-wait .ac-launch:not(.ac-is-open),html.at-hero .ac-launch:not(.ac-is-open),html.at-inline .ac-launch:not(.ac-is-open){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
.ac-launch{transition:opacity var(--t-ui) var(--ease-ui),transform var(--t-ui) var(--ease-ui),visibility 0s}

/* ------------------------------------------------------------------ 404 */
.nf{min-height:calc(100svh - var(--hd));display:flex;flex-direction:column;justify-content:center;gap:var(--s-6);padding-block:var(--s-9)}

/* ------------------------------------------------------------------ reduced motion: everything stills */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  html.js [data-rv="media"]::after{display:none}
  html.js [data-rv] .rv-in,html.js [data-rv] .ln>span{opacity:1!important;transform:none!important}
  .hero-h1 .l2[data-decode]{animation:none}
  .lc{display:none}
}
@media print{.hd,.ft,.ac-launch,.vtog,.lc{display:none!important}main{padding-top:0!important}}