html,body{margin:0;background:var(--ztx-bg,#0b0c0e);color:var(--ztx-fg,#f2f2f0);font-family:var(--ztx-font,'Archivo'),system-ui,sans-serif}
a{color:inherit;text-decoration:none}@media (hover:hover){a:hover{opacity:.7}}
input,textarea,select,button{font:inherit}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:focus-visible{outline:2px solid var(--ztx-accent,#5ee7e0);outline-offset:4px;border-radius:4px}
@keyframes ztx-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes ztx-hint{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}
@keyframes ztx-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ztx-pulse{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 18px var(--ztx-accent,#5ee7e0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.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}
backbone-scene,case-cable{display:block;position:absolute;inset:0;width:100%;height:100%}
/* The 3D colour grade lives in the WebGL output pass (GRADE in backbone-scene.js / case-cable.js). Never put CSS filters on the scene canvases: on iPhones it exhausts GPU memory and crashes the tab. */

/* header */
.hdr-fade{position:absolute;left:0;right:0;top:0;height:104px;background:linear-gradient(rgba(11,12,14,.96),rgba(11,12,14,.86) 52%,rgba(11,12,14,.4) 78%,rgba(11,12,14,0));pointer-events:none}
.ztx-progress{position:absolute;left:0;top:0;height:2px;width:var(--ztx-progress,0%);background:linear-gradient(90deg,var(--ztx-accent-prev,rgba(255,255,255,.2)),var(--ztx-accent,#5ee7e0));box-shadow:0 0 14px var(--ztx-accent,#5ee7e0),0 0 3px var(--ztx-accent,#5ee7e0);transition:width .15s linear,background .4s}
.nl{display:inline-block;padding:14px 6px;transform-origin:center;transition:color .3s}
.nl:hover{color:#f2f2f0;opacity:1}
/* logo: the brand-kit artwork (brand/01-Logo, inline SVG via ztx_logo()). Fixed colours: never the accent, no glow. Min width 120 px. */
.zt-logo{display:block;width:100%;height:auto}
.zt-tech{fill:var(--ztx-accent,#06B6D4);transition:fill .6s ease}@media (prefers-reduced-motion:reduce){.zt-tech{transition:none}}
.hdr-logo.zt{width:124px}
.ftr-logo{display:block;width:200px;max-width:100%}
.zt-mono{display:none}
@media (max-width:420px){.hdr-logo.zt{width:120px}}
/* very small phones: the full logo (min 120 px) would meet the nav, so the zt monogram stands in */
@media (max-width:349.98px){.hdr-logo.zt{width:auto;top:20px}.hdr-logo .zt-logo{display:none}.hdr-logo .zt-mono{display:block;width:auto;height:21px}}

/* floating WhatsApp */
.wap{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:60;display:flex;align-items:center;gap:10px;padding:14px 18px 14px 14px;border-radius:999px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06));backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.18);color:#f2f2f0;box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .3s,border-color .3s;font-family:var(--ztx-mono,'JetBrains Mono'),monospace;font-size:12px;letter-spacing:.08em;font-weight:500}
.wap:hover{transform:translateY(-2px);opacity:1;border-color:rgba(255,255,255,.4)}
.wap-dot{width:22px;height:22px;border-radius:50%;background:var(--ztx-accent,#5ee7e0);display:inline-flex;align-items:center;justify-content:center;color:#0b0c0e;box-shadow:0 0 14px var(--ztx-accent,#5ee7e0);transition:background .6s,box-shadow .6s;font-size:13px;font-weight:700;font-family:var(--ztx-font,'Archivo')}

/* glass pills */
.pill-glass{font-family:var(--ztx-mono,'JetBrains Mono'),monospace;font-size:12px;letter-spacing:.08em;color:#f2f2f0;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);padding:18px 26px;border-radius:999px}

/* client tiles */
.tile{aspect-ratio:7/5;display:flex;align-items:center;justify-content:center;padding:22px;box-sizing:border-box;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%,rgba(255,255,255,.035));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:10px;transition:border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.tile:hover{border-color:rgba(255,255,255,.3);transform:translateY(-3px)}

/* case study */
.nextl{font-size:clamp(28px,3.4vw,48px);letter-spacing:-0.03em;font-weight:500;display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1),color .3s}
.nextl:hover{transform:translateX(12px);color:var(--ztx-accent,#5ee7e0);opacity:1}
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
html.js [data-reveal].in{opacity:1;transform:none}
.wipe{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .5s;z-index:50}

/* phones: text sits over the full-width 3D scene, so dim it a little more */
.scene-scrim{display:none}
@media (max-width:760px){.scene-scrim{display:block;position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,14,.64),rgba(11,12,14,.44) 70%,rgba(11,12,14,.28));pointer-events:none}}

/* ——— UX audit polish ——— */
main:focus{outline:none}
/* skip link (WCAG 2.4.1) */
.skip{position:fixed;left:16px;top:-80px;z-index:10000;padding:14px 20px;border-radius:999px;background:var(--ztx-accent,#5ee7e0);color:#0b0c0e;font-family:var(--ztx-mono,'JetBrains Mono'),monospace;font-size:12px;letter-spacing:.08em;transition:top .2s}
.skip:focus{top:12px}
/* header: was inline; tap targets now 44px tall without moving the type */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none}
.hdr-logo{position:absolute;left:clamp(20px,5vw,40px);top:17px;padding:7px 0;display:flex;align-items:baseline;font-size:22px;font-weight:400;letter-spacing:-0.01em;color:#f2f2f0;pointer-events:auto}
.hdr-nav{position:absolute;right:calc(clamp(20px,5vw,40px) - 6px);top:19px;display:flex;gap:clamp(2px,calc(2vw - 4px),18px);pointer-events:auto;font-family:var(--ztx-mono,'JetBrains Mono'),monospace;font-size:12px;letter-spacing:.14em;color:#8a8f98}
@media (max-width:420px){.hdr-nav{top:18px;font-size:11px;letter-spacing:.1em}.nl{padding:15px 5px}}
/* bigger hit area for small mono links, layout unchanged */
.tap{padding-block:14px;margin-block:-14px}
/* floating WhatsApp: respects safe areas; steps aside while an on-page WhatsApp CTA is visible (js/ui.js) */
.wap{right:max(clamp(14px,3vw,28px),env(safe-area-inset-right));bottom:max(clamp(14px,3vw,28px),env(safe-area-inset-bottom));transition:transform .3s,border-color .3s,opacity .3s,visibility 0s}
.wap.wap-off{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:transform .3s,opacity .3s,visibility 0s .3s}
/* homepage stops: never let tall content sit under the fixed header */
.stop{padding-top:88px!important;padding-bottom:88px!important}
/* About headline: scale to its column so the longest uppercase word never overflows */
.about-l{container-type:inline-size;min-width:0}
.about-h{font-size:min(clamp(40px,5vw,80px),10.4cqi)!important}
/* film control on case heroes (WCAG 2.2.2) */
.vid-toggle{position:absolute;left:14px;bottom:14px;z-index:2;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(11,12,14,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f2f2f0;font-family:var(--ztx-mono,'JetBrains Mono'),monospace;font-size:12px;letter-spacing:.08em;cursor:pointer}
/* film controls: pause/play + sound on/off (sound only when the film has an audio track, or Admin says it has) */
.vid-ctl{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;gap:10px;flex-wrap:wrap}
.vid-ctl .vid-toggle{position:static;display:inline-flex;align-items:center;gap:10px}
.vid-toggle[hidden]{display:none}
.vid-toggle[aria-pressed="true"]{border-color:var(--ztx-accent,#5ee7e0)}
.vid-toggle svg{width:16px;height:16px;flex:none}
.vid-sound .w1,.vid-sound[aria-pressed="true"] .x1{display:none}.vid-sound[aria-pressed="true"] .w1{display:inline}
/* film with sound (YouTube/Vimeo): click-to-load, nothing third-party loads before play */
.embed{position:relative;aspect-ratio:16/9;background-color:#111317;border:1px solid #1f2125;overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(11,12,14,.1),rgba(11,12,14,.5))}
.embed-play:hover{opacity:1}
.embed-play .pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--ztx-mono,'JetBrains Mono'),monospace;font-size:12px;letter-spacing:.08em;color:#0b0c0e;background:var(--ztx-accent,#5ee7e0);padding:16px 24px;border-radius:999px;transition:transform .3s,background .4s}
.embed-play .pill svg{width:12px;height:12px;fill:currentColor}
@media (hover:hover){.embed-play:hover .pill{transform:scale(1.04)}}
.embed-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:#80858e}
.embed-note a{text-decoration:underline;text-underline-offset:3px}
/* /policies: same rhythm as the case-study story (heading left, text right) */
.pol-toc{display:flex;gap:0 22px;flex-wrap:wrap;margin-top:40px}
.pol-sec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(16px,4vw,40px);padding:48px 0;border-top:1px solid #1f2125}
.pol-sec h2{margin:0;font-size:26px;line-height:1.2;letter-spacing:-0.02em;font-weight:500}
.pol{max-width:640px}
.pol p,.pol li{font-size:17px;line-height:1.65;color:#b8bcc4;text-wrap:pretty}
.pol p{margin:0 0 16px}
.pol h3{margin:36px 0 10px;font-size:19px;line-height:1.3;letter-spacing:-0.01em;font-weight:500;color:#f2f2f0}
.pol h3:first-child{margin-top:0}
.pol ul{margin:0 0 16px;padding-left:20px}
.pol li{margin:0 0 8px}
.pol li::marker{color:var(--ztx-accent,#5ee7e0)}
.pol a{color:#f2f2f0;text-decoration:underline;text-decoration-color:var(--ztx-accent,#5ee7e0);text-underline-offset:3px}
@media (max-width:760px){
  /* text over the full-width 3D scene: a soft local halo keeps copy legible where bright strands cross it */
  .over-scene{text-shadow:0 0 16px rgba(11,12,14,.95),0 0 4px rgba(11,12,14,.8)}
  .over-scene a{text-shadow:none}
  .case-hero{aspect-ratio:4/3!important}
}
@media (max-width:600px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.tiles .tile{padding:16px}}
@media (max-width:520px){.appr-grid{grid-template-columns:1fr!important;gap:24px!important}}

/* Touch devices and narrow screens: no backdrop-filter anywhere. Each blurred layer over the WebGL scene costs GPU memory;
   on iPhones they starve the page (blank images/logos, then a tab crash). Solid fills keep the same look. */
@media (hover:none),(max-width:999.98px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .tile{background:#141619}
  .hdr-fade{background:linear-gradient(rgba(11,12,14,.98),rgba(11,12,14,.94) 55%,rgba(11,12,14,.5) 80%,rgba(11,12,14,0))}
  .tfig{background:#131518!important}
  .wap{background:rgba(22,24,28,.95)}
  .pill-glass{background:rgba(22,24,28,.92)}
  .vid-toggle{background:rgba(11,12,14,.82)}
}