/* ==========================================================================
   Combination Technologies - Version 1 "refined"
   site.css: the one stylesheet for every page. Documented in DESIGN-SYSTEM.md.

   0. Fonts        4. Layout (wrap, grid, sections)
   1. Tokens       5. Components
   2. Reset, base  6. Utilities
   3. Type         7. Motion (reveals, page transitions, reduced motion)   8. Print

   Breakpoints (em, so they follow the reader's text size):
     phone   below 48em    (768 px)
     tablet  48em to 68.74em
     desktop 68.75em and up (1100 px)
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* ---------- 0. Fonts (self-hosted; nothing is loaded from another site) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Maven Pro";
  src: url("/assets/fonts/maven-pro-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* A stand-in with Manrope's proportions, so text does not jump when the real font arrives. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 104%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* type families */
  --font-sans: "Manrope", "Manrope Fallback", system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --font-logo: "Maven Pro", "Manrope", "Manrope Fallback", sans-serif;

  /* type scale: fluid between 390 px and 1440 px wide */
  --fs-display: clamp(2rem, 10.2vw, 5.5rem);                 /* 32 to 88: hero headline */
  --fs-h1: clamp(2rem, 1.257rem + 3.05vw, 4rem);             /* 32 to 64: statements, page titles */
  --fs-cta: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);             /* 32 to 56: footer call to action */
  --fs-h2: clamp(1.5rem, 1.129rem + 1.52vw, 2.5rem);         /* 24 to 40: large sentences */
  --fs-h3: clamp(1.25rem, 1.064rem + 0.76vw, 1.75rem);       /* 20 to 28: item titles */
  --fs-h4: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);      /* 18 to 20: card titles, questions */
  --fs-lead: clamp(1.125rem, 1.032rem + 0.38vw, 1.375rem);   /* 18 to 22 */
  --fs-body: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);    /* 17 to 18 */
  --fs-small: clamp(0.9375rem, 0.914rem + 0.1vw, 1rem);      /* 15 to 16 */
  --fs-mono: 0.75rem;                                        /* 12: the instrument layer */

  --lh-tight: 1.04; --lh-heading: 1.14; --lh-snug: 1.28; --lh-body: 1.6;
  --ls-display: -0.035em; --ls-h1: -0.028em; --ls-h2: -0.022em; --ls-h3: -0.015em; --ls-mono: 0.06em;
  --w-body: 450; --w-medium: 500; --w-strong: 600; --w-bold: 700;

  /* colour: black, white and three greys, each with one job */
  --ink: #0a0a0a;        /* text, buttons, the footer band */
  --ink-2: #585858;      /* secondary text: 7.2:1 on white */
  --ink-3: #6b6b6b;      /* instrument layer text: 5.3:1 on white, 4.8:1 on --surface */
  --line: #d9d9d9;       /* hairlines */
  --surface: #f4f4f4;    /* figure backgrounds, quiet panels */
  --paper: #ffffff;      /* the page */
  --inv-ink: #ffffff;    /* text on the black band */
  --inv-ink-2: #a6a6a6;  /* secondary text on black: 8.3:1 */
  --inv-line: #3a3a3a;   /* hairlines on black */

  /* space: one scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-gap: clamp(4.5rem, 2.6rem + 7.6vw, 9rem);        /* 72 to 144 between sections */
  --block-gap: clamp(1.5rem, 1rem + 2vw, 3rem);              /* 24 to 48 between a section head and its content */

  /* grid: 12 columns */
  --margin: clamp(1.25rem, 5.556vw, 5rem);                   /* 20 to 80 */
  --gutter: clamp(1rem, 0.63rem + 1vw, 1.5rem);              /* 16 to 24 */
  --page-max: 87.5rem;                                       /* 1400 */
  --measure: 40rem;                                          /* longest comfortable line of body text */
  --header-h: 4rem;

  /* shape and lines */
  --radius: 4px;         /* controls only; pictures and panels are square */
  --hair: 1px;

  /* motion */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);

  /* icons (used as masks, so they take the text colour) */
  --icon-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.667 1.583H4a.75.75 0 0 0 0 1.5h7.856L1.803 13.136a.75.75 0 0 0 1.061 1.061L12.917 4.144V12a.75.75 0 0 0 1.5 0V2.333a.75.75 0 0 0-.75-.75Z'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9.5 3.5 14 8l-4.5 4.5'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8H2M6.5 3.5 2 8l4.5 4.5'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 8.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 3h2.5v10H4zM9.5 3H12v10H9.5z'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 2.5v11l9-5.5z'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m3 3 10 10M13 3 3 13'/%3E%3C/svg%3E");
}
@media (max-width: 47.99em) { :root { --header-h: 3.5rem; } }

/* ---------- 2. Reset and base ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, address { margin: 0; }
  ol, ul { padding: 0; }
  ul[class], ol[class] { list-style: none; }
  h1, h2, h3, h4, h5, h6 { font: inherit; }
  img, picture, video, svg, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  picture { display: contents; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { border: 0; padding: 0; background: none; cursor: pointer; }
  a { color: inherit; }
  address { font-style: normal; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    color-scheme: light;
    scroll-padding-top: calc(var(--header-h) + var(--s-5));
    -webkit-tap-highlight-color: transparent;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font: var(--w-body) var(--fs-body) / var(--lh-body) var(--font-sans);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }
  main:focus { outline: 0; }
  ::selection { background: var(--ink); color: var(--paper); }
  b, strong { font-weight: var(--w-bold); }
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  /* One focus style everywhere: a 2 px ring in the text colour, set off from the element. */
  :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

  a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-2); }
}

/* ---------- 3. Type ---------- */
@layer base {
  .display { font: var(--w-bold) var(--fs-display) / var(--lh-tight) var(--font-sans); letter-spacing: var(--ls-display); }
  .h1 { font: var(--w-medium) var(--fs-h1) / 1.1 var(--font-sans); letter-spacing: var(--ls-h1); }
  .h2 { font: var(--w-medium) var(--fs-h2) / 1.22 var(--font-sans); letter-spacing: var(--ls-h2); }
  .h3 { font: var(--w-strong) var(--fs-h3) / var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-h3); }
  .h4 { font: var(--w-strong) var(--fs-h4) / 1.35 var(--font-sans); letter-spacing: -0.01em; }
  .lead { font-size: var(--fs-lead); line-height: 1.5; }
  .small { font-size: var(--fs-small); }
  .muted { color: var(--ink-2); }

  /* The instrument layer: small monospace capitals for numbers, captions, counts and metadata. Never for sentences. */
  .mono {
    font: 500 var(--fs-mono) / 1.4 var(--font-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }

  /* Running text: paragraphs, lists and links inside any text block. */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: 1em; }
  .prose a { text-decoration: underline; text-decoration-color: var(--ink-3); }
  .prose a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  .prose ul, .prose ol { padding: 0; list-style: none; display: grid; gap: 0.7em; }
  .prose li { position: relative; padding-left: 2em; }
  .prose ul.checks > li::before {          /* the tick lists of the FAQ */
    content: ""; position: absolute; left: 0.15em; top: 0.38em; width: 1em; height: 1em;
    background: currentColor; mask: var(--icon-check) center / contain no-repeat; -webkit-mask: var(--icon-check) center / contain no-repeat;
  }
  .prose ol { counter-reset: n; }
  .prose ol > li { counter-increment: n; }
  .prose ol > li::before {                 /* "1)" to "5)" as on the current site, set in the monospace */
    content: counter(n) ")"; position: absolute; left: 0; top: 0.32em;
    font: 500 var(--fs-mono) / 1.4 var(--font-mono); letter-spacing: var(--ls-mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
  }
}

/* ---------- 4. Layout ---------- */
@layer layout {
  /* The page column: side margins of 20 to 80 px, never wider than 1400 px. */
  .wrap { width: min(100% - 2 * var(--margin), var(--page-max)); margin-inline: auto; }

  /* The 12-column grid. Children choose their columns with .span-N and .start-N (desktop only). */
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .grid > * { grid-column: 1 / -1; }
  @media (min-width: 68.75em) {
    .span-3 { grid-column-end: span 3; } .span-4 { grid-column-end: span 4; } .span-5 { grid-column-end: span 5; }
    .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; }
    .span-9 { grid-column-end: span 9; }
    .start-1 { grid-column-start: 1; } .start-5 { grid-column-start: 5; } .start-7 { grid-column-start: 7; } .start-9 { grid-column-start: 9; }
  }

  /* Vertical rhythm: every section is a .section; the gap between sections is one token. */
  .section { margin-top: var(--section-gap); }
  .section > .section-head + * { margin-top: var(--block-gap); }
  .section > .section-head--flush + * { margin-top: 0; }
  main > :last-child { margin-bottom: var(--section-gap); }
}

/* ---------- 5. Components ---------- */
@layer components {

  /* --- 5.1 Skip link --- */
  .skip {
    position: absolute; left: var(--margin); top: 0; z-index: 100; translate: 0 -120%;
    padding: 0.7rem 1rem; background: var(--ink); color: var(--paper); border-radius: 0 0 var(--radius) var(--radius);
    font-weight: var(--w-strong); font-size: var(--fs-small); text-decoration: none;
  }
  .skip:focus { translate: 0 0; outline-offset: 2px; }

  /* --- 5.2 Icon (a mask, so it takes the text colour) --- */
  .icon {
    display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
    mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat;
  }
  .icon--ne { --icon: var(--icon-arrow-ne); width: 0.85em; height: 0.85em; }
  .icon--right { --icon: var(--icon-arrow-right); }
  .icon--left { --icon: var(--icon-arrow-left); }
  .icon--up { --icon: var(--icon-arrow-left); rotate: 90deg; }
  .icon--pause { --icon: var(--icon-pause); }
  .icon--play { --icon: var(--icon-play); }
  .icon--close { --icon: var(--icon-close); }

  /* --- 5.3 Button --- */
  .btn {
    --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    min-height: 3rem; padding: 0.7rem 1.4rem;
    background: var(--btn-bg); color: var(--btn-fg); border: var(--hair) solid var(--btn-bd); border-radius: var(--radius);
    font: var(--w-strong) 1rem / 1.2 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
  }
  .btn .icon { transition: translate var(--dur-2) var(--ease-out); }
  .btn:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); }
  .btn:hover .icon--ne { translate: 2px -2px; }
  .btn:hover .icon--right { translate: 3px 0; }
  .btn:active { scale: 0.975; }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
  .btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
  .btn--inverse { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
  .btn--inverse:hover { --btn-bg: transparent; --btn-fg: var(--paper); }
  .btn--sm { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.9375rem; }
  .btn--lg { min-height: 3.5rem; padding: 0.9rem 1.75rem; font-size: 1.0625rem; }

  /* --- 5.4 Text link with an arrow ("Learn More") --- */
  .link {
    display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem;
    font-weight: var(--w-strong); font-size: var(--fs-small); text-decoration: underline; text-decoration-color: transparent;
  }
  .link .icon { transition: translate var(--dur-2) var(--ease-out); }
  a.link:hover, :is(a, article):hover > .link, .card:hover .link { text-decoration-color: currentColor; }
  a.link:hover .icon, .card:hover .link .icon { translate: 4px 0; }

  /* --- 5.5 Logo: the C mark stands for the first letter of the wordmark --- */
  .logo { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
  .logo__mark { width: 1.875rem; height: 1.875rem; margin-right: 1px; filter: contrast(1.25) brightness(0.86); }
  .logo__word { font: 600 1.625rem / 1 var(--font-logo); letter-spacing: 0.075em; translate: 0 0.02em; }
  .logo--inverse { color: var(--inv-ink); }
  .logo--inverse .logo__mark { filter: none; }
  @media (max-width: 47.99em) {
    .logo__mark { width: 1.5rem; height: 1.5rem; }
    .logo__word { font-size: 1.25rem; }
  }

  /* --- 5.6 Site header --- */
  .site-header {
    position: sticky; top: 0; z-index: 50; background: var(--paper);
    border-bottom: var(--hair) solid transparent; transition: border-color var(--dur-2);
  }
  .site-header[data-scrolled] { border-bottom-color: var(--line); }
  .site-header__bar { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
  .site-header .logo { margin-right: auto; }

  .site-nav__list { display: flex; align-items: center; gap: var(--s-6); }
  .site-nav__list a {
    position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
    font-weight: var(--w-medium); font-size: 1rem; text-decoration: none;
  }
  .site-nav__list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1.5px; background: currentColor;
    scale: 0 1; transform-origin: 0 50%; transition: scale var(--dur-2) var(--ease-out);
  }
  .site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { scale: 1 1; }
  .site-nav__no, .site-nav__foot { display: none; }

  .menu-toggle { display: none; }

  /* the hairline under the bar turns black from the left as the page is read (only where the browser can tie animation to scroll) */
  .site-header__progress { display: none; }
  @supports (animation-timeline: scroll()) {
    .site-header__progress {
      display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
      transform-origin: 0 50%; scale: 0 1; animation: progress linear both; animation-timeline: scroll(root block);
    }
  }

  /* phone: logo, Book Call, menu button; the links live in a sheet that fills the screen below the bar */
  @media (max-width: 47.99em) {
    .site-header__bar { gap: var(--s-2); }
    .js .menu-toggle {
      display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; border-radius: var(--radius);
    }
    .menu-toggle__icon { position: relative; width: 1.25rem; height: 0.5rem; }
    .menu-toggle__icon::before, .menu-toggle__icon::after {
      content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 1px;
      transition: translate var(--dur-2) var(--ease-out), rotate var(--dur-2) var(--ease-out);
    }
    .menu-toggle__icon::before { top: 0; }
    .menu-toggle__icon::after { bottom: 0; }
    .menu-open .menu-toggle__icon::before { translate: 0 0.2rem; rotate: 45deg; }
    .menu-open .menu-toggle__icon::after { translate: 0 -0.2rem; rotate: -45deg; }

    .js .site-nav {
      position: fixed; inset: var(--header-h) 0 auto 0; height: calc(100dvh - var(--header-h)); z-index: 49;
      display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-6);
      padding: var(--s-6) var(--margin) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
      background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
      visibility: hidden; opacity: 0; translate: 0 -0.5rem;
      transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
    }
    .js.menu-open .site-nav { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
    .js.menu-open { overflow: hidden; }
    .js.menu-open .site-header { border-bottom-color: var(--line); }
    .js.menu-open .site-header__cta { visibility: hidden; }

    .js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; border-top: var(--hair) solid var(--ink); }
    .js .site-nav__list a {
      display: flex; align-items: baseline; gap: var(--s-4); min-height: 4.25rem; padding-block: 1rem;
      border-bottom: var(--hair) solid var(--line);
      font: var(--w-medium) 1.875rem / 1.2 var(--font-sans); letter-spacing: var(--ls-h2);
    }
    .js .site-nav__list a::after { display: none; }
    .js .site-nav__list a[aria-current="page"] { font-weight: var(--w-bold); }
    .js .site-nav__no { display: inline; width: 2rem; }
    .js .site-nav__foot { display: grid; gap: var(--s-4); }
    .js .site-nav__foot .btn { width: 100%; }
    .js .site-nav__foot a:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; text-decoration: none; }
    .js .site-nav__mail { font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
    .js .site-nav__mail:hover { color: var(--ink); text-decoration: underline; }

    /* the links rise one after another when the sheet opens */
    .js .site-nav__list li, .js .site-nav__foot { opacity: 0; translate: 0 0.5rem; transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
    .js.menu-open .site-nav__list li, .js.menu-open .site-nav__foot { opacity: 1; translate: 0 0; transition-delay: calc(40ms * var(--i, 0) + 60ms); }

    /* without JavaScript the links simply sit in a second row */
    .no-js .site-header__bar { flex-wrap: wrap; height: auto; padding-block: var(--s-2); row-gap: 0; }
    .no-js .site-nav { order: 3; width: 100%; }
    .no-js .site-nav__list { gap: var(--s-5); }
  }
  @media (max-width: 22.49em) { .site-header__cta { display: none; } }

  /* --- 5.7 Section head: a number and a label sitting on a full-width rule (the site's own device) --- */
  .section-head {
    display: flex; align-items: center; gap: var(--s-4); min-height: 3.25rem; padding-bottom: 0.25rem;
    border-bottom: var(--hair) solid var(--ink);
  }
  .section-head__no { width: 2.25rem; flex: none; }
  .section-head__label { font: var(--w-medium) 1.125rem / 1.3 var(--font-sans); letter-spacing: -0.005em; }
  .section-head__aside { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
  .section-head--inverse { border-bottom-color: var(--inv-line); }
  .section-head--inverse .mono { color: var(--inv-ink-2); }
  @media (max-width: 47.99em) {
    .section-head { gap: var(--s-3); }
    .section-head__no { width: 1.75rem; }
    .section-head__label { white-space: nowrap; }
    .section-head__aside { gap: var(--s-3); }
  }
  @media (max-width: 23.99em) { .section-head .rail-nav__count { display: none; } }

  /* --- 5.8 Figure: a picture in a frame with a monospace caption --- */
  .fig { display: grid; gap: 0.625rem; }
  .fig__frame {
    position: relative; overflow: hidden; background: var(--surface);
    aspect-ratio: var(--ratio, 3 / 2);
  }
  .fig__frame img, .fig__frame video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--pos, 50% 50%);
    scale: var(--zoom, 1); transform-origin: var(--pos, 50% 50%);
  }
  /* a "plate": renders, drawings and cut-out product shots are shown whole on the grey surface */
  .fig--plate .fig__frame img {
    inset: 6%; width: 88%; height: 88%; object-fit: contain; object-position: 50% 50%; scale: 1;
    mix-blend-mode: multiply;   /* a white background takes the colour of the surface */
  }
  .fig__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
  .fig__cap b { font-weight: 500; color: var(--ink); }

  /* --- 5.9 Hero (Home) --- */
  .hero { padding-top: clamp(1.75rem, 4.2vw, 3.75rem); }
  .hero__title { font: var(--w-bold) var(--fs-display) / 1.02 var(--font-sans); letter-spacing: var(--ls-display); text-wrap: wrap; }
  .hero__title span { display: block; }
  .hero__body { margin-top: clamp(1.5rem, 3.4vw, 3rem); display: grid; gap: var(--s-6) var(--gutter); }
  .hero__side { display: flex; flex-direction: column; gap: var(--s-6); }
  .hero__actions, .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }   /* a row of buttons: primary first */
  .hero__reel { --ratio: 16 / 9; }
  .hero__reel .fig__frame { max-height: max(15rem, 100svh - 23.5rem); width: 100%; }
  .hero .index { display: none; }
  @media (min-width: 68.75em) {
    .hero__body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .hero__side { grid-column: 1 / span 4; justify-content: space-between; }
    .hero__reel { grid-column: 5 / span 8; }
    .hero .index { display: block; }
  }
  @media (max-width: 47.99em) {
    .hero__reel { --ratio: 3 / 2; }
    .hero__reel .fig__frame { width: auto; max-height: none; margin-inline: calc(-1 * var(--margin)); }
  }

  /* the reel's caption: label, running time, pause button */
  .reel__meta { display: inline-flex; align-items: center; gap: var(--s-4); margin-left: auto; }
  .reel__toggle {
    display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; margin-block: -0.75rem; padding-inline: 0.25rem;
    color: var(--ink); border-radius: var(--radius);
  }
  .reel__toggle .icon { width: 0.8em; height: 0.8em; }
  .no-js .reel__meta { display: none; }
  @media (max-width: 29.99em) { .reel__sub { display: none; } }

  /* --- 5.10 Index: a small numbered list of in-page links (Home hero, Projects index) --- */
  .index__label { display: block; padding-bottom: 0.6rem; }
  .index__list { border-top: var(--hair) solid var(--line); }
  .index__list a {
    display: flex; align-items: baseline; gap: var(--s-4); padding-block: 0.5rem; border-bottom: var(--hair) solid var(--line);
    font-size: var(--fs-small); font-weight: var(--w-medium); text-decoration: none;
    transition: padding-left var(--dur-2) var(--ease-out);
  }
  .index__list a .mono { width: 1.75rem; flex: none; transition: color var(--dur-2); }
  .index__list a .icon { margin-left: auto; align-self: center; opacity: 0; translate: -4px 0; transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out); }
  .index__list a:hover .mono, .index__list a:focus-visible .mono { color: var(--ink); }
  .index__list a:hover .icon, .index__list a:focus-visible .icon { opacity: 1; translate: 0 0; }
  .index--cols .index__list { columns: 3 16rem; column-gap: var(--gutter); border-top: 0; }
  .index--cols .index__list li { break-inside: avoid; }
  .index--cols .index__list a { min-height: 2.75rem; align-items: center; }

  /* --- 5.11 Statement (Home intro) --- */
  .statement { margin-top: var(--section-gap); display: grid; gap: clamp(1.5rem, 3vw, 3rem) var(--gutter); }
  .statement__title { font: var(--w-medium) var(--fs-h1) / 1.1 var(--font-sans); letter-spacing: var(--ls-h1); max-width: 14em; }
  .statement__lead { font: var(--w-medium) var(--fs-h3) / 1.4 var(--font-sans); letter-spacing: var(--ls-h3); max-width: 34ch; }
  @media (min-width: 68.75em) {
    .statement { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .statement__title { grid-column: 1 / span 10; }
    .statement__lead { grid-column: 5 / span 8; }
  }

  /* --- 5.12 Spec cells (Home "Tech stack expertise"): four equal cells divided by hairlines --- */
  .specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--s-4); padding-inline: var(--gutter); border-left: var(--hair) solid var(--line); align-content: start; }
  .spec:first-child { padding-left: 0; border-left: 0; }
  .spec:last-child { padding-right: 0; }
  .spec__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-2); }
  .spec__icon { width: 3.5rem; height: 3.5rem; }
  .spec__title { font: var(--w-strong) var(--fs-h4) / 1.3 var(--font-sans); letter-spacing: -0.012em; }
  .spec__text { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
  .spec__text b { color: var(--ink); font-weight: var(--w-strong); }
  @media (max-width: 68.74em) {
    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
    .spec:nth-child(odd) { padding-left: 0; border-left: 0; }
    .spec:nth-child(even) { padding-right: 0; }
  }
  @media (max-width: 47.99em) {
    .specs { grid-template-columns: 1fr; row-gap: 0; }
    .spec { grid-row: auto; grid-template-rows: none; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2);
      padding: var(--s-5) 0; border-left: 0; border-bottom: var(--hair) solid var(--line); }
    .spec:first-child { padding-top: 0; }
    .spec:last-child { border-bottom: 0; padding-bottom: 0; }
    .spec__top { grid-row: 1 / span 2; flex-direction: column; justify-content: flex-start; gap: var(--s-3); margin: 0; }
    .spec__icon { width: 3rem; height: 3rem; }
    .spec__title, .spec__text { grid-column: 2; }
  }

  /* --- 5.13 Rail: a row of items that scrolls sideways and snaps (project browser, photo galleries) --- */
  .rail {
    --per: 3;
    display: grid; grid-auto-flow: column; gap: var(--gutter);
    grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gutter)) / var(--per));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    /* 6 px of room all round so focus rings are not clipped; the negative margin puts the items back on the grid */
    padding: 6px; margin: -6px; scroll-padding-inline: 6px;
  }
  .section-head + .rail { margin-top: calc(var(--block-gap) - 6px); }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; min-width: 0; }
  .rail:focus-visible { outline-offset: -2px; }
  .rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .rail.is-dragging * { pointer-events: none; }
  @media (hover: hover) and (pointer: fine) { .js .rail[data-rail] { cursor: grab; } }
  @media (max-width: 68.74em) { .rail { --per: 2; } }
  @media (max-width: 47.99em) {
    .rail { --per: 1.14; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scroll-padding-inline: var(--margin); gap: var(--s-4);
      grid-auto-columns: calc((100% - (var(--per) - 1) * var(--s-4)) / var(--per)); }
  }
  .rail--single { --per: 1 !important; }
  /* one picture per view: on phones it stays inside the text column (no bleed, so no sliver of the next caption) */
  @media (max-width: 47.99em) { .rail--single { gap: var(--s-2); grid-auto-columns: 100%; margin: -6px; padding: 6px; scroll-padding-inline: 6px; } }

  /* the rail's controls: a count and two arrows; they sit in a section head or under a gallery */
  .rail-nav { display: flex; align-items: center; gap: var(--s-3); }
  .rail-nav__count { min-width: 6.5em; text-align: right; }
  .rail-nav__btn {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--hair) solid var(--line); border-radius: var(--radius);
    color: var(--ink); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), scale var(--dur-1);
  }
  .rail-nav__btn + .rail-nav__btn { margin-left: -0.25rem; }
  .rail-nav__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .rail-nav__btn:active { scale: 0.94; }
  .rail-nav__btn[aria-disabled="true"] { color: var(--line); pointer-events: none; }
  .no-js .rail-nav { display: none; }

  /* a ruler under the rail: one tick per item, the ones in view drawn darker and taller */
  .rail-ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 0.5rem; margin-top: var(--s-6); }
  .rail-ticks > * { border: solid var(--line); border-width: 0 0 var(--hair) var(--hair); transition: border-color var(--dur-2) var(--ease-out); }
  .rail-ticks > :last-child { border-right-width: var(--hair); }
  .rail-ticks > .is-on { border-color: var(--ink); }
  .rail-ticks > .is-on + :not(.is-on) { border-left-color: var(--ink); }
  .no-js .rail-ticks { display: none; }

  /* --- 5.14 Card: a figure, a title, a line of text and a link (Home project browser) --- */
  .card { position: relative; display: flex; flex-direction: column; height: 100%; container-type: inline-size; }
  .card__body { display: flex; flex-direction: column; flex: 1; gap: 0.5rem; padding-top: var(--s-4); }
  .card__title { font: var(--w-strong) var(--fs-h4) / 1.3 var(--font-sans); letter-spacing: -0.012em; }
  .card__title a { text-decoration: none; }
  .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }      /* the whole card is the link */
  .card__title a:focus-visible { outline: 0; }
  .card:has(.card__title a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
  .card__text { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
  .card .link { margin-top: auto; padding-top: 0.25rem; }
  .card .fig__frame img { transition: scale 600ms var(--ease-out); }
  @media (hover: hover) { .card:hover .fig:not(.fig--plate) .fig__frame img { scale: calc(var(--zoom, 1) * 1.025); } }
  @container (min-width: 26rem) { .card__title { font-size: var(--fs-h3); } }
  @media (max-width: 47.99em) { .card .link { margin-top: 0; } }   /* one card in view at a time: no need to line the links up */

  /* --- 5.15 Rows: a ruled list with a title on the left and text on the right (Services, pillars) --- */
  .rows { border-bottom: var(--hair) solid var(--line); }
  .row { display: grid; gap: var(--s-3) var(--gutter); padding-block: clamp(1.5rem, 2.6vw, 2.25rem); border-top: var(--hair) solid var(--line); }
  .row:first-child { border-top: 0; }
  .row__head { display: grid; gap: 0.4rem; align-content: start; }
  .row__title { font: var(--w-strong) var(--fs-h3) / 1.25 var(--font-sans); letter-spacing: var(--ls-h3); }
  .row__body { color: var(--ink-2); }
  .row__body b { color: var(--ink); }
  @media (min-width: 68.75em) {
    .row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .row__head { grid-column: 1 / span 4; }
    .row__body { grid-column: 5 / span 7; }
  }

  /* --- 5.16 Pitch (Home "Designing Success"): one large sentence and a button --- */
  .pitch { display: grid; gap: var(--s-6) var(--gutter); justify-items: start; }
  .pitch__text { font: var(--w-medium) var(--fs-h2) / 1.25 var(--font-sans); letter-spacing: var(--ls-h2); color: var(--ink-2); max-width: 26ch; text-wrap: pretty; }
  .pitch__text span { display: block; color: var(--ink); }   /* the first sentence sits on its own line, in full ink */
  @media (min-width: 68.75em) {
    .pitch { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .pitch > * { grid-column: 5 / span 8; }
    .pitch__text { max-width: 30ch; }
  }

  /* --- 5.17 Accordion (FAQ) --- */
  .acc { border-bottom: var(--hair) solid var(--line); }
  .acc__item { border-top: var(--hair) solid var(--line); }
  .acc__item:first-child { border-top: 0; }
  .acc__btn {
    display: flex; align-items: baseline; gap: var(--s-4); width: 100%; padding-block: clamp(1.1rem, 2vw, 1.6rem); text-align: left;
    font: var(--w-strong) var(--fs-h4) / 1.35 var(--font-sans); letter-spacing: -0.012em; border-radius: 2px;
  }
  .acc__no { width: 2.25rem; flex: none; }
  .acc__q { flex: 1; max-width: 46rem; text-wrap: balance; }
  .acc__icon { position: relative; flex: none; align-self: center; width: 2.25rem; height: 2.25rem; margin: -0.4rem 0 -0.4rem auto; border: var(--hair) solid var(--line); border-radius: var(--radius);
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
  .acc__icon::before, .acc__icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1.5px; margin: -0.75px 0 0 -0.375rem; background: currentColor;
    transition: rotate var(--dur-3) var(--ease-out);
  }
  .acc__icon::after { rotate: 90deg; }
  .acc__item.is-open .acc__icon::after { rotate: 0deg; }
  .acc__btn:hover .acc__icon { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
  .acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
  .acc__inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-3); }
  .acc__item.is-open .acc__inner { visibility: visible; transition-delay: 0s; }
  .acc__content { padding: 0.25rem 0 clamp(1.5rem, 3vw, 2.5rem) calc(2.25rem + var(--s-4)); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.65; }
  .acc__content b { color: var(--ink); font-weight: var(--w-strong); }
  @media (min-width: 68.75em) {
    .acc__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
    .acc__content { grid-column: 5 / span 7; padding-left: 0; }
  }
  @media (max-width: 47.99em) {
    .acc__no { width: 1.75rem; }
    .acc__btn { gap: var(--s-3); }
    .acc__content { padding-left: 0; }
  }
  /* without JavaScript every answer is open and the buttons do nothing */
  .no-js .acc__panel { grid-template-rows: 1fr; }
  .no-js .acc__inner { visibility: visible; }
  .no-js .acc__icon { display: none; }

  /* --- 5.18 Site footer: the black band with the call to action --- */
  .site-footer { background: var(--ink); color: var(--inv-ink); padding-block: clamp(3.5rem, 7vw, 6rem) var(--s-6); }
  .site-footer :focus-visible { outline-color: var(--inv-ink); }
  .cta { display: grid; gap: var(--s-7) var(--gutter); margin-top: var(--block-gap); }
  .cta__title { font: var(--w-medium) var(--fs-cta) / 1.1 var(--font-sans); letter-spacing: var(--ls-h1); max-width: 16ch; }
  .cta__main { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); justify-items: start; align-content: start; }
  .cta__side { display: grid; gap: var(--s-6); align-content: start; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; font-weight: var(--w-medium); text-decoration: underline; text-decoration-color: transparent; }
  .footer-nav a:hover, .footer-nav a[aria-current="page"] { text-decoration-color: currentColor; }
  .footer-meta { display: grid; gap: var(--s-4); font-size: var(--fs-small); line-height: 1.5; }
  .footer-meta .mono { display: block; margin-bottom: 0.2rem; color: var(--inv-ink-2); }
  .footer-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.6rem; text-decoration-color: var(--inv-ink-2); overflow-wrap: anywhere; }
  .footer-meta a:hover { text-decoration-color: currentColor; }
  .site-footer__base {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6);
    margin-top: clamp(3rem, 7vw, 6rem); padding-top: var(--s-5); border-top: var(--hair) solid var(--inv-line);
  }
  .site-footer__legal { color: var(--inv-ink-2); }
  @media (min-width: 68.75em) {
    .cta { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .cta__main { grid-column: 1 / span 8; }
    .cta__side { grid-column: 10 / span 3; }
    .cta__title { max-width: none; }
  }
  @media (min-width: 48em) and (max-width: 68.74em) {
    .cta__side { grid-template-columns: 1fr 1fr; }
  }

  /* --- 5.19 Page head (Projects, Why Us, Contact, 404): the title block that opens a page --- */
  .page-head { padding-top: clamp(2.5rem, 6vw, 5rem); display: grid; gap: var(--s-5) var(--gutter); }
  .page-head__title { font: var(--w-bold) var(--fs-h1) / 1.06 var(--font-sans); letter-spacing: var(--ls-display); }
  .page-head__lead { font: var(--w-medium) var(--fs-h3) / 1.4 var(--font-sans); letter-spacing: var(--ls-h3); max-width: 34ch; }
  @media (min-width: 68.75em) {
    .page-head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .page-head > * { grid-column: 1 / span 9; }
    .page-head > .page-head__lead { grid-column: 5 / span 8; }
  }

  /* --- 5.20 Project entry (Projects page): text on the left axis, its gallery on the right axis --- */
  .project { display: grid; gap: var(--s-6) var(--gutter); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: var(--hair) solid var(--line); scroll-margin-top: var(--s-5); }   /* added to html's scroll-padding: the hairline lands under the header and the Projects bar */
  .project__title { font: var(--w-strong) var(--fs-h3) / 1.2 var(--font-sans); letter-spacing: var(--ls-h3); margin-top: 0.4rem; }
  .project__text { display: grid; gap: var(--s-5); align-content: start; }
  .project__text p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.65; }
  .project__label { display: block; margin-bottom: 0.35rem; }
  @media (min-width: 68.75em) {
    .project { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .project__text { grid-column: 1 / span 4; }
    /* the pictures stay in view while a long text scrolls past them */
    .project__media { grid-column: 5 / span 8; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
  }
  @media (max-width: 68.74em) { .project__media { order: 2; } }

  /* --- 5.21 Gallery (Projects page): one picture at a time in a rail, thumbnails and a count below --- */
  .gallery { display: grid; gap: var(--s-3); min-width: 0; }
  .gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .gallery__bar .rail-nav { margin-left: auto; }        /* arrows stay on the right when the thumbnails are hidden (phones) */
  .gallery .fig__frame { --ratio: 3 / 2; }
  .gallery .fig__cap { min-height: 1.1rem; }
  .gallery video { background: #000; }
  .thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .thumbs__btn { position: relative; width: 4rem; height: 2.75rem; overflow: hidden; background: var(--surface); opacity: 0.55; transition: opacity var(--dur-2); }
  .thumbs__btn img { width: 100%; height: 100%; object-fit: cover; }
  .thumbs__btn:hover, .thumbs__btn[aria-current="true"] { opacity: 1; }
  .thumbs__btn[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); }
  .no-js .thumbs { display: none; }
  @media (max-width: 47.99em) { .thumbs { display: none; } }

  /* a picture that opens large: the button covers the frame */
  .zoom { position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
  .zoom:focus-visible { outline-offset: -4px; }
  .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(1rem, 4vw, 3rem); border: 0; background: var(--paper); color: var(--ink); }
  .lightbox::backdrop { background: var(--paper); }
  .lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-4); animation: fade-in var(--dur-2) var(--ease-out); }
  .lightbox img { width: 100%; height: 100%; object-fit: contain; }
  .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

  /* --- 5.22 Person (Why Us team) --- */
  .people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--gutter); }
  @media (max-width: 68.74em) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 47.99em) { .people { grid-template-columns: 1fr; gap: var(--s-7); } }
  .person { display: grid; gap: var(--s-4); align-content: start; }
  .person .fig__frame { --ratio: 4 / 5; }
  .person .fig__frame img { filter: grayscale(1) contrast(1.04); }      /* six different photos, one treatment */
  .person__name { font: var(--w-bold) var(--fs-h4) / 1.3 var(--font-sans); letter-spacing: -0.012em; }
  .person__bio { font-size: var(--fs-small); line-height: 1.65; color: var(--ink-2); }
  .person__bio > * + * { margin-top: 0.9em; }
  .person__bio b { color: var(--ink); font-weight: var(--w-strong); }
  .person__id { display: grid; gap: 0.3rem; align-content: start; }
  .person { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
  .person__bio .more { margin-top: var(--s-2); margin-left: -0.125rem; }
  .person__rest > * + * { margin-top: 0.9em; }
  /* tablet: square portraits, so two cards and their opening lines fit one screen */
  @media (min-width: 48em) and (max-width: 68.74em) { .person .fig__frame { --ratio: 1 / 1; } }
  /* phone: a small square portrait beside the number and name, the bio under both, hairlines between people */
  @media (max-width: 47.99em) {
    .people { gap: 0; border-bottom: var(--hair) solid var(--line); }
    .section-head + .people { margin-top: 0; }
    .person { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-6); border-top: var(--hair) solid var(--line); }
    .person:first-child { border-top: 0; }
    .person .fig__frame { --ratio: 1 / 1; }
    .person__photo { grid-column: 1; grid-row: 1; }
    .person__id { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: var(--s-1); }
    .person__bio { grid-column: 1 / -1; }
  }

  /* a "Read more" switch: the button shows and hides the element named in aria-controls.
     The closed part (class more__rest, or person__rest) is hidden from the first paint when JavaScript runs,
     so nothing moves when site.js starts; without JavaScript everything shows. */
  .js :has(> .more[aria-expanded="false"]) > :is(.more__rest, .person__rest) { display: none; }
  :is(.more__rest, .person__rest):not([hidden]) { animation: fade-in var(--dur-3) var(--ease-out); }
  .more { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; font: 500 var(--fs-mono) / 1.4 var(--font-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink); }
  .more::before { content: "+"; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: var(--hair) solid var(--line); border-radius: var(--radius); }
  .more[aria-expanded="true"]::before { content: "\2212"; }
  .no-js .more { display: none; }

  /* --- 5.23 Pair: two blocks side by side on one rule ("Who We Help") --- */
  .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); }
  .pair > * { padding-top: var(--s-5); border-top: var(--hair) solid var(--ink); display: grid; gap: var(--s-3); align-content: start; }
  .pair p { color: var(--ink-2); }
  @media (max-width: 47.99em) { .pair { grid-template-columns: 1fr; } }

  /* --- 5.24 Contact --- */
  .contact { display: grid; gap: var(--s-7) var(--gutter); }
  .contact__info { display: grid; gap: var(--s-6); align-content: start; }
  .contact__item .mono { display: block; margin-bottom: 0.35rem; }
  .contact__item a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: var(--w-strong); overflow-wrap: anywhere; }
  @media (min-width: 68.75em) {
    .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .contact__info { grid-column: 1 / span 4; }
    .contact__main { grid-column: 5 / span 8; }
  }
  /* an outside service (scheduler, map) that loads only when the visitor asks for it */
  .embed { position: relative; display: grid; place-items: center; min-height: var(--embed-h, 28rem); border: var(--hair) solid var(--line); background: var(--surface); }
  .embed__ask { display: grid; gap: var(--s-4); justify-items: center; text-align: center; padding: var(--s-6); max-width: 30rem; }
  .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper); }
  .embed--map { --embed-h: 20rem; }
  .embed--map iframe { filter: grayscale(1) contrast(1.05); }
  /* while the service loads: a quiet "Loading" line in place of the button (the box keeps its size: no shift);
     the frame fades in once it has loaded */
  .embed__loading { display: none; }
  .embed.is-loading [data-embed-load] { display: none; }
  .embed.is-loading .embed__loading { display: block; }
  .no-js .embed__loading, .no-js .embed [data-embed-load] { display: none; }
  .embed iframe { transition: opacity var(--dur-3) var(--ease-out); }
  .embed iframe.is-pending { opacity: 0; }

  /* a small "Copy" button beside a value (Contact email) */
  .copy {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--s-3);
    color: var(--ink); border: var(--hair) solid var(--line); border-radius: var(--radius);
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
  }
  .copy:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .copy:active { scale: 0.975; }
  .copy.is-done { border-color: var(--ink); }
  .no-js .copy { display: none; }

  /* --- 5.25 Not found (404): the message fills the first screen, the footer band waits below it --- */
  .notfound {
    padding-top: clamp(3rem, 9vw, 8rem); padding-bottom: var(--s-8); display: grid; gap: var(--s-6); justify-items: start;
    min-height: calc(100svh - var(--header-h) - var(--section-gap)); align-content: center;
  }
  .notfound__code { font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); }
  .notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
}

/* ---------- 6. Utilities ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .flow > * + * { margin-top: var(--flow, 1em); }
  .nowrap { white-space: nowrap; }
  .mt-block { margin-top: var(--block-gap); }
  .mt-section { margin-top: var(--section-gap); }
  .on-desktop { display: none; }
  @media (min-width: 68.75em) { .on-desktop { display: revert; } .not-desktop { display: none !important; } }
}

/* ---------- 7. Motion ---------- */
@keyframes progress { to { scale: 1 1; } }
@keyframes fade-in { from { opacity: 0; } }

/* Scroll reveals. site.js hides an element only if it starts below the fold, then lets it rise 12 px
   and fade in once, in 320 ms. Nothing is hidden when JavaScript does not run. */
.reveal-wait { opacity: 0; translate: 0 12px; }
.reveal-go { opacity: 1; translate: 0 0; transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); transition-delay: calc(40ms * var(--i, 0)); }

/* Moving between pages: a short cross-fade; the header stays where it is. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
.site-header__bar { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .reveal-wait { opacity: 1; translate: 0 0; }
  .site-header__progress { display: none !important; }
}

/* ---------- 8. Print: everything visible, nothing sticky, black on white ---------- */
@media print {
  .site-header { position: static; }
  .site-header__progress, .menu-toggle, .rail-nav, .rail-ticks, .reel__meta, .skip, .more, .acc__icon { display: none !important; }
  .reveal-wait { opacity: 1 !important; translate: 0 0 !important; }
  .rail { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
  .acc__panel { grid-template-rows: 1fr !important; }
  .acc__inner { visibility: visible !important; }
  .site-footer { background: none; color: var(--ink); border-top: var(--hair) solid var(--ink); }
  .site-footer .btn { border-color: var(--ink); }
  .site-footer__legal, .footer-meta .mono { color: var(--ink-2); }
  .logo--inverse { color: var(--ink); }
  video { display: none; }
  .card, .row, .spec, .acc__item, .person, .project { break-inside: avoid; }
}