/* chrome.css — GENERATED by tools/site.py chrome_css() from v3.css. Do not edit. Loaded last by pages built with page(). */
/* ------------------------------------------------------------------ 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}}

:where(.hd,.ft,.msheet) :where(p,h2,h3){margin:0}
:where(.hd,.ft,.msheet) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
:where(.hd,.ft,.msheet) svg{display:block;max-width:100%}
.hd,.ft,.msheet{font-family:var(--font-text);font-size:var(--fs-body);line-height:1.55;font-weight:400}
.msheet{border-radius:0}
html{scroll-padding-top:calc(var(--hd) + 16px)}
.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}
.d1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-d1);line-height:.94;letter-spacing:-.035em;text-wrap:balance}
.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}
.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)}
.tl:hover{text-decoration-color:currentColor}
:where(.hd,.ft,.msheet) .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
html.qv-on,html.ms-on{overflow:hidden}
/* ------------------------------------------------------------------ buttons + links */
:where(.hd,.ft,.msheet) .btn{border:0;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}
/* ------------------------------------------------------------------ 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}

/* 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}

/* ------------------------------------------------------------------ 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))}}

/* ------------------------------------------------------------------ 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}

/* ------------------------------------------------------------------ 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}}