/* STRENGTH Collective mock v2. Hand written: build.py copies this file to public/.
   Tokens first; no raw hex below the token blocks. */
:root {
  font-size: 10px;
  color-scheme: light;
  /* grounds: stone, brown band, teal. Black belongs to City; Collective's dark
     rooms are its own brown. On #3B1F07: band ink 14.08:1, muted 8.07:1,
     sage words 6.02:1, paper focus ring 14.08:1. */
  --ground: #DCD5CF;
  --ink: #0F1015;
  --ink-muted: #4F4A45;
  --hairline: rgba(15, 16, 21, 0.18);
  --paper: #FAF6F0;
  --band: #3B1F07;
  --band-ink: #FAF6F0;
  --band-ink-muted: #C9BBAA;  /* warm stone, so muted words sit in the brown, not grey on it */
  --band-hairline: rgba(250, 246, 240, 0.16);
  --accent: #638285;
  --accent-ink: #0F1015;
  --accent-display: #FAF6F0;
  --accent-strong: #3F5558;
  --accent-on-band: #8DA9A4;  /* sage lifted for type on the brown band */
  --knockout: #FCF9F3;
  --teal-line: rgba(15, 16, 21, 0.4);
  --teal-rule: rgba(15, 16, 21, 0.25);
  --teal-field: rgba(15, 16, 21, 0.35);
  --paper-ring: rgba(250, 246, 240, 0.9);
  --video-btn: rgba(15, 16, 21, 0.55);
  /* the drawn phone around the reel */
  --phone-body: #1B1C21;
  --phone-edge: #34363D;
  --phone-island: #050506;
  --phone-shadow: 0 4rem 8rem -3rem rgba(0, 0, 0, .7), 0 1.2rem 2.4rem -.8rem rgba(0, 0, 0, .45);
  --field-line: rgba(15, 16, 21, 0.42);
  --error: #8A2A1F;           /* 6.02:1 on --ground, 7.9:1 on --paper */
  --scrim: linear-gradient(90deg, rgba(15,16,21,.80) 0%, rgba(15,16,21,.52) 50%, rgba(15,16,21,.18) 100%),
           linear-gradient(0deg, rgba(15,16,21,.45) 0%, rgba(15,16,21,0) 40%);
  --focus: #3F5558;
  --radius-media: 12px; --radius-pill: 999rem; --radius-ctl: 4px;
  --space-xs: clamp(1.02rem, .9rem + .3vw, 1.4rem);    --space-s: clamp(1.28rem, 1rem + .6vw, 1.98rem);
  --space-m: clamp(1.6rem, 1rem + 1.1vw, 2.8rem);      --space-l: clamp(2rem, 1rem + 2vw, 3.96rem);
  --space-xl: clamp(2.5rem, .9rem + 3.2vw, 5.6rem);    --space-2xl: clamp(3.13rem, .8rem + 4.9vw, 7.92rem);
  --space-3xl: clamp(3.91rem, .5rem + 7.2vw, 11.19rem); --space-4xl: clamp(4.88rem, .3rem + 10.6vw, 15.83rem);
  --face-display: "DM Serif Display", Georgia, serif;   /* headings, normal capitals, 400 only */
  --face-text: "Poppins", system-ui, sans-serif;
  --face-brand: "Poppins", system-ui, sans-serif;       /* the word STRENGTH as a name, 900 */
  /* every display role carries an svh ceiling. Values in the comments are at 1280x689 */
  --display-hero:  min(clamp(3.2rem, 2.2rem + 2.3vw, 5.4rem), 8svh);    /* 51.4px */
  --display-band:  min(clamp(3rem, 1.9rem + 2.4vw, 5.2rem), 9svh);      /* 49.7px */
  --display-words: min(clamp(2.8rem, 1rem + 2.8vw, 4.4rem), 9svh);      /* 44px */
  --display-title: min(clamp(2.6rem, 1.8rem + 1.6vw, 4.2rem), 8svh);    /* 38.5px */
  --display-mission: min(clamp(2.4rem, 1.4rem + 1.9vw, 3.8rem), 7svh);  /* 38px */
  --display-card:  min(clamp(2.2rem, 1.8rem + 0.7vw, 2.8rem), 6svh);    /* 27px */
  --display-signature: min(clamp(4.8rem, 1rem + 10vw, 16rem), 24svh);
  --text-body: clamp(1.5rem, 1.4rem + 0.2vw, 1.65rem);
  --text-nav: clamp(1.5rem, 1.3rem + 0.4vw, 1.78rem);
  --text-label: 1.31rem;
  --text-small: 1.3rem;
  --lead-display: 1.0; --lead-body: 1.5; --track-display: -0.01em;
  /* Sister motion: slower and gentler than City. Presses and hovers 280 to 360ms on a
     soft ease-out; scroll reveals are opacity fades, no slide. */
  --t-press: 280ms; --t-2: 360ms; --t-reveal: 900ms; --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.45, .05, .55, .95);
  --header-h: 13.3rem;
  --seal: 10rem;
  --gutter-start: max(var(--space-m), calc((100% - 140rem) / 2 + var(--space-m)));
}
@media (max-width: 719px) {
  :root { --header-h: 10.4rem; --seal: 7.2rem; }
}

/* Self hosted faces: DM Serif Display 400 display, Poppins 300 to 900 text and the brand name. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab616d3c4913869c09db64f-poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab6171456f41bcbf587c571-poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab6171c56f41bcbf587cb6e-poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab617216e5ba1fda541a20d-poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab6172656518c796df5b320-poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab6172a56518c796df5b54a-poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab6172d56f41bcbf587d5bb-poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6ab61730d1a9510e8fd32d5a-poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a41b2f4b29cefb7f621-poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a48a992eea324600530-poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a510212f64e977e88d6-poppins-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a57cf1e7fd155b9ebbc-poppins-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display 400, roman and italic: Collective headings. SIL OFL, see fonts/OFL.txt. */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a6173a9ed46865b4e88-dm-serif-display-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a6698739c94a94a3f6e-dm-serif-display-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a700212f64e977e9464-dm-serif-display-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6ab5836bd857305b98a836b4/fonts/6abd8a77de228170d23d5a51-dm-serif-display-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- v2 additions to the tokens */
:root {
  /* Heroes carry the page (Dylan, 2026-09-22). Home fills the screen under the
     header; subpages stop short so the next room shows. 1280x689: 556 and 508. */
  --hero-home-h: min(104rem, calc(100svh - var(--header-h)));
  --hero-page-h: min(72rem, calc(100svh - var(--header-h) - 4.8rem));
  --display-lead: min(clamp(2rem, 1.5rem + 0.9vw, 2.6rem), 5svh);       /* 26px, a paragraph set large */
  --display-brand: min(clamp(4rem, 2.4rem + 4vw, 8rem), 11svh);       /* 75px */
  --display-strip: min(clamp(2.6rem, .8rem + 2.6vw, 4.4rem), 9svh);    /* 41px, five names on one line at 1280 */
  --measure: 62ch;
  --frame-ratio: 576 / 478;
  --thumb-w: 12rem; --thumb-h: 15rem;
  --room-h: min(44rem, 62svh);
}
@media (max-width: 719px) {
  :root { --thumb-w: 9.6rem; --thumb-h: 12rem; --room-h: 30rem; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Film grain, one fixed layer, zero bytes of image. */
body::after {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .05; mix-blend-mode: overlay; background-size: 120px 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
main > section, footer { position: relative; overflow: clip; }

.wrap { width: 100%; max-width: 140rem; margin-inline: auto; padding-inline: var(--space-m); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-m); top: -10rem; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 1rem 1.6rem; border-radius: var(--radius-ctl);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }
.brand-case { text-transform: none; }

/* grounds set their own focus ring, link and chip colours */
.g-stone { background: var(--ground); color: var(--ink); --ring: var(--focus); }
.g-dark  { background: var(--band); color: var(--band-ink); --ring: var(--paper); }
.g-teal  { background: var(--accent); color: var(--accent-ink); --ring: var(--ink); }
:focus-visible { outline: 2px solid var(--ring, var(--focus)); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------------- components */
.btn {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: 1.358rem 1.902rem; min-height: 44px;
  font-family: var(--face-text); font-weight: 600; font-size: 1.65rem; line-height: 1.5;
  letter-spacing: .05rem; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
}
.btn:active, .nav__toggle:active { transform: scale(.97); }
.btn--pill { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-pill); }
.btn--pill:hover { background: var(--knockout); }
.btn--dark { background: var(--ink); color: var(--paper); border-radius: var(--radius-ctl); }
.btn--dark:hover { background: var(--accent-strong); }
.btn--light { background: var(--paper); color: var(--ink); border-radius: var(--radius-ctl); }
.btn--light:hover { background: var(--accent); }
.btn__arrow { font-weight: 400; }

.text-link {
  font-weight: 600; text-decoration: underline; text-underline-offset: .35em;
  text-decoration-thickness: 1px; display: inline-block; padding-block: .6rem;
}
.text-link:hover { text-decoration-thickness: 2px; }

.pending {
  display: inline-flex; align-items: center;
  padding: .7rem 1.4rem;
  border: 1px dashed var(--hairline); border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: var(--text-label); font-weight: 600; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: default; user-select: none; vertical-align: middle;
}
@media (max-width: 719px) {
  .pending { font-size: 1.15rem; letter-spacing: .04em; padding: .6rem 1.1rem; }
}
.g-dark .pending, .hero .pending { color: var(--band-ink); border-color: var(--band-hairline); }
.g-teal .pending { color: var(--accent-ink); border-color: var(--teal-line); }

.eyebrow {
  font-family: var(--face-text); font-weight: 600; font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: .08em;
}
.band-title {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-band);
  line-height: var(--lead-display); letter-spacing: var(--track-display);
}
.lead {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-lead);
  line-height: 1.2; letter-spacing: var(--track-display);
}
.meta { margin-top: 1.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.frame { aspect-ratio: var(--frame-ratio); border-radius: var(--radius-media); overflow: hidden; background: var(--band); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 4 / 5; }

/* prose, at the reading measure */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.6rem; }
.prose a { text-underline-offset: .25em; }
.prose--intro { font-size: clamp(1.7rem, 1.5rem + .4vw, 2rem); line-height: 1.55; max-width: 60ch; }

/* scroll reveal: visible by default, only hidden once the script opts in, and
   the script marks anything already on screen as in before the first paint.
   A soft fade, no slide, so nothing shifts layout. --d staggers a group. */
.js-motion .reveal {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js-motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- header */
.site-header { height: var(--header-h); background: var(--ground); --ring: var(--focus); }
.site-header__bar { height: var(--header-h); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__mark { display: block; flex: none; border-radius: 50%; position: relative; z-index: 2; }
.nav__mark img, .footer__seal { will-change: transform; }
.nav__mark img { width: var(--seal); height: var(--seal); }
.nav__end { display: flex; align-items: center; }
.nav__links { display: flex; align-items: center; gap: 2.7rem; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  font-weight: 500; font-size: var(--text-nav); letter-spacing: .01em; text-decoration: none;
  color: var(--ink); line-height: 1.2; padding-block: .6rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size var(--t-2) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { background-size: 100% 2px; }
.nav__disclose {
  width: 32px; height: 44px; margin-left: .2rem; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-ctl); cursor: pointer; color: var(--ink);
}
.nav__disclose svg { transition: transform var(--t-2) var(--ease-out); }
.nav__disclose[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + 1.2rem); left: -1.6rem; z-index: 5;
  width: 38rem; padding: 1.2rem;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-media);
  display: none;
}
.nav__item.is-open .nav__sub { display: grid; gap: .2rem; }
.nav__item.is-open .nav__sub--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.nav__sub--row { width: 66rem; left: auto; right: -14rem; }
.nav__sub-link { display: grid; gap: .2rem; align-content: start; padding: 1.2rem 1.4rem; border-radius: var(--radius-ctl); text-decoration: none; }
.nav__sub-link:hover { background: var(--ground); }
.nav__sub-title { font-family: var(--face-display); font-weight: 400; font-size: 1.9rem; line-height: 1.15; }
.nav__sub-note { font-size: 1.4rem; line-height: 1.45; color: var(--ink-muted); }
.nav__social { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border-radius: 50%; }
.nav__social:hover { background: var(--paper); }
.nav__social-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__toggle { display: none; }

@media (max-width: 899px) {
  .nav__toggle {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--ink); border-radius: var(--radius-ctl); cursor: pointer;
    position: relative; z-index: 2;
  }
  .nav__toggle-lines, .nav__toggle-lines::before, .nav__toggle-lines::after {
    display: block; width: 20px; height: 2px; background: var(--ink); position: relative;
    transition: transform var(--t-2) var(--ease-out), background-color var(--t-2);
  }
  .nav__toggle-lines::before, .nav__toggle-lines::after { content: ""; position: absolute; left: 0; }
  .nav__toggle-lines::before { top: -6px; }
  .nav__toggle-lines::after { top: 6px; }
  .nav__menu {
    position: fixed; inset: 0; z-index: 1; overflow-y: auto;
    padding: calc(var(--header-h) + var(--space-l)) var(--space-m) var(--space-xl);
    background: var(--ground);
    visibility: hidden; opacity: 0;
    transition: opacity var(--t-2) var(--ease-out), visibility 0s linear var(--t-2);
  }
  .nav__links { flex-direction: column; align-items: stretch; gap: 2rem; }
  .nav__item { flex-wrap: wrap; }
  .nav__link { font-family: var(--face-text); font-weight: 500; font-size: min(3.6rem, 6svh); line-height: 1; }
  .nav__disclose { display: none; }
  .nav__sub { position: static; display: grid; width: 100%; padding: .8rem 0 0; background: none; border: 0; gap: 0; }
  .nav__sub-link { padding: .8rem 0; min-height: 44px; }
  .nav__sub-title { font-family: var(--face-text); font-weight: 600; font-size: 1.7rem; }
  .nav__sub-note { display: none; }
  .nav__social { width: auto; height: 44px; justify-content: start; gap: 1rem; display: flex; align-items: center; border-radius: var(--radius-ctl); }
  .nav__social-label { position: static; width: auto; height: auto; clip: auto; font-weight: 600; }
  .menu-open { overflow: hidden; }
  .menu-open .site-header__bar { position: fixed; inset: 0 0 auto 0; z-index: 60; }
  .menu-open .nav__menu { visibility: visible; opacity: 1; transition: opacity var(--t-2) var(--ease-out); }
  .menu-open .nav__toggle-lines { background: transparent; }
  .menu-open .nav__toggle-lines::before { transform: translateY(6px) rotate(45deg); background: var(--ink); }
  .menu-open .nav__toggle-lines::after { transform: translateY(-6px) rotate(-45deg); background: var(--ink); }
}

/* ---------------------------------------------------------------- hero */
.hero {
  display: flex; align-items: center;
  background: var(--band); color: var(--paper);
  --ring: var(--paper);
}
.hero--home { height: var(--hero-home-h); min-height: 460px; }
.hero--page { height: var(--hero-page-h); min-height: 420px; }
.hero--plain { height: auto; min-height: 0; padding-block: var(--space-3xl); }
.hero__media, .hero__media::after { position: absolute; inset: 0; }
.hero__media { overflow: hidden; }
.hero__media::after { content: ""; background: var(--scrim); z-index: 1; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.hero__slide.is-active { opacity: 1; }
.hero--page .hero__media > img, .hero__img, .hero__video {
  width: 100%; height: 100%; object-fit: cover;
  /* per-plate focal point from build.py HERO_FOCUS; the zoom scales from it too */
  object-position: var(--focus, 50% 40%); transform-origin: var(--focus, 50% 40%);
}
.hero__video { position: absolute; inset: 0; }
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.hero__eyebrow { color: var(--paper); margin-bottom: 1.4rem; }
.hero__title {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-hero);
  line-height: var(--lead-display); letter-spacing: var(--track-display);
  color: var(--paper); max-width: 18ch;
}
.hero__title--brand { text-transform: none; font-size: var(--display-brand); letter-spacing: -0.02em; max-width: none; }
.hero__title--brand span { display: block; }
/* The name lockup: STRENGTH in the shared Poppins Black, Collective in the serif italic. */
.hero__title--brand span:first-child { font-family: var(--face-brand); font-weight: 900; letter-spacing: -0.01em; }
.hero__title--brand span:last-child { font-style: italic; font-size: 1.12em; letter-spacing: 0; line-height: .95; }
.hero__content > .btn, .hero__actions { margin-top: 2.6rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.hero__sentence { margin-top: 2rem; max-width: 52ch; color: var(--paper); }
@media (max-width: 719px) {
  /* Phones: the plate fills the screen and the copy sits low, so the faces in
     the top half stay clear of the type. */
  .hero { align-items: flex-end; }
  .hero--home { height: auto; min-height: max(540px, calc(100svh - var(--header-h))); padding-block: var(--space-2xl); }
  .hero--page { height: auto; min-height: max(500px, calc(100svh - var(--header-h) - 6.4rem)); padding-block: var(--space-2xl); }
  .hero--plain { min-height: 0; }
  .hero--page .hero__media > img, .hero__img, .hero__video {
    object-position: var(--focus-m, var(--focus, 50% 40%)); transform-origin: var(--focus-m, var(--focus, 50% 40%));
  }
  /* Phone plates are portraits whose backdrop prints its own lettering, so the
     scrim darkens from the bottom, where the copy is, and stays light on top. */
  .hero__media::after {
    background: linear-gradient(0deg, rgba(15,16,21,.92) 0%, rgba(15,16,21,.78) 42%, rgba(15,16,21,.28) 78%, rgba(15,16,21,.12) 100%);
  }
}

/* Motion. Ken Burns on every hero plate: slow, from the focal point, alternating
   so it never snaps back. Home slides zoom in or out by turn under the crossfade.
   Paused on hover, focus, offscreen and hidden tab (.is-still, script.js). */
@keyframes kb-in  { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes kb-out { from { transform: scale(1.12) translate3d(-1.2%, 0, 0); } to { transform: scale(1.03); } }
@keyframes kb-page { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hero--home .hero__img { animation: kb-in 16s var(--ease-soft) infinite alternate; }
  .hero--home .hero__slide:nth-child(even) .hero__img { animation-name: kb-out; animation-duration: 19s; }
  .hero--page .hero__media > img { animation: kb-page 22s var(--ease-soft) infinite alternate; }
  .hero.is-still .hero__img, .hero.is-still .hero__media > img { animation-play-state: paused; }
  /* The hero copy fades in on load. CSS only, so it can never be left hidden. */
  .hero__content > * { animation: rise 1000ms var(--ease-out) backwards; }
  .hero__content > :nth-child(2) { animation-delay: 90ms; }
  .hero__content > :nth-child(3) { animation-delay: 180ms; }
  .hero__content > :nth-child(4) { animation-delay: 270ms; }
}

/* ---------------------------------------------------------------- series strip, dark */
.strip { padding-block: var(--space-xl); }
.strip__words { display: flex; flex-wrap: wrap; gap: 1.4rem 3.6rem; }
.strip__words .strip__word { font-size: var(--display-strip); }
.strip__word {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-words);
  line-height: var(--lead-display); letter-spacing: var(--track-display);
  color: var(--accent); text-decoration: none; display: inline-block;
  transition: color var(--t-2) var(--ease-out);
}
.g-dark .strip__word { color: var(--accent-on-band); }
a.strip__word:hover { color: var(--band-ink); }
.stat { display: grid; gap: .4rem; }

/* ---------------------------------------------------------------- statement, teal */
.statement { text-align: center; }
.statement .wrap { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.statement__text {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-mission);
  line-height: 1.08; letter-spacing: var(--track-display); color: var(--accent-display);
  max-width: 26ch;
}

/* ---------------------------------------------------------------- split feature, stone */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.feature__text > * + * { margin-top: 2rem; }
.feature__text p:not(.lead) { max-width: 48ch; }
.feature__text .chips { margin-top: 2.8rem; }
@media (max-width: 767px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}

/* ---------------------------------------------------------------- values, dark */
.values { display: grid; grid-template-columns: 1fr 1fr; }
.values__image { position: relative; min-height: 100%; }
.values__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.values__text { position: relative; z-index: 1; padding: var(--space-3xl) var(--space-m) var(--space-3xl) var(--space-2xl); max-width: 70rem; }
.values__list { margin-top: var(--space-xl); display: grid; gap: var(--space-l); }
.values__list h3 {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-title);
  line-height: var(--lead-display); letter-spacing: var(--track-display); color: var(--band-ink);
}
.values__list p { margin-top: .8rem; color: var(--band-ink-muted); max-width: 46ch; }
@media (max-width: 767px) {
  .values { grid-template-columns: 1fr; }
  .values__image { aspect-ratio: 4 / 3; }
  .values__text { padding: var(--space-3xl) var(--space-m); }
}

/* ---------------------------------------------------------------- listing split (events, faq, contact), stone */
.listing { overflow: visible; }
.listing__grid { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.listing__head { position: sticky; top: 2.4rem; display: grid; gap: var(--space-l); justify-items: start; }
.listing__intro { max-width: 40ch; }
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; padding-bottom: var(--space-xl); }
@media (max-width: 1023px) { .spotlight { grid-template-columns: minmax(0, 1fr); } }
.spotlight__name {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-title);
  line-height: 1; letter-spacing: var(--track-display); margin-block: 1.2rem 1.2rem;
}
.spotlight__name a { text-decoration: none; }
.spotlight__name a:hover { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.spotlight__text p { max-width: 50ch; }
.spotlight__action { margin-top: 2rem; }
@media (max-width: 767px) {
  .listing__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .listing__head { position: static; }
}

/* list rows with thumbnails */
.rows { display: grid; }
.row {
  position: relative; display: grid; grid-template-columns: var(--thumb-w) minmax(0, 1fr); gap: 2.4rem;
  padding-block: 2.4rem; border-top: 1px solid var(--hairline); align-items: start;
}
.rows--dark .row { border-color: var(--band-hairline); }
.row__name {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-card);
  line-height: 1.1; letter-spacing: var(--track-display);
}
.row__link { text-decoration: none; }
.row__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.row__link:hover { text-decoration: underline; text-underline-offset: .12em; }
.row__link:focus-visible { outline: none; }
.row__link:focus-visible::after { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-media); }
.row__lede { margin-top: .6rem; max-width: 52ch; }
.rows--dark .row__lede { color: var(--band-ink-muted); }
.row__text { position: relative; }
.row .pending { position: relative; z-index: 1; }

/* faq */
.faq__q {
  font-family: var(--face-display); line-height: 1.15; letter-spacing: .005em; /* the serif needs a breath at 19px */
}
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform var(--t-2) var(--ease-out); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a .pending { margin-top: 1rem; }

/* contact routes */
.route { padding-block: 2.4rem; border-bottom: 1px solid var(--hairline); display: grid; gap: .6rem; }

/* contact page: routes beside the form */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.contact__sub { margin-top: var(--space-xl); font-family: var(--face-display); font-weight: 400; font-size: var(--display-card); line-height: 1.1; }
.contact__main .band-title { margin-bottom: var(--space-l); }
@media (max-width: 899px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } .contact__main { order: -1; } }
.thanks__links { margin-top: var(--space-xl); display: grid; gap: .4rem; }

/* the form */
.form { display: grid; gap: 2.2rem; max-width: 64rem; }
.field { display: grid; gap: .8rem; }
.field__label { font-weight: 600; }
.field__opt { font-weight: 400; color: var(--ink-muted); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 1.2rem 1.6rem;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--field-line); border-radius: var(--radius-ctl);
  transition: border-color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out);
}
.field textarea { min-height: 16rem; resize: vertical; line-height: var(--lead-body); }
.field select {
  appearance: none; padding-right: 4.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M1.5 4 6 8l4.5-4' fill='none' stroke='%230F1015' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.6rem center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.form__actions { margin-top: .4rem; }
.form__status:empty { display: none; }
.form__status { font-weight: 600; }

/* ---------------------------------------------------------------- in the room, dark */
.room__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center;
}
.room__head .phone { justify-self: center; }
.room__intro > * + * { margin-top: 1.6rem; }
.room__intro p:not(:last-child) { max-width: 40ch; color: var(--band-ink-muted); font-size: clamp(1.7rem, 1.5rem + .4vw, 2rem); line-height: 1.5; }
@media (max-width: 767px) {
  .room__head { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .room__intro { justify-self: stretch; }
}
/* The drawn phone: body, bezel, island and side buttons, no device image. The
   screen is exactly 9:16, the reel's own shape, so cover crops nothing. */
.phone {
  --phone-w: clamp(22rem, 17rem + 9vw, 30rem);
  --phone-pad: calc(var(--phone-w) * .038);
  --phone-r: calc(var(--phone-w) * .15);
  position: relative; margin: 0; width: var(--phone-w); padding: var(--phone-pad);
  border-radius: var(--phone-r); background: var(--phone-body);
  box-shadow: inset 0 0 0 1.5px var(--phone-edge), inset 0 0 0 4px var(--phone-body), inset 0 0 0 5px rgba(255, 255, 255, .06), var(--phone-shadow);
  transform: rotate(2deg);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; background: var(--phone-edge); }
.phone::before { left: -3px; top: 17%; height: 5%; border-radius: 2px 0 0 2px; box-shadow: 0 calc(var(--phone-w) * .16) 0 var(--phone-edge), 0 calc(var(--phone-w) * .33) 0 var(--phone-edge); }
.phone::after { right: -3px; top: 27%; height: 10%; border-radius: 0 2px 2px 0; }
.phone__screen {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--band);
  border-radius: calc(var(--phone-r) - var(--phone-pad));
}
.phone__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__island {
  position: absolute; z-index: 1; top: 2.4%; left: 50%; width: 31%; height: 4.6%;
  transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--phone-island);
}
.phone__sound {
  position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--video-btn); border: 1px solid var(--paper-ring); color: var(--paper);
  transition: transform var(--t-press) var(--ease-out);
}
.phone__sound:active { transform: scale(.94); }
.phone__sound[hidden] { display: none; }
.phone__sound .icon-sound, .phone__sound[aria-pressed="true"] .icon-muted { display: none; }
.phone__sound[aria-pressed="true"] .icon-sound { display: block; }
.js-motion .phone.reveal { transform: rotate(2deg); }
.js-motion .phone.reveal.is-in { transform: rotate(2deg); transition-duration: 1100ms; }

/* The strip is a continuous marquee (script.js moves scrollLeft, so a swipe or a
   trackpad still scrolls it). Without the script, or under reduced motion, it is
   a plain sideways scroller. */
.room__track {
  margin-top: var(--space-2xl);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter-start); scrollbar-width: none;
}
.room__track.is-marquee { scroll-behavior: auto; }
.room__track::-webkit-scrollbar { display: none; }
.room__list { display: flex; gap: 6px; width: max-content; padding-inline: var(--gutter-start); }
.room__track.is-marquee .room__list { padding-inline: 0; }
.room__list li { flex: none; scroll-snap-align: start; }
.room__list img { height: var(--room-h); width: auto; max-width: none; }

/* ---------------------------------------------------------------- cards (events index, partner) */
.cards-room > .wrap > .band-title { margin-bottom: var(--space-xl); }
.cards-room > .wrap > .prose--intro { margin-bottom: var(--space-2xl); }
.card { position: relative; display: grid; gap: 1.8rem; align-content: start; }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:hover { text-decoration: underline; text-underline-offset: .12em; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-media); }
.card .pending { position: relative; z-index: 1; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
/* three items go in a row; they stack on phones only */
@media (max-width: 767px) {
  .cards:not(.cards--three) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- event details, dark */
.details { padding-block: var(--space-xl); }
.series-rows { padding-block: var(--space-3xl); }
.series-rows .rows { margin-top: var(--space-xl); }
.details__row { display: grid; gap: 1rem; align-content: start; }
.details__row dt { font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--band-ink-muted); }
.details__row dd { font-weight: 600; }

/* ---------------------------------------------------------------- long-form body, stone */
.body-room { padding-block: var(--space-3xl); }
.presenters { display: grid; gap: 1.2rem; }
.presenter { display: grid; }
.body-room__more { margin-top: var(--space-2xl); }

/* ---------------------------------------------------------------- closing band */
.closing { padding-block: var(--space-3xl); }
.closing__inner { display: grid; gap: 2rem; justify-items: start; }
.closing__inner p { max-width: 58ch; }
.closing__inner .text-link { color: inherit; }
.g-teal .closing__inner .band-title { color: var(--accent-ink); }

/* ---------------------------------------------------------------- resources */
.resources { padding-block: var(--space-3xl); }
.resource { padding-block: 2.8rem; border-bottom: 1px solid var(--hairline); display: grid; gap: .8rem; justify-items: start; }

/* ---------------------------------------------------------------- footer, teal */
.footer__inner { position: relative; z-index: 1; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); align-items: end;
  padding-bottom: var(--space-2xl); margin-bottom: var(--space-2xl); border-bottom: 1px solid var(--teal-rule);
}
.footer__title {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-title);
  line-height: 1; letter-spacing: var(--track-display); color: var(--accent-display);
}
.footer__intro p { margin-top: 1.2rem; max-width: 44ch; }
.footer__form label { display: block; font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; }
.footer__field { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.footer__field input {
  flex: 1 1 24rem; min-width: 0; height: 52px; padding: 0 1.6rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--teal-field); border-radius: var(--radius-ctl);
  font: inherit; opacity: .75; cursor: not-allowed;
}
.footer__tagline {
  font-family: var(--face-display); font-weight: 400; font-size: var(--display-card);
  line-height: 1.15; letter-spacing: var(--track-display); color: var(--accent-ink); max-width: 30ch;
}
.footer__nav ul { display: flex; flex-wrap: wrap; gap: .4rem 2.7rem; }
.footer__nav a {
  display: inline-block; padding-block: 1rem; font-weight: 800; font-size: var(--text-small);
  text-transform: uppercase; text-decoration: none; color: var(--accent-ink);
}
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__family { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; font-weight: 600; }
.footer__fine { margin-top: .8rem; font-size: var(--text-small); }
.footer__family + .footer__fine { margin-top: var(--space-m); }
.footer__sign { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-l); flex-wrap: wrap; }
.footer__seal { width: 18rem; height: 18rem; }
.footer__wordmark {
  margin-left: auto;
  font-family: var(--face-text); font-weight: 800; font-size: var(--display-signature);
  line-height: .8; letter-spacing: -0.03em; color: var(--ink); opacity: .16; white-space: nowrap;
}
@media (max-width: 767px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__seal { width: 12rem; height: 12rem; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .btn:active, .nav__toggle:active, .phone__sound:active { transform: none; }
  .phone { transform: none; }
}