/* ==========================================================================
   VYGN Joinery Installation: site styles (redesign v2, "Installed to plan")
   Layout: photo-led commercial portfolio; hero head over a pinned, scroll-driven
   install story, flat service index, filterable gallery, process band, contact.
   Static, no build step. Every colour comes from a token in section 1.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --paper:#EDEDE9; --surface:#F7F7F4; --ink:#191C1F; --ink-2:#565C61; --line:#D2D3CD;
  --plan:#2448A6; --on-plan:#FFFFFF; --plan-soft:rgba(36,72,166,.10); --film:rgba(70,130,225,.30);
  --field:#FFFFFF; --ok:#1E7A4A; --err:#B42318; --shade:rgba(10,12,14,.62);
  --band:#191C1F;                          /* process band ground */
  --bp-ground:#2448A6; --bp-line:#FFFFFF;  /* story drawing: a real blueprint in both themes */
  /* Install-story scene materials, matched to the hero photo (light oak, grey-green stone, pale sage wall) */
  --sc-wall:#D5D9D3; --sc-floor:#CBB596;
  --sc-oak-1:#CDB18E; --sc-oak-2:#AD8F6C; --sc-oak-3:#7F6449;   /* faces, sides, edges */
  --sc-white:#F4F3EF; --sc-stone:#A3A79E; --sc-vein:rgba(58,66,60,.5);  /* carcass melamine; stone and its veins */
  --sc-metal:#55595D; --sc-edge:#4B4038; --sc-shade:rgba(46,36,26,.1);  /* handles, legs, screws; edges; shading */
  --sc-laser:#16D35C; --sc-led:#FFD88F;
  /* Logo (header and footer): brand navy and tan. In the dark theme, and on any dark band, the navy turns off-white */
  --logo-ink:#3E4860; --logo-tan:#D2B496; --logo-grain:#EEDFCC; --logo-light:#F4F4F2;
  --f-display:"Archivo","Arial Black",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;

  /* Layout and motion (not colours) */
  --max:1240px; --max-wide:1400px;
  --gutter-l:max(20px, env(safe-area-inset-left, 0px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px));
  --header-h:72px;
  --r:2px;
  --section-y:clamp(72px, 9vw, 120px);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#111315; --surface:#181B1E; --ink:#ECEDE9; --ink-2:#A3A9AE; --line:#2B3034;
  --plan:#8FB0F5; --on-plan:#0E1420; --plan-soft:rgba(143,176,245,.12); --film:rgba(110,160,240,.26);
  --field:#111315; --ok:#4CC38A; --err:#F97066; --shade:rgba(0,0,0,.66);
  --band:#181B1E;
  --sc-wall:#AFB4AE; --sc-floor:#A8937A;
  --sc-oak-1:#B69B79; --sc-oak-2:#957B5D; --sc-oak-3:#6B5540;
  --sc-white:#DAD9D4; --sc-stone:#8D9189; --sc-vein:rgba(40,46,42,.55);
  --sc-metal:#45494D; --sc-edge:#2F2924; --sc-shade:rgba(0,0,0,.12);
  --sc-laser:#2EE872; --sc-led:#FFD487;
  --logo-ink:#F4F4F2;
  color-scheme:dark; } }
:root[data-theme="dark"] {
  --paper:#111315; --surface:#181B1E; --ink:#ECEDE9; --ink-2:#A3A9AE; --line:#2B3034;
  --plan:#8FB0F5; --on-plan:#0E1420; --plan-soft:rgba(143,176,245,.12); --film:rgba(110,160,240,.26);
  --field:#111315; --ok:#4CC38A; --err:#F97066; --shade:rgba(0,0,0,.66);
  --band:#181B1E;
  --sc-wall:#AFB4AE; --sc-floor:#A8937A;
  --sc-oak-1:#B69B79; --sc-oak-2:#957B5D; --sc-oak-3:#6B5540;
  --sc-white:#DAD9D4; --sc-stone:#8D9189; --sc-vein:rgba(40,46,42,.55);
  --sc-metal:#45494D; --sc-edge:#2F2924; --sc-shade:rgba(0,0,0,.12);
  --sc-laser:#2EE872; --sc-led:#FFD487;
  --logo-ink:#F4F4F2;
  color-scheme:dark;
}
@media (max-width: 759.98px) { :root { --header-h:64px; } }

/* 2. Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
html:has(dialog[open]) { overflow:hidden; }
body {
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.0625rem; /* 17px */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
/* Notch band: keeps content from showing above the sticky header on iOS */
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); background:var(--paper); z-index:30; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend { margin:0; }
:where(ul[role="list"], ol[role="list"]) { list-style:none; padding:0; }
img, picture, video, canvas { display:block; max-width:100%; height:auto; }
input, button, textarea, select { font:inherit; color:inherit; letter-spacing:inherit; }
button { cursor:pointer; }
a { color:inherit; }
[hidden] { display:none !important; }
::selection { background:var(--plan); color:var(--on-plan); }

/* One visible focus ring everywhere: 3px blueprint blue, offset */
:focus-visible { outline:3px solid var(--plan); outline-offset:3px; }
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline:none; }
/* Keep focused things clear of the sticky header and the mobile call button */
:where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-top:calc(var(--header-h) + 16px);
  scroll-margin-bottom:24px;
}
@media (max-width: 759.98px) {
  :where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-bottom:96px; }
}

/* 3. Utilities ------------------------------------------------------------- */
.visually-hidden {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}
.wrap { width:100%; max-width:var(--max); margin-inline:auto; }
.wrap--wide { max-width:var(--max-wide); }
.icon {
  width:1.5em; height:1.5em; flex:none; display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.skip-link {
  position:absolute; z-index:60;
  left:calc(12px + env(safe-area-inset-left, 0px)); top:calc(12px + env(safe-area-inset-top, 0px));
  padding:12px 18px; border-radius:var(--r);
  background:var(--plan); color:var(--on-plan); font-weight:700; text-decoration:none;
  transform:translateY(calc(-100% - 40px));
}
.skip-link:focus { transform:none; outline-color:var(--ink); }

/* 4. Type ------------------------------------------------------------------ */
h1, h2 { font-family:var(--f-display); color:var(--ink); text-wrap:balance; }
h1 {
  font-size:clamp(2.35rem, 1rem + 4.2vw, 4.6rem);
  line-height:.98;
  font-weight:800;
  font-stretch:106%;
  letter-spacing:-.022em;
}
h2 {
  font-size:clamp(2rem, 1.3rem + 2.3vw, 3.25rem);
  line-height:1.03;
  font-weight:800;
  font-stretch:106%;
  letter-spacing:-.02em;
}
h3 {
  font-family:var(--f-display);
  font-size:1.25rem;
  line-height:1.25;
  font-weight:700;
  font-stretch:100%;
  letter-spacing:-.005em;
  text-wrap:balance;
}
p, li, dd, figcaption { text-wrap:pretty; }
.eyebrow {
  display:flex; align-items:center; gap:10px;
  margin-bottom:1.1rem;
  font-family:var(--f-mono); font-weight:700; font-size:.75rem; line-height:1.4;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
/* A tiny dimension mark |--| in blueprint blue */
.eyebrow::before {
  content:""; flex:none;
  width:22px; height:9px;
  border-inline:1.5px solid var(--plan);
  background:linear-gradient(var(--plan), var(--plan)) center / 100% 1.5px no-repeat;
}
.lead { font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height:1.6; color:var(--ink-2); }
.fig-tag {
  flex:none;
  font-family:var(--f-mono); font-weight:700; font-size:.6875rem; line-height:1.6;
  letter-spacing:.08em; text-transform:uppercase; color:var(--plan);
}

/* 5. Buttons --------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px; padding:.6rem 1.3rem;
  border:1.5px solid var(--ink); border-radius:var(--r);
  background:transparent; color:var(--ink);
  font-family:var(--f-body); font-size:1rem; font-weight:650; line-height:1.2;
  text-align:center; text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn .icon { width:1.2em; height:1.2em; }
.btn-primary { background:var(--plan); border-color:var(--plan); color:var(--on-plan); }
.btn-primary:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-secondary { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover { background:var(--ink); color:var(--paper); }
.btn-sm { min-height:44px; padding:.45rem .95rem; font-size:.9375rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.btn-primary:disabled:hover { background:var(--plan); border-color:var(--plan); color:var(--on-plan); }

/* 6. Header ---------------------------------------------------------------- */
.site-header {
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
  transition:border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color:var(--ink); }
/* Wraps (button row below the brand) instead of overlapping when text is enlarged */
.header-inner {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 10px;
  min-height:var(--header-h); padding-block:8px;
}
.brand {
  display:inline-flex; align-items:center; gap:10px;
  margin-right:auto; min-width:0;
  color:var(--ink); text-decoration:none;
  border-radius:var(--r);
}
/* The logo lockup, inlined (tools/vygn-logo.svg). Its height sets its width; the header keeps its own height. */
.brand-logo { --logo-h:40px; display:block; flex:none; height:var(--logo-h); width:calc(var(--logo-h) * 2.9425); }
.brand-logo .lg-ink { fill:var(--logo-ink); }
.brand-logo .lg-tan { fill:var(--logo-tan); }
.brand-logo .lg-grain { fill:var(--logo-grain); }
/* A dark band that holds the logo: add this class to it */
.on-dark { --logo-ink:var(--logo-light); }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.site-nav a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  color:var(--ink); font-weight:600; font-size:.9375rem; text-decoration:none;
  border-radius:var(--r);
  text-decoration-thickness:2px; text-underline-offset:8px; text-decoration-color:var(--plan);
}
.site-nav a:hover { text-decoration-line:underline; }
.header-cta { margin-left:6px; }
.nav-toggle {
  display:none; align-items:center; gap:6px;
  min-height:44px; padding:0 12px;
  border:1.5px solid var(--ink); border-radius:var(--r);
  background:transparent; color:var(--ink);
  font-weight:650; font-size:.9375rem; line-height:1;
}
.nav-toggle .icon { width:1.2em; height:1.2em; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display:none; }
.nav-toggle[aria-expanded="true"] .icon-close { display:inline-block; }
.nav-toggle[aria-expanded="true"] { background:var(--ink); color:var(--paper); }
.header-cta, .nav-toggle, .site-header--sub .btn { white-space:nowrap; }
.header-cta, .nav-toggle, .site-header--sub .btn { flex:none; }

@media (max-width: 759.98px) {
  .nav-toggle { display:inline-flex; }
  .header-cta { margin-left:0; }
  .site-nav {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    border-top:1px solid var(--line);
    border-bottom:1.5px solid var(--ink);
    padding:4px var(--gutter-r) 12px var(--gutter-l);
  }
  .site-nav.is-open { display:block; }
  /* Fade the page under the open menu. Clicks pass through, so a tap outside still closes it (main.js). */
  .site-nav.is-open::after {
    content:""; position:absolute; left:0; right:0; top:calc(100% + 1.5px);
    height:100vh; background:var(--paper); opacity:.86; pointer-events:none;
  }
  .site-nav ul { flex-direction:column; align-items:stretch; gap:0; max-width:var(--max); margin-inline:auto; }
  .site-nav li + li { border-top:1px solid var(--line); }
  .site-nav a { display:flex; min-height:52px; padding:0; font-size:1.0625rem; }
}
@media (max-width: 759.98px) { .site-header .brand-logo { --logo-h:36px; } }
/* Narrowest phones: room for the subpages' "Send your plans" button beside the full lockup */
@media (max-width: 359.98px) { .site-header .brand-logo { --logo-h:32px; } }
/* Below 420px the hero's own buttons sit right under the header and the call button floats */
@media (max-width: 419.98px) { .header-cta { display:none; } }
@media (max-width: 359.98px) {
  .nav-toggle-label {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
}

/* 7. Hero head ------------------------------------------------------------- */
/* The install story (section 8) follows straight on: the head's own margin is the gap. */
.hero {
  padding-block:clamp(28px, 4.5vw, 60px) 0;
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
}
.hero-head {
  display:grid; gap:22px 56px; align-items:end;
  margin-bottom:clamp(28px, 4vw, 48px);
}
.hero-title { min-width:0; }
.h1-line { display:block; }
.h1-accent { color:var(--plan); }
.hero-side { min-width:0; max-width:38rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
@media (min-width: 1000px) {
  .hero-head { grid-template-columns:minmax(0, 1fr) minmax(0, 27rem); }
}
@media (max-width: 599.98px) {
  h1 { font-stretch:100%; }
  .hero-actions .btn { flex:1 1 100%; }
}

/* 8. Install story --------------------------------------------------------- */
/* #install-story, under the hero head: the joinery goes up piece by piece as the visitor scrolls.
   Follow the plans → install with care → photo evidence → lay protection.
   main.js sets --p (0..1, the whole story) on the section and an eased --t (0..1) on every element
   with data-from/data-to (its window, as fractions of the story). The rules below turn --t into
   movement, using transform, opacity, stroke-dashoffset and clip-path only.
   The markup's default is the static FINAL state: no tall track, nothing pinned, every --t at 1
   (photo, evidence tag and film showing; the four chapters as plain text). No-JS, reduced-motion and
   print visitors get that. main.js adds .is-live (a tall track and a sticky viewport) only when
   motion is allowed, and the live rules (8d) also need a screen with no reduced-motion preference. */
@property --t { syntax:"<number>"; inherits:true; initial-value:1; }
/* --p does not inherit: changing it on the section then restyles only the section, not every part of the
   scene (about 4x less style work per frame). main.js also sets it on .story-rail-fill, its one reader. */
@property --p { syntax:"<number>"; inherits:false; initial-value:1; }

/* 8a. Static layout (the default) */
.story {
  position:relative;
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
  padding-bottom:clamp(48px, 6vw, 80px);
}
.story-layout {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:28px;
  max-width:var(--max); margin-inline:auto; /* lines up with the header and the hero head */
}
.story-narrative { min-width:0; }
.story-figure { order:-1; min-width:0; margin:0; } /* phones and portrait tablets: the picture first */
@media (min-width: 960px), (min-width: 640px) and (min-aspect-ratio: 4/3) {
  .story-layout { grid-template-columns:minmax(0, 32fr) minmax(0, 68fr); align-items:center; column-gap:clamp(28px, 3.6vw, 56px); }
  .story-figure { order:0; }
}
.story-skip { display:none; }
.story-title { margin-bottom:1.25rem; } /* an h2 in the .eyebrow style */
.story-rail { display:none; }
.story-steps { display:grid; gap:20px; margin:0; padding:0; list-style:none; }
.story-step { --sn-bg:transparent; --sn-fg:var(--plan); --sn-bd:var(--plan); min-width:0; }
.ss-head {
  display:flex; align-items:center; gap:14px;
  font-size:1.125rem; line-height:1.25; color:var(--ink);
}
.ss-n {
  flex:none; display:grid; place-items:center;
  width:30px; height:30px;
  border:1.5px solid var(--sn-bd); border-radius:var(--r);
  background:var(--sn-bg); color:var(--sn-fg);
  font-family:var(--f-mono); font-weight:700; font-size:.75rem; line-height:1;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ss-tick { display:none; width:16px; height:16px; stroke-width:2.6; }
.ss-title { min-width:0; }
.ss-text { margin-top:8px; padding-left:44px; max-width:34em; font-size:1rem; line-height:1.55; color:var(--ink-2); }

.story-stage {
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:16 / 10;
  background:var(--bp-ground);
  border-radius:var(--r);
}
@media (max-width: 599.98px) { .story-stage { aspect-ratio:4 / 3; } }
.story-caption {
  display:flex; align-items:baseline; gap:12px;
  margin-top:12px;
  font-size:.875rem; line-height:1.45; color:var(--ink-2);
}

/* 8b. The scene (inline SVG from tools/install-scene.svg, built by tools/install-scene.mjs) and its
   animation contract. Every animated part carries data-from/data-to; main.js sets --t on it, CSS moves it.
   Without JS every --t is 1, which is each part's finished state. Pieces carry their start offset inline
   (--x, --y in viewBox units, --r) and, where they pivot, an inline transform-origin with transform-box:view-box. */
.scene { position:absolute; inset:0; width:100%; height:100%; display:block; background:var(--sc-wall); }
.story [data-from] { --t:1; } /* fallback for browsers without @property; main.js overrides it inline */
/* Blueprint ground: fades to the wall colour underneath (the svg's own background) */
.sc-ground { fill:var(--bp-ground); opacity:calc(1 - var(--t)); }
.sc-grid { opacity:calc(1 - var(--t)); }
/* Plan linework (pathLength="1") draws itself; dashed ghosts of each piece fade in with it */
.sc-plan path:not(.sc-ghost, .sc-ghost *), .sc-plan [pathLength]:not(.sc-ghost, .sc-ghost *) {
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--t));
}
.sc-ghost { opacity:var(--t); }
/* Laser line: slides in from --x0 (its start offset); fixing marks pop in as it passes */
.sc-laser { transform:translateX(calc(var(--x0, 0px) * (1 - var(--t)))); opacity:clamp(0, var(--t) * 6, 1); }
.sc-mark {
  transform-box:fill-box; transform-origin:50% 50%;
  transform:scale(calc(.2 + .8 * var(--t))); opacity:var(--t);
}
/* A piece of joinery travels home from its offset (inline --x, --y, --r; pivot --o) */
.sc-piece {
  transform-box:fill-box; transform-origin:var(--o, 50% 50%);
  transform:translate(calc(var(--x, 0px) * (1 - var(--t))), calc(var(--y, 0px) * (1 - var(--t)))) rotate(calc(var(--r, 0deg) * (1 - var(--t))));
  opacity:clamp(0, var(--t) * 4, 1);
}
/* A door swings shut onto its carcass about its hinge edge (left unless data-hinge="right") */
.sc-door {
  transform-box:fill-box; transform-origin:var(--hinge, 0%) 50%;
  transform:scaleX(calc(.15 + .85 * var(--t)));
  opacity:clamp(0, var(--t) * 8, 1);
}
.sc-door[data-hinge="right"] { --hinge:100%; } /* the scene also pins each door's hinge inline (transform-origin) */
/* Screw heads pop and turn as their piece lands */
.sc-fix {
  transform-box:fill-box; transform-origin:50% 50%;
  transform:rotate(calc((1 - var(--t)) * -300deg)) scale(calc(.4 + .6 * var(--t)));
  opacity:clamp(0, var(--t) * 4, 1);
}
/* Level check: drops onto the run; its bubble settles in the middle */
.sc-level { opacity:clamp(0, var(--t) * 3, 1); transform:translateY(calc((1 - var(--t)) * -16px)); }
.sc-level .sc-bubble { transform:translateX(calc(var(--b, 18px) * (1 - var(--t)))); }
/* 2 mm gap ticks pop in as each door closes; their .sc-out group clears them once the doors are on */
.sc-gap { opacity:clamp(0, var(--t) * 3, 1); }
.sc-led { opacity:var(--t); }
/* Generic helpers, for scene parts and the HTML layers alike */
.sc-in { opacity:var(--t); }
.sc-out { opacity:calc(1 - var(--t)); }
/* Camera: once the drawing has become the room, it moves in on the joinery (origin: the joinery's centre,
   in viewBox units). Side by side only: there the whole 16:10 sheet shows, while the stacked stage is
   about square and already cropped close. */
@media (min-width: 960px), (min-width: 640px) and (min-aspect-ratio: 4/3) {
  .sc-cam { transform-box:view-box; transform-origin:808px 540px; transform:scale(calc(1 + .3 * var(--t))); }
}

/* 8c. HTML layers over the scene: photo, photo record, protection film */
/* The real photo wipes in left to right over the finished drawing, with a bright scan edge */
.story-photo {
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit:cover; object-position:var(--story-photo-pos, 50% 50%);
  clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0);
}
.story-scan {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  transform:translateX(calc((var(--t) - 1) * 100%));
  opacity:clamp(0, min(var(--t), 1 - var(--t)) * 14, 1);
}
.story-scan::after {
  content:""; position:absolute; top:0; bottom:0; right:0; width:2px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(36,72,166,.35), 0 0 18px 3px rgba(143,176,245,.65);
}
/* Photo record: viewfinder corners close in, a flash, then the evidence tag (the corners then fade) */
.story-record { position:absolute; inset:0; z-index:5; pointer-events:none; }
.story-vf { position:absolute; inset:0; }
.vf {
  position:absolute;
  width:clamp(18px, 2.8vw, 36px); height:clamp(18px, 2.8vw, 36px);
  border:0 solid #FFFFFF;
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.6));
  opacity:clamp(0, var(--t) * 3, 1);
  transform:translate(calc(var(--vx) * (1 - var(--t))), calc(var(--vy) * (1 - var(--t))));
}
.vf-tl { top:6%; left:3.5%; border-top-width:3px; border-left-width:3px; --vx:-26px; --vy:-26px; }
.vf-tr { top:6%; right:3.5%; border-top-width:3px; border-right-width:3px; --vx:26px; --vy:-26px; }
.vf-bl { bottom:6%; left:3.5%; border-bottom-width:3px; border-left-width:3px; --vx:-26px; --vy:26px; }
.vf-br { bottom:6%; right:3.5%; border-bottom-width:3px; border-right-width:3px; --vx:26px; --vy:26px; }
.story-flash { position:absolute; inset:0; background:#FFFFFF; opacity:calc(clamp(0, min(var(--t) * 6, (1 - var(--t)) * 1.5), 1) * .85); }
.story-tag {
  position:absolute; top:calc(6% + 14px); left:calc(3.5% + 14px);
  display:inline-flex; align-items:center; gap:8px;
  max-width:calc(93% - 28px);
  margin:0; padding:6px 12px 6px 6px;
  background:#FFFFFF; color:#191C1F;
  border-radius:var(--r);
  box-shadow:0 1px 3px rgba(10,12,14,.3);
  font-family:var(--f-mono); font-weight:700; font-size:.6875rem; line-height:1.3;
  letter-spacing:.05em; text-transform:uppercase;
  opacity:clamp(0, var(--t) * 2.5, 1);
  transform:translateY(calc((1 - var(--t)) * -12px)) scale(calc(.94 + .06 * var(--t)));
  transform-origin:0 0;
}
.tag-tick { width:22px; height:22px; padding:4px; border-radius:50%; background:#1E7A4A; color:#FFFFFF; stroke-width:2.6; }
/* Protection film rolls down over the lower 45%; the PROTECTED tape runs along its top edge */
.story-film {
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:45%;
  background-color:var(--film);
  border-top:1px solid rgba(255,255,255,.6);
  clip-path:inset(0 0 calc((1 - var(--t)) * 100%) 0);
}
.story-film::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(112deg, transparent 0 14%, rgba(255,255,255,.22) 19%, transparent 25%, transparent 57%, rgba(255,255,255,.13) 61%, transparent 67%);
}
.story-tape {
  position:absolute; left:-2%; right:-2%; top:0; z-index:1;
  display:flex; align-items:center; gap:2.2em;
  height:26px; margin:0; padding-left:2.4em;
  overflow:hidden; white-space:nowrap;
  background:var(--plan); color:var(--on-plan);
  font-family:var(--f-mono); font-weight:700; font-size:11px; line-height:1; letter-spacing:.26em;
  box-shadow:0 1px 0 rgba(10,12,14,.2);
  clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0);
}
/* The roll the film comes off: rides the film's leading edge, gone once the sheet is down */
.story-roll {
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:45%; pointer-events:none;
  transform:translateY(calc(var(--t) * 100%));
  opacity:clamp(0, min(var(--t), 1 - var(--t)) * 16, 1);
}
.story-roll::before {
  content:""; position:absolute; left:-1%; right:-1%; top:-9px; height:18px;
  border-radius:9px;
  background:linear-gradient(rgba(255,255,255,.85), rgba(176,202,240,.92) 38%, rgba(84,124,200,.9) 78%, rgba(44,74,140,.9));
  box-shadow:0 4px 8px rgba(10,12,14,.25);
}
/* Static story only (main.js shows it): swap the photo for the finished drawing */
.story-toggle {
  position:absolute; right:clamp(10px, 2vw, 18px); bottom:clamp(10px, 2vw, 18px); z-index:7;
  min-height:40px; padding:.4rem .9rem;
  background:#FFFFFF; border-color:#FFFFFF; color:#191C1F;
  box-shadow:0 1px 3px rgba(10,12,14,.3);
  font-size:.875rem;
}
.story-toggle:hover, .story-toggle[aria-pressed="true"] { background:#191C1F; border-color:#191C1F; color:#FFFFFF; }
/* The global blue ring vanishes on the blueprint and the pale photo: white gap, dark ring, white halo */
.story-toggle:focus-visible { outline:3px solid #191C1F; outline-offset:2px; box-shadow:0 0 0 8px #FFFFFF; }
.story-stage.is-drawing :is(.story-photo, .story-scan, .story-record, .story-film, .story-roll) { visibility:hidden; }

/* 8d. Live story: a tall track and a sticky viewport (main.js adds .is-live) */
@media screen and (prefers-reduced-motion: no-preference) {
  /* The pinned viewport centres its content, which already leaves room above it */
  .hero:has(+ .story.is-live) .hero-head { margin-bottom:0; }
  .story.is-live { padding-bottom:clamp(16px, 3vw, 40px); }
  .story.is-live .story-track { position:relative; height:340vh; }
  .story.is-live .story-sticky {
    position:sticky; top:var(--story-top, var(--header-h));
    height:calc(100vh - var(--story-top, var(--header-h)));
    height:calc(100svh - var(--story-top, var(--header-h)));
    display:flex; flex-direction:column; justify-content:center;
    padding-block:clamp(10px, 2.4vh, 28px);
  }
  .story.is-live .sc-piece, .story.is-live .sc-door { will-change:transform; }
  .story.is-live .story-toggle { display:none; }

  /* Skip link: hidden until it has keyboard focus */
  .story.is-live .story-skip {
    display:block; position:absolute; z-index:8; left:var(--gutter-l); top:10px;
    padding:10px 16px; border-radius:var(--r);
    background:var(--plan); color:var(--on-plan);
    font-weight:700; text-decoration:none;
  }
  .story.is-live .story-skip:not(:focus) {
    width:1px; height:1px; padding:0; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .story.is-live .story-skip:focus { outline-color:var(--ink); }

  /* Stacked (phones, portrait tablets): picture on top; it takes the height the narrative leaves */
  .story.is-live .story-layout { display:flex; flex-direction:column; gap:14px; width:100%; min-height:0; max-height:100%; }
  .story.is-live .story-figure { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; }
  .story.is-live .story-stage {
    aspect-ratio:auto; min-height:150px;
    flex:0 1 min(calc(100vw - 40px), calc((100vh - var(--story-top, var(--header-h))) * .56));
    flex:0 1 min(calc(100vw - 40px), calc((100svh - var(--story-top, var(--header-h))) * .56));
  }
  .story.is-live .story-caption { flex:none; margin-top:10px; }
  .story.is-live .story-narrative { flex:none; }
  .story.is-live .story-title {
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }

  /* Narrative: progress rail, the four chapters (current one highlighted), the current sub-caption */
  .story.is-live .story-rail { display:block; position:relative; height:3px; margin-bottom:12px; background:var(--line); overflow:hidden; }
  .story.is-live .story-rail-fill { position:absolute; inset:0; background:var(--plan); transform:scaleX(var(--p)); transform-origin:0 50%; }
  .story-rail-tick { position:absolute; top:0; bottom:0; z-index:1; width:3px; margin-left:-1.5px; background:var(--paper); }
  .story.is-live .story-steps { gap:4px 12px; }
  .story.is-live .story-step { color:var(--ink-2); --sn-bd:currentColor; --sn-fg:currentColor; }
  .story.is-live .story-step.is-current { color:var(--ink); --sn-bd:var(--plan); --sn-bg:var(--plan); --sn-fg:var(--on-plan); }
  .story.is-live .story-step.is-complete { --sn-bd:var(--ink); --sn-bg:var(--ink); --sn-fg:var(--paper); }
  .story.is-live .story-step.is-complete .ss-num { display:none; }
  .story.is-live .story-step.is-complete .ss-tick { display:block; }
  .story.is-live .ss-head { font-size:.9375rem; line-height:1.2; color:inherit; transition:color .25s ease; }
  .story.is-live .ss-n { width:26px; height:26px; }
  .ss-btn {
    display:flex; align-items:center; gap:10px;
    width:100%; min-height:44px; margin:0; padding:4px 6px 4px 0;
    border:0; border-radius:var(--r);
    background:none; color:inherit;
    font:inherit; line-height:inherit; letter-spacing:inherit; text-align:left;
  }
  .ss-btn:hover .ss-title { text-decoration:underline; text-decoration-color:var(--plan); text-decoration-thickness:2px; text-underline-offset:4px; }
  .story.is-live .ss-text {
    display:grid; margin-top:10px; padding-left:0; max-width:32em;
    font-size:clamp(1.0625rem, .98rem + .3vw, 1.25rem); line-height:1.5; color:var(--ink);
    transition:opacity .35s ease .14s; /* outgoing text fades first (below), then this one comes in */
  }
  .story.is-live .story-step:not(.is-current) .ss-text { opacity:.55; transition:opacity .14s ease; } /* no subgrid: every chapter keeps its text */
  /* Beats stack in one cell, so a chapter's text never changes height while it plays */
  .story.is-live .ss-beat { grid-area:1 / 1; opacity:0; transition:opacity .14s ease; }
  .story.is-live .ss-beat.is-on { opacity:1; transition:opacity .35s ease .14s; }

  /* With subgrid, the chapter heads share one grid and the current chapter's text sits in a single
     slot under them (its height is the tallest text's, so nothing moves while scrolling) */
  @supports (grid-template-rows: subgrid) {
    .story.is-live .story-steps { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:auto auto auto; }
    .story.is-live .story-step { grid-column:1 / -1; grid-row:1 / -1; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; pointer-events:none; }
    .story.is-live .ss-head { pointer-events:auto; min-width:0; }
    .story.is-live .story-step:nth-child(1) .ss-head { grid-area:1 / 1; }
    .story.is-live .story-step:nth-child(2) .ss-head { grid-area:1 / 2; }
    .story.is-live .story-step:nth-child(3) .ss-head { grid-area:2 / 1; }
    .story.is-live .story-step:nth-child(4) .ss-head { grid-area:2 / 2; }
    .story.is-live .ss-text { grid-area:3 / 1 / 4 / -1; }
    .story.is-live .story-step:not(.is-current) .ss-text { opacity:0; }
    .story.is-live .story-step.is-current .ss-text { pointer-events:auto; }
  }
  @media (min-width: 600px) {
    .story.is-live .ss-head { font-size:1rem; }
    /* One row of chapter heads leaves more room for the picture */
    .story.is-live .story-stage {
      flex-basis:min(calc(100vw - 40px), calc((100vh - var(--story-top, var(--header-h))) * .64));
      flex-basis:min(calc(100vw - 40px), calc((100svh - var(--story-top, var(--header-h))) * .64));
    }
    @supports (grid-template-rows: subgrid) {
      .story.is-live .story-steps { grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:auto auto; }
      .story.is-live .story-step:nth-child(n) .ss-head { grid-row:1; }
      .story.is-live .story-step:nth-child(3) .ss-head { grid-column:3; }
      .story.is-live .story-step:nth-child(4) .ss-head { grid-column:4; }
      .story.is-live .ss-text { grid-area:2 / 1 / 3 / -1; }
    }
  }
  /* Phones: leave room for the call button under the narrative when the screen is tall enough
     (shorter ones tuck the button away while it would cover the narrative: main.js initFab) */
  @media (max-width: 759.98px) and (min-height: 630px) {
    .story.is-live .story-sticky { padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  }
  /* Short screens: the caption goes (it stays for screen readers) so the picture keeps its size */
  @media (max-height: 700px) {
    .story.is-live .story-caption {
      position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
      clip-path:inset(50%); white-space:nowrap;
    }
  }

  /* Side by side (desktops, landscape tablets): narrative left, a 16:10 stage right, sized to fit */
  @media (min-width: 960px), (min-width: 640px) and (min-aspect-ratio: 4/3) {
    .story.is-live .story-track { height:420vh; }
    .story.is-live .story-layout { display:grid; max-height:none; gap:0 clamp(28px, 3.6vw, 56px); }
    .story.is-live .story-figure {
      display:block; justify-self:center;
      width:min(100%, calc((100vh - var(--story-top, var(--header-h)) - 112px) * 1.6));
      width:min(100%, calc((100svh - var(--story-top, var(--header-h)) - 112px) * 1.6));
    }
    .story.is-live .story-stage { aspect-ratio:16 / 10; flex:none; min-height:0; }
    .story.is-live .story-title { position:static; width:auto; height:auto; margin:0 0 1.1rem; overflow:visible; clip-path:none; white-space:normal; }
    .story.is-live .story-rail { margin-bottom:18px; }
    .story.is-live .ss-head { font-size:1.0625rem; }
    .story.is-live .ss-n { width:30px; height:30px; }
    .story.is-live .ss-text { margin-top:18px; }
    @supports (grid-template-rows: subgrid) {
      .story.is-live .story-steps { grid-template-columns:minmax(0, 1fr); grid-template-rows:repeat(4, auto) auto; }
      .story.is-live .story-step:nth-child(n) .ss-head { grid-column:1; }
      .story.is-live .story-step:nth-child(1) .ss-head { grid-row:1; }
      .story.is-live .story-step:nth-child(2) .ss-head { grid-row:2; }
      .story.is-live .story-step:nth-child(3) .ss-head { grid-row:3; }
      .story.is-live .story-step:nth-child(4) .ss-head { grid-row:4; }
      .story.is-live .ss-text { grid-area:5 / 1 / 6 / -1; }
    }
  }
}

/* 9. Sections -------------------------------------------------------------- */
.section {
  padding-block:var(--section-y);
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
  scroll-margin-top:var(--header-h);
}
.section-head { max-width:46rem; margin-bottom:clamp(32px, 4.6vw, 56px); }
.section-head h2 + .section-intro { margin-top:1.1rem; }
.section-intro { font-size:1.125rem; color:var(--ink-2); max-width:40em; }
.services, .work { border-top:1px solid var(--line); }

/* 9a. Services: flat index, one row per service */
.service-index { margin:0; padding:0; list-style:none; border-top:1.5px solid var(--ink); }
.service-index > li { border-bottom:1px solid var(--line); }
.service-link {
  display:grid;
  grid-template-columns:2.75rem minmax(0, 1fr) auto 9.5rem;
  grid-template-areas:"num name count thumb";
  align-items:center; column-gap:clamp(16px, 2.4vw, 32px);
  margin-inline:-12px; padding:14px 12px;
  color:var(--ink); text-decoration:none;
  transition:background-color .2s ease;
}
.service-num { grid-area:num; font-family:var(--f-mono); font-weight:500; font-size:.8125rem; line-height:1; letter-spacing:.04em; color:var(--ink-2); }
.service-name {
  grid-area:name;
  font-size:clamp(1.25rem, .95rem + 1.15vw, 1.9rem); line-height:1.12;
  font-weight:700; font-stretch:104%; letter-spacing:-.015em;
  transition:color .2s ease, transform .35s var(--ease-out);
}
.service-count {
  grid-area:count;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-weight:500; font-size:.8125rem; line-height:1.2;
  color:var(--ink-2); white-space:nowrap;
}
/* Arrow drawn with borders, so it adds nothing to the link's accessible name */
.service-count::after {
  content:""; width:8px; height:8px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease-out);
}
.service-thumb {
  grid-area:thumb;
  display:block; width:100%; aspect-ratio:3 / 2;
  overflow:hidden; border-radius:var(--r);
  background:var(--line);
  transition:transform .4s var(--ease-out);
}
.service-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease-out); }
.service-thumb--plan { display:grid; place-items:center; background:var(--plan); color:var(--on-plan); }
.service-thumb--plan .icon { width:42%; height:auto; aspect-ratio:1; stroke-width:1.2; }
.service-link:hover, .service-link:focus-visible { background:var(--surface); }
.service-link:hover .service-name, .service-link:focus-visible .service-name { color:var(--plan); transform:translateX(6px); }
.service-link:hover .service-count, .service-link:focus-visible .service-count { color:var(--ink); }
.service-link:hover .service-count::after, .service-link:focus-visible .service-count::after { transform:translateX(4px) rotate(45deg); }
.service-link:hover .service-thumb, .service-link:focus-visible .service-thumb { transform:translateX(-6px); }
.service-link:hover .service-thumb img, .service-link:focus-visible .service-thumb img { transform:scale(1.08); }
.service-link:focus-visible { outline-offset:0; }
@media (max-width: 759.98px) {
  .service-link {
    grid-template-columns:72px auto minmax(0, 1fr);
    grid-template-areas:"thumb name name" "thumb num count";
    column-gap:14px; row-gap:6px;
    padding-block:12px;
  }
  .service-thumb { aspect-ratio:1; align-self:center; }
  .service-name { align-self:end; font-size:1.125rem; line-height:1.2; }
  .service-num, .service-count { align-self:start; }
  .service-num::after { content:"·"; margin-left:8px; }
  .service-link:hover .service-name, .service-link:focus-visible .service-name { transform:none; }
  .service-link:hover .service-thumb, .service-link:focus-visible .service-thumb { transform:none; }
}

/* 9a2. Featured project: copy beside a contact-sheet mosaic of the project's photos.
   Five columns: the cover spans 4 x 3 cells and the other 13 photos are squares, so 14 photos close
   with no holes. The photos are 772 px proofs, so the cover stays well under 772 CSS px wide. */
.project { border-top:1px solid var(--line); }
.project-layout { display:grid; gap:clamp(32px, 4.6vw, 56px); align-items:start; }
@media (min-width: 1000px) {
  .project-layout { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(40px, 5vw, 72px); }
}
.project-copy { min-width:0; max-width:40rem; }
.project-copy h2 { margin-bottom:1.1rem; }
.project-text { font-size:1.0625rem; color:var(--ink-2); max-width:40em; }
.project-label {
  margin-top:28px;
  font-family:var(--f-mono); font-weight:700; font-size:.75rem; line-height:1.4;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.chip {
  display:inline-flex; align-items:center; gap:9px;
  min-height:36px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink);
  font-size:.9375rem; font-weight:600; line-height:1.2;
}
.chip::before { content:""; flex:none; width:7px; height:7px; background:var(--plan); }
.project-media { min-width:0; width:100%; max-width:760px; }
@media (min-width: 1000px) { .project-media { max-width:none; } }
.project-photos {
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px;
  margin:0; padding:0; list-style:none;
}
@media (min-width: 600px) { .project-photos { gap:8px; } }
.project-tile { position:relative; min-width:0; aspect-ratio:1; }
.project-tile.is-cover { grid-column:span 4; grid-row:span 3; aspect-ratio:auto; }
.project-tile .work-link { position:absolute; inset:0; }
.project-tile .work-link img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Smaller viewfinder corners on the small squares */
.project-tile:not(.is-cover) .work-link::after {
  inset:6px;
  background-size:10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px;
}
.project-credit {
  margin-top:12px;
  font-family:var(--f-mono); font-weight:500; font-size:.75rem; line-height:1.5;
  letter-spacing:.04em; color:var(--ink-2);
}
.section-intro a { color:var(--plan); text-decoration-thickness:2px; text-underline-offset:.16em; }
.section-intro a:hover { text-decoration-thickness:3px; }

/* 9b. Work: filters and gallery */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(24px, 3vw, 36px); }
.filter {
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink);
  font-size:.9375rem; font-weight:600; line-height:1.1; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filter:hover { border-color:var(--ink); }
.filter[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
@media (max-width: 999.98px) {
  /* One scrolling row on phones and tablets instead of ragged rows of chips */
  .filters {
    flex-wrap:nowrap; overflow-x:auto;
    margin-left:calc(-1 * var(--gutter-l)); margin-right:calc(-1 * var(--gutter-r));
    padding:6px var(--gutter-r) 8px var(--gutter-l);
    scroll-padding-inline:var(--gutter-l);
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar { display:none; }
}
/* A mouse can't swipe: keep a thin scrollbar under the row for narrow desktop windows */
@media (max-width: 999.98px) and (hover: hover) and (pointer: fine) { .filters { scrollbar-width:thin; } }
/* Desktop: two even rows of five */
@media (min-width: 1000px) {
  .filters { display:grid; grid-template-columns:repeat(5, auto); justify-content:start; }
  .filter { justify-content:center; }
}

.gallery-shell { container-type:inline-size; }
.gallery {
  --cols:1; --gap:16px;
  display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
  gap:28px var(--gap);
  margin:0; padding:0; list-style:none;
}
.work-item { display:flex; min-width:0; }
.work-fig { display:flex; flex-direction:column; width:100%; min-width:0; }
.work-link {
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r);
  background:var(--line);
}
.work-link img { width:100%; height:auto; object-fit:cover; transition:transform .6s var(--ease-out); }
.is-landscape .work-link img { aspect-ratio:4 / 3; }
.is-portrait .work-link img { aspect-ratio:4 / 5; }
/* Hover/focus: viewfinder corners, the same motif as the photo-evidence step */
.work-link::after {
  content:""; position:absolute; inset:12px; pointer-events:none;
  background:
    linear-gradient(#FFF, #FFF) top left / 22px 2px, linear-gradient(#FFF, #FFF) top left / 2px 22px,
    linear-gradient(#FFF, #FFF) top right / 22px 2px, linear-gradient(#FFF, #FFF) top right / 2px 22px,
    linear-gradient(#FFF, #FFF) bottom left / 22px 2px, linear-gradient(#FFF, #FFF) bottom left / 2px 22px,
    linear-gradient(#FFF, #FFF) bottom right / 22px 2px, linear-gradient(#FFF, #FFF) bottom right / 2px 22px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.55));
  opacity:0; transform:scale(1.04);
  transition:opacity .25s ease, transform .35s var(--ease-out);
}
.work-link:hover img, .work-link:focus-visible img { transform:scale(1.03); }
.work-link:hover::after, .work-link:focus-visible::after { opacity:1; transform:none; }
.work-cap { display:block; padding-top:10px; }
.work-title { display:block; font-size:.9375rem; font-weight:600; line-height:1.35; color:var(--ink); }
.work-tags {
  display:block; margin-top:4px;
  font-family:var(--f-mono); font-weight:500; font-size:.6875rem; line-height:1.5;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
/* Masonry from 600px: rows are a tenth of a column wide, tiles span rows by orientation.
   Featured landscapes span two columns; featured portraits are taller. */
@media (min-width: 600px) {
  .gallery {
    --cols:2;
    row-gap:0;
    grid-auto-flow:row dense;
    grid-auto-rows:34px; /* fallback without container units */
    grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) / 10);
  }
  .work-item { grid-row:span 16; margin-bottom:var(--gap); }
  .work-item.is-landscape { grid-row:span 10; }
  .work-item.is-featured.is-portrait { grid-row:span 18; }
  .work-item.is-featured.is-landscape { grid-column:span 2; grid-row:span 17; }
  .work-link { flex:1 1 0; min-height:0; }
  .work-link img { position:absolute; inset:0; height:100%; aspect-ratio:auto; }
}
@media (min-width: 1000px) { .gallery { --cols:3; } }

/* End-of-gallery call to action, drawn as a blueprint sheet in both themes. From 600px its row span
   also closes the masonry's short last column; re-measure the spans if the tiles or their order change. */
.work-cta {
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  min-width:0;
  padding:clamp(20px, 2.4vw, 32px);
  border-radius:var(--r);
  background-color:var(--bp-ground); color:var(--bp-line);
  background-image:linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:32px 32px;
}
.work-cta-label { font-family:var(--f-mono); font-weight:700; font-size:.75rem; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.work-cta-body { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.work-cta-title {
  font-family:var(--f-display); font-weight:800; font-stretch:108%;
  font-size:clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height:1.08; letter-spacing:-.015em;
}
.work-cta-body p:not(.work-cta-title) { max-width:28ch; }
.work-cta .btn { margin-top:6px; color:inherit; border-color:currentColor; }
.work-cta .btn:hover { background:var(--bp-line); border-color:var(--bp-line); color:var(--bp-ground); }
.work-cta :focus-visible { outline-color:var(--bp-line); }
.gallery.is-filtered .work-cta { display:none; }
@media (min-width: 600px) { .work-cta { grid-row:span 14; margin-bottom:var(--gap); } }
@media (min-width: 1000px) { .work-cta { grid-row:span 15; } }

/* 9c. Lightbox */
.lightbox {
  position:fixed; inset:0;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:#0B0D0F; color:#ECEDE9;
  overflow:hidden;
}
.lightbox::backdrop { background:var(--shade); }
.lb-inner {
  display:grid; height:100%;
  grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-rows:auto minmax(0, 1fr);
  grid-template-areas:"count count close" "prev figure next";
  gap:12px 16px;
  padding:max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.lb-count {
  grid-area:count; align-self:center;
  font-family:var(--f-mono); font-weight:700; font-size:.8125rem; line-height:1;
  letter-spacing:.08em; color:#A3A9AE; font-variant-numeric:tabular-nums;
}
.lb-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:48px; min-height:48px; padding:0 12px;
  border:1px solid rgba(236,237,233,.35); border-radius:var(--r);
  background:rgba(25,28,31,.85); color:#ECEDE9;
  font-weight:650; font-size:.9375rem;
  transition:background-color .15s ease, color .15s ease;
}
.lb-btn .icon { width:1.35em; height:1.35em; }
.lb-btn:hover { background:#ECEDE9; color:#0B0D0F; }
.lb-close { grid-area:close; justify-self:end; }
.lb-prev { grid-area:prev; align-self:center; justify-self:start; }
.lb-next { grid-area:next; align-self:center; justify-self:end; }
.lb-figure {
  grid-area:figure;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-width:0; min-height:0;
}
#lb-img {
  flex:0 1 auto; min-height:0;
  width:auto; height:auto; max-width:100%; max-height:calc(100% - 72px);
  object-fit:contain;
  background:#191C1F;
}
.lb-caption { max-width:62ch; font-size:.9375rem; line-height:1.45; text-align:center; color:#ECEDE9; }
.lb-title { font-weight:600; }
.lb-sep { color:#7D848A; margin-inline:.3em; } /* the body font's space is narrow next to the dot */
.lb-tags { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:#A3A9AE; }
.lb-credit { display:block; margin-top:4px; font-size:.8125rem; color:#A3A9AE; }
.lb-btn:disabled { opacity:.35; cursor:default; }
.lb-btn:disabled:hover { background:rgba(25,28,31,.85); color:#ECEDE9; }
#lb-img { transition:opacity .2s ease; }
.lightbox.is-loading #lb-img { opacity:.55; }
.lightbox.is-loading .lb-figure { cursor:progress; }
.lightbox :focus-visible { outline-color:#8FB0F5; }
@media (max-width: 599.98px) {
  .lb-inner {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto minmax(0, 1fr) auto;
    grid-template-areas:"count close" "figure figure" "prev next";
  }
  .lb-prev { justify-self:start; }
  .lb-next { justify-self:end; }
}

/* 9d. Process band (dark island in the light theme; hairlined surface in the dark theme) */
.process {
  --paper:#111315; --surface:#181B1E; --ink:#ECEDE9; --ink-2:#A3A9AE; --line:#343A40;
  --plan:#8FB0F5; --on-plan:#0E1420; --plan-soft:rgba(143,176,245,.12); --film:rgba(110,160,240,.26);
  --field:#111315; --ok:#4CC38A; --err:#F97066;
  color-scheme:dark;
  background:var(--band); color:var(--ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .process { border-block:1px solid #2B3034; } }
:root[data-theme="dark"] .process { border-block:1px solid #2B3034; }
.process-grid { display:grid; gap:clamp(40px, 5vw, 72px); align-items:center; }
@media (min-width: 900px) { .process-grid { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); } }
.process-copy { min-width:0; }
.process h2 { margin-bottom:1.6rem; }
.process-lead {
  font-family:var(--f-display); font-weight:500; font-stretch:100%;
  font-size:clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height:1.32; letter-spacing:-.01em;
  color:var(--ink); max-width:25em;
}
.process-text { margin-top:1.25rem; font-size:1.125rem; color:var(--ink-2); max-width:34em; }

.care-demo { min-width:0; width:100%; max-width:500px; }
@media (min-width: 900px) { .care-demo { justify-self:end; } }
.care-frame { position:relative; overflow:hidden; aspect-ratio:4 / 5; border-radius:var(--r); background:#0B0D0F; }
.care-frame img { width:100%; height:100%; object-fit:cover; }
.care-film {
  position:absolute; left:0; right:0; bottom:0; height:58%;
  background:var(--film);
  border-top:1px solid rgba(255,255,255,.6);
  transform:translateX(-101%);
  transition:transform 1.4s var(--ease-io);
}
.care-film::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.24) 24%, transparent 31%, transparent 60%, rgba(255,255,255,.14) 65%, transparent 71%);
}
.care-tape {
  position:absolute; left:0; right:0; top:0;
  display:flex; align-items:center; gap:2em;
  height:24px; margin:0; padding-left:1.6em;
  overflow:hidden; white-space:nowrap;
  background:var(--plan); color:var(--on-plan);
  font-family:var(--f-mono); font-weight:700; font-size:10px; line-height:1; letter-spacing:.22em;
}
.care-demo.is-protected .care-film { transform:none; }
.care-caption { display:flex; align-items:baseline; gap:12px; margin-top:12px; font-size:.875rem; line-height:1.45; color:var(--ink-2); }

.process-steps {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:0 32px;
  margin-top:clamp(48px, 6vw, 88px);
  border-top:1px solid var(--line);
}
@media (min-width: 600px) { .process-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .process-steps { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.process-step { position:relative; min-width:0; padding:26px 0 28px; }
/* Each step starts on a dimension tick */
.process-step::before { content:""; position:absolute; left:0; top:-9px; height:17px; border-left:1.5px solid var(--plan); }
.ps-num {
  display:block; margin-bottom:16px;
  font-family:var(--f-mono); font-weight:700; font-size:.875rem; line-height:1;
  letter-spacing:.06em; color:var(--plan);
}
.process-step h3 { font-size:1.375rem; margin-bottom:.5rem; color:var(--ink); }
.process-step p { font-size:1rem; color:var(--ink-2); max-width:28em; }

/* 9e. Who we work with */
.clients { padding-block:clamp(56px, 7vw, 96px); }
.clients-grid { display:grid; gap:14px 48px; align-items:baseline; }
@media (min-width: 900px) { .clients-grid { grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); } }
.clients-title { font-size:clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.clients-text {
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.25rem, 1rem + .95vw, 1.875rem); line-height:1.32; letter-spacing:-.01em;
  max-width:30em;
}
.clients-text a { color:var(--plan); text-decoration-thickness:2px; text-underline-offset:.16em; }
.clients-text a:hover { text-decoration-thickness:3px; }

/* 10. Contact -------------------------------------------------------------- */
.contact { border-top:1px solid var(--line); }
.contact-grid { display:grid; gap:clamp(28px, 4vw, 48px); align-items:start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); } }
.contact-main { min-width:0; }
.form-panel {
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px, 3.4vw, 40px);
}
.form-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px 20px; }
@media (min-width: 600px) { .form-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field--full { grid-column:1 / -1; }
.field > label { font-weight:650; font-size:1rem; line-height:1.35; }
.field-hint { font-size:.875rem; color:var(--ink-2); line-height:1.45; margin-top:-2px; }
.field-error { display:flex; align-items:flex-start; gap:6px; font-size:.875rem; font-weight:650; line-height:1.45; color:var(--err); }
.field-error::before {
  content:"!"; flex:none;
  display:inline-grid; place-items:center;
  width:1.15rem; height:1.15rem; margin-top:.08em;
  border-radius:50%; background:var(--err); color:var(--surface);
  font-family:var(--f-mono); font-size:.75rem; line-height:1;
}
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  display:block; width:100%; max-width:100%; min-width:0;
  min-height:48px; padding:11px 13px;
  background:var(--field); color:var(--ink);
  border:1.5px solid var(--ink-2); border-radius:var(--r);
  font-size:1rem; line-height:1.4;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height:8.5rem; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:var(--ink-2); opacity:1; }
input:not([type="radio"]):not([type="checkbox"]):hover, select:hover, textarea:hover { border-color:var(--ink); }
/* Focus and error selectors repeat the :not() chain of the base field rule so they outrank it */
input:not([type="radio"]):not([type="checkbox"]):focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid var(--plan); outline-offset:2px; border-color:var(--plan);
}
/* Edge/Chrome: the month picker's button is its own Tab stop inside the input */
input[type="month"]:focus-within { outline:3px solid var(--plan); outline-offset:2px; border-color:var(--plan); }
input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), select[aria-invalid="true"], textarea[aria-invalid="true"],
input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):hover, select[aria-invalid="true"]:hover, textarea[aria-invalid="true"]:hover {
  border-color:var(--err);
  box-shadow:inset 0 0 0 1px var(--err);
}
input[type="month"] { -webkit-appearance:none; appearance:none; }
input[type="month"]::-webkit-datetime-edit { padding:0; }
input[type="month"]::-webkit-calendar-picker-indicator { cursor:pointer; }
.select { position:relative; }
.select select { -webkit-appearance:none; appearance:none; padding-right:44px; cursor:pointer; text-overflow:ellipsis; }
.select::after {
  content:""; position:absolute; pointer-events:none;
  right:18px; top:50%;
  width:9px; height:9px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);
}
.form-actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--line);
}
.form-note { flex:1 1 16rem; font-size:.875rem; color:var(--ink-2); line-height:1.5; }
.form-note--strong { color:var(--ink); font-weight:650; }
.form-note a { color:var(--plan); }
@media (max-width: 479.98px) { #c-submit { flex:1 1 100%; } }

/* Result panel */
.c-result {
  margin-top:24px;
  background:var(--surface);
  border:1px solid var(--line); border-top:4px solid var(--plan); border-radius:var(--r);
  padding:clamp(20px, 3vw, 32px);
}
.c-result h3 { font-size:1.375rem; margin-bottom:14px; }
.c-message-label {
  display:block; margin-bottom:6px;
  font-family:var(--f-mono); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
#c-message { min-height:13rem; font-family:var(--f-mono); font-size:.875rem; line-height:1.55; }
.c-actions { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin-top:16px; }
@media (min-width: 480px) {
  .c-actions { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  #c-send-email { grid-column:1 / -1; }
}
.c-status { min-height:1.6em; margin-top:12px; font-weight:650; color:var(--ok); }
.c-status.is-error { color:var(--err); }
.c-status:empty { min-height:0; margin-top:0; }
.c-help { margin-top:8px; font-size:.875rem; color:var(--ink-2); }
.c-help [data-email-text] { font-family:var(--f-mono); font-weight:700; color:var(--ink); overflow-wrap:anywhere; }

/* Contact card */
.contact-card {
  min-width:0;
  display:grid; gap:20px;
  background:var(--surface);
  border:1px solid var(--line); border-top:4px solid var(--plan); border-radius:var(--r);
  padding:clamp(20px, 3vw, 32px);
}
@media (min-width: 900px) { .contact-card { position:sticky; top:calc(var(--header-h) + 24px); } }
.contact-card h3 { font-size:1.375rem; }
.phone-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:-6px; }
.phone-big {
  display:inline-flex; align-items:center; min-height:48px;
  font-family:var(--f-mono); font-weight:700;
  font-size:clamp(1.5rem, 1.2rem + 1vw, 1.95rem); letter-spacing:-.01em; line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  color:var(--ink); text-decoration:none;
  text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--plan);
}
.phone-big:hover { text-decoration-line:underline; }
.copy-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; min-width:44px; padding:0 12px;
  border:1px solid var(--ink-2); border-radius:var(--r);
  background:transparent; color:var(--ink);
  font-family:var(--f-mono); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.copy-btn .icon { width:1.25em; height:1.25em; }
.copy-btn:hover { border-color:var(--ink); background:var(--paper); }
.copy-status { flex-basis:100%; font-size:.875rem; font-weight:650; line-height:1.4; color:var(--ok); }
/* Empty live region stays rendered (so it is announced when filled) but takes no space */
.copy-status:empty {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.contact-links { display:flex; flex-wrap:wrap; gap:10px; }
.contact-links .btn { flex:1 1 auto; white-space:nowrap; }
.contact-email {
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-weight:650; color:var(--ink);
  text-decoration-thickness:1px; text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
.contact-email .icon { width:1.3em; height:1.3em; flex:none; }
.contact-email:hover { text-decoration-color:var(--plan); text-decoration-thickness:2px; }
.contact-meta { display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--line); }
.contact-meta div { display:grid; grid-template-columns:4.5rem minmax(0, 1fr); gap:12px; align-items:baseline; }
.contact-meta dt {
  font-family:var(--f-mono); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
.contact-meta dd { margin:0; }

/* 11. Footer --------------------------------------------------------------- */
.site-footer {
  border-top:1.5px solid var(--ink);
  padding-block:clamp(48px, 6vw, 72px) 32px;
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
  background:var(--paper);
}
.footer-grid { display:grid; gap:32px 40px; grid-template-columns:minmax(0, 1fr); }
@media (min-width: 640px) { .footer-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-brand .brand-logo { --logo-h:56px; }
.footer-brand p { margin-top:14px; color:var(--ink-2); max-width:30ch; }
.footer-nav ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.footer-nav a, .footer-contact a {
  display:inline-flex; align-items:center; min-height:36px;
  font-weight:600; text-decoration:none; color:var(--ink);
  text-decoration-thickness:2px; text-underline-offset:5px; text-decoration-color:var(--plan);
}
.footer-nav a:hover, .footer-contact a:hover { text-decoration-line:underline; }
.footer-contact { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.footer-contact a { overflow-wrap:anywhere; }
.footer-contact a[data-tel] { font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.footer-contact p { margin-top:6px; color:var(--ink-2); font-size:.9375rem; }
.footer-base {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px;
  margin-top:40px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.875rem; color:var(--ink-2);
}
.footer-base a { color:var(--ink); text-underline-offset:.2em; }
.footer-base a:hover { text-decoration-color:var(--plan); text-decoration-thickness:2px; }
/* Footer separators: the body font's space is narrow and its middle dot tiny */
.sep { display:inline-block; margin-inline:.3em; color:var(--ink-2); }
@media (max-width: 759.98px) {
  /* Room under the footer for the fixed call button */
  .site-footer { padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
  /* Pages without the button keep normal padding (browsers without :has() keep the room) */
  body:not(:has(> .fab)) .site-footer { padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }
}

/* 12. Mobile call button --------------------------------------------------- */
.fab { display:none; }
@media (max-width: 759.98px) {
  .fab {
    position:fixed; z-index:25;
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    display:inline-flex; align-items:center; gap:8px;
    min-height:52px; padding:0 20px 0 16px;
    background:var(--plan); color:var(--on-plan);
    border-radius:var(--r);
    box-shadow:0 6px 18px rgba(10,12,14,.28);
    font-weight:700; font-size:1rem; text-decoration:none;
  }
  .fab .icon { width:1.3em; height:1.3em; }
  /* main.js tucks it away while it would cover the hero's lead or buttons (short phones, first view) */
  .fab { transition:opacity .2s ease, visibility .2s; }
  .fab.is-tucked { opacity:0; visibility:hidden; pointer-events:none; }
  /* Out of the way while the menu is open */
  body:has(.site-nav.is-open) .fab { display:none; }
}

/* 13. Subpages: page shell and prose -------------------------------------- */
.page {
  padding-block:clamp(40px, 7vw, 88px) clamp(72px, 10vw, 128px);
  padding-left:var(--gutter-l); padding-right:var(--gutter-r);
}
.prose > * { max-width:48rem; }
.prose > :first-child { margin-top:0; }
.prose h1 { font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); line-height:1.02; margin-bottom:1.1rem; }
.prose h2 {
  font-size:clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height:1.15; font-stretch:104%;
  margin-top:3rem; margin-bottom:.85rem; padding-top:1.5rem;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.prose h3 { font-size:1.15rem; margin-top:2rem; margin-bottom:.5rem; scroll-margin-top:calc(var(--header-h) + 16px); }
.prose h4 { margin-top:1.5rem; margin-bottom:.4rem; font-size:1.0625rem; }
.prose p, .prose ul, .prose ol, .prose dl, .prose table, .prose blockquote, .prose address, .prose figure { margin-bottom:1.1rem; }
.prose ul, .prose ol { padding-left:1.4em; }
.prose li + li { margin-top:.4em; }
.prose li::marker { color:var(--plan); }
.prose ol > li::marker { font-family:var(--f-mono); font-weight:700; font-size:.875em; }
.prose ul > li::marker { content:"\25A0\00A0\00A0"; font-size:.7em; }
.prose a { color:var(--plan); text-decoration-thickness:1px; text-underline-offset:.18em; }
.prose a:hover { text-decoration-thickness:2px; }
.prose strong { font-weight:700; }
.prose address { font-style:normal; }
.prose code { font-family:var(--f-mono); font-size:.9em; }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
.prose blockquote, .prose aside, .prose .note, .prose .callout {
  padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--plan);
  border-radius:0 var(--r) var(--r) 0;
  margin-bottom:1.25rem;
}
.prose blockquote { margin-inline:0; }
.prose :is(blockquote, aside, .note, .callout) > :last-child { margin-bottom:0; }
.prose .lead, .prose > h1 + p { font-size:1.1875rem; color:var(--ink-2); }
.prose .updated, .prose .meta, .prose time { font-family:var(--f-mono); font-size:.8125rem; color:var(--ink-2); }
.prose p.updated { margin-bottom:1.5rem; }
.prose dl dt { font-weight:700; }
.prose dl dd { margin:0 0 .75rem; }
.prose table {
  width:100%; border-collapse:collapse;
  font-size:.9375rem; line-height:1.5;
  border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
}
.prose caption { text-align:left; padding-bottom:8px; font-family:var(--f-mono); font-size:.8125rem; color:var(--ink-2); }
.prose th, .prose td {
  text-align:left; vertical-align:top;
  padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere; hyphens:auto;
}
.prose th { font-family:var(--f-mono); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.prose tr:last-child > td { border-bottom:0; }
.prose template { display:none; }
/* Table of contents: <nav class="toc"> (any nav inside .prose gets the same treatment) */
.prose .toc, .prose nav {
  margin:1.75rem 0 2.25rem;
  padding:16px 22px 18px;
  background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--plan);
  border-radius:var(--r);
}
.prose .toc > :is(h2, h3, p):first-child, .prose nav > :is(h2, h3, p):first-child {
  margin:0 0 10px; padding:0; border:0;
  font-family:var(--f-mono); font-size:.75rem; font-weight:700; font-stretch:100%; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
.prose .toc :is(ol, ul), .prose nav :is(ol, ul) { margin:0; padding-left:1.4em; columns:2 15rem; column-gap:32px; }
.prose .toc li, .prose nav li { break-inside:avoid; margin:0 0 .3em; }
.prose .toc a, .prose nav a { display:inline-block; vertical-align:top; padding:2px 0; text-decoration:none; font-weight:650; color:var(--ink); }
.prose .toc a:hover, .prose nav a:hover { text-decoration:underline; text-decoration-color:var(--plan); text-decoration-thickness:2px; }

/* 14. 404 ------------------------------------------------------------------ */
.notfound { display:grid; gap:clamp(40px, 6vw, 72px); align-items:center; }
@media (min-width: 900px) { .notfound { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); } }
.notfound-copy { min-width:0; }
.notfound-copy h1 { margin-bottom:1.25rem; }
.notfound-copy p:not(.eyebrow) { max-width:34em; color:var(--ink-2); font-size:1.125rem; }
.notfound-copy p + p { margin-top:.85rem; }
.notfound-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }
@media (max-width: 479.98px) { .notfound-actions .btn { flex:1 1 100%; } }
.notfound-links { margin-top:2.5rem; border-top:1.5px solid var(--ink); max-width:30rem; }
.notfound-links li { border-bottom:1px solid var(--line); }
.notfound-links a {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px; font-weight:650; text-decoration:none; color:var(--ink);
}
.notfound-links a::after {
  content:""; flex:none; width:8px; height:8px; margin-right:4px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease-out);
}
.notfound-links a:hover { color:var(--plan); }
.notfound-links a:hover::after { transform:translateX(4px) rotate(45deg); }
.notfound-sheet { min-width:0; margin:0; }
.notfound-sheet svg { display:block; width:100%; height:auto; border-radius:var(--r); }
.notfound-sheet .bp-ground { fill:var(--bp-ground); }
.notfound-sheet .bp-grid { opacity:.1; }
.notfound-sheet .ln { fill:none; stroke:var(--bp-line); stroke-linejoin:round; }
.notfound-sheet .w3 { stroke-width:2.6; }
.notfound-sheet .w2 { stroke-width:1.5; }
.notfound-sheet .w1 { stroke-width:1; }
.notfound-sheet .dash { stroke-dasharray:7 5; opacity:.6; }
.notfound-sheet text { fill:var(--bp-line); font-family:var(--f-mono); font-weight:500; font-size:13px; letter-spacing:.04em; }
.notfound-sheet .t-l { font-size:19px; font-weight:700; letter-spacing:.06em; }
.notfound-sheet .t-xl { font-size:30px; font-weight:700; }
.notfound-sheet figcaption { margin-top:12px; display:flex; gap:12px; align-items:baseline; font-size:.875rem; color:var(--ink-2); }

/* 15. Motion --------------------------------------------------------------- */
/* Light scroll reveals: main.js adds .reveal to service rows, gallery tiles and process steps that are
   still below the fold, then .is-in once each is seen (once). No JS or reduced motion: never added. */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--reveal-delay, 0ms); }
  .reveal.is-in { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* 16. Forced colours ------------------------------------------------------- */
@media (forced-colors: active) {
  .story-stage, .care-frame, .notfound-sheet svg { forced-color-adjust:none; }
  .story-rail { forced-color-adjust:none; background:GrayText !important; }
  .story-rail-fill { forced-color-adjust:none; background:Highlight !important; }
  .story-rail-tick { forced-color-adjust:none; background:Canvas !important; }
  .story-step.is-current .ss-n { outline:2px solid Highlight; outline-offset:2px; }
  .filter[aria-pressed="true"] { outline:2px solid Highlight; outline-offset:2px; }
  .eyebrow::before { background:CanvasText; border-color:CanvasText; }
}

/* 17. Print ---------------------------------------------------------------- */
@media print {
  .site-header, .fab, .skip-link, #nav-toggle, .hero-actions, .filters, .lightbox, .form-panel, .c-result, .care-film,
  .story-skip, .story-rail, .scene, .story-scan, .story-vf, .story-flash, .story-film, .story-roll, .story-toggle { display:none !important; }
  /* The story prints as its final state, whatever the scroll position was */
  .story-photo { clip-path:none !important; visibility:visible !important; }
  .story-tag { opacity:1 !important; transform:none !important; visibility:visible !important; }
  .story-layout { break-inside:avoid; }
  .reveal { opacity:1 !important; transform:none !important; }
  .process { background:none; color:#000; }
  .gallery { display:block; }
  .work-item { break-inside:avoid; margin-bottom:16px; }
}