/* ═══════════════════════════════════════════════════════════════════════
   May Fit — v1.1.2
   mayfitca.com

   Built from resources/concept/may-fit-website-concept.pdf, governed by
   resources/copy/brand-brief.md. See DESIGN.md for why anything here is
   the way it is.

   Contents
     01  Tokens
     02  Reset and base
     03  Typography primitives
     04  Buttons, rules, utilities
     05  Header, navigation, mobile menu
     06  Progress rail
     07  Hero
     08  Stats strip
     09  About
     10  Services
     11  Method
     12  Experience
     13  Contact + Fillout
     14  Footer
     15  Motion
     16  Responsive
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 01 · Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Palette, lifted from the concept generator.
     Contrast ratios are measured, not estimated — see DESIGN.md. */
  --black:        #080808;
  --ink:          #111111;
  --cream:        #F8F5EF;
  --pure-white:   #FFFFFF;
  --pale:         #ECE6DD;
  --mid:          #A9A39A;   /* on black only — 8.00:1. On cream it is 2.30:1. */
  --line-dark:    #333333;
  --line-light:   #DCD5CB;
  --panel-dark:   #151515;

  /* Two accents. The concept had one, and it failed AA in two places. */
  --accent:       #C85B43;   /* on black: 4.80:1 — decorative fills, rules */
  --accent-ink:   #A8412C;   /* on cream: 5.58:1 — accent text on light, filled buttons */
  /* A step lighter than --accent, for accent text on --panel-dark, where
     --accent is 4.38:1. Not a third accent: the same coral, lifted to pass. */
  --accent-on-panel: #CE6248; /* on --panel-dark: 4.75:1 — dark service cards */

  --muted-on-light: #5D5A55; /* 6.31:1 on cream — the --mid replacement */
  --body-on-light:  #31312F; /* 11.98:1 */
  --body-on-dark:   var(--pale);

  /* Type */
  --font-display: 'Bodoni Moda', Didot, 'Bodoni 72', 'Times New Roman', serif;
  --font-sans:    'DM Sans', 'Avenir Next', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --fs-hero:  clamp(3rem, 6.7vw, 6.1rem);
  --fs-h2:    clamp(1.85rem, 4.8vw, 3.95rem);
  --fs-h3:    clamp(1.45rem, 2.3vw, 2.1rem);
  --fs-lead:  clamp(1.12rem, 1.5vw, 1.55rem);
  --fs-body:  clamp(1.05rem, 1.28vw, 1.34rem);
  --fs-small: clamp(0.95rem, 1.1vw, 1.06rem);
  --fs-label: 0.73rem;

  --tracking-label: 0.16em;

  /* Space */
  --pad-x:      clamp(1.25rem, 4.9vw, 4.4rem);
  --section-y:  clamp(3.25rem, 6vw, 5.5rem);
  --header-h:   clamp(5.4rem, 7.2vw, 8rem);

  --radius:     4px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ── 02 · Reset and base ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

/* <picture> is inline by default, which gives a full-bleed child img no
   height to resolve 100% against. */
picture { display: block; }

h1, h2, h3, p, dl, dd, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }

/* Sections are full-viewport, so an anchor lands flush at the top of the
   viewport and you see exactly one section — not a sliver of its neighbours.
   The fixed header floats over the section rather than pushing it down, so
   every section reserves --header-h of top padding for it (--section-top). */
[id] { scroll-margin-top: 0; }

/* A section given tabindex="-1" so focus can follow a scroll must never
   show a focus ring — the user did not click it. */
section:focus { outline: none; }

/* 2.4.7 — one visible focus style, everywhere, never removed. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ── 03 · Typography primitives ──────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  overflow-wrap: break-word;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

h2.display { font-size: var(--fs-h2); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

.eyebrow--accent { color: var(--accent-ink); }
.eyebrow--muted  { color: var(--muted-on-light); }

/* On dark backgrounds the brighter accent is the accessible one. */
[data-theme="dark"] .eyebrow--accent,
.method__panel .eyebrow--accent,
.contact__form .eyebrow--accent { color: var(--accent); }

/* The dark service cards are --panel-dark, not black: --accent is 4.38:1 there. */
.service .eyebrow--accent { color: var(--accent-on-panel); }

[data-theme="dark"] .eyebrow--muted,
.quote-card .eyebrow--muted { color: var(--mid); }

/* Light cards sit inside dark sections — undo the dark-section colours. */
.service--light .eyebrow--accent { color: var(--accent-ink); }
.credentials .eyebrow--muted { color: var(--muted-on-light); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 34ch;
}

.body {
  font-size: var(--fs-body);
  line-height: 1.62;
  max-width: 46ch;
}

.body--tight { max-width: 40ch; }


/* ── 04 · Buttons, rules, utilities ──────────────────────────────────── */

.btn {
  --btn-bg: var(--black);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 0 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}

.btn--light  { --btn-bg: var(--cream);      --btn-fg: var(--black); }
.btn--accent { --btn-bg: var(--accent-ink); --btn-fg: var(--pure-white); }

.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn--light:hover { filter: brightness(0.96); }

.btn__arrow {
  flex: none;
  transition: transform 0.35s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* A secondary action as a link rather than a pill: no inner padding, so its
   icon sits flush with the eyebrow above it. Same type as .btn; the coral
   underline and the arrow mark it as a control. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.text-link__icon { flex: none; }

.text-link__label {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  transition: text-decoration-thickness 0.35s var(--ease);
}

.text-link:hover .text-link__label { text-decoration-thickness: 2px; }
.text-link:hover .btn__arrow { transform: translateX(4px); }

.rule {
  border: 0;
  border-top: 1px solid var(--line-light);
  margin: 0;
}

[data-theme="dark"] .rule { border-top-color: var(--line-dark); }

/* Service areas: a "Serving" label over a wrapping list of cities. One
   eyebrow line cannot hold four cities on a phone, so the names wrap whole,
   with a row gap that lets wrapped lines breathe. The dots are decorative,
   and unlike slashes they never strand a separator at the start of a line. */
.areas {
  display: grid;
  gap: 0.6rem;
}

.areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  color: var(--body-on-light);
}

.areas__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.areas__list li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

[data-theme="dark"] .areas__list { color: var(--pale); }

/* `.mobile-nav ul` would otherwise turn this into the nav's grid. */
.mobile-nav .areas__list { display: flex; color: var(--pale); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--black);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }


/* ── 05 · Header, navigation, mobile menu ────────────────────────────── */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  color: var(--cream);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Theme flips as the header crosses each section. */
.header[data-on="dark"]  { background: rgba(8, 8, 8, 0.86);   color: var(--cream); border-bottom-color: #303030; }
.header[data-on="light"] { background: rgba(248, 245, 239, 0.88); color: var(--ink); border-bottom-color: var(--line-light); }
/* Translucent over the hero, opaque once scrolled. The contact section is a
   cream/black split, and a translucent bar across it reads muddy. */
.header.is-scrolled { backdrop-filter: saturate(140%) blur(14px); }
.header.is-scrolled[data-on="dark"]  { background: var(--black); }
.header.is-scrolled[data-on="light"] { background: var(--cream); }

.lockup {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  text-decoration: none;
  margin-right: auto;
}

.lockup__badge {
  position: relative;
  display: block;
  flex: none;
  width: clamp(3.3rem, 5.9vw, 6.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;   /* the source PNGs have no alpha — this hides the square */
}

.lockup__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s var(--ease);
}

.header[data-on="dark"]  .lockup__logo--light,
.header[data-on="light"] .lockup__logo--dark { opacity: 0; }

.lockup__text { display: grid; gap: 0.28rem; }

.lockup__name {
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.lockup__domain {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.header[data-on="light"] .lockup__domain { color: var(--accent-ink); }

.nav__list { display: flex; gap: clamp(1.5rem, 3.3vw, 3.4rem); }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.55rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="true"]::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.menu-toggle__bars { display: grid; gap: 6px; width: 24px; }
.menu-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: var(--header-h) var(--pad-x) 3rem;
  background: var(--black);
  color: var(--cream);
}
.mobile-nav[hidden] { display: none; }

.mobile-nav ul { display: grid; gap: 0.4rem; }

.mobile-nav a {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 10vw, 3.2rem);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
}

.mobile-nav__meta {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}


/* ── 06 · Progress rail ──────────────────────────────────────────────── */

.rail {
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: grid;
  gap: 0.35rem;
  justify-items: end;
}
.rail[hidden] { display: none; }

.rail__dot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  width: 44px;
  height: 30px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.rail__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.rail__mark {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.5;
  transition: background-color 0.3s var(--ease), opacity 0.3s var(--ease),
              transform 0.3s var(--ease);
}

.rail__dot:hover .rail__label,
.rail__dot:focus-visible .rail__label { opacity: 1; transform: translateX(0); }
.rail__dot:hover .rail__mark { opacity: 1; }

.rail__dot[aria-current="true"] .rail__mark {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
  transform: scale(1.35);
}

.rail[data-on="dark"]  { color: var(--cream); }
.rail[data-on="light"] { color: var(--ink); }


/* ── 07 · Hero ───────────────────────────────────────────────────────── */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr clamp(30%, 44%, 46%);
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 100svh;
  padding: 0;
  background: var(--black);
  color: var(--cream);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(30%, 44%, 46%);
}

.hero__media picture,
.experience__media picture { height: 100%; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The concept's brightness(0.72) + a left gradient, as composited overlays
   rather than a CSS filter — see DESIGN.md. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--black) 0%, rgba(8, 8, 8, 0.55) 26%, rgba(8, 8, 8, 0) 62%),
    rgba(8, 8, 8, 0.28);
}

.hero__inner {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: 1.15rem;
  align-content: center;
  max-width: 46rem;
  padding: calc(var(--header-h) + 1.5rem) 2rem 2rem var(--pad-x);
  will-change: transform, opacity;
}

/* The credibility strip is the bottom band of screen one, as in concept
   page 1 — not a separate band that would break "one section per screen". */
.hero .stats {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 1;
}

.hero__title {
  font-size: var(--fs-hero);
  margin: 0.6rem 0 0.5rem;
  text-wrap: initial;
}

.hero__lead { color: var(--pale); max-width: 30ch; }

/* On desktop the credibility strip must stay on screen one, which leaves no
   room for a second label line — so "Serving" runs inline with the cities.
   Below 900px the hero has no such budget and the list stacks as usual. */
@media (min-width: 900px) {
  .hero .areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
  }
  .hero .areas__list { column-gap: 0.8rem; }
  .hero .areas__list li { gap: 0.5rem; }
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.hero__services {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}



/* Everything after the hero scrolls over it. */
main > section:not(.hero),
.footer {
  position: relative;
  z-index: 1;
}

/* One section per screen. min-height rather than height so a section still
   grows when its content needs more room (which is what happens on phones). */
main > section {
  min-height: 100svh;
}


/* ── 08 · Stats strip ────────────────────────────────────────────────── */

.stats {
  background: var(--cream);
  padding: clamp(1.4rem, 2.3vw, 2rem) var(--pad-x);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.stats__item + .stats__item {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}

.stats__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-transform: uppercase;
  color: var(--accent-ink);
  line-height: 1.1;
}

.stats__label {
  margin-top: 0.45rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-on-light);
}


/* ── 09 · About ──────────────────────────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: stretch;
  padding: calc(var(--header-h) + var(--section-y) * 0.6) var(--pad-x) var(--section-y);
  background: var(--cream);
}

/* space-between rather than start: the text column is shorter than the
   portrait beside it, and letting it distribute keeps the quote card seated at
   the bottom instead of leaving a dead gap under the copy. */
.about__text {
  display: grid;
  gap: clamp(0.85rem, 1.3vw, 1.15rem);
  align-content: space-between;
}
.about__text > h2 { margin-bottom: 0.5rem; }
.about__text .body { color: var(--body-on-light); }
.about__text .rule { margin-top: 1rem; }

 /* an explicit 1fr row: without it the row is auto-sized, the picture's
    height:100% is cyclic, and the portrait collapses to zero height. */
.about__media { display: grid; grid-template-rows: minmax(0, 1fr); }

.about__portrait { height: 100%; }

.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: var(--radius);
}

.quote-card {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.25rem;
  padding: clamp(1.3rem, 2.3vw, 1.9rem);
  background: var(--black);
  color: var(--cream);
  border-radius: var(--radius);
}

.quote-card__text {
  font-size: var(--fs-h3);
  text-transform: none;
  line-height: 1.18;
}


/* ── 10 · Services ───────────────────────────────────────────────────── */

.services {
  padding: calc(var(--header-h) + var(--section-y) * 0.6) var(--pad-x) var(--section-y);
  background: var(--black);
  color: var(--cream);
}

.services__head { display: grid; gap: 0.8rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.services__head .lead { color: var(--mid); max-width: 40ch; }

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.service {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--panel-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.service__title {
  font-size: var(--fs-h3);
  text-transform: none;
}

.service__body { font-size: var(--fs-small); color: var(--mid); line-height: 1.55; }

.service--light {
  background: var(--cream);
  border-color: transparent;
  color: var(--ink);
}
.service--light .service__body { color: #5E5E59; }

.service--signature {
  grid-row: span 2;
  align-content: space-between;
  gap: 1.5rem;
  position: relative;
  padding-left: clamp(2rem, 3vw, 2.75rem);
  overflow: hidden;
}

.service--signature::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background: var(--accent);
}

.service--signature .service__title {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  text-transform: uppercase;
  line-height: 1.02;
}

.service--signature .service__body {
  font-size: var(--fs-body);
  color: var(--pale);
  max-width: 32ch;
}

.service__meta { margin-top: auto; }


/* ── 11 · Method ─────────────────────────────────────────────────────── */

.method {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem);
  padding: calc(var(--header-h) + var(--section-y) * 0.6) var(--pad-x) var(--section-y);
  background: var(--cream);
}

.method__intro { grid-column: 1; grid-row: 1; display: grid; gap: 1.35rem; align-content: start; }
.method__intro .lead { color: #3F3F3B; max-width: 32ch; }
.method__intro > p:last-child { margin-top: 0.75rem; }

.method__panel {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 1.4rem;
  align-content: space-between;
  padding: clamp(1.9rem, 3.4vw, 3rem);
  background: var(--black);
  color: var(--cream);
  border-radius: var(--radius);
}

.method__focus {
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  line-height: 1.06;
  margin: 0.5rem 0 auto;
}

.method__panel-body { color: var(--mid); font-size: var(--fs-small); max-width: 38ch; }

.method__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  align-content: start;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-light);
}

.step__number {
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  color: var(--accent-ink);
  line-height: 1;
}

.step__content { display: grid; gap: 0.5rem; align-content: start; }
.step__title { color: var(--ink); font-size: 0.82rem; }
.step__content p { font-size: var(--fs-body); color: #4A4A45; line-height: 1.55; }


/* ── 12 · Experience ─────────────────────────────────────────────────── */

/* Every usable photo of May is portrait, so this section uses a contained
   photo column rather than the concept's full-bleed landscape band — filling
   a wide band from a portrait source cropped down to a close-up of her face.
   See DESIGN.md §9. Photo left / text right also breaks the text-left rhythm
   the previous four sections establish. */
.experience {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  padding: calc(var(--header-h) + var(--section-y) * 0.5) 0 var(--section-y) 0;
  background: var(--black);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}

.experience__media {
  position: relative;
  align-self: stretch;
  min-height: 32rem;
  overflow: hidden;
}

.experience__media img {
  width: 100%;
  height: 112%;      /* headroom for the parallax translate */
  object-fit: cover;
  object-position: 50% 18%;
  will-change: transform;
}

/* brightness(0.55) as an overlay, plus a right-edge fade into the black
   section so the photo column has no hard seam. */
.experience__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 8, 0.35) 0%, rgba(8, 8, 8, 0) 34%, rgba(8, 8, 8, 0.55) 88%, var(--black) 100%),
    rgba(8, 8, 8, 0.22);
}

.experience__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: var(--pad-x);
}

.experience__text { display: grid; gap: 1.2rem; }
.experience__text .lead { color: var(--pale); max-width: 34ch; }

.reasons { display: grid; gap: 0; margin-top: 0.75rem; }

.reason {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: clamp(0.9rem, 1.5vw, 1.25rem) 0;
  border-top: 1px solid #3B3B3B;
}

.reason__number { padding-top: 0.35rem; }
.reason__title { font-size: 1.35rem; text-transform: none; margin-bottom: 0.35rem; }
.reason p { font-size: var(--fs-small); color: var(--mid); line-height: 1.5; }

.credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(1.15rem, 1.9vw, 1.55rem) clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
}

.credentials .eyebrow { flex-basis: 100%; }

.credentials__lead {
  font-size: var(--fs-h3);
  text-transform: none;
  margin-bottom: 0.2rem;
}

.credentials p:not(.credentials__lead):not(.eyebrow) {
  font-size: var(--fs-small);
  color: #4E4E49;
}


/* ── 13 · Contact + Fillout ──────────────────────────────────────────── */

main > section.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  background: var(--cream);
  /* the footer sits directly under this one, so leave room for it */
  min-height: calc(100svh - 7rem);
}

.contact__intro {
  display: grid;
  gap: 1.3rem;
  /* start, not center: the embedded form makes the right column ~1340px tall,
     and centering left the intro copy floating in the middle of an empty cream
     field. Top-aligned, "05 / START HERE" lines up with "INTEREST FORM". */
  align-content: start;
  padding: calc(var(--header-h) + var(--section-y) * 0.5) clamp(2rem, 4vw, 4rem) var(--section-y) var(--pad-x);
}

.contact__intro .body { color: #3E3E3A; }
.contact__intro .rule { margin-top: 1.25rem; }
.contact__closing { font-size: var(--fs-h3); }

.contact__form {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: calc(var(--header-h) + var(--section-y) * 0.5) var(--pad-x) var(--section-y) clamp(2rem, 4vw, 4rem);
  background: var(--black);
  color: var(--cream);
}

.contact__form-title { font-size: clamp(1.4rem, 2.7vw, 2.3rem); margin-bottom: 0.5rem; }

.fillout { min-height: 26rem; }

/* Fillout's own snippet carries an inline width:100%;height:500px. Only the
   width is needed here: Fillout sizes its wrapper and iframe itself, and any
   slack sits on a black panel against a black background, so it is invisible.
   A height floor of ours would only fight Fillout's sizing. */
.fillout > [data-fillout-id] { width: 100%; }

.fillout__placeholder {
  display: grid;
  gap: 0.7rem;
  padding: 2rem;
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius);
  color: var(--mid);
  font-size: var(--fs-small);
}
.fillout__placeholder[hidden] { display: none; }

.fillout__placeholder-title {
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.04em;
}

.fillout__placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--accent);
}


/* ── 14 · Footer ─────────────────────────────────────────────────────── */

.footer {
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.9rem, 3vw, 2.5rem) var(--pad-x);
  background: var(--black);
  color: var(--cream);
}

.footer__legal,
.footer__note {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__note { color: var(--mid); }

/* The one external link on the page. Same type as the legal lines, but
   brighter and bolder so it reads as a control; min-height keeps the
   44px touch target the rest of the site commits to. */
.footer__review {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  min-height: 2.75rem;
  margin-top: -0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: text-decoration-color 0.3s var(--ease);
}
.footer__review:hover { text-decoration-color: var(--accent); }

.footer__review-icon,
.footer__review-arrow { flex: none; }
.footer__review-arrow { color: var(--accent); }


/* ── 15 · Motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { position: static; min-height: 0; }
  .btn:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Without JS the reveal class never gets .is-visible, so never hide anything. */
.no-js .reveal { opacity: 1; transform: none; }


/* ── 16 · Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .services__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .service--signature { grid-row: span 1; grid-column: 1 / -1; }
  .service--signature .service__title { font-size: clamp(2rem, 5vw, 2.6rem); }
}

@media (max-width: 1023px) {
  .rail { display: none; }

  .method { grid-template-columns: minmax(0, 1fr); }
  /* single column here, so release the explicit row/column placement */
  .method__intro,
  .method__panel { grid-column: 1; grid-row: auto; }
  .method__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { padding: 1.4rem 0; }

  .experience {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 var(--section-y);
  }
  .experience__media { min-height: 60svh; max-height: 34rem; }
  .experience__media img { object-position: 50% 12%; }
  .experience__media::after {
    background:
      linear-gradient(to bottom, rgba(8, 8, 8, 0.3) 0%, rgba(8, 8, 8, 0) 45%, rgba(8, 8, 8, 0.75) 88%, var(--black) 100%),
      rgba(8, 8, 8, 0.22);
  }
  .experience__inner { padding: 0 var(--pad-x); }

  /* must match the base rule's specificity (main > section.contact), or the
     two-column layout survives here and overflows narrow viewports. */
  main > section.contact { grid-template-columns: minmax(0, 1fr); }
  /* Bottom padding: the review button is the last thing in this column and
     must not butt against the black form panel below it. */
  .contact__intro { padding: calc(var(--header-h) + var(--section-y) * 0.5) var(--pad-x) var(--section-y); }
  .contact__form  { padding: var(--section-y) var(--pad-x); }
}

@media (max-width: 899px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }

  /* The hero photo becomes a full-bleed background with the text over it. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-right: var(--pad-x);
    align-items: end;
    padding-bottom: 5.5rem;
  }
  .hero__media { inset: 0; width: 100%; }
  .hero__media img { object-position: 50% 12%; }
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(8, 8, 8, 0.5) 0%, rgba(8, 8, 8, 0.35) 32%, rgba(8, 8, 8, 0.92) 78%, var(--black) 100%),
      rgba(8, 8, 8, 0.2);
  }
  .hero__inner { align-content: end; padding-right: 0; }
  .hero__actions { gap: 1.1rem; }
  .hero__services { font-size: 0.72rem; }

  .about { grid-template-columns: minmax(0, 1fr); }
  .about__media { order: -1; }

  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .service--signature { grid-column: auto; }
}

@media (max-width: 639px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .stats__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats__item:nth-child(3),
  .stats__item:nth-child(4) { padding-top: 1.5rem; border-top: 1px solid var(--line-light); }

  .btn { width: 100%; justify-content: space-between; }
  .hero__actions { display: grid; width: 100%; }

  .reason { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .lockup__domain { display: none; }
}