/* ==========================================================================
   Neuropsychology Specialists of Austin
   Stylesheet built from Brand Document v1. Values are read out of that
   document, not reinterpreted. Section numbers below refer to it. Colour
   comes from the client's moodboard (November 2026) instead; see README.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — 03 Color, 05 Type scale, 06 Spacing
   -------------------------------------------------------------------------- */

:root {
  /* The client's moodboard palette (November 2026). It replaces the brand
     document's charcoal neutrals; see README, "Departures". */
  --navy: #1F2D3D;        /* Deep Navy: text, header, footer, the closing panel */
  --sage: #5D7A6E;        /* Sage Green: feature bands. White text only, 4.7:1 */
  --gold: #C28A33;        /* Warm Gold: buttons, rules, the mark. Text only on navy */
  --ivory: #F3EDE2;       /* Warm Ivory: hero, page heads, quiet fields */
  --bluegray: #DCE3E8;    /* Soft Blue Gray: bands; secondary text on navy */
  --white: #FFFFFF;       /* page */

  /* Derived from the palette, where it cannot reach contrast on its own */
  --gold-deep: #845C1E;   /* gold type on light grounds: 5.9 white, 5.1 ivory, 4.6 blue gray */
  --gold-hover: #D6A04F;  /* button hover; the navy label is 6.0:1 on it */
  --navy-soft: #4B5A69;   /* secondary text: 7.1 white, 6.1 ivory, 5.5 blue gray */
  --rule: #CBD4DB;        /* hairlines on white and ivory */
  --rule-strong: #AEBBC6; /* table rules, tag borders, hairlines on blue gray */
  --navy-line: #3A4A5C;   /* hairlines on navy */
  --rail: #5F7083;        /* the header lockup's "of Austin" rails */
  --bluegray-pale: #E8EDF1; /* photo-slot stripes */

  /* Roles. Components colour themselves from these, and each ground (sage
     band, navy header, footer and closing panel) resets them, so nothing
     inside needs a dark-ground variant of its own. */
  --ink: var(--navy);              /* text */
  --ink-2: var(--navy-soft);       /* secondary text */
  --accent-text: var(--gold-deep); /* eyebrows, step labels, pull quotes */
  --mark: var(--gold);             /* link underlines, rules, list dashes */
  --line: var(--rule);             /* hairlines */
  --on-ink: var(--white);          /* text on an --ink fill */

  /* Spacing — base 8, multiples only */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;
  --s9: 192px;

  /* Families */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --caps: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Measure — 06 Spacing */
  --content: 1160px;
  --measure: 680px;
  /* The article column is set by character count, not by the 680px cap: the
     brand document makes 65–75 characters the hard rule on posts, and 680px
     of Libre Franklin at 19px measures 64. 720px measures 68. */
  --measure-article: 720px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body { font-size: 19px; }
}

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

/* Headings — 05 Type scale. Mobile values apply below 768px. */

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font: 700 36px/1.10 var(--serif);
  letter-spacing: -0.015em;
}

h2 {
  font: 700 28px/1.18 var(--serif);
  letter-spacing: -0.01em;
}

h3 {
  font: 700 22px/1.25 var(--serif);
  letter-spacing: -0.01em;
}

h4 {
  font: 600 19px/1.40 var(--sans);
}

@media (min-width: 768px) {
  h1 { font-size: 56px; }
  h2 { font-size: 39px; }
  h3 { font-size: 27px; }
  h4 { font-size: 21px; }
}

p { margin: 0; text-wrap: pretty; }

/* Links. Warm Gold is 3.0:1 on white, so link text keeps the ink colour and
   the gold does the signalling as a hairline underline. */

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--mark);
}

a:hover { border-bottom-color: var(--ink); }

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

ul, ol { margin: 0; padding: 0 0 0 var(--s3); }

li { margin: 0; }

li + li { margin-top: var(--s2); }

strong { font-weight: 600; }

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

address {
  font-style: normal;
  line-height: 1.65;
}

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--s3);
}

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

.section { padding: var(--s6) 0; }

@media (min-width: 768px) { .section { padding: var(--s7) 0; } }
@media (min-width: 1440px) { .section { padding: var(--s8) 0; } }

.section--tight { padding-top: 0; }

.section--shell { background: var(--ivory); }

/* Grounds from the client moodboard. Each resets the colour roles, so type,
   links, rules, lists and buttons inside need no variants of their own. */

.section--sage {
  background: var(--sage);
  --ink: var(--white);
  --ink-2: var(--white);
  --accent-text: var(--white);
  --mark: var(--ivory);
  --line: #7F9A8F;
  --on-ink: var(--sage);
  color: var(--ink);
}

.section--blue {
  background: var(--bluegray);
  --line: var(--rule-strong);
}

.site-header,
.site-footer,
.cta {
  --ink: var(--white);
  --ink-2: var(--bluegray);
  --accent-text: var(--gold);
  --mark: var(--gold);
  --line: var(--navy-line);
  --on-ink: var(--navy);
  color: var(--ink);
}

/* The closing call to action: a Deep Navy panel holding the gold button, as
   in the moodboard. It stays an inset panel rather than a full-bleed band, so
   the white margin under it keeps it apart from the navy footer; full-bleed,
   the two would read as one slab. */

.cta {
  background: var(--navy);
  padding: var(--s5) var(--s3);
}

@media (min-width: 768px) { .cta { padding: var(--s6); } }

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

.stack { display: flex; flex-direction: column; }

.stack--8 { gap: var(--s1); }
.stack--16 { gap: var(--s2); }
.stack--24 { gap: var(--s3); }
.stack--32 { gap: var(--s4); }
.stack--48 { gap: var(--s5); }
.stack--64 { gap: var(--s6); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: var(--s2) var(--s3);
  border: 0;
  z-index: 20;
}

.skip-link:focus {
  left: 0;
  position: fixed;
}

/* --------------------------------------------------------------------------
   Type roles — 04 Typography, 05 Type scale
   -------------------------------------------------------------------------- */

.eyebrow {
  font: 600 11px/1.20 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

@media (min-width: 768px) { .eyebrow { font-size: 12px; } }

.eyebrow--ink { color: var(--ink); }
.eyebrow--dark { color: var(--accent-text); }

.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (min-width: 768px) { .lead { font-size: 23px; } }

.lead--ink { color: var(--ink); }
.lead--dark { color: var(--ink-2); }

.caption {
  font-size: 15px;
  line-height: 1.50;
  color: var(--ink-2);
}

.meta {
  font-size: 15px;
  line-height: 1.50;
  color: var(--ink-2);
}

.pullquote {
  font: 600 italic 24px/1.30 var(--serif);
  color: var(--accent-text);
  border-left: 2px solid var(--mark);
  padding-left: var(--s3);
  margin: 0;
}

@media (min-width: 768px) { .pullquote { font-size: 31px; } }

.rule-gold {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--mark);
  border: 0;
  flex: none;
}

/* Working-assumption marker. Carried through from section 11 of the brand
   document — every one of these has to be confirmed or cut before launch.

   Deliberately off-palette. Red appears nowhere else on this site, which is
   the point: nobody should be able to mistake one of these for copy, and every
   one has to be gone before launch. White on #B3261E is 6.5:1. */

.confirm {
  display: inline-block;
  font: 600 11px/1 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #B3261E;
  border: 1px solid #B3261E;
  padding: 5px 8px;
  margin-left: var(--s1);
  white-space: nowrap;
  vertical-align: 2px;
}


/* --------------------------------------------------------------------------
   Buttons. From the moodboard: Warm Gold, in spaced capitals. The label is
   Deep Navy, not the moodboard's white: white on Warm Gold is 3.0:1, under AA
   at this size, and navy is 4.6:1 (6.0:1 on the hover gold). Square corners,
   as everywhere else.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 12px var(--s4);
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  font: 600 15px/1.2 var(--caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--navy);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}

.btn--onink {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn--onink:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* --------------------------------------------------------------------------
   The lockup — 02. The hairline rules sit at top: 0.157em and the row sets
   its own font-size so the em resolves against the italic, not the inherited
   size. That centres them on the x-height of the "o" in "of". Keep it.
   -------------------------------------------------------------------------- */

/* The full lockup: mark, stacked wordmark, "of Austin" between hairlines, then
   the Montserrat caps line. It only appears in the footer, because the
   document floors the full lockup at 88px of mark — under that the caps line
   stops being readable, which is why the header carries the compact form
   instead. Mark 88px at mobile, 104px from 768 up.

   Unlike the header, the hairlines here stay gold: the mark on navy is
   white, so "of Austin" is the only gold in the lockup and the rules can join
   it without the accent tripling up. */

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  border: 0;
}

.lockup__mark { width: 104px; }

.lockup__name {
  font: 700 28px/1.12 var(--serif);
}

.lockup__eyebrow {
  font: 600 11px/1.2 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lockup__austin {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px; /* the em the rules resolve against */
}

.lockup__austin span:first-child,
.lockup__austin span:last-child {
  display: block;
  width: 52px;
  height: 1px;
  background: var(--gold);
  position: relative;
  top: 0.157em;
}

.lockup__austin em {
  font: 600 italic 23px/1 var(--serif);
  color: var(--gold);
  font-style: italic;
}

.lockup--dark .lockup__name { color: var(--white); }
.lockup--dark .lockup__austin em { color: var(--gold); }
.lockup--dark .lockup__eyebrow { color: var(--bluegray); }

/* The lockup's own hairlines are gold and fixed-width, as drawn. The header's
   rail behaviour does not reach in here. */
.lockup__austin span {
  background: var(--gold);
  width: 40px;
  flex: none;
}

@media (min-width: 768px) {
  .lockup { gap: var(--s3); }
  .lockup__mark { width: 136px; }
  .lockup__name { font-size: 39px; }
  .lockup__austin { font-size: 26px; }
  .lockup__austin em { font-size: 26px; }
  .lockup__austin span { width: 56px; }
  .lockup__eyebrow { font-size: 12px; }
}

/* Header logo: mark plus wordmark, no eyebrow line. The full lockup needs
   88px of mark or more, so the compact form drops the caps line rather than
   shrinking it. 01 Minimum sizes. */

.logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 0;
  flex: none;
}

/* The gold mark. The brand document floors it at 48px — under that the
   tapered stroke ends thin out — so it stays 48px at every breakpoint rather
   than stepping down with the type. */

.logo__mark {
  width: 48px;
  height: 40px;
  flex: none;
  align-self: center;
  /* Box-centring leaves the mark reading high, because the name's half-leading
     sits above the caps while "of Austin" has almost no descender below its
     baseline — so the type's visible ink sits lower in the box than the box
     centre does. Measured at 2.03px out at 375 and 2.55px at 1440; corrected
     here and re-measured to under a third of a pixel. Optical, not spacing,
     which is why it is not on the 8px scale. */
  transform: translateY(2px);
}

.logo__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo__name {
  font: 700 21px/1.15 var(--serif);
  letter-spacing: -0.005em;
}

/* "of Austin" sits centred under the name with the rules running out to each
   end, so the second line is exactly as wide as the first — the row stretches
   and each rule takes the space left over. The rules are slate blue, not
   gold: the mark and the italic are already carrying the accent, and a third
   gold element in one lockup stops the accent being one.

   The 0.157em offset stays, and the row sets its own font-size so that em
   resolves against the italic. That centres the rules on the x-height of the
   "o" in "of". */

.logo__austin {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  font-size: 18px;
}

.logo__austin span {
  display: block;
  width: auto;
  flex: 1 1 auto;
  height: 1px;
  background: var(--rail);
  position: relative;
  top: 0.157em;
}

.logo__austin em {
  font: 600 italic 18px/1 var(--serif);
  color: var(--gold);
  flex: none;
}

@media (min-width: 768px) {
  .logo__mark { transform: translateY(2.5px); }
}

@media (max-width: 767px) {
  .logo__name { font-size: 15px; line-height: 1.14; max-width: 10em; }
  .logo__austin { gap: var(--s1); font-size: 14px; }
  .logo__austin em { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.utility {
  background: var(--navy);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
  font-size: 15px;
  line-height: 1.5;
}

.utility a {
  color: var(--white);
  border-bottom-color: var(--gold);
}

.utility a:hover { border-bottom-color: var(--white); }

.utility__address { display: none; }

@media (min-width: 768px) {
  .utility__address { display: block; }
}

.site-header { background: var(--navy); }

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.header__cta { display: none; }

@media (min-width: 1024px) {
  .header__cta { display: inline-flex; }
}

/* A plain hamburger. 44px square so it clears the tap target on its own,
   with 1px bars — the same hairline the rest of the system separates with. */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ink-2);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}

.nav-toggle:hover { border-color: var(--ink); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Open: the outer bar goes, the other two cross. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (min-width: 768px) { .nav-toggle { display: none; } }

/* Without JS the nav list stays open. The toggle only takes over once the
   inline script has flagged the document. */

.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

.site-nav { border-top: 1px solid var(--line); }

.nav__list {
  list-style: none;
  margin: 0;
  padding-left: var(--s3);
  padding-right: var(--s3);
  display: flex;
  flex-direction: column;
}

.nav__list li { margin: 0; }

.nav__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}

.nav__list li:last-child a { border-bottom: 0; }

.nav__list a:hover { color: var(--gold); }

.nav__list a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
  padding-left: var(--s2);
}

@media (min-width: 768px) {
  .js .site-nav { display: block; }

  .site-nav {
    border-top: 1px solid var(--line);
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    max-width: var(--content);
    margin: 0 auto;
  }

  .nav__list a {
    min-height: 56px;
    font-size: 15px;
    border-bottom: 0;
    box-shadow: none;
  }

  .nav__list a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--gold);
    padding-left: 0;
    font-weight: 600;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: var(--s6) 0;
  background: var(--ivory);
}

@media (min-width: 768px) { .hero { padding: var(--s7) 0; } }
@media (min-width: 1440px) { .hero { padding: var(--s8) 0 var(--s7); } }

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 900px;
}

/* Text and the testing-room photograph side by side from 1024px, as in the
   moodboard's hero. Stacked below that, text first. */

.hero__grid {
  display: grid;
  gap: var(--s5);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s6);
  }
}

/* Home hero: the photograph of both doctors fills the right half of the band,
   edge to edge and full height, from 1200px. Below that it sits under the text
   at full width. The crop is tall (1100x1165) and anchored near the top so the
   faces stay in frame at any height. */

.hero--bleed { position: relative; padding: 0; }
.hero--bleed .hero__inner { padding: var(--s6) 0; }

/* Stacked, below 1200px: a 3:2 band under the text, cropped from the top so
   both faces are whole at any width. */
.hero--bleed .hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 10%;
}

/* Side by side from 1200px only. Two things must hold, and both fail on a
   narrower screen: the text column has to be wider than "neuropsychologists",
   which cannot wrap (about 503px at 56px type), and the photo box has to be at
   least 0.85 as wide as it is tall, or object-fit crops into the two faces. */
@media (min-width: 1200px) {
  .hero--bleed .hero__inner { max-width: calc(52% - var(--s5)); padding: var(--s7) 0; }
  .hero--bleed h1 { font-size: clamp(50px, 4.4vw, 56px); }
  .hero--bleed .hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 12%;
  }
}

.page-head {
  padding: var(--s6) 0 var(--s5);
  background: var(--ivory);
}

@media (min-width: 768px) { .page-head { padding: var(--s7) 0 var(--s6); } }

.page-head__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 900px;
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--sidebar { grid-template-columns: minmax(200px, 1fr) 2fr; }
}

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

.grid--tight { gap: var(--s3); }
.grid--hair { gap: var(--s4); }

/* Section header + body, the recurring two-column page pattern */

.split {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: var(--s6);
  }
}

/* --------------------------------------------------------------------------
   Process steps — the centrepiece module
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
}

.steps li { margin: 0; }

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}

.steps li:last-child .step { border-bottom: 1px solid var(--line); }

.step__index {
  font: 600 11px/1.2 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.step__duration {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 600 italic 24px/1.30 var(--serif);
  color: var(--accent-text);
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .step { border-top: 1px solid var(--ink); padding-top: var(--s3); }
  .steps li:last-child .step { border-bottom: 0; }
  .step__index { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Cards and quiet fields
   -------------------------------------------------------------------------- */

.card {
  background: var(--ivory);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

@media (min-width: 768px) { .card { padding: var(--s4); } }

.card--outline {
  background: transparent;
  border: 1px solid var(--line);
}

.card__title { margin: 0; }

/* Definition-style rows: label left, prose right, hairline between */

.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}

.rows .row:last-child { border-bottom: 1px solid var(--line); }

@media (min-width: 768px) {
  .row {
    grid-template-columns: 200px 1fr;
    gap: var(--s4);
    padding: var(--s4) 0;
  }
}

/* Plain two-column list of short items */

.list-plain {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.list-plain li { margin: 0; }

/* Column lists. A rule per item looked continuous only when the last row
   happened to be full: seven items in three columns left one rule hanging
   under a lone item and two gaps where rules should have been. The gold dash
   is the same marker .list-rule uses, it survives any item count, and it does
   not pretend to be a table. */

.list-cols {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2) var(--s5);
}

.list-cols li {
  margin: 0;
  padding-left: var(--s4);
  position: relative;
}

.list-cols li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 16px;
  height: 1px;
  background: var(--mark);
}

@media (min-width: 768px) {
  .list-cols { gap: var(--s3) var(--s6); grid-template-columns: repeat(2, 1fr); }
}

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

/* Marked list with a gold hairline instead of a bullet */

.list-rule {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.list-rule li {
  margin: 0;
  padding-left: var(--s4);
  position: relative;
}

.list-rule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 16px;
  height: 1px;
  background: var(--mark);
}

/* --------------------------------------------------------------------------
   Tables — ivory headers, blue-gray rules
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.6;
}

@media (min-width: 768px) { table { font-size: 19px; } }

caption {
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-bottom: var(--s2);
}

th {
  text-align: left;
  background: var(--ivory);
  font: 600 11px/1.2 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--s2) var(--s3);
  vertical-align: bottom;
}

@media (min-width: 768px) { th { font-size: 12px; } }

td {
  padding: var(--s3);
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: top;
}

tbody tr:first-child td { border-top: 1px solid var(--rule-strong); }

.td-service { font-weight: 500; }

.td-fee { white-space: nowrap; }

/* Below 1024 a wide table stops being a table. Each row becomes a block: the
   first cell is the row's name, the rest carry their column header as a label.

   The breakpoint is 1024, not 768, because the constraint is the column the
   table sits in rather than the viewport. An article's measure is 720px at any
   screen size, so a three-column comparison table is just as cramped on a
   tablet as on a phone — it was scrolling sideways and clipping its third
   column at 768. The nav now collapses below 768, so 1024 is a content-width
   breakpoint only.

   This is the default for every table on the site: the generator labels each
   body cell from its own thead and marks the table stackable, so any table
   added later inherits it without being asked. */

@media (max-width: 1023px) {
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td {
    display: block;
    width: 100%;
  }

  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table--stack tr {
    border-top: 1px solid var(--rule-strong);
    padding: var(--s3) 0;
  }

  .table--stack tbody tr:first-child td { border-top: 0; }

  .table--stack td {
    border: 0;
    padding: 0;
  }

  .table--stack td + td { padding-top: var(--s2); }

  .table--stack td:first-child {
    font-weight: 600;
    font-size: 19px;
  }

  .table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font: 600 11px/1.2 var(--caps);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding-bottom: 4px;
  }

  /* A caption inside a block-level table shrink-wraps to nothing. */
  .table--stack caption {
    display: block;
    width: 100%;
  }

  /* Fees are kept on one line in a real table column; stacked, that is what
     was pushing the row off the side of the screen. */
  .table--stack .td-fee { white-space: normal; }

  /* Nothing to scroll once it is stacked. */
  .table-wrap { overflow-x: visible; }
}

/* --------------------------------------------------------------------------
   Clinician bios — full width each, typographic fallback for headshots
   -------------------------------------------------------------------------- */

/* Each bio is an anchor target — post bylines link straight to the clinician
   who wrote the post. The margin keeps the heading off the top of the window
   when you arrive. */

.bio {
  scroll-margin-top: var(--s5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .bio {
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: var(--s6);
  }
}

/* --------------------------------------------------------------------------
   Greeked image slots — 07 Photography

   Photography has been commissioned and not delivered. These mark where each
   frame goes and name the shot, using the striped field from section 07 of the
   brand document. Every one of them comes out when the files land.
   -------------------------------------------------------------------------- */

.placeholder {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg,
    var(--bluegray) 0 8px,
    var(--bluegray-pale) 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
}

.placeholder--square { aspect-ratio: 1 / 1; }

.placeholder--wide { aspect-ratio: 16 / 9; }

.placeholder--portrait { aspect-ratio: 4 / 5; }

.placeholder__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* Where a photograph has not been commissioned for the slot at all, section 07
   names the fallback instead: name and credentials over an ivory field, no
   silhouette icon. */

/* A headshot slot is a headshot slot at every width. Without a cap, the square
   placeholder becomes as wide as the column when the layout stacks, which at
   768px is a 720px-tall square standing over a three-paragraph bio. */

.bio > .figure { max-width: 320px; }
.byline > .figure { max-width: 200px; }

.portrait-fallback {
  background: var(--ivory);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-self: start;
}

.portrait-fallback__name {
  font: 700 22px/1.25 var(--serif);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .portrait-fallback__name { font-size: 27px; }
}

/* --------------------------------------------------------------------------
   Insights — index cards and post template
   -------------------------------------------------------------------------- */

.post-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.post-list li { margin: 0; }

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}

.post-list li:last-child .post-card { border-bottom: 1px solid var(--line); }

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  color: var(--ink-2);
}

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

.post-card__title a { border-bottom: 0; }
.post-card__title a:hover { border-bottom: 1px solid var(--mark); }

.tag {
  font: 600 11px/1 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 7px 10px;
  background: transparent;
  cursor: pointer;
}

.tag[aria-pressed="true"],
.tag--static {
  border-color: var(--ink);
}

.tag[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
}

/* Post body. Measure is a hard 65–75 characters here. 05 Type scale.

   Articles run as a centred column rather than a left-aligned one: on a
   1440px screen a 680px measure pinned to the left of a 1160px container
   leaves the reader's eye travelling back across half a metre of empty paper
   between paragraphs. Everything in the article — eyebrow, headline,
   standfirst, body, byline — sits on the same centred column. */

.prose {
  max-width: var(--measure-article);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.page-head--article .page-head__inner {
  max-width: var(--measure-article);
  margin-inline: auto;
}

/* Section padding plus page-head padding put a quarter of a screen of nothing
   between the standfirst and the first paragraph. An article's head and body
   are one continuous thing; close it up. */
.page-head--article { padding-bottom: var(--s5); }
.page-head--article + .section { padding-top: var(--s5); }

.measure--center { margin-inline: auto; }

/* The one thing allowed to break the column: a wide table gets the full
   content width back before it starts scrolling inside itself. */
.prose .table-wrap {
  width: 100%;
}

@media (min-width: 1024px) {
  .prose .table-wrap {
    width: calc(100% + var(--s7));
    margin-inline: calc(var(--s7) / -2);
  }
}

.prose > h2 { padding-top: var(--s4); }

.prose > h3 { padding-top: var(--s2); }

.prose ul, .prose ol { padding-left: var(--s3); }

.prose blockquote {
  margin: var(--s2) 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--mark);
  font: 600 italic 24px/1.30 var(--serif);
  color: var(--accent-text);
}

@media (min-width: 768px) {
  .prose blockquote { font-size: 31px; }
}

.prose .table-wrap { margin: var(--s2) 0; }

.prose figcaption,
.prose .footnote {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

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

.byline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--ivory);
}

@media (min-width: 768px) {
  .byline { grid-template-columns: 200px 1fr; gap: var(--s4); }
}

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

.site-footer {
  background: var(--navy);
  color: var(--ink-2);
  padding: var(--s6) 0;
}

@media (min-width: 768px) { .site-footer { padding: var(--s7) 0 var(--s6); } }

.site-footer a { color: var(--white); border-bottom-color: var(--gold); }
.site-footer a:hover { border-bottom-color: var(--white); }

.site-footer h2, .site-footer h3 { color: var(--white); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s6); }
}

.footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.footer__list li { margin: 0; }

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 0;
}

.footer__list a:hover { border-bottom: 1px solid var(--gold); }

.footer__bottom {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  font-size: 15px;
  color: var(--ink-2);
}

.footer__crest {
  display: flex;
  justify-content: center;
  padding-bottom: var(--s6);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Patient Portal. A secondary action: a ghost button in the header bar from
   768px, and the last item in the drawer below that, where the bar has no
   room for it.
   -------------------------------------------------------------------------- */

.header__portal { display: none; }

.nav__portal {
  padding: var(--s3);
  border-top: 1px solid var(--line);
}

.nav__portal .btn { width: 100%; }

@media (min-width: 768px) {
  .header__portal { display: inline-flex; }
  .nav__portal { display: none; }
}

/* --------------------------------------------------------------------------
   Entries: the twelve FAQs and the five core services. Every answer is open,
   with no expand/collapse: heading left and text right from 1024px, as the
   section heads sit, with blue-gray hairlines between. Each entry keeps its
   own id, so deep links land on it.
   -------------------------------------------------------------------------- */

.entries { border-bottom: 1px solid var(--line); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--s3);
}

@media (min-width: 1024px) {
  .entry {
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: var(--s6);
  }
}

.entry__title {
  font: 700 22px/1.25 var(--serif);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .entry__title { font-size: 27px; }
}

.entry__body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: var(--measure);
}

.entry__body h4 { padding-top: var(--s2); }

/* Rows whose label column has to hold a long single word ("Neuropsychological"
   at 27px is about 260px). The default 200px column lets it run into the text. */
@media (min-width: 768px) {
  .rows--wide .row { grid-template-columns: 280px 1fr; }
}

/* --------------------------------------------------------------------------
   Office gallery (Services). A film strip: portrait photographs side by side
   that scroll sideways and snap, three across on desktop, two on tablet, one
   and a sliver of the next on a phone. It swipes and scrolls with no script;
   the script only adds the arrows and the counter, so they are hidden without
   it. No captions, at the client's request; no radius, no shadow.
   -------------------------------------------------------------------------- */

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
}

.gallery__controls { display: none; align-items: center; gap: var(--s2); }
.js .gallery__controls { display: flex; }

.gallery__count { margin: 0 var(--s2) 0 0; font-variant-numeric: tabular-nums; }

.gallery__btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 400 19px/1 var(--sans);
  cursor: pointer;
}

.gallery__btn:hover { background: var(--ink); color: var(--white); }

.gallery__btn:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: default;
}

.gallery {
  display: flex;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.js .gallery { scrollbar-width: none; }
.js .gallery::-webkit-scrollbar { display: none; }

/* margin: 0 cancels the site-wide "li + li" top margin, which pushed every
   photograph but the first down a row. */
.gallery > li { flex: 0 0 82%; margin: 0; scroll-snap-align: start; }
.gallery img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
  .gallery > li { flex-basis: calc((100% - var(--s3)) / 2); }
}

@media (min-width: 1024px) {
  .gallery > li { flex-basis: calc((100% - 2 * var(--s3)) / 3); }
}

@media print {
  .gallery { flex-wrap: wrap; overflow: visible; }
  .gallery > li { flex-basis: 30%; }
  .gallery__controls { display: none; }
}

/* Home, Our Providers: each headshot is a link to that doctor's bio. The
   site-wide link underline is switched off on the picture. */
.provider__photo { display: block; border: 0; }
.provider__photo img { display: block; width: 100%; height: auto; }

/* Closing panel: phone, email and hours under the buttons, above a hairline,
   so the panel carries the three facts a visitor needs to act on it. */
.cta__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* Each item is as wide as its text and never shrinks, so the email address
   (197px, and it cannot wrap) always has room. When the row runs out of
   width the last item drops to a second line instead of colliding. */
.cta__details > * { flex: 0 0 auto; }

/* A quoted review: the gold hairline of the section head is the only ornament. */
.quote { margin: 0; display: flex; flex-direction: column; gap: var(--s3); }
.quote blockquote { margin: 0; display: flex; flex-direction: column; gap: var(--s3); }

/* A list nested inside a ruled list: tighter, and set off from its parent line. */
.list-rule .list-plain {
  gap: var(--s1);
  padding-top: var(--s1);
}

@media print {
  .utility, .site-nav, .nav-toggle, .skip-link, .header__cta { display: none; }
  body { background: #fff; font-size: 11pt; }
  .site-header, .site-footer, .cta, .section--sage, .section--blue, .hero, .page-head {
    background: none;
    --ink: var(--navy);
    --ink-2: var(--navy-soft);
    --accent-text: var(--gold-deep);
    --line: var(--rule);
    color: var(--navy);
  }
  .header__portal { display: none; }
  .section, .hero, .page-head { padding: 12pt 0; }
  a { border-bottom: 0; }
}