/* Vizox Design System — generated from tokens.json (fonts served from /ds/fonts, see fonts/README.md) */
:root, [data-theme="light"] {
  --vz-red: #ff0000;
  --vz-tan: #d8c6a3;
  --vz-charcoal: #29211d;
  --vz-cream: #f7f2e7;
  --vz-white: #ffffff;
  --vz-graphite: #3d3a36;
  --vz-red-deep: #d90000;
  --vz-red-ink: #b80000;
  --vz-tan-deep: #b8a47e;
  --vz-tan-soft: #eadfc9;
  --neutral-0: #ffffff;
  --neutral-50: #f7f2e7;
  --neutral-100: #efe8da;
  --neutral-200: #e3daca;
  --neutral-300: #cfc4b2;
  --neutral-400: #a89d8d;
  --neutral-500: #7e756a;
  --neutral-600: #5a534b;
  --neutral-700: #3d3a36;
  --neutral-800: #312a26;
  --neutral-900: #29211d;
  --neutral-950: #1c1613;
  --status-success: #4e6b3a;
  --status-success-soft: #e2e6d3;
  --status-warning: #a8711a;
  --status-warning-soft: #f1e3c6;
  --status-error: #d90000;
  --status-error-soft: #f8dcd3;
  --surface-page: var(--vz-cream);
  --surface-raised: var(--vz-white);
  --surface-sunken: var(--neutral-100);
  --surface-tan: var(--vz-tan);
  --surface-inverse: var(--vz-charcoal);
  --surface-inverse-raised: var(--vz-graphite);
  --surface-accent: var(--vz-red);
  --text-primary: var(--vz-charcoal);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-inverse: var(--vz-cream);
  --text-accent: var(--vz-red-ink);
  --text-on-accent: var(--vz-white);
  --border-subtle: rgba(41,33,29,.10);
  --border-default: rgba(41,33,29,.22);
  --border-strong: var(--vz-charcoal);
  --accent: var(--vz-red);
  --accent-hover: var(--vz-red-deep);
  --focus-ring: var(--vz-red);
  --scrim: rgba(28,22,19,.56);
  --selection: rgba(255,0,0,.18);
  --tx-ink: #0e0f11;
  --tx-ink-raised: #17181b;
  --tx-ink-sunken: #08090a;
  --tx-paper: #f4f4f2;
  --tx-paper-raised: #ffffff;
  --tx-paper-sunken: #e9e9e6;
  --tx-on-ink: #f2f2f0;
  --tx-on-ink-2: #a2a5ab;
  --tx-on-ink-3: #7d8086;
  --tx-on-paper-2: #55585e;
  --tx-on-paper-3: #787b81;
  --tx-red-bright: #ff2a1a;
  --tx-shade: #000000;
  --shadow-0: none;
  --shadow-float: 0 1px 2px rgba(41,33,29,.06), 0 12px 32px -8px rgba(41,33,29,.18);
  --shadow-overlay: 0 2px 4px rgba(41,33,29,.06), 0 32px 64px -16px rgba(41,33,29,.32);
}
[data-theme="dark"] {
  --surface-page: var(--vz-charcoal);
  --surface-raised: var(--vz-graphite);
  --surface-sunken: var(--neutral-950);
  --surface-inverse: var(--vz-cream);
  --surface-inverse-raised: var(--vz-white);
  --text-primary: var(--vz-cream);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-inverse: var(--vz-charcoal);
  --text-accent: var(--vz-red);
  --border-subtle: rgba(247,242,231,.10);
  --border-default: rgba(247,242,231,.22);
  --border-strong: var(--vz-cream);
  --scrim: rgba(0,0,0,.64);
}
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;
  --container-max: 1360px;
  --container-text: 680px;
  --control-h-sm: 32px;
  --control-h-md: 44px;
  --control-h-lg: 56px;
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --radius-feed: 12px;
  --font-display: "Millionaire", "Didot", "Bodoni 72", "Times New Roman", serif;
  --font-script: "Millionaire Script", "Millionaire", cursive;
  --font-sans: "Soehne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-wide: "Soehne Breit", "Soehne", "Helvetica Neue", Arial, sans-serif;
  --font-narrow: "Soehne Mono", "SFMono-Regular", Menlo, monospace;
  --font-mono: "Soehne Mono", "SFMono-Regular", Menlo, monospace;
}
.vz-display-xl { font-family: var(--font-display); font-size: 112px; line-height: 1.02; font-weight: 400; letter-spacing: -0.02em; }
.vz-display-l { font-family: var(--font-display); font-size: 88px; line-height: 1.04; font-weight: 400; letter-spacing: -0.018em; }
.vz-display-m { font-family: var(--font-display); font-size: 64px; line-height: 1.06; font-weight: 400; letter-spacing: -0.015em; }
.vz-display-s { font-family: var(--font-display); font-size: 44px; line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
.vz-title-l { font-family: var(--font-sans); font-size: 28px; line-height: 1.25; font-weight: 500; letter-spacing: -0.012em; }
.vz-title-m { font-family: var(--font-sans); font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -0.012em; }
.vz-title-s { font-family: var(--font-sans); font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: -0.012em; }
.vz-lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.5; font-weight: 300; letter-spacing: -0.006em; }
.vz-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.vz-body-s { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.vz-caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 400; }
.vz-label { font-family: var(--font-wide); font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 0.08em; }
.vz-mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 400; letter-spacing: 0.04em; }
.vz-narrow { font-family: var(--font-narrow); font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: 0.04em; }












/* Vizox Design System — component stylesheet. Loads after tokens.css.
   Holds only what tokens.json does not declare: type-scale variables the components read,
   aliases, composite borders, the offset-block shadow, motion and blur, base element rules,
   and the parts of the .vz-* classes tokens.css cannot express. */
:root{
/* Weights (Söhne VF axis) */
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
/* Display — Millionaire. Always 400; never bold. */
--size-display-xl:clamp(56px,7vw,112px);
--size-display-l:clamp(48px,5.6vw,88px);
--size-display-m:clamp(40px,4.4vw,64px);
--size-display-s:clamp(32px,3vw,44px);
--leading-display:1.02;
--tracking-display:-0.02em;
/* Titles — Söhne 500 */
--size-title-l:28px;
--size-title-m:22px;
--size-title-s:18px;
--leading-title:1.25;
--tracking-title:-0.012em;
/* Body — Söhne 300/400 */
--size-body-l:20px;
--size-body:16px;
--size-body-s:14px;
--size-caption:12px;
--leading-body:1.55;
--leading-tight:1.3;
--tracking-body:-0.003em;
/* Labels — Söhne Breit, uppercase (buttons, nav, eyebrows) */
--size-label:12px;
--size-label-l:14px;
--tracking-label:0.08em;
/* Mono — Söhne Mono (indices, metadata, data) */
--size-mono:12px;
--tracking-mono:0.04em;
/* Narrow — Söhne Schmal (tags, table heads, dense stats) */
--size-narrow:14px;
--tracking-narrow:0.04em;
/* Semantic roles */
--type-hero:var(--size-display-xl);
--type-section:var(--size-display-m);
--type-quote:var(--size-display-s);
--type-lead:var(--size-body-l);
--type-paragraph:var(--size-body);
/* Fluid layout */
--gutter:clamp(20px,3vw,40px);
--section-gap:clamp(96px,12vw,192px);
/* Radius aliases */
--radius-control:var(--radius-0);
--radius-card:var(--radius-0);
/* Borders */
--border-hairline:1px solid var(--border-subtle);
--border-line:1px solid var(--border-default);
--border-heavy:1px solid var(--border-strong);
/* Offset block — the logo's two-square overlap, used as a hover/selection motif */
--block-offset:6px;
--shadow-block:var(--block-offset) var(--block-offset) 0 0 var(--vz-red);
--shadow-block-tan:var(--block-offset) var(--block-offset) 0 0 var(--vz-tan);
/* Motion */
--ease-out:cubic-bezier(.16,.84,.24,1);
--ease-in-out:cubic-bezier(.65,0,.25,1);
--ease-linear:linear;
--dur-instant:90ms;
--dur-fast:160ms;
--dur-base:280ms;
--dur-slow:560ms;
--dur-reveal:900ms;
/* Blur */
--blur-glass:saturate(140%) blur(18px);
}
::selection{background:var(--selection)}
.vz-display-xl,.vz-display-l,.vz-display-m,.vz-display-s{text-wrap:balance;font-kerning:normal;font-feature-settings:"kern","liga"}
/* Optical left edge: pull big display lines in so cap overhangs (T, V, W) sit on the same edge as the body text below */
.vz-display-xl,.vz-display-l{translate:-0.045em 0}
.vz-display-m,.vz-display-s{translate:-0.03em 0}
.vz-display-xl{font-size:var(--size-display-xl)}
.vz-display-l{font-size:var(--size-display-l)}
.vz-display-m{font-size:var(--size-display-m)}
.vz-display-s{font-size:var(--size-display-s)}
.vz-accent{color:var(--vz-red)}
.vz-script{font-family:var(--font-script);font-weight:400;letter-spacing:0}
.vz-lead{text-wrap:pretty}
.vz-body{text-wrap:pretty}
.vz-caption{color:var(--text-secondary)}
.vz-label{text-transform:uppercase}
.vz-mono{text-transform:uppercase}
.vz-narrow{text-transform:uppercase}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--size-body);line-height:var(--leading-body);font-weight:400}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--border-default);transition:text-decoration-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-primary);text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ===================================================================
   MOTION & GRAPHICS — "atelier blueprint" (see README: MOTION & GRAPHICS)
   Load motion plays once on page load (hero only). Everything below the
   hero is SCROLL-SCRUBBED: it plays as the user scrolls and reverses on
   scroll up. Browsers without scroll timelines show the finished state.
   =================================================================== */

/* Headline line reveal (load). Wrap each line: <span class="vz-line"><span>…</span></span> */
.vz-line{display:block;overflow:hidden;padding:.22em .1em .16em;margin:-.22em -.1em -.16em}
.vz-line>span{display:block;transform:translateY(110%);animation:vzLine 1.1s var(--ease-out) forwards}
.vz-line:nth-child(2)>span{animation-delay:.14s}
.vz-line:nth-child(3)>span{animation-delay:.28s}
@keyframes vzLine{to{transform:none}}
/* Signature word (load): turns red last, red chalk line draws under it. Use with .vz-accent */
.vz-sig{position:relative;display:inline-block;color:var(--text-primary);animation:vzSig .8s var(--ease-out) 1.15s forwards}
@keyframes vzSig{to{color:var(--vz-red)}}
.vz-sig::after{content:"";position:absolute;left:.04em;right:.02em;bottom:.06em;height:2px;background:var(--vz-red);transform:scaleX(0);transform-origin:left;animation:vzChalk .9s var(--ease-out) 1.35s forwards}
@keyframes vzChalk{to{transform:scaleX(1)}}
/* Supporting copy fades up after the headline (load). Set animation-delay inline. */
.vz-fade{opacity:0;transform:translateY(12px);animation:vzFade .9s var(--ease-out) forwards}
@keyframes vzFade{to{opacity:1;transform:none}}

/* Blueprint graphics */
.vz-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to right,var(--border-subtle) 0 1px,transparent 1px calc(100% / 12));-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);mask-image:linear-gradient(to bottom,#000 0%,transparent 85%)}
.vz-crop{position:absolute;width:14px;height:14px;border:0 solid var(--text-primary);pointer-events:none}
.vz-crop.tl{top:-10px;left:-10px;border-top-width:1px;border-left-width:1px}
.vz-crop.tr{top:-10px;right:-10px;border-top-width:1px;border-right-width:1px}
.vz-crop.bl{bottom:-10px;left:-10px;border-bottom-width:1px;border-left-width:1px}
.vz-crop.br{bottom:-10px;right:-10px;border-bottom-width:1px;border-right-width:1px}
.vz-dim-wrap{position:relative}
.vz-dim-wrap::before,.vz-dim-wrap::after{content:"";position:absolute;top:50%;width:1px;height:9px;margin-top:-4px;background:var(--text-secondary)}
.vz-dim-wrap::before{left:0}.vz-dim-wrap::after{right:0}
.vz-dim{display:flex;align-items:center;gap:12px;color:var(--text-secondary)}
.vz-dim::before,.vz-dim::after{content:"";flex:1;height:1px;background:var(--border-default)}
/* Film grain: dark sections, imagery, the tan band. Parent needs position:relative. */
.vz-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.55;background-size:256px 256px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Slow light drift on a hero frame (stand-in until real footage) */
.vz-drift{animation:vzDrift 18s ease-in-out infinite alternate}
@keyframes vzDrift{from{transform:scale(1.06) translateX(-1.5%)}to{transform:scale(1.06) translateX(1.5%)}}

/* Block-sweep hover for a Button: wrap it in <span class="vz-sweep"> */
.vz-sweep button{background-image:linear-gradient(var(--vz-red),var(--vz-red))!important;background-repeat:no-repeat!important;background-position:left center!important;background-size:0% 100%!important;transition:background-size var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)!important}
.vz-sweep button:hover{background-size:100% 100%!important;color:var(--vz-white)!important}

/* Count-up numerals: <span class="vz-count" style="--to:4"></span> renders 00 → 04 */
@property --vz-n{syntax:'<integer>';initial-value:0;inherits:false}
.vz-count{counter-reset:vzn var(--vz-n)}
.vz-count::after{content:counter(vzn,decimal-leading-zero)}
@keyframes vzCount{from{--vz-n:0}to{--vz-n:var(--to)}}

.vz-rule{height:1px;background:var(--border-default)}
.vz-wipe{position:relative}
.vz-wipe-in{position:relative;overflow:hidden;height:100%}

@supports (animation-timeline: view()){
  /* Rise: headings, labels, paragraphs. -2 lags behind for the line that follows. */
  .vz-rise{animation:vzRise linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  .vz-rise-2{animation:vzRise linear both;animation-timeline:view();animation-range:entry 15% cover 48%}
  @keyframes vzRise{from{opacity:0;transform:translateY(72px)}to{opacity:1;transform:none}}
  /* Hairline draws across, slowly enough to watch */
  .vz-rule{transform-origin:left;animation:vzDraw linear both;animation-timeline:view();animation-range:entry 0% cover 62%}
  @keyframes vzDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* Stagger: children of a row follow its rule in, each lagging the last */
  .vz-stagger>*{animation:vzSlide linear both;animation-timeline:view()}
  .vz-stagger>:nth-child(1){animation-range:entry 10% cover 40%}
  .vz-stagger>:nth-child(2){animation-range:entry 18% cover 48%}
  .vz-stagger>:nth-child(3){animation-range:entry 26% cover 56%}
  .vz-stagger>:nth-child(n+4){animation-range:entry 34% cover 62%}
  @keyframes vzSlide{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
  /* Image reveal: charcoal block wipes off; .vz-offset adds the logo's tan offset block behind */
  .vz-wipe-in::after{content:"";position:absolute;inset:0;background:var(--vz-charcoal);transform-origin:right;animation:vzWipe linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  @keyframes vzWipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  .vz-offset::before{content:"";position:absolute;inset:0;background:var(--vz-tan);animation:vzOffset linear both;animation-timeline:view();animation-range:cover 15% cover 60%}
  @keyframes vzOffset{from{transform:translate(0,0)}to{transform:translate(18px,18px)}}
  /* Two-block mark assembles: put on the front block's <g> */
  .vz-mark-r{animation:vzMark linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  @keyframes vzMark{from{transform:translate(40px,40px)}to{transform:none}}
  .vz-count{animation:vzCount linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@supports not (animation-timeline: view()){.vz-count{--vz-n:var(--to)}}

@media (prefers-reduced-motion: reduce){
  .vz-line>span,.vz-sig,.vz-sig::after,.vz-fade,.vz-drift,.vz-rise,.vz-rise-2,.vz-rule,.vz-stagger>*,.vz-wipe-in::after,.vz-offset::before,.vz-mark-r,.vz-count{animation:none!important}
  .vz-line>span,.vz-fade{transform:none;opacity:1}
  .vz-sig{color:var(--vz-red)}.vz-sig::after{transform:scaleX(1)}
  .vz-wipe-in::after{display:none}
  .vz-count{--vz-n:var(--to)}
}

/* =========================================================================
   TECH DIRECTION (dark) — the cool, precise theme the homepage now uses.
   Put class="vz-tech" on the page root; data-theme="light" / "dark" inside it flips sections.
   ========================================================================= */
:root{--ease-settle:cubic-bezier(.16,1,.3,1);--ease-blade:cubic-bezier(.4,0,.1,1);--ease-snap:cubic-bezier(.2,0,0,1)}
.vz-tech,.vz-tech [data-theme="dark"]{--surface-page:var(--tx-ink);--surface-raised:var(--tx-ink-raised);--surface-sunken:var(--tx-ink-sunken);--surface-inverse:var(--tx-paper);--surface-inverse-raised:var(--tx-paper-raised);--text-primary:var(--tx-on-ink);--text-secondary:var(--tx-on-ink-2);--text-tertiary:var(--tx-on-ink-3);--text-inverse:var(--tx-ink);--text-accent:var(--tx-red-bright);--border-subtle:color-mix(in srgb,var(--tx-on-ink) 9%,transparent);--border-default:color-mix(in srgb,var(--tx-on-ink) 18%,transparent);--border-strong:var(--tx-on-ink)}
.vz-tech{--vz-charcoal:var(--tx-paper);--vz-cream:var(--tx-ink);container-type:inline-size;container-name:vztech;background:var(--surface-page);color:var(--text-primary)}
.vz-tech [data-theme="light"]{--surface-page:var(--tx-paper);--surface-raised:var(--tx-paper-raised);--surface-sunken:var(--tx-paper-sunken);--surface-inverse:var(--tx-ink);--surface-inverse-raised:var(--tx-ink-raised);--text-primary:var(--tx-ink);--text-secondary:var(--tx-on-paper-2);--text-tertiary:var(--tx-on-paper-3);--text-inverse:var(--tx-paper);--text-accent:var(--vz-red-deep);--border-subtle:color-mix(in srgb,var(--tx-ink) 8%,transparent);--border-default:color-mix(in srgb,var(--tx-ink) 16%,transparent);--border-strong:var(--tx-ink);--vz-charcoal:var(--tx-ink);--vz-cream:var(--tx-paper)}
/* Headline type: Söhne Medium, tight. One script word per page in Vizox Red. */
.vz-tech-h{font-family:var(--font-sans);font-weight:500;letter-spacing:-.045em;line-height:.96;margin:0}
.vz-tech-h2{font-family:var(--font-sans);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:0}
.vz-tech-script{font-family:var(--font-script);font-weight:400;letter-spacing:0;font-size:1.12em;line-height:.8;color:var(--accent);display:inline-block;margin:0 .06em 0 .22em}
/* Hero entrance: soft focus-in, blade cut on the script word, then the whole block settles up 140px */
.vz-soft-in{animation:vz-soft 520ms var(--ease-snap) var(--s,80ms) both,vz-settle-up 1600ms var(--ease-settle) var(--u,1300ms) both}
.vz-soft-in .vz-tech-script{animation:vz-blade 650ms var(--ease-blade) 540ms both}
@keyframes vz-soft{from{opacity:0;translate:0 10px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes vz-settle-up{from{transform:translateY(0)}to{transform:translateY(-140px)}}
@keyframes vz-blade{from{clip-path:polygon(-10% -40%,-10% -40%,-40% 140%,-10% 140%)}to{clip-path:polygon(-10% -40%,140% -40%,110% 140%,-10% 140%)}}
.vz-caret{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:-2px;animation:vz-blink 1s steps(1) infinite}
@keyframes vz-blink{50%{opacity:0}}
.vz-col-grid{background-image:linear-gradient(to right,var(--border-subtle) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
@media (prefers-reduced-motion: reduce){.vz-soft-in{animation:none;transform:translateY(-140px)}.vz-soft-in .vz-tech-script{animation:none}.vz-caret{animation:none}}

/* ===================================================================
   PATTERNS used by the motion rules (README: MOTION & GRAPHICS)
   =================================================================== */

/* List row (services): sits under a .vz-rule; add .vz-stagger for the lagged reveal */
.vz-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;padding:36px 0;text-decoration:none;color:inherit;position:relative}
.vz-row .vz-row-n{transition:color var(--dur-base) var(--ease-out)}
.vz-row .vz-row-t{transition:padding-left var(--dur-base) var(--ease-out)}
.vz-row:hover .vz-row-n{color:var(--text-accent)}
.vz-row:hover .vz-row-t{padding-left:8px}
.vz-row:hover{color:inherit}

/* Cursor-following preview for a list of rows (pointer devices only) */
.vz-preview{position:absolute;left:0;top:0;width:260px;height:180px;pointer-events:none;z-index:5;opacity:0;transition:opacity var(--dur-fast) var(--ease-out);box-shadow:var(--shadow-block);display:flex;align-items:flex-end;padding:14px;box-sizing:border-box}
.vz-preview[data-on="true"]{opacity:1}
@media (pointer: coarse){.vz-preview{display:none}}

/* Section tag on top of its block */
.vz-section-tag{margin:0 0 72px;color:var(--text-secondary)}

/* Horizontal strip of cards (case studies). The strip is its own scroll-timeline source. */
.vz-strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(560px,84%);gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 12px 24px;margin:0 -12px;scrollbar-width:thin}
.vz-strip>a{scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
@supports (animation-timeline: view()){
  .vz-strip-scope{timeline-scope:--vz-strip}
  .vz-strip{view-timeline:--vz-strip block}
  .vz-strip .vz-wipe-in::after{animation-timeline:--vz-strip;animation-range:entry 10% cover 55%}
  .vz-strip>a{animation:vzCard linear both;animation-timeline:--vz-strip;animation-range:entry 0% cover 45%}
  .vz-strip>a:nth-child(2){animation-range:entry 12% cover 52%}
  .vz-strip>a:nth-child(2) .vz-wipe-in::after{animation-range:entry 22% cover 62%}
  .vz-strip>a:nth-child(n+3){animation-range:entry 24% cover 58%}
  .vz-strip>a:nth-child(n+3) .vz-wipe-in::after{animation-range:entry 30% cover 66%}
  @keyframes vzCard{from{opacity:0;transform:translateX(120px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){.vz-strip>a{animation:none!important}}

.go-page, .go-page * { box-sizing: border-box; }
.go-page {
  min-height: 100svh;
  background: var(--surface-page);
  color: var(--text-primary);
}
.go-shell {
  width: min(100%, 640px);
  margin-inline: auto;
  padding: var(--space-7) var(--gutter) var(--space-5);
}
.go-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.go-logo { display: block; flex-shrink: 0; }
.go-logo img { display: block; width: 144px; height: auto; }
.go-address { color: var(--text-secondary); text-transform: none; }
.go-intro { padding-block: var(--space-8) var(--space-7); }
.go-intro h1 { font-size: var(--size-display-m); letter-spacing: var(--tracking-display); line-height: var(--leading-title); }
.go-period { color: var(--text-accent); }
.go-description { margin: var(--space-5) 0 0; color: var(--text-secondary); }
.go-links { border-top: 1px solid var(--border-default); scroll-margin-top: var(--space-5); }
.go-link { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-default); text-decoration: none; }
.go-link-copy { display: grid; gap: var(--space-2); }
.go-link-title { transition: transform var(--dur-base) var(--ease-out); }
.go-link-detail { color: var(--text-secondary); }
.go-link-label { margin-top: var(--space-2); color: var(--text-secondary); text-transform: none; overflow-wrap: anywhere; }
.go-arrow { display: grid; place-items: center; min-width: 44px; min-height: 44px; transition: transform var(--dur-base) var(--ease-out); }
.go-link-primary .go-arrow { color: var(--text-accent); }
.go-link:hover .go-link-title { transform: translateX(var(--space-2)); }
.go-link:hover .go-arrow { transform: translate(var(--space-1), calc(-1 * var(--space-1))); }
.go-link:hover .go-link-label { color: var(--text-primary); }
.go-link:focus-visible, .go-logo:focus-visible, .go-footer a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--space-1); }
.go-footer { margin-top: var(--space-7); padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; color: var(--text-secondary); }
.go-footer a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.go-footer a:hover { color: var(--text-primary); }
.go-skip { position: absolute; left: var(--gutter); top: var(--space-3); transform: translateY(-200%); padding: var(--space-3); background: var(--surface-inverse); color: var(--text-inverse); z-index: 1; }
.go-skip:focus { transform: none; }
@media (max-width: 480px) {
  .go-shell { padding-top: var(--space-6); }
  .go-logo img { width: 124px; }
  .go-intro { padding-block: var(--space-7); }
  .go-intro h1 { font-size: var(--size-display-s); }
  .go-link-title { font-size: var(--size-title-s); }
  .go-footer { margin-top: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .go-link-title, .go-arrow { transition: none; }
  .go-link:hover .go-link-title, .go-link:hover .go-arrow { transform: none; }
}