/* ============================================
   CONSULT GQ — DESIGN SYSTEM (V2)
   ============================================ */

:root {
  /* Palette — near-monochromatic, warm gold as micro-accent only */
  --warm-white: #FAF7F2;
  --stone: #E7E1D6;
  --stone-line: #DDD5C6;
  --warm-grey: #8C8477;
  --charcoal: #33302B;
  --soft-black: #1A1815;
  --gold: #A9812E;

  /* Type */
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;

  /* Shared large headline size for the paired "Why Consult GQ" / "What I
     Do" introductions — see .paired-heading. */
  --paired-section-heading-size: clamp(34px, 4.6vw, 58px);

  /* Rhythm */
  --section-pad: clamp(60px, 5.6vw, 84px);
  --section-pad-tight: clamp(26px, 3.4vw, 50px);
  --gutter: clamp(24px, 6vw, 80px);
  --max-w: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--soft-black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; color: var(--soft-black); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 20px;
}

.section-headline {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.section-copy {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 56ch;
  margin-top: 22px;
}

/* ---- Shared editorial photo shadow ----
   One reusable, restrained shadow for real photography only: soft, warm
   (tinted with --soft-black, never neutral grey) separation from the
   off-white background. Deliberately not a "floating card" effect — no
   rounded corners, no border. Never applied to logos, placeholders, text
   panels, buttons, full-bleed imagery, or the header/footer. */
.photo-shadow {
  border-radius: 0;
  box-shadow:
    0 3px 8px rgba(26, 24, 21, 0.07),
    0 20px 40px rgba(26, 24, 21, 0.14);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--soft-black);
  color: var(--warm-white);
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--soft-black);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--soft-black);
  border-color: var(--soft-black);
}
.btn-outline:hover {
  background: var(--soft-black);
  color: var(--warm-white);
}

.btn-ghost {
  background: transparent;
  color: var(--soft-black);
  border-color: rgba(26,24,21,0.25);
  padding: 10px 22px;
}
.btn-ghost:hover {
  border-color: var(--soft-black);
}

/* Header "Start a conversation" now reuses .btn-primary — the exact same
   class as the hero's dark "Start a conversation" button — so both share
   one set of styles: same charcoal-dark background, light text, border,
   dimensions, padding, typography, gold hover fill and hover transition/
   lift (no duplicated ruleset). The one addition scoped to this button:
   keyboard focus gets the identical filled appearance as hover, matching
   .btn-primary:hover exactly, layered on top of the site's existing
   global focus-visible outline. */
.btn.header-cta:focus-visible {
  background: var(--gold);
  color: var(--soft-black);
  transform: translateY(-1px);
}

.btn-large { padding: 19px 36px; font-size: 15px; margin-top: 8px; }

.is-placeholder { cursor: default; opacity: 0.55; }
.is-placeholder:hover { background: transparent !important; color: inherit !important; border-color: inherit !important; transform: none !important; }

/* ============================================
   HEADER
   ============================================ */

.progress-line {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
  z-index: 200;
  transition: width 0.1s linear;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stone-line);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(24px, 2.8vw, 38px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
}

.wordmark {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.wordmark-consult { color: var(--soft-black); }
.wordmark-gq { color: var(--gold); }

/* Header identity — significantly more presence than the base .wordmark
   (still used at its original size in the footer). Scoped to the header
   only; the same font, weight and proportional letter-spacing carry
   through unchanged, just larger. */
.site-header .wordmark {
  font-size: clamp(22px, 2.2vw, 30px);
}

.primary-nav {
  display: flex;
  gap: 36px;
  margin-left: auto;
}

.primary-nav a {
  font-size: 14px;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 4px;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a.is-active::after { width: 100%; }

.header-cta { flex-shrink: 0; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--soft-black);
  width: 100%;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(320px, 82vw);
  background: var(--warm-white);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 100px 40px 40px;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  box-shadow: -12px 0 40px rgba(0,0,0,0.08);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a { font-size: 18px; font-family: var(--font-serif); }

.mobile-nav a:not(.btn) {
  position: relative;
  align-self: flex-start;
  padding-bottom: 4px;
}
.mobile-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.mobile-nav a:not(.btn):hover::after,
.mobile-nav a:not(.btn).is-active::after { width: 100%; }

.mobile-nav .btn { margin-top: 12px; justify-content: center; }

/* ============================================
   MOMENT 1 — HERO / PROPOSITION
   ============================================ */

.hero {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: clamp(120px, 15vw, 168px) var(--gutter) clamp(64px, 7vw, 96px);
}

.hero-inner { max-width: 1180px; margin: 0 auto; width: 100%; }

.hero-headline {
  font-size: clamp(46px, 8.4vw, 118px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: balance;
}

.hero-break { display: block; }

.hero-promise {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-black);
  margin-top: 40px;
}

.hero-inner .btn { margin-top: 56px; }

/* ============================================
   MOMENT 2 — GAVIN: PERSON AND CREDIBILITY
   One portrait-led, asymmetric introduction. The right column's hero is
   the Netflix / Disney / Diageo logo row — proof of where Gavin's career
   has taken place, immediately qualified as career history rather than a
   Consult GQ client list.
   ============================================ */

.gavin-intro {
  padding: var(--section-pad) var(--gutter);
  border-top: 1px solid var(--stone-line);
}

.gavin-grid {
  display: grid;
  grid-template-columns: 0.62fr 0.94fr;
  gap: clamp(48px, 6.4vw, 100px);
  align-items: center;
}

.gavin-portrait {
  position: relative;
  margin: 0;
  max-width: 420px;
}
.gavin-portrait::after {
  content: '';
  position: absolute;
  bottom: -22px; left: -22px;
  width: 64px;
  height: 1px;
  background: var(--gold);
}
.gavin-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

/* Section-copy carries its own reading-width cap (below), so the column
   itself only needs a soft outer ceiling — the grid track (up to ~620px
   at this site's max content width) is what actually governs it. */
.gavin-text { max-width: 640px; }

/* Logo row — the visual hero of this column. Each mark keeps its native
   proportions (only height is set; width is auto), and the three heights
   are tuned individually rather than shared, because the same pixel
   height reads as very different visual weight across a bold blocky
   wordmark (Netflix), a loose script mark with a lot of internal
   whitespace (Disney) and a light, compact wordmark (Diageo). Scaling all
   three by the same factor keeps them in that same balance as the row
   grows larger or smaller, and keeps the full row inside this column's
   width (as narrow as ~410px just above the mobile breakpoint) without
   wrapping on desktop. */
.gavin-logo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: clamp(20px, 2.6vw, 36px);
  row-gap: 24px;
  margin-top: 4px;
}
.gavin-logo {
  display: block;
  width: auto;
  opacity: 0.88;
}
.gavin-logo-netflix { height: clamp(28px, 3vw, 48px); }
.gavin-logo-disney  { height: clamp(38px, 4.2vw, 64px); }
.gavin-logo-diageo  { height: clamp(24px, 3vw, 44px); }

.gavin-caveat {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--warm-grey);
  margin-top: 16px;
}

.gavin-text .section-copy { margin-top: 24px; max-width: 54ch; }
.gavin-text .section-copy + .section-copy { margin-top: 16px; }

.gavin-text .craig-cta { margin-top: 28px; }

/* ============================================
   SHARED — PAIRED INTRODUCTIONS
   "Why Consult GQ" (in About) and "What I Do" share one grid: an eyebrow
   alone in row one (left column only), then a large headline in row two,
   column one, with the supporting copy in row two, column two — so the
   copy's first line aligns with the top of the headline, never the
   eyebrow. Every part of this structure (content width, column widths,
   column gap, row gap, alignment and the headline's type) is identical
   between the two sections; only the words differ. ---- */

.paired-intro-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-areas:
    "eyebrow  .   "
    "headline copy";
  column-gap: clamp(32px, 4.4vw, 56px);
  row-gap: 22px;
  align-items: start;
}

.paired-eyebrow { grid-area: eyebrow; margin-bottom: 0; }

/* Shared large headline treatment for "A different kind of partnership."
   and each of "I advise." / "I grow." / "I represent." — one property,
   used identically everywhere, so the four statements render as a single
   typographic unit. */
.paired-heading {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--paired-section-heading-size);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.paired-copy-col { grid-area: copy; align-self: start; }
.paired-copy { max-width: 58ch; margin-top: 0; }
.paired-copy + .paired-copy { margin-top: 16px; }

/* Compact "Why Consult GQ" block — sits inside the About section, after
   Gavin's career introduction and credentials. Deliberately lighter than a
   full section (reduced top spacing, no section-pad) so it reads as part
   of About rather than a new full-page section. */
.gavin-why {
  margin-top: clamp(40px, 5.2vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--stone-line);
}

.gavin-why-headline {
  grid-area: headline;
  max-width: 14ch;
}

/* ============================================
   SHARED SECTION SPACING
   ============================================ */

.work { padding: var(--section-pad) 0; }
.work-head { padding-bottom: var(--section-pad-tight); }

/* Dark-mode outline-button override reused by any .how-i-work-based homepage section */
.how-i-work .btn-outline { border-color: rgba(250, 247, 242, 0.4); color: var(--warm-white); }
.how-i-work .btn-outline:hover { background: var(--warm-white); color: var(--soft-black); }

/* ============================================
   SELECTED WORK / IN-PRACTICE SHARED PATTERNS
   (used by selected-work.html, representation.html
   and the homepage's Craig Black + portfolio panels)
   ============================================ */

.work-feature {
  width: 100%;
  margin: 0;
}

.work-feature img {
  width: 100%;
  height: clamp(380px, 52vw, 780px);
  object-fit: cover;
  object-position: center 68%;
}

.work-feature-caption {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(20px, 2.4vw, 32px) var(--gutter) var(--section-pad-tight);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  border-bottom: 1px solid var(--stone-line);
}

.work-feature-heading h3 {
  font-size: clamp(24px, 2.4vw, 32px);
}

.work-feature-heading .work-category {
  margin-top: 8px;
}

.work-category {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.work-feature-caption .work-desc {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--charcoal);
  align-self: end;
}

.work > .section-inner > .btn { margin-top: var(--section-pad-tight); }

.work-projects-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-top: 30px;
  margin-bottom: 10px;
}

.work-projects-list {
  font-size: 14px;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: 46ch;
}

/* ============================================
   MOMENT 3 — SELECTED WORK (cinematic feature)
   ============================================ */

.craig-cinema { padding-top: var(--section-pad); }

.work-eyebrow-wrap { margin-bottom: clamp(18px, 2.2vw, 28px); }
.work-eyebrow-wrap .eyebrow { margin-bottom: 0; }

.craig-media-wrap {
  width: 100%;
  margin: 0 0 0;
  overflow: hidden;
}

.craig-media {
  width: 100%;
  height: clamp(420px, 62vw, 860px);
  object-fit: cover;
  object-position: center 68%;
  display: block;
}

/* Scale/crop reveal — a subtle amount of the image becomes visible as it enters view */
.reveal.img-reveal {
  opacity: 0;
  transform: none;
  transition: opacity 1s var(--ease);
}
.reveal.img-reveal .craig-media {
  transform: scale(1.07);
  transition: transform 1.8s var(--ease);
}
.reveal.img-reveal.is-visible {
  opacity: 1;
}
.reveal.img-reveal.is-visible .craig-media {
  transform: scale(1);
}

.work-caption {
  padding: clamp(28px, 3.6vw, 48px) var(--gutter) var(--section-pad);
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.work-caption-name {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  margin-bottom: 8px;
}

.work-caption-copy {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 52ch;
}

.work-caption .craig-cta { margin-top: 22px; }

.craig-cta {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--soft-black);
  position: relative;
  padding-bottom: 4px;
}
.craig-cta::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.craig-cta:hover::after { width: 100%; }

/* Small square logomark, shared with What I Do's Advise section proof line */
.allied-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.allied-mark img { width: 100%; height: 100%; object-fit: contain; }

/* Dark-mode override for the underline-on-hover text link, still used in
   its light-mode form by the homepage's Gavin and Selected Work links */
.how-i-work .craig-cta { color: var(--warm-white); }

/* ============================================
   MOMENT 4 — WHAT I DO, A COMPACT DOORWAY
   Deliberately quiet and typographic — an
   invitation to the services page, not a
   second services page.
   ============================================ */

.home-doorway {
  padding: var(--section-pad-tight) var(--gutter);
  border-top: 1px solid var(--stone-line);
  text-align: center;
}

.home-doorway-inner { max-width: 720px; margin: 0 auto; }

.home-doorway-headline {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-top: 4px;
  text-wrap: balance;
}

.home-doorway .btn { margin-top: 32px; }

/* ============================================
   FINAL CTA
   ============================================ */

.final-cta {
  padding: clamp(34px, 4.4vw, 66px) var(--gutter);
  border-top: 1px solid var(--stone-line);
}

/* Two-column layout: the eyebrow occupies row one on its own (left column
   only, same technique used for Craig Black and the Advise/Grow/Represent
   pillars elsewhere on this page), so the form — placed only in row two —
   lines up with the headline rather than the eyebrow above it. */
.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  grid-template-areas:
    "eyebrow ."
    "content form";
  column-gap: clamp(48px, 6vw, 96px);
  row-gap: 0;
  text-align: left;
  align-items: start;
}
.final-cta-eyebrow { grid-area: eyebrow; margin-bottom: 16px; }
.final-cta-content { grid-area: content; }

.final-cta-content .section-copy {
  margin-top: 18px;
  max-width: 42ch;
}

/* Secondary contact options — block-level so each wraps to its own line,
   sized to its content (not the full column width) so the hover underline
   only spans the link text itself. */
.final-cta-content .final-email-link,
.final-cta-content .final-linkedin {
  display: block;
  width: fit-content;
}
.final-cta-content .final-email-link { margin-top: 28px; }
.final-cta-content .final-linkedin { margin-top: 14px; }

.final-location {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--warm-grey);
}

/* ---- Contact form ---- */
.final-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.final-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.final-form-row label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.final-form-optional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(140, 132, 119, 0.75);
}

.final-form input[type="text"],
.final-form input[type="email"],
.final-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--soft-black);
  background: rgba(26, 24, 21, 0.03);
  border: 1px solid rgba(26, 24, 21, 0.22);
  border-radius: 2px;
  padding: 13px 14px;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.final-form textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.final-form input::placeholder,
.final-form textarea::placeholder { color: rgba(26, 24, 21, 0.32); }
.final-form input:hover,
.final-form textarea:hover { border-color: rgba(26, 24, 21, 0.4); }
.final-form input:focus,
.final-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(26, 24, 21, 0.05);
}
.final-form-submit { margin-top: 4px; }
button.final-form-submit {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.final-form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.final-form-status {
  margin: 0;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.final-form-status a { text-decoration: underline; text-underline-offset: 2px; }

/* Standard visually-hidden pattern for the Netlify honeypot field — present
   for simple bots that fill every field, invisible and unreachable for
   real visitors and assistive tech (also aria-hidden + tabindex="-1"). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   MOMENT 5 — CONTACT, A DECISIVE CLOSE
   Homepage-only tonal shift on the shared
   .final-cta pattern — scoped to .page-home so
   the other pages' final-cta sections (light,
   unchanged) are never affected.
   ============================================ */

.page-home .final-cta {
  background: var(--soft-black);
  border-top: none;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}
.page-home .final-cta .eyebrow { color: var(--gold); }
.page-home .final-cta .section-headline { color: var(--warm-white); }
.page-home .final-cta .section-copy { color: rgba(250, 247, 242, 0.78); }
.page-home .final-cta .btn-primary { background: var(--warm-white); color: var(--soft-black); }
.page-home .final-cta .btn-primary:hover { background: var(--gold); color: var(--soft-black); }
.page-home .final-cta .craig-cta { color: var(--warm-white); }
.page-home .final-cta .final-location { color: rgba(250, 247, 242, 0.6); }

/* Contact form — dark-ground field treatment (subtle-contrast background,
   restrained light border, warm-white text) */
.page-home .final-cta .final-form-row label { color: rgba(250, 247, 242, 0.55); }
.page-home .final-cta .final-form-optional { color: rgba(250, 247, 242, 0.4); }
.page-home .final-cta .final-form input[type="text"],
.page-home .final-cta .final-form input[type="email"],
.page-home .final-cta .final-form textarea {
  color: var(--warm-white);
  background: rgba(250, 247, 242, 0.04);
  border-color: rgba(250, 247, 242, 0.28);
}
.page-home .final-cta .final-form input::placeholder,
.page-home .final-cta .final-form textarea::placeholder { color: rgba(250, 247, 242, 0.35); }
.page-home .final-cta .final-form input:hover,
.page-home .final-cta .final-form textarea:hover { border-color: rgba(250, 247, 242, 0.45); }
.page-home .final-cta .final-form input:focus,
.page-home .final-cta .final-form textarea:focus {
  background: rgba(250, 247, 242, 0.07);
  border-color: var(--gold);
}
.page-home .final-cta .final-form-submit:disabled,
.page-home .final-cta .final-form-submit:disabled:hover {
  background: var(--warm-white);
  color: var(--soft-black);
}
.page-home .final-cta .final-form-status { color: rgba(250, 247, 242, 0.85); }
.page-home .final-cta .final-form-status a { color: var(--gold); }

/* ============================================
   ABOUT PAGE (about.html)
   ============================================ */

.about-hero {
  padding: clamp(150px, 19vw, 208px) var(--gutter) var(--section-pad);
}

.about-hero-inner { max-width: 880px; }

.about-hero-headline {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  max-width: 15ch;
  margin-top: 22px;
  text-wrap: balance;
}

.about-hero-copy {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 62ch;
  margin-top: 24px;
}

.about-experience {
  padding: var(--section-pad) var(--gutter);
  border-top: 1px solid var(--stone-line);
  border-bottom: 1px solid var(--stone-line);
}

.about-experience .section-copy + .section-copy { margin-top: 18px; }

.about-experience-marks {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--stone-line);
}

.consultgq { padding: var(--section-pad) var(--gutter); }

.consultgq-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: start;
}

.consultgq-headline {
  font-size: clamp(34px, 4.6vw, 58px);
  max-width: 12ch;
}

.consultgq-body .section-copy { max-width: 60ch; }
.consultgq-body .section-copy + .section-copy { margin-top: 18px; }

.emphasis-line {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.6;
  color: var(--soft-black);
  max-width: 52ch;
  margin-top: var(--section-pad-tight);
  padding-left: 24px;
  border-left: 2px solid var(--gold);
}

.how-i-work {
  background: var(--soft-black);
  color: var(--warm-white);
  padding: var(--section-pad) var(--gutter);
}
.how-i-work .eyebrow { color: var(--gold); }
.how-i-work .section-headline { color: var(--warm-white); max-width: 24ch; }

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
  margin-top: 52px;
}

.principle h3 { font-size: 24px; margin-bottom: 14px; color: var(--warm-white); }
.principle p { font-size: 15.5px; line-height: 1.65; color: rgba(250, 247, 242, 0.78); }

.perspective { padding: var(--section-pad) var(--gutter); }

.perspective-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}

.perspective-lede { max-width: 12ch; }

.perspective-text .section-copy + .section-copy { margin-top: 18px; }

/* ============================================
   SHARED — SPLIT GRID
   (used by representation.html's "What Representation Means" section)
   ============================================ */

.split-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: start;
}
.split-headline { font-size: clamp(34px, 4.6vw, 58px); max-width: 12ch; }
.split-body .section-copy { max-width: 60ch; }
.split-body .section-copy + .section-copy { margin-top: 18px; }
.split-body .btn { margin-top: 32px; }

/* Shared dark .how-i-work overrides — used by Selected Work's
   Allied section and What I Do's Advise section */
.how-i-work .section-copy { color: rgba(250, 247, 242, 0.78); }
.how-i-work .emphasis-line { color: var(--warm-white); }

/* ============================================
   WHAT I DO PAGE (what-i-do.html) — V2
   Calm, direct: I advise. I grow. I represent.
   Each pillar has its own composition: Advise is
   a dark broad two-column split; Grow is a light
   stacked editorial with paired placeholders;
   Represent leads with one wide visual.
   ============================================ */

/* Shared "In Practice" proof line, used inside Advise, Grow and Represent */
.wid-proof {
  margin-top: var(--section-pad-tight);
  padding-top: 22px;
  border-top: 1px solid var(--stone-line);
}
.wid-proof-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.wid-proof-head .wid-proof-label { margin-bottom: 0; }
.wid-proof-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.wid-proof-names {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--soft-black);
}
.how-i-work .wid-proof { border-top-color: rgba(250, 247, 242, 0.18); }
/* Contrast fix: proof names must not render dark-on-dark inside Advise */
.how-i-work .wid-proof-names { color: var(--warm-white); }

/* Shared editorial list — used by Advise, Grow and Represent. Plain
   dividing rules, not cards, so the emphasis stays on the words.
   Reveal now lives on the list container (see markup), not on each
   item, so capabilities don't lag behind the reader line by line. */
.wid-pillar-list { margin-top: var(--section-pad-tight); }
.wid-pillar-item {
  padding: 13px 0;
  border-top: 1px solid var(--stone-line);
  font-size: clamp(16px, 1.4vw, 18.5px);
  color: var(--charcoal);
}
.wid-pillar-list .wid-pillar-item:last-child { border-bottom: 1px solid var(--stone-line); }
.how-i-work .wid-pillar-item { color: rgba(250, 247, 242, 0.82); border-top-color: rgba(250, 247, 242, 0.18); }
.how-i-work .wid-pillar-list .wid-pillar-item:last-child { border-bottom-color: rgba(250, 247, 242, 0.18); }

/* Large single-word section marker, shared by Advise / Grow / Represent */
.wid-pillar-word {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(52px, 7.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.wid-pillar-sub {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  margin-top: 16px;
  max-width: 44ch;
}
.how-i-work .wid-pillar-sub { color: rgba(250, 247, 242, 0.78); }

.wid-pillar-copy { max-width: 58ch; }

/* Restores the gap once formerly sat between the capability list and this
   paragraph — the "In Practice" proof block that used to occupy that space
   has been removed from every pillar for the single-page site. */
.wid-pillar-list + .wid-pillar-copy { margin-top: var(--section-pad-tight); }

/* ---- Image placeholders — built in HTML/CSS, deliberately unfinished.
   Muted neutral fill, restrained dashed border, small readable label,
   fixed aspect ratio. Never a substitute photo, logo or screenshot. ---- */

.wid-placeholder {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 20px;
  background: var(--stone);
  border: 1px dashed var(--stone-line);
}
.wid-placeholder-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.wid-placeholder-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--warm-grey);
  max-width: 42ch;
}
.wid-placeholder-ratio {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--stone-line);
}

.wid-placeholder--32  { aspect-ratio: 3 / 2; }
.wid-placeholder--43  { aspect-ratio: 4 / 3; }
.wid-placeholder--169 { aspect-ratio: 16 / 9; }

/* Dark-section (Advise) variant */
.how-i-work .wid-placeholder { background: rgba(250, 247, 242, 0.05); border-color: rgba(250, 247, 242, 0.24); }
.how-i-work .wid-placeholder-label { color: var(--warm-white); }
.how-i-work .wid-placeholder-note { color: rgba(250, 247, 242, 0.62); }
.how-i-work .wid-placeholder-ratio { color: rgba(250, 247, 242, 0.5); border-top-color: rgba(250, 247, 242, 0.18); }

/* ---- 1. Opening — headline and copy side by side, using the exact same
   two-column grid proportions, content width and gutter as the "Why
   Consult GQ" block in About, so the copy column lines up on the same
   vertical grid line between the two sections. ---- */

.wid-hero { padding: var(--section-pad-tight) var(--gutter); }

.wid-hero-headline { grid-area: headline; }
.wid-hero-line { display: block; }

/* ---- 2/3/4. Advise, Grow, Represent — one shared two-column template.
   Advise is the approved composition; Grow and Represent reuse the same
   grid, column proportions, heading size, image size, text alignment,
   capability-row treatment and proof hierarchy. Only the background
   (via .how-i-work on Advise) and content differ. ---- */

.wid-pillar { padding: var(--section-pad) var(--gutter); border-top: 1px solid var(--stone-line); }

/* Keeps the fixed header from covering the heading when landed on directly,
   e.g. via the retired Representation page's redirect */
.wid-represent { scroll-margin-top: 140px; }

/* Represent finishes with its own tighter bottom edge (rather than the
   shared .wid-pillar padding) so the section ends naturally after its
   image/copy, with just enough breathing room before Selected Work's
   chapter band begins immediately after. */
.wid-represent { padding-bottom: clamp(72px, 4.5vw, 88px); }

/* Single-page navigation: keeps the fixed header from covering each
   top-level section heading when jumped to via the nav's anchor links. */
#about, #what-i-do, #selected-work, #contact { scroll-margin-top: 140px; }

/* Two grid rows: the large word occupies row one on its own (the right
   column is empty alongside it), then the supporting sentence + media
   (.wid-pillar-support) and the capability list + paragraph
   (.wid-pillar-right) share row two. Because both of row two's items start
   at the same row line, the capability list is anchored to the top of the
   supporting sentence — never to the large word above it — with no
   per-section margin needed. Same rule for Advise, Grow and Represent. */
.wid-pillar-grid {
  display: grid;
  grid-template-columns: 0.46fr 0.54fr;
  grid-template-areas:
    "word    .      "
    "support right";
  column-gap: clamp(48px, 6vw, 96px);
  row-gap: 0;
  align-items: start;
}
.wid-pillar-word { grid-area: word; }
.wid-pillar-support { grid-area: support; }
.wid-pillar-right { grid-area: right; }

/* Left column media — placeholder and the real photographs (Advise, Grow,
   Represent all now share .wid-pillar-photo) share one rule for the gap
   after the supporting line, so neither can drift from the other. */
.wid-pillar-support .wid-placeholder,
.wid-pillar-support .wid-pillar-photo {
  margin-top: var(--section-pad-tight);
}

/* The capability list sits flush at the top of row two (no offset here) —
   its first item's visible text lands close to the supporting sentence's
   own visible text because both share the same row start line and near-
   identical body-copy type; the ~2px residual is the sentence's own
   margin versus the list item's border + padding, which is expected. */
.wid-pillar-right .wid-pillar-list { margin-top: 0; }

/* Advise / Grow / Represent photography — one shared 3:2 landscape
   treatment for all three pillar photos, so they read as one consistent
   system: identical width, left edge, top spacing (via the shared
   margin-top rule above), aspect ratio and photo-shadow. Reversible: the
   aspect-ratio below is the only thing pinning the crop's shape — change
   it to reframe, the source files themselves are untouched. Margin is
   reset to 0 to remove the browser's default <figure> inset/indent.
   object-fit: cover crops to fill the frame. No filter on any of the
   three — each source image is used exactly as supplied (Represent's
   photo is natively black-and-white; no tint or colour grade is added). */
.wid-pillar-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 0;
}
.wid-pillar-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   REPRESENTATION PAGE (representation.html)
   ============================================ */

.rep-hero { padding: clamp(150px, 19vw, 208px) var(--gutter) var(--section-pad); }
.rep-hero-inner { max-width: 760px; }
.rep-hero-headline {
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-top: 22px;
  text-wrap: balance;
}
.rep-hero-inner .section-copy + .section-copy { margin-top: 18px; }

.rep-means { padding: var(--section-pad) var(--gutter); }

/* ---- Beat 2 — the principle, its own editorial moment ---- */

.rep-principle {
  padding: clamp(70px, 9vw, 120px) var(--gutter);
  border-top: 1px solid var(--stone-line);
  text-align: center;
}
.rep-principle-inner { max-width: 780px; margin: 0 auto; }
.rep-principle-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--soft-black);
}
.rep-principle-copy { max-width: 52ch; margin-left: auto; margin-right: auto; }

.rep-work {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--stone-line);
}
.rep-entries .work-feature + .work-feature { margin-top: var(--section-pad); }
.rep-work-cta { padding-top: 32px; }

/* ============================================
   SELECTED WORK PAGE (selected-work.html)
   ============================================ */

/* Selected Work's introduction stays on the site's warm off-white —
   Selected Work is one unified light section (Craig through the smaller
   engagements). It reuses the same two-column editorial grid logic as
   the What I Do introduction: eyebrow + heading on the left, supporting
   sentence on the right, aligned to the same main content grid. */
.sw-hero {
  padding: clamp(72px, 6vw, 96px) var(--gutter) clamp(40px, 3vw, 56px);
}
.sw-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.sw-hero-copy-col { padding-bottom: clamp(4px, 1vw, 12px); }

/* ---- 2. Craig Black — one featured relationship. The main visual moment
   within Selected Work: the complete artwork at its natural aspect ratio,
   never cropped, inside a contained editorial frame with visible page
   margins either side. Clearly one engagement among several — Allied and
   ZOO follow immediately after as equal supporting engagements. ---- */

.sw-craig {
  padding: 0 0 clamp(40px, 3.5vw, 52px);
  scroll-margin-top: 140px;
}

/* Editorial crop: focused on the pitch, both club artworks and the central
   FA Cup ceremony, with most of the empty roof/sky trimmed off the top.
   CSS crop only — the original asset is untouched and unmodified. */
.sw-craig-frame {
  margin: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.sw-craig-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 82%;
  display: block;
}

/* Restrained editorial caption — small, muted, sits close beneath the
   photograph so it clearly belongs to it rather than reading as its own
   headline or heading into the section below. */
.sw-craig-caption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warm-grey);
}

/* Two rows: the eyebrow occupies row one on its own (left column only),
   then the category + heading (lede), the Selected Projects list and the
   Craig's-work link stack through the left column across rows two-four,
   while the three-paragraph story (body) spans the same rows in the right
   column as one tall block. Because row two starts at the same line for
   both columns, the story's first visible line lines up with the top of
   "Representation · Brand Partnerships" — not the eyebrow above it and
   not the heading below it. */
.sw-craig-grid {
  margin-top: clamp(32px, 3vw, 48px);
  display: grid;
  grid-template-columns: 0.44fr 0.56fr;
  grid-template-areas:
    "eyebrow  .   "
    "lede     body"
    "projects body"
    "cta      body";
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: 0;
  align-items: start;
}

.sw-craig-eyebrow { grid-area: eyebrow; }
.sw-craig-lede { grid-area: lede; }
.sw-craig-body { grid-area: body; }
.sw-craig-projects { grid-area: projects; margin-top: var(--section-pad-tight); }
.sw-craig-grid .sw-craig-link { grid-area: cta; margin-top: 22px; }

.sw-craig-headline {
  max-width: 15ch;
  margin-top: 6px;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.3;
}

.sw-craig-body .section-copy { max-width: 52ch; margin-top: 0; }
.sw-craig-body .section-copy + .section-copy { margin-top: 16px; }

/* ---- 3. Allied Global Marketing and ZOO Digital — equal supporting
   engagements, same structure, same visual weight. No Situation / Role /
   Today columns — one direct headline and a short summary each. ---- */

.sw-pair {
  padding: clamp(40px, 3.5vw, 52px) 0;
  border-top: 1px solid var(--stone-line);
}

.sw-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
}

.sw-pair-card { display: flex; flex-direction: column; }

.sw-pair-media {
  margin: 0 0 24px;
  overflow: hidden;
  height: clamp(260px, 22vw, 320px);
}
.sw-pair-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-pair-media img.zoo-media { object-position: 30% 45%; }
/* Shared placeholder styling, kept for any future sw-pair image still
   awaiting approved photography. */
.sw-pair-media .wid-placeholder { height: 100%; }

.sw-pair-card .work-category { margin-bottom: 10px; }

.sw-pair-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.3;
  color: var(--soft-black);
  margin-top: 2px;
}

.sw-pair-copy {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 46ch;
  margin-top: 14px;
}
.sw-pair-copy + .sw-pair-copy { margin-top: 10px; }

/* Website link sits at the bottom of the card rather than directly under a
   fixed line of copy: the card is already a flex column stretched to the
   shared row height by the grid, so a top-auto margin aligns both links on
   the same baseline on desktop regardless of copy length. On mobile the
   grid falls back to one card per row, the auto margin collapses to zero
   extra space, and the link simply sits under its own copy. */
.sw-pair-card .sw-pair-link {
  margin-top: auto;
  padding-top: 20px;
}

/* ---- 4. Other selected engagements — compact, refined cards, not full
   case studies. Demonstrates range without lengthening the page. ---- */

.sw-other {
  padding-top: clamp(40px, 3.5vw, 52px);
  padding-bottom: var(--section-pad);
  border-top: 1px solid var(--stone-line);
}
.sw-other-head { padding-bottom: var(--section-pad-tight); }
/* Tighter gap between the eyebrow label and the logo panels on desktop only
   (mobile/tablet keep the shared --section-pad-tight rhythm above). Combined
   with the eyebrow's own 20px margin-bottom this lands the label-to-panel
   gap at ~52px on desktop. */
@media (min-width: 981px) {
  .sw-other-head { padding-bottom: 32px; }
}

.sw-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 48px);
}

.sw-other-card { display: flex; flex-direction: column; }

.sw-other-media {
  margin: 0 0 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3.2vw, 38px);
  box-sizing: border-box;
  /* One shared dark charcoal ground for all three logo panels — the same
     --soft-black used elsewhere on the site for its dark sections. */
  background: var(--soft-black);
}
.sw-other-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Each logo is sized individually so the three read as comparably prominent
   despite their very different native shapes and cropping. Consistency comes
   from the shared panel (background, aspect ratio, padding, shadow) rather
   than from forcing identical logo widths. */
.sw-other-card:nth-child(1) .sw-other-media img { max-width: 74%; max-height: 74%; }
.sw-other-card:nth-child(2) .sw-other-media img { max-width: 92%; max-height: 92%; }
.sw-other-card:nth-child(3) .sw-other-media img {
  max-width: 100%;
  max-height: 100%;
  transform: scale(1.24);
}

.sw-other-card .work-category { margin-bottom: 10px; }

.sw-other-name {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--soft-black);
  margin-bottom: 6px;
}

.sw-other-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
  color: var(--soft-black);
}

.sw-other-copy {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--charcoal);
  margin-top: 10px;
}

/* Website link sits at the bottom of the card rather than directly under a
   fixed line of copy: the card is already a flex column stretched to the
   shared row height by the grid, so a top-auto margin aligns all three
   links on the same baseline on desktop regardless of copy length. On
   mobile the grid falls back to one card per row, the auto margin
   collapses to zero extra space, and the link simply sits under its own
   copy. */
.sw-other-card .sw-other-link {
  margin-top: auto;
  padding-top: 20px;
}

/* ---- 6. Close — dark, decisive final beat ---- */

.sw-close {
  background: var(--soft-black);
  border-top: none;
  padding: clamp(60px, 7vw, 110px) var(--gutter);
}

.sw-close-headline { margin: 0 auto; max-width: 16ch; color: var(--warm-white); }

.sw-close-good {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 68px);
  color: var(--gold);
  margin-top: 18px;
}

.sw-close .section-copy { margin-top: 18px; color: rgba(250, 247, 242, 0.78); }

.sw-close .btn-primary { background: var(--warm-white); color: var(--soft-black); }
.sw-close .btn-primary:hover { background: var(--gold); color: var(--soft-black); }

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  border-top: 1px solid var(--stone-line);
  padding: 40px var(--gutter);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-nav a, .footer-copy {
  font-size: 13px;
  color: var(--warm-grey);
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 980px) {
  .primary-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }

  .work-feature-caption { grid-template-columns: 1fr; gap: 24px; }
  .work-feature-caption .work-desc { align-self: auto; }
  .work-quiet-grid { grid-template-columns: 1fr; gap: 40px; }

  .work-caption { grid-template-columns: 1fr; gap: 24px; }

  /* Homepage — Gavin introduction */
  .gavin-grid { grid-template-columns: 1fr; gap: 32px; }
  .gavin-portrait { max-width: 260px; }
  .gavin-text { max-width: none; }

  .perspective-grid { grid-template-columns: 1fr; gap: 24px; }
  .perspective-lede { max-width: none; }

  .consultgq-grid { grid-template-columns: 1fr; gap: 24px; }
  .consultgq-headline { max-width: none; }

  .gavin-why-headline { max-width: none; }

  .principles { grid-template-columns: 1fr; gap: 40px; }

  .split-grid { grid-template-columns: 1fr; gap: 24px; }
  .split-headline { max-width: none; }

  /* Paired introductions ("Why Consult GQ" and "What I Do") — single
     column: eyebrow, then the headline, then the copy stacked beneath it
     (no side-by-side alignment). */
  .paired-intro-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "headline"
      "copy";
    row-gap: 20px;
    column-gap: 0;
  }
  .paired-copy { max-width: none; }

  /* Stacked layout: word, then supporting sentence + media, then the
     capability list + paragraph — same order as before, single column, no
     side-by-side row alignment. */
  .wid-pillar-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "word"
      "support"
      "right";
    row-gap: 40px;
    column-gap: 0;
  }
  /* Placeholder and the real photographs (Advise, Grow, Represent — all
     .wid-pillar-photo now) share one width rule at this breakpoint too —
     no separate narrower treatment for any photo. */
  .wid-pillar-support .wid-placeholder,
  .wid-pillar-support .wid-pillar-photo {
    margin-top: var(--section-pad-tight);
    max-width: 480px;
  }

  /* Selected Work — introduction, Craig, Allied/ZOO pair, other engagements */
  .sw-hero-grid { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .sw-hero-copy-col { padding-bottom: 0; }

  /* Stacked reading order: eyebrow, category + heading, the three-
     paragraph story, then Selected Projects and the Craig's-work link. */
  .sw-craig-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "lede"
      "body"
      "projects"
      "cta";
    row-gap: 0;
    column-gap: 0;
  }
  .sw-craig-body { margin-top: 24px; }
  .sw-craig-headline { max-width: none; }
  .sw-craig-body .section-copy { max-width: none; }

  .sw-pair-grid { grid-template-columns: 1fr; gap: 40px; }

  .sw-other-grid { grid-template-columns: 1fr; gap: 40px; }

  .sw-close-headline { max-width: none; }

  /* Contact — stack intro above the form; every field and the submit
     button become full width. */
  .final-cta-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "content"
      "form";
    row-gap: 32px;
  }
  .final-form-submit { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .header-inner { padding: 20px var(--gutter); }
  .hero { padding-top: 120px; }
  .hero-break { display: none; }
  .gavin-logo-row { column-gap: 28px; row-gap: 20px; }
  .work-feature img { height: 62vw; }
  .craig-media { height: 78vw; }
  .gavin-portrait { max-width: 220px; }

  .about-hero { padding-top: 120px; }
  .emphasis-line { padding-left: 18px; }

  .rep-hero { padding-top: 120px; }

  .wid-pillar-word { font-size: clamp(40px, 13vw, 44px); }

  /* Represent → Selected Work transition, mobile spacing */
  .wid-represent { padding-bottom: 56px; }
  .sw-hero { padding: 56px var(--gutter) 36px; }
  .sw-craig { padding-top: 0; }

  /* Craig image — a taller crop on narrow screens keeps the ceremony and
     both club artworks legible rather than compressing them into a very
     short strip. */
  .sw-craig-frame { aspect-ratio: 16 / 9; }
}