/* ============================================================
   Maison Zenith design system. LOCKED.
   Every value below is a token. Component CSS must reference
   var(--token) and never a raw px value. check_page.py --audit-css
   enforces this.
   Fonts are the live site's own: Cormorant Garamond and Archivo.
   They are served from this site rather than from Google, so the
   headline and its italic ampersand cannot fall back to a default
   serif when a network or a privacy blocker gets in the way.
   ============================================================ */

/* Latin subsets, 172 KB in total, the same files Google serves. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;
  font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;
  font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;
  font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;
  font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;
  font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;
  font-display:swap;src:url('/assets/fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;
  font-display:swap;src:url('/assets/fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;
  font-display:swap;src:url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2')}

:root{
  /* colour, taken from the live maisonzenith.com stylesheet, not from the BID.
     the site's own tokens are the source of truth, so a rebuilt page sits beside
     an existing one without a shift. mapping is noted against each. */
  --mz-black:#0a0a0a;         /* --black, --foreground, --primary */
  --mz-red:red;               /* --red, --accent, --ring. see the note below */
  --mz-red-dark:#d40000;      /* hover, and red used as small text */
  --red-text:#d40000;         /* red as TEXT. 5.2:1 on paper, 4.8:1 on a band */
  --accent-fg:#fff;           /* --accent-foreground */
  --paper:#f9f7f4;            /* --white, --background, --card, --popover */
  --surface-faq:#f3e9d6;    /* the FAQ band. warm sand, clearly not paper or grey-05 */
  --grey-05:#efefed;          /* --light, --secondary, --muted */
  --grey-40:#e0dedd;          /* --border, --input */
  --grey-70:#888;             /* --gray, --muted-foreground */
  --ink-body:var(--mz-black);   /* every sentence the reader reads as content */
  --ink-note:#666;              /* labels, captions, crumbs, data keys only */
  --num-ink:#666;             /* ordinal numerals. 5.37:1 on paper, 4.99:1 on a band */
  /* dark surfaces. the footer is black like the live site, one step off the
     enquiry band above it so the two read as separate blocks */
  --black-2:#0a0a0a;   /* footer body */
  --black-3:#000;      /* the legal strip below it */
  --line-dark:#2a2a2a;
  --panel-alpha:0.86;         /* contact form panel, lets the photograph through */
  --panel-glass:rgba(249,247,244,0.86);
  --panel-floor:#d6d4d2;      /* the panel over a black area of the photograph */
  --panel-line:#777777;       /* field borders on the panel, 3.03:1 at the floor */
  --panel-hint:#5c5c5c;       /* placeholders on the panel, 4.52:1 at the floor */
  --touch:44px;               /* minimum touch target, WCAG 2.5.5 */
  --nav-indent:32px;          /* sub items sit under their group heading */
  --field-line-light:#8b8b8b;  /* input borders on paper, 3.2:1 */
  --field-line-dark:#6e6e6e;  /* input borders on dark, 3.6:1 */
  /* the closing action. paper on dark reads as expensive and leaves red to mean
     accent. set these two to var(--mz-red) and var(--accent-fg) to go back to red. */
  --btn-primary-bg:var(--paper);
  --btn-primary-fg:var(--mz-black);
  --scrim:rgba(10,10,10,.78);  /* over a CTA photograph. holds 4.7:1 even on a white image */
  /* with a form on the right the scrim ramps across, so the photograph still reads
     on the left while the fields sit on near black. worst case is a white photo:
     left composite gives white text 7.6:1, right gives field borders 3.5:1. */
  --scrim-form:linear-gradient(90deg,rgba(10,10,10,.70) 0%,rgba(10,10,10,.82) 45%,rgba(10,10,10,.94) 100%);
  --scrim-form-stacked:linear-gradient(180deg,rgba(10,10,10,.70) 0%,rgba(10,10,10,.86) 45%,rgba(10,10,10,.94) 100%);
  --on-dark:#f9f7f4;          /* headings and hover, 18.5:1 */
  --on-dark-body:#b5b5b5;     /* links, 9.7:1 */
  --on-dark-mute:#9a9a9a;     /* labels and captions, 7:1 */
  /* NOTE: the site CSS sets red to the keyword red, which is #FF0000, while the
     logo artwork is #ED1C24. They sit together in the header. To match the logo
     exactly, change --mz-red to #ED1C24 here. One line, nothing else moves. */

  /* spacing scale. 4px base, no value outside this scale */
  --sp-0:0;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-10:128px;

  /* semantic spacing. components use these, not the raw scale */
  --gutter:var(--sp-5);          /* page edge to content, mobile */
  --gutter-lg:var(--sp-7);       /* page edge to content, desktop */
  --section-y:var(--sp-8);       /* vertical rhythm between sections */
  --section-y-lg:var(--sp-9);
  --band-y:var(--sp-8);          /* a tinted block's own vertical padding, all sides visible */
  --card-pad:var(--sp-5);        /* inside every card, all four sides */
  --panel-pad:var(--sp-6);       /* inside the mega menu panel */
  --grid-gap:var(--sp-5);
  --stack:var(--sp-4);           /* space below a paragraph */
  --stack-lg:var(--sp-5);        /* space below a heading block */
  --field-pad:var(--sp-3);
  --btn-pad-y:var(--sp-3);
  --btn-pad-x:var(--sp-5);
  --thumb-gap:var(--sp-2);
  --icon:56px;
  --icon-sm:24px;
  --thanks-card:190px;   /* smallest a link card gets before the row wraps */
  --z-lightbox:200;      /* over the sticky header, which is the only thing above 100 */
  --scrim-solid:#0a0a0a;  /* a photograph viewer, so the page behind it goes */
  --scrim-hover:0.12;    /* the wash over a project cover on hover */
  --lb-h:78vh;           /* tallest a slide gets, leaving room for the dots */
  --dot:8px;

  /* layout */
  --max:1200px;
  --measure:68ch;               /* body copy line length */
  /* media heights. one token per image role, so a crop never drifts per page */
  --h-hero:clamp(320px,50vh,560px);      /* full bleed page hero */
  --h-feature:clamp(320px,66vh,760px);   /* full width feature image */
  --h-folio:clamp(300px,54vh,640px);     /* portfolio item */
  --h-folio-pair:clamp(280px,40vh,460px);/* portfolio item, paired */
  --h-shot:clamp(240px,34vh,400px);      /* image beside a column of text */
  --h-cat-hero:clamp(220px,30vh,340px);  /* compact category band */
  --h-clamp:9.5rem;                      /* product description before Read more */
  --focus-ring:2px;                      /* focus outline weight */
  --tick:3px;                            /* timeline rule */
  --arrow:4px;                           /* timeline arrow half width */
  --arrow-h:6px;
  --phase-node:48px;             /* the numbered node on the phase spine */
  --phase-spine:24px;            /* centre of the node, desktop */
  --phase-spine-sm:20px;
  --phase-indent:80px;
  --phase-indent-sm:64px;                         /* timeline arrow height */
  --header-h:76px;
  --logo-h:50px;      /* the stacked lockup, with air inside a 77px header */
  --logo-h-sm:40px;   /* the same lockup on a phone */
  --logo-h-foot:76px; /* the footer has room, so the wordmark can read */
  --radius:0;                   /* --radius: 0rem on the live site. nothing is rounded */
  --border:1px solid var(--grey-40);

  /* type. Cormorant Garamond is high contrast, so it runs one step larger
     than a workhorse serif would, and never below 1.15rem */
  --serif:'Cormorant Garamond',Garamond,Georgia,serif;
  --sans:'Archivo',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --fs-body:17px;
  --fs-small:0.875rem;
  --fs-micro:0.78rem;
  --fs-lead:1.25rem;
  --fs-h3:1.35rem;
  --fs-h4:1.2rem;            /* serif subhead, card and list titles */
  --fs-h5:1.05rem;           /* serif subhead, smallest */
  --fs-ordinal:1.25rem;      /* serif counters, not a heading */
  --fs-h2:clamp(1.75rem,3vw,2.4rem);
  --fs-h1:clamp(2.4rem,5.5vw,4rem);
  --fs-display:clamp(2.9rem,7vw,5.5rem);   /* the split hero headline */
  --fs-statement:clamp(1.5rem,3.4vw,2.5rem);/* a single serif line, editorial */
  --fs-figure:clamp(1.9rem,4vw,3rem);       /* the scope numbers */
  --fs-cta:clamp(1.9rem,3.6vw,3rem);        /* the closing CTA heading */
  --cta-min:clamp(420px,58vh,620px);        /* the closing band's height */
  --field-h:56px;
  --measure-display:24ch;                   /* display headlines break earlier */
  --measure-statement:34ch;
  --measure-faq:78ch;
  --measure-quote:46ch;   /* a pull quote reads wider than a statement */
  --fs-quote-photo:clamp(1.25rem,2.1vw,1.85rem);  /* smaller, so it sits on the photo */
  --fs-triptych:clamp(1.5rem,2.3vw,2.15rem);      /* the three column lists and statement */
  --quote-min:clamp(420px,62vh,640px);
  --hero-min:88vh;
  --hero-min-page:62vh;   /* the What We Do split hero, shorter than the home page */
  --hero-min-category:36vh;   /* category pages, same layout as the hub, shorter still */
  --measure-lead:46ch;    /* a lead in a half width panel */
  --lh-display:1.02;
  --lh-tight:1.12;
  --lh-sub:1.2;              /* serif subheads, looser than a display line */
  --lh-statement:1.22;       /* editorial statement lines */
  --lh-cta:1.14;             /* the closing CTA heading */
  --lh-quote:1.25;           /* quote over a photograph */
  --lh-scope:1.7;            /* stacked project data in a card */
  --lh-body:1.65;
  --ls-caps:0.08em;
  --ls-tight:-0.005em;       /* headings */
  --ls-display:-0.01em;      /* display headline, tighter again */
  --ls-body:0.01em;          /* buttons and small caps labels */
  --ls-logo:0.14em;
  --amp-scale:1.05em;   /* the swash ampersand sets small, so it runs slightly larger */
  --amp-kern:0.04em;    /* and needs air either side */
  --rule-w:56px;        /* the short rule under a heading */
  --fig-suffix:0.58em;  /* the red unit beside a figure */
}
@media(min-width:900px){
  :root{--gutter:var(--gutter-lg);--section-y:var(--section-y-lg);
        --band-y:var(--sp-9)}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:hidden;font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--mz-black);background:var(--paper);-webkit-font-smoothing:antialiased}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
/* a block with no image beside it has no second column to respect, so the copy
   runs the full width of the section rather than sitting in a narrow rail */
.col-full{max-width:none}
.col-full p,.col-full ul,.col-full ol{max-width:none}
section{padding-block:var(--section-y)}
/* a tinted or dark block always owns its padding, on every side */
section.band{background:var(--grey-05);padding-block:var(--band-y)}
/* only collapse the gap between two consecutive PLAIN sections. a section that
   follows a tinted block keeps its full top padding, and a tinted block always
   keeps its own. the earlier version of this rule leaked through specificity. */
section:not(.band):not(.enquiry)+section:not(.band):not(.enquiry){padding-top:var(--sp-0)}
.stack>*+*{margin-top:var(--stack)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight)}
h4{font-size:var(--fs-h4);line-height:var(--lh-sub);margin-bottom:var(--sp-2)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);margin-bottom:var(--stack-lg)}
h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
p{margin-bottom:var(--stack);max-width:var(--measure)}
/* Archivo is loaded at 400, 500 and 600 only. The browser default for strong is
   700, which it then synthesises, and a synthesised weight does not match the
   family. Pin emphasis to a weight we actually load. */
strong,b{font-weight:600}
em,i{font-style:italic}
h1 em,h2 em,h3 em,h4 em{font-weight:400}
p:last-child{margin-bottom:var(--sp-0)}
ul,ol{margin:var(--sp-0) var(--sp-0) var(--stack) var(--sp-5);max-width:var(--measure)}
li+li{margin-top:var(--sp-2)}
a{color:var(--mz-red);text-decoration:none;border-bottom:1px solid transparent}
a:hover,a:focus-visible{border-bottom-color:var(--mz-red)}
img{max-width:100%;height:auto;display:block}
.muted{color:var(--ink-note)}
/* a section intro is body copy, so it takes the body colour and runs the full
   width of the section rather than being capped at a reading measure */
.intro{color:var(--ink-body);max-width:none;margin-bottom:var(--stack-lg)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.eyebrow{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70);margin-bottom:var(--sp-3)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--mz-red);color:var(--accent-fg)!important;
  padding:var(--btn-pad-y) var(--btn-pad-x);font-weight:500;font-size:var(--fs-small);
  letter-spacing:var(--ls-body);border:0}
.btn:hover{background:var(--mz-red-dark);border:0}
.btn-ghost{background:transparent;color:var(--mz-black)!important;border:var(--border);
  padding:var(--btn-pad-y) var(--btn-pad-x);display:inline-block;font-size:var(--fs-small)}
.btn-ghost:hover{border-color:var(--mz-black)}

/* ---------- header and mega menu ---------- */
.site-head{border-bottom:var(--border);background:var(--paper);position:sticky;top:0;z-index:60}
.head-inner{display:flex;align-items:center;gap:var(--sp-6);min-height:var(--header-h)}
.logo{display:inline-flex;align-items:center;border:0;line-height:0}
.logo picture{display:block;line-height:0}
.logo img{height:var(--logo-h);width:auto}
@media(max-width:560px){.logo img{height:var(--logo-h-sm)}}
.logo:hover{border:0}
.nav-desktop{margin-left:auto;display:none;align-items:center;gap:var(--sp-6)}
@media(min-width:1000px){.nav-desktop{display:flex}}
.nav-item{position:static}   /* the mega panel anchors to the header, not to the item */
.nav-item>a,.nav-item>span{color:var(--mz-black);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  border:0;cursor:pointer;display:inline-block;padding-block:var(--sp-5)}
.nav-item:hover>a,.nav-item:hover>span{color:var(--mz-red)}

/* the mega panel: full width, anchored under the header */
.mega{position:absolute;top:100%;left:0;right:0;
  background:var(--paper);border-top:var(--border);
  border-bottom:var(--border);padding-block:var(--panel-pad);
  visibility:hidden;opacity:0;transition:opacity .12s ease}
.nav-item.mega-open .mega{visibility:visible;opacity:1}
.mega-grid{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--panel-pad)}
.mega-col>a.col-head,.mega-col>span.col-head{display:block;font-family:var(--serif);
  font-size:var(--fs-h4);line-height:var(--lh-sub);color:var(--mz-black);border:0;padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-3);border-bottom:var(--border)}
.mega-col>a.col-head:hover{color:var(--mz-red);border-bottom:var(--border)}
.mega-col ul{list-style:none;margin:var(--sp-0)}
.mega-col li+li{margin-top:var(--sp-0)}
.mega-col li a{display:flex;align-items:center;gap:var(--sp-3);
  padding-block:var(--sp-2);color:var(--mz-black);font-size:var(--fs-small);border:0}
.mega-col li a .icon-sm{width:var(--icon-sm);height:var(--icon-sm);flex:0 0 auto;
  color:var(--grey-70)}
.mega-col li a:hover .icon-sm{color:var(--mz-red)}
.mega-col li a:hover{color:var(--mz-red)}
.mega-note{grid-column:1/-1;padding-top:var(--sp-4);border-top:var(--border);
  font-size:var(--fs-small);color:var(--grey-70)}

/* ---------- breadcrumb ---------- */
.crumb{font-size:var(--fs-small);color:var(--grey-70);margin-bottom:var(--sp-5)}
.crumb a{color:var(--grey-70);border:0}
.crumb a:hover{color:var(--mz-red)}
.crumb span[aria-current]{color:var(--mz-black)}

/* ---------- heroes ---------- */
.hero-photo img{width:100%;height:var(--h-hero);object-fit:cover}
/* words inside the photograph. The gradient runs from the bottom so the crop can
   change without the text losing its ground */
.hero-over{position:relative;isolation:isolate}
.hero-over>img{width:100%;height:var(--h-feature);object-fit:cover;display:block}
.hero-over::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.10) 0%,rgba(10,10,10,.30) 45%,rgba(10,10,10,.88) 100%)}
.hero-over .over-head{position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding-block:var(--sp-7)}
.hero-over .over-head h1,.hero-over .over-head .lead{color:var(--on-dark)}
.hero-over .over-head h1{margin-bottom:var(--sp-4)}
.hero-over .over-head .lead{max-width:var(--measure)}
.hero-over .crumb,.hero-over .crumb a{color:var(--on-dark-body)}
.hero-over .crumb a:hover{color:var(--on-dark)}
/* until the photograph exists, the note saying which photograph goes here has to sit
   above the gradient or it is invisible */
.hero-over .ph{height:var(--h-feature);position:relative;z-index:2;color:var(--grey-70)}
.hero-head{padding-block:var(--sp-7) var(--sp-0)}
.hero-head+section:not(.band):not(.enquiry){padding-top:var(--sp-6)}
.hero-plain{padding-block:var(--sp-9) var(--sp-7)}
/* page head band. carries the crumb, eyebrow, H1 and lead on card layout pages,
   which is what ties them to the editorial pages above them */
.page-head{background:var(--grey-05);border-bottom:var(--border)}
.page-head .wrap{padding-block:var(--sp-6) var(--sp-6)}
.page-head h1{max-width:var(--measure-display)}
.page-head .crumb{margin-bottom:var(--sp-4)}
.page-head .hero-lead{margin-top:var(--sp-5)}
.hero-lead{font-size:var(--fs-lead);color:var(--ink-body);max-width:none;
  margin-top:var(--stack-lg)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .split.alt>.txt{order:2}
}

/* ---------- phase list ---------- */
.phases{counter-reset:ph;list-style:none;margin-left:var(--sp-0)}
.phases li{counter-increment:ph;padding-left:var(--sp-7);position:relative;
  margin-bottom:var(--sp-5);max-width:var(--measure)}
.phases li::before{content:counter(ph,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--serif);color:var(--num-ink);font-size:var(--fs-ordinal)}

/* ---------- icons: one geometric set, one stroke weight ---------- */
.icon{width:var(--icon);height:var(--icon);display:block;color:var(--grey-70)}
.icon-sm{width:var(--icon-sm);height:var(--icon-sm)}
.media-icon{display:flex;align-items:center;justify-content:center;height:100%;border:0}
.media-icon:hover{border:0}
.media-icon:hover .icon{color:var(--mz-black)}
.index-list a{align-items:center}
.index-list .icon-sm{color:var(--grey-70)}
.index-list a:hover .icon-sm{color:var(--mz-red)}

/* ---------- section header with a see all link ---------- */
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--stack-lg)}
.section-head h2{margin-bottom:var(--sp-0)}
.section-head .link-arrow{white-space:nowrap}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:var(--grid-gap)}
/* a grid item defaults to min-width:auto, so one nowrap child can push a 1fr
   track wider than its container. the reference codes were doing exactly that
   and clipping the right hand column of every fixture grid on a phone. */
.grid>*{min-width:0}
.card .ref,.card h3,.card .specs span{overflow-wrap:anywhere}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
/* prose cards go single column when narrow, but FIXTURE cards stay two up, because
   two square product shots side by side are far easier to browse than one huge one */
@media(max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}
@media(max-width:359px){.grid-4{grid-template-columns:1fr}}
.card{background:#fff;border:var(--border);display:flex;flex-direction:column}
.band .card{background:#fff}
.card .media{background:#fff;aspect-ratio:4/3;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:contain}
.category-grid .card .media img{object-fit:cover}
.card .body{padding:var(--card-pad)}
.card h3{margin-bottom:var(--sp-1)}
.card h3 a{color:var(--mz-black);border:0}
.card h3 a:hover{color:var(--mz-red)}
.card .scope,.card .count{font-size:var(--fs-small);color:var(--grey-70)}
.card .ref{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);color:var(--grey-70);
  margin-bottom:var(--sp-1)}
.card.fixture .media{aspect-ratio:1/1;background:#fff;border-bottom:var(--border)}

/* ---------- product gallery, css only, no javascript ---------- */
.product-top{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:900px){.product-top{grid-template-columns:1.1fr 1fr;gap:var(--sp-8)}}
.gallery input{position:absolute;opacity:0;pointer-events:none}
.gallery .stage{background:#fff;aspect-ratio:1/1;position:relative;
  border:var(--border)}
.gallery .stage figure{display:none;height:100%}
.gallery .stage figure img{width:100%;height:100%;object-fit:contain}
.product-top .back{margin-top:var(--stack-lg)}
.gallery .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);height:100%;color:var(--grey-70);font-size:var(--fs-small);
  text-align:center;padding:var(--card-pad)}
.gallery #v1:checked~.stage .f1,
.gallery #v2:checked~.stage .f2,
.gallery #v3:checked~.stage .f3,
.gallery #v4:checked~.stage .f4,
.gallery #v5:checked~.stage .f5,
.gallery #v6:checked~.stage .f6,
.gallery #v7:checked~.stage .f7{display:block}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--thumb-gap);
  margin-top:var(--thumb-gap)}
.thumbs label{border:var(--border);aspect-ratio:1/1;cursor:pointer;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);
  color:var(--grey-70);padding:var(--sp-2);text-align:center}
.thumbs label img{width:100%;height:100%;object-fit:contain}
.gallery #v1:checked~.thumbs label[for=v1],
.gallery #v2:checked~.thumbs label[for=v2],
.gallery #v3:checked~.thumbs label[for=v3],
.gallery #v4:checked~.thumbs label[for=v4],
.gallery #v5:checked~.thumbs label[for=v5],
.gallery #v6:checked~.thumbs label[for=v6],
.gallery #v7:checked~.thumbs label[for=v7]{border-color:var(--mz-black)}

/* ---------- variants ---------- */
.variants{margin-top:var(--stack-lg)}
.variant-row+.variant-row{margin-top:var(--stack-lg)}
.variant-row .label{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--grey-70);margin-bottom:var(--sp-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:var(--sp-0)}
.chips li{border:var(--border);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-small)}
.chips li+li{margin-top:var(--sp-0)}
.swatch{display:inline-block;width:var(--sp-4);height:var(--sp-4);border:var(--border);
  margin-right:var(--sp-2);vertical-align:-2px}

/* ---------- spec toggle, product right column ---------- */
.spec-toggle{border-top:var(--border);border-bottom:var(--border);margin-top:var(--stack-lg)}
.spec-toggle>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-4);padding-block:var(--sp-4);
  font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-body)}
.spec-toggle>summary::-webkit-details-marker{display:none}
.spec-toggle>summary::after{content:"+";font-family:var(--serif);font-size:var(--fs-h3);
  line-height:1;color:var(--grey-70)}
.spec-toggle[open]>summary::after{content:"\2212"}
.spec-toggle>summary:hover{color:var(--mz-red)}
.spec-toggle .inner{padding-bottom:var(--sp-5)}

/* ---------- product eyeline, read more, details ---------- */
.eyeline{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70);margin-bottom:var(--sp-2)}

/* the checkbox holds the state, so a long description collapses with no script and
   the whole text is in the markup for search engines either way */
.read-more{position:relative}
.read-more .rm-state{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.read-more .rm-body{max-height:var(--h-clamp);overflow:hidden;position:relative}
.read-more .rm-body::after{content:"";position:absolute;inset-inline:0;bottom:0;
  height:var(--sp-7);background:linear-gradient(to bottom,transparent,var(--paper))}
.read-more .rm-ctl{display:inline-block;margin-top:var(--sp-3);cursor:pointer;
  font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--grey-70)}
.read-more .rm-ctl:hover{color:var(--mz-black)}
.read-more .rm-ctl::after{content:"Read more"}
.read-more .rm-state:checked~.rm-body{max-height:none}
.read-more .rm-state:checked~.rm-body::after{content:none}
.read-more .rm-state:checked~.rm-ctl::after{content:"Read less"}
.read-more .rm-state:focus-visible~.rm-ctl{outline:var(--focus-ring) solid var(--mz-red);outline-offset:var(--sp-1)}

.product-cta{margin-top:var(--stack-lg)}
.details{margin-top:var(--sp-7)}
.details-head{font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-caps);
  text-transform:uppercase;margin-bottom:var(--sp-3);border-top:var(--border);
  padding-top:var(--sp-4)}
.ref-line{margin-top:var(--sp-5);font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--grey-70)}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;max-width:var(--measure)}
.spec th,.spec td{text-align:left;padding-block:var(--sp-3);border-bottom:var(--border);
  vertical-align:top;font-size:var(--fs-small)}
.spec th{width:40%;font-weight:400;color:var(--grey-70);padding-right:var(--sp-4)}
.spec td{overflow-wrap:anywhere}
@media(max-width:420px){.spec th{width:44%}}

/* ---------- faq ---------- */
.faq{max-width:var(--measure)}
.faq dt{font-weight:600;margin-top:var(--stack-lg)}
.faq dd{margin-top:var(--sp-2)}

/* ---------- enquiry band ---------- */
.enquiry{background:var(--mz-black);color:var(--on-dark);padding-block:var(--sp-9);
  margin-top:var(--sp-0)}
/* the block above the CTA runs straight into it, no gap, no empty band */
section:has(+ .enquiry){padding-bottom:var(--sp-0)}
.band:has(+ .enquiry){padding-bottom:var(--band-y)}
/* with a photograph behind it, taken from the page it closes */
.enquiry.photo.has-form{background-image:var(--scrim-form),var(--cta-img)}
.enquiry.photo{background-image:linear-gradient(var(--scrim),var(--scrim)),var(--cta-img);
  background-size:cover;background-position:center;padding-block:var(--sp-10);
  min-height:var(--cta-min);display:flex;align-items:center}
/* the wrap is a flex item here, so it must be told to take the full width.
   without this it shrinks to its content and drifts off the page gutter. */
.enquiry.photo>.wrap{width:100%}
.enquiry.photo p{color:var(--on-dark)}
.enquiry.photo h2{font-size:var(--fs-cta);max-width:var(--measure-statement)}
/* the photograph is evidence, so it says which project it is */
.enquiry .credit{margin-top:var(--sp-7);font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--on-dark-mute)}

/* inline capture. a real field, left aligned, angular like everything else */
.cta-form{display:flex;align-items:stretch;max-width:var(--measure);margin-top:var(--sp-7);
  background:var(--paper);border:1px solid var(--paper)}
.cta-form input{flex:1;min-width:0;height:var(--field-h);border:0;background:transparent;
  padding-inline:var(--sp-5);font-family:var(--sans);font-size:var(--fs-body);
  color:var(--mz-black)}
.cta-form input::placeholder{color:var(--grey-70)}
.cta-form input:focus{outline:var(--focus-ring) solid var(--mz-red);outline-offset:calc(var(--sp-1) * -1)}
.cta-form button{height:var(--field-h);border:0;background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  padding-inline:var(--sp-6);font-family:var(--sans);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:var(--ls-caps);text-transform:uppercase;cursor:pointer;white-space:nowrap}
.cta-form button:hover{background:var(--mz-red);color:var(--accent-fg)}
@media(max-width:560px){
  .cta-form{flex-direction:column;background:transparent;border:0;gap:var(--sp-2)}
  .cta-form input{background:var(--paper);border:1px solid var(--paper)}
  .cta-form button{width:100%}
}
.cta-alt{margin-top:var(--sp-5)}
.link-arrow.on-dark{color:var(--on-dark-body)}
.link-arrow.on-dark:hover{color:var(--on-dark)}
.enquiry h2{color:var(--on-dark)}
.enquiry p{color:var(--on-dark-body)}
.enquiry .btn{margin-top:var(--stack-lg)}

/* ---------- full contact form, closing block ---------- */
.cta-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media(min-width:900px){.cta-grid{grid-template-columns:1fr 1fr;gap:var(--sp-9)}}
/* stacked, the form sits below rather than right, so the ramp turns vertical */
@media(max-width:899px){.enquiry.photo.has-form{background-image:var(--scrim-form-stacked),var(--cta-img)}}
.form-full{display:grid;gap:var(--sp-4)}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
.form-full input,.form-full textarea,.form-full select{width:100%;border:1px solid var(--field-line-dark);
  background:transparent;color:var(--on-dark);font-family:var(--sans);font-size:var(--fs-small);
  padding:var(--field-pad) var(--sp-4);min-height:var(--field-h)}
.form-full select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:calc(var(--sp-4) + 12px + var(--sp-4));background-repeat:no-repeat;
  background-position:right var(--sp-4) center;background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f9f7f4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-full select option{color:var(--mz-black)}
.form-full.on-light select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-full textarea{min-height:calc(var(--field-h) * 2);resize:vertical}
.form-full input::placeholder,.form-full textarea::placeholder{color:var(--on-dark-mute)}
.form-full input:focus,.form-full textarea:focus,.form-full select:focus{outline:var(--focus-ring) solid var(--mz-red);
  outline-offset:calc(var(--sp-1) * -1)}
.form-full button{justify-self:start;background:var(--btn-primary-bg);color:var(--btn-primary-fg);border:0;
  min-height:var(--field-h);padding-inline:var(--sp-7);font-family:var(--sans);
  font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--ls-caps);
  text-transform:uppercase;cursor:pointer}
.form-full button:hover{background:var(--mz-red);color:var(--accent-fg)}
.form-note{font-size:var(--fs-micro);color:var(--on-dark-mute)}
/* the bot trap is an input, so the field rules above were sizing it and it pushed the
   page far wider than the window on every page carrying a form. This wins on
   specificity rather than on !important */
.cta-form .visually-hidden,.form-full .visually-hidden{position:absolute;width:1px;
  height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- footer ---------- */
.site-foot{background:var(--black-2);border-top:1px solid var(--line-dark);
  padding-block:var(--sp-8) var(--sp-0);font-size:var(--fs-small);color:var(--on-dark-body)}
.site-foot a{color:var(--on-dark-body);border:0}
.site-foot a:hover{color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-7)}
@media(min-width:760px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.4fr repeat(2,1fr)}}
.foot-grid h3{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-family:var(--sans);color:var(--on-dark-mute);
  margin-bottom:var(--sp-4)}
.foot-grid a{display:block;padding-block:var(--sp-2)}
.foot-mark{margin-bottom:var(--sp-5)}
.foot-mark img{height:var(--logo-h-foot);width:auto}
/* the legal strip steps back to the enquiry band's shade, so the footer reads
   as two bands rather than one slab */
.foot-legal{margin-top:var(--sp-8);border-top:1px solid var(--line-dark);
  background:var(--black-3)}
.foot-legal .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  padding-block:var(--sp-5);color:var(--on-dark-mute);font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);text-transform:uppercase}
.foot-legal a{color:var(--on-dark-mute);border:0}
.foot-legal a:hover{color:var(--on-dark)}
.foot-legal-links{display:flex;gap:var(--sp-5)}

/* ---------- style guide only ---------- */
.sg-swatch{height:var(--sp-9);border:var(--border)}
.sg-label{font-size:var(--fs-micro);color:var(--grey-70);margin-top:var(--sp-2)}
.sg-bar{background:var(--mz-red);height:var(--sp-4)}
.sg-row{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.sg-row code{font-size:var(--fs-micro);color:var(--grey-70);min-width:var(--sp-10)}


/* ============================================================
   EDITORIAL COMPONENTS
   For the homepage and the What We Do parent pages. Wide photography,
   generous space, asymmetric. Deliberately less templated than the
   card based pages below them.
   ============================================================ */

/* ---------- short rule under a heading ---------- */
.rule{width:var(--rule-w);height:1px;background:var(--mz-red);border:0;
  margin-block:var(--sp-5) var(--sp-6)}
.page-head .rule{margin-block:var(--sp-5) var(--sp-5)}

/* ---------- split hero: off white panel, full bleed photo ---------- */
.hero-split{display:grid;grid-template-columns:1fr;background:var(--grey-05)}
.hero-split .panel{display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-8) var(--gutter) var(--sp-8)}
.hero-split .shot{position:relative;background:var(--grey-05);min-height:60vh}
.hero-split .shot img{width:100%;height:100%;object-fit:cover}
.hero-split .shot .feature-ph{height:100%;border-left:var(--border)}
.hero-split .shot .cap{position:absolute;left:var(--sp-6);right:var(--sp-6);
  bottom:var(--sp-7);font-family:var(--serif);font-style:italic;font-size:var(--fs-lead);
  color:var(--paper);text-shadow:0 1px var(--sp-2) rgba(35,31,32,.55)}
@media(min-width:900px){
  .hero-split{grid-template-columns:1fr 1fr;min-height:var(--hero-min)}
  .hero-split .panel{padding:var(--sp-10) var(--sp-8) var(--sp-9) var(--gutter)}
  .hero-split .shot{min-height:var(--hero-min)}
}
.eyebrow-red{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--sp-6)}
/* over a photograph even the deeper red drops to 2.1:1, so the eyebrow goes white
   and the red keeps its job on the rule and the button hover */
.enquiry.photo .eyebrow-red{color:var(--on-dark)}
.display{font-family:var(--serif);font-weight:400;font-size:var(--fs-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:var(--measure-display)}
.display .amp{color:var(--mz-red);font-style:italic;font-weight:300;
  font-size:var(--amp-scale);line-height:1;padding-inline:var(--amp-kern)}
.hero-split .lead{margin-top:var(--sp-6);color:var(--ink-body);max-width:var(--measure)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);
  margin-top:var(--sp-7)}

/* dark solid action, and a framed-free text action beside it */
.btn-dark{display:inline-block;background:var(--mz-black);color:var(--accent-fg)!important;
  padding:var(--btn-pad-y) var(--btn-pad-x);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:var(--ls-caps);text-transform:uppercase;border:0}
.btn-dark:hover{background:var(--mz-red);border:0}
.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mz-black);border:0}
.link-arrow::after{content:"\2192";font-size:var(--fs-small);transition:transform .15s ease}
.link-arrow:hover{color:var(--mz-red);border:0}
.link-arrow:hover::after{transform:translateX(var(--sp-1))}
/* the same, pointing back. no frame, because going back is not an action to promote */
.link-back{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--grey-70);border:0}
.link-back::before{content:"\2190";font-size:var(--fs-small);transition:transform .15s ease}
.link-back:hover{color:var(--mz-red);border:0}
.link-back:hover::before{transform:translateX(calc(var(--sp-1) * -1))}

/* ---------- hero scroll cue, as on the live site ---------- */
.scroll-cue{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-8);
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70)}
.scroll-cue .line{display:block;width:var(--rule-w);height:1px;background:var(--mz-red)}

/* ---------- a single serif statement, standing alone ---------- */
.statement{padding-block:var(--sp-10)}
/* the heading is the serif line. the paragraph under it stays body type, so a long
   section never renders as a wall of display serif */
.statement .line{font-family:var(--serif);font-weight:400;font-size:var(--fs-statement);
  line-height:var(--lh-statement);letter-spacing:var(--ls-tight);max-width:var(--measure-statement)}
.statement .after{margin-top:var(--sp-6);max-width:var(--measure)}
.statement .after p{color:var(--ink-body)}

/* ---------- full bleed photograph ---------- */
.feature-full{margin-inline:calc(50% - 50vw);width:100vw}
.feature-full img{width:100%;height:var(--h-feature);object-fit:cover}
.feature-full .cap{max-width:var(--max);margin-inline:auto;padding:var(--sp-4) var(--gutter) 0;
  font-size:var(--fs-small);color:var(--grey-70)}
.feature-ph{background:var(--grey-05);height:var(--h-feature);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  color:var(--grey-70);font-size:var(--fs-small);text-align:center;padding:var(--card-pad)}

/* ---------- asymmetric photo and prose, alternating ---------- */
.pair{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-block:var(--sp-9)}
.pair .txt h2{font-size:var(--fs-h2)}
@media(min-width:900px){
  .pair{grid-template-columns:1.15fr 1fr;gap:var(--sp-9);align-items:start}
  .pair .txt{padding-top:var(--sp-7)}
  .pair.flip>.shot{order:-1}
  .pair.flip .txt{padding-top:var(--sp-9)}
}
.pair .shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pair .shot .ph{background:var(--grey-05);aspect-ratio:4/5;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  color:var(--grey-70);font-size:var(--fs-small);text-align:center;padding:var(--card-pad)}

/* ---------- feature grid: the main offer block, dark and visual ---------- */
.feature-grid-sec{background:var(--paper);padding-block:var(--sp-9)}
.feature-head{margin-bottom:var(--sp-8);max-width:none}
.feature-head .intro{margin-top:var(--stack);margin-bottom:var(--sp-0)}
.feature-grid{display:grid;grid-template-columns:1fr;border-top:var(--border)}
@media(min-width:700px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){
  .feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}
}
.feature-cell{border-bottom:var(--border);padding:var(--sp-6) var(--sp-5);
  display:flex;flex-direction:column;color:var(--mz-black);border-left:0}
@media(min-width:700px){
  .feature-cell{border-left:var(--border)}
  .feature-grid>.feature-cell:nth-child(2n+1){border-left:0}
}
@media(min-width:1080px){
  .feature-grid.cols-3>.feature-cell:nth-child(2n+1),
  .feature-grid.cols-4>.feature-cell:nth-child(2n+1){border-left:var(--border)}
  .feature-grid.cols-3>.feature-cell:nth-child(3n+1),
  .feature-grid.cols-4>.feature-cell:nth-child(4n+1){border-left:0}
}
a.feature-cell{border-bottom:var(--border)}
a.feature-cell:hover{background:var(--grey-05)}
.cell-top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.feature-cell .num{font-family:var(--sans);font-size:var(--fs-micro);line-height:1;
  color:var(--num-ink);letter-spacing:var(--ls-caps);font-variant-numeric:tabular-nums}
.feature-cell .icon{color:var(--grey-70);margin-bottom:var(--sp-0)}
a.feature-cell:hover .num{color:var(--mz-red)}
.feature-cell h3{font-family:var(--serif);font-size:var(--fs-h4);line-height:var(--lh-sub);
  margin-bottom:var(--sp-3)}
.feature-cell p{color:var(--ink-body);font-size:var(--fs-small);margin-bottom:var(--sp-0);
  max-width:var(--measure)}
.feature-cell .go{display:inline-flex;align-items:center;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-5);align-self:flex-start;
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70)}
.feature-cell .go::after{content:"\2192"}
a.feature-cell:hover .go{color:var(--mz-black)}
a.feature-cell:hover .icon{color:var(--mz-red)}
a.feature-cell:hover .num{color:var(--num-ink)}

/* variant: heading and statement hold a column, the areas line up beside them */
.feature-aside{display:grid;grid-template-columns:1fr;gap:var(--sp-7)}
@media(min-width:1000px){
  .feature-aside{grid-template-columns:0.85fr 2fr;gap:var(--sp-9);align-items:start}
  .feature-aside .feature-head{margin-bottom:var(--sp-0);position:sticky;top:calc(var(--header-h) + var(--sp-6))}
  .feature-aside .feature-grid{border-top:var(--border)}
}

/* ---------- three columns: what, how, who ----------
   Each column carries a different KIND of information, so each gets its own
   typographic register. Same size for all three made the block unreadable:
   nothing told the eye what was a claim, what was a sequence, what was a link. */
.triptych{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media(min-width:1000px){
  .triptych{grid-template-columns:1.15fr 0.95fr 0.9fr;gap:var(--sp-0)}
  .tri-col{border-left:var(--border);padding-inline:var(--sp-7)}
  .tri-col:first-child{border-left:0;padding-left:var(--sp-0)}
  .tri-col:last-child{padding-right:var(--sp-0)}
}
.tri-col{display:flex;flex-direction:column}
.tri-col .lbl{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--sp-5)}
.tri-col .intro{color:var(--ink-body);font-size:var(--fs-body);max-width:var(--measure);
  margin-bottom:var(--sp-7)}
.tri-body{margin-top:var(--sp-6)}

/* 1. the claim. the largest thing in the block, because it is the argument */
.tri-statement{font-family:var(--serif);font-weight:500;font-size:var(--fs-triptych);
  line-height:var(--lh-cta);letter-spacing:var(--ls-tight);margin-bottom:var(--sp-6)}

/* the four offers. ruled rows, not micro links: these are the main destinations */
.tri-services{list-style:none;margin:var(--sp-0);border-top:var(--border)}
.tri-services li{border-bottom:var(--border)}
.tri-services a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-4);font-family:var(--serif);font-size:var(--fs-h4);
  line-height:var(--lh-sub);color:var(--mz-black);
  border:0}
.tri-services a::after{content:"\2192";font-size:var(--fs-small);color:var(--grey-70)}
.tri-services a:hover{color:var(--mz-red);border:0}
.tri-services a:hover::after{color:var(--mz-red)}

/* 2. the sequence. small, technical, on a rail with an arrow running down it */
.tri-timeline{list-style:none;margin:var(--sp-0);position:relative;
  padding-left:var(--sp-6);padding-bottom:var(--sp-6)}
.tri-timeline::before{content:"";position:absolute;left:var(--sp-1);top:var(--sp-2);
  bottom:var(--sp-5);width:1px;background:var(--grey-40)}
.tri-timeline::after{content:"";position:absolute;left:calc(var(--sp-1) - var(--tick));bottom:var(--sp-3);
  width:0;height:0;border-left:var(--arrow) solid transparent;border-right:var(--arrow) solid transparent;
  border-top:var(--arrow-h) solid var(--mz-red)}
.tri-timeline li{position:relative;padding-block:var(--sp-2);font-size:var(--fs-small);
  color:var(--mz-black)}
.tri-timeline li::before{content:"";position:absolute;left:calc(var(--sp-6) * -1 + var(--sp-1));
  top:calc(var(--sp-4) - 1px);width:var(--sp-2);height:1px;background:var(--grey-40)}
.tri-timeline li .n{font-family:var(--serif);color:var(--grey-70);margin-right:var(--sp-3);
  font-size:var(--fs-micro)}

/* 3. the sectors. medium serif on rules, four of them, no more */
.tri-sectors{list-style:none;margin:var(--sp-0);border-top:var(--border)}
.tri-sectors li{border-bottom:var(--border)}
.tri-sectors a,.tri-sectors span{display:block;padding-block:var(--sp-4);font-family:var(--serif);
  font-size:var(--fs-h3);line-height:var(--lh-sub);color:var(--mz-black);border:0}
.tri-sectors a:hover{color:var(--mz-red);border:0}

/* ---------- process rail: sequence, not a grid ---------- */
.rail{display:grid;grid-template-columns:1fr;gap:var(--sp-0);border-top:var(--border)}
@media(min-width:760px){.rail{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.rail{grid-template-columns:repeat(6,1fr)}}
.rail-step{padding:var(--sp-6) var(--sp-5) var(--sp-7);border-bottom:var(--border);
  position:relative}
@media(min-width:760px){
  .rail-step{border-bottom:0;border-left:var(--border)}
  .rail-step:nth-child(3n+1){border-left:0}
}
@media(min-width:1200px){
  .rail-step:nth-child(3n+1){border-left:var(--border)}
  .rail-step:nth-child(6n+1){border-left:0}
}
.rail-step .n{font-family:var(--sans);font-size:var(--fs-micro);color:var(--num-ink);
  letter-spacing:var(--ls-caps);font-variant-numeric:tabular-nums;
  display:block;margin-bottom:var(--sp-4)}
.rail-step .dot{position:absolute;top:calc(var(--sp-1) * -1);left:var(--sp-5);width:var(--sp-2);
  height:var(--sp-2);background:var(--mz-red)}
@media(min-width:760px){.rail-step .dot{left:var(--sp-5)}}
.rail-step h3{font-family:var(--serif);font-size:var(--fs-h5);
  line-height:var(--lh-sub);margin-bottom:var(--sp-3)}
.rail-step p{font-size:var(--fs-small);color:var(--ink-body);margin-bottom:var(--sp-0)}

/* ---------- pull quote ---------- */
.quote-sec{padding-block:var(--sp-10)}
.quote{margin:var(--sp-0);display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:900px){
  .quote{grid-template-columns:1.05fr 1fr;gap:var(--sp-9);align-items:start}
  .quote figcaption{margin-top:var(--sp-2)}
}
.quote blockquote{max-width:var(--measure-quote)}
.quote blockquote{margin:var(--sp-0);font-family:var(--serif);font-weight:400;
  font-size:var(--fs-statement);line-height:var(--lh-sub);text-indent:calc(var(--sp-4) * -1)}
.quote .mark{color:var(--mz-red)}
.quote figcaption{margin-top:var(--sp-6);color:var(--ink-body);max-width:var(--measure)}
.quote figcaption p{margin-bottom:var(--stack)}
.quote figcaption strong{color:var(--mz-black);font-weight:600}
.quote figcaption strong{color:var(--mz-black)}

/* ---------- quote beside a photograph ---------- */
.quote-split{display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:stretch}
@media(min-width:900px){.quote-split{grid-template-columns:1.05fr 1fr;gap:var(--sp-0)}}
.quote-split .col-a{display:flex;flex-direction:column;gap:var(--sp-0)}
.quote-split .shot{background:var(--grey-05);flex:1 1 auto;
  min-height:var(--h-shot);position:relative}
.quote-split .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.quote-split .shot .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--grey-70);font-size:var(--fs-small);text-align:center;
  padding:var(--card-pad)}
.quote-split .txt{display:flex;flex-direction:column;justify-content:flex-start;
  padding:var(--sp-0)}
@media(min-width:900px){.quote-split .txt{padding-left:var(--sp-9)}}
.quote-split blockquote{margin:var(--sp-0);font-family:var(--serif);font-weight:400;
  font-size:var(--fs-statement);line-height:var(--lh-sub);max-width:var(--measure-quote)}
.quote-split .mark{color:var(--mz-red)}

/* ---------- quote over a photograph, one line per corner ---------- */
.quote-photo{position:relative;min-height:var(--quote-min);display:grid;
  background-size:cover;background-position:center;
  background-image:linear-gradient(160deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.34) 45%,rgba(10,10,10,.72) 100%),var(--quote-img)}
.quote-photo .inner{max-width:var(--max);margin-inline:auto;width:100%;
  padding:var(--sp-9) var(--gutter);display:grid;grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;gap:var(--sp-8)}
.quote-photo .l1{align-self:start;justify-self:start;text-align:left}
.quote-photo .l2{align-self:end;justify-self:end;text-align:right}
.quote-photo p{font-family:var(--serif);font-weight:400;font-size:var(--fs-quote-photo);
  line-height:var(--lh-quote);color:var(--on-dark);max-width:var(--measure-quote);margin-bottom:var(--sp-0);
  text-shadow:0 1px var(--sp-2) rgba(10,10,10,.5)}
.quote-photo .mark{color:var(--mz-red)}
.quote-photo .credit{position:absolute;left:var(--gutter);bottom:var(--sp-5);
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--on-dark-mute)}
.quote-photo .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--on-dark-mute);font-size:var(--fs-small)}

/* ---------- projects, magazine treatment ---------- */
.folio{display:grid;gap:var(--sp-9)}
.folio-item{display:grid;gap:var(--sp-5);grid-template-rows:auto 1fr}
.folio-item .shot{margin-inline:calc(50% - 50vw);width:100vw;background:var(--grey-05)}
.folio-item .shot.contained{margin-inline:0;width:auto}
.folio-item .shot img{width:100%;height:var(--h-folio);object-fit:cover}
.folio-item .ph{height:var(--h-folio);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--sp-2);color:var(--grey-70);
  font-size:var(--fs-small);text-align:center;padding:var(--card-pad)}
/* the second and third run inset and side by side, so the page has a rhythm
   rather than a stack of identical bands */
.folio-pair{display:grid;gap:var(--sp-9)}
@media(min-width:900px){
  .folio-pair{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .folio-pair .folio-item .shot{margin-inline:var(--sp-0);width:auto}
  .folio-pair .folio-item .shot img,.folio-pair .folio-item .ph{height:var(--h-folio-pair)}
}
.folio-caption{display:grid;gap:var(--sp-4);border-top:var(--border);padding-top:var(--sp-5)}
@media(min-width:900px){
  .folio-item>.folio-caption{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  /* inside the pair the column is half as wide, so the caption stacks instead */
  .folio-pair .folio-item>.folio-caption{grid-template-columns:1fr;gap:var(--sp-5)}
}
.folio-caption .sector{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--red-text);margin-bottom:var(--sp-3)}
.folio-caption h3{font-size:var(--fs-h2);margin-bottom:var(--sp-0)}
.folio-caption h3 a{color:var(--mz-black);border:0}
.folio-caption h3 a:hover{color:var(--mz-red)}
.folio-data{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.folio-data .k{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70);margin-bottom:var(--sp-2)}
.folio-data .v{font-size:var(--fs-small)}

/* ---------- who we serve: list left, photograph right ---------- */
.serve{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:900px){.serve{grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}}
.serve-list{list-style:none;margin:var(--sp-0);counter-reset:sv}
.serve-list li{border-top:var(--border)}
.serve-list li:last-child{border-bottom:var(--border)}
.serve-list a,.serve-list .row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:center;
  padding-block:var(--sp-6);color:var(--mz-black);border:0}
.serve-list .icon{width:40px;height:40px;color:var(--grey-70)}
.serve-list .n{font-family:var(--serif);font-size:var(--fs-h3)}
.serve-list .note{display:block;font-size:var(--fs-small);color:var(--ink-body);
  margin-top:var(--sp-2)}
.serve-list a:hover .n,.serve-list li:hover .n{color:var(--mz-red)}
.serve-list a:hover .icon,.serve-list li:hover .icon{color:var(--mz-red)}
/* the stage. images stack, one visible at a time */
.serve-stage{position:relative;aspect-ratio:4/5;background:var(--grey-05);overflow:hidden}
.serve-icons{display:none}
@media(max-width:899px){
  .serve-stage{aspect-ratio:16/10;order:-1}
  .serve-list{display:none}
  .serve-stage::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(10,10,10,.6),transparent 55%);pointer-events:none}
  .serve-shot .cap{font-size:var(--fs-h2)}
  .serve-icons{display:flex;justify-content:center;gap:var(--sp-7);margin-top:var(--sp-2)}
}
.serve-icons .si{display:flex;color:var(--grey-40);animation:serveIconActive 16s linear infinite}
.serve-icons .si .icon{height:32px;width:32px}
.serve-icons .si:nth-child(1){animation-delay:0s}
.serve-icons .si:nth-child(2){animation-delay:4s}
.serve-icons .si:nth-child(3){animation-delay:8s}
.serve-icons .si:nth-child(4){animation-delay:12s}
@keyframes serveIconActive{0%,2%{color:var(--grey-40)}4%,23%{color:var(--mz-red)}27%,100%{color:var(--grey-40)}}
@media(prefers-reduced-motion:reduce){
  .serve-icons .si{animation:none}
  .serve-icons .si:nth-child(1){color:var(--mz-red)}
}
.serve-shot{position:absolute;inset:0;opacity:0;animation:serveCycle 16s linear infinite}
.serve-shot img{width:100%;height:100%;object-fit:cover}
.serve-shot .ph{height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--grey-70);font-size:var(--fs-small)}
.serve-shot .cap{position:absolute;left:var(--sp-6);bottom:var(--sp-6);color:var(--paper);
  font-family:var(--serif);font-size:var(--fs-h3);text-shadow:0 1px var(--sp-2) rgba(10,10,10,.6)}.serve-shot:nth-child(1){animation-delay:0s}
.serve-shot:nth-child(2){animation-delay:4s}
.serve-shot:nth-child(3){animation-delay:8s}
.serve-shot:nth-child(4){animation-delay:12s}
@keyframes serveCycle{0%,2%{opacity:0}4%,23%{opacity:1}27%,100%{opacity:0}}
/* Hovering the list takes over. The animation is cancelled rather than paused:
   a running or paused animation outranks a normal declaration in the cascade, so
   animation-play-state alone left the previously visible photograph on screen.
   :has() lets the list and the stage stay siblings, which keeps the markup valid.
   Browsers without :has() simply keep the rotation, which is a fine fallback. */
.serve:has(.serve-list li:hover) .serve-shot{animation:none;opacity:0}
.serve:has(.serve-list li:nth-child(1):hover) .serve-shot:nth-child(1),
.serve:has(.serve-list li:nth-child(2):hover) .serve-shot:nth-child(2),
.serve:has(.serve-list li:nth-child(3):hover) .serve-shot:nth-child(3),
.serve:has(.serve-list li:nth-child(4):hover) .serve-shot:nth-child(4),
.serve:has(.serve-list li:nth-child(5):hover) .serve-shot:nth-child(5),
.serve:has(.serve-list li:nth-child(6):hover) .serve-shot:nth-child(6){opacity:1}
@media(prefers-reduced-motion:reduce){
  .serve-shot{animation:none}
  .serve-shot:nth-child(1){opacity:1}
}

/* ---------- scope figures ---------- */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-0);
  border-top:var(--border);border-bottom:var(--border)}
@media(min-width:760px){.figures{grid-template-columns:repeat(4,1fr)}}
.figures .fig{padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-0)}
/* two up. cells 1 and 3 open their row, so they take no left inset and no rule.
   the old selector treated every cell after the first as a second column cell,
   which pushed the whole bottom row right and off the frame. */
@media(max-width:759px){
  .figures .fig:nth-child(even){border-left:var(--border);padding-left:var(--sp-6)}
  .figures .fig:nth-child(odd){border-left:0;padding-left:var(--sp-0)}
  .figures .fig:nth-child(n+3){border-top:var(--border)}
}
@media(min-width:760px){
  .figures .fig+.fig{border-left:var(--border);padding-left:var(--sp-6)}
}
.figures .fig .v{font-family:var(--serif);font-weight:400;font-size:var(--fs-figure);
  line-height:1;letter-spacing:var(--ls-body);margin-bottom:var(--sp-4);white-space:nowrap}
/* the unit rides small and red beside the numeral, as on the live site */
.figures .fig .v .s{color:var(--mz-red);font-size:var(--fig-suffix);font-style:normal;
  letter-spacing:var(--ls-caps)}
.figures .fig .l{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--grey-70)}

/* ---------- elegant index list, replaces card grids on parent pages ---------- */
.index-list{list-style:none;margin:var(--sp-0);counter-reset:ix}
.index-list li{counter-increment:ix;border-top:var(--border)}
.index-list li:last-child{border-bottom:var(--border)}
.index-list a{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:var(--sp-5);padding-block:var(--sp-5);color:var(--mz-black);border:0}
.index-list a::before{content:counter(ix,decimal-leading-zero);font-family:var(--serif);
  font-size:var(--fs-small);color:var(--num-ink)}
.index-list .n{font-family:var(--serif);font-size:var(--fs-h3)}
.index-list .m{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--grey-70);text-align:right}
.index-list .note{display:block;font-family:var(--sans);font-size:var(--fs-small);
  color:var(--grey-70);margin-top:var(--sp-2);max-width:var(--measure)}
.index-list a{padding-block:var(--sp-6)}
@media(max-width:560px){
  .index-list a{grid-template-columns:auto 1fr;gap:var(--sp-4)}
  .index-list .icon-sm{display:none}
  .index-list .m{grid-column:2;text-align:left;margin-top:var(--sp-2)}
}
/* project card: the scope data is the point, so it is set like data */
.card.project .scope{line-height:var(--lh-scope)}
.card.project .scope .val{color:var(--mz-black)}
.index-list a:hover{border:0}
.index-list a:hover .n{color:var(--mz-red)}

/* ---------- scope strip: what a sector's work covers, scannable ---------- */
.scope-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);
  border-top:var(--border);padding-top:var(--sp-6);align-items:start}
@media(min-width:760px){.scope-strip{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.scope-strip{grid-template-columns:repeat(6,1fr)}}
.scope-item{padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-0);
  padding-right:var(--sp-6)}
@media(min-width:760px){.scope-item{padding-right:var(--sp-5)}}
/* the glyphs differ in height, so the box is fixed and the icon sits centred
   inside it. that is what puts every icon on the same line across the row. */
.scope-item .icon{height:var(--icon);width:var(--icon);color:var(--grey-70);
  margin-bottom:var(--sp-4);display:flex;align-items:center}
.scope-item .icon{color:var(--grey-70);margin-bottom:var(--sp-3)}
.scope-item h3{font-family:var(--serif);font-size:var(--fs-h5);line-height:var(--lh-sub);
  margin-bottom:var(--sp-2)}
.scope-item p{font-size:var(--fs-small);color:var(--ink-body);margin-bottom:var(--sp-0)}

/* ---------- compact category band: image right, no full bleed ---------- */
.cat-band{background:var(--grey-05);border-bottom:var(--border)}
.cat-band .wrap{padding-block:var(--sp-7);display:grid;grid-template-columns:1fr;
  gap:var(--sp-6);align-items:center}
@media(min-width:900px){
  .cat-band .wrap{grid-template-columns:1.15fr 1fr;gap:var(--sp-8)}
}
.cat-band h1{max-width:var(--measure-display)}
.cat-band .hero-lead{margin-top:var(--stack)}
.cat-shot{background:var(--paper);height:var(--h-cat-hero);position:relative;
  border:var(--border)}
.cat-shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.cat-shot .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--grey-70);font-size:var(--fs-small);
  text-align:center;padding:var(--card-pad)}

/* ---------- spec strip: the facts a specifier wants before scrolling ---------- */
.spec-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-0);
  border-top:var(--border);border-bottom:var(--border);margin-top:var(--sp-6)}
@media(min-width:760px){.spec-strip{grid-template-columns:repeat(4,1fr)}}
.spec-item{padding:var(--sp-5);border-left:var(--border);border-bottom:var(--border)}
.spec-item:nth-child(2n+1){border-left:0}
@media(min-width:760px){
  .spec-item{border-bottom:0}
  .spec-item:nth-child(2n+1){border-left:var(--border)}
  .spec-item:nth-child(4n+1){border-left:0}
}
.spec-item .v{font-family:var(--serif);font-size:var(--fs-h3);line-height:var(--lh-sub);
  color:var(--mz-black);display:block}
.spec-item .k{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--num-ink);margin-top:var(--sp-2);display:block}

/* ---------- grouped fixture grid, with a jump bar ---------- */
.group-nav{position:sticky;top:var(--header-h);z-index:40;background:#fff;
  border-bottom:var(--border);padding-block:var(--sp-4);margin-bottom:var(--sp-6);
  display:flex;gap:var(--sp-3);flex-wrap:wrap}
.group-nav a{display:inline-flex;align-items:baseline;gap:var(--sp-2);
  font-family:var(--sans);font-size:var(--fs-small);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--mz-black);border:1px solid var(--field-line-dark);
  padding:var(--sp-3) var(--sp-4)}
.group-nav a:hover{background:var(--mz-black);border-color:var(--mz-black);color:var(--paper)}
.group-nav a:hover .count{color:var(--paper)}
.group-nav .count{color:var(--grey-70);font-size:var(--fs-micro)}
.fx-group+.fx-group{margin-top:var(--sp-8)}
.fx-group>h3{font-family:var(--serif);font-size:var(--fs-h3);line-height:var(--lh-sub);
  border-bottom:var(--border);padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
  display:flex;justify-content:space-between;align-items:baseline}
.fx-group>h3 .count{font-family:var(--sans);font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--num-ink)}
.card .specs{font-size:var(--fs-micro);color:var(--grey-70);margin-top:var(--sp-2);
  line-height:var(--lh-scope)}
.card .specs span{display:block}

/* ---------- link strip: siblings and cross links as cards, not inline prose ---------- */
.link-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-0);
  border-top:var(--border)}
@media(min-width:900px){.link-strip{grid-template-columns:repeat(4,1fr)}}
.link-strip a,.link-strip .cell{display:block;padding:var(--sp-5);border-bottom:var(--border);
  border-left:var(--border);color:var(--mz-black)}
.link-strip a:nth-child(2n+1),.link-strip .cell:nth-child(2n+1){border-left:0}
@media(min-width:900px){
  .link-strip a:nth-child(2n+1),.link-strip .cell:nth-child(2n+1){border-left:var(--border)}
  .link-strip a:nth-child(4n+1),.link-strip .cell:nth-child(4n+1){border-left:0}
}
.link-strip a:hover{background:var(--grey-05);color:var(--mz-red)}
.link-strip .lbl{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--num-ink);display:block;margin-bottom:var(--sp-3)}
.link-strip .icon{color:var(--grey-70);margin-bottom:var(--sp-4)}
.link-strip a:hover .icon{color:var(--mz-red)}
.link-strip .nm{font-family:var(--serif);font-size:var(--fs-h4);
  line-height:var(--lh-sub);display:block}
.link-strip a.all .nm,.link-strip a.all .lbl,.link-strip a.all .icon{color:var(--mz-red)}
.link-strip a.all:hover{background:var(--grey-05)}


/* the timeline is a full width rail, one column per phase, never a half column */
.timeline-rail{grid-template-columns:1fr;margin-top:var(--sp-6);list-style:none;
  margin-left:var(--sp-0);max-width:none;padding-left:var(--sp-0)}
@media(min-width:700px){.timeline-rail{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.timeline-rail{grid-template-columns:repeat(5,1fr)}}
.timeline-rail>li{margin-top:var(--sp-0)}
.timeline-rail .rail-step{border-left:var(--border);border-bottom:0}
.timeline-rail .rail-step:first-child{border-left:0}
@media(max-width:699px){
  .timeline-rail .rail-step{border-left:0;border-bottom:var(--border)}
}
.timeline-rail .rail-step p{max-width:none}

/* ---------- step trio: three stages read as a set, not three more essays ---------- */
.step-trio{display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-6)}
@media(min-width:860px){.step-trio{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}}
.step .shot{background:var(--grey-05);height:var(--h-shot);position:relative;
  margin-bottom:var(--sp-5);border:var(--border)}
.step .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.step .shot .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--grey-70);font-size:var(--fs-small);
  text-align:center;padding:var(--card-pad)}
.step .n{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);color:var(--num-ink);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:var(--sp-3)}
.step h3{font-family:var(--serif);font-size:var(--fs-h4);line-height:var(--lh-sub);
  margin-bottom:var(--sp-3)}
.step p{font-size:var(--fs-small);color:var(--ink-body);max-width:none}

/* ---------- highlight: the argument that has to be seen, given a photograph ---------- */
.highlight{background:var(--paper);border-top:0;border-bottom:var(--border);
  padding-block:var(--section-y-lg)}
.hl-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center}
@media(min-width:900px){.hl-grid{grid-template-columns:1fr 1.1fr;gap:var(--sp-8)}}
.hl-grid .shot{background:var(--paper);height:var(--h-folio-pair);position:relative;
  border:var(--border)}
.hl-grid .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hl-grid .shot .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--grey-70);font-size:var(--fs-small);
  text-align:center;padding:var(--card-pad)}

/* ---------- FAQ as an accordion, so the page carries weight without showing it -- */
.faq-sec{background:var(--surface-faq);border-block:var(--border)}
.faq-list{border-top:var(--border);max-width:none}
.faq-item{border-bottom:var(--border)}
.faq-item>summary{list-style:none;cursor:pointer;padding-block:var(--sp-5);
  font-family:var(--serif);font-size:var(--fs-h4);line-height:var(--lh-sub);
  font-weight:600;color:var(--mz-black);display:flex;
  justify-content:space-between;align-items:baseline;gap:var(--sp-5)}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"+";font-family:var(--serif);font-size:var(--fs-h3);
  line-height:1;color:var(--num-ink)}
.faq-item[open]>summary::after{content:"\2013"}
.faq-item>summary::after{color:var(--num-ink)}
.faq-item>summary:hover{color:var(--mz-red)}
.faq-item .a{padding-bottom:var(--sp-5);max-width:none}
.faq-item .a p{color:var(--ink-body);margin-bottom:var(--sp-0);max-width:none}

/* the closing enquiry band must never butt against the last section */
.enquiry{margin-top:var(--section-y-lg)}
section.band+.enquiry,.faq-sec+.enquiry{margin-top:var(--sp-0)}
/* a registered but unshot slot renders its box, so a layout can be reviewed
   before the photography exists rather than collapsing to a column of prose */
.split .shot{background:var(--grey-05);border:var(--border);height:var(--h-shot);
  position:relative}
.split .shot .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--ink-note);font-size:var(--fs-small);
  text-align:center;padding:var(--card-pad)}
.folio-item .shot .ph{position:relative;height:100%;min-height:260px;background:var(--grey-05);
  display:flex;align-items:center;justify-content:center;color:var(--ink-note);
  font-size:var(--fs-small);text-align:center;padding:var(--card-pad)}

/* ---------- phase flow: a sequence, drawn as one, ending in an arrow ---------- */
.phase-flow{list-style:none;margin:var(--sp-7) var(--sp-0) var(--sp-0);
  padding-left:var(--sp-0);position:relative;max-width:none}
/* the spine, running from the first marker to just past the last */
.phase-flow::before{content:"";position:absolute;left:var(--phase-spine);
  top:var(--sp-5);bottom:var(--sp-7);width:1px;background:var(--grey-40)}
/* the arrowhead that closes the sequence */
.phase-flow::after{content:"";position:absolute;left:calc(var(--phase-spine) - var(--arrow));
  bottom:var(--sp-5);width:0;height:0;
  border-left:var(--arrow) solid transparent;border-right:var(--arrow) solid transparent;
  border-top:var(--arrow-h) solid var(--mz-red)}
.phase{position:relative;padding-left:var(--phase-indent);padding-bottom:var(--sp-8)}
.phase:last-child{padding-bottom:var(--sp-9)}
.phase+.phase{margin-top:var(--sp-0)}
.phase .marker{position:absolute;left:var(--sp-0);top:var(--sp-0);
  width:var(--phase-node);height:var(--phase-node);border:var(--border);
  background:var(--paper);display:flex;align-items:center;justify-content:center}
.phase .marker .n{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  color:var(--num-ink);font-variant-numeric:tabular-nums}
.phase:first-child .marker{border-color:var(--mz-red)}
.phase .body h3{font-family:var(--serif);font-size:var(--fs-h3);
  line-height:var(--lh-sub);margin-bottom:var(--sp-3)}
.phase .body p{max-width:none}
.phase .body p:last-child{color:var(--ink-body)}
@media(max-width:699px){
  .phase{padding-left:var(--phase-indent-sm)}
  .phase-flow::before{left:var(--phase-spine-sm)}
  .phase-flow::after{left:calc(var(--phase-spine-sm) - var(--arrow))}
}
.folio-note{color:var(--ink-body);font-size:var(--fs-small);max-width:var(--measure);
  margin-top:var(--sp-3);margin-bottom:var(--sp-0)}
.card-note{font-size:var(--fs-small);color:var(--ink-body);margin-top:var(--sp-2);
  margin-bottom:var(--sp-0);max-width:none}
.card .body .count{margin-top:var(--sp-3)}

/* ---------- contact: the page is the form, so it is one block ---------- */
.contact-hero{background:var(--mz-black);color:var(--on-dark);
  padding-block:var(--sp-9);display:flex;align-items:center}
.contact-hero.photo{background-image:linear-gradient(var(--scrim),var(--scrim)),var(--cta-img);
  background-size:cover;background-position:center 80%}
.contact-hero>.wrap{width:100%}
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8);align-items:start}
@media(min-width:900px){
  /* the panel takes the smaller share and only the height its fields need, so the
     photograph carries the page rather than the form covering it */
  .contact-grid{grid-template-columns:1.35fr 1fr;gap:var(--sp-9);align-items:start}
  .contact-say{display:flex;flex-direction:column}
}
.contact-hero h1{color:var(--on-dark);max-width:var(--measure-statement)}
.contact-lead{color:var(--on-dark-body);max-width:var(--measure);margin-top:var(--stack-lg)}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);
  padding-top:var(--sp-8);margin-top:var(--sp-8);border-top:1px solid var(--field-line-dark)}
.contact-meta .k{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:var(--sp-3)}
.contact-meta a{color:var(--on-dark);border-bottom:1px solid transparent}
.contact-meta a:hover{border-bottom-color:var(--mz-red);color:var(--on-dark)}

/* the form sits on paper, the way the reference panel does */
.contact-panel{padding:var(--sp-6)}
.contact-panel h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.panel-note{color:var(--ink-body);font-size:var(--fs-small);margin-bottom:var(--sp-5);
  max-width:none}
.form-full.on-light input,.form-full.on-light textarea,.form-full.on-light select{
  border:1px solid var(--panel-line);background-color:transparent;color:var(--mz-black)}
.form-full.on-light input::placeholder,.form-full.on-light textarea::placeholder{
  color:var(--panel-hint)}
.form-full.on-light .form-note{color:var(--panel-hint)}

/* ---------- mobile drawer: a real panel, with the catalogues collapsed ---------- */
.nav-mobile{margin-left:auto}
@media(min-width:1000px){.nav-mobile{display:none}}
.nav-mobile>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:var(--sp-3);min-height:var(--touch);padding-inline:var(--sp-4);
  border:var(--border);font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:500}
.nav-mobile>summary::-webkit-details-marker{display:none}
.nav-mobile>summary .bars{width:var(--sp-4);height:1px;background:var(--mz-black);
  position:relative;display:block}
.nav-mobile>summary .bars::before,.nav-mobile>summary .bars::after{content:"";position:absolute;
  left:0;width:var(--sp-4);height:1px;background:var(--mz-black)}
.nav-mobile>summary .bars::before{top:calc(var(--sp-1) * -1)}
.nav-mobile>summary .bars::after{top:var(--sp-1)}
.nav-mobile[open]>summary .bars{background:transparent}
.nav-mobile[open]>summary .bars::before{transform:rotate(45deg);top:0}
.nav-mobile[open]>summary .bars::after{transform:rotate(-45deg);top:0}

/* a fixed position child escapes the closed details, so it is hidden explicitly.
   without this the whole menu stays laid out behind the page and overflows it. */
.nav-mobile:not([open]) .drawer{display:none}
.nav-mobile .drawer{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;
  background:var(--paper);border-top:var(--border);z-index:70;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.drawer-inner{padding-block:var(--sp-5) var(--sp-8)}

.nav-mobile .nav-flat .grp,.nav-group>summary{display:flex;align-items:center;
  justify-content:space-between;min-height:var(--touch);
  font-family:var(--serif);font-size:var(--fs-h4);line-height:var(--lh-sub);
  color:var(--mz-black);border-bottom:var(--border)}
.nav-group>summary{list-style:none;cursor:pointer}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{color:var(--mz-red)}
/* the chevron says the row opens. it turns when it does. */
.nav-group>summary .chev{width:var(--sp-3);height:var(--sp-3);flex:0 0 auto;
  border-right:1px solid var(--num-ink);border-bottom:1px solid var(--num-ink);
  transform:rotate(45deg);margin-bottom:var(--sp-1);transition:transform .15s ease}
.nav-group[open]>summary .chev{transform:rotate(225deg);margin-bottom:calc(var(--sp-1) * -1)}
.nav-group[open]>summary{color:var(--mz-red)}

.nav-mobile ul{list-style:none;margin:var(--sp-0);padding-left:var(--sp-0)}
.nav-mobile li+li{margin-top:var(--sp-0)}
.nav-mobile li a{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--touch);
  padding-block:var(--sp-2);color:var(--mz-black);font-size:var(--fs-small);border:0}
.nav-mobile li a:hover{color:var(--mz-red)}
.nav-mobile li a .icon-sm{width:var(--icon-sm);height:var(--icon-sm);flex:0 0 auto;
  color:var(--grey-70)}
.nav-mobile li a:hover .icon-sm{color:var(--mz-red)}
.nav-group ul li a.all{font-weight:500}
/* a sub item is indented and hung off a rule, so the eye reads it as belonging to
   the heading above rather than as another top level destination */
/* the indent alone carries the hierarchy. rules between sub items only added
   noise to a list that is already short and grouped by its heading. */
.nav-group>ul,.nav-flat>ul{margin-left:var(--sp-0);padding-left:var(--sp-0);
  padding-block:var(--sp-2)}
.nav-group>ul li a,.nav-flat>ul li a{padding-left:var(--nav-indent)}
/* a standalone destination is not a sub item, so it keeps the group alignment */
/* a standalone destination sits with the group headings, so it keeps their rule */
.nav-mobile li a.solo{font-family:var(--serif);font-size:var(--fs-h4);
  line-height:var(--lh-sub);padding-left:var(--sp-0);border-bottom:var(--border)}
.nav-mobile .nav-flat>ul:only-child{margin-left:var(--sp-0);border-left:0}
.nav-mobile .nav-flat .grp{border-bottom:var(--border)}
.drawer-cta{display:block;text-align:center;margin-top:var(--sp-6)}

/* ---------- swipe rail: a short set of cards reads better sideways on a phone
   than as four full width blocks the reader has to scroll past ---------- */
@media(max-width:759px){
  .grid.swipe{display:grid;grid-auto-flow:column;
    grid-auto-columns:78%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--sp-5);padding-bottom:var(--sp-5);
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .grid.swipe>.card{scroll-snap-align:start}
}
/* a pending full bleed hero still occupies its band, so the page reads correctly
   and the slot is visible to whoever is choosing the photograph */
.hero-photo .ph{height:var(--h-hero);background:var(--grey-05);border-bottom:var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--ink-note);
  font-size:var(--fs-small);text-align:center;padding:var(--card-pad)}

/* ---- the page a sender lands on, /thank-you --------------------------------
   Confirmation first, then three ways onwards. No form, because the sender has
   just used one, and no closing band for the same reason. */
.thanks{padding-block:var(--section-y-lg)}
.thanks .display{margin-bottom:var(--sp-5)}
.thanks .lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink-body);
  margin-bottom:var(--sp-4)}
.thanks .measure{max-width:var(--measure);color:var(--ink-body)}
.thanks-links{display:grid;grid-template-columns:1fr;gap:var(--sp-5);
  margin-top:var(--sp-8)}
/* three, four or five cards all sit on one row on a desktop and wrap evenly below,
   so the number of ways onwards is a content decision rather than a layout one */
@media(min-width:768px){
  .thanks-links{grid-template-columns:repeat(auto-fit,minmax(var(--thanks-card),1fr))}}
.thanks-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--card-pad);
  border:var(--border);background:var(--paper);color:var(--mz-black);
  text-decoration:none;transition:border-color .2s ease,background .2s ease}
.thanks-card:hover{border-color:var(--mz-black);background:var(--grey-05)}
.thanks-card .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--mz-red)}
.thanks-card h2{font-size:var(--fs-h4);line-height:var(--lh-sub);margin:0}
.thanks-card p{color:var(--ink-note);font-size:var(--fs-small);margin:0;flex:1}
.thanks-card h2{flex:1}
.thanks-card .go{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--red-text)}
.thanks-foot{margin-top:var(--sp-8);color:var(--ink-note);font-size:var(--fs-small)}

/* the only message the form shows inline. Success leaves the page, so the sole
   thing left to say here is that something went wrong and how to get around it */
.form-error{margin-top:var(--sp-4);padding:var(--sp-4);border-left:1px solid var(--mz-red);
  background:var(--grey-05);color:var(--mz-black);font-size:var(--fs-small)}
.form-error a{color:var(--red-text)}
form[aria-busy="true"] button{opacity:.6;pointer-events:none}

/* ---- project slideshow ----------------------------------------------------
   A project card on /projects opens its photographs rather than linking anywhere,
   because there is no project page behind it. */
.folio-item .folio-open{display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;position:relative}
.folio-item .folio-open::after{content:"";position:absolute;inset:0;
  background:var(--mz-black);opacity:0;transition:opacity .2s ease}
.folio-item .folio-open:hover::after,
.folio-item .folio-open:focus-visible::after{opacity:var(--scrim-hover)}
.folio-count{position:absolute;left:var(--sp-5);bottom:var(--sp-5);z-index:1;
  padding:var(--sp-2) var(--sp-4);background:var(--paper);color:var(--mz-black);
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase}

html.lb-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;
  align-items:center;justify-content:center;background:var(--scrim-solid);
  padding:var(--sp-6)}
.lightbox[hidden]{display:none}
.lb-stage{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:var(--sp-4)}
.lb-stage img{max-width:100%;max-height:var(--lb-h);object-fit:contain;
  background:var(--grey-05)}
.lb-stage figcaption{color:var(--on-dark-mute);font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps)}
.lightbox button{background:none;border:0;color:var(--on-dark);cursor:pointer}
.lb-close{position:absolute;top:var(--sp-5);right:var(--sp-5);
  font-size:var(--fs-h3);line-height:1;min-width:var(--touch);min-height:var(--touch)}
.lb-nav{font-size:var(--fs-h2);line-height:1;min-width:var(--touch);
  min-height:var(--touch);flex:0 0 auto}
.lb-nav[hidden]{display:none}
.lb-dots{position:absolute;bottom:var(--sp-6);display:flex;gap:var(--sp-3)}
.lb-dots[hidden]{display:none}
.lightbox .lb-dot{width:var(--dot);height:var(--dot);padding:0;border-radius:50%;
  background:var(--grey-70)}
.lightbox .lb-dot[aria-current="true"]{background:var(--mz-red)}
@media(max-width:767px){
  .lb-nav{position:absolute;bottom:var(--sp-6)}
  .lb-prev{left:var(--sp-5)}
  .lb-next{right:var(--sp-5)}
}

/* the What We Do pages: title beside the photograph rather than under it. The panel
   sits centred rather than bottom aligned, because there is no display line to anchor
   and a short title floating at the bottom of a tall panel reads as a mistake. */
.hero-split-page .panel{justify-content:center}
@media(min-width:900px){
  .hero-split-page,.hero-split-page .shot{min-height:var(--hero-min-page)}
  /* the panel is not wrapped in .wrap, since the photo half stays full bleed,
     so past --max viewport width its own padding must widen to keep pace
     with the centred container above it rather than hugging the true edge */
  .hero-split-page .panel{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
}
.hero-split-page .panel .rule{margin-top:var(--sp-6)}
.hero-split-page .lead{margin-top:var(--sp-5);font-size:var(--fs-lead);
  line-height:var(--lh-body);color:var(--ink-body);max-width:var(--measure-lead)}
.hero-split-page .hero-actions{margin-top:var(--sp-6)}

/* category pages: same split layout as the parent hub page, shorter height */
.hero-split-category .panel{justify-content:center}
@media(min-width:900px){
  .hero-split-category,.hero-split-category .shot{min-height:var(--hero-min-category)}
  .hero-split-category .panel{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
    padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
}
.hero-split-category .panel .rule{margin-top:var(--sp-6)}
.hero-split-category .lead{margin-top:var(--sp-5);font-size:var(--fs-lead);
  line-height:var(--lh-body);color:var(--ink-body);max-width:var(--measure-lead)}
.display-sm{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display);margin:0;
  max-width:var(--measure-display)}

/* ---------- project philosophy: five phases, styled like the scope strip ---------- */
.phil-head .rule{margin-top:var(--sp-5)}
.phil-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-0);
  border-top:var(--border);margin-top:var(--sp-6)}
@media(min-width:760px){.phil-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.phil-grid{grid-template-columns:repeat(5,1fr)}}
.phil-card{padding:var(--sp-6) var(--sp-5) var(--sp-6) var(--sp-0);border-bottom:var(--border)}
@media(min-width:760px){
  .phil-card{padding-left:var(--sp-5);border-bottom:0;border-left:var(--border)}
  .phil-card:nth-child(3n+1){border-left:0;padding-left:var(--sp-0)}
}
@media(min-width:1080px){
  .phil-card:nth-child(3n+1){border-left:var(--border);padding-left:var(--sp-5)}
  .phil-card:nth-child(5n+1){border-left:0;padding-left:var(--sp-0)}
}
.phil-card .icon{height:var(--icon);width:var(--icon);color:var(--grey-70);
  margin-bottom:var(--sp-4);display:flex;align-items:center}
.phil-card h3{font-family:var(--serif);font-size:var(--fs-h5);line-height:var(--lh-sub);
  margin-bottom:var(--sp-3)}
.phil-card ul{list-style:none;margin:0;padding:0}
.phil-card li{font-size:var(--fs-small);color:var(--ink-body);padding-block:var(--sp-1)}

/* ---------- pillars: the four core services, standalone cards not a process strip ---------- */
.pillars-sec{background:var(--paper);padding-block:var(--sp-10)}
.pillars-head{margin-bottom:var(--sp-8);max-width:none}
.pillars-head .intro{margin-top:var(--stack);margin-bottom:var(--sp-0);max-width:none}
.pillars{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media(min-width:700px){.pillars{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.pillars{grid-template-columns:repeat(4,1fr)}}
@media(max-width:699px){
  .pillars-sec .pillars{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--sp-5);padding-bottom:var(--sp-2);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .pillars-sec .pillars .pillar{scroll-snap-align:start}
}
.pillar{background:var(--paper);border:var(--border);padding:var(--sp-7) var(--sp-6);
  display:flex;flex-direction:column}
.pillar .icon{height:52px;width:52px;color:var(--mz-black);margin-bottom:var(--sp-6)}
.pillar h3{font-family:var(--serif);font-size:var(--fs-h3);line-height:var(--lh-sub);
  color:var(--mz-black);margin-bottom:var(--sp-3)}
.pillar p{color:var(--ink-body);font-size:var(--fs-small);margin-bottom:var(--sp-6);flex-grow:1}
.pillar .go{display:inline-flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70)}
.pillar .count{font-size:var(--fs-small);color:var(--grey-70)}
.pillar .go::after{content:"\2192";transition:transform .15s ease}
a.pillar:hover{border-color:var(--mz-black)}
a.pillar:hover h3{color:var(--mz-red)}
a.pillar:hover .icon{color:var(--mz-red)}
a.pillar:hover .go{color:var(--mz-black)}
a.pillar:hover .go::after{transform:translateX(3px)}

/* ---------- process flow: numbered steps connected by a line, no photos ---------- */
.process-flow{position:relative;display:grid;grid-template-columns:1fr;gap:var(--sp-7);margin-top:var(--sp-7)}
@media(min-width:860px){.process-flow{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}
.process-line{display:none}
@media(min-width:860px){
  .process-line{display:block;position:absolute;top:20px;left:20px;right:20px;height:1px;
    background:var(--grey-40);z-index:0}
}
.process-step{position:relative;z-index:1}
.process-step .n-circle{width:40px;height:40px;border-radius:50%;border:1px solid var(--mz-black);
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:var(--fs-small);margin-bottom:var(--sp-5)}
.process-step h3{font-family:var(--serif);font-size:var(--fs-h3);line-height:var(--lh-sub);
  margin-bottom:var(--sp-3)}
.process-step p{color:var(--ink-body);font-size:var(--fs-small)}

/* three-column variant of the homepage pillars, for pages with three items instead of four */
@media(min-width:1080px){.pillars.cols-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- product detail pages: white body, distinct from the paper tone elsewhere ---------- */
body.product-page{background:#fff}
/* the product hero picks up the paper tone the category page used to sit on, one step
   lighter than the mid-grey it had before, so it reads softer against the white body below */
body.product-page .page-head{background:var(--paper)}

/* ---------- category hub pages: white body, matching the product pages below them ---------- */
body.category-page{background:#fff}


/* ---------- service note: a service, not a product listing, so it sits apart from the pillars grid ---------- */
.service-note{background:var(--grey-05);border:var(--border);margin-top:var(--sp-6)}
.service-note-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);
  padding:var(--sp-6);color:var(--mz-black)}
.service-note .icon{height:44px;width:44px;color:var(--mz-black);flex-shrink:0}
.service-note .txt{flex:1;min-width:220px}
.service-note .txt h3{font-family:var(--serif);font-size:var(--fs-h4);line-height:var(--lh-sub);
  margin-bottom:var(--sp-2)}
.service-note .txt p{font-size:var(--fs-small);color:var(--ink-body);margin-bottom:var(--sp-0)}
.service-note .go{display:inline-flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--grey-70);white-space:nowrap}
.service-note .go::after{content:"\2192";transition:transform .15s ease}
a.service-note-inner:hover{color:var(--mz-black)}
a.service-note-inner:hover .icon{color:var(--mz-red)}
a.service-note-inner:hover .txt h3{color:var(--mz-red)}
a.service-note-inner:hover .go{color:var(--mz-black)}
a.service-note-inner:hover .go::after{transform:translateX(3px)}

/* ---------- cookie consent banner ---------- */
.consent-bar{position:fixed;inset-inline:0;bottom:0;z-index:100;background:var(--mz-black);
  border-top:1px solid var(--line-dark);color:var(--on-dark-mute)}
.consent-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-5);padding-block:var(--sp-5)}
.consent-bar p{margin:0;font-size:var(--fs-small);max-width:var(--measure);color:var(--on-dark-mute)}
.consent-bar a{color:var(--on-dark);border-bottom:1px solid transparent}
.consent-bar a:hover{border-bottom-color:var(--on-dark)}
.consent-actions{display:flex;gap:var(--sp-4);flex-shrink:0}
.consent-actions button{font-family:var(--sans);font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);text-transform:uppercase;padding:var(--sp-4) var(--sp-6);
  cursor:pointer;border:1px solid var(--field-line-dark)}
.consent-decline{background:transparent;color:var(--on-dark-mute)}
.consent-decline:hover{color:var(--on-dark);border-color:var(--on-dark)}
.consent-accept{background:var(--on-dark);color:var(--mz-black);border-color:var(--on-dark)}
.consent-accept:hover{background:var(--mz-red);border-color:var(--mz-red);color:var(--accent-fg)}
@media(max-width:659px){
  .consent-inner{flex-direction:column;align-items:stretch}
  .consent-actions{justify-content:stretch}
  .consent-actions button{flex:1}
}

/* ---------- homepage project slider: one project in view, scroll snapped,
   with arrow controls and dots. the full /projects page stays a plain list,
   since that page's job is to show everything rather than tease a few. ---------- */
.folio.slider{position:relative;gap:0}
.folio.slider .slider-track{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:var(--sp-8);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.folio.slider .slider-track::-webkit-scrollbar{display:none}
.folio.slider .folio-item{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.folio.slider .folio-item .shot{margin-inline:0;width:auto}
@media(max-width:899px){
  .folio.slider .folio-item .shot{margin-inline:38px}
}
.slider-nav{display:flex;align-items:center;justify-content:center;
  position:absolute;top:calc(var(--h-folio) / 2);transform:translateY(-50%);
  width:var(--touch);height:var(--touch);background:none;border:0;
  color:var(--grey-70);cursor:pointer;z-index:2;transition:color .15s ease}
.slider-nav .icon{height:28px;width:28px}
.slider-nav:hover{color:var(--mz-red)}
.slider-prev{left:var(--sp-2)}
.slider-next{right:var(--sp-2)}
@media(max-width:899px){
  .slider-nav{width:36px;height:36px}
  .slider-nav .icon{height:26px;width:26px}
  .slider-prev{left:2px}
  .slider-next{right:2px}
}
@media(min-width:900px){
  .slider-prev{left:calc(-1 * var(--sp-9))}
  .slider-next{right:calc(-1 * var(--sp-9))}
}
.slider-nav[disabled]{opacity:.3;cursor:default;pointer-events:none}
.slider-dots{display:flex;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-6)}
.slider-dots button{width:var(--dot);height:var(--dot);padding:0;border-radius:50%;
  border:0;background:var(--grey-40);cursor:pointer}
.slider-dots button[aria-current="true"]{background:var(--mz-red)}

/* ---------- See all projects, moved below the slider block ---------- */
.section-head-solo{justify-content:flex-start}
.slider-all-wrap{text-align:center;margin-top:var(--sp-6)}
.slider-all-wrap .link-arrow{display:inline-flex}

/* ---------- subtle inline text links: for links embedded in body prose,
   where the site's default saturated red reads as too much noise clustered
   together. text-colored with a thin underline; red only on hover. ---------- */
.text-link{color:inherit;border-bottom:1px solid var(--grey-40)}
.text-link:hover{color:var(--mz-red);border-bottom-color:var(--mz-red)}

/* ---------- LinkedIn badge inline with a heading ---------- */
.linkedin-badge{display:inline-flex;vertical-align:middle;margin-top:-0.15em;margin-inline:var(--sp-2);
  color:var(--mz-black);border:0}
.linkedin-badge .icon{width:0.62em;height:0.62em}
.linkedin-badge:hover{color:var(--mz-red);border:0}

/* ---------- draft mockup: thin category hero with a centered icon instead of a photo ---------- */
.hero-split-icon{min-height:0}
@media(min-width:900px){.hero-split-icon{grid-template-columns:3fr 1fr}}
.hero-split-icon .panel{padding-block:var(--sp-6)}
.hero-split-icon .panel h1{max-width:none}
.hero-split-icon .panel .lead{max-width:none}
@media(min-width:1200px){
  .hero-split-icon .panel h1{white-space:nowrap}
  .hero-split-icon .panel .lead{white-space:nowrap}
}
.hero-split-icon .icon-zone{background:var(--grey-05);display:flex;align-items:center;
  justify-content:center;min-height:160px}
.hero-split-icon .icon-zone .icon{width:96px;height:96px;color:var(--mz-black)}

/* ---------- draft mockup v2: icon inline before the title, no rule, single column ---------- */
.hero-split-icon2{min-height:0}
@media(min-width:900px){.hero-split-icon2{grid-template-columns:1fr}}
.hero-split-icon2 .panel{padding-block:var(--sp-6)}
.hero-split-icon2 .panel h1{max-width:none}
.hero-split-icon2 .panel .lead{max-width:none;margin-top:var(--sp-4)}
.hero-split-icon2 .title-row{display:flex;align-items:center;gap:var(--sp-4)}
.hero-split-icon2 .title-row .icon{width:56px;height:56px;color:var(--mz-black);flex-shrink:0}
@media(min-width:1200px){
  .hero-split-icon2 .panel h1{white-space:nowrap}
  .hero-split-icon2 .panel .lead{white-space:nowrap}
}
.hero-split-icon2 + section{padding-top:var(--sp-5)}