/* ============================================================================
   OPA Software, Ltd. — reference stylesheet
   This file styles EVERY reference page in reference/. There is no "page CSS"
   anywhere else: if a page needs a rule, it is in here.

   Load order on every reference page:
     <link rel="stylesheet" href="../styles.css">   design-system tokens
     <link rel="stylesheet" href="site.css">        this file
   ==========================================================================*/

/* ---- 0. Display face -------------------------------------------------------
   Provisional: Space Grotesk (option B). To revert to Archivo (option A) or
   switch to Bricolage Grotesque (option C), change ONLY these two lines and the
   font <link> in each page head. Nothing else in this file references a family.
*/
:root{
  --display:"Space Grotesk","Archivo",system-ui,sans-serif;
  --display-weight-black:700;
  --display-weight-bold:700;
  --display-tracking:-0.03em;

  /* ---- Page-level layout contract (the thing that broke last round) -------
     THREE widths only. Every block on every page is one of these three, and
     blocks that sit above/below each other in a sequence MUST use the same
     width so their left and right edges align exactly. */
  --w-full:1240px;   /* bands, grids, page furniture */
  --w-wide:940px;    /* article end zone, diagrams, case-study media */
  --w-prose:680px;   /* article body: 65–75 characters */

  --band-y:clamp(3.5rem,2rem + 6vw,7.5rem);
  --band-y-tight:clamp(2.5rem,1.75rem + 3.5vw,4.5rem);
  --block-y:2.5rem;         /* gap between blocks INSIDE a band */
  --end-y:2.5rem;           /* uniform gap between end-zone blocks */
  --rule:1px solid var(--border-hairline);
  --rule-strong:2px solid var(--navy-900);
}

/* ---- 1. Element base (page-level, not component-level) ------------------- */
body{font-family:var(--display);background:var(--surface-page);color:var(--text-body);font-size:var(--text-body);line-height:var(--leading-body)}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--navy-900);letter-spacing:var(--display-tracking);margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.5rem + 4vw,4.75rem);line-height:.96;font-weight:var(--display-weight-black)}
h2{font-size:clamp(1.75rem,1.25rem + 1.8vw,2.75rem);line-height:1.06;font-weight:var(--display-weight-bold)}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);line-height:1.16;font-weight:var(--display-weight-bold)}
h4{font-size:1.125rem;line-height:1.3;font-weight:var(--display-weight-bold)}
p{margin:0}
strong{font-weight:600}
::selection{background:var(--gold-400);color:var(--navy-900)}

/* ---- 2. Containers & bands ---------------------------------------------- */
.band{background:var(--surface-page)}
.band--paper{background:var(--surface-paper)}
.band--sunken{background:var(--surface-sunken)}
.band--header{background:var(--surface-header)}
.band--navy{background:var(--surface-inverse);color:var(--text-on-inverse)}
.band--navy h1,.band--navy h2,.band--navy h3,.band--navy h4{color:var(--cream-050)}
.band + .band--paper,.band--paper + .band{border-top:var(--rule)}
.container{width:100%;max-width:var(--w-full);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--w-wide)}
.container--prose{max-width:var(--w-prose)}
.band > .container{padding-block:var(--band-y)}
.band--tight > .container{padding-block:var(--band-y-tight)}
.band--flush > .container{padding-block:0}
.stack{display:grid;gap:var(--block-y);justify-items:start}
.stack--tight{gap:var(--space-4)}
.stack--loose{gap:var(--space-16)}

/* ---- 3. Brand furniture -------------------------------------------------- */
.stripe{height:6px;background:linear-gradient(to right,var(--gold-600) 0 33.333%,var(--terracotta-600) 33.333% 66.666%,var(--navy-700) 66.666% 100%);border:0;margin:0}
.stripe--lead{width:72px;height:5px}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0}
.eyebrow--gold{color:var(--gold-400)}
.eyebrow--terracotta{color:var(--terracotta-700)}
.lead{font-size:var(--text-lead);line-height:1.34;color:var(--text-muted);max-width:46ch}
.band--navy .lead{color:var(--navy-300)}
.measure{max-width:var(--w-prose)}

/* ---- 4. Header ----------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface-header);border-bottom:var(--rule)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:var(--header-h)}
.site-header .logo{display:flex;align-items:center;text-decoration:none}
.site-header .logo img{height:34px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:var(--space-7,1.75rem)}
.nav a{position:relative;font-family:var(--font-mono);font-size:var(--text-label-lg);letter-spacing:.04em;color:var(--navy-900);text-decoration:none;padding:var(--space-2) 0;display:inline-flex;align-items:center;min-height:var(--tap-min)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--terracotta-600);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-fast) var(--ease-standard)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{display:none}

/* ---- 5. Buttons & links -------------------------------------------------- */
.btn{background-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:var(--space-3) var(--space-6);min-height:var(--tap-min);border:2px solid transparent;border-radius:var(--radius-1);text-decoration:none;cursor:pointer;transition:var(--transition-control);white-space:nowrap}
.btn--lg{font-size:var(--text-label-lg);padding:var(--space-4) var(--space-8);min-height:56px}
.btn--sm{font-size:.75rem;padding:var(--space-2) var(--space-4);min-height:36px}
.btn--primary{background:var(--terracotta-600);border-color:var(--terracotta-600);color:#fff}
.btn--primary:hover{background:var(--terracotta-800);border-color:var(--terracotta-800)}
.btn--secondary{border-color:var(--navy-700);color:var(--navy-700)}
.btn--secondary:hover{background:var(--navy-700);color:var(--cream-050)}
.btn--inverse{background:var(--cream-050);border-color:var(--cream-050);color:var(--navy-900)}
.btn--inverse:hover{background:#fff;border-color:#fff}
.btn--ghost-inverse{border-color:var(--navy-500);color:var(--cream-050)}
.btn--ghost-inverse:hover{background:var(--navy-800)}
.btn:active{transform:translateY(1px)}
.btns{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-label-lg);letter-spacing:.04em;color:var(--text-link);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.arrow i{font-style:normal;transition:transform var(--duration-fast) var(--ease-standard)}
.arrow:hover i{transform:translateX(4px)}
.arrow--navy{color:var(--navy-700)}
.arrow--inverse{color:var(--cream-050)}
.arrow--block{color:currentColor}

/* ---- 6. Hero ------------------------------------------------------------- */
.hero > .container{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--space-16);align-items:end;padding-block:clamp(3rem,2rem + 5vw,6.5rem)}
.hero h1{max-width:19ch}
.hero .lead{max-width:52ch;font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
.spec{margin:0;border:var(--rule);background:var(--surface-paper)}
.spec > div{padding:var(--space-4) var(--space-5)}
.spec > div + div{border-top:var(--rule)}
.spec dt{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.spec dd{margin:4px 0 0;font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--navy-900)}

/* ---- 7. Service band (the colour-blocked trio — brand's best element) ---- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.service{position:relative;overflow:hidden;display:grid;gap:var(--space-5);align-content:start;padding:var(--pad-card-lg);min-height:360px;text-decoration:none;border-radius:0;transition:filter var(--duration-base) var(--ease-standard)}
.service:hover{filter:brightness(.94)}
.service--lead{grid-column:span 3;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-16);align-items:center;padding-block:var(--space-16)}
.service--lead .crossplat{justify-content:flex-end;align-items:flex-end;flex-wrap:nowrap;gap:var(--space-5)}
.service--lead .device--phone{width:168px}
.service--lead .browser{flex:1 1 0;max-width:340px}
.service--gold{background:var(--gold-600);color:var(--navy-900)}
.service--terracotta{background:var(--terracotta-600);color:#fff}
.service--navy{background:var(--navy-700);color:var(--cream-050)}
.service h2,.service h3{color:inherit;position:relative}
.service h3{max-width:20ch}
.service p{position:relative;font-size:var(--text-body-sm);line-height:var(--leading-body);max-width:38ch;opacity:.95}
.service .num{position:absolute;top:-18px;right:10px;font-family:var(--display);font-weight:var(--display-weight-black);font-size:148px;line-height:1;letter-spacing:-.06em;opacity:.2}
.service .tags{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.service .tags span{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;opacity:.85;white-space:nowrap}

/* ---- 8. Tech signalling (mono, no logo soup) ----------------------------- */
.stack-rail{width:100%;border-top:var(--rule-strong);border-bottom:var(--rule)}
.stack-rail dl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0}
.stack-rail dl > div{padding:var(--space-5) var(--space-5) var(--space-5) 0}
.stack-rail dl > div + div{border-left:var(--rule);padding-left:var(--space-5)}
.stack-rail dt{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-700);margin-bottom:var(--space-3)}
.stack-rail dd{margin:0;font-family:var(--font-mono);font-size:var(--text-body-sm);line-height:1.9;color:var(--navy-900)}
.stack-rail dd span{display:block}

/* ---- 9. Cards (one card system, used by work, news and team) ------------- */
.card{display:grid;gap:var(--space-4);align-content:start;background:var(--surface-card);border:var(--rule);border-radius:var(--radius-card);text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
a.card:hover{box-shadow:6px 6px 0 0 var(--navy-900);transform:translate(-2px,-2px)}
.card__media{position:relative;background:var(--cream-100);border-bottom:var(--rule);aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__media .mark{position:absolute;left:0;bottom:0;width:72px;height:4px;background:linear-gradient(to right,var(--gold-600) 0 33.333%,var(--terracotta-600) 33.333% 66.666%,var(--navy-700) 66.666% 100%)}
.card__body{display:grid;gap:var(--space-3);padding:var(--space-6)}
.card__meta{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em;color:var(--text-faint);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.card h3{overflow-wrap:anywhere}
.card p{font-size:var(--text-body-sm);color:var(--text-muted)}
/* typographic cover for coverless posts/projects — never a bare text box */
.cover-type{background:var(--navy-900);color:var(--cream-050);display:grid;align-content:space-between;gap:var(--space-6);padding:var(--space-6);aspect-ratio:16/10;position:relative;overflow:hidden}
.cover-type--gold{background:var(--gold-600);color:var(--navy-900)}
.cover-type--terracotta{background:var(--terracotta-600);color:#fff}
.cover-type .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.cover-type .glyph{font-family:var(--display);font-weight:var(--display-weight-black);font-size:clamp(1.375rem,2.6vw,1.875rem);line-height:1.04;letter-spacing:-.03em;max-width:16ch;overflow-wrap:anywhere;hyphens:auto}
.cover-type--hero .glyph{font-size:clamp(2rem,6vw,3.25rem);line-height:.92}
.card__media > .cover-type{aspect-ratio:auto;width:100%;height:100%}
.cover-type .stripe{position:absolute;left:0;right:0;bottom:0;height:5px}
.badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--navy-100);background:var(--navy-050);color:var(--navy-800);border-radius:var(--radius-1);white-space:nowrap}
.badge--pill{border-radius:999px}
.badge--gold{background:var(--gold-100);border-color:var(--gold-400);color:var(--gold-900)}
.badge--terracotta{background:var(--terracotta-100);border-color:var(--terracotta-400);color:var(--terracotta-900)}
.badge--nda{background:transparent;border-color:var(--ink-300);color:var(--ink-600)}
.badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ---- 10. Grids (fixed column counts; never a ragged hole) --------------- */
.grid{display:grid;gap:var(--space-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* 2-up fallback: when a 3-up grid has 2 or 4 items the last row must fill,
   so pages declare .grid--fill and items stretch instead of leaving a hole. */
.grid--fill{grid-auto-flow:dense}
.grid--fill > .card:last-child:nth-child(3n-1){grid-column:span 2}

/* ---- 11. Section headings ------------------------------------------------ */
.sec-head{display:grid;gap:var(--space-4);justify-items:start;max-width:780px}
.sec-head--between{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:var(--space-8)}
.sec-head h2{max-width:26ch}

/* ---- 12. Article page ---------------------------------------------------- */
.article-head > .container{display:grid;gap:var(--space-5);justify-items:start;max-width:var(--w-wide);padding-block:var(--space-16) var(--space-12)}
.article-head h1{max-width:26ch;font-size:clamp(2.25rem,1.4rem + 3vw,3.75rem);line-height:1.02}
.byline{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em;color:var(--text-faint)}
.byline .who{color:var(--navy-800)}
.article-cover{width:100%;max-width:var(--w-wide);margin-inline:auto}
.article-cover img{width:100%;height:auto;display:block;border:var(--rule)}
.article-body{display:grid;gap:var(--space-6);justify-items:center;width:100%}
.article-body > *{width:100%;max-width:var(--w-prose)}
.article-body > .codeblock,.article-body > figure,.article-body > .pullquote,.article-body > table.data,.article-body > .breakout{max-width:var(--w-wide)}
.article-body h2{margin-top:var(--space-8);font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.article-body h3{margin-top:var(--space-5)}
.article-body ul,.article-body ol{margin:0;padding-left:1.35em;display:grid;gap:var(--space-3)}
.article-body li::marker{color:var(--terracotta-700);font-family:var(--font-mono)}
.article-body blockquote{margin:var(--space-4) 0;padding-left:var(--space-6);border-left:3px solid var(--terracotta-600);font-family:var(--display);font-size:var(--text-h3);font-weight:500;line-height:1.28;color:var(--navy-900)}
.article-body blockquote cite{display:block;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-caption);font-style:normal;letter-spacing:.04em;color:var(--text-faint)}
.pullquote{margin:var(--space-10) auto;padding:var(--space-8) 0;border-top:var(--rule-strong);border-bottom:var(--rule-strong);font-family:var(--display);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);font-weight:var(--display-weight-bold);line-height:1.14;letter-spacing:var(--display-tracking);color:var(--navy-900);text-align:left}
.callout{max-width:var(--w-prose);background:var(--cream-100);border-left:6px solid var(--gold-600);padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-2)}
.callout p{font-size:var(--text-body-sm)}
.callout .label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-900)}
.article-body code{font-family:var(--font-mono);font-size:.9375em;background:var(--cream-100);border:1px solid var(--cream-200);padding:1px 5px;border-radius:2px}
.codeblock{margin:var(--space-8) auto;background:var(--navy-900);border:1px solid var(--navy-800);border-radius:var(--radius-card);overflow:hidden}
.codeblock header{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--navy-800);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em}
.codeblock header .file{color:var(--gold-400)}
.codeblock header .lang{color:var(--navy-300);text-transform:uppercase}
.codeblock pre{margin:0;padding:var(--space-5);overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-code);line-height:1.7;color:var(--cream-050);tab-size:2}
.codeblock code{background:none;border:0;padding:0;font-size:inherit}
table.data{width:100%;border-collapse:collapse;font-size:var(--text-body-sm)}
table.data caption{text-align:left;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em;color:var(--text-muted);padding-bottom:var(--space-3)}
table.data th{text-align:left;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-800);border-bottom:var(--rule-strong);padding:var(--space-3) var(--space-4) var(--space-3) 0}
table.data td{border-bottom:var(--rule);padding:var(--space-3) var(--space-4) var(--space-3) 0;vertical-align:top}
figure{margin:var(--space-10) auto;width:100%}
figure .frame{background:var(--surface-card);border:var(--rule);border-radius:var(--radius-card);padding:var(--space-6);overflow-x:auto}
figure img,figure svg{margin-inline:auto;display:block;max-width:100%;height:auto}
figcaption{display:flex;gap:var(--space-3);margin-top:var(--space-3);padding-left:var(--space-3);border-left:2px solid var(--gold-600);font-size:var(--text-caption);line-height:1.45;color:var(--text-muted)}
figcaption .n{font-family:var(--font-mono);letter-spacing:.04em;color:var(--navy-700);white-space:nowrap}

/* PlantUML diagram theming — the SVGs are self-hosted and inherit these */
.opa-diagram{--diagram-surface:var(--surface-paper);--diagram-line:var(--navy-700);--diagram-ink:var(--ink-800);--diagram-accent-1:var(--terracotta-600);--diagram-accent-2:var(--gold-600);--diagram-accent-3:var(--navy-300);width:100%;max-width:520px;height:auto}
.diagram-frame{background:var(--surface-paper);border:var(--rule);padding:var(--space-6);display:grid;place-items:center;overflow-x:auto}

/* Table of contents (BeeRanked renders one; design it, don't inherit it) */
.toc{max-width:var(--w-prose);border-top:var(--rule-strong);border-bottom:var(--rule);padding:var(--space-5) 0;display:grid;gap:var(--space-3)}
.toc .label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--space-3);padding:var(--space-2) 0;font-size:var(--text-body-sm);color:var(--navy-800);text-decoration:none;border-bottom:var(--rule)}
.toc li:last-child a{border-bottom:0}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--terracotta-700)}
.toc a:hover{color:var(--terracotta-700)}

/* ---- 13. THE END ZONE — one grid, one width, uniform rhythm ------------- */
.article-end{max-width:var(--w-wide);margin-inline:auto;display:grid;gap:var(--end-y);padding-block:var(--space-12) var(--band-y)}
.article-end > *{margin:0}
.end-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);padding-bottom:var(--end-y);border-bottom:var(--rule)}
.share{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em;color:var(--text-faint)}
.share a{color:var(--navy-700);text-decoration:none;border-bottom:1px solid var(--navy-100);padding-bottom:2px}
.share a:hover{border-color:var(--terracotta-600);color:var(--terracotta-700)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.prevnext--single{grid-template-columns:1fr}
.prevnext a{display:grid;gap:var(--space-2);padding:var(--space-6);border:var(--rule);background:var(--surface-card);text-decoration:none;transition:var(--transition-control)}
.prevnext a:hover{border-color:var(--navy-900)}
.prevnext .dir{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.prevnext .t{font-family:var(--display);font-weight:var(--display-weight-bold);font-size:var(--text-h4);color:var(--navy-900);line-height:1.3;overflow-wrap:anywhere}
.prevnext .next{text-align:right}
.author-card{display:grid;grid-template-columns:132px 1fr;gap:var(--space-8);align-items:start;padding:var(--space-8);background:var(--surface-card);border:var(--rule)}
.author-card .portrait{aspect-ratio:1;background:var(--cream-100);border:var(--rule);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);text-align:center;padding:var(--space-2)}
.author-card .who{display:grid;gap:var(--space-3);justify-items:start}
.author-card h2{font-size:var(--text-h3)}
.author-card p{font-size:var(--text-body-sm);color:var(--text-muted);max-width:56ch}
.related{display:grid;gap:var(--space-6)}
.related .head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-6);padding-bottom:var(--space-4);border-bottom:var(--rule-strong)}
.related h2{font-size:var(--text-h3)}
.related .grid--3{gap:var(--space-6)}
.related-empty{border:1px dashed var(--ink-300);background:var(--cream-100);padding:var(--space-8);display:grid;gap:var(--space-3);justify-items:start}

/* ---- 14. Work / case studies -------------------------------------------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
.project{display:grid;gap:0;background:var(--surface-card);border:var(--rule);text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
a.project:hover{box-shadow:6px 6px 0 0 var(--navy-900);transform:translate(-2px,-2px)}
.project__shot{background:var(--navy-900);display:grid;place-items:center;padding:var(--space-8) var(--space-8) 0;overflow:hidden;aspect-ratio:16/11}
.project__body{display:grid;gap:var(--space-3);padding:var(--space-6)}
.project__body h3{overflow-wrap:anywhere}
.project__platforms{display:flex;gap:var(--space-2);flex-wrap:wrap}
.platform{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-800);border:1px solid var(--navy-100);background:var(--navy-050);padding:2px 7px;white-space:nowrap}
.outcome{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.02em;color:var(--terracotta-700)}

/* Device frames — plain CSS geometry, no vendor artwork */
.device{--bezel:10px;position:relative;background:var(--ink-900);border-radius:34px;padding:var(--bezel);box-shadow:0 18px 40px -18px rgb(0 0 0 / .55);flex:0 0 auto}
.device--phone{width:248px}
.device--phone .screen{aspect-ratio:9/19.5;border-radius:26px}
.device--tablet{width:420px;border-radius:24px;--bezel:14px}
.device--tablet .screen{aspect-ratio:3/4;border-radius:12px}
.device .screen{background:var(--cream-100);overflow:hidden;display:grid;place-items:center;position:relative}
.device .screen img{width:100%;height:100%;object-fit:cover;display:block}
.device .notch{position:absolute;top:calc(var(--bezel) + 6px);left:50%;transform:translateX(-50%);width:64px;height:5px;border-radius:3px;background:rgb(255 255 255 / .22)}
.device--tablet .notch{display:none}
.browser{flex:1 1 380px;min-width:0;background:#fff;border:1px solid var(--ink-800);border-radius:6px;overflow:hidden;box-shadow:0 18px 40px -18px rgb(0 0 0 / .45)}
.browser .chrome{display:flex;align-items:center;gap:8px;background:var(--cream-100);border-bottom:1px solid var(--cream-200);padding:8px 10px}
.browser .chrome i{width:9px;height:9px;border-radius:50%;background:var(--ink-300);display:block}
.browser .chrome .url{flex:1;background:#fff;border:1px solid var(--cream-200);border-radius:3px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser .screen{aspect-ratio:16/10;background:var(--cream-100);display:grid;place-items:center}
.browser .screen img{width:100%;height:100%;object-fit:cover;display:block}
.crossplat{display:flex;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.shot-slot{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);text-align:center;padding:var(--space-4)}
/* Store badges: official artwork drops in here. Sizes per Apple/Google specs. */
.store-badges{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.store-badge{height:52px;width:auto;display:block}
.store-badge--slot{height:52px;min-width:172px;border:1px dashed var(--navy-300);border-radius:8px;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-300);text-align:center;padding:0 var(--space-3)}
.band--navy .store-badge--slot{border-color:var(--navy-500);color:var(--navy-300)}

/* Case-study facts rail */
.facts{width:100%;border-top:var(--rule-strong);border-bottom:var(--rule)}
.facts dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.facts dl > div{padding:var(--space-5) var(--space-5) var(--space-5) 0}
.facts dl > div + div{border-left:var(--rule);padding-left:var(--space-5)}
.facts dt{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
.facts dd{margin:0;font-size:var(--text-body-sm);color:var(--navy-900)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--rule);background:var(--surface-card)}
.metrics > div{padding:var(--space-6)}
.metrics > div + div{border-left:var(--rule)}
.metrics .n{font-family:var(--display);font-weight:var(--display-weight-black);font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--navy-900)}
.metrics .k{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:var(--space-2)}

/* ---- 14b. Operations status board (mono register, not trust badges) ----- */
.board{width:100%;border:var(--rule);background:var(--surface-paper);font-family:var(--font-mono)}
.board__head,.board__row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) 130px}
.board__head{background:var(--navy-900);color:var(--cream-050);font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase}
.board__head > *{padding:var(--space-3) var(--space-5)}
.board__row{border-top:var(--rule);font-size:var(--text-body-sm);align-items:baseline}
.board__row > *{padding:var(--space-4) var(--space-5)}
.board__row:nth-child(even){background:var(--cream-050)}
.board__row .k{color:var(--navy-900)}
.board__row .v{color:var(--text-muted)}
.board__row .s{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-900);white-space:nowrap}
.board__row .s::before{content:"";width:8px;height:8px;background:var(--gold-600);flex:0 0 auto}
.board__row .s--ok{color:var(--navy-800)}
.board__row .s--ok::before{background:var(--navy-600)}
.board__row .s--live{color:var(--terracotta-900)}
.board__row .s--live::before{background:var(--terracotta-600)}
.claim{display:grid;gap:var(--space-3);padding:var(--space-8);border:var(--rule);border-left:6px solid var(--navy-900);background:var(--surface-card)}
.claim .q{font-family:var(--display);font-size:var(--text-h3);font-weight:var(--display-weight-bold);letter-spacing:var(--display-tracking);line-height:1.2;color:var(--navy-900)}
.claim p{font-size:var(--text-body-sm);color:var(--text-muted);max-width:64ch}
.runbook{margin:0;padding:0;list-style:none;counter-reset:step;width:100%;border-top:var(--rule-strong)}
.runbook li{counter-increment:step;display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-6);padding:var(--space-5) 0;border-bottom:var(--rule)}
.runbook li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.12em;color:var(--terracotta-700)}
.runbook h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.runbook p{font-size:var(--text-body-sm);color:var(--text-muted);max-width:64ch}
@media (max-width:680px){
  .board__head{display:none}
  .board__row{grid-template-columns:1fr;gap:var(--space-1,4px)}
  .board__row > *{padding:var(--space-3) var(--space-4)}
  .runbook li{grid-template-columns:1fr;gap:var(--space-2)}
}

/* ---- 15b. News section sub-nav + OG preview ---------------------------- */
.subnav{background:var(--surface-paper);border-bottom:var(--rule)}
.subnav .row{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;padding-block:var(--space-3)}
.subnav a{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;padding:var(--space-2) 0;min-height:36px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--navy-900)}
.subnav a[aria-current="page"]{color:var(--navy-900);border-bottom-color:var(--terracotta-600)}
.subnav .count{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-faint)}
.og{width:100%;max-width:600px;border:var(--rule);background:var(--surface-card)}
.og .canvas{aspect-ratio:1200/630;background:var(--navy-900);color:var(--cream-050);display:grid;align-content:space-between;gap:var(--space-4);padding:var(--space-8);position:relative;overflow:hidden}
.og .canvas .stripe{position:absolute;left:0;right:0;top:0;height:8px}
.og .canvas .kicker{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.og .canvas .t{font-family:var(--display);font-weight:var(--display-weight-bold);font-size:clamp(1.25rem,3.2vw,2rem);line-height:1.08;letter-spacing:var(--display-tracking);max-width:22ch}
.og .canvas .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--navy-300)}
.og .canvas .foot img{height:22px;width:auto}
.og .meta{padding:var(--space-4) var(--space-5);display:grid;gap:4px;border-top:var(--rule)}
.og .meta .url{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.og .meta .h{font-size:var(--text-body-sm);font-weight:500;color:var(--navy-900)}
.og .meta .d{font-size:var(--text-caption);color:var(--text-muted)}

/* ---- 15. News section furniture ---------------------------------------- */
.news-featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0;border:var(--rule);background:var(--surface-card)}
.news-featured .media{background:var(--navy-900);min-height:340px;display:grid;place-items:center;overflow:hidden}
.news-featured .media img{width:100%;height:100%;object-fit:cover}
.news-featured .body{padding:var(--pad-card-lg);display:grid;gap:var(--space-4);align-content:center;justify-items:start}
.news-featured h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);max-width:22ch}
.series-list{margin:0;padding:0;list-style:none;border-top:var(--rule-strong)}
.series-list li{counter-increment:part}
.series-list{counter-reset:part}
.series-list a{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:var(--space-6);align-items:center;padding:var(--space-5) 0;border-bottom:var(--rule);text-decoration:none}
.series-list a:hover .t{color:var(--terracotta-700)}
.series-list .part{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-800);border:1px solid var(--navy-100);background:var(--navy-050);border-radius:999px;padding:3px 10px;text-align:center}
.series-list .t{font-family:var(--display);font-weight:var(--display-weight-bold);font-size:var(--text-h3);color:var(--navy-900);letter-spacing:var(--display-tracking);line-height:1.2;overflow-wrap:anywhere}
.series-list .m{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-faint);white-space:nowrap}
.pagination{display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-8);border-top:var(--rule);width:100%}
.pagination a,.pagination span{font-family:var(--font-mono);font-size:var(--text-body-sm);min-width:44px;min-height:44px;display:grid;place-items:center;text-decoration:none;color:var(--navy-800);border:var(--rule);background:var(--surface-card)}
.pagination a:hover{border-color:var(--navy-900)}
.pagination [aria-current="page"]{background:var(--navy-900);border-color:var(--navy-900);color:var(--cream-050)}
.pagination .gap{border:0;background:none;color:var(--text-faint)}
.pagination .spacer{flex:1;border:0;background:none;min-width:0}
.empty-state{border:1px dashed var(--ink-300);background:var(--cream-100);padding:var(--space-12);display:grid;gap:var(--space-4);justify-items:start;max-width:var(--w-wide)}
.empty-state h2{font-size:var(--text-h3)}
.empty-state p{color:var(--text-muted);max-width:52ch}

/* ---- 16. Team, careers, contact, legal --------------------------------- */
.person{display:grid;gap:0;background:var(--surface-card);border:var(--rule);max-width:420px}
.person .portrait{aspect-ratio:4/3;background:var(--cream-100);position:relative;display:grid;place-items:center}
.person .portrait img{width:100%;height:100%;object-fit:cover}
.person .portrait .mark{position:absolute;left:0;bottom:0;width:72px;height:4px;background:linear-gradient(to right,var(--gold-600) 0 33.333%,var(--terracotta-600) 33.333% 66.666%,var(--navy-700) 66.666% 100%)}
.person .body{display:grid;gap:var(--space-2);padding:var(--space-6)}
.person .roles{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1,4px)}
.cv-line{font-family:var(--font-mono);font-size:var(--text-body-sm);line-height:1.8;color:var(--navy-900)}
.field{display:grid;gap:var(--space-2)}
.field label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-800)}
.field input,.field textarea,.field select{font:inherit;font-size:var(--text-body-sm);color:var(--text-body);background:var(--surface-paper);border:1px solid var(--ink-300);border-radius:var(--radius-1);padding:var(--space-3) var(--space-4);min-height:var(--tap-min);width:100%}
.field textarea{min-height:0;resize:vertical;line-height:1.6}
.field .help{font-size:var(--text-caption);color:var(--text-muted)}
.field--error input{border-color:var(--terracotta-700)}
.field--error .help{color:var(--terracotta-700)}
.consent{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap-min)}
.consent input{appearance:none;width:22px;height:22px;flex:0 0 auto;margin-top:2px;background:var(--surface-paper);border:2px solid var(--ink-300);border-radius:2px}
.consent input:checked{background:var(--navy-700);border-color:var(--navy-700)}
.consent span{font-size:var(--text-body-sm);line-height:1.4}
form.enquiry{display:grid;gap:var(--space-6);background:var(--surface-card);border:var(--rule);padding:var(--pad-card)}
.legal-body{max-width:var(--w-prose);display:grid;gap:var(--space-5)}
.legal-body h2{margin-top:var(--space-6);font-size:var(--text-h3)}
.office{display:grid;gap:var(--space-3);border-top:var(--rule-strong);padding-top:var(--space-4)}
.office address{font-style:normal;line-height:1.4}
.office .tel{font-family:var(--font-mono);font-size:var(--text-body-sm)}
.map-slot{min-height:220px;background:var(--cream-100);border:1px dashed var(--ink-300);display:grid;place-items:center;text-align:center;padding:var(--space-4);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

/* ---- 17. CTA band + footer + cookie ------------------------------------ */
.cta > .container{display:grid;gap:var(--space-6);justify-items:start;padding-block:var(--band-y-tight)}
.cta h2{font-size:clamp(1.875rem,1.4rem + 2vw,3rem);max-width:24ch}
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse)}
.site-footer .cols{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:var(--space-12);padding-top:var(--space-16)}
.site-footer .brand{display:grid;gap:var(--space-5);align-content:start;justify-items:start}
.site-footer .brand img{height:56px;width:auto}
.site-footer p{color:var(--navy-300);font-size:var(--text-body-sm);max-width:34ch}
.site-footer h2{font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.site-footer address{font-style:normal;font-size:var(--text-body-sm);line-height:1.4;color:var(--cream-050)}
.site-footer .tel{font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--navy-300);text-decoration:none}
.site-footer .mail{font-family:var(--font-mono);font-size:var(--text-label-lg);color:var(--cream-050);text-decoration:none;border-bottom:2px solid var(--gold-600);padding-bottom:2px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--navy-800);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em}
.site-footer nav a{color:var(--navy-300);text-decoration:none}
.site-footer nav a:hover{color:var(--cream-050);text-decoration:underline}
.site-footer .legal-line{margin-top:var(--space-6);padding-bottom:var(--space-10);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--ink-500)}
.cookie{background:var(--surface-inverse);color:var(--text-on-inverse);border-top:1px solid var(--navy-800)}
.cookie .row{display:flex;align-items:center;gap:var(--space-8);padding-block:var(--space-5)}
.cookie h2{font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.cookie p{font-size:var(--text-body-sm);line-height:1.4;color:var(--cream-050);max-width:72ch}
.cookie a{color:var(--gold-400)}
.cookie .actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ---- 18. Skip link & a11y ---------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;font-family:var(--font-mono);font-size:14px;padding:12px 16px;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- 19. Responsive ----------------------------------------------------- */
@media (max-width:1080px){
  .services{grid-template-columns:1fr 1fr}
  .service--lead{grid-column:span 2;grid-template-columns:1fr}
  .stack-rail dl,.facts dl{grid-template-columns:1fr 1fr}
  .stack-rail dl > div:nth-child(3),.facts dl > div:nth-child(3){border-left:0;padding-left:0;border-top:var(--rule)}
  .stack-rail dl > div:nth-child(4),.facts dl > div:nth-child(4){border-top:var(--rule)}
  .work-grid{grid-template-columns:1fr}
  .news-featured{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .hero > .container{grid-template-columns:1fr;gap:var(--space-10);align-items:start}
  .grid--3,.grid--4{grid-template-columns:1fr 1fr}
  .grid--fill > .card:last-child:nth-child(3n-1){grid-column:auto}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .author-card{grid-template-columns:96px 1fr;gap:var(--space-6)}
  .metrics{grid-template-columns:1fr}
  .metrics > div + div{border-left:0;border-top:var(--rule)}
}
@media (max-width:680px){
  .services{grid-template-columns:1fr}
  .service--lead{grid-column:auto}
  .service{min-height:0;padding:var(--space-8)}
  .grid--2,.grid--3,.grid--4,.prevnext{grid-template-columns:1fr}
  .prevnext .next{text-align:left}
  .site-footer .cols{grid-template-columns:1fr;gap:var(--space-10)}
  .stack-rail dl,.facts dl{grid-template-columns:1fr}
  .stack-rail dl > div + div,.facts dl > div + div{border-left:0;padding-left:0;border-top:var(--rule)}
  .cookie .row{flex-direction:column;align-items:stretch}
  .sec-head--between{grid-template-columns:1fr;align-items:start}
  .author-card{grid-template-columns:1fr}
  .author-card .portrait{max-width:132px}
  .series-list a{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-4) 0}
  .series-list .part{justify-self:start}
  .article-body h2{margin-top:var(--space-6)}
  .device--phone{width:200px}
  .toc a{grid-template-columns:2rem 1fr}
}
@media print{
  .site-header,.cookie,.nav,.share,.btns{display:none}
  body{background:#fff}
}

/* ==========================================================================
   HERO — amplification (Sophia, 3 Sept 2026: "needs to be a little more heroic")
   Appended deliberately at the end of the designer's file so the change is
   obvious and easy to reconcile with a future design update.

   The composition problem: `align-items:end` dropped the spec rail to the
   bottom of the grid, leaving the entire upper-right quadrant empty, so the
   hero read as text sitting on a page rather than a composed opening.
   ========================================================================== */
.hero > .container{
  align-items:start;                      /* fill the top-right void */
  padding-block:clamp(1.75rem,1.25rem + 2.5vw,3rem) clamp(2.5rem,2rem + 4vw,5rem);
  gap:var(--space-12);
}
/* The headline is the hero. Let it be bigger, and let it breathe. */
.hero h1{
  /* Wider measure = 3 lines instead of 4, which is what actually keeps the
     CTA above the fold on a 1366x768 laptop. Size is secondary to line count. */
  max-width:21ch;
  font-size:clamp(2.5rem,1.4rem + 4.1vw,4.5rem);
  line-height:.97;
  letter-spacing:-.02em;
}
.hero .lead{max-width:54ch;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}
.hero .btns{margin-top:var(--space-2)}
/* The stripe becomes a real graphic anchor rather than a hairline. */
.hero .stripe--lead{
  height:10px;width:150px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500) 0 33.33%,var(--terracotta-600) 33.33% 66.66%,var(--navy-700) 66.66% 100%);
}
/* The spec rail becomes a navy plate: weight, contrast, and it reads as a
   spec sheet — the engineering character the brief asked for. */
.hero .spec{
  background:var(--surface-inverse);
  color:var(--text-on-inverse);
  padding:var(--space-8) var(--space-9);
  border:0;position:relative;
}
.hero .spec::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:linear-gradient(90deg,var(--gold-500) 0 33.33%,var(--terracotta-600) 33.33% 66.66%,var(--navy-500) 66.66% 100%);
}
.hero .spec > div{border-color:var(--navy-800)}
.hero .spec dt{color:var(--gold-400)}
.hero .spec dd{color:var(--cream-050)}
@media (max-width:1024px){
  .hero > .container{padding-block:clamp(2rem,1.5rem + 3vw,3rem) clamp(2.5rem,2rem + 3vw,4rem)}
  .hero h1{max-width:none}
}
/* Short viewports (1366x768 laptops are still very common). Tighten the hero
   just enough to keep the primary CTA above the fold — measured, not guessed. */
@media (min-width:1025px) and (max-height:820px){
  .hero > .container{padding-block:1.25rem 2rem;gap:var(--space-10)}
  .hero h1{font-size:clamp(2.25rem,1.2rem + 3.2vw,3.5rem)}
  .hero .lead{font-size:1.0625rem}
}
/* Contact maps. OpenStreetMap embeds: no API key, no cookies, no tracking, and
   they render with JavaScript disabled — the only map option that satisfies the
   brief's no-JS rule and the EU-privacy posture at the same time. */
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8)}
.map{margin:0;border:1px solid var(--border-hairline);background:var(--surface-sunken)}
.map iframe{display:block;width:100%;height:340px;border:0;filter:saturate(.82) contrast(1.02)}
.map figcaption{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-hairline);
  font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.04em}
.map figcaption a{color:var(--terracotta-700)}
@media (max-width:640px){.map iframe{height:260px}}
/* ==========================================================================
   SERVICES LEAD CARD — spacing correction (Sophia, 3 Sept: "feels too spread out")
   The band is deliberately full-bleed, but its CONTENT was sitting at x=40
   while every other band on the site starts at x=100, and the device art was
   pinned flex-end at the far right. Result: ~780px of dead space mid-card and
   a left edge that disagreed with the rest of the page.
   ========================================================================== */
.service--lead{
  /* Align the card's content with the site's 1240 container instead of the
     viewport edge, while the colour block itself stays full-bleed. */
  padding-inline:max(var(--space-8), calc((100vw - 1240px) / 2));
  /* Text gets the room it needs; the art column no longer claims half the page. */
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--space-12);
  align-items:center;
}
/* Bring the devices in from the far edge so they read as a pair with the copy. */
.service--lead .crossplat{
  justify-content:center;
  gap:var(--space-6);
}
@media (min-width:1600px){
  /* Very wide screens: keep the two columns conversing rather than drifting apart. */
  .service--lead{grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:var(--space-14)}
}
@media (max-width:1024px){
  .service--lead{padding-inline:var(--space-8)}
  .service--lead .crossplat{justify-content:flex-start}
}

/* ── Cookie banner: float it ──────────────────────────────────────────────
   The handoff placed this in normal flow at the very bottom of <body>, with a
   note that it must never cover content. In practice that meant a first-time
   visitor had to scroll the entire page to find the consent choice, so almost
   nobody would ever make one. Sophia's call (3 Sept): float it.

   Fixed to the bottom, above everything, with the safe-area inset so it clears
   the iOS home indicator. It only exists while the visitor is undecided — one
   press and it is gone for good — so it covers a strip briefly, not forever. */
.cookie{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:120;
  border-top:2px solid var(--gold-400);
  box-shadow:0 -14px 38px -14px rgb(0 0 0 / .55);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  max-height:70svh;
  overflow-y:auto;
}
/* Stack the text above the buttons on narrow screens so a phone shows the
   choice without the actions being pushed off the side. */
@media (max-width:720px){
  .cookie .row{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .cookie .actions{width:100%}
  .cookie .actions .btn{flex:1 1 auto}
}
/* Someone who asked for less motion should not get a panel sliding at them. */
@media (prefers-reduced-motion:no-preference){
  .cookie{animation:cookie-rise var(--duration-base,.24s) var(--ease-standard,ease-out) both}
  @keyframes cookie-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
}

/* ── Team card: initials fallback ─────────────────────────────────────────
   Members without a photo get their initials in the same .portrait slot a
   photo would fill, so both variants have identical proportions and the
   tricolour .mark sits in the same place. Previously this used .cover-type,
   a cover-card style whose `align-content:space-between` pinned the initials
   into the top-left corner with the body text flush against the card edge. */
.person .portrait .initials{
  font-family:var(--display);
  font-weight:var(--display-weight-black, 800);
  font-size:clamp(2.25rem, 4vw, 3rem);
  letter-spacing:-.03em;
  line-height:1;
  color:var(--navy-700);
  opacity:.55;
}

/* ── Coloured service cards: keep their text colour on hover ──────────────
   `.service` is an <a>, and tokens/base.css sets `a:hover{color:var(--text-link-hover)}`.
   That selector is (0,1,1); `.service--navy` is only (0,1,0), so on hover the
   anchor flipped to link-terracotta and every child inherited it — the 04 card
   went from cream-on-navy at 8.16:1 to dark-red-on-navy at 1.16:1, effectively
   invisible. Re-assert each variant at (0,2,1) so hover only dims the card. */
a.service--gold:hover{color:var(--navy-900)}
a.service--terracotta:hover{color:#fff}
a.service--navy:hover{color:var(--cream-050)}

/* ── .plate: the framed media slot ────────────────────────────────────────
   Used by the work-page project shots (and anywhere a CMS image needs a fixed
   frame) but never defined — the class appears in the markup and in NO rule,
   so the container had no aspect at all. The <img> kept its intrinsic 760x428
   attributes while CSS squeezed the width to the column, and with the default
   `object-fit:fill` every project screenshot was visibly distorted.

   The frame owns the aspect; the image covers it. */
.plate{display:block;position:relative;overflow:hidden;background:var(--cream-100);border:var(--rule)}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate--16x9{aspect-ratio:16/9}
.plate--4x3 {aspect-ratio:4/3}
.plate--1x1 {aspect-ratio:1/1}