@import url("https://fonts.googleapis.com/css2?family=Anton&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* ITSON Group Design System — generated by bin/build-css.php. Do not edit. */

/* --- tokens/fonts.css --- */
/* ITSON Group webfonts — served from Google Fonts.
   SUBSTITUTION NOTE: no brand font files were supplied. Anton, Public Sans and
   IBM Plex Mono are the chosen stack, loaded from the Google Fonts CDN.
   If ITSON licenses a display face, replace the Anton @font-face closure only. */

/* --- tokens/colors.css --- */
:root{
/* Ink ramp — the system is 95% greyscale */
--ink-1000:#0A0A0B;--ink-900:#141416;--ink-800:#1D1D20;--ink-700:#2A2A2E;--ink-600:#3D3D43;
--ink-500:#5C5C64;--ink-400:#8A8A93;--ink-300:#B4B4BC;--ink-200:#D8D8DD;--ink-100:#EDEDF0;
--ink-50:#F6F6F8;--paper:#FFFFFF;

/* Signal — the single saturated colour, sampled from the "Its ON" mark. */
--signal-900:#6B005B;--signal-700:#9E0086;--signal-600:#D400B4;--signal-500:#FF00D8;
--signal-400:#FF4DE0;--signal-200:#FFB8EE;--signal-100:#FFE6F8;

/* Mark gradient — sampled top-to-bottom off assets/logo-itson.png.
   RESERVED for the logo and, sparingly, one hero rule or figure per page. Never on text blocks, never on cards. */
--mark-violet:#A818F0;--mark-magenta:#FF00D8;--mark-rose:#FF4860;--mark-orange:#FF9018;
--gradient-mark:linear-gradient(180deg,var(--mark-violet) 0%,var(--mark-magenta) 34%,var(--mark-rose) 64%,var(--mark-orange) 100%);
--gradient-mark-h:linear-gradient(90deg,var(--mark-violet) 0%,var(--mark-magenta) 34%,var(--mark-rose) 64%,var(--mark-orange) 100%);

/* Semantic status — desaturated so signal stays loudest */
--status-success:#0E8A4F;--status-success-bg:#E6F4EC;
--status-warning:#A66300;--status-warning-bg:#FBF0DF;
--status-danger:#C6291D;--status-danger-bg:#FBE9E7;
--status-info:var(--signal-700);--status-info-bg:var(--signal-100);

/* Text */
--text-primary:var(--ink-1000);--text-secondary:var(--ink-500);--text-tertiary:var(--ink-400);
--text-disabled:var(--ink-300);--text-inverse:var(--paper);--text-on-signal:var(--paper);
--text-link:var(--signal-700);--text-link-hover:var(--signal-500);

/* Surfaces */
--surface-page:var(--paper);--surface-raised:var(--paper);--surface-sunken:var(--ink-50);
--surface-muted:var(--ink-100);--surface-inverse:var(--ink-1000);--surface-inverse-raised:var(--ink-900);
--surface-signal:var(--signal-500);--surface-signal-quiet:var(--signal-100);
--surface-scrim:rgba(10,10,11,.68);

/* Borders */
--border-subtle:var(--ink-100);--border-default:var(--ink-200);--border-strong:var(--ink-1000);
--border-inverse:rgba(255,255,255,.14);--border-focus:var(--signal-500);

/* Overlays */
--overlay-hover:rgba(10,10,11,.04);--overlay-press:rgba(10,10,11,.08);
--overlay-hover-inverse:rgba(255,255,255,.08);--overlay-press-inverse:rgba(255,255,255,.14);
}
[data-theme="inverse"]{
--text-primary:var(--paper);--text-secondary:var(--ink-300);--text-tertiary:var(--ink-400);
--text-disabled:var(--ink-600);--text-inverse:var(--ink-1000);
--text-link:var(--signal-400);--text-link-hover:var(--signal-200);
--surface-page:var(--ink-1000);--surface-raised:var(--ink-900);--surface-sunken:var(--ink-900);
--surface-muted:var(--ink-800);--surface-inverse:var(--paper);
--border-subtle:rgba(255,255,255,.09);--border-default:rgba(255,255,255,.16);--border-strong:var(--paper);
--overlay-hover:rgba(255,255,255,.08);--overlay-press:rgba(255,255,255,.14);
}

/* --- tokens/typography.css --- */
:root{
--font-display:"Anton","Arial Narrow",Impact,sans-serif;
--font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:800;

/* Display — Anton only. Always uppercase, always negative tracking. */
--display-xl-size:96px;
--display-xl-line:0.92;
--display-xl-track:-0.022em;
--display-l-size:68px;
--display-l-line:0.94;
--display-l-track:-0.02em;
--display-m-size:48px;
--display-m-line:0.98;
--display-m-track:-0.016em;
--display-s-size:34px;
--display-s-line:1.02;
--display-s-track:-0.012em;

/* Titles — Public Sans, sentence case */
--title-l-size:24px;
--title-l-line:1.25;
--title-l-track:-0.014em;
--title-l-weight:700;
--title-m-size:19px;
--title-m-line:1.35;
--title-m-track:-0.01em;
--title-m-weight:700;
--title-s-size:16px;
--title-s-line:1.4;
--title-s-track:-0.006em;
--title-s-weight:600;

/* Body */
--body-l-size:18px;
--body-l-line:1.55;
--body-l-track:-0.003em;
--body-m-size:16px;
--body-m-line:1.6;
--body-m-track:0em;
--body-s-size:14px;
--body-s-line:1.55;
--body-s-track:0.002em;

/* Label — the workhorse for eyebrows, buttons and table heads */
--label-size:13px;
--label-line:1.2;
--label-track:0.09em;
--label-weight:600;
--label-s-size:11px;
--label-s-line:1.2;
--label-s-track:0.11em;
--label-s-weight:600;

/* Mono — data, IDs, code, legal references */
--mono-size:13px;
--mono-line:1.5;
--mono-track:0em;
}

/* --- tokens/spacing.css --- */
:root{
--space-px:1px;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
--space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;--space-10:96px;--space-11:128px;--space-12:180px;
/* Semantic rhythm — "balanced" density */
--pad-control-y:10px;--pad-control-x:18px;
--pad-card:24px;--pad-card-lg:32px;
--gap-inline:8px;--gap-stack:16px;--gap-group:32px;
--section-y:96px;--section-y-tight:64px;
}

/* --- tokens/shape.css --- */
:root{
/* Small radii only. This brand is squared-off and technical. */
--radius-0:0px;--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-pill:999px;
--radius-control:var(--radius-sm);--radius-card:var(--radius-md);--radius-surface:var(--radius-lg);

--border-width:1px;--border-width-strong:2px;--rule-width:1px;

/* Shadows are near-absent. Elevation is expressed with rules and inversion. */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(10,10,11,.06);
--shadow-2:0 4px 16px -4px rgba(10,10,11,.12);
--shadow-3:0 18px 48px -12px rgba(10,10,11,.22);
--shadow-inset-hairline:inset 0 -1px 0 var(--border-subtle);
--focus-ring:0 0 0 3px rgba(255,0,216,.28);
--focus-ring-inverse:0 0 0 3px rgba(255,77,224,.45);
}

/* --- tokens/motion.css --- */
:root{
--dur-instant:80ms;
--dur-fast:120ms;
--dur-base:180ms;
--dur-slow:280ms;
--dur-slower:420ms;
--ease-out:cubic-bezier(.2,.8,.2,1);
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-in:cubic-bezier(.4,0,1,1);
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
--transition-surface:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms;
--dur-fast:0ms;
--dur-base:0ms;
--dur-slow:0ms;
--dur-slower:0ms;
}}

/* --- tokens/layout.css --- */
:root{
--container-max:1240px;--container-narrow:720px;--container-wide:1440px;
--gutter:24px;--gutter-lg:40px;
--grid-columns:12;
--grid-gap:24px;
--header-height:72px;--header-height-compact:56px;
--z-base:0;
--z-raised:10;
--z-sticky:100;
--z-overlay:400;
--z-modal:500;
--z-toast:600;
--z-tooltip:700;
--breakpoint-sm:600px;--breakpoint-md:900px;--breakpoint-lg:1200px;--breakpoint-xl:1440px;
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--body-m-size);line-height:var(--body-m-line);letter-spacing:var(--body-m-track);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--text-link) 34%,transparent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--signal-500);color:var(--paper)}
hr{border:0;border-top:var(--rule-width) solid var(--border-default);margin:0}
code,kbd,samp{font-family:var(--font-mono);font-size:var(--mono-size)}
img{max-width:100%;display:block}

/* --- components.css --- */
/* ITSON Group Design System — component layer.
   Port of the project's JSX components to plain CSS classes for the PHP site.
   Every value comes from the tokens or from templates/corporate-page.
   Structure comes from hairline rules and inversion, never from boxes or glow.

   Responsive note: the design system specifies fixed display sizes (96/68/48/34px).
   Those are desktop values; the media queries at the foot of this file step them
   down for narrow viewports, which the source system did not specify. */

/* ---------- Layout ---------- */
.ds-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.ds-container--narrow{max-width:var(--container-narrow)}
.ds-section{padding:var(--section-y) 0}
.ds-section--tight{padding:var(--section-y-tight) 0}
.ds-section--sunken{background:var(--surface-sunken)}
.ds-section--inverse{background:var(--ink-1000);color:var(--paper)}
.ds-section--flush{padding:var(--space-8) 0}

/* ---------- Type ---------- */
.ds-display-xl,.ds-display-l,.ds-display-m,.ds-display-s{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;margin:0}
.ds-display-xl{font-size:var(--display-xl-size);line-height:var(--display-xl-line);letter-spacing:var(--display-xl-track)}
.ds-display-l{font-size:var(--display-l-size);line-height:var(--display-l-line);letter-spacing:var(--display-l-track)}
.ds-display-m{font-size:var(--display-m-size);line-height:var(--display-m-line);letter-spacing:var(--display-m-track)}
.ds-display-s{font-size:var(--display-s-size);line-height:var(--display-s-line);letter-spacing:var(--display-s-track)}

.ds-title-l{font-size:var(--title-l-size);line-height:var(--title-l-line);letter-spacing:var(--title-l-track);font-weight:var(--title-l-weight)}
.ds-title-m{font-size:var(--title-m-size);line-height:var(--title-m-line);letter-spacing:var(--title-m-track);font-weight:var(--title-m-weight)}
.ds-title-s{font-size:var(--title-s-size);line-height:var(--title-s-line);letter-spacing:var(--title-s-track);font-weight:var(--title-s-weight)}

.ds-body-l{font-size:var(--body-l-size);line-height:var(--body-l-line);letter-spacing:var(--body-l-track)}
.ds-body-m{font-size:var(--body-m-size);line-height:var(--body-m-line);letter-spacing:var(--body-m-track)}
.ds-body-s{font-size:var(--body-s-size);line-height:var(--body-s-line);letter-spacing:var(--body-s-track)}

.ds-label{font-size:var(--label-size);line-height:var(--label-line);letter-spacing:var(--label-track);font-weight:var(--label-weight);text-transform:uppercase}
.ds-label-s{font-size:var(--label-s-size);line-height:var(--label-s-line);letter-spacing:var(--label-s-track);font-weight:var(--label-s-weight);text-transform:uppercase}
.ds-mono{font-family:var(--font-mono);font-size:var(--mono-size);line-height:var(--mono-line)}

.ds-muted{color:var(--text-secondary)}
.ds-measure{max-width:56ch}

/* ---------- Eyebrow — uppercase label + 24x2 magenta rule ---------- */
.ds-eyebrow{display:flex;align-items:center;gap:10px;
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--text-secondary)}
.ds-eyebrow::before{content:"";width:24px;height:2px;background:var(--signal-500);flex:none}
.ds-section--inverse .ds-eyebrow{color:var(--ink-300)}

/* ---------- Divider / rules ---------- */
.ds-rule{height:1px;background:var(--border-default)}
.ds-rule--strong{height:2px;background:var(--border-strong)}
.ds-section--inverse .ds-rule{background:var(--border-inverse)}
.ds-section--inverse .ds-rule--strong{background:var(--paper)}

/* ---------- Icon — Lucide via CSS mask, inherits currentColor ---------- */
.ds-icon{display:inline-block;flex:none;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ds-icon--16{width:16px;height:16px}
.ds-icon--20{width:20px;height:20px}
.ds-icon--24{width:24px;height:24px}

/* ---------- Button ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-inline);
  padding:var(--pad-control-y) var(--pad-control-x);border-radius:var(--radius-control);
  font-family:var(--font-body);font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:var(--transition-control);white-space:nowrap}
.ds-btn:hover{border-bottom-color:transparent}
.ds-btn:active{transform:translateY(1px)}
.ds-btn--lg{padding:14px 26px}
.ds-btn--block{width:100%}

.ds-btn--primary{background:var(--ink-1000);color:var(--paper);border-color:var(--ink-1000)}
.ds-btn--primary:hover{background:var(--ink-700);border-color:var(--ink-700);color:var(--paper)}

.ds-btn--signal{background:var(--signal-500);color:var(--text-on-signal);border-color:var(--signal-500)}
.ds-btn--signal:hover{background:var(--signal-600);border-color:var(--signal-600);color:var(--paper)}

.ds-btn--secondary{background:transparent;color:var(--ink-1000);border-color:var(--border-strong)}
.ds-btn--secondary:hover{background:var(--ink-1000);color:var(--paper)}

.ds-btn--inverse{background:var(--paper);color:var(--ink-1000);border-color:var(--paper)}
.ds-btn--inverse:hover{background:var(--ink-100);border-color:var(--ink-100);color:var(--ink-1000)}

.ds-btn--quiet{background:transparent;color:var(--ink-1000);border-color:var(--border-default)}
.ds-btn--quiet:hover{background:var(--overlay-hover);color:var(--ink-1000)}
.ds-section--inverse .ds-btn--quiet{color:var(--paper);border-color:var(--border-inverse)}
.ds-section--inverse .ds-btn--quiet:hover{background:var(--overlay-hover-inverse);color:var(--paper)}

.ds-btn:disabled,.ds-btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed}

/* ---------- Card — flat at rest, no resting shadow, no coloured left border ---------- */
.ds-card{background:var(--surface-raised);border:1px solid var(--border-default);
  border-radius:var(--radius-card);padding:var(--pad-card);box-shadow:var(--shadow-0)}
.ds-card--lg{padding:var(--pad-card-lg)}
.ds-card--interactive{transition:transform var(--dur-base) var(--ease-out),
  border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-out);
  display:block;color:inherit;border-bottom-width:1px}
.ds-card--interactive:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.ds-section--inverse .ds-card{background:var(--ink-900);border-color:var(--border-inverse);color:var(--paper)}

/* Sector card icon plate — near-black square, white glyph */
.ds-plate{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--ink-1000);
  color:var(--paper);display:flex;align-items:center;justify-content:center}
.ds-section--inverse .ds-plate{background:var(--paper);color:var(--ink-1000)}

/* ---------- Badge / Tag ---------- */
.ds-badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;
  border-radius:var(--radius-sm);background:var(--ink-100);color:var(--ink-700);
  font-size:var(--label-s-size);font-weight:var(--label-s-weight);letter-spacing:var(--label-s-track);
  text-transform:uppercase;line-height:1;white-space:nowrap}
.ds-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;
  border-radius:var(--radius-sm);border:1px solid var(--border-default);background:transparent;
  color:var(--ink-700);font-size:var(--label-s-size);font-weight:var(--label-s-weight);
  letter-spacing:var(--label-s-track);text-transform:uppercase;cursor:pointer;
  transition:var(--transition-control)}
.ds-tag:hover{border-color:var(--border-strong)}
.ds-tag[aria-pressed="true"]{background:var(--ink-1000);color:var(--paper);border-color:var(--ink-1000)}

/* ---------- Stat strip — Anton figures, hairline dividers ---------- */
.ds-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.ds-stat{padding:0 var(--space-7)}
.ds-stat+.ds-stat{border-left:1px solid var(--border-default)}
.ds-stat__figure{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--display-s-size);line-height:.95;letter-spacing:var(--display-s-track)}
.ds-stat__label{margin-top:6px;font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text-secondary)}

/* ---------- NavBar — the one fixed element, 72px, 86% + blur ---------- */
.ds-navbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--header-height);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-1)}
.ds-navbar__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-7)}
.ds-navbar__links{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.ds-navlink{position:relative;display:inline-block;padding:6px 0;color:var(--ink-700);
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);
  text-transform:uppercase;border-bottom:none;transition:var(--transition-control)}
.ds-navlink:hover{color:var(--ink-1000)}
.ds-navlink[aria-current="page"]{color:var(--ink-1000)}
/* Magenta marks the active navigation item only. */
.ds-navlink[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--signal-500)}

/* Logo lockup — mark plus Anton wordmark for corporate contexts */
.ds-logo{display:inline-flex;align-items:center;gap:10px;border-bottom:none;color:var(--ink-1000)}
.ds-logo__mark{width:32px;height:32px;flex:none;border-radius:var(--radius-sm)}
/* The gradient is only a stand-in: it applies when no mark image is present.
   With an <img> inside, a transparent PNG would otherwise sit on the gradient. */
.ds-logo__mark:empty{background:var(--gradient-mark)}
/* With the real mark present, size by height and let the width follow. The
   artwork is portrait (311x359), so boxing it into a 32px square would render
   the brush strokes at ~28px, where the design system warns they fill in. */
.ds-logo__mark:not(:empty){width:auto;height:40px;border-radius:0}
.ds-logo__mark img{height:100%;width:auto;object-fit:contain}
.ds-logo__word{font-family:var(--font-display);text-transform:uppercase;font-size:20px;
  letter-spacing:-.012em;line-height:1}
.ds-section--inverse .ds-logo,.ds-footer .ds-logo{color:var(--paper)}

.ds-navtoggle{display:none;background:transparent;border:1px solid var(--border-default);
  border-radius:var(--radius-sm);padding:8px;color:var(--ink-1000);cursor:pointer}

/* ---------- Portfolio list ---------- */
.ds-list{border-top:2px solid var(--border-strong)}
.ds-row{display:grid;grid-template-columns:2fr 1fr 2.4fr;gap:var(--gutter);align-items:center;
  padding:var(--space-6) 4px;border-bottom:1px solid var(--border-subtle);
  color:inherit;border-bottom-width:1px;transition:var(--transition-control)}
a.ds-row:hover{background:var(--overlay-hover);color:inherit}
.ds-row__name{font-size:var(--title-m-size);font-weight:var(--title-m-weight);letter-spacing:var(--title-m-track)}
.ds-row__sector{font-size:var(--label-s-size);font-weight:var(--label-s-weight);
  letter-spacing:var(--label-s-track);text-transform:uppercase;color:var(--text-secondary)}
.ds-row__blurb{font-size:var(--body-s-size);line-height:1.55;color:var(--text-secondary)}

/* ---------- Forms ---------- */
.ds-field{display:block;margin-bottom:var(--space-6)}
.ds-field__label{display:block;margin-bottom:var(--space-3);font-size:var(--label-size);
  font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--ink-700)}
.ds-field__hint{margin-top:var(--space-2);font-size:var(--body-s-size);color:var(--text-secondary)}
.ds-field__error{margin-top:var(--space-2);font-size:var(--body-s-size);color:var(--status-danger)}
.ds-input,.ds-textarea,.ds-select{width:100%;padding:var(--pad-control-y) var(--pad-control-x);
  font-family:var(--font-body);font-size:var(--body-m-size);line-height:var(--body-m-line);
  color:var(--text-primary);background:var(--paper);
  border:1px solid var(--border-default);border-radius:var(--radius-control);
  transition:var(--transition-control)}
.ds-input:hover,.ds-textarea:hover,.ds-select:hover{border-color:var(--ink-400)}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--border-strong);
  box-shadow:var(--focus-ring)}
.ds-input[aria-invalid="true"],.ds-textarea[aria-invalid="true"]{border-color:var(--status-danger)}
.ds-textarea{min-height:140px;resize:vertical}
.ds-check{display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer;
  font-size:var(--body-s-size);line-height:1.55;color:var(--text-secondary)}
.ds-check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin-top:1px;
  border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--paper);
  cursor:pointer;transition:var(--transition-control);position:relative}
.ds-check input:hover{border-color:var(--ink-400)}
.ds-check input:checked{background:var(--ink-1000);border-color:var(--ink-1000)}
.ds-check input:checked::after{content:"";position:absolute;inset:0;background:var(--paper);
  -webkit-mask:url(https://unpkg.com/lucide-static@0.469.0/icons/check.svg) center/13px no-repeat;
  mask:url(https://unpkg.com/lucide-static@0.469.0/icons/check.svg) center/13px no-repeat}
.ds-check input:focus-visible{box-shadow:var(--focus-ring)}

/* ---------- Banner ---------- */
.ds-banner{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-card);border:1px solid transparent;font-size:var(--body-s-size);line-height:1.55}
.ds-banner__icon{margin-top:2px}
.ds-banner--success{background:var(--status-success-bg);border-color:var(--status-success);color:#0A3D24}
.ds-banner--success .ds-banner__icon{color:var(--status-success)}
.ds-banner--danger{background:var(--status-danger-bg);border-color:var(--status-danger);color:#5C120C}
.ds-banner--danger .ds-banner__icon{color:var(--status-danger)}
.ds-banner--info{background:var(--status-info-bg);border-color:var(--status-info);color:var(--signal-900)}

/* ---------- Footer ---------- */
.ds-footer{background:var(--ink-1000);color:var(--paper);padding:var(--space-9) 0 var(--space-7)}
.ds-footer .ds-logo__mark:not(:empty){height:46px}
.ds-footer a{color:var(--ink-300);border-bottom-color:transparent}
.ds-footer a:hover{color:var(--paper)}
.ds-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap-group);
  padding-bottom:var(--space-7);border-bottom:1px solid var(--border-inverse)}
.ds-footer__heading{font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-400);
  margin-bottom:var(--space-5)}
.ds-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.ds-footer__links a{font-size:var(--body-s-size)}
.ds-footer__bottom{padding-top:var(--space-6);display:flex;justify-content:space-between;
  gap:var(--space-6);flex-wrap:wrap;font-size:var(--body-s-size);color:var(--ink-400)}

/* ---------- Utility ---------- */
.ds-stack-2>*+*{margin-top:var(--space-2)}
.ds-stack-3>*+*{margin-top:var(--space-3)}
.ds-stack-5>*+*{margin-top:var(--space-5)}
.ds-stack-6>*+*{margin-top:var(--space-6)}
.ds-stack-7>*+*{margin-top:var(--space-7)}
.ds-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.ds-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.ds-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ds-actions{display:flex;gap:var(--space-4);flex-wrap:wrap}
.ds-skip{position:absolute;left:-9999px}
.ds-skip:focus{left:var(--gutter);top:8px;z-index:calc(var(--z-sticky) + 1);
  background:var(--paper);color:var(--ink-1000);padding:10px 16px;border-radius:var(--radius-sm)}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .ds-display-xl{font-size:72px;line-height:.96}
}
@media (max-width:900px){
  :root{--section-y:64px;--section-y-tight:48px}
  .ds-display-xl{font-size:56px;line-height:1}
  .ds-display-l{font-size:44px}
  .ds-display-m{font-size:36px;line-height:1.02}
  .ds-grid-4,.ds-grid-3{grid-template-columns:repeat(2,1fr)}
  .ds-stats{grid-template-columns:repeat(2,1fr);gap:var(--space-7) 0}
  .ds-stat:nth-child(3){border-left:none}
  .ds-footer__top{grid-template-columns:1fr 1fr}
  .ds-navbar__links{display:none}
  .ds-navbar__links.is-open{display:flex;position:absolute;top:var(--header-height);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);
    border-bottom:1px solid var(--border-default);padding:var(--space-5) var(--gutter);
    box-shadow:var(--shadow-2)}
  .ds-navbar__links.is-open .ds-navlink{padding:var(--space-4) 0;width:100%}
  .ds-navtoggle{display:inline-flex}
  .ds-row{grid-template-columns:1fr;gap:var(--space-3)}
}
@media (max-width:600px){
  :root{--gutter:20px}
  .ds-display-xl{font-size:42px}
  .ds-display-m{font-size:30px}
  .ds-grid-4,.ds-grid-3,.ds-grid-2{grid-template-columns:1fr}
  .ds-stats{grid-template-columns:1fr}
  .ds-stat{padding:0}
  .ds-stat+.ds-stat{border-left:none;border-top:1px solid var(--border-default);padding-top:var(--space-6)}
  .ds-footer__top{grid-template-columns:1fr}
}