/* ==========================================================================
   Ty PT-Fitness stylesheet, alternate visual treatment.

   Same palette as the main site, restyled after the editorial-brutalist
   layout of fit-and-you.webflow.io: very large condensed uppercase display
   type set tight, a near-full-bleed container, hairline rules in place of
   cards, square corners with pill buttons, and the accent used as a fill.

   Sections: 1 tokens · 2 reset · 3 base · 4 layout · 5 components
             6 pages · 7 utilities · 8 media queries
   ========================================================================== */

/* 1. TOKENS ============================================================== */

:root {
  /* Palette. Unchanged from the main site, and pinned by
     tests/check_site.py check_palette(). Do not edit either in isolation. */
  --ink: #0B0B0C;
  --panel: #151619;
  --red: #D6202B;
  --red-deep: #8E1119;
  --steel-light: #C9CDD2;
  --steel-dark: #7E858E;
  --paper: #F2F3F4;

  /* Alpha variants of the palette above. These live in :root because
     check_raw_colors() strips only this block before scanning for literal
     colour values, so an rgba() anywhere else is a test failure. */
  --ink-a94: rgba(11, 11, 12, 0.94);    /* --ink at 94%, sticky header */
  --red-a22: rgba(214, 32, 43, 0.22);   /* --red at 22%, hero wash */
  --steel-a30: rgba(201, 205, 210, 0.30); /* hairline rules between rows */

  /* Build-time-only marker colour for [data-pending] callouts; never
     ships to a live site, so it is not part of the shipped palette. */
  --amber: #E5A50A;

  /* Type. Antonio replaces Oswald: it is the condensed face the reference
     layout is built around, and swapping rather than adding keeps the
     font count, and so the performance budget, unchanged. */
  --font-display: "Antonio", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.9375rem;   /* 15px, captions, eyebrows and legal text only */
  --step-0: 1rem;         /* 16px, body minimum, and the floor for any
                             interactive label such as a button or nav link */
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.9531rem;
  --step-4: 2.4414rem;
  --step-5: 3.0518rem;

  /* Display size for h1, h2 and the CTA band. 11vw is derived, not picked:
     the reference renders 140.8px at a 1280px viewport and 140.8 / 1280 is
     exactly 0.11, so this reproduces it at that width and holds at 8.8rem
     above it. The 2.75rem floor is what a 375px phone gets. */
  --step-display: clamp(2.75rem, 11vw, 8.8rem);
  --track-display: -0.06em;
  --lead-display: 0.94;
  --track-label: 0.08em;   /* uppercase labels need the opposite treatment */

  /* Letter-spacing shrinks the space glyph along with everything else, so
     the tight display tracking above closes the gaps between words as well
     as between letters. Measured at 1280px, display headings came out at
     0.119em between words against 0.28em in the body copy, which is less
     than half the breathing room relative to type size. These put it back
     without loosening the letterforms the style depends on. */
  --word-display: 0.12em;
  --word-title: 0.06em;

  /* Space */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(4rem, 10vw, 10.8rem);  /* the reference's 172.8px */

  /* Other */
  /* Tallest the sticky header gets in this state, used to offset anchor
     jumps so a heading never lands behind it. Without JavaScript the nav is
     permanently expanded, which is the tall case.

     Measured in a browser at the target width on a fresh load, never
     calculated, and re-measured after any header change. Values as at
     2026-08-04, index.html:

       375px, no JavaScript ... 307px  (this token)
       375px, JavaScript ...... 199px  (the .js rule below)
       1280px, either ......... 161px  (the 768px block in section 8)

     The open mobile menu reaches 509px and is deliberately excluded: an
     anchor is only ever jumped to on arrival at a page, when the menu is
     closed. */
  --header-h: 307px;

  --logo-h: 96px;           /* narrow screens, see the 768px block */
  --logo-h-compact: 72px;   /* after main.js adds .is-compact on scroll */

  --measure: 68ch;
  --radius: 0;              /* the reference is square everywhere ... */
  --radius-pill: 999px;     /* ... except its buttons */
  --border-steel: 1px solid var(--steel-a30);
  --transition: 180ms ease;
}

/* With JavaScript the nav collapses behind the menu button, so the header
   is 108px shorter than the no-JavaScript case above. Omitting this rule
   leaves the phone-with-JavaScript state using the no-JavaScript figure and
   over-clearing every anchor by 108px. */
.js { --header-h: 199px; }

/* 2. RESET =============================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* 3. BASE ================================================================ */

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* h1 and h2 share one size deliberately. The reference sets its section
   headings as large as its hero, and that flatness is a large part of why
   the page reads the way it does. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--step-display);
  letter-spacing: var(--track-display);
  word-spacing: var(--word-display);
  line-height: var(--lead-display);
  text-wrap: balance;
}

/* The display face runs at 0.94 leading and up to 8.8rem, so whatever
   follows a heading lands hard against its descenders and reads as
   crowded. `* { margin: 0 }` further up means nothing puts that space
   back. This does, for the display sizes only: h3 and h4 set their own
   spacing per component.

   The universal selector keeps it to one rule for ledes, paragraphs and
   the lists that open a section. Specificity is (0,0,1), so any component
   that already declares its own margin-top, such as .offer__list or
   .direct__list, still wins and is left exactly as it was. */
h1 + *,
h2 + * { margin-top: var(--space-md); }

/* The footer reuses <h2> for its column headings but restyles them down to
   16px, so they are not display type and were never crowded. Put them back
   to flush. Kept as a separate reset at (0,1,0) rather than folding a
   :not() into the rule above, because that would lift it to (0,1,1) and it
   would start overriding component margins such as .direct__list's. */
.site-footer__heading + * { margin-top: 0; }

h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  word-spacing: var(--word-title);
  line-height: 1.05;
}

h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); }

a { color: var(--paper); text-decoration-color: var(--red); }
a:hover { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* 4. LAYOUT ============================================================== */

/* Near-full-bleed. The reference runs its content to the viewport edges on
   a wide grid rather than a narrow centred column; --measure still caps
   paragraph width, so long-form text stays readable. */
.wrap {
  width: min(100% - 3rem, 1440px);
  margin-inline: auto;
}

/* Rhythm carried by bottom padding alone, as the reference does. */
.section { padding-block: 0 var(--space-3xl); }

/* The first section on an inner page would otherwise sit hard against the
   header, which only looks deliberate on the homepage, where the hero
   supplies its own top padding. */
main > .section:first-child { padding-top: var(--space-2xl); }

/* 5. COMPONENTS ========================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-a94);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-steel);
}

/* The mark leads from the left on its own baseline rather than sitting
   centred above the nav, which is what lets the whole header collapse to a
   single row on desktop. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-sm);
  column-gap: var(--space-md);
  padding-block: var(--space-sm);
}

/* margin-right: auto pushes the menu button to the far edge of the first
   row without taking it out of the flow. The main site positioned that
   button absolutely to protect a centred mark; with the mark left-aligned
   that reason is gone, and so is the 1000px breakpoint that propped it up. */
.site-header__brand {
  flex: 0 0 auto;
  margin-right: auto;
  display: flex;
}

.site-header__brand img {
  width: auto;
  height: var(--logo-h);
  transition: height var(--transition);
}

/* main.js adds .is-compact once the page scrolls, so the mark gives its
   height back to the viewport on the way down. */
.js .site-header.is-compact .site-header__brand img {
  height: var(--logo-h-compact);
}

/* The button only exists when JavaScript can operate it. Without the script
   the navigation is already expanded, so an unstyled button that does
   nothing when pressed is worse than no button.

   Appearance is set further down and `display` deliberately is not repeated
   there: a second declaration at equal specificity would win on source
   order and put the button back when JavaScript is unavailable. */
.nav-toggle { display: none; }
.js .nav-toggle { display: inline-flex; }

/* Full row of its own on narrow screens, so the links wrap under the mark
   rather than fighting it for width. */
.nav { flex: 1 1 100%; min-width: 0; }

.nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

/* The script-driven mobile menu stacks, which is what people expect from a
   menu they just opened. */
.js .nav.is-open .nav__list { flex-direction: column; }

/* Sits in the header banner at every width, outside the collapsing nav so
   a phone visitor can still reach the form while the menu is closed. */
.nav__cta { flex: 0 0 auto; }

.nav__link {
  display: block;
  padding: var(--space-xs) 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
}
.nav__link[aria-current="page"] { color: var(--red); }

.nav-toggle {
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-pill);
  color: var(--paper);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--paper);
}

.nav-toggle__bar {
  position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }

/* Buttons --------------------------------------------------------------- */

/* Pills, flat fills, no gradient and no lift on hover. The reference
   inverts its buttons on hover instead of moving them, which is both
   closer to its character and one less thing to switch off under
   prefers-reduced-motion. */
.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.btn--primary {
  background: var(--red);
  color: var(--paper);
}
.btn--primary:hover { background: var(--paper); color: var(--ink); }

/* The one place the darker red still earns its keep now that the button
   gradients are gone: a pressed state that reads as pressed without
   moving anything. */
.btn--primary:active { background: var(--red-deep); color: var(--paper); }

/* The reference's bracket motif. Decorative, and it does add "[+]" to the
   accessible name a screen reader reads out, so it is confined to primary
   calls to action whose label already stands on its own. */
.btn--primary::after { content: " [+]"; }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--steel-light);
}
.btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn--lg { padding: 1.05rem 2.3rem; font-size: var(--step-1); }

/* Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--panel);
  border-top: 2px solid var(--red);
  padding-block: var(--space-xl) var(--space-md);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
}
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: var(--track-label);
  color: var(--steel-light);
  margin-bottom: var(--space-xs);
}
.site-footer__list { list-style: none; padding: 0; }
.site-footer__address { font-style: normal; }
/* The mark is 400x393, not square. Pinning both axes to 84px squashed it
   by 1.8%; height:auto keeps the real aspect ratio. */
.site-footer__logo { width: 84px; height: auto; }
.site-footer__legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-steel);
  font-size: var(--step--1);
  color: var(--steel-light);
}

/* Pending client facts. Must never survive to launch. */
.pending {
  display: inline-block;
  padding: 0 0.35em;
  border: 1px dashed var(--amber);
  border-radius: 2px;
  color: var(--amber);
  font-style: italic;
}

/* 6. PAGES =============================================================== */

/* Home ------------------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: var(--space-2xl) var(--space-3xl);
  background:
    radial-gradient(ellipse at 15% 0%, var(--red-a22), transparent 62%),
    var(--ink);
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-md);
}

.hero__title { margin-bottom: var(--space-lg); }

.hero__lede {
  font-size: var(--step-1);
  color: var(--steel-light);
  margin-bottom: var(--space-lg);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Rows, not cards. gap is 0 on purpose: the bottom rule of one row meets
   the next without a break, so a multi-column grid reads as a ruled table
   the way the reference's class list does. Horizontal breathing room comes
   from padding inside each row instead. */
.doors__grid,
.proof__grid,
.steps__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-xl);
  display: grid;
  gap: 0;
  border-top: var(--border-steel);
}

.door,
.proof__item,
.step {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-bottom: var(--border-steel);
}

.door__title { color: var(--paper); margin-bottom: var(--space-sm); }
.door p, .proof__item p, .step p { color: var(--steel-light); }

.proof__item h3,
.step h3 { margin-bottom: var(--space-sm); }

/* The markup carries a bare "1", "2", "3" in a span that is already
   aria-hidden, so prefixing a zero here is decorative only and changes
   nothing that is read aloud. */
.step__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem);
  color: var(--red);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin-bottom: var(--space-sm);
}
.step__number::before { content: "0"; }

/* About ----------------------------------------------------------------- */

.bio__inner { display: grid; gap: var(--space-lg); }

.bio__media img {
  border-radius: var(--radius);
  background: var(--panel);
}

.bio__lede {
  font-size: var(--step-1);
  color: var(--steel-light);
  margin-bottom: var(--space-md);
}

.bio__text p { margin-bottom: var(--space-md); }

.creds {
  background: var(--panel);
  border-block: var(--border-steel);
  padding-block: var(--space-xl);
}

.creds__list {
  list-style: none;
  padding: 0;
  margin-block: var(--space-lg) 0;
  display: grid;
  gap: 0;
  border-top: var(--border-steel);
}

.creds__list li {
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: var(--border-steel);
}

.creds__note {
  font-size: var(--step--1);
  color: var(--steel-light);
  margin-top: var(--space-md);
}

.approach p { margin-bottom: var(--space-md); }

/* Services -------------------------------------------------------------- */

.lede {
  font-size: var(--step-1);
  color: var(--steel-light);
}

.offer--alt { background: var(--panel); padding-block: var(--space-xl); }

.offer__list {
  margin-top: var(--space-md);
  padding-left: 1.2em;
}
.offer__list li { margin-bottom: var(--space-xs); }
.offer__list li::marker { color: var(--red); }

.specialisms__intro {
  font-size: var(--step-1);
  color: var(--steel-light);
  margin-bottom: var(--space-xl);
}

/* One specialism: a subheading and its detail, presented as a ruled row.
   Four of these carry the anchor IDs the Home page door rows link to, so
   they need scroll-margin to clear the sticky header when jumped to. */
.specialisms { counter-reset: spec; }

.spec {
  counter-increment: spec;
  scroll-margin-top: calc(var(--header-h) + var(--space-lg));
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-top: var(--border-steel);
}

.spec::before {
  content: counter(spec, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.spec h3 {
  color: var(--paper);
  margin-bottom: var(--space-sm);
}

.spec p { margin: 0; color: var(--steel-light); }
.spec p + p { margin-top: var(--space-sm); }

/* Qualifying note on the junior and senior blocks. */
.spec__note {
  font-size: var(--step--1);
  color: var(--steel-light);
}

.pricing__line {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  word-spacing: var(--word-title);
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.pricing { background: var(--panel); padding-block: var(--space-xl); }
.pricing p { margin-bottom: var(--space-md); }

/* Results --------------------------------------------------------------- */

.disclaimer {
  margin-top: var(--space-lg);
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-left: 2px solid var(--steel-light);
  font-size: var(--step--1);
  color: var(--steel-light);
  max-width: var(--measure);
}

/* Slideshow. Until JavaScript adds .is-live the slides are a plain stacked
   list, so no result is ever hidden from a visitor without scripting. */
.slider__track {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.slider.is-live .slider__track { display: block; }
.slider.is-live .slide { display: none; }
.slider.is-live .slide.is-current { display: block; }

.slider.is-live:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 6px;
}

.slider__controls[hidden] { display: none; }

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Border stays on --steel-dark rather than a hairline: a control boundary
   has to clear 3:1 against the background, and --steel-dark measures
   5.3:1 on --ink where the 30% hairline manages only 2.4:1. */
.slider__btn {
  width: 3rem;
  height: 3rem;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--steel-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
.slider__btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.slider__btn:disabled { opacity: 0.35; cursor: default; }

.slider__count {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: var(--track-label);
  color: var(--steel-light);
  margin: 0;
  min-width: 5ch;
  text-align: center;
}

.slide figure {
  margin: 0;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
}

.testimonials { background: var(--panel); padding-block: var(--space-xl); }

/* One slide fills the stage, capped so a tall portrait photograph does not
   dominate a desktop screen. */
.slider.is-live .slide figure {
  max-width: 34rem;
  margin-inline: auto;
}

/* Contact --------------------------------------------------------------- */

.enquiry { background: var(--panel); padding-block: var(--space-xl); }

/* The enquiry form was removed on 2026-08-07 in favour of a direct mailto
   link, and its styles went with it: .form, .form__row, .form__error,
   .form__privacy and .form__honeypot. Nothing on the site takes input now.
   #FF6B72 went too, which was the lighter red .form__error needed to clear
   4.5:1 on --panel, so the harness no longer allows it as a raw colour. */

.enquiry__action { margin-top: var(--space-lg); }

.direct__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-lg);
  display: grid;
  gap: 0;
  border-top: var(--border-steel);
}
.direct__list li {
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: var(--border-steel);
}

.location__address {
  font-style: normal;
  font-size: var(--step-1);
  margin-bottom: var(--space-md);
}

.location__map {
  width: 100%;
  height: 380px;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius);
}

/* Reviews --------------------------------------------------------------- */

/* Filled accent panel, matching how the reference uses its own accent as a
   block fill. --paper on --red is 5.1:1. */
.rating {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--red);
  color: var(--paper);
  max-width: 24rem;
}

.rating__score {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--paper);
  margin: 0;
}

.rating__meta { margin: 0; }

/* Prose pages ----------------------------------------------------------- */

.prose { max-width: var(--measure); }

/* Display-size h2s are right for a marketing section and wrong for a
   privacy notice with a dozen of them, so this pulls them back down. */
.prose h2 {
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.prose p { margin-bottom: var(--space-md); }

/* 7. UTILITIES =========================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 8. MEDIA QUERIES ======================================================= */

/* Collapsed navigation is opt-in: main.js sets .js on <html> at parse time.
   Without JavaScript the menu stays open and usable. */
.js .nav { display: none; }
.js .nav.is-open { display: block; }

/* A media query adds no specificity. Every rule in here that has to beat a
   .js-prefixed rule above therefore carries the same .js prefix. Dropping
   one has hidden the desktop nav and resurrected the menu button on
   desktop on the main site, three separate times. */
@media (min-width: 768px) {
  :root { --header-h: 161px; }
  .js { --header-h: 161px; }

  /* The mark is large enough here to be the thing that sets header
     height, so it is worth the room. */
  :root { --logo-h: 128px; --logo-h-compact: 80px; }

  /* Everything on one row: mark left, links centred in what is left,
     enquiry button hard right. */
  .nav { flex: 1 1 auto; }
  .nav__list { justify-content: center; gap: var(--space-sm) var(--space-lg); }
  .nav-toggle { display: none; }
  .js .nav-toggle { display: none; }
  .js .nav,
  .js .nav.is-open { display: flex; align-items: center; }

  .doors__grid { grid-template-columns: repeat(2, 1fr); }
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .steps__list { grid-template-columns: repeat(3, 1fr); }
  .creds__list { grid-template-columns: repeat(3, 1fr); }
  .direct__list { grid-template-columns: repeat(3, 1fr); }

  .bio__inner { grid-template-columns: 320px 1fr; align-items: start; }
  .site-footer__inner { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .doors__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}