/* =====================================================================
   psychiatryaustin.com -- site stylesheet (WP-V)
   =====================================================================

   Hand-written CSS that recreates the live site's design. No Divi builder
   classes, no framework, no external origin: every font, image and rule
   below is served from this origin, which is what lets the CSP in
   src/static/_headers stay as tight as it is.

   ---------------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------------
   Every value in :root was read off the live site rather than chosen
   here. The sources, for anyone re-deriving them:

     tools/archive/rendered/*.html   inline Divi module CSS
                                     (#divi-dynamic-critical-inline-css)
     et-core-unified-tb-19-tb-8-deferred-27.min.css
                                     the theme-builder header/footer sheet
     computed styles on the live pages at a 1493px viewport

   Colour
     --amber        #FFBE3F  utility bar, section bands, submit button,
                             the "Medical-Legal" card rule
     --amber-light  #FFD177  hero panel fill, homepage form panel
     --cream        #FFEBC6  form field fill
     --blue         #3F67D3  card rules, the filled banner, field borders
     --link         #081D91  link colour in footer and content blocks
     --charcoal     #3B3B3B  header button fill and footer links
     --body         #0F0F0F  body copy
     --ink          #000000  headings and nav
     --ink-soft     rgba(0,0,0,.86)  secondary headings (h3/h4/h5)
     --gray-100     #E4E4E4  alternating section band, button hover
     --stone / --stone-deep  #C9C6BF / #C9C4B9  forensic hero
     --slate        #B1C3D3  the field the contact card sits on

   Type
     Open Sans, self-hosted (WP-5), 300-800 in one variable face per
     style. The live site names Merriweather for three homepage headings;
     the rebuild does not self-host a second family, so those fall back to
     the stack the live CSS itself declares (Georgia, Times New Roman).

     body  17px / 2em, weight 400, --body
     h1    40px / 1.3, weight 700   (55px on the homepage hero)
     h2    28px / 1.3, weight 700
     h3    22px        h4  20px      h5  18px    h6  17px, all weight 700
     nav   14px / 1.35, weight 500

   Measure
     --measure       1080px   content column (Divi's row default: 80%
                              of the viewport, capped)
     --measure-wide  1200px   header and footer inner width
     --gutter        clamp(1.25rem, 4vw, 3.75rem)

   Breakpoint
     981px, the width Divi's own theme-builder header switched at, so the
     rebuilt header changes over where the live one does.
   ===================================================================== */

/* --- self-hosted Open Sans (WP-5) ------------------------------------ *
 * The live site loaded Open Sans from Google with subset=latin,latin-ext.
 * These are those two subsets of the v44 variable face, covering the
 * 300-800 weights the live site requested. No external font host is
 * contacted. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/open-sans-latin-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/open-sans-latinext-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/open-sans-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/open-sans-latinext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --amber: #ffbe3f;
  --amber-light: #ffd177;
  --cream: #ffebc6;
  --blue: #3f67d3;
  --link: #081d91;
  --body: #0f0f0f;
  --charcoal: #3b3b3b;
  --ink: #000;
  --ink-soft: rgba(0, 0, 0, 0.86);
  --heading: #3c3c3c;
  --gray-100: #e4e4e4;
  --rule: #d9d9d9;
  --stone: #c9c6bf;
  --stone-deep: #c9c4b9;
  --slate: #b1c3d3;
  --fees-blue: #bbd3e8;
  --fees-yellow: #ffde9e;
  --forensic-gold: #e0ab38;
  --white: #fff;

  --font: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --measure: 1080px;
  --measure-wide: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --header-height: 139px;
}

/* --- base ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  line-height: 2;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink-soft);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.6em;
}

h1 {
  color: var(--ink);
  font-size: 40px;
}
h2 {
  color: var(--ink);
  font-size: 28px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 17px;
}

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

li {
  margin: 0 0 0.25em;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

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

blockquote {
  margin: 0 0 1.5em;
}

table {
  border-collapse: collapse;
}

/* The header is sticky, so anything an in-page link jumps to needs room
   above it or the heading lands underneath the bar. */
[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  background: var(--white);
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 0.5rem 0.9rem;
}

/* --- containers ------------------------------------------------------ */

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

/* --- header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.utility-bar {
  background: var(--amber);
  color: var(--ink);
}

.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 10px var(--gutter);
}

.utility-bar p {
  margin: 0;
}

.utility-bar__contact {
  line-height: 1.35;
  text-align: right;
}

.utility-bar__contact a {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.utility-bar__contact span {
  padding: 0 0.35em;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 20px var(--gutter);
}

.masthead__brand {
  margin: 0;
  flex: 0 0 auto;
  line-height: 0;
}

.masthead__brand img {
  display: block;
  width: 126px;
  height: 39px;
}

/* --- primary navigation ---------------------------------------------- */

.site-nav {
  flex: 1 1 auto;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a,
.site-nav__label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
}

.site-nav__label {
  cursor: default;
}

/* The hamburger. Hidden until the inline script un-hides it, so a browser
   with scripting off keeps the full menu rather than a dead button. */
.nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle[hidden] {
  display: none;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

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

  .utility-bar__contact a:first-child::before {
    content: "\260e";
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    transform: rotate(-18deg);
  }

  .utility-bar__contact a:last-child::before {
    content: "\2709";
    display: inline-block;
    margin-right: 6px;
    font-size: 14px;
  }

  .site-nav > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    max-width: var(--measure-wide);
    margin-left: auto;
  }

  .site-nav > ul::after {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-left: 14px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    box-shadow: 7px 7px 0 -6px var(--ink);
  }

  .site-nav > ul > li {
    position: relative;
    margin: 0;
    padding: 0 15px;
  }

  .site-nav > ul > li:last-child {
    padding-right: 0;
  }

  /* Parent items get a caret, the way the live menu marks a dropdown. */
  .site-nav li.has-sub > a::after,
  .site-nav li.has-sub > .site-nav__label::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  .site-nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    width: 240px;
    padding: 20px 0;
    background: var(--white);
    border-top: 3px solid #2ea3f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease;
  }

  /* Third level opens to the side of its parent. */
  .site-nav ul ul ul {
    top: -20px;
    left: 100%;
  }

  /* The last three top-level items sit near the viewport's right edge. Their
     dropdowns open right-aligned, and their side flyouts open leftward, so the
     hidden-but-laid-out submenus never widen the page (they were forcing a
     permanent horizontal scrollbar sitewide). */
  .site-nav > ul > li:nth-last-child(-n+3) > ul {
    left: auto;
    right: 0;
  }
  .site-nav > ul > li:nth-last-child(-n+3) ul ul {
    left: auto;
    right: 100%;
  }

  .site-nav li:hover > ul,
  .site-nav li:focus-within > ul {
    opacity: 1;
    visibility: visible;
  }

  .site-nav ul ul li {
    margin: 0;
  }

  .site-nav ul ul a,
  .site-nav ul ul .site-nav__label {
    display: block;
    padding: 6px 20px;
  }

  .site-nav ul ul .site-nav__label {
    color: var(--charcoal);
  }
}

@media (max-width: 980px) {
  .masthead {
    flex-wrap: wrap;
  }

  /* Only a browser that ran the toggle script collapses the menu. */
  .has-js .site-nav {
    display: none;
    flex-basis: 100%;
  }

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

  .site-nav {
    flex-basis: 100%;
    border-top: 1px solid var(--amber);
    margin-top: 0.75rem;
    padding-top: 0.5rem;
  }

  .site-nav li {
    margin: 0;
    border-bottom: 1px solid var(--gray-100);
  }

  .site-nav a,
  .site-nav__label {
    display: block;
    padding: 0.7rem 0.25rem;
    font-size: 15px;
  }

  .site-nav ul ul {
    padding-left: 1rem;
  }

  .site-nav ul ul li:last-child {
    border-bottom: 0;
  }
}

/* --- buttons --------------------------------------------------------- */

.button {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  padding: 0.3em 1em;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease, color 300ms ease;
}

.button:hover,
.button:focus-visible {
  text-decoration: none;
}

.button--dark {
  background: var(--charcoal);
  color: var(--white);
}

.button--dark:hover,
.button--dark:focus-visible {
  background: var(--gray-100);
  color: var(--ink);
}

/* --- main ------------------------------------------------------------ */

main {
  display: block;
  /* Bare URLs in carried body copy (the COVID article's dead-link note) have
     no break opportunities and overflow narrow viewports without this. */
  overflow-wrap: break-word;
}

.page-section {
  margin-block: 0 2.5rem;
}

.page-section > :last-child {
  margin-bottom: 0;
}

/* Everything in main sits in the reading column by default, so a block that
   is not a .page-section (the jump nav on /fees-policies/, for one) cannot
   escape it by accident. :where() keeps this default at element specificity,
   allowing later page-level composition rules to govern without escalation.
   Heroes and semantic band wrappers opt out entirely. */
main > :where(*:not(.hero):not(.band)) {
  width: min(100% - (var(--gutter) * 2), var(--measure));
  margin-inline: auto;
}

main > .page-section:first-of-type:not(.hero) {
  margin-top: 2.5rem;
}


/* --- hero: shared ---------------------------------------------------- */

.hero {
  position: relative;
  margin: 0 0 3rem;
  padding: 0;
  overflow: hidden;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 0.35em;
}

.hero__tagline {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 0.6em;
}

.hero h6 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 0.6em;
}

/* The phone panel the live heroes float over the top-right corner. */
.hero__phone {
  margin: 0;
  font-size: 20px;
}

.hero__phone a {
  color: var(--heading);
}

/* --- hero: split (amber panel left, photograph right) ---------------- *
 * The live pattern: a full-width row carrying the Austin skyline, with a
 * solid panel painted over the left half and the heading inside it. */

.hero--split {
  background: var(--photo, none) center / cover no-repeat;
  background-color: var(--stone-deep);
}

.hero--split::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--panel, var(--amber-light));
}

.hero--split > .hero__copy {
  width: 50%;
  padding: 10vh 7vw;
}

.hero--split .hero__phone {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.1rem 2.2rem;
}

/* Nothing but the phone panel is in the right half, so the section still
   needs the panel's own height when the copy is short. */
.hero--split {
  min-height: 323px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Addiction Psychiatry puts an illustration in the right half instead of a
   photograph, and the live column draws it contained rather than cropped.
   Containing it against the whole hero would leave the illustration hugging
   one edge, so the right half gets its own layer to sit centred inside. */
.hero--contain {
  background-image: none;
  background-color: var(--white);
}

.hero--contain::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: var(--photo) center / contain no-repeat;
}

/* --- hero: stone (forensic psychiatry) ------------------------------- */

.hero--stone {
  --panel: var(--stone);
  text-align: center;
}

.hero--stone::before {
  background: var(--stone);
}

.hero--stone > .hero__copy {
  padding-inline: 7vw;
}

.hero--stone p:first-child {
  color: var(--white);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  text-transform: uppercase;
}

.hero--stone h1 {
  color: var(--heading);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  margin-bottom: 0.6em;
}

.hero--stone h2,
.hero--stone h5 {
  color: var(--heading);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  margin: 0.5em 0;
}

/* The rule has to inset with the copy. Padding would not do it: the border
   is drawn on the border box, so a padded <hr> still draws edge to edge. */
.hero--stone hr {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  width: calc(50% - 14vw);
  margin: 0 7vw;
  padding: 0;
}

@media (max-width: 980px) {
  .hero--stone hr {
    width: auto;
    margin-inline: var(--gutter);
  }
}

.hero--stone .hero__copy > p:last-of-type a {
  display: inline-block;
  margin-top: 1.5rem;
  background: var(--charcoal);
  border: 2px solid var(--ink);
  border-radius: 4px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  padding: 0.3em 1em;
}

.hero--stone .hero__copy > p:last-of-type a:hover,
.hero--stone .hero__copy > p:last-of-type a:focus-visible {
  background: var(--gray-100);
  color: var(--ink);
  text-decoration: none;
}

/* --- hero: photograph (homepage) ------------------------------------- */

.hero--photo {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.92) 100%),
    image-set(
      url(/assets/img/austin-skyline-hero-1440.avif) type("image/avif"),
      url(/assets/img/austin-skyline-hero-1440.webp) type("image/webp"),
      url(/assets/img/austin-skyline-hero.jpg) type("image/jpeg")
    ) center / cover no-repeat;
  min-height: 560px;
}

@media (max-width: 800px) {
  .hero--photo {
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.92) 100%),
      image-set(
        url(/assets/img/austin-skyline-hero-800.avif) type("image/avif"),
        url(/assets/img/austin-skyline-hero-800.webp) type("image/webp"),
        url(/assets/img/austin-skyline-hero.jpg) type("image/jpeg")
      );
  }
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 0 6vh 7vw;
}

.hero--photo::before {
  content: none;
}

.hero--photo > .hero__copy {
  width: min(46%, 640px);
  background: rgba(255, 255, 255, 0.77);
  margin: 0;
  padding: 15px;
}

.hero--photo h1 {
  color: var(--heading);
  font-size: clamp(34px, 4vw, 55px);
  line-height: 1.05;
}

.hero--photo .hero__tagline {
  color: var(--heading);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 500;
}

/* The live homepage floats the number in its own panel against the bottom
   right of the photograph, away from the heading block. */
.hero--photo .hero__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(48%, 520px);
  background: rgba(255, 255, 255, 0.72);
  color: var(--heading);
  padding: 1.2rem;
  text-align: center;
}

/* --- hero: card on a field (contact) --------------------------------- */

.hero--card {
  background: var(--slate);
  padding: 7vh var(--gutter);
  display: block;
}

.hero--card::before {
  content: none;
}

.hero--card > * {
  width: min(100%, 985px);
  margin-inline: auto;
}

.hero--card .hero__body {
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 3.2rem) clamp(1.25rem, 3vw, 2.8rem);
}

/* The short rule the live contact heading sits above. */
.hero--card h1 {
  margin-bottom: 0.35em;
}

.hero--card h1::after {
  content: "";
  display: block;
  width: 81px;
  border-top: 2px solid var(--ink);
  margin-top: 0.5em;
}

/* --- banded sections -------------------------------------------------- */

.band {
  padding: clamp(2.5rem, 6vh, 5rem) var(--gutter);
  margin: 0 0 3rem;
}

.band > * {
  width: min(100%, var(--measure));
  margin-inline: auto;
}

.band--gray {
  background: var(--gray-100);
}

/* --- content components ---------------------------------------------- */

.card {
  background: var(--white);
  border: 6px solid var(--blue);
  padding: 1.3rem 1.9rem;
  margin: 0 0 1.75rem;
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card--amber {
  border-color: var(--amber);
}

.card--amber h4,
.card--amber h5 {
  font-family: var(--font-serif);
  text-align: center;
}

.card--amber h4 {
  font-size: 28px;
}

.card--amber h5 {
  font-size: 20px;
  line-height: 1.4;
}

.banner {
  background: var(--blue);
  color: var(--white);
  padding: 1.3rem 1.9rem;
  margin: 0 0 1.75rem;
}

.banner p {
  margin: 0;
}

.banner a {
  color: var(--white);
  text-decoration: underline;
}

.inline-inset {
  background: var(--cream);
  border-left: 6px solid var(--amber);
  margin: 0 0 1.5rem;
  padding: 1rem 1.4rem;
}

.inline-inset > :last-child {
  margin-bottom: 0;
}

.inline-inset.small {
  font-size: 15px;
  line-height: 1.75;
}

.inset-heading {
  display: block;
  font-weight: 700;
  color: var(--ink-soft);
}

.jump-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0 0 2rem;
  padding: 0.9rem 0;
  border-top: 3px solid var(--amber);
  border-bottom: 3px solid var(--amber);
}

.jump-nav li {
  margin: 0;
}

.cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cta-list li {
  margin: 0 0 0.9rem;
}

.cta-list a {
  color: var(--ink);
}

.testimonial {
  background: var(--white);
  border-left: 6px solid var(--amber);
  margin: 0 0 1.5rem;
  padding: 1rem 1.4rem;
}

.testimonial p {
  font-style: italic;
}

.testimonial > :last-child {
  margin-bottom: 0;
}

.testimonial cite {
  display: block;
  color: var(--charcoal);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  margin-top: 0.5rem;
}

.payment-methods {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  text-align: center;
}

.payment-methods li {
  margin: 0;
}

.payment-methods h4 {
  font-size: 17px;
  margin: 0.5rem 0 0;
}

.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resource-list li {
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.75rem;
  padding: 0 0 1.5rem;
}

.resource-list li:last-child {
  border-bottom: 0;
}

.resource-list h4 {
  margin: 0.6rem 0 0.3rem;
}

/* Three-up feature grid: the homepage's image-led cards. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature-grid > .page-section {
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin: 0;
  padding: 0 1.4rem 1.6rem;
}

.feature-grid > .page-section > img {
  width: calc(100% + 2.8rem);
  max-width: none;
  margin: 0 -1.4rem 1.2rem;
}

.feature-grid h4 {
  font-size: 22px;
  font-weight: 500;
  text-align: center;
}

/* Homepage two-column body: main column plus the amber sidebar. */
.home-split {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 981px) {
  .home-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.home-split__aside {
  background: var(--amber-light);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.home-split__aside .page-section:last-child {
  margin-bottom: 0;
}

.home-split__aside h4 {
  font-size: 28px;
  text-align: center;
}

.home-split__aside .cta-list a {
  display: block;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 4px;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: center;
}

.home-split__aside .cta-list a:hover,
.home-split__aside .cta-list a:focus-visible {
  background: var(--gray-100);
  text-decoration: none;
}

/* --- content images --------------------------------------------------- *
 * Divi sat most of these in a half-width column, so an 879 or 1000 pixel
 * original never rendered at its own size. In a single reading column it
 * would, and a 1000px portrait would swamp the page, so content images cap
 * at roughly the width the live layout gave them and centre like the live
 * image modules did. Full-width banners opt out with .banner-img, and the
 * component treatments below keep their own sizing. */
main .page-section img {
  display: block;
  max-width: min(100%, 520px);
  margin: 1.5rem auto;
}

main .page-section img.banner-img {
  max-width: 100%;
}

/* Icons that sit on the same line as the text they decorate. */
main .page-section img.site-footer__icon {
  display: inline;
  margin: 0 0.5rem 0 0;
}

main .page-section .resource-list img {
  margin: 0 0 0.5rem;
}

main .page-section .payment-methods img {
  margin: 0 auto;
}

/* Address block beside its map, the way the live page sets them. */
.location {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 981px) {
  .location {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.location > :last-child {
  justify-self: end;
}

.location img {
  margin: 0 0 0 auto;
}

/* --- forms ------------------------------------------------------------ */

.form-panel {
  background: var(--amber-light);
  border-radius: 10px;
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1.25rem, 3vw, 2.8rem);
}

.form-panel > :first-child {
  margin-top: 0;
}

.contact-form p {
  margin: 0 0 1rem;
}

.contact-form label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--blue);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 0.85rem 1rem;
}

.contact-form select {
  /* A select with the site's own field fill rather than the platform's. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form button[type="submit"] {
  background: var(--amber);
  border: 2px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 500;
  padding: 0.35em 1.1em;
}

.contact-form button[type="submit"]:hover,
.contact-form button[type="submit"]:focus-visible {
  background: var(--amber-light);
}

.contact-form button[type="submit"][disabled] {
  cursor: default;
  opacity: 0.65;
}

.form-hint {
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

/* WP-7 form mechanics. The honeypot is off-screen rather than display:none
   so a bot that skips hidden inputs still fills it. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status:empty {
  display: none;
}

.form-status {
  background: var(--white);
  border-left: 6px solid var(--blue);
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
}

.form-status--error {
  border-left-color: #b3261e;
}

.form-status--ok {
  border-left-color: var(--blue);
}

.form-pending {
  background: var(--cream);
  border: 2px dashed var(--amber);
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.4rem;
}

.form-pending > :last-child {
  margin-bottom: 0;
}

/* Two paths on one page: patients and attorneys are separated visually as
   well as in the copy, so nobody has to read carefully to tell them apart. */
.route {
  background: var(--white);
  border-top: 6px solid var(--amber);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin: 0 0 2rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.route--legal {
  border-top-color: var(--blue);
}

.route > :first-child {
  margin-top: 0;
}

.route > :last-child {
  margin-bottom: 0;
}

.contact-callout {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

/* --- footer ---------------------------------------------------------- */

.site-footer {
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  padding: clamp(2.5rem, 7vh, 4.5rem) 0;
}

.site-footer__inner {
  width: min(100% - (var(--gutter) * 2), var(--measure-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
  align-items: start;
}

.site-footer__brand {
  margin: 0 0 0.75rem;
  line-height: 0;
}

.site-footer__brand img {
  display: block;
  width: 126px;
  height: 39px;
}

.site-footer__legal {
  color: var(--charcoal);
  font-size: 14px;
  margin: 0;
}

.site-footer h3 {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin: 0 0 0.9rem;
}

.site-footer li:last-child {
  margin-bottom: 0;
}

.site-footer__cols a {
  color: var(--charcoal);
  font-size: 14px;
}

.site-footer__reach {
  font-size: 17px;
}

.site-footer__reach a {
  color: var(--link);
  font-size: 17px;
}

.site-footer__icon {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 0.5rem;
}

/* The footer's first cell holds the wordmark and the copyright line; the
   three link groups follow. Source order is unchanged from the live site
   (copyright above the columns), the grid just seats them side by side. */
.site-footer__cols {
  display: contents;
}

/* The 404 page is not built by build.mjs, so it carries its own small block
   rather than the shell. */
.not-found {
  padding: clamp(2.5rem, 8vh, 5rem) 0;
}

.not-found__brand {
  line-height: 0;
  margin: 0 0 2rem;
}

.not-found__meta {
  border-top: 1px solid var(--gray-100);
  color: var(--charcoal);
  font-size: 15px;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}

/* --- desktop visual-fidelity restorations ----------------------------- *
 * The archived Divi pages used page-specific rows, module widths and large
 * viewport-relative spacing. These rules preserve those compositions without
 * bringing the builder shell back into the site. */

@media (min-width: 981px) {
  .hero {
    margin-bottom: 0;
  }

  .hero--split {
    display: block;
  }

  .hero--split > .hero__copy {
    display: flex;
    width: 50%;
    min-height: inherit;
    flex-direction: column;
    justify-content: center;
    padding: 7vw;
  }

  .hero--split > .hero__copy:first-child,
  .hero--split > .hero__copy:last-child,
  .hero--split > .hero__copy:only-child {
    padding-block: 7vw;
  }

  /* Home */
  .page-home > .hero--photo {
    min-height: 1064px;
    padding: 0 0 0 7.5vw;
  }

  .page-home .hero--photo > .hero__copy {
    width: 46%;
    max-width: none;
    background: rgba(255, 255, 255, 0.77);
    padding: 12px 15px;
    transform: translateY(33px);
  }

  .page-home .hero--photo h1 {
    font-size: 64px;
    font-weight: 700;
  }

  .page-home .hero--photo .hero__tagline {
    font-size: 28px;
    line-height: 1.45;
  }

  .page-home .hero--photo > .hero__copy > * {
    background: none;
    margin-inline: 0;
    padding-inline: 0;
    width: auto;
  }

  .page-home .hero--photo > .hero__copy > :first-child {
    padding-top: 0;
  }

  .page-home .hero--photo > .hero__copy > :last-child {
    padding-bottom: 0;
  }

  .page-home .hero--photo .hero__phone {
    width: 40%;
    max-width: none;
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 1.2rem;
  }

  .page-home > .home-split {
    width: 92.5%;
    max-width: none;
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
    gap: 7.5vw;
    margin: 0 0 0 7.5%;
  }

  .page-home .home-split__main {
    padding-top: 120px;
  }

  .page-home .home-split__aside {
    min-height: 1200px;
    padding: 130px 5.5vw 90px;
  }

  .page-home .home-split .page-section {
    margin-bottom: 40px;
  }

  .page-home .card {
    font-size: 19px;
    line-height: 1.55;
    padding: 52px 42px 44px;
    text-align: center;
  }

  .page-home .card h6 {
    font-size: 21px;
    font-weight: 600;
  }

  .page-home .card h4 {
    font-size: 28px;
  }

  .page-home .card h5 {
    font-size: 19px;
    line-height: 1.5;
  }

  .page-home .banner {
    font-size: 19px;
    padding: 30px 36px;
  }

  .page-home .card--amber {
    position: relative;
    margin-top: 64px;
  }

  .page-home .card--amber::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -30px;
    border-top: 7px solid #ff7f00;
  }

  .page-home .card--amber a {
    color: var(--ink);
  }

  .page-home .home-split__aside h4 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .page-home .home-split__aside {
    font-weight: 400;
  }

  .page-home .home-split__aside > .page-section:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.65);
    padding-bottom: 38px;
    text-align: center;
  }

  .page-home .home-split__aside .cta-list {
    border-top: 1px solid rgba(0, 0, 0, 0.65);
    padding-top: 20px;
  }

  .page-home .cta-list__service {
    display: grid;
    grid-template-columns: 134px 1fr;
    align-items: start;
    gap: 14px;
  }

  .page-home .cta-list__service a {
    display: inline;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--link);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
    padding: 3px 0 0;
    text-align: left;
  }

  .page-home .service-icons {
    display: flex;
    gap: 12px;
  }

  .page-home .service-icons span {
    position: relative;
    width: 32px;
    height: 32px;
    border: 2px solid var(--charcoal);
    border-radius: 50%;
  }

  .page-home .service-icons span::before,
  .page-home .service-icons span::after {
    content: "";
    position: absolute;
    inset: 9px 7px;
    border: 2px solid var(--charcoal);
    border-radius: 2px;
  }

  .page-home .service-icons span:first-child::after {
    inset: 11px 3px 11px auto;
    width: 5px;
    border-left: 0;
  }

  .page-home .service-icons span:nth-child(2)::before {
    inset: 7px;
    border-width: 0 0 3px 3px;
    border-radius: 0 0 0 10px;
    transform: rotate(-35deg);
  }

  .page-home .service-icons span:nth-child(2)::after {
    content: none;
  }

  .page-home .service-icons span:nth-child(3)::before {
    inset: 5px 9px;
    border-width: 0 2px;
    border-radius: 0;
  }

  .page-home .service-icons span:nth-child(3)::after {
    inset: auto 5px 6px;
    border-width: 2px 0 0;
    border-radius: 0;
  }

  .page-home .cta-list__button {
    text-align: center;
  }

  .page-home .home-split__aside .cta-list__button a {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--ink);
    color: var(--ink);
    min-width: 340px;
    max-width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    padding: 10px 14px;
    text-align: center;
  }

  .icon-gavel,
  .icon-scales,
  .icon-chat {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 20px;
    margin-right: 6px;
    vertical-align: -4px;
  }

  .icon-gavel::before,
  .icon-gavel::after {
    content: "";
    position: absolute;
    background: var(--ink);
    border-radius: 1px;
    transform: rotate(-40deg);
  }

  .icon-gavel::before {
    top: 2px;
    left: 1px;
    width: 16px;
    height: 8px;
    box-shadow: -3px 0 0 -1px var(--ink), 3px 0 0 -1px var(--ink);
  }

  .icon-gavel::after {
    top: 5px;
    left: 15px;
    width: 3px;
    height: 19px;
    transform-origin: top center;
  }

  .icon-scales::before {
    content: "\2696";
    position: absolute;
    inset: -6px 0 0;
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 25px;
    font-style: normal;
    line-height: 1;
  }

  .icon-chat::before,
  .icon-chat::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--ink);
  }

  .icon-chat::before {
    width: 15px;
    height: 12px;
    left: 0;
    top: 2px;
  }

  .icon-chat::after {
    width: 12px;
    height: 10px;
    right: 0;
    bottom: 0;
  }

  /* About */
  main.page-about > .hero--split {
    height: 597px;
    min-height: 597px;
  }

  main.page-about > .about-intro,
  main.page-about > .about-body {
    width: min(100% - (var(--gutter) * 2), 1200px);
  }

  main.page-about > .about-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    margin: 0 auto;
    padding: 214px 0 238px;
  }

  .page-about .about-intro__copy {
    width: 80%;
    margin-left: auto;
  }

  .page-about .about-intro__portrait {
    display: flex;
    justify-content: center;
  }

  .page-about .about-intro__portrait img {
    width: 75%;
    max-width: none;
    margin: 0;
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.3);
  }

  .page-about .about-intro h2 {
    color: var(--charcoal);
    font-size: 28px;
    font-weight: 600;
  }

  main.page-about > .about-body {
    margin-top: 0;
  }

  .page-about .about-body h3 {
    font-size: 24px;
    font-weight: 600;
  }

  /* Anxiety */
  .page-anxiety {
    background-color: var(--white);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
      url(/assets/img/wave-background.jpg);
    background-position: 0 0, center 702px;
    background-repeat: repeat, repeat-y;
    background-size: auto, 3840px 2400px;
  }

  .page-anxiety > .hero--split {
    min-height: 702px;
  }

  .page-anxiety > .hero--split::before {
    inset: 0 53% 0 0;
  }

  .page-anxiety .hero--split > .hero__copy {
    width: 47%;
    padding-left: 6.9vw;
    padding-right: 4.8vw;
    transform: translateY(20px);
  }

  .page-anxiety .hero__copy h1 {
    font-size: 38px;
    font-weight: 600;
  }

  .page-anxiety .hero__copy .hero__tagline {
    font-size: 18px;
    font-weight: 400;
    line-height: 2;
  }

  .page-anxiety .hero__copy h6 {
    font-weight: 400;
  }

  .page-anxiety > .anxiety-opening,
  .page-anxiety > .page-section:not(.hero) {
    width: min(100% - (var(--gutter) * 2), 1200px);
  }

  .page-anxiety > .anxiety-opening {
    margin: 0 auto 100px;
    padding-top: 220px;
  }

  .page-anxiety .anxiety-lead {
    margin-bottom: 250px;
  }

  .page-anxiety .anxiety-lead h3 {
    color: var(--charcoal);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 28px;
  }

  .page-anxiety .anxiety-definition {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 25px 60px;
    align-items: start;
  }

  .page-anxiety .anxiety-definition .inline-inset {
    position: relative;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--ink);
    margin: 0;
    padding: 20px 42px 20px 0;
    font-size: 19px;
    line-height: 1.75;
  }

  .page-anxiety .anxiety-definition .inline-inset::before,
  .page-anxiety .anxiety-definition .inline-inset::after {
    content: "";
    position: absolute;
    right: 0;
    width: 30px;
    border-top: 1px solid var(--ink);
  }

  .page-anxiety .anxiety-definition .inline-inset::before {
    top: 0;
  }

  .page-anxiety .anxiety-definition .inline-inset::after {
    bottom: 0;
  }

  .page-anxiety .anxiety-definition__copy h2,
  .page-anxiety .anxiety-treatment h2 {
    color: var(--charcoal);
    font-size: 28px;
    font-weight: 600;
  }

  .page-anxiety .anxiety-definition__list {
    grid-column: 1 / -1;
    margin-top: 10px;
  }

  .page-anxiety .anxiety-treatment {
    margin-top: 62px;
  }

  .page-anxiety > .page-section:not(.hero):not(.anxiety-opening) {
    padding-block: 80px;
  }

  /* Forensic */
  .page-forensic > .hero--stone {
    min-height: 1440px;
    background-image: none;
  }

  .page-forensic > .hero--stone::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 0 50%;
    background: var(--photo) center / cover no-repeat;
  }

  .page-forensic .hero--stone > .hero__copy {
    padding-inline: 7vw;
    transform: translateY(-20px);
  }

  .page-forensic .hero--stone .hero__copy > p:first-child {
    color: var(--white);
    font-size: 44px;
    font-weight: 300;
    line-height: 45px;
    margin: 0;
  }

  .page-forensic .hero--stone h1 {
    font-size: 49px;
    font-weight: 300;
    line-height: 1.05;
  }

  .page-forensic .hero--stone h2,
  .page-forensic .hero--stone h5 {
    font-size: 27px;
    font-weight: 300;
  }

  .page-forensic .hero--stone hr {
    width: 100%;
    margin: 18px 0;
  }

  .page-forensic .hero--stone .hero__copy > p:last-child a {
    display: inline-block;
    margin-top: 34px;
    background: var(--charcoal);
    border: 2px solid var(--ink);
    border-radius: 4px;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    padding: 0.3em 1em;
  }

  .page-forensic > .forensic-identity {
    width: 100%;
    height: 88px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 var(--gutter);
    background: var(--forensic-gold);
    text-align: center;
  }

  .page-forensic .forensic-identity p {
    margin: 0;
  }

  .page-forensic > .forensic-specialties {
    width: min(100% - (var(--gutter) * 2), 960px);
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 180px;
    align-items: start;
    margin: 0 auto 120px;
    padding-top: 238px;
  }

  .page-forensic .forensic-specialties__figure,
  .page-forensic .forensic-specialties__list {
    text-align: center;
  }

  .page-forensic .forensic-specialties__figure img {
    width: 300px;
    max-width: none;
    margin: 0 auto 58px;
    border-radius: 20px;
    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.28);
  }

  .page-forensic .forensic-specialties__figure p {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-forensic .forensic-specialties__figure p::after {
    content: "";
    display: block;
    width: 100px;
    margin: 16px auto 0;
    border-top: 6px solid var(--forensic-gold);
  }

  .page-forensic .forensic-specialties__list {
    font-weight: 400;
    line-height: 1.4;
  }

  .page-forensic .forensic-specialties__list h4 {
    font-size: 21px;
    font-weight: 500;
    margin: 28px 0 0;
  }

  .page-forensic .forensic-specialties__list h6 {
    font-size: 17px;
    font-weight: 300;
    margin: 0;
  }

  /* Fees and policies */
  .page-fees > .hero--split {
    min-height: 878px;
  }

  .page-fees .hero__copy h1 {
    font-size: 36px;
    font-weight: 600;
  }

  .page-fees .hero__copy .hero__tagline {
    font-size: 20px;
    font-weight: 600;
    max-width: 620px;
  }

  .page-fees .hero__copy h5 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 110px;
  }

  .page-fees > .jump-nav {
    width: 100%;
    max-width: none;
    margin: 0;
    border-top: 72px solid var(--fees-blue);
    background: var(--white);
    padding: 32px 0;
  }

  .page-fees .jump-nav ul {
    width: max-content;
    max-width: calc(100% - (var(--gutter) * 2));
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: center;
    margin: 0 auto;
    border: 0;
    padding: 0;
  }

  .page-fees .jump-nav a,
  .page-fees .fees-action {
    display: inline-block;
    border: 1px solid var(--ink);
    border-radius: 4px;
    color: var(--ink);
    padding: 10px 13px;
    white-space: nowrap;
  }

  .page-fees > .fees-band {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 36px var(--gutter) 72px;
  }

  .page-fees > .fees-band--blue {
    background: var(--fees-blue);
    padding-bottom: 184px;
  }

  .page-fees > .fees-band--yellow {
    background: var(--fees-yellow);
    padding-top: 74px;
  }

  .page-fees .fees-row {
    width: min(100%, 1015px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px;
    margin: 0 auto;
  }

  .page-fees .fees-row + .fees-row {
    margin-top: 42px;
  }

  .page-fees .fees-row--single {
    grid-template-columns: 1fr;
  }

  .page-fees .fees-row__column {
    min-width: 0;
  }

  .page-fees .fees-row__column > :last-child {
    margin-bottom: 0;
  }

  .page-fees .fees-row img {
    width: 100%;
    max-width: none;
    margin: 22px 0;
  }

  .page-fees .fees-private__image > p:first-child,
  .page-fees .fees-rx__image > p:first-child {
    background: var(--white);
    color: var(--ink);
    font-size: 26px;
    line-height: 1.2;
    padding: 3px 8px;
  }

  .page-fees .fees-private__image > p:first-child strong,
  .page-fees .fees-rx__image > p:first-child strong {
    font-weight: 400;
  }

  .page-fees #payment-methods {
    padding-block: 72px;
  }

  .page-fees #payment-methods .payment-methods {
    width: min(100%, 1015px);
    justify-content: space-between;
    margin: 0 auto;
  }

  /* Contact */
  .page-contact > .hero--card {
    padding: 13vh var(--gutter);
  }

  .page-contact .hero--card > .hero__body {
    width: min(66.67vw, 1270px);
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 34px;
    padding: 64px 36px;
  }

  .page-contact .hero--card h1 {
    grid-column: 1 / -1;
    margin-bottom: 36px;
  }

  .page-contact .route {
    margin: 0;
    padding: 32px;
  }

  .page-contact .route--patient {
    background: var(--cream);
  }

  .page-contact .contact-details,
  .page-contact .contact-more {
    grid-column: 1 / -1;
    width: 100%;
    margin-block: 0;
  }

  .page-contact .contact-details {
    padding-top: 18px;
  }

  .page-contact .route--legal .contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  .page-contact .route--legal .contact-form > input[type="hidden"],
  .page-contact .route--legal .contact-form > .form-status,
  .page-contact .route--legal .contact-form > .form-honeypot,
  .page-contact .route--legal .contact-form > .cf-turnstile,
  .page-contact .route--legal .contact-form > .contact-form__message-note,
  .page-contact .route--legal .contact-form > .contact-form__message,
  .page-contact .route--legal .contact-form > .contact-form__submit {
    grid-column: 1 / -1;
  }

  .page-contact .contact-form__message-note {
    border-left: 4px solid var(--amber);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 8px;
    padding-left: 10px;
  }

  .page-contact .contact-form__submit {
    text-align: right;
  }
}

/* --- page-specific --------------------------------------------------- */

/* /forensic-psychiatry-cv/ is a long list of credentials; its h2s are
   section headers rather than page-level headings. */
.page-cv h2 {
  border-bottom: 2px solid var(--amber);
  font-size: 22px;
  margin-top: 2rem;
  padding-bottom: 0.3rem;
}

/* /mental-health-resources/ is 19 link-out entries, each with a logo. */
.page-resources .resource-list img {
  max-width: 120px;
}

@media (max-width: 980px) {
  .hero--split {
    min-height: 0;
  }

  .hero--split::before {
    inset: 0;
    background: var(--panel, var(--amber-light));
    opacity: 0.92;
  }

  .hero--split > .hero__copy {
    width: 100%;
    min-height: 0;
    padding: 3rem var(--gutter);
  }

  .hero--split .hero__phone {
    position: static;
    background: none;
    padding: 0 var(--gutter) 2rem;
  }

  /* The live mobile homepage hero carries no phone block at all, and in flow
     the line lands on the photo with no readable contrast. */
  .hero--photo .hero__phone {
    display: none;
  }

  .hero--contain::after {
    content: none;
  }

  .hero--photo {
    padding: 3rem var(--gutter);
    min-height: 0;
  }

  .hero--photo > .hero__copy {
    width: 100%;
  }

  .feature-grid > .page-section {
    padding-bottom: 1.2rem;
  }
}

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .skip-link {
    display: none;
  }

  body {
    color: #000;
    font-size: 12pt;
  }

  .hero {
    background: none;
    color: #000;
  }

  .hero::before {
    content: none;
  }
}

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