/* ==========================================================================
   Natearal — site stylesheet (September 2026 redesign, refined to the
   "Website Final Recommendation" brief of 2 September 2026 and then to the
   "Final Website Corrections" handoff of the same month — sections 7 and 10)
   One file, organised top to bottom: tokens → base → components → sections →
   responsive → motion. No build step.

   Departures from the brief, each commented where it happens:
     • --brass-text / --ink-soft / --muted are darker or additional to the
       brief's five colours (see the token block): its antique brass measures
       2.9:1 on ivory and cannot carry text at WCAG AA.
     • The footer is two blocks rather than three columns (section 16).
     • The skip link and mobile menu are not in the desktop-only prototype.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   The brief specifies five colours and a ~70 / 20 / 10 split between warm
   ivory, midnight-and-ink, and brass-plus-mist accents. Everything below is
   either one of those five or a documented derivation of one.
   -------------------------------------------------------------------------- */
:root {
  /* Bands. Warm ivory is the page; --ivory-light is the same warm ground one
     step lighter, used only to separate adjacent sections. No pure white:
     the brief asks for ivory precisely to avoid a sterile ground. */
  --ivory: #F5F1E9;              /* brief: warm ivory — primary page background */
  --ivory-light: #FBF9F4;        /* derived: band alternation */
  --mist: #E9EEF0;               /* brief: mist — one quiet evidence panel only */

  /* Midnight. The brief asks for one blue and for "one or two strong dark
     section moments", so there are exactly two: the hero panel and contact. */
  --midnight: #203746;           /* brief: midnight blue — headlines, nav, dark panels, buttons */
  --midnight-deep: #1A2D3A;      /* derived: footer */
  --midnight-hover: #1A2E3B;     /* derived: button hover */

  /* Text. The brief's ink carries body copy. The two greys below are
     derivations for captions and micro-labels — it names no grey, and a
     caption set in ink reads as body copy. Both clear 4.5:1 on mist, the
     darkest light band (--muted 4.7:1, --ink-soft 4.9:1). */
  --ink: #23313A;                /* brief: ink — 11.4:1 on mist, 11.9:1 on ivory */
  --ink-soft: #5A6875;           /* derived: secondary body */
  --muted: #5F6B74;              /* derived: micro-labels and captions */

  /* Brass. The brief's #A68A55 measures 2.9:1 on ivory and 2.8:1 on mist, so
     it is used for rules and non-text accents only. --brass-text is the
     nearest darker shade at the same hue that reaches AA for small text
     (4.9:1 on ivory, 4.7:1 on mist); --brass-on-midnight is its counterpart
     on the dark bands (5.1:1). */
  --brass: #A68A55;              /* brief: antique brass — rules and accents, never text */
  --brass-text: #7F6537;         /* derived: small brass text on light bands */
  --brass-on-midnight: #C1A264;  /* derived: small brass text on midnight */

  /* Reversed */
  --reversed: #FBF9F4;                        /* 11.8:1 on --midnight */
  --reversed-85: rgba(251, 249, 244, 0.85);
  --reversed-80: rgba(251, 249, 244, 0.8);
  --reversed-75: rgba(251, 249, 244, 0.75);
  --reversed-70: rgba(251, 249, 244, 0.7);
  --reversed-60: rgba(251, 249, 244, 0.6);
  --reversed-55: rgba(251, 249, 244, 0.55);   /* 4.8:1 on --midnight */

  /* Rules */
  --hairline: rgba(32, 55, 70, 0.16);
  --border-soft: rgba(32, 55, 70, 0.08);
  --border-header: rgba(32, 55, 70, 0.12);
  --hairline-reversed: rgba(251, 249, 244, 0.2);
  --hairline-reversed-strong: rgba(251, 249, 244, 0.25);
  --underline-reversed: rgba(251, 249, 244, 0.4);

  /* Type. Two families, as before — the brief keeps the existing pairing but
     moves the roles: editorial serif for display, sans for body and interface
     text. Flip --font-body to var(--font-serif) to restore the previous
     all-Georgia editorial setting. */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);

  --container: 1240px;
  --gutter: clamp(24px, 4vw, 40px);
  --section: clamp(72px, 9vw, 120px);
  --section-tight: clamp(72px, 8.5vw, 110px);
  --col-gap: clamp(48px, 7vw, 96px);

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

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--midnight);
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.75rem, 4.2vw, 54px);
  line-height: 1.14;
}
h2 {
  font-size: clamp(1.85rem, 3.5vw, 43px);
  line-height: 1.18;
}
h3 { font-size: 23px; line-height: 1.28; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }

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

a { color: inherit; }

::selection { background: var(--midnight); color: var(--ivory-light); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--midnight);
  color: var(--reversed);
  font-family: var(--font-sans);
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band--ivory       { background: var(--ivory); }
.band--ivory-light { background: var(--ivory-light); }
.band--midnight    { background: var(--midnight); }

.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--tight { padding-top: var(--section-tight); padding-bottom: var(--section-tight); }

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */

/* Eyebrow: 32px brass rule + micro label. Used once per section. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brass-text);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  background: var(--brass);
}
.eyebrow--light { color: var(--brass-on-midnight); }
.eyebrow--light::before { background: var(--brass-on-midnight); }

/* Label: the same micro type without the rule, used inside cards and panels. */
.label {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brass-text);
}
.label--light { color: var(--brass-on-midnight); }

.button {
  display: inline-block;
  padding: 16px 28px;
  background: var(--midnight);
  color: var(--reversed);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
}
.button:hover { background: var(--midnight-hover); color: #FFFFFF; }
.button--compact { padding: 12px 22px; font-size: 13px; }
.button--light { background: var(--ivory-light); color: var(--midnight); }
.button--light:hover { background: #FFFFFF; color: var(--midnight); }

.text-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--brass);
  color: var(--brass-text);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
}
.text-link:hover { color: var(--midnight); border-bottom-color: var(--midnight); }
.text-link--light { color: var(--brass-on-midnight); border-bottom-color: var(--brass-on-midnight); }
.text-link--light:hover { color: var(--reversed); border-bottom-color: var(--reversed); }

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--border-header);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.brand { text-decoration: none; color: var(--midnight); }
.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 4px;
}
.brand__tag {
  display: block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.site-nav__list { display: flex; align-items: center; gap: 36px; }
.site-nav__list a {
  color: var(--ink);
  text-decoration: none;
}
.site-nav__list a:hover {
  color: var(--midnight);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-header);
  background: none;
  color: var(--midnight);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; }
.nav-toggle__bars span {
  display: block;
  height: 1px;
  background: currentColor;
}
.nav-toggle__bars span + span { margin-top: 4px; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--col-gap);
  align-items: center;
  padding-top: var(--section-tight);
  padding-bottom: clamp(64px, 7.5vw, 100px);
}
/* The brief's headline is set in capitals. Positive tracking, because the
   negative tracking that suits a lower-case serif closes caps up too far. */
.hero h1 {
  margin: 0 0 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hero__lead {
  max-width: 30em;
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
}
.hero__sublead {
  max-width: 32em;
  margin: 0 0 44px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.hero .actions { margin-bottom: 48px; }
.hero__proof-line {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Dark moment 1 of 2. */
.hero__panel {
  align-self: center;
  padding: 52px 48px;
  background: var(--midnight);
}
.hero__panel h2 {
  margin: 0 0 24px;
  font-size: 34px;
  line-height: 1.2;
  color: var(--reversed);
}
.hero__panel-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--reversed-85);
}

/* --------------------------------------------------------------------------
   7. Credibility strip — one quiet band, no rules or numerals on the items
   Four columns on desktop, unchanged. The final corrections ask for a
   moderately larger, heavier, higher-contrast setting with more breathing
   room: 15px/600 in --ink (11.9:1 on ivory, against --midnight's 11.0:1) and
   56px of band padding. Deliberately still a line of text: no oversized
   numerals, icons, boxes or feature cards.
   -------------------------------------------------------------------------- */
.proof-band {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.proof-band__inner { padding-top: 56px; padding-bottom: 56px; }
.proof-band__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
}
.proof-band__list li {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.1px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   8. The firm
   -------------------------------------------------------------------------- */
.firm {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--col-gap);
  align-items: start;
}
/* Lifts the first body line onto the heading's baseline. */
.firm__text { padding-top: 58px; }
.firm__text p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.72;
}
.firm__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. What clients bring — three equal statements, no numbers or icons
   -------------------------------------------------------------------------- */
.section__head { margin-bottom: 64px; }
.section__head h2 { margin: 0; }

.situations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}
.situations h3 {
  margin: 0 0 18px;
  padding-top: 20px;
  border-top: 2px solid var(--brass);
}
.situations p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   10. Expertise — three equal panels
   Equal width (1fr), equal height (grid stretch) and equal padding on all
   three. The takeaway is pushed to the bottom so the three closing lines sit
   on one baseline. Executive Search leads by position and copy only: there is
   deliberately no modifier that enlarges or elevates a panel.
   -------------------------------------------------------------------------- */
.practices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.practice {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px 32px;
}
.practice + .practice { border-left: 1px solid var(--hairline); }
.practice h3 { margin: 0; }
.practice p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
/* The closing statement. Set in the body sans rather than the serif so it
   reads as the same voice as the paragraph above it, one weight heavier and
   one step darker than --ink-soft, and separated by a short brass rule
   instead of a box, an icon or italics. margin-top:auto puts the three
   statements on one baseline at the foot of the equal-height panels; the
   selector carries the type so it outranks ".practice p { margin: 0 }"
   above, which would otherwise reset the auto margin and leave them ragged. */
.practice p.practice__take {
  position: relative;
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.practice p.practice__take::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--brass);
}

/* --------------------------------------------------------------------------
   11. How Natearal works — named stages, no numbered badges
   -------------------------------------------------------------------------- */
.method {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--col-gap);
  align-items: start;
}
.method__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
.method__row:last-child { border-bottom: 1px solid var(--hairline); }
.method__row dt {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--midnight);
}
.method__row dd { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.method__close {
  margin: 32px 0 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--midnight);
}

/* --------------------------------------------------------------------------
   12. Evidence before outreach
   -------------------------------------------------------------------------- */
.evidence__intro { max-width: 620px; margin-bottom: 64px; }
.evidence__intro h2 { margin: 0 0 28px; }
.evidence__lead { margin: 0; font-size: 17.5px; line-height: 1.72; }

.twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  margin-bottom: 80px;
}
.twin__label {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brass-text);
}
/* Fine rules carry the list. The previous decimal-leading-zero counter was the
   visible "01 / 02" numbering the brief removes. */
.twin__list li {
  padding: 16px 0 16px 24px;
  border-top: 1px solid var(--hairline);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
}
.twin__list li:last-child { border-bottom: 1px solid var(--hairline); }
.twin__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 10px;
  height: 1px;
  background: var(--brass);
}

/* The one mist panel on the site. Previously a dark card; the brief allows
   only one or two dark moments (the hero panel and contact), and names mist
   as the ground for exactly this kind of quiet evidence panel. */
.boundary {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 56px;
  align-items: center;
  padding: 48px 52px;
  background: var(--mist);
  border-left: 2px solid var(--brass);
}
.boundary .label { margin-bottom: 14px; }
.boundary__statement {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.3;
  color: var(--midnight);
}
.boundary > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   13. Founder
   -------------------------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--col-gap);
  align-items: start;
}
.founder__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.founder h2 { margin: 0 0 28px; }
.founder__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--midnight);
}
.founder__role {
  margin: 4px 0 28px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.founder__bio p {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.72;
}
.founder__credentials { margin: 32px 0; }
.founder__credentials li {
  padding: 15px 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--midnight);
}
.founder__credentials li:last-child { border-bottom: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   14. Capability statement
   -------------------------------------------------------------------------- */
.capability {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--col-gap);
  align-items: start;
  padding: 52px 56px;
  background: var(--ivory);
  border: 1px solid var(--hairline);
}
.capability h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 34px); }
.capability__lead {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   15. Contact — dark moment 2 of 2
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--col-gap);
  align-items: center;
}
.contact h2 {
  margin: 0 0 28px;
  font-size: clamp(1.85rem, 3.7vw, 45px);
  line-height: 1.15;
  color: var(--reversed);
}
.contact__lead {
  max-width: 32em;
  margin: 0 0 44px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--reversed-85);
}

.contact__card {
  padding: 44px 48px;
  border: 1px solid var(--hairline-reversed-strong);
}
.contact__card h3 {
  margin: 0;
  font-size: 24px;
  color: var(--reversed);
}
.contact__card-role {
  margin: 6px 0 32px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--brass-on-midnight);
}
.contact__card dt {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--reversed-55);
}
.contact__card dd {
  margin-bottom: 24px;
  font-size: 16.5px;
  color: var(--reversed);
  overflow-wrap: break-word;
}
.contact__card dd:last-child { margin-bottom: 0; }
.contact__card a {
  text-decoration: underline;
  text-decoration-color: var(--underline-reversed);
  text-underline-offset: 4px;
}
.contact__card a:hover { text-decoration-color: var(--reversed); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--midnight-deep);
  border-top: 1px solid rgba(251, 249, 244, 0.1);
}
/* Two blocks rather than the handoff's three columns: identity and legal together on the
   left, navigation on the right, on the same edge as the header nav. Three equal columns
   stranded the legal text a third of the way across with a void before the links. */
.site-footer__inner {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  /* Aligns the link row with the wordmark rather than centring it on the whole block. */
  align-items: baseline;
  gap: 48px;
  padding-top: 56px;
  padding-bottom: 56px;
}
.site-footer .brand { color: var(--reversed); }
.site-footer .brand__name { font-size: 17px; }
.site-footer .brand__tag { color: var(--reversed-60); }
.site-footer__meta {
  margin-top: 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 2;
  color: var(--reversed-60);
}
/* line-height 2 already spaces these; the base paragraph margin on top of it reads loose
   now that they sit under the wordmark rather than in their own column. */
.site-footer__meta p { margin: 0; }
/* Laid out as a row rather than the handoff's right-aligned column: three stacked
   text blocks of different lengths read as ragged. Wraps rather than overflows. */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  justify-self: end;
  font-family: var(--font-sans);
  font-size: 13px;
}
.site-footer__nav a {
  color: var(--reversed-75);
  text-decoration: none;
}
.site-footer__nav a:hover { color: #FFFFFF; text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. Privacy notice
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h1 { margin: 0 0 12px; font-size: clamp(2rem, 4.2vw, 50px); }
.prose h2 {
  margin: 48px 0 16px;
  font-size: 25px;
  line-height: 1.3;
}
.prose__meta {
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.prose__lede { font-size: 18px; line-height: 1.72; }
.prose p:not([class]) { font-size: 16.5px; }
.prose ul { margin: 0 0 1em; }
.prose li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 1px;
  background: var(--brass);
}
.prose a { color: var(--brass-text); }
.prose a:hover { color: var(--midnight); }
.prose .text-link { color: var(--brass-text); }

/* --------------------------------------------------------------------------
   18. Error page
   -------------------------------------------------------------------------- */
/* No max-width here: .error-page shares the element with .wrap, so constraining it
   would shrink the container and centre the copy away from the header's left edge. */
.error-page {
  padding-top: var(--section);
  padding-bottom: var(--section);
}
.error-page h1 { margin: 0 0 28px; font-size: clamp(2rem, 4.4vw, 54px); }
.error-page__lead { max-width: 34em; margin: 0 0 44px; font-size: 18px; line-height: 1.72; }

.footer-simple {
  padding-top: 32px;
  padding-bottom: 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--reversed-75);
}
.footer-simple p { margin: 0; }
.footer-simple a { color: var(--reversed-75); text-underline-offset: 4px; }
.footer-simple a:hover { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Two-column grids collapse; the hero card follows the hero text, the
     portrait leads the founder section (source order already does both). */
  .hero,
  .firm,
  .situations,
  .practices,
  .twin,
  .boundary,
  .method,
  .founder,
  .capability,
  .contact { grid-template-columns: 1fr; }

  /* Panels stack in the same order with identical treatment: the dividing
     rule moves from the left edge to the top. */
  .practices { border-bottom: 0; }
  .practice { padding: 40px 0; }
  .practice + .practice { border-left: 0; border-top: 1px solid var(--hairline); }

  .situations { gap: 40px; }
  /* Stacked, the items lose the column gutters that separated them, so every
     row after the first takes a hairline of its own. */
  .proof-band__list { grid-template-columns: repeat(2, 1fr); column-gap: 44px; row-gap: 0; }
  .proof-band__list li:nth-child(n + 3) {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
  }
  .firm__text { padding-top: 0; }
  .boundary { padding: 36px 32px; gap: 24px; }
  .twin { gap: 40px; margin-bottom: 56px; }
  .capability { padding: 40px 32px; }
  .contact__card { padding: 36px 32px; }
  .hero__panel { padding: 40px 32px; }

  /* Menu behind a toggle. Without JS the nav stays open and stacked, so the
     page still works with scripting off. */
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .site-header__inner { flex-wrap: wrap; row-gap: 20px; }
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    font-size: 15px;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;      /* touch target */
    width: 100%;
  }
  .site-nav .button { margin-top: 12px; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__nav { justify-self: start; }
  .site-footer__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .method__row { grid-template-columns: 1fr; gap: 8px; }
  .proof-band__list { grid-template-columns: 1fr; column-gap: 0; }
  .proof-band__list li:nth-child(n + 2) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
  }
  .actions { gap: 20px; }
  .capability { padding: 32px 24px; }
}

/* --------------------------------------------------------------------------
   20. Motion — the brief's "minimal, slow" entry only. Everything is visible
   without JavaScript: the .js gate means the hidden state never applies when
   nothing can reveal it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

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