/* ==========================================================================
   GNS / Good Natured Solutions
   site.css  ·  v7 — Insights section added to the v5 design system

   1.  Tokens
   2.  Base
   3.  Layout primitives
   4.  Type roles
   5.  Buttons and links
   6.  Header and navigation
   7.  Hero
   8.  What We Do
   9.  The Firm
   10. Contact
   11. Footer
   12. Motion
   13. Insights — shared row system
   14. Insights on the homepage
   15. Inner pages
   16. Individual Insight
   17. Mobile navigation, inner pages
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */

:root {
  /* ---------------------------------------------------------------------
     BRAND COLOUR. The supplied logo files are greyscale, so this navy is
     provisional pending the firm's authoritative brand value. It is
     declared once here; every navy in the site is derived from it.
     Replace this single value and the whole site updates.
     --------------------------------------------------------------------- */
  --navy:        #0F2742;

  --navy-deep:   #0A1B2D;
  --navy-line:   rgba(246, 244, 239, 0.16);
  --navy-line-2: rgba(246, 244, 239, 0.28);
  --on-navy:     #f6f4ef;
  --on-navy-2:   rgba(246, 244, 239, 0.74);
  --on-navy-3:   rgba(246, 244, 239, 0.56);

  /* Hero scrim, defined once. A darker relative of --navy-deep so the
     gradient reads as an extension of the palette rather than a generic
     black overlay. See DESIGN_NOTES.md, "Hero." */
  --scrim: 9, 22, 40;

  --paper:   #f6f4ef;
  --paper-2: #eeeae2;
  --paper-3: #e5e0d6;
  --ink:     #15171b;
  --ink-2:   #3e434b;
  --ink-3:   #676c74;
  --rule:    #dcd7cc;
  --rule-2:  #c6c0b4;
  --field:   #8b877c;

  --font-serif: "Source Serif 4", "Iowan Old Style", Charter, "Sitka Text",
                Cambria, "Noto Serif", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fs-display:  clamp(2.25rem, 1.2rem + 3.7vw, 4.125rem);
  --fs-section:  clamp(1.75rem, 1.34rem + 1.7vw, 2.625rem);
  --fs-practice: clamp(1.4375rem, 1.2rem + 1.05vw, 2rem);
  --fs-sub:      clamp(1.1875rem, 1.11rem + 0.36vw, 1.375rem);
  --fs-lead:     clamp(1.125rem, 1.06rem + 0.42vw, 1.375rem);
  --fs-body:     clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
  --fs-small:    0.9375rem;
  --fs-micro:    0.8125rem;
  --fs-label:    0.6875rem;

  --maxw:    1320px;
  --gutter:  clamp(1.375rem, 4.4vw, 5rem);
  --section: clamp(5rem, 8.5vw, 9.5rem);
  --radius:  2px;
  --edge:    max(var(--gutter), calc((100vw - var(--maxw)) / 2));

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

/* 2. Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, figcaption, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--navy); color: var(--on-navy); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-navy :focus-visible, .site-header--over :focus-visible { outline-color: var(--on-navy); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-micro);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* 3. Layout primitives --------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
/* Until a breakpoint places an item, it spans the full grid. */
.grid > * { grid-column: 1 / -1; min-width: 0; }

.section { padding-block: var(--section); }
.s-paper { background: var(--paper); }
.s-navy  { background: var(--navy); color: var(--on-navy); }
.s-navy p { color: var(--on-navy-2); }

/* 4. Type roles ---------------------------------------------------------- */

.section-no {
  display: block;
  margin-bottom: 0.9rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.s-navy .section-no, .on-navy .section-no { color: var(--on-navy-3); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.s-navy .eyebrow, .on-navy .eyebrow { color: var(--on-navy-3); }

.h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.019em;
}

.h-section {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.14;
  letter-spacing: -0.014em;
}

.h-practice {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-practice);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.body { color: var(--ink-2); }
.s-navy .lead, .s-navy .body { color: var(--on-navy-2); }

.measure-sm { max-width: 52ch; }

/* 5. Buttons and links --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 50px;
  padding: 0.8rem 1.6rem;
  background: var(--navy);
  color: var(--on-navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn svg { width: 15px; height: 10px; flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.link-underline {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
  overflow-wrap: anywhere;
}
.link-underline:hover { border-bottom-color: var(--navy); }
.on-navy .link-underline, .s-navy .link-underline { border-bottom-color: var(--navy-line-2); }
.on-navy .link-underline:hover, .s-navy .link-underline:hover { border-bottom-color: var(--on-navy); }

/* 6. Header and navigation ----------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
@media (min-width: 1024px) { .site-header__inner { min-height: 5.25rem; } }

/* Over the hero image: a dedicated scrim, independent of the hero's own
   gradient, so header legibility never depends on what sits behind it. */
.site-header--over { color: var(--on-navy); }
.site-header--over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--scrim), 0.55) 0%, rgba(var(--scrim), 0.28) 75%, rgba(var(--scrim), 0) 100%);
  pointer-events: none;
}
/* Once the page has scrolled past the hero */
.site-header--solid {
  background: var(--paper);
  border-bottom-color: var(--rule);
  color: var(--ink);
}

.brand { display: inline-flex; align-items: baseline; gap: 0.85rem; text-decoration: none; }
.brand__logo { height: 21px; width: auto; }
@media (min-width: 1024px) { .brand__logo { height: 23px; } }
.brand__logo--light { display: none; }
.site-header--over .brand__logo--dark { display: none; }
.site-header--over .brand__logo--light { display: block; }

.brand__name {
  display: none;
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}
.site-header--over .brand__name { color: var(--on-navy-3); }
@media (min-width: 640px) { .brand__name { display: inline; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.2rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 22px; height: 9px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-3.75px) rotate(-45deg); }

.site-nav a { text-decoration: none; }

@media (max-width: 1023px) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5.5rem var(--gutter) 3rem;
    background: var(--navy);
    color: var(--on-navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    overflow-y: auto;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav ul { border-top: 1px solid var(--navy-line); }
  .site-nav li {
    border-bottom: 1px solid var(--navy-line);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  /* Mobile menu choreography: links settle in with a short, deliberate
     stagger once the panel is open — nothing moves until it is. */
  .site-nav.is-open li { opacity: 1; transform: none; }
  .site-nav.is-open li:nth-child(1) { transition-delay: 0.06s; }
  .site-nav.is-open li:nth-child(2) { transition-delay: 0.12s; }
  .site-nav.is-open li:nth-child(3) { transition-delay: 0.18s; }
  .site-nav ul a {
    display: block;
    padding: 1.05rem 0;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: -0.01em;
  }
  body.nav-open { overflow: hidden; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; }
  .site-nav ul { display: flex; gap: clamp(1.5rem, 2.4vw, 2.75rem); }
  .site-nav ul a {
    position: relative;
    display: block;
    padding-block: 0.4rem;
    font-size: var(--fs-small);
    color: inherit;
    opacity: 0.82;
    transition: opacity 0.2s ease;
  }
  .site-nav ul a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .site-nav ul a:hover { opacity: 1; }
  .site-nav ul a:hover::after { transform: scaleX(1); }
}

/* 7. Hero ------------------------------------------------------------------
   A single full-bleed photograph with a controlled gradient scrim, rather
   than a split text/image panel — the previous composition read too close
   to a software product page. See DESIGN_NOTES.md, "Hero" and "v6 —
   imagery." The scrim runs top-to-bottom rather than the diagonal used in
   the v5 placeholder: this photograph is calm at the top and builds toward
   the wave crest at the bottom, so the gradient — and the text sitting in
   the calm water — follows that structure instead of one imposed on it. */

.hero {
  position: relative;
  color: var(--on-navy);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  min-height: clamp(32rem, 84vh, 46rem);
  padding-top: clamp(6.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(6rem, 14vw, 11rem);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--navy-deep); }
.hero__bg picture,
.hero__bg img { width: 100%; height: 100%; }
.hero__bg img {
  object-fit: cover;
  animation: hero-settle 2.2s var(--ease) both;
}
@keyframes hero-settle {
  from { transform: scale(1.045); opacity: 0.001; }
  to   { transform: scale(1);     opacity: 1; }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    182deg,
    rgba(var(--scrim), 0.82) 0%,
    rgba(var(--scrim), 0.68) 32%,
    rgba(var(--scrim), 0.38) 62%,
    rgba(var(--scrim), 0.16) 100%
  );
}

.hero__inner { position: relative; z-index: 2; }
.hero__title { max-width: 31ch; text-wrap: balance; }
.hero__title .nb { white-space: nowrap; }
.hero__lead { margin-top: clamp(1.5rem, 2.4vw, 2rem); max-width: 34ch; color: var(--on-navy-2); }

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
}

/* 8. What We Do --------------------------------------------------------------
   Rhythm now comes from an animated hairline and a small index numeral
   reused from the section-level numbering system, rather than an
   alternating row background — the earlier treatment read as a table. */

.whatwedo__head { margin-bottom: clamp(2.75rem, 4.5vw, 4rem); }

.practice { position: relative; padding-block: clamp(2.75rem, 4vw, 4.25rem); }
.practice:last-of-type { border-bottom: 1px solid var(--rule); }
/* Default: a plain, always-visible rule — correct with or without JS. */
.practice::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--rule-2);
}
/* Only when JS has run does the rule opt into collapsing and expanding
   on scroll — the same progressive-enhancement pattern as .reveal below. */
.js .practice::before { width: 0; transition: width 1.1s var(--ease); }
.js .practice.is-visible::before { width: 100%; }

.practice__label { margin-bottom: 0.9rem; }
.practice__name { text-wrap: balance; }
.practice__text { max-width: 56ch; color: var(--ink-2); }

@media (min-width: 900px) {
  .practice__label { grid-column: 1 / span 4; margin-bottom: 0; padding-right: 1rem; }
  .practice__text  { grid-column: 6 / span 7; }
}

/* 9. The Firm -----------------------------------------------------------------
   Weight comes from typographic contrast between the two paragraphs, not
   from added copy or imagery. */

.firm__head { margin-bottom: clamp(1.75rem, 3vw, 0rem); }
.firm__body { max-width: 50ch; }
.firm__body > * + * { margin-top: 1.4em; }

.firm__lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-practice);
  line-height: 1.26;
  letter-spacing: -0.008em;
  color: var(--on-navy);
}

@media (min-width: 900px) {
  .firm__head { grid-column: 1 / span 4; margin-bottom: 0; }
  .firm__body { grid-column: 6 / span 7; }
}

/* 10. Contact -------------------------------------------------------------------
   Field labels adopt the same tracked micro-label used for section
   numerals and eyebrows elsewhere, so the form reads as part of the same
   system rather than a generic web form dropped onto the page. */

.contact__aside { margin-bottom: clamp(2.5rem, 4vw, 0rem); }
@media (min-width: 900px) {
  .contact__aside { grid-column: 1 / span 5; margin-bottom: 0; }
  .contact__form  { grid-column: 7 / span 6; }
}

.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: block; margin-bottom: 1.25rem; }
.field > span {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.2s ease;
}
.field:focus-within > span { color: var(--navy); }
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  background: #fdfcfa;
  border: 1px solid var(--field);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  outline: none;
}
.field-row .field { margin-bottom: 0; }
.field-row + .field { margin-top: 1.25rem; }

.form__status {
  margin-top: 1rem;
  min-height: 1.5rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.form__status:not(:empty) { opacity: 1; transform: none; }
.form__status[data-state="error"] { color: #7d2a20; }

/* 11. Footer ---------------------------------------------------------------------
   Trimmed to what closes the page: mark, name, the same three links as the
   header, and a plain bottom bar. The descriptor line from earlier passes
   was removed as a direct repeat of the hero statement. */

.site-footer {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.site-footer a { text-decoration: none; }
.footer__brand .brand__logo { height: 26px; }
.footer__legal { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--on-navy-2); }

.footer__col { margin-top: clamp(2.5rem, 4vw, 0rem); }
.footer__col .eyebrow { display: block; margin-bottom: 0.9rem; }
.footer__col li + li { margin-top: 0.45rem; }
.footer__col li, .footer__col a { font-size: var(--fs-micro); color: var(--on-navy-2); }
.footer__col a:hover { color: var(--on-navy); }
@media (min-width: 900px) {
  .footer__brand { grid-column: 1 / span 5; align-self: center; }
  .footer__col   { grid-column: 7 / span 6; margin-top: 0; align-self: center; }
}

.footer__bottom {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--on-navy-3);
}

/* 12. Motion ---------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .reveal.is-visible[data-delay="1"] { transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  /* The rule-expansion and menu-stagger transitions above are more specific
     than a plain override here would be, so motion is neutralised globally
     instead: every transition/animation collapses to effectively zero
     duration, and the JS-driven end states (is-visible, is-open) still
     apply normally, just without a perceptible transition. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* 13. Insights — shared row system -------------------------------------------
   Insights reuses the practice-row anatomy from section 8: a fine hairline
   establishing the row, a narrow label column and a wider content column on
   the same 4 / 7 relationship used by What We Do and The Firm. Nothing here
   introduces a new visual vocabulary — it is the existing editorial row
   carrying different content. */

.insight-row { position: relative; padding-block: clamp(2.5rem, 3.8vw, 3.75rem); }
.insight-row:last-of-type { border-bottom: 1px solid var(--rule); }

.insight-row__meta { margin-bottom: 1.25rem; }
.insight-row__meta > * + * { margin-top: 0.35rem; }
.insight-row__author { font-size: var(--fs-small); color: var(--ink-2); }
.insight-row__date {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.insight-row__title { text-wrap: balance; }
.insight-row__title a { text-decoration: none; }
.insight-row__title a:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.insight-row__deck { margin-top: 0.85rem; max-width: 58ch; color: var(--ink-2); }
.insight-row__more { margin-top: 1.35rem; }

@media (min-width: 900px) {
  .insight-row__meta { grid-column: 1 / span 4; margin-bottom: 0; padding-right: 1rem; }
  .insight-row__body { grid-column: 6 / span 7; }
}

/* The row hairline is shared with .practice so the two never drift: a plain
   always-visible rule by default, opting into the scroll expansion only once
   JS has run. */
.insight-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--rule-2);
}
.js .insight-row::before { width: 0; transition: width 1.1s var(--ease); }
.js .insight-row.is-visible::before { width: 100%; }

/* 14. Insights on the homepage ------------------------------------------------ */

.insights__head { margin-bottom: clamp(2.75rem, 4.5vw, 4rem); }
.insights__descriptor { max-width: 46ch; }
.insights__foot { margin-top: clamp(2.25rem, 3.5vw, 3rem); }

@media (min-width: 900px) {
  .insights__head-title { grid-column: 1 / span 4; }
  .insights__descriptor { grid-column: 6 / span 7; align-self: end; }
}

/* 15. Inner pages ------------------------------------------------------------
   Inner pages open beneath the fixed header in its solid state rather than
   over a photograph, so they need the header's own height added to the
   leading space. The header measures 4.25rem, rising to 5.25rem at 1024px. */

.page-head {
  padding-top: calc(4.25rem + clamp(2.75rem, 6vw, 5rem));
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
@media (min-width: 1024px) {
  .page-head { padding-top: calc(5.25rem + clamp(2.75rem, 6vw, 5rem)); }
}

.page-head__title { text-wrap: balance; }
.page-head__intro { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); max-width: 50ch; }

@media (min-width: 900px) {
  .page-head__inner { grid-column: 1 / span 9; }
}

/* The list of Insights on the index carries no section padding of its own —
   the rows and their hairlines set the rhythm. */
.insights-index { padding-bottom: var(--section); }

/* Link with the same trailing arrow as .btn, but as understated text. Used
   for "Read insight", "View all Insights" and the article's return path. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-small);
  text-decoration: none;
}
.link-arrow > span {
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.link-arrow:hover > span { border-bottom-color: var(--navy); }
.link-arrow svg {
  width: 15px;
  height: 10px;
  flex: none;
  transition: transform 0.3s var(--ease);
}
.link-arrow:hover svg { transform: translateX(4px); }

/* 16. Individual Insight -----------------------------------------------------
   An executive paper set on the existing paper ground: masthead, a narrow
   context rail and a single controlled column of reading. The measure is
   capped in ch so the line length stays near 65 characters regardless of how
   wide the viewport becomes. */

.article__head { padding-bottom: clamp(2rem, 3.5vw, 3rem); }

/* The practice line sits under the eyebrow as its own quiet line rather than
   as a badge, and links to the practice the piece belongs to. */
.article__practice {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.article__practice a { text-decoration: none; border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; transition: border-color 0.2s ease; }
.article__practice a:hover { border-bottom-color: var(--navy); }

.article__title {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.125rem);
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.article__deck {
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 54ch;
}

@media (min-width: 900px) {
  .article__head-inner { grid-column: 1 / span 10; }
}

/* Context rail. Above the body on small screens, beside it from 900px. */
.article__rail {
  margin-bottom: clamp(2.25rem, 4vw, 0rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.article__rail dl { margin: 0; }
.article__rail dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article__rail dd { margin: 0.5rem 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.article__rail dd + dt { margin-top: 1.5rem; }
.article__rail dd time { font-variant-numeric: tabular-nums; }
.article__rail-role { display: block; color: var(--ink-3); font-size: var(--fs-micro); }

/* The reading measure is capped in em rather than ch on purpose. A ch is the
   width of the digit zero, which is appreciably wider than Inter's average
   lowercase advance, so a ch-based cap reads as roughly a fifth more
   characters per line than the number suggests. At 34em the line holds
   about 65-68 characters from tablet portrait upwards, and the cap governs
   wherever the grid column would otherwise run longer. */
.article__body {
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-2);
}
.article__body > * + * { margin-top: 1.3em; }
.article__body h2 {
  margin-top: clamp(2.75rem, 4.5vw, 4rem);
  margin-bottom: 0.85rem;
  max-width: 30ch;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3125rem, 1.16rem + 0.62vw, 1.625rem);
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}
/* The margin above an H2 already carries the separation; the paragraph rule
   above must not add to it. */
.article__body > h2 + * { margin-top: 0; }
.article__body a { overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .article__rail {
    grid-column: 1 / span 3;
    margin-bottom: 0;
  }
  /* Eight columns while the viewport is still narrow, so the line does not
     fall short once the rail takes its three columns; seven once there is
     width enough for the measure to be set by the cap above. */
  .article__body { grid-column: 5 / span 8; }
}
@media (min-width: 1200px) {
  .article__body { grid-column: 5 / span 7; }
}


/* Source notes remain inside the established reading column: no cards,
   sidebar or secondary editorial system. */
.article__sources {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.article__sources .eyebrow { margin-bottom: 1rem; }
.article__sources ol {
  padding-left: 1.2rem;
  list-style: decimal;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
}
.article__sources li + li { margin-top: 0.7rem; }
.article__sources a {
  color: var(--ink-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

/* Article close: a fine rule, the practices the piece belongs to, and a quiet
   way back. No calls to action — Contact already exists on the homepage. */
.article__foot { margin-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: var(--section); }
.article__foot-inner { padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--rule-2); }
.article__practices { margin: 0; }
.article__practices dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article__practices dd { margin: 0.6rem 0 0; }
.article__practices dd + dd { margin-top: 0.35rem; }
.article__return { margin-top: clamp(2rem, 3.2vw, 2.5rem); }

@media (min-width: 900px) {
  .article__practices { grid-column: 1 / span 4; }
  .article__foot-body { grid-column: 6 / span 7; }
  .article__return { margin-top: 0; }
}

/* 17. Mobile navigation, inner pages -----------------------------------------
   The panel is navy on every page, so focus rings inside it need the light
   outline regardless of the header's own state. */

@media (max-width: 1023px) {
  .site-nav.is-open :focus-visible { outline-color: var(--on-navy); }
  /* Four navigation items now, so the open-panel stagger extends by one. */
  .site-nav.is-open li:nth-child(4) { transition-delay: 0.24s; }
  .site-nav.is-open li:nth-child(5) { transition-delay: 0.30s; }
}