/* ==========================================================================
   SO·MORE - Creative Partner
   Clean, framework-free rebuild. Geometry matched to the original design at a
   1440px reference width (see CLAUDE.md for the measured tokens).
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto: the service titles only. A second family is a deliberate exception to
   the one-font rule - the client specified Roboto Bold 25pt for those four words. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Roboto-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  --color-ink: #131416;
  --color-paper: #ffffff;
  --color-white: #ffffff;
  --gold: #d4b877;         /* the one gold - everything gold on the site is this */
  /* Hover shade for the filled button only. Not a second brand gold: never use it
     as a colour in its own right. Literal, not color-mix(): behind a custom property
     an unsupported colour function is invalid at *computed*-value time, which
     resolves to `unset` - a hover state with no background at all - and no
     preceding declaration can catch that. It is --gold mixed 12% with --color-ink;
     recompute it if either ever changes. */
  --gold-hover: #bda46b;

  --bg: var(--color-ink);
  --fg: var(--color-white);
  --rule: rgba(255, 255, 255, 0.14);

  --font-sans: "Inter", "Inter Placeholder", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale (min @390 -> max @1440), matched to the original */
  --fs-display: clamp(2rem, 1.19rem + 3.62vw, 3.5rem);      /* 32 -> 56 */
  --fs-title:   clamp(1.5625rem, 0.94rem + 2.79vw, 3rem);   /* 25 -> 48 */
  --fs-col:     clamp(1.75rem, 1.66rem + 0.38vw, 2rem);     /* 28 -> 32 */
  --fs-eyebrow: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);      /* 16 -> 20 */
  --fs-body:    clamp(0.9375rem, 0.82rem + 0.54vw, 1.25rem);/* 15 -> 20 */
  --fs-list:    clamp(1rem, 0.94rem + 0.27vw, 1.0625rem);   /* 16 -> 17 */
  --fs-svc:     2.0625rem;                                  /* 33px = the specified 25pt */

  /* Layout - reference width 1440, side padding 40, content column 600, index column 408 */
  --maxw: 1440px;
  --pad-x: clamp(1.25rem, 0.3rem + 2.78vw, 2.5rem);   /* 20 -> 40 */
  --content-w: calc(min(100vw, var(--maxw)) - 2 * var(--pad-x));
  /* Index column is 30% of the content width (408/1360 at the 1440 reference),
     tied to the container rather than the viewport so it stops growing past 1440. */
  --col-index: clamp(3.5rem, calc(var(--content-w) * 0.3), 25.5rem);
  --col-body: 37.5rem;                                /* content column max 600px */
  --section-y: clamp(3.5rem, 1.9rem + 5.5vw, 5.5rem); /* 56 -> 88 */
  /* Service column rhythm, measured off docs/Capture-services-desktop.JPG. The
     picto sits deliberately tighter to its title than the text blocks do to each
     other, so these are two values, not one. */
  --svc-icon: 6.25rem;                                /* 100px - pictogram box */
  --svc-gap: 3rem;                                    /* 48px - title / subtitle / list */
  --svc-gap-icon: 2rem;                               /* 32px - picto -> title */

  /* Nav logo: --logo-h-lg at the top of the page so the wordmark outranks the H1,
     --logo-h once scrolled. The tagline derives from it (see .nav__tagline svg). */
  --logo-h: 38px;
  --logo-h-lg: clamp(2.75rem, 3.3vw, 3rem);           /* 44 -> 48 */

  /* Footer wordmark: size holds at this cap, letter-spacing absorbs the slack. */
  --wordmark-max: 100px;

  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-white);
  background: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 4. Layout primitives ----------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }

/* Everything after the hero video scrolls OVER it: opaque background + z-index 1
   above the pinned video's z-index 0. Any new full-width block needs both. */
.section { --bg: var(--color-ink); --fg: var(--color-white); --rule: rgba(255,255,255,0.14);
  position: relative; z-index: 1;
  background: var(--bg); color: var(--fg); padding-block: var(--section-y); }
.section--light { --bg: var(--color-paper); --fg: var(--color-ink); --rule: rgba(19,20,22,0.14); }

/* Numbered two-column block: big index (left) + narrow content column, left-weighted */
.block { display: grid; grid-template-columns: var(--col-index) minmax(0, var(--col-body)); column-gap: 0; align-items: start; }
.block__index { font-size: var(--fs-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; }
.block__body { max-width: var(--col-body); }

/* 5. Typography helpers ---------------------------------------------------- */
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 400; color: var(--gold); line-height: 1.5; }
.title { font-size: var(--fs-title); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; margin-top: 0.15em; }
.prose > * + * { margin-top: 0.85em; }
.text-gold { color: var(--gold); }

/* 6. Components ------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-ink); }
.nav__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 64px; padding-block: 14px; }
.nav__logo { color: var(--color-white); flex: 0 0 auto; }
.nav__logo svg { height: var(--logo-h); width: auto; transition: height 0.4s var(--ease); }
/* Bigger until the visitor scrolls, so the logo reads above the hero H1. Only the
   logo and tagline scale - the Contact pill keeps its size and stays centred. */
html:not(.is-scrolled) .nav { --logo-h: var(--logo-h-lg); }
/* margin-left sits on top of .nav__inner's gap, to open the logo/tagline pair
   specifically without spacing out the whole nav row. */
.nav__tagline { color: var(--gold); flex: 0 0 auto; margin-left: clamp(0.5rem, 1.2vw, 1rem); }
/* Outlined vector like the logo, so tracking and weight live in the paths and fill
   follows `color` - height is the only knob, and it rides --logo-h so the pair
   scales together. 0.4 is what keeps the rendered width at today's ~278px (the
   vector's glyph-width ratio is 18.2, and 0.4 x 38px = 15.2px tall). Re-derive if
   either vector is replaced. */
.nav__tagline svg { height: calc(var(--logo-h) * 0.4); width: auto; transition: height 0.4s var(--ease); }
.nav__spacer { margin-left: auto; }

.btn { --btn-fg: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.72em 1.4em; font-size: 1rem; font-weight: 500; color: var(--btn-fg);
  border: 1px solid var(--gold); border-radius: var(--radius-pill); line-height: 1;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); }
.btn:hover { background: var(--gold); color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.6em 1.2em; font-size: 0.9375rem; }
.btn--filled { background: var(--gold); color: var(--color-ink); }
.btn--filled:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

/* Two labels stacked in one grid cell: the pill is as wide as the longer of the
   two, so swapping them on hover/focus never changes its width. */
.btn__swap { display: grid; }
.btn__swap > span { grid-area: 1 / 1; transition: opacity 0.3s var(--ease); }
.btn__swap > span + span { opacity: 0; }
.btn:hover .btn__swap > span, .btn:focus-visible .btn__swap > span { opacity: 0; }
.btn:hover .btn__swap > span + span, .btn:focus-visible .btn__swap > span + span { opacity: 1; }

.rule { height: 1px; border: 0; background: var(--rule); margin-block: clamp(1.25rem, 2.4vw, 1.75rem); }
.rule--gold { background: var(--gold); }

.svc-list { list-style: none; padding: 0; }
.svc-list li { display: flex; gap: 0.6em; font-size: var(--fs-list); font-weight: 500; line-height: 1; padding-block: 0.45em; }
.svc-list li::before { content: ">"; color: var(--gold); font-weight: 500; }

/* Marquee - gold strip, ~80px tall, ~44px display words */
.marquee { position: relative; z-index: 1; background: var(--gold); color: var(--color-ink); height: 80px; display: flex; align-items: center; overflow: hidden; }
.marquee__track { display: flex; align-items: center; width: max-content; gap: clamp(1.5rem, 3vw, 2.75rem);
  white-space: nowrap; animation: marquee 26s linear infinite; }
.marquee__item { font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em; }
.marquee__sep { width: clamp(20px, 2.5vw, 34px); height: 1px; background: var(--color-ink); flex: 0 0 auto; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Hero video: pinned full-screen while the rest of the site scrolls over it.
   The runway is 200vh with -100vh of bottom margin, so it occupies one viewport
   of flow and the next section slides up across the still-pinned video, reaching
   the top exactly as the sticky releases. Hold length = height - 100vh. */
.hero-video { position: relative; z-index: 0; height: 200vh; margin-bottom: -100vh; background: var(--color-ink); }
.hero-video__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--color-ink); }
.hero-video__sticky video { width: 100%; height: 100%; object-fit: cover; }

/* Touch: there is no cursor to stand in for, so the button parks in the video's
   bottom-right corner. That is also the base state the mouse version overrides. */
.hero-video__unmute { position: absolute; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem); z-index: 2;
  width: 88px; height: 88px; border-radius: 50%; background: var(--gold); color: var(--color-ink);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; display: grid; place-items: center;
  transition: opacity 0.2s var(--ease), background-color 0.3s var(--ease); }
/* Mouse: the button stands in for the pointer, so it exists only while the pointer
   is over the video - it must vanish with it, never flash back at a resting spot.
   The native cursor is hidden, including the button's own `cursor: pointer` from
   the reset, which would otherwise always show since the button is always under
   the pointer. No easing on the position: any lerp reads as lag. */
@media (pointer: fine) {
  .hero-video__unmute { opacity: 0; pointer-events: none; }
  .hero-video__sticky.is-tracking .hero-video__unmute,
  .hero-video__unmute:focus-visible { opacity: 1; pointer-events: auto; }
}
.hero-video__sticky.is-tracking { cursor: none; }
.hero-video__sticky.is-tracking .hero-video__unmute { left: 0; top: 0; right: auto; bottom: auto; cursor: none;
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%); }

/* Scroll hint: a page-level idle prompt, not part of any section. Fixed to the
   viewport so it rides above whatever is on screen; z-index sits under the nav
   (50) and over the sections (1). JS shows it after a pause and only when there
   is actually page left below. */
.scroll-hint { position: fixed; left: 50%; bottom: clamp(1.5rem, 4vw, 3rem); z-index: 40;
  transform: translateX(-50%); color: var(--gold); opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease); }
.scroll-hint.is-visible { opacity: 1; animation: hint-bounce 1.8s var(--ease) infinite; }
.scroll-hint svg { width: 44px; height: 44px; }

/* CTA image band - full-bleed, full viewport, content centred */
.cta-band { position: relative; z-index: 1; background: var(--color-ink); }
.cta-band__inner { position: relative; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-content: center; justify-items: center; text-align: center; }
/* The <picture> carries the positioning, not the <img>, so it never lands in the grid. */
.cta-band__media { position: absolute; inset: 0; }
/* --zoom is driven by JS as the band scrolls in: 1.35 -> 1 (see main.js). */
.cta-band__img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transform: scale(var(--zoom, 1)); transform-origin: center; will-change: transform; }
/* --shift is driven by JS off the same scroll progress as --zoom: the headline and
   button start low and settle on centre as the photo fills the viewport. */
.cta-band__content { position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2rem); justify-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem); transform: translateY(var(--shift, 0px)); }

.display { font-weight: 900; font-variation-settings: "opsz" 32, "wght" 900; line-height: 0.95; letter-spacing: -0.03em; }
.display--cta { font-size: clamp(2.25rem, 0.5rem + 6vw, 5rem); color: var(--color-white); }

/* Contact form */
.form { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.field { display: grid; gap: 0.5rem; }
.field__label { font-size: var(--fs-eyebrow); font-weight: 500; color: var(--gold); text-transform: uppercase; }
.field__input, .field__textarea { width: 100%; font-size: 1.125rem; font-weight: 500; color: var(--color-white);
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.22); padding: 0.6rem 0; transition: border-color 0.3s var(--ease); }
.field__input::placeholder, .field__textarea::placeholder { color: rgba(255,255,255,0.4); font-weight: 400; }
.field__input:focus, .field__textarea:focus { outline: none; border-color: var(--gold); }
.field__textarea { resize: vertical; min-height: 7rem; }
.form__status { font-size: var(--fs-body); min-height: 1.5em; }
.form__status[data-state="ok"] { color: var(--gold); }
.form__status[data-state="error"] { color: #ff8a8a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-list { display: grid; gap: 0.75rem; }
.contact-list a { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 500; }
.contact-list svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* The footer sits pinned behind the page: its bottom glues to the viewport bottom
   while the opaque z-index-1 CTA band above slides up and uncovers it top-down, and
   at the document end it lands exactly on the last scroll position - no gap.
   `bottom: 0` can only pull a sticky box *up*, and only as far as the top of its
   containing block - so the slack has to sit above the footer, and that block has to
   reach up into the band. Hence both halves: ::before adds one footer-height of
   runway before it, and the matching negative margin slides the whole wrapper back
   up behind the band's last screenful. They cancel, so the page is no longer than
   before: the reveal reuses the scroll the footer used to just slide in on.
   --footer-h is measured in main.js (the footer is fluid); the .footer-pinned gate
   means no-JS leaves the footer in normal flow. */
html.footer-pinned .footer-pin { position: relative; z-index: 0; margin-top: calc(var(--footer-h) * -1); }
html.footer-pinned .footer-pin::before { content: ""; display: block; height: var(--footer-h); }
html.footer-pinned .footer { position: sticky; bottom: 0; }

/* Footer - lead + contacts row, then the giant gold wordmark bleeding edge to edge */
.footer { position: relative; z-index: 1; background: var(--color-ink); color: var(--color-white);
  padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 9vw, 6rem); overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.footer__lead { font-size: var(--fs-col); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em;
  max-width: 26ch; font-variation-settings: "opsz" 24, "wght" 500; }
.footer__contact { display: grid; gap: 0.7rem; text-align: right; margin-left: auto; }
.footer__contact a { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 500; }
.footer__contact svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Fills the content width exactly at any viewport up to the 1440 container cap.
   13.6 = glyph-width ratio of "LET'S WORK TOGETHER" in Inter 900 at this tracking
   (re-measure if the string or tracking changes: set font-size:100px, read the
   rendered width, divide by 100). Size stops growing at --wordmark-max; past that
   point main.js opens --track so letter-spacing takes up the remaining slack. */
.footer__display { font-weight: 900; font-variation-settings: "opsz" 32, "wght" 900; color: var(--gold);
  line-height: 0.92; white-space: nowrap;
  font-size: min(var(--wordmark-max), calc(var(--content-w) / 13.6));
  letter-spacing: calc(-0.04em + var(--track, 0px));
  margin-inline-end: calc(-1 * var(--track, 0px)); }

/* 7. Page sections --------------------------------------------------------- */

/* Hero (home) */
.hero { padding-top: clamp(2rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 14vw, 11rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.hero__title { font-size: var(--fs-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; white-space: nowrap; }
.hero__cta { margin-top: clamp(1.5rem, 2.4vw, 2.1rem); }
.hero__intro { font-size: var(--fs-body); line-height: 1.5; margin-top: clamp(0rem, 8vw, 7rem); }

/* Hero (contact) */
.hero--contact { padding-top: clamp(2.5rem, 8vw, 6rem); padding-bottom: 0; }
.hero--contact .hero__title { white-space: normal; max-width: 18ch; }
.hero__lede { margin-top: 1.25rem; max-width: 52ch; }
.hero__lede > * + * { margin-top: 0.75em; }
.hero__actionline { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.hero__actionline .rule { flex: 1; margin: 0; }

/* Services grid - four columns, then two, then one, never three (see §9). Fills the
   content width: the capture has ~310px columns reaching the container edges, not a
   narrower centred band. */
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: clamp(3rem, 9vw, 8rem); margin-top: clamp(3rem, 7vw, 6.5rem); }
.svc { text-align: center; display: grid; justify-items: center; align-content: start; }
.svc__icon { width: var(--svc-icon); height: auto; }
/* Roboto Bold 25pt, tracking 75 (= 0.075em), as specified. The old -0.03em was the
   "approche trop serrée" the client flagged. */
/* margin-inline-end cancels the trailing letter-space, which otherwise sits inside
   the line box and pulls the centred title half a tracking-step left (same fix as
   .footer__display). */
.svc__title { font-family: "Roboto", var(--font-sans); font-size: var(--fs-svc); font-weight: 700;
  line-height: 1; letter-spacing: 0.075em; margin-top: var(--svc-gap-icon);
  margin-inline-end: -0.075em; }
/* Held at three lines tall with the text centred in it, so all four lists start on
   the same line however long the sentence is - as in the capture. */
.svc__sub { color: var(--gold); font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; max-width: 24ch;
  min-height: 3.6em; display: grid; align-content: center; margin-top: var(--svc-gap); }
.svc .svc-list { text-align: left; margin-top: var(--svc-gap); }

/* Contact form section */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-intro { font-size: var(--fs-col); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 22ch;
  font-variation-settings: "opsz" 24, "wght" 500; }

/* 8. Motion ---------------------------------------------------------------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint.is-visible { animation: none; }
  .cta-band__img, .cta-band__content { transform: none; }
  .nav__logo svg, .nav__tagline svg { transition: none; }
  html.footer-pinned .footer-pin { margin-top: 0; }
  html.footer-pinned .footer-pin::before { display: none; }
  html.footer-pinned .footer { position: static; }
}

/* 9. Responsive ------------------------------------------------------------ */
/* 1100px exists for one reason: the services grid must never show three columns,
   and four of them below ~1100px wraps the gold subtitle to six or seven lines.
   In two-column mode the grid is centred on the "/ Services + More than design."
   block, which is itself offset by --col-index - not on the container. */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 6vw, 5rem);            /* double the four-column gap */
    max-width: var(--col-body); margin-inline: var(--col-index) auto; }
}
@media (max-width: 900px) {
  .block { grid-template-columns: 1fr; row-gap: clamp(1rem, 4vw, 2rem); }
  /* .block collapses to one column here, so the body column starts at the edge. */
  .services-grid { margin-inline: 0 auto; }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 6vw, 2.5rem); }
  .hero__title { white-space: normal; }
  .hero__intro { margin-top: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; row-gap: clamp(2.5rem, 10vw, 3.5rem); }
  /* One column: there is no neighbouring list to line up with, so the reserved
     third line is just dead air. */
  .svc__sub { min-height: 0; }
  .hero-video__unmute { width: 68px; height: 68px; font-size: 0.8rem; }
  .nav__tagline { display: none; }
  .footer__contact { text-align: left; margin-left: 0; }
}