:root {
      --navy:        #002846;
      --navy-deep:   #001530;
      --emerald:     #1F8275;
      --teal:        #006E8C;
      --teal-dark:   #005673;
      --mint:        #DCE6E6;
      --mint-light:  #EEF3F3;
      --ink:         #3D3A3D;
      /* 0.75, not 0.65. At 0.65 this composites to rgb(129,127,129) on white,
         which is 3.97:1 and fails WCAG AA for small text. 33 rules use this
         token, including service page body copy, bios, FAQ answers and form
         labels, so almost every piece of secondary text on the site was below
         the line. 0.75 gives 5.26:1 on white and 4.94:1 on the mint panels,
         and is visually near identical. */
      /* One content width across the whole site. */
      --content-max: 1296px;
      --text-muted:  rgba(61,58,61,0.75);
    }

    html { scroll-behavior: smooth; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── Back-to-top button ──────────────────────────────── */
    #back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: auto;
      height: 40px;
      padding: 0 1rem 0 0.8rem;
      gap: 0.4rem;
      border-radius: 999px;
      background: var(--navy);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(12px) scale(0.88);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, box-shadow 0.3s ease;
      z-index: 490;
      box-shadow: 0 4px 18px rgba(0,40,70,0.22);
    }
    #back-to-top.btt-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    #back-to-top:hover {
      background: var(--teal);
      box-shadow: 0 0 0 6px rgba(0,110,140,0.14), 0 0 24px rgba(0,110,140,0.45), 0 4px 18px rgba(0,110,140,0.3);
      transform: translateY(-2px) scale(1.08);
    }
    #back-to-top:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }
    #back-to-top:active {
      transform: translateY(1px) scale(0.96);
    }
    #back-to-top span {
      font-family: 'Mulish', sans-serif;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: white;
    }

    /* ── Page transition overlay ─────────────────────────── */
    #page-transition-overlay {
      position: fixed;
      inset: 0;
      background: #ffffff;
      z-index: 800;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.16s ease-out;
    }
    #page-transition-overlay.pt-flash {
      opacity: 1;
      transition: opacity 0.1s ease-in;
    }

    /* ── Initial page fade-in ────────────────────────────── */
    body { opacity: 0; }
    body.loaded { opacity: 1; transition: opacity 0.45s ease; }

    /* ── Skip navigation (ADA) ───────────────────────────── */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      background: var(--navy);
      color: white;
      padding: 0.6rem 1.2rem;
      border-radius: 0 0 4px 4px;
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: none;
      z-index: 9999;
      transition: top 0.15s;
    }
    .skip-link:focus { top: 0; }

    /* ── Global focus ring (ADA) ─────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
      border-radius: 2px;
    }

    body {
      font-family: 'Mulish', sans-serif;
      font-size: 17px;
      line-height: 1.65;
      background: #ffffff;
      color: var(--ink);
      opacity: 0;
      transition: opacity 0.13s ease;
    }
    body.loaded { opacity: 1; }
    @keyframes pageEnter{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

    /* ── Reduced motion (ADA) ────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .serif { font-family: 'Cormorant Garamond', Georgia, serif; }

    /* ─── NAV ─────────────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 200;
      background: white;
      box-shadow: 0 1px 0 rgba(0,40,70,0.08);
    }
    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2.5rem;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
    .nav-logo img {
      height: 42px;
      width: auto;
      display: block;
    }
    .nav-links {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 2rem;
    }
    .nav-links > li > a {
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
      transition: color 0.2s ease;
      position: relative;
    }
    .nav-links > li > a::before {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 1.5px;
      background: var(--teal);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }
    .nav-links > li > a:hover { color: var(--teal); }
    .nav-links > li > a:hover::before,
    .nav-links > li > a.active::before { transform: scaleX(1); }

    /* ── Mobile hamburger ────────────────────────────────── */
    .nav-hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      justify-content: center;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 1.75px;
      background: var(--navy);
      border-radius: 2px;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
    }
    .nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
    .nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

    /* ── Mobile drawer ───────────────────────────────────── */
    .mobile-nav {
      position: fixed;
      inset: 64px 0 0 0;
      background: white;
      z-index: 190;
      display: flex;
      flex-direction: column;
      padding: 2rem 2.5rem;
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
      overflow-y: auto;
      border-top: 1px solid rgba(0,40,70,0.08);
    }
    .mobile-nav.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .mobile-nav a {
      font-family: 'Mulish', sans-serif;
      font-size: 1.05rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
      padding: 1rem 0;
      border-bottom: 1px solid rgba(0,40,70,0.07);
      display: block;
    }
    .mobile-nav a:hover { color: var(--teal); }
    .mobile-nav .mobile-nav-sub {
      padding-left: 1rem;
      font-size: 0.9375rem;
      color: rgba(0,40,70,0.6);
    }
    .mobile-nav .mobile-nav-cta {
      margin-top: 1.5rem;
      background: var(--teal);
      color: white;
      text-align: center;
      border-radius: 4px;
      padding: 0.9rem 2rem;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      border-bottom: none;
    }
    .mobile-nav .mobile-nav-cta:hover { background: var(--teal-dark); color: white; }

    @media (max-width: 860px) {
      .nav-links, .btn-schedule { display: none !important; }
      .nav-hamburger { display: flex; }
    }

    /* dropdown */
    .nav-dropdown { position: relative; }
    .nav-dropdown > a { display: inline-flex; align-items: center; gap: 3px; }
    .nav-dropdown > a::after {
      content: '▾';
      font-size: 0.8125rem;
      margin-top: 1px;
    }
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 190px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0,40,70,0.14), 0 2px 8px rgba(0,40,70,0.07);
      padding: 0.5rem 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease 0.5s, transform 0.18s ease 0.5s;
    }
    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .nav-dropdown.dropdown-closing .dropdown-menu {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }
    .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -14px;
      left: 0;
      right: 0;
      height: 14px;
    }
    .dropdown-menu a {
      display: block;
      padding: 0.6rem 1.3rem;
      font-size: 0.8125rem;
      font-weight: 400;
      color: var(--navy);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: background 0.15s ease;
    }
    .dropdown-menu a:hover { background: var(--mint); color: var(--navy); }

    .btn-schedule {
      display: inline-block;
      background: var(--teal);
      color: white;
      padding: 0.55rem 1.3rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s ease, transform 0.15s ease;
    }
    .btn-schedule:hover { background: var(--teal-dark); transform: translateY(-1px); }

    /* ─── HERO ────────────────────────────────────── */
    .hero {
      background: var(--navy);
      padding: 5.5rem 2.5rem 5rem;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 60% at 5% 60%,  rgba(0,110,140,0.09)  0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 15%, rgba(0,110,140,0.11)  0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 55% 85%, rgba(0,110,140,0.06)  0%, transparent 50%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='white' opacity='0.07'%3E%3Crect x='0' y='80' width='6' height='40'/%3E%3Crect x='9' y='60' width='6' height='60'/%3E%3Crect x='18' y='50' width='6' height='70'/%3E%3Crect x='27' y='30' width='6' height='90'/%3E%3Crect x='36' y='45' width='6' height='75'/%3E%3Crect x='45' y='20' width='6' height='100'/%3E%3Crect x='54' y='35' width='6' height='85'/%3E%3Crect x='63' y='55' width='6' height='65'/%3E%3Crect x='72' y='10' width='6' height='110'/%3E%3Crect x='81' y='40' width='6' height='80'/%3E%3Crect x='90' y='25' width='6' height='95'/%3E%3Crect x='99' y='50' width='6' height='70'/%3E%3Crect x='108' y='15' width='6' height='105'/%3E%3Crect x='117' y='35' width='6' height='85'/%3E%3Crect x='126' y='60' width='6' height='60'/%3E%3Crect x='135' y='5' width='6' height='115'/%3E%3Crect x='144' y='45' width='6' height='75'/%3E%3Crect x='153' y='30' width='6' height='90'/%3E%3Crect x='162' y='55' width='6' height='65'/%3E%3Crect x='171' y='20' width='6' height='100'/%3E%3Crect x='180' y='40' width='6' height='80'/%3E%3Crect x='189' y='10' width='6' height='110'/%3E%3Crect x='198' y='50' width='6' height='70'/%3E%3Crect x='207' y='25' width='6' height='95'/%3E%3Crect x='216' y='60' width='6' height='60'/%3E%3Crect x='225' y='35' width='6' height='85'/%3E%3Crect x='234' y='15' width='6' height='105'/%3E%3Crect x='243' y='45' width='6' height='75'/%3E%3Crect x='252' y='5' width='6' height='115'/%3E%3Crect x='261' y='30' width='6' height='90'/%3E%3Crect x='270' y='55' width='6' height='65'/%3E%3Crect x='279' y='20' width='6' height='100'/%3E%3Crect x='288' y='40' width='6' height='80'/%3E%3Crect x='297' y='65' width='6' height='55'/%3E%3Crect x='306' y='10' width='6' height='110'/%3E%3Crect x='315' y='50' width='6' height='70'/%3E%3Crect x='324' y='25' width='6' height='95'/%3E%3Crect x='333' y='35' width='6' height='85'/%3E%3Crect x='342' y='60' width='6' height='60'/%3E%3Crect x='351' y='15' width='6' height='105'/%3E%3Crect x='360' y='45' width='6' height='75'/%3E%3Crect x='369' y='30' width='6' height='90'/%3E%3Crect x='378' y='70' width='6' height='50'/%3E%3Crect x='387' y='40' width='6' height='80'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 400px 120px;
      background-repeat: repeat-x;
      background-position: bottom;
      pointer-events: none;
    }
    .hero-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
      position: relative;
    }
    .hero-eyebrow {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1.5rem;
    }
    .hero-heading {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(2.75rem, 5.5vw, 4.5rem);
      font-weight: 700;
      line-height: 1.04;
      color: white;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: -0.02em;
    }
    .hero-heading em { font-style: normal; color: var(--teal); }
    .hero-body {
      font-size: 1.25rem;
      line-height: 1.5;
      color: rgba(255,255,255,0.68);
      margin-bottom: 0.6rem;
    }
    .hero-body strong { color: rgba(255,255,255,0.9); font-weight: 600; }
    .hero-locations {
      font-size: 0.8125rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.38);
      margin-bottom: 2.25rem;
    }
    .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

    .btn-cta {
      display: inline-block;
      background: var(--teal);
      color: white;
      padding: 0.82rem 1.8rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.15s ease;
    }
    .btn-cta:hover { background: var(--teal-dark); transform: translateY(-1px); }

    .btn-ghost {
      display: inline-block;
      background: white;
      color: var(--navy);
      padding: 0.82rem 1.8rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.15s ease;
    }
    .btn-ghost:hover { background: #f0ebe2; transform: translateY(-1px); }

    .hero-right { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.5rem; }
    .hero-card {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 12px;
      padding: 1.5rem;
      backdrop-filter: blur(6px);
      cursor: default;
      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
    }
    .hero-card:hover {
      transform: translateY(-4px);
      background: rgba(255,255,255,0.11);
      border-color: rgba(0,110,140,0.35);
      box-shadow: 0 10px 28px rgba(0,110,140,0.18), 0 2px 8px rgba(0,0,0,0.25);
    }
    .hero-card:active { transform: translateY(-1px); }
    .stars { color: var(--teal); font-size: 0.9375rem; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
    .hero-card blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 500;
      font-style: italic;
      color: rgba(255,255,255,0.88);
      line-height: 1.5;
      margin-bottom: 0.7rem;
    }
    .hero-card cite { font-size: 0.8125rem; color: rgba(255,255,255,0.4); font-style: normal; letter-spacing: 0.04em; }

    /* ─── PRESS BAR ───────────────────────────────── */
    .press-bar {
      background: white;
      border-top: 1px solid rgba(0,40,70,0.07);
      padding: 2.5rem 2.5rem 2.75rem;
    }
    .press-bar-label {
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(0,40,70,0.32);
      text-align: center;
      margin-bottom: 0.6rem;
      position: relative;
      display: block;
    }
    .press-bar-label::after {
      content: '';
      display: block;
      width: 2rem;
      height: 1.5px;
      background: var(--teal);
      margin: 0.5rem auto 1.25rem;
    }
    .press-logos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4rem;
      flex-wrap: wrap;
    }
    .press-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      padding: 1rem 1.1rem 0.85rem;
      border-radius: 12px;
      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }
    .press-item:hover {
      transform: translateY(-4px);
      background: rgba(0,110,140,0.07);
      box-shadow: 0 10px 28px rgba(0,110,140,0.18), 0 2px 8px rgba(0,40,70,0.08);
    }
    .press-item:active { transform: translateY(-1px); }
    .press-item-icon { display: flex; align-items: center; justify-content: center; height: 36px; }
    .press-item-label {
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(0,40,70,0.6);
      text-align: center;
      line-height: 1.4;
      transition: color 0.22s ease;
    }
    .press-item:hover .press-item-label { color: rgba(0,40,70,0.85); }
    .press-logo-img {
      max-height: 38px;
      max-width: 120px;
      width: auto;
      display: block;
      object-fit: contain;
    }
    .press-logo-square {
      max-height: 38px;
      max-width: 38px;
      border-radius: 6px;
    }
    /* LA Magazine inline wordmark */
    .la-wordmark {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.55rem;
      font-weight: 700;
      color: #9B1C2E;
      line-height: 1;
      letter-spacing: -0.01em;
    }
    /* Press modal logo display */
    .press-modal-logo { margin-bottom: 1.25rem; }
    .press-modal-logo img { max-height: 48px; max-width: 160px; object-fit: contain; }
    .press-modal-logo .la-wordmark { font-size: 1.9rem; opacity: 1; }

    /* ─── SECTION SHARED ──────────────────────────── */
    .section-eyebrow {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--teal);
      text-align: center;
      margin-bottom: 0.5rem;
    }
    .section-eyebrow-line {
      width: 36px;
      height: 1px;
      background: var(--teal);
      margin: 0.55rem auto 0;
    }
    .section-heading {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      font-weight: 600;
      line-height: 1.18;
      letter-spacing: -0.01em;
      text-align: center;
      color: var(--navy);
      margin-bottom: 3.5rem;
    }
    .section-heading em { font-style: italic; color: var(--teal); }
    .section-subtext {
      text-align: center;
      max-width: 580px;
      margin: -2.5rem auto 3.5rem;
      font-size: 1.25rem;
      line-height: 1.5;
      color: var(--text-muted);
    }

    /* ─── TEAM ────────────────────────────────────── */
    .team-section { background: #ffffff; padding: 6rem 2.5rem; }
    .team-grid {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    .team-card {
      background: white;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 2px 20px rgba(0,40,70,0.07), 0 1px 4px rgba(0,40,70,0.04);
    }
    .team-card img {
      width: 100%;
      height: 270px;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    .team-card-body { padding: 1.75rem; }
    .team-role {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.2rem;
    }
    .team-role-sub {
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(0,40,70,0.38);
      margin-bottom: 0.7rem;
    }
    .team-name {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1.375rem, 2vw, 1.875rem);
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 0.7rem;
      line-height: 1.2;
    }
    .team-bio {
      font-size: 0.9375rem;
      line-height: 1.72;
      color: var(--text-muted);
      margin-bottom: 1.1rem;
    }
    .team-link {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: color 0.2s ease;
    }
    .team-link:hover { color: var(--navy-deep); }

    /* ─── SERVICES ────────────────────────────────── */
    .services-section { background: var(--mint-light); padding: 6rem 2.5rem; }
    .services-grid {
      max-width: var(--content-max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .service-card {
      background: white;
      border-radius: 22px;
      padding: 2rem;
      box-shadow: 0 2px 14px rgba(0,40,70,0.06), 0 1px 3px rgba(0,40,70,0.04);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 40px rgba(0,40,70,0.1), 0 2px 8px rgba(0,40,70,0.05);
    }
    .service-icon {
      width: 52px;
      height: 52px;
      background: rgba(0,110,140,0.08);
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      margin-bottom: 1.3rem;
      color: var(--teal);
    }
    .service-icon svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    .service-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--teal);
      margin-bottom: 0.7rem;
      line-height: 1.25;
    }
    .service-desc {
      font-size: 0.9375rem;
      line-height: 1.72;
      color: var(--text-muted);
      margin-bottom: 1.25rem;
    }
    .service-link {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      transition: color 0.2s ease;
    }
    .service-link:hover { color: var(--navy-deep); }

    /* ─── TESTIMONIALS CAROUSEL ───────────────────── */
    .testimonials-section { background: var(--mint); padding: 6rem 0 5rem; }
    .testimonials-section .section-eyebrow,
    .testimonials-section .section-eyebrow-line,
    .testimonials-section .section-heading,
    .testimonials-section .testi-subtext { padding: 0 2.5rem; }
    .testi-subtext {
      text-align: center;
      max-width: 620px;
      margin: -2.5rem auto 3rem;
      font-size: 1.25rem;
      line-height: 1.75;
      color: var(--text-muted);
    }
    .carousel-outer {
      overflow: hidden;
      padding: 0.5rem 0 2rem;
      -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
      mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    }
    .carousel-track {
      display: flex;
      gap: 1.5rem;
      width: max-content;
      will-change: transform;
    }
    .tcard {
      flex: 0 0 300px;
      width: 300px;
      background: white;
      border-radius: 22px;
      padding: 1.5rem;
      box-shadow: 0 2px 14px rgba(0,40,70,0.06), 0 1px 3px rgba(0,40,70,0.04);
    }
    .tcard-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }
    .tcard-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: #ddd;
    }
    .tcard-meta { flex: 1; min-width: 0; }
    .tcard-name {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tcard-cred {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tcard-stars { color: var(--teal); font-size: 0.8125rem; margin-bottom: 0.65rem; display: none; }
    .tcard-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 500;
      font-style: italic;
      line-height: 1.5;
      color: rgba(0,40,70,0.75);
      margin-bottom: 1rem;
    }
    .tcard-link {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--teal);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .tcard-link:hover { color: var(--navy-deep); }
    .read-all-wrap { text-align: center; margin-top: 2.5rem; padding: 0 2.5rem; }
    .btn-outline-navy {
      display: inline-block;
      border: 1.5px solid var(--navy);
      color: var(--navy);
      padding: 0.78rem 2.2rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .btn-outline-navy:hover { background: var(--navy); color: white; }

    /* ─── FAQ ─────────────────────────────────────── */
    .faq-section {
      background: #ffffff;
      padding: 6rem 2.5rem;
    }
    .faq-section .section-eyebrow { color: var(--navy); opacity: 0.55; }
    .faq-section .section-eyebrow .underline-gold {
      text-decoration: underline;
      text-decoration-color: var(--teal);
      text-underline-offset: 3px;
      color: var(--navy);
      opacity: 1;
    }
    .faq-section .section-eyebrow-line { background: var(--teal); }
    .faq-list {
      max-width: 840px;
      margin: 0 auto;
    }
    .faq-item { border-bottom: 1px solid rgba(0,40,70,0.1); }
    .faq-item:first-child { border-top: 1px solid rgba(0,40,70,0.1); }
    .faq-btn {
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 1.35rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      text-align: left;
      font-family: 'Mulish', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: var(--navy);
      transition: color 0.2s ease;
    }
    .faq-btn:hover { color: var(--teal); }
    .faq-icon {
      flex-shrink: 0;
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 1;
      color: var(--teal);
      transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease;
    }
    .faq-item.open .faq-icon { transform: rotate(45deg); }
    .faq-answer {
      font-size: 0.9375rem;
      line-height: 1.8;
      color: var(--text-muted);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding-bottom 0.35s ease;
    }
    .faq-item.open .faq-answer { max-height: 300px; padding-bottom: 1.4rem; }

    /* ─── BLOG ────────────────────────────────────── */
    .blog-section { background: #ffffff; padding: 6rem 2.5rem; }
    .blog-search-wrap {
      max-width: 540px;
      margin: 0 auto 1.5rem;
    }
    .blog-search-wrap input {
      width: 100%;
      border: 1.5px solid rgba(0,40,70,0.13);
      border-radius: 7px;
      padding: 0.85rem 1.25rem;
      font-family: 'Mulish', sans-serif;
      font-size: 0.9375rem;
      color: var(--navy);
      background: white;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .blog-search-wrap input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,110,140,0.1); }
    .blog-search-wrap input::placeholder { color: rgba(0,40,70,0.32); }
    .blog-filters {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .filter-pill {
      padding: 0.42rem 1rem;
      border-radius: 999px;
      border: 1.5px solid rgba(0,40,70,0.18);
      font-family: 'Mulish', sans-serif;
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(0,40,70,0.5);
      background: transparent;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .filter-pill:hover, .filter-pill.active {
      background: var(--teal);
      border-color: var(--teal);
      color: white;
    }
    .filter-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
    .blog-count {
      text-align: center;
      font-size: 0.8125rem;
      color: rgba(0,40,70,0.38);
      margin-bottom: 2rem;
    }
    .blog-grid {
      max-width: var(--content-max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .blog-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 14px rgba(0,40,70,0.06), 0 1px 3px rgba(0,40,70,0.04);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 40px rgba(0,40,70,0.1);
    }
    .blog-card-body { padding: 1.5rem; }
    .blog-tag {
      display: inline-block;
      padding: 0.2rem 0.65rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    .tag-vi  { background: rgba(61,58,61,0.1);    color: #3D3A3D; }
    .tag-td  { background: rgba(0,110,140,0.1);   color: #006E8C; }
    .tag-vh  { background: rgba(220,230,230,0.6); color: #002846; }
    .tag-va  { background: rgba(0,40,70,0.1);     color: #002846; }
    .tag-cs  { background: rgba(31,130,117,0.1);  color: #1F8275; }
    .blog-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.35;
      margin-bottom: 0.45rem;
    }
    .blog-date { font-size: 0.8125rem; color: rgba(0,40,70,0.38); margin-bottom: 1rem; }
    .blog-read {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--teal);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      transition: color 0.2s ease;
    }
    .blog-read:hover { color: var(--navy-deep); }

    /* ─── FOOTER ──────────────────────────────────── */
    footer {
      background: var(--navy);
      padding: 4.5rem 2.5rem 2rem;
      color: rgba(255,255,255,0.55);
      position: relative;
      overflow: hidden;
    }
    footer::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='white' opacity='0.05'%3E%3Crect x='0' y='80' width='6' height='40'/%3E%3Crect x='9' y='60' width='6' height='60'/%3E%3Crect x='18' y='50' width='6' height='70'/%3E%3Crect x='27' y='30' width='6' height='90'/%3E%3Crect x='36' y='45' width='6' height='75'/%3E%3Crect x='45' y='20' width='6' height='100'/%3E%3Crect x='54' y='35' width='6' height='85'/%3E%3Crect x='63' y='55' width='6' height='65'/%3E%3Crect x='72' y='10' width='6' height='110'/%3E%3Crect x='81' y='40' width='6' height='80'/%3E%3Crect x='90' y='25' width='6' height='95'/%3E%3Crect x='99' y='50' width='6' height='70'/%3E%3Crect x='108' y='15' width='6' height='105'/%3E%3Crect x='117' y='35' width='6' height='85'/%3E%3Crect x='126' y='60' width='6' height='60'/%3E%3Crect x='135' y='5' width='6' height='115'/%3E%3Crect x='144' y='45' width='6' height='75'/%3E%3Crect x='153' y='30' width='6' height='90'/%3E%3Crect x='162' y='55' width='6' height='65'/%3E%3Crect x='171' y='20' width='6' height='100'/%3E%3Crect x='180' y='40' width='6' height='80'/%3E%3Crect x='189' y='10' width='6' height='110'/%3E%3Crect x='198' y='50' width='6' height='70'/%3E%3Crect x='207' y='25' width='6' height='95'/%3E%3Crect x='216' y='60' width='6' height='60'/%3E%3Crect x='225' y='35' width='6' height='85'/%3E%3Crect x='234' y='15' width='6' height='105'/%3E%3Crect x='243' y='45' width='6' height='75'/%3E%3Crect x='252' y='5' width='6' height='115'/%3E%3Crect x='261' y='30' width='6' height='90'/%3E%3Crect x='270' y='55' width='6' height='65'/%3E%3Crect x='279' y='20' width='6' height='100'/%3E%3Crect x='288' y='40' width='6' height='80'/%3E%3Crect x='297' y='65' width='6' height='55'/%3E%3Crect x='306' y='10' width='6' height='110'/%3E%3Crect x='315' y='50' width='6' height='70'/%3E%3Crect x='324' y='25' width='6' height='95'/%3E%3Crect x='333' y='35' width='6' height='85'/%3E%3Crect x='342' y='60' width='6' height='60'/%3E%3Crect x='351' y='15' width='6' height='105'/%3E%3Crect x='360' y='45' width='6' height='75'/%3E%3Crect x='369' y='30' width='6' height='90'/%3E%3Crect x='378' y='70' width='6' height='50'/%3E%3Crect x='387' y='40' width='6' height='80'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 400px 120px;
      background-repeat: repeat-x;
      background-position: bottom;
      pointer-events: none;
    }
    .footer-inner { max-width: 1280px; margin: 0 auto; }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr;
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 2rem;
    }
    .footer-brand img {
      height: 38px;
      width: auto;
      display: block;
      margin-bottom: 1rem;
      filter: brightness(0) invert(1);
      opacity: 0.8;
    }
    .footer-brand p { font-size: 0.8125rem; line-height: 1.75; margin-bottom: 1.25rem; }
    .footer-socials { display: flex; gap: 0.65rem; }
    .footer-socials a {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    .footer-socials a:hover { border-color: var(--teal); color: var(--teal); }
    .footer-col-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: white;
      margin-bottom: 1.3rem;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.58rem; }
    .footer-links a {
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      transition: color 0.18s ease;
    }
    .footer-links a:hover { color: var(--teal); }
    .footer-contact-line { font-size: 0.8125rem; line-height: 2; }
    .footer-contact-line a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.18s ease; }
    .footer-contact-line a:hover { color: var(--teal); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.28);
    }
    .footer-bottom a { color: rgba(255,255,255,0.28); text-decoration: none; transition: color 0.18s ease; }
    .footer-bottom a:hover { color: rgba(255,255,255,0.55); }
    .footer-bottom-links { display: flex; gap: 1.5rem; }

    /* ─── HOVER GLOW EFFECTS ─────────────────────────── */
    /* Buttons */
    .btn-cta {
      transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .btn-cta:hover {
      background: var(--teal-dark);
      transform: scale(1.05) translateY(-1px);
      box-shadow: 0 0 0 3px rgba(0,110,140,0.38), 0 8px 24px rgba(0,110,140,0.25);
    }
    .btn-ghost {
      transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .btn-ghost:hover {
      background: #f0ebe2;
      transform: scale(1.05) translateY(-1px);
      box-shadow: 0 0 0 3px rgba(0,110,140,0.38), 0 8px 24px rgba(0,110,140,0.18);
    }
    .btn-schedule {
      transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .btn-schedule:hover {
      background: var(--teal-dark);
      transform: scale(1.05) translateY(-1px);
      box-shadow: 0 0 0 3px rgba(0,110,140,0.38), 0 6px 18px rgba(0,110,140,0.22);
    }
    .btn-outline-navy {
      transition: background 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .btn-outline-navy:hover {
      background: var(--navy);
      color: white;
      transform: scale(1.05) translateY(-1px);
      box-shadow: 0 0 0 3px rgba(0,40,70,0.25), 0 8px 24px rgba(0,40,70,0.2);
    }
    /* Cards */
    .service-card {
      transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s ease;
    }
    .service-card:hover {
      transform: scale(1.025) translateY(-5px);
      box-shadow: 0 0 0 2px rgba(0,110,140,0.32), 0 14px 44px rgba(0,40,70,0.12), 0 2px 8px rgba(0,40,70,0.05);
    }
    .team-card {
      transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s ease;
    }
    .team-card:hover {
      transform: scale(1.025) translateY(-5px);
      box-shadow: 0 0 0 2px rgba(0,110,140,0.42), 0 14px 44px rgba(0,40,70,0.1), 0 2px 6px rgba(0,40,70,0.04);
    }
    .blog-card {
      transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s ease;
    }
    .blog-card:hover {
      transform: scale(1.025) translateY(-5px);
      box-shadow: 0 0 0 2px rgba(0,110,140,0.28), 0 14px 44px rgba(0,40,70,0.1);
    }
    /* Nav links */
    .nav-links > li > a {
      transition: color 0.2s ease;
    }
    .nav-links > li > a:hover {
      color: var(--teal);
    }
    /* Inline links */
    .tcard-link, .service-link, .team-link, .blog-read {
      transition: color 0.2s ease;
      display: inline-flex;
      align-items: center;
    }
    .tcard-link:hover { color: var(--navy-deep); }
    .service-link:hover { color: var(--navy-deep); }
    .team-link:hover { color: var(--navy-deep); }
    .blog-read:hover { color: var(--navy-deep); }
    /* Filter pills */
    .filter-pill {
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
                  transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .filter-pill:hover:not(.active) {
      transform: scale(1.07);
      box-shadow: 0 0 0 2px rgba(0,110,140,0.3), 0 4px 12px rgba(0,110,140,0.14);
    }
    .filter-pill.active {
      transform: scale(1.04);
      box-shadow: 0 0 0 2px rgba(0,110,140,0.45), 0 4px 14px rgba(0,110,140,0.2);
    }
    /* Footer socials */
    .footer-socials a {
      transition: border-color 0.2s ease, color 0.2s ease,
                  transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .footer-socials a:hover {
      border-color: var(--teal);
      color: var(--teal);
      transform: scale(1.18);
      box-shadow: 0 0 0 2px rgba(0,110,140,0.35), 0 4px 12px rgba(0,110,140,0.2);
    }
    /* Footer links */
    .footer-links a {
      transition: color 0.18s ease;
    }
    .footer-links a:hover {
      color: var(--teal);
    }
    /* Carousel drag cursor */
    .carousel-outer { cursor: grab; }
    .carousel-outer.dragging { cursor: grabbing; }
  

    /* ── PAGE SECTIONS ─────────────────────────────────── */
    .page-section { display: none; }
    .page-section.active { display: block; }

    /* ── PAGE HERO (inner pages) ─────────────────────────── */
    .page-hero{background:var(--navy);padding:5rem 2.5rem 4.5rem;text-align:center;position:relative;overflow:hidden}
    .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(0,110,140,0.07) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 50%,rgba(0,110,140,0.09) 0%,transparent 65%);pointer-events:none}
    .page-eyebrow{font-family:'Montserrat',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);margin-bottom:0.9rem;position:relative}
    .page-title{font-family:'Montserrat',sans-serif;font-size:clamp(2.25rem,5vw,3.25rem);font-weight:700;letter-spacing:-0.01em;color:white;line-height:1.08;position:relative}
    .page-title em{font-style:italic;color:var(--teal)}
    .page-subtitle{font-size:1.25rem;color:rgba(255,255,255,0.55);margin-top:1.25rem;line-height:1.5;max-width:560px;margin-left:auto;margin-right:auto;position:relative}

    /* ── BIO PAGES ──────────────────────────────────────── */
    .bio-section{max-width:960px;margin:4rem auto 1.5rem;padding:0 3rem;display:grid;grid-template-columns:280px 1fr;gap:4rem;align-items:start}
    .bio-photo{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 6px 48px rgba(0,40,70,0.14);position:relative}
    .bio-photo::after{content:'';position:absolute;top:14px;left:14px;right:-14px;bottom:-14px;border:1.5px solid var(--teal);border-radius:12px;opacity:0.22;pointer-events:none;z-index:-1}
    .bio-photo img{width:100%;display:block;object-fit:cover}
    .bio-role{font-family:'Montserrat',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);margin-bottom:0.5rem}
    .bio-name{font-family:'Montserrat',sans-serif;font-size:2.75rem;font-weight:700;letter-spacing:-0.01em;color:var(--navy);line-height:1.05;margin-bottom:0.9rem}
    .bio-name-rule{width:36px;height:2px;background:var(--teal);opacity:0.45;margin-top:0.25rem}
    .bio-text{font-size:0.88rem;line-height:1.82;color:var(--text-muted);margin-bottom:1rem}
    .coming-note{font-size:0.82rem;color:rgba(0,40,70,0.35);font-style:italic;margin-top:1.5rem}
    /* decorative divider between photo block and chapters */
    .bio-divider{max-width:960px;margin:0 auto 3.5rem;padding:0 3rem;display:flex;align-items:center;gap:1.5rem}
    .bio-divider::before,.bio-divider::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(0,110,140,0.22))}
    .bio-divider::after{background:linear-gradient(to left,transparent,rgba(0,110,140,0.22))}
    .bio-divider-gem{width:5px;height:5px;flex-shrink:0;background:var(--teal);transform:rotate(45deg);opacity:0.5}
    /* chapter rows */
    .bio-chapters{max-width:960px;margin:0 auto 5rem;padding:0 3rem}
    .bio-chapter{display:grid;grid-template-columns:180px 1fr;gap:3.5rem;padding:2.75rem 0;border-top:1px solid rgba(0,110,140,0.14)}
    .bio-chapter-label{font-size:0.54rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal);line-height:1.5;padding-top:0.15rem}
    .bio-chapter-label::before{content:'';display:block;width:22px;height:2px;background:var(--teal);opacity:0.55;margin-bottom:0.75rem}
    .bio-chapter-subtitle{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:0.8rem;font-weight:400;letter-spacing:0.03em;text-transform:none;color:rgba(0,110,140,0.7);margin-top:0.2rem}
    #page-speaking-engagements .bio-chapter-label{font-size:0.68rem;letter-spacing:0.16em}
    #page-speaking-engagements .bio-chapter-subtitle{font-size:0.92rem}
    .bio-chapter-body{font-size:0.9rem;line-height:1.92;color:var(--text-muted)}
    /* credentials panel */
    .bio-credentials{margin-top:3rem;padding:1.75rem 2rem;background:rgba(0,110,140,0.055);border-left:2.5px solid rgba(0,110,140,0.38);border-radius:0 10px 10px 0}
    .bio-cred-label{font-size:0.57rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);margin-bottom:0.7rem;display:block}
    .bio-cred-list{list-style:none;padding:0;margin:0;display:grid;gap:0.35rem}
    .bio-cred-list li{font-size:0.83rem;line-height:1.65;color:var(--text-muted);padding-left:1.1rem;position:relative}
    .bio-cred-list li::before{content:'—';position:absolute;left:0;color:var(--teal);opacity:0.55}

    /* ── ABOUT / CAREERS ────────────────────────────────── */
    .page-content-inner{max-width:860px;margin:5rem auto;padding:0 2.5rem}
    .page-content-center{max-width:760px;margin:5rem auto;padding:0 2.5rem;text-align:center}
    .coming-soon-note{background:white;border-radius:14px;padding:3rem;text-align:center;box-shadow:0 2px 20px rgba(0,40,70,0.07)}
    .coming-soon-note p{font-size:0.92rem;line-height:1.78;color:var(--text-muted)}
    .openings-note{font-family:'Montserrat',sans-serif;font-size:1.65rem;font-weight:600;color:var(--navy);line-height:1.35;margin-bottom:1.25rem}
    .openings-note em{font-style:italic;color:var(--teal)}
    .openings-sub{font-size:0.88rem;line-height:1.78;color:var(--text-muted);margin-bottom:2rem}
    .btn-contact{display:inline-block;background:var(--teal);color:white;padding:0.82rem 2rem;border-radius:4px;font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:background 0.2s,transform 0.22s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.22s}
    .btn-contact:hover{background:var(--teal-dark);transform:scale(1.05) translateY(-1px);box-shadow:0 0 0 3px rgba(0,110,140,0.38),0 8px 24px rgba(0,110,140,0.25)}

    /* ── CONTACT PAGE ───────────────────────────────────── */
    .contact-section{max-width: var(--content-max);margin:5rem auto;padding:0 2.5rem;display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
    .contact-info-label{font-family:'Montserrat',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);margin-bottom:1.25rem}
    .contact-info-heading{font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:600;letter-spacing:-0.01em;color:var(--navy);line-height:1.2;margin-bottom:1.75rem}
    .contact-info-heading em{font-style:italic;color:var(--teal)}
    .contact-row{margin-bottom:1.5rem}
    .contact-row-label{font-size:0.65rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.3rem}
    .contact-row-val{font-size:0.88rem;color:var(--navy);line-height:1.7}
    .contact-row-val a{color:var(--teal);text-decoration:none;transition:color 0.2s}
    .contact-row-val a:hover{color:var(--navy)}
    .form-card{background:white;border-radius:16px;padding:2.5rem;box-shadow:0 2px 24px rgba(0,40,70,0.08)}
    .form-card h3{font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:600;color:var(--navy);margin-bottom:1.75rem}
    .form-group{margin-bottom:1.25rem}
    .form-label{display:block;font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem}
    .form-input{width:100%;border:1.5px solid rgba(0,40,70,0.13);border-radius:7px;padding:0.82rem 1rem;font-family:'Mulish',sans-serif;font-size:0.875rem;color:var(--navy);background:white;outline:none;transition:border-color 0.2s,box-shadow 0.2s;resize:none}
    .form-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,110,140,0.1)}
    .form-type-toggle{display:flex;background:rgba(0,40,70,0.06);border-radius:10px;padding:4px;margin-bottom:2rem;position:relative}
    .form-type-btn{flex:1;padding:0.6rem 0.75rem;border:none;background:transparent;font-family:'Mulish',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);border-radius:7px;cursor:pointer;position:relative;z-index:1;transition:color 0.22s ease}
    .form-type-btn.active{color:var(--navy)}
    .form-type-pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:7px;background:white;box-shadow:0 1px 6px rgba(0,40,70,0.12);transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),width 0.25s cubic-bezier(0.34,1.56,0.64,1)}
    select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002846' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;cursor:pointer}
    .form-input::placeholder{color:rgba(0,40,70,0.32)}
    .btn-submit{display:inline-block;background:var(--teal);color:white;padding:0.85rem 2rem;border-radius:4px;font-family:'Mulish',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border:none;cursor:pointer;width:100%;transition:background 0.2s,transform 0.2s}
    .btn-submit:hover{background:var(--teal-dark);transform:translateY(-1px)}
.testi-featured{background:var(--mint);padding:5rem 2.5rem 5rem}
    .testi-featured-grid{max-width: var(--content-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
    .testi-all-section{background:white;padding:5rem 2.5rem 5rem}
    .testi-all-heading{font-family:'Montserrat',sans-serif;font-size:clamp(1.75rem,2.5vw,2.5rem);font-weight:600;letter-spacing:-0.01em;color:var(--navy);text-align:center;margin-bottom:3rem}
    .testi-all-grid{max-width: var(--content-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
    .testi-cta-wrap{text-align:center;margin-top:3rem}
    .carousel-outer{overflow:hidden;padding:0.5rem 0 2rem;-webkit-mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);cursor:grab}
    .carousel-outer.dragging{cursor:grabbing}
    .carousel-track{display:flex;gap:1.5rem;width:max-content;will-change:transform}
    .tcard{flex:0 0 300px;width:300px;background:white;border-radius:14px;padding:1.5rem;box-shadow:0 2px 14px rgba(0,40,70,0.06),0 1px 3px rgba(0,40,70,0.04)}
    .testi-featured-grid .tcard,.testi-all-grid .tcard{flex:none;width:100%;display:flex;flex-direction:column;cursor:pointer;transition:transform 0.26s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.26s ease}
    .testi-featured-grid .tcard:hover,.testi-all-grid .tcard:hover{transform:scale(1.025) translateY(-5px);box-shadow:0 0 0 2px rgba(0,110,140,0.35),0 16px 48px rgba(0,40,70,0.13),0 2px 8px rgba(0,40,70,0.05)}
    .testi-featured-grid .tcard .tcard-quote,.testi-all-grid .tcard .tcard-quote{flex:1}
    .testi-featured-grid .tcard .tcard-link,.testi-all-grid .tcard .tcard-link{margin-top:auto;pointer-events:none}
    .tcard-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.85rem}
    .tcard-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#ddd}
    .tcard-name{font-size:0.82rem;font-weight:600;color:var(--navy)}
    .tcard-cred{font-size:0.7rem;color:var(--text-muted);margin-top:1px}
    .tcard-stars{color:var(--teal);font-size:0.7rem;margin-bottom:0.65rem;display:none}
    .testi-featured-grid .tcard-stars{display:block}
    .tcard-quote{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;font-style:italic;line-height:1.5;color:rgba(0,40,70,0.75);margin-bottom:1rem}
    .tcard-link{font-size:0.68rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--teal);text-decoration:none;transition:color 0.2s}
    .tcard-link:hover{color:var(--navy-deep)}
    .read-all-wrap{text-align:center;margin-top:2.5rem;padding:0 2.5rem}
    .btn-outline-navy{display:inline-block;border:1.5px solid var(--navy);color:var(--navy);padding:0.78rem 2.2rem;border-radius:4px;font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:background 0.2s,color 0.2s,transform 0.22s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.22s}
    .btn-outline-navy:hover{background:var(--navy);color:white;transform:scale(1.05) translateY(-1px);box-shadow:0 0 0 3px rgba(0,40,70,0.25),0 8px 24px rgba(0,40,70,0.2)}
    .btn-view-all-services{display:inline-block;border:1.5px solid var(--teal);color:var(--navy);padding:0.82rem 2.6rem;border-radius:4px;font-family:'Mulish',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.22s,background 0.2s,color 0.2s}
    .btn-view-all-services:hover{background:var(--navy);color:white;border-color:var(--navy);transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 3px rgba(0,110,140,0.3),0 10px 28px rgba(0,40,70,0.2)}
    .journal-masthead {
      background: var(--navy);
      text-align: center;
      padding: 3.5rem 2.5rem 3rem;
      position: relative;
      overflow: hidden;
    }
    .journal-masthead::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(0,110,140,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 55% 70% at 85% 50%, rgba(0,110,140,0.09) 0%, transparent 65%);
      pointer-events: none;
    }
    .journal-vol { font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.9rem; position: relative; }
    .journal-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(3.8rem, 6vw, 5.8rem); font-weight: 700; color: white; line-height: 1; margin-bottom: 1rem; letter-spacing: -0.02em; position: relative; }
    .journal-divider { width: 48px; height: 1px; background: var(--teal); margin: 0 auto 1rem; position: relative; }
    .journal-tagline { font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.35); position: relative; }

    /* ── SIDEBAR FILTER ─────────────────────────────────── */
    .sidebar-filter-box {
      background: white;
      border-radius: 12px;
      padding: 1.4rem 1.35rem;
      box-shadow: 0 2px 12px rgba(0,40,70,0.07), 0 1px 3px rgba(0,40,70,0.04);
      margin-bottom: 2rem;
    }
    .sidebar-search {
      display: flex; align-items: center; gap: 0.5rem;
      background: rgba(0,40,70,0.04);
      border-radius: 7px;
      padding: 0.5rem 0.75rem;
      margin-bottom: 0.85rem;
      border: 1px solid rgba(0,40,70,0.08);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .sidebar-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,110,140,0.1); }
    .sidebar-search svg { width: 13px; height: 13px; stroke: rgba(0,40,70,0.35); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
    .sidebar-search input { border: none; outline: none; font-family: 'Mulish', sans-serif; font-size: 0.8125rem; color: var(--navy); background: none; width: 100%; }
    .sidebar-search input::placeholder { color: rgba(0,40,70,0.32); }
    .sidebar-filter-btns { display: flex; flex-direction: column; gap: 0.3rem; }
    .filter-tab {
      width: 100%; text-align: left;
      padding: 0.6rem 0.85rem;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      font-family: 'Mulish', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(0,40,70,0.48);
      cursor: pointer;
      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    }
    .filter-tab:hover {
      transform: translateY(-2px);
      background: rgba(0,110,140,0.06);
      border-color: rgba(0,110,140,0.3);
      box-shadow: 0 6px 18px rgba(0,110,140,0.15), 0 2px 6px rgba(0,0,0,0.05);
      color: var(--navy);
    }
    .filter-tab:active { transform: translateY(0); }
    .filter-tab.active {
      background: var(--navy);
      color: white;
      border-color: var(--navy);
      box-shadow: 0 4px 14px rgba(0,40,70,0.2);
    }
    .filter-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

    /* ── CONTENT LAYOUT ─────────────────────────────────── */
    .journal-wrap { max-width: var(--content-max); margin: 0 auto; padding: 2rem 2.5rem 5rem; display: grid; grid-template-columns: 1fr 300px; gap: 3rem; }
    .article-count { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.25rem; }

    /* ── TAGS ───────────────────────────────────────────── */
    .tag { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 3px; margin-bottom: 0.55rem; }
    .tag-vi { background: rgba(61,58,61,0.85);    color: white; }
    .tag-td { background: rgba(0,110,140,0.85);   color: white; }
    .tag-vh { background: rgba(220,230,230,0.92); color: #002846; }
    .tag-va { background: rgba(0,40,70,0.85);     color: white; }
    .tag-cs { background: rgba(31,130,117,0.85);  color: white; }

    /* ── FEATURED BIG ───────────────────────────────────── */
    /* ── FEATURED TRIO ─────────────────────────────────── */
    .featured-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
    .ftcard { position: relative; border-radius: 10px; overflow: hidden; text-decoration: none; display: block; background: var(--navy-deep); box-shadow: 0 2px 16px rgba(0,40,70,0.1); transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s; }
    .ftcard:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 0 0 2px rgba(0,110,140,0.32), 0 16px 40px rgba(0,40,70,0.18); }
    .ftcard > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
    .ftcard-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,20,46,0.93) 0%, rgba(0,20,46,0.38) 55%, transparent 100%); pointer-events: none; }
    .ftcard-badge { position: absolute; top: 0.7rem; left: 0.7rem; font-family: 'Mulish', sans-serif; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.22rem 0.62rem; border-radius: 4px; z-index: 2; }
    .badge-latest { background: var(--teal); color: white; }
    .badge-popular { background: var(--teal); color: white; }
    .badge-recommended { background: rgba(0,40,70,0.82); color: white; border: 1px solid rgba(255,255,255,0.22); }
    .ftcard-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.2rem 1.2rem; z-index: 1; }
    .ftcard-content .tag { margin-bottom: 0.35rem; }
    .ftcard-title { font-family: 'Cormorant Garamond', serif; font-size: 1.02rem; font-weight: 700; color: white; line-height: 1.28; margin: 0 0 0.42rem; }
    .ftcard-meta { font-size: 0.8125rem; color: rgba(255,255,255,0.48); }
    .ftcard-read { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); display: block; margin-top: 0.48rem; transition: color 0.2s; }
    .ftcard:hover .ftcard-read { color: white; }

    /* ── SECTION LABEL ──────────────────────────────────── */
    .section-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,40,70,0.35); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0,40,70,0.1); }

    /* ── ARTICLE GRID ───────────────────────────────────── */
    .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .cat-heading-item { grid-column: 1 / -1; padding-top: 2.5rem; }
    .cat-heading-item:first-child { padding-top: 0; }
    .cat-heading-label { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(0,40,70,0.1); margin-bottom: 0.25rem; }
    .cat-heading-label .tag { font-size: 0.8125rem; }
    .sidebar-index-link { display: block; padding: 0.5rem 0.75rem; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); text-decoration: none; transition: background 0.18s, color 0.18s; margin-bottom: 0.15rem; }
    .sidebar-index-link:hover { background: rgba(0,40,70,0.06); color: var(--teal); }
    .sidebar-index-link--active { background: rgba(0,40,70,0.08); color: var(--teal) !important; }
    @keyframes card-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
    .article-card { background: white; border-radius: 8px; overflow: hidden; text-decoration: none; display: block; box-shadow: 0 1px 8px rgba(0,40,70,0.05); transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s; }
    .article-card:hover { transform: scale(1.025) translateY(-4px); box-shadow: 0 0 0 2px rgba(0,110,140,0.28), 0 12px 36px rgba(0,40,70,0.1); }
    .article-card.card-animate { animation: card-rise 0.84s cubic-bezier(0.22,1,0.36,1) both; }
    .article-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
    .article-card-body { padding: 1rem; }
    .article-card-title { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin: 0.35rem 0 0.4rem; }
    .article-card-date { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.5rem; }
    .article-card-read { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); transition: color 0.2s; }
    .article-card:hover .article-card-read { color: var(--navy); }

    /* ── PAGINATION ─────────────────────────────────────── */
    .pagination { display: flex; align-items: center; gap: 0.25rem; padding: 1.5rem 2.5rem 3rem; justify-content: center; }
    .page-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); border-radius: 4px; border: none; background: none; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
    .page-btn:hover, .page-btn.active { background: var(--navy); color: white; transform: scale(1.1); }
    .page-next, .page-prev { width: auto; padding: 0 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; }
    .page-dots { color: rgba(0,40,70,0.3); font-size: 0.8125rem; padding: 0 0.2rem; }

    /* ── SIDEBAR ─────────────────────────────────────────── */
    .sidebar-featured-card { display: block; text-decoration: none; margin-bottom: 1.25rem; border-radius: 8px; overflow: hidden; background: white; box-shadow: 0 1px 8px rgba(0,40,70,0.05); transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s; }
    .sidebar-featured-card:hover { transform: scale(1.025) translateY(-3px); box-shadow: 0 0 0 2px rgba(0,110,140,0.35), 0 10px 30px rgba(0,40,70,0.1); }
    .sidebar-featured-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
    .sidebar-featured-body { padding: 0.85rem; }
    .sidebar-featured-title { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-top: 0.35rem; }

    /* ── ARTICLE DETAIL PAGE ────────────────────────────── */
    .art-content-wrap { max-width: 760px; margin: 0 auto; padding: 0 2.5rem 5rem; }
    .art-nav { font-family: 'Mulish', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0,40,70,0.4); padding: 2rem 0 0; display: flex; align-items: center; gap: 0.55rem; margin-bottom: 2rem; }
    .art-nav a { color: var(--teal); text-decoration: none; transition: color 0.2s; }
    .art-nav a:hover { color: var(--navy); }
    .art-nav-sep { opacity: 0.35; }
    .art-title { font-family: 'Montserrat', sans-serif; font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 0.85rem; }
    .art-byline { font-family: 'Mulish', sans-serif; font-size: 0.8125rem; color: rgba(0,40,70,0.45); margin-bottom: 2rem; display: flex; align-items: center; gap: 0.55rem; }
    .art-byline-sep { opacity: 0.35; }
    .art-hero { border-radius: 12px; overflow: hidden; aspect-ratio: 16/7; margin-bottom: 2.5rem; }
    .art-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .art-body { font-family: 'Mulish', sans-serif; font-size: 1rem; line-height: 1.82; color: rgba(0,40,70,0.8); }
    .art-body h2 { font-family: 'Montserrat', sans-serif; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); margin: 2rem 0 0.65rem; line-height: 1.25; }
    .art-body h3 { font-family: 'Montserrat', sans-serif; font-size: 1.375rem; font-weight: 600; color: var(--navy); margin: 1.5rem 0 0.5rem; }
    .art-body p { margin-bottom: 1.2rem; }
    .art-body ul, .art-body ol { padding-left: 1.4rem; margin-bottom: 1.2rem; }
    .art-body li { margin-bottom: 0.45rem; }
    .art-body strong { color: var(--navy); font-weight: 600; }
    .art-pullquote { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-style: italic; color: var(--navy); border-left: 3px solid var(--teal); padding: 0.6rem 0 0.6rem 1.4rem; margin: 2rem 0; line-height: 1.45; }
    .art-img-block { border-radius: 10px; overflow: hidden; margin: 1.75rem 0; }
    .art-img-block img { width: 100%; display: block; }
    .art-img-caption { font-size: 0.8125rem; color: rgba(0,40,70,0.38); text-align: center; margin-top: 0.45rem; font-family: 'Mulish', sans-serif; }
    .art-footer { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(0,40,70,0.1); text-align: center; }
    .art-footer-eyebrow { font-family: 'Mulish', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.6rem; }
    .art-footer-heading { font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; color: var(--navy); margin-bottom: 1.4rem; }

    .sidebar-section { margin-bottom: 2.5rem; }
    .sidebar-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,40,70,0.35); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(0,40,70,0.1); }

    .popular-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
    .popular-item { display: flex; gap: 0.75rem; align-items: flex-start; }
    .popular-num { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: rgba(0,40,70,0.1); line-height: 1; flex-shrink: 0; width: 28px; }
    .popular-link { font-size: 0.8125rem; font-weight: 500; color: var(--navy); line-height: 1.45; text-decoration: none; transition: color 0.2s; }
    .popular-link:hover { color: var(--teal); }

    .show-more-row { grid-column: 1 / -1; display: flex; justify-content: center; padding: 0.5rem 0 1rem; }
    .show-more-btn { font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--navy); background: none; border: 1px solid rgba(0,40,70,0.25); border-radius: 999px; padding: 0.7rem 1.7rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; }
    .show-more-btn:hover { color: var(--teal); border-color: var(--teal); background: rgba(0,110,140,0.05); }
    .show-more-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
    .show-more-btn:active { transform: translateY(1px); }
    .show-more-caret { font-size: 0.8125rem; transition: transform 0.2s ease; }
    .show-more-btn:hover .show-more-caret { transform: translateY(2px); }

    .archive-list { list-style: none; }
    .archive-item { border-bottom: 1px solid rgba(0,40,70,0.08); }
    .archive-btn { width: 100%; background: none; border: none; cursor: pointer; padding: 0.7rem 0; display: flex; align-items: center; justify-content: space-between; font-family: 'Mulish', sans-serif; font-size: 0.8125rem; font-weight: 500; color: var(--navy); transition: color 0.2s; }
    .archive-btn:hover { color: var(--teal); }
    .archive-chevron { font-size: 0.8125rem; color: var(--text-muted); transition: transform 0.22s ease; }
    .archive-item.open .archive-chevron { transform: rotate(180deg); }
    .archive-months { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
    .archive-item.open .archive-months { max-height: 220px; }
    .archive-months ul { list-style: none; padding: 0.25rem 0 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .archive-months a { font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
    .archive-months a:hover { color: var(--teal); }

    /* ── RECOMMENDED ─────────────────────────────────────── */
    .recommended { background: var(--navy); padding: 4rem 2.5rem; }
    .rec-inner { max-width: var(--content-max); margin: 0 auto; }
    .rec-eyebrow { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.32); text-align: center; margin-bottom: 0.4rem; }
    .rec-heading { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 700; color: white; text-align: center; margin-bottom: 2.5rem; }
    .rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
    .rec-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s; }
    .rec-card:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 0 0 1px rgba(0,110,140,0.45), 0 12px 36px rgba(0,0,0,0.3); }
    .rec-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; opacity: 0.75; }
    .rec-card-body { padding: 1rem; }
    .rec-tag { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.35rem; }
    .rec-title { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.88); line-height: 1.35; }

    /* ── FOOTER ─────────────────────────────────────────── */
    footer { background: var(--navy); padding: 4.5rem 2.5rem 2rem; color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.06); }
    .footer-inner { max-width: 1280px; margin: 0 auto; }
    .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2rem; }
    .footer-brand img { height: 38px; width: auto; display: block; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: 0.8; }
    .footer-brand p { font-size: 0.8125rem; line-height: 1.75; margin-bottom: 1.25rem; }
    .footer-socials { display: flex; gap: 0.65rem; }
    .footer-socials a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; color: rgba(255,255,255,0.45); text-decoration: none; transition: border-color 0.2s, color 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s; }
    .footer-socials a:hover { border-color: var(--teal); color: var(--teal); transform: scale(1.18); box-shadow: 0 0 0 2px rgba(0,110,140,0.35); }
    .footer-col-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: white; margin-bottom: 1.3rem; }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.58rem; }
    .footer-links a { font-size: 0.8125rem; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.18s; }
    .footer-links a:hover { color: var(--teal); }
    .footer-contact-line { font-size: 0.8125rem; line-height: 2; }
    .footer-contact-line a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.18s; }
    .footer-contact-line a:hover { color: var(--teal); }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; color: rgba(255,255,255,0.28); }
    .footer-bottom a { color: rgba(255,255,255,0.28); text-decoration: none; transition: color 0.18s; }
    .footer-bottom a:hover { color: rgba(255,255,255,0.55); }
    .footer-bottom-links { display: flex; gap: 1.5rem; }

    /* ── HIDDEN ──────────────────────────────────────────── */
    .hidden { display: none !important; }
  .page-hero{background:var(--navy);padding:5rem 2.5rem 4.5rem;text-align:center;position:relative;overflow:hidden}
    .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(0,110,140,0.07) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 50%,rgba(0,110,140,0.09) 0%,transparent 65%);pointer-events:none}
    .page-eyebrow{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal);margin-bottom:0.9rem;position:relative}
    .page-title{font-family:'Montserrat',sans-serif;font-size:clamp(3rem,5vw,4.5rem);font-weight:700;color:white;line-height:1.08;position:relative}
    .page-title em{font-style:italic;color:var(--teal)}
    .page-subtitle{font-size:0.88rem;color:rgba(255,255,255,0.55);margin-top:1.25rem;line-height:1.75;max-width:600px;margin-left:auto;margin-right:auto;position:relative}
    .services-section{padding:5rem 2.5rem 6rem}
    .services-grid{max-width: var(--content-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
    .service-card{background:white;border-radius:14px;padding:2rem;box-shadow:0 2px 14px rgba(0,40,70,0.06),0 1px 3px rgba(0,40,70,0.04);transition:transform 0.26s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.26s}
    .service-card:hover{transform:scale(1.025) translateY(-5px);box-shadow:0 0 0 2px rgba(0,110,140,0.32),0 14px 44px rgba(0,40,70,0.12)}
    .service-icon{width:52px;height:52px;background:rgba(0,110,140,0.08);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem}
    .service-icon svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
    .service-title{font-family:'Montserrat',sans-serif;font-size:1.3rem;font-weight:700;color:var(--teal);margin-bottom:0.7rem;line-height:1.25}
    .service-desc{font-size:0.83rem;line-height:1.72;color:var(--text-muted);margin-bottom:1.25rem}
    .service-link{font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:0.3rem;transition:color 0.2s;margin-top:auto}
    .service-link:hover{color:var(--navy-deep)}
    
    /* ── PAGE TRANSITIONS ─────────────────────────────────── */
    @keyframes pageEnter{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
    .page-section.active > * { animation: pageEnter 0.7s cubic-bezier(0.22,1,0.36,1) both; }
    .page-section.active > *:nth-child(1)  { animation-delay:   0ms; }
    .page-section.active > *:nth-child(2)  { animation-delay:  60ms; }
    .page-section.active > *:nth-child(3)  { animation-delay: 120ms; }
    .page-section.active > *:nth-child(4)  { animation-delay: 180ms; }
    .page-section.active > *:nth-child(5)  { animation-delay: 240ms; }
    .page-section.active > *:nth-child(6)  { animation-delay: 300ms; }
    .page-section.active > *:nth-child(7)  { animation-delay: 360ms; }
    .page-section.active > *:nth-child(8)  { animation-delay: 420ms; }
    .page-section.active > *:nth-child(9)  { animation-delay: 480ms; }
    .page-section.active > *:nth-child(10) { animation-delay: 540ms; }

    /* ── Service card clickable ────────────────────────── */
    #page-services .service-card { cursor: pointer; display: flex; flex-direction: column; }
    #page-services .service-card .service-link { margin-top: auto; pointer-events: none; }
    #page-services .service-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

    /* ── Service modal ──────────────────────────────────── */
    .svc-modal-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,40,70,0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .svc-modal-overlay.open { opacity: 1; pointer-events: auto; }
    .svc-modal-card {
      background: #ffffff; border-radius: 20px;
      padding: 2.75rem 2.5rem 2.5rem; max-width: 620px; width: 92%;
      max-height: 82vh; overflow-y: auto;
      box-shadow: 0 40px 100px rgba(0,40,70,0.25), 0 8px 24px rgba(0,40,70,0.1);
      position: relative;
      transform: translateY(20px) scale(0.96);
      transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
    }
    .svc-modal-overlay.open .svc-modal-card { transform: translateY(0) scale(1); }
    .svc-modal-close {
      position: absolute; top: 1rem; right: 1.25rem;
      background: none; border: none; font-size: 1.6rem; line-height: 1;
      color: rgba(0,40,70,0.35); cursor: pointer;
      transition: color 0.18s, transform 0.18s;
    }
    .svc-modal-close:hover { color: var(--navy); transform: scale(1.15); }
    .svc-modal-eyebrow {
      font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--teal); margin-bottom: 0.3rem;
    }
    .svc-modal-title {
      font-family: 'Montserrat', sans-serif; font-size: 1.8rem;
      font-weight: 700; color: var(--navy); line-height: 1.15;
      margin-bottom: 1.5rem; padding-bottom: 1rem;
      border-bottom: 1px solid rgba(0,40,70,0.1);
    }
    .svc-modal-body p { font-size: 0.9375rem; line-height: 1.75; color: rgba(0,40,70,0.78); margin-bottom: 1rem; }
    .svc-modal-body h4 {
      font-family: 'Mulish', sans-serif; font-size: 0.8125rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
      margin: 1.4rem 0 0.5rem;
    }
    .svc-modal-body ul { padding-left: 1.1rem; margin-bottom: 1rem; }
    .svc-modal-body li { font-size: 0.9375rem; line-height: 1.7; color: rgba(0,40,70,0.78); margin-bottom: 0.3rem; }
    .svc-modal-body strong { color: var(--navy); font-weight: 600; }
    .svc-modal-footer { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,40,70,0.1); }
    .svc-modal-cta { display: inline-block; }
    .svc-guide-btn:hover { transform: translateY(-3px) scale(1.03) !important; background: var(--navy) !important; color: white !important; box-shadow: 0 0 0 3px rgba(0,110,140,0.3), 0 10px 28px rgba(0,40,70,0.2) !important; }
    .svc-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
    .svc-photo-item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
    .svc-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .svc-back-link { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.2s; display: inline-block; margin-top: 1.25rem; }
    .svc-back-link:hover { color: var(--navy); }

    /* ── Testimonial modal ─────────────────────────────── */
    .testi-modal-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,40,70,0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .testi-modal-overlay.open { opacity: 1; pointer-events: auto; }
    .testi-modal-card {
      background: #ffffff; border-radius: 20px;
      padding: 2.75rem 2.5rem 2.5rem; max-width: 560px; width: 92%;
      box-shadow: 0 40px 100px rgba(0,40,70,0.25), 0 8px 24px rgba(0,40,70,0.1);
      position: relative;
      transform: translateY(20px) scale(0.96);
      transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
    }
    .testi-modal-overlay.open .testi-modal-card { transform: translateY(0) scale(1); }
    .testi-modal-close {
      position: absolute; top: 1rem; right: 1.25rem;
      background: none; border: none; font-size: 1.6rem; line-height: 1;
      color: rgba(0,40,70,0.35); cursor: pointer;
      transition: color 0.18s, transform 0.18s;
    }
    .testi-modal-close:hover { color: var(--navy); transform: scale(1.15); }
    .testi-modal-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
    .testi-modal-avatar {
      width: 68px; height: 68px; border-radius: 50%;
      object-fit: cover; object-position: top center;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(0,40,70,0.14);
    }
    .testi-modal-name { font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
    .testi-modal-cred { font-size: 0.8125rem; color: var(--text-muted); margin-top: 3px; letter-spacing: 0.02em; }
    .testi-modal-stars { color: var(--teal); font-size: 1rem; margin-bottom: 1.1rem; letter-spacing: 0.08em; }
    .testi-modal-quote {
      font-family: 'Cormorant Garamond', serif; font-size: 1.22rem;
      font-style: italic; line-height: 1.72; color: rgba(0,40,70,0.82);
    }

    /* ══ BRAND UPDATE — CVH Brand Manual V1.0 ══════════════════
       Applied over existing rules to enforce new spec without full rewrite.
    ═══════════════════════════════════════════════════════════════ */

    /* ── Pill buttons ───────────────────────────────────────── */
    .btn-cta, .btn-ghost, .btn-schedule, .btn-outline-navy,
    .btn-view-all-services, .btn-contact, .btn-submit,
    .mobile-nav .mobile-nav-cta {
      border-radius: 999px !important;
    }

    /* ── Card radius 22px ───────────────────────────────────── */
    .team-card, .service-card, .hero-card, .blog-card,
    .form-card, .coming-soon-note,
    .svc-modal-card, .testi-modal-card {
      border-radius: 22px !important;
    }
    .tcard { border-radius: 22px; }

    /* ── Form input radius 14px (brand spec "radius-md 14px") ── */
    .form-input { border-radius: 14px; }
    .blog-search-wrap input { border-radius: 14px; }

/* ── Eyebrows on dark (navy) backgrounds: use mint ─────── */
    .hero-eyebrow    { color: var(--mint); }
    .page-eyebrow    { color: var(--mint); }
    .journal-vol     { color: var(--mint); }
    .rec-tag         { color: var(--mint); }

    /* ── Inline links on dark backgrounds: white → white ────── */
    .ftcard-read     { color: rgba(255,255,255,0.82); }
    .ftcard:hover .ftcard-read { color: white; }
    .badge-popular   { background: var(--emerald); }

    /* ── Nav active underline: teal (brand spec) ────────────── */
    .nav-links > li > a::before { background: var(--teal); }
    .nav-links > li > a:hover   { color: var(--teal); }
    .nav-links > li > a.active  { color: var(--teal); }

    /* ── Footer hover: teal/mint instead of gold ────────────── */
    .footer-socials a:hover  { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 2px rgba(0,110,140,0.35); }
    .footer-links a:hover    { color: var(--mint); }
    .footer-contact-line a:hover { color: var(--mint); }
    .footer-bottom a:hover   { color: rgba(255,255,255,0.75); }
    .popular-link:hover      { color: var(--teal); }
    .archive-btn:hover       { color: var(--teal); }
    .archive-months a:hover  { color: var(--teal); }

    /* ── Sidebar filter tab: teal accent ────────────────────── */
    .filter-tab:hover {
      background: rgba(0,110,140,0.06);
      border-color: rgba(0,110,140,0.3);
      box-shadow: 0 6px 18px rgba(0,110,140,0.15), 0 2px 6px rgba(0,0,0,0.05);
    }

    /* ── Back-to-top hover: emerald instead of gold ────────── */
    #back-to-top:hover {
      background: var(--teal-dark);
      box-shadow: 0 0 0 6px rgba(0,110,140,0.14), 0 0 24px rgba(0,110,140,0.45), 0 4px 18px rgba(0,110,140,0.3);
    }
    #back-to-top:focus-visible { outline-color: var(--teal); }

    /* ── Dropdown hover on mint ─────────────────────────────── */
    .dropdown-menu a:hover { background: var(--mint-light); color: var(--navy); }

    /* ── Modal overlay background ───────────────────────────── */
    #page-transition-overlay { background: #ffffff; }

    /* ── Section heading tracking (Montserrat display spec) ─── */
    .hero-heading    { letter-spacing: -0.02em; font-weight: 800; }
    .section-heading { letter-spacing: -0.01em; font-weight: 700; }
    .page-title      { letter-spacing: -0.02em; font-weight: 700; }

    /* ── Eyebrow label spec: Montserrat 600, 0.18em ─────────── */
    .section-eyebrow, .hero-eyebrow, .page-eyebrow,
    .team-role, .bio-role, .press-bar-label,
    .contact-info-label, .journal-vol {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
    }

    /* ═══════════════════════════════════════════════════
       MOBILE — all responsive overrides
       ═══════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Global spacing & type ── */
      body { font-size: 18px; line-height: 1.5; }

      .section-heading { font-size: clamp(1.7rem, 6vw, 2.2rem); margin-bottom: 2rem; }
      .section-subtext { margin-top: -1rem; margin-bottom: 2rem; font-size: 0.9375rem; }

      /* Sections: tighter horizontal padding */
      .hero,
      .team-section,
      .services-section,
      .testimonials-section,
      .faq-section,
      .footer-section { padding-left: 1.25rem; padding-right: 1.25rem; }

      /* ── NAV ── */
      .nav-inner { padding: 0 1.25rem; }

      /* ── HERO ── */
      .hero { padding: 3.5rem 1.25rem 3rem; }
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
      .hero-heading { font-size: clamp(2.4rem, 9vw, 3rem); }
      .hero-right { display: none; } /* hide floating cards — shown via testimonials section below */

      /* ── TEAM ── */
      .team-section { padding: 3.5rem 1.25rem; }
      .team-grid { grid-template-columns: 1fr; max-width: 480px; }
      .team-card img { height: 240px; }

      /* ── HOME SERVICES PREVIEW ── */
      .services-section { padding: 3.5rem 1.25rem; }
      .services-grid { grid-template-columns: 1fr; gap: 0.875rem; }
      .service-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        align-items: center;
        padding: 1rem 1.125rem;
      }
      .service-icon {
        grid-row: 1 / 3;
        grid-column: 1;
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        align-self: center;
      }
      .service-title {
        grid-row: 1;
        grid-column: 2;
        font-size: 1rem;
        margin-bottom: 0.15rem;
      }
      .service-desc { display: none; }
      .service-link {
        grid-row: 2;
        grid-column: 2;
        margin: 0;
      }

      /* ── PRESS BAR ── */
      .press-bar { padding: 2rem 1.25rem; }
      .press-logos { gap: 0; display: grid; grid-template-columns: 1fr 1fr; row-gap: 0.25rem; }
      .press-item { padding: 0.75rem 0.5rem; }

      /* ── TESTIMONIALS ── */
      .testimonials-section { padding: 3.5rem 0 2.5rem; }
      .testimonials-section .section-eyebrow,
      .testimonials-section .section-eyebrow-line,
      .testimonials-section .section-heading,
      .testimonials-section .testi-subtext { padding: 0 1.25rem; }
      .carousel-outer { padding-bottom: 1rem; }
      .tcard { width: 280px; min-width: 280px; }

      /* ── FAQ ── */
      .faq-section { padding: 3.5rem 1.25rem; }

      /* ── FEATURED STORIES ── */
      .testi-featured-grid { grid-template-columns: 1fr !important; }
      .testi-all-grid { grid-template-columns: 1fr !important; }

      /* ── BLOG ── */
      .blog-grid { grid-template-columns: 1fr !important; }
      .articles-grid { grid-template-columns: 1fr !important; }
      .featured-trio { grid-template-columns: 1fr !important; }
      .rec-grid { grid-template-columns: 1fr 1fr !important; }
      .journal-wrap { grid-template-columns: 1fr !important; padding: 1.5rem 1.25rem 3rem; }

      /* ── FOOTER ── */
      .footer-section { padding: 3rem 1.25rem 1.5rem; }
      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding-bottom: 2rem;
      }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
      .footer-bottom-links { flex-wrap: wrap; gap: 1rem; }

      /* ── PAGE HEADERS ── */
      .page-header { padding: 3rem 1.25rem 2rem; }
      .page-title { font-size: clamp(2rem, 7vw, 2.8rem); }
      .page-subtitle { font-size: 0.9375rem; }

      /* ── ABOUT / BIO PAGES ── */
      .bio-layout,
      .bio-cols { flex-direction: column !important; }
      .bio-sidebar { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
      .bio-photo { max-width: 280px; margin: 0 auto 2rem; }
      .bio-chapters { padding: 0 1.25rem; }
      .bio-chapter { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem 0; }
      .bio-chapter-label { min-width: 0; width: 100%; margin-bottom: 0.25rem; }
      .bio-chapter-body { padding-left: 0 !important; }
      .bio-chapter-inner,
      [style*="display:grid"][style*="1fr 1fr"],
      [style*="display: grid"][style*="1fr 1fr"] { display: block !important; }

      /* ── SERVICES PAGE ── */
      .svc-photo-row { grid-template-columns: 1fr !important; }

      /* ── SPEAKING PAGE ── */
      .speaking-media-grid { grid-template-columns: 1fr 1fr !important; }

      /* ── CONTACT PAGE ── */
      .contact-section { grid-template-columns: 1fr !important; gap: 2.5rem !important; padding: 2.5rem 1.25rem; margin: 2rem auto; }
      .contact-wrap { flex-direction: column !important; gap: 2rem !important; }
      .contact-info-col,
      .contact-form-col { width: 100% !important; max-width: 100% !important; }
      .form-row { flex-direction: column !important; gap: 1rem !important; }

      /* ── BACK TO TOP ── */
      #back-to-top { bottom: 1.25rem; right: 1.25rem; }

      /* ── MISC ── */
      .btn-cta, .btn-ghost, .btn-outline-navy { padding: 0.75rem 1.4rem; font-size: 0.8125rem; }
      .section-eyebrow { font-size: 0.8125rem; }
    }

    /* Extra-small phones */
    @media (max-width: 420px) {
      .hero-heading { font-size: clamp(2rem, 9vw, 2.4rem); }
      .team-card img { height: 200px; }
      .rec-grid { grid-template-columns: 1fr !important; }
      .footer-top { grid-template-columns: 1fr; }
    }

/* ==========================================================================
   CVH overrides
   Appended after the ported design so the original stylesheet stays intact
   and every deviation from the approved file is visible in one place.
   ========================================================================== */

/* Footer readability.
   Her update doc asks for "more visible font color" in the footer. Measured
   against the footer background (--navy #002846) the original values were:
     .footer-links a        rgba(255,255,255,0.50)  4.77:1  scrapes WCAG AA
     .footer-socials a      rgba(255,255,255,0.45)  4.13:1  fails AA
     .footer-bottom         rgba(255,255,255,0.28)  2.43:1  fails badly
   Raised so every element clears AA (4.5:1) with room to spare. */
footer { color: rgba(255,255,255,0.78); }
.footer-links a,
.footer-contact-line a { color: rgba(255,255,255,0.78); }        /* 9.6:1 */
.footer-socials a { color: rgba(255,255,255,0.80); }             /* 10.1:1 */
.footer-bottom { color: rgba(255,255,255,0.62); }                /* 6.4:1 */
.footer-bottom a { color: rgba(255,255,255,0.72); }

/* Social icons replaced the "ig"/"fb"/"yt"/"tt" text placeholders, so the
   anchors now hold an SVG rather than a glyph. */
.footer-socials a svg { display: block; }

/* Logo falls back to the site name when no custom logo is set, so the header
   is never empty during the build. */
.nav-logo-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

/* Undo the single-page-app machinery.
   The design was one HTML file that hid every section and revealed the active
   one with JavaScript. Two of those rules make a WordPress site completely
   invisible, because the JS that used to undo them is gone:

     body           { opacity: 0 }     the whole document, faded in on load
     .page-section  { display: none }  every section, shown when routed to

   In WordPress each former section is its own real page, so both must be
   reversed. Kept as overrides rather than edits to the ported stylesheet so the
   original stays a faithful copy of what she approved. */
body { opacity: 1; }
.page-section { display: block; }

/* Testimonial carousel: her doc asks to "enlarge pictures but keep snippet and
   names". Avatars were 44px, which reads as an afterthought next to a named
   Broadway actress or a Pentatonix singer. Taken to 76px, with the card widened
   so the name and credential still sit on one line beside the photo. */
.tcard-avatar { width: 76px; height: 76px; }
.tcard { flex: 0 0 340px; width: 340px; }
.tcard-header { gap: 0.9rem; align-items: center; }

/* The carousel is focusable so keyboard users can pause it. Show that focus
   without the default browser outline fighting the rounded card design. */
.carousel-outer:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.carousel-outer.is-dragging { cursor: grabbing; }
.carousel-outer { cursor: grab; }

@media (max-width: 768px) {
  .tcard { flex: 0 0 280px; width: 280px; }
  .tcard-avatar { width: 60px; height: 60px; }
}

/* Press bar: the design's .press-item was a <div> that opened a modal. Her doc
   asks for "click to content", so it is an <a> now, which inherits the browser's
   default underline and link colour and made the whole bar look like a list of
   raw links. Reset to the design's intended appearance. */
a.press-item { text-decoration: none; color: inherit; }
a.press-item:hover,
a.press-item:focus-visible { text-decoration: none; }
a.press-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }

/* Not every outlet has a logo file. Rather than leave those entries as bare
   text next to real logos, they get a wordmark treatment so the row reads as
   one set. Occupies the same 36px as .press-item-icon so the labels line up. */
.press-item-wordmark {
  display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 0.7rem;
  border: 1px solid rgba(0,40,70,0.22); border-radius: 5px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; line-height: 1; letter-spacing: 0.02em;
  color: rgba(0,40,70,0.72); white-space: nowrap;
}
.press-item:hover .press-item-wordmark {
  border-color: var(--teal); color: var(--navy);
}

/* Journal cards: the design's .blog-title was plain text inside a card whose
   only link was "Read article". The title is a link now so the whole card has
   two ways in, which means resetting the default underline and blue, exactly as
   with a.press-item. */
.blog-title a { text-decoration: none; color: inherit; }
.blog-title a:hover { color: var(--teal); }
.blog-title a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Featured Videos. Carried over from her live home page, restyled into the
   approved palette: her Squarespace version sits on a mint green that appears
   nowhere in this design system. */
.video-section { background: var(--mint-light); padding: 6rem 2.5rem; text-align: center; }
.video-section .section-eyebrow { color: var(--navy); opacity: 0.55; }
.video-section .section-eyebrow-line { background: var(--teal); }

.video-grid {
  display: grid; gap: 2rem; max-width: 900px; margin: 3rem auto 0;
  grid-template-columns: 1fr;
}
.video-embed { margin: 0; }

/* Aspect-ratio box. Keeps the player 16:9 at every width without the iframe
   collapsing or letterboxing, which is what a fixed height would do. */
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 10px 34px rgba(0,40,70,0.18);
}
.video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video-caption {
  margin-top: 1rem; font-family: 'Mulish', sans-serif;
  font-size: 0.9375rem; color: var(--text-muted);
}

@media (max-width: 768px) {
  .video-section { padding: 3.5rem 1.25rem; }
  .video-grid { margin-top: 2rem; }
}

/* Long-form page layout. The design applied these as inline styles on the
   single-page build; extracted to classes so every page shares them. */
.page-feature-image {
  border-radius: 14px; overflow: hidden; position: relative;
  aspect-ratio: 16 / 7; box-shadow: 0 8px 48px rgba(0,40,70,0.13);
}
.page-feature-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block;
}
.page-feature-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,21,48,0.45) 0%, transparent 60%);
}

/* Portraits are taller than the office shot, so a 16:7 crop would slice heads
   off. Bio pages get a portrait-friendly ratio and a top-weighted crop. */
.page-meet-dr-gupta .page-feature-image,
.page-meet-tressa-cox .page-feature-image { aspect-ratio: 4 / 3; }
.page-meet-dr-gupta .page-feature-image img,
.page-meet-tressa-cox .page-feature-image img { object-position: center 22%; }

.page-pullquote { max-width: 780px; margin: 4rem auto 0; padding: 0 3rem; text-align: center; }
.page-pullquote p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 1.45rem; line-height: 1.65; color: var(--navy); font-weight: 500;
}
.page-pullquote-rule { width: 36px; height: 1.5px; background: var(--teal); opacity: 0.5; margin: 0 auto 1.5rem; }
.page-pullquote p + .page-pullquote-rule { margin: 1.5rem auto 0; }

@media (max-width: 768px) {
  .page-pullquote { padding: 0 1.5rem; }
  .page-pullquote p { font-size: 1.15rem; }
  .page-feature-image { aspect-ratio: 4 / 3; }
}

/* Contact page. The design applied these as inline styles inside the
   single-page build; extracted so the template stays readable. */
.contact-hours { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(0,40,70,0.1); }
.contact-hours-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.5rem;
  font-family: 'Mulish', sans-serif; font-size: 1rem;
}
.contact-hours-day { color: var(--navy); font-weight: 500; }
.contact-hours-time { color: rgba(0,40,70,0.65); }
.contact-hours-note { font-family: 'Mulish', sans-serif; font-size: 0.8125rem; color: rgba(0,40,70,0.45); margin-top: 0.75rem; }

.contact-proof { margin-top: 2rem; background: #fff; border-radius: 10px; padding: 1.5rem 1.75rem; }
.contact-proof-stats { display: flex; gap: 2rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.contact-stat-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1; }
.contact-stat-label { font-family: 'Mulish', sans-serif; font-size: 0.8125rem; color: rgba(0,40,70,0.55); letter-spacing: 0.05em; text-transform: uppercase; }
.contact-proof-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--navy); margin: 0; }
.contact-proof-cite { display: block; margin-top: 0.6rem; font-family: 'Mulish', sans-serif; font-size: 0.8125rem; color: rgba(0,40,70,0.55); font-style: normal; }

/* Office gallery. One lead image with two beneath, so the column has a focal
   point rather than three equal tiles competing. */
.contact-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.contact-gallery-item { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.contact-gallery-item.is-lead { grid-column: 1 / -1; aspect-ratio: 16/9; }
.contact-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact-cta-card {
  margin-top: 1.5rem; background: var(--navy); color: #fff;
  border-radius: 12px; padding: 2rem 1.75rem; text-align: center;
}
.contact-cta-card h3 { font-size: 1.4rem; color: #fff; margin-bottom: 0.5rem; }
.contact-cta-card p { font-family: 'Mulish', sans-serif; font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,0.78); margin-bottom: 1.5rem; }
.contact-cta-card .btn-cta { display: inline-block; }
.contact-cta-mail { display: block; margin-top: 1rem; font-family: 'Mulish', sans-serif; font-size: 0.9375rem; color: rgba(255,255,255,0.78); text-decoration: none; }
.contact-cta-mail:hover { color: #fff; text-decoration: underline; }

@media (max-width: 768px) {
  .contact-gallery-item.is-lead { aspect-ratio: 4/3; }
}

/* CV link on Dr. Gupta's page.
   .bio-chapters already carries margin-bottom: 5rem, so an inline top margin on
   this block stacked with it and left ~136px of empty white before the button,
   while the button itself sat flush against the footer. Tighten the gap above
   and give it real breathing room below. */
.page-cv-cta { text-align: center; margin: 0 auto 4.5rem; }
.bio-chapters:has(+ .page-cv-cta) { margin-bottom: 2.5rem; }

@media (max-width: 768px) {
  .page-cv-cta { margin-bottom: 3rem; }
}

/* ==========================================================================
   Readability pass
   Her doc, line 3: "Improve font size and readability" across all pages.

   Audited the ported stylesheet: 102 of its 156 sized rules were 13px or
   smaller, and the most common size on the whole site was 12px. The design
   sets intro text at 20px but drops actual reading content to 13-14px, which
   photographs well in a mockup and reads poorly on a real page. For a practice
   whose patients are frequently older, anxious, and researching a voice
   problem, that is the wrong trade.

   Content text is raised to a 16px floor, secondary text to 14px, keeping the
   design's proportions and hierarchy intact. Headings and hero text are
   already generous and are left alone.
   ========================================================================== */

/* Primary reading content */
.bio-chapter-body { font-size: 1.0625rem; line-height: 1.85; }   /* 14.4 -> 17px */
.service-desc     { font-size: 1rem;      line-height: 1.75; }   /* 13.3 -> 16px */
.faq-answer       { font-size: 1.03125rem; line-height: 1.8; }   /* 14.0 -> 16.5px */
.faq-btn          { font-size: 1.0625rem; }
.contact-row-val  { font-size: 1rem;      line-height: 1.7; }    /* 14.1 -> 16px */
.tcard-cred       { font-size: 0.9375rem; }
.tcard-name       { font-size: 1rem; }

/* Secondary text: still smaller than body, no longer squinting territory */
.team-bio           { font-size: 1rem; line-height: 1.75; } /* 13.3 -> 15.5px */
.footer-links a     { font-size: 0.9375rem; line-height: 1.9; }    /* 12.5 -> 14px */
.footer-brand p     { font-size: 0.9375rem; line-height: 1.75; }   /* 12.5 -> 14px */
.footer-contact-line { font-size: 0.9375rem; line-height: 1.85; }
.footer-col-title   { font-size: 0.9375rem; }                     /* 9.9 -> 13px */
.contact-hours-grid { font-size: 1rem; }                     /* 14.4 -> 15px */
.blog-date          { font-size: 0.9375rem; }
.blog-read,
.service-link,
.team-link,
.tcard-link         { font-size: 0.9375rem; }                     /* 10.9 -> 13px */
.hero-locations     { font-size: 0.9375rem; }
.team-role-sub      { font-size: 0.8125rem; }                       /* 10.1 -> 12px */

/* Line length. .bio-chapters is 960px wide with a 180px label column, leaving
   a ~780px measure. At 17px that runs to roughly 95 characters per line, well
   past the 60-75 that reads comfortably. Capping the body column pulls it back
   without disturbing the grid. */
.bio-chapter-body { max-width: 68ch; }

/* Mobile. The design collapses .bio-chapter to a single column, so the label
   and body stack; the body then needs the full width rather than a ch cap. */
@media (max-width: 768px) {
  .bio-chapter-body { max-width: none; font-size: 1.0625rem; }
  .service-desc     { font-size: 1rem; }
  .footer-links a   { font-size: 1rem; line-height: 2; }
  .footer-contact-line { font-size: 1rem; }
}

/* Readability pass, part two: small labels.

   The design has 68 rules under 12px. Most are uppercase, letterspaced eyebrows
   and tags, which is a legitimate typographic idiom at that size and is left
   alone. The exceptions are elements carrying real information, where small
   type stops being a style choice.

   The worst was .bio-chapter-label at 8.64px. That is the section heading on
   every bio page ("The Beginning", "Today"), rendering smaller than anything
   else on the site. It was missed on the first pass because the audit filtered
   out selectors containing "label" as presumed UI chrome. */

/* Carries information: raised to a readable floor */
.bio-chapter-label,
#page-speaking-engagements .bio-chapter-label { font-size: 0.9375rem; }  /* 8.6 -> 13px */
.bio-chapter-subtitle { font-size: 0.8125rem; }
.bio-cred-label       { font-size: 0.8125rem; }    /* 9.1  -> 12px */
.contact-row-label    { font-size: 0.9375rem; }  /* 10.4 -> 13px */
.art-byline           { font-size: 0.9375rem; }  /* 10.6 -> 13px */
.art-img-caption      { font-size: 0.9375rem; }  /* 9.9  -> 13px */
.article-card-date    { font-size: 0.9375rem; }  /* 10.9 -> 13px */
.form-label           { font-size: 0.9375rem; }   /* 10.9 -> 14px, form usability */

/* Decorative eyebrows and tags: kept small by design, lifted off the floor */
.section-eyebrow,
.page-eyebrow,
.press-bar-label,
.press-item-label,
.blog-tag,
.rec-eyebrow,
.journal-tagline,
.sidebar-label,
.art-footer-eyebrow   { font-size: 0.8125rem; } /* 9.6 -> 11.5px */

/* Buttons were 11.2px. Uppercase letterspaced button text is a design idiom,
   but "Book a Consultation" is the primary conversion point on a medical
   practice site and should not be the smallest text on the page. */
.btn-cta,
.btn-ghost,
.btn-schedule,
.btn-submit,
.btn-view-all-services { font-size: 0.9375rem; }  /* 11.2 -> 13px */

@media (max-width: 768px) {
  .btn-cta, .btn-ghost, .btn-schedule, .btn-submit { font-size: 0.9375rem; }
}

/* ── Revision round 1, requested 29 Aug ─────────────────────────────────── */

/* Hero image. Her doc asked for "a movie image with look and feel of music
   without distracting from text", and on review she asked for something more
   noticeably thematic. This is her own photograph of a stethoscope and
   microphone on piano keys: medicine, voice and music in one frame.

   The navy gradient over the top is doing two jobs. It keeps the white headline
   at full contrast, and it hides the softness of an 800x533 source stretched
   across a wide viewport. If she sends a larger original the overlay can be
   lightened and more of the photograph will show. */
.hero {
  background-color: var(--navy);
  background-image:
    linear-gradient(120deg, rgba(0,21,48,0.94) 0%, rgba(0,40,70,0.86) 45%, rgba(0,40,70,0.72) 100%),
    var(--hero-image, none);
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
}

/* Team photographs. Her note: "show more of us rather than just our heads, make
   pic box longer". The design fixed these at 270px tall and cropped from the
   very top, which framed both of them as head-and-shoulders. Taller box, and
   the crop moved down so the portrait is read as a person rather than a face. */
.team-card img { height: 420px; object-position: center 18%; }

/* "As Seen On" logos, enlarged at her request. */
.press-logo-img { max-height: 56px; max-width: 168px; }
.press-item-icon { height: 56px; }
.press-item-wordmark { height: 56px; font-size: 1.2rem; padding: 0 1rem; }
.press-logos { gap: 3rem 3.5rem; }

@media (max-width: 900px) {
  .team-card img { height: 340px; }
}
@media (max-width: 768px) {
  .hero { background-position: center 60%; }
  .team-card img { height: 300px; }
  .press-logo-img { max-height: 44px; max-width: 130px; }
  .press-item-icon, .press-item-wordmark { height: 44px; }
  .press-item-wordmark { font-size: 1rem; }
}

/* ── Revision round 2, requested 31 Aug ─────────────────────────────────── */

/* Bio page intro card.
   Her note: the pages were "image-forward", with a large banner photograph and
   the name floating above it, unattached. This puts the portrait and the name
   in one card so they read as a single unit, and takes the photograph down to a
   supporting size rather than the dominant element. */
.bio-intro { max-width: var(--content-max); margin: 3rem auto 0; padding: 0 3rem; }
.bio-intro-card {
  display: grid; grid-template-columns: 300px 1fr; gap: 2.75rem;
  align-items: center; background: #fff; border-radius: 16px;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 2px 22px rgba(0,40,70,0.07), 0 1px 4px rgba(0,40,70,0.04);
}
.bio-intro-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
.bio-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.bio-intro-text .page-eyebrow { margin-bottom: 0.5rem; }
.bio-intro-text .page-title { margin-bottom: 0.75rem; }
.bio-intro-text .page-subtitle { margin: 0; }

/* Chapter labels. She said the left column still felt small after the first
   pass. It was 13px; the label is a section heading and now reads as one. */
.bio-chapter-label,
#page-speaking-engagements .bio-chapter-label { font-size: 1rem; letter-spacing: 0.1em; }
.bio-chapter-subtitle { font-size: 0.9375rem; line-height: 1.5; }

/* Links inside chapter bodies were flattened to plain text by the original
   extraction. Now real links, styled to match the rest of the page. */
.bio-chapter-body a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(0,110,140,0.32); }
.bio-chapter-body a:hover { color: var(--navy); border-bottom-color: var(--navy); }

@media (max-width: 860px) {
  .bio-intro { padding: 0 1.25rem; margin-top: 2rem; }
  .bio-intro-card { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; text-align: center; }
  .bio-intro-photo { max-width: var(--content-max); margin: 0 auto; }
}

/* Bio card colour correction.
   .page-title, .page-subtitle and .page-eyebrow were all designed to sit on the
   navy .page-hero, so they carry white and mint colours. Dropped onto a white
   card the title rendered white-on-white: "Dr. Reena" vanished and only the
   teal <em> "Gupta" survived, and the subtitle disappeared entirely.
   Everything inside the card is recoloured for a light background. */
.bio-intro-card .page-title {
  color: var(--navy);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.08;
}
.bio-intro-card .page-title em { color: var(--teal); }
.bio-intro-card .page-subtitle {
  color: var(--text-muted);
  font-size: 1rem; line-height: 1.7;
  max-width: 46ch; margin: 0;
}
.bio-intro-card .page-eyebrow { color: var(--teal); opacity: 1; }

/* Contact gallery: two buildings, one per location, each captioned. Replaces
   the earlier three-up interior grid with a lead image. */
.contact-gallery { grid-template-columns: 1fr; gap: 1.25rem; }
.contact-gallery-item { aspect-ratio: auto; border-radius: 12px; overflow: visible; }
.contact-gallery-item img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: 12px; display: block;
}
.contact-gallery-item figcaption {
  margin-top: 0.6rem;
  font-family: 'Montserrat', sans-serif; font-size: 0.8125rem;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(0,40,70,0.55);
}

/* Hero, second revision.
   She asked for a stage-performance feel and said the previous image was "not
   visible enough". This is her own photograph of a performer alone on a lit
   stage with the audience in silhouette.

   The overlay is much lighter than before (0.94 -> 0.58 at its darkest) so the
   photograph actually reads. It is angled rather than flat: heaviest on the
   left where the headline sits, clearing to the right where the stage and
   audience are. The image is dark to begin with, so white text still holds
   comfortable contrast without burying the picture. */
.hero {
  background-image:
    linear-gradient(100deg,
      rgba(0,21,48,0.88) 0%,
      rgba(0,21,48,0.74) 32%,
      rgba(0,40,70,0.50) 62%,
      rgba(0,40,70,0.38) 100%),
    var(--hero-image, none);
  background-position: center 42%;
}

@media (max-width: 900px) {
  /* Single column on mobile, so text crosses the whole width and needs an even
     wash rather than an angled one. */
  .hero {
    background-image:
      linear-gradient(rgba(0,21,48,0.86), rgba(0,21,48,0.80)),
      var(--hero-image, none);
    background-position: center 45%;
  }
}

/* Contact gallery overlap fix.
   The earlier three-up rule set .contact-gallery-item img { height: 100% }.
   When the figure became content-sized (aspect-ratio: auto) that turned
   circular: the image sized itself to 100% of a parent whose height depended on
   the image. The browser resolved it by letting the image overflow the figure,
   printing the next building straight over the "Beverly Hills, California"
   caption. height: auto breaks the loop and lets aspect-ratio do the work.

   Audited the whole stylesheet for the same pattern, a height of 100% paired
   with an aspect-ratio on a re-declared selector, and this is the only one. */
.contact-gallery-item img { height: auto; }

/* Press items with no destination. They keep the badge appearance but drop the
   affordances that promise a click: no lift, no shadow, no pointer. */
.press-item.is-static { cursor: default; }
.press-item.is-static:hover { transform: none; background: none; box-shadow: none; }
.press-item.is-static:hover .press-item-label { color: rgba(0,40,70,0.55); }
.press-item.is-static:hover .press-item-wordmark { border-color: rgba(0,40,70,0.22); color: rgba(0,40,70,0.72); }

/* ── Revision round 3, requested 31 Aug ─────────────────────────────────── */

/* Chapter headings, third pass. She flagged the small italic line specifically:
   "Where She Is Inspired is still very small, and every similar section". That
   is .bio-chapter-subtitle, which was 13px. Both it and the heading above go up
   again, and the left column widens so the longer labels do not wrap awkwardly
   at the larger size. Applies to About CVH, both bio pages, and Speaking
   Engagements when it is built. */
.bio-chapter-label,
#page-speaking-engagements .bio-chapter-label { font-size: 1.0625rem; letter-spacing: 0.08em; }
.bio-chapter-subtitle { font-size: 1rem; line-height: 1.55; margin-top: 0.35rem; }
.bio-chapter { grid-template-columns: 220px 1fr; }

/* Hero, third pass: a singer rather than a speaker, at her request. The subject
   sits right of centre with dark space on the left, so the frame is anchored
   right and the headline falls over the darkest part of the photograph. */
/* The source is pre-cropped wide with empty space on the left, so the frame
   sits centred and the singer naturally falls right of the headline. A square
   source made background-position X a no-op: cover scaled it to exactly the
   container width, leaving no horizontal overflow to shift. */
.hero { background-position: center 38%; }

@media (max-width: 900px) {
  .bio-chapter { grid-template-columns: 1fr; }
  .hero { background-position: 62% 40%; }
}

/* ── Revision round 4, requested 31 Aug ─────────────────────────────────── */

/* Chapter subtitle, third increase. She has now flagged this line three times,
   naming each instance: "Where She Is Inspired", "Where She Is Trained",
   "Where She Helps Vocal Athletes", "and the Human Voice", "Expertise",
   "Care", "to Our Team". Nudging by a point each round clearly was not
   landing, so this is a deliberate jump from 15px to 18px. */
.bio-chapter-subtitle { font-size: 1.125rem; line-height: 1.5; margin-top: 0.45rem; }

/* Her own Castle Connolly logo is a solid navy square rather than a transparent
   wordmark, so it needs to read as a deliberate badge among the other marks
   instead of a stray dark block. Rounded, square, and matched in height to the
   wordmark treatment. */
.press-item-icon img[src*="castle-connolly-badge"] {
  max-height: 56px; max-width: 56px;
  border-radius: 8px; display: block;
}

/* Press bar hover, corrected.
   Killing the hover entirely on the four items without destinations made the
   row look half broken: five badges lifted, four sat dead, with no visible
   reason. Every badge now responds to hover, so the row feels like one set. The
   difference is in the KIND of response, which matches what actually happens on
   click:

     linked  -> lifts, shadow, pointer cursor. It goes somewhere.
     static  -> label darkens and the mark brightens in place. It acknowledges
                you without promising a destination.

   The affordance still tells the truth; it just no longer reads as a fault. */
.press-item.is-static:hover {
  transform: none;
  box-shadow: none;
  background: rgba(0,110,140,0.045);
}
.press-item.is-static:hover .press-item-label { color: rgba(0,40,70,0.8); }
.press-item.is-static:hover .press-item-wordmark {
  border-color: rgba(0,110,140,0.45);
  color: var(--navy);
}
.press-item.is-static:hover .press-logo-img { opacity: 1; }

/* Linked badges get a clearer cue that they lead somewhere: the label picks up
   the teal used for links everywhere else on the site. */
a.press-item:hover .press-item-label { color: var(--teal); }

/* ── Milestone 3: service pages ─────────────────────────────────────────── */

/* .svc-body retired: the page is sectioned now, see 'Service page sections'. */
.svc-body h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.9rem; color: var(--navy); line-height: 1.25;
  margin: 2.75rem 0 0.9rem;
}
.svc-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  margin: 2rem 0 0.6rem;
}
.svc-body p {
  font-size: 1.0625rem; line-height: 1.85; color: var(--text-muted);
  margin-bottom: 1.1rem;
}
.svc-body h2 + p, .svc-body h3 + p { margin-top: 0; }
.svc-list { margin: 0 0 1.4rem 0; padding: 0; list-style: none; }
.svc-list li {
  font-size: 1.0625rem; line-height: 1.75; color: var(--text-muted);
  padding-left: 1.6rem; position: relative; margin-bottom: 0.6rem;
}
.svc-list li::before {
  content: ''; position: absolute; left: 0; top: 0.7em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal); opacity: 0.6;
}
.svc-body blockquote {
  border-left: 2px solid var(--teal); padding-left: 1.4rem; margin: 2rem 0;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 1.3rem; line-height: 1.6; color: var(--navy);
}

.svc-video { max-width: 860px; margin: 4rem auto 0; padding: 0 3rem; text-align: center; }
.svc-video h2 { font-size: 1.7rem; color: var(--navy); margin-bottom: 1.5rem; }

.svc-cta {
  max-width: 780px; margin: 4.5rem auto 0; padding: 2.75rem 2.5rem;
  background: var(--mint-light); border-radius: 14px; text-align: center;
}
.svc-cta h2 { font-size: 1.7rem; color: var(--navy); margin-bottom: 0.6rem; }
.svc-cta p { font-size: 1rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 1.75rem; }
.svc-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.svc-related { max-width: var(--content-max); margin: 5rem auto 5rem; padding: 0 3rem; text-align: center; }
.svc-related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem; margin-top: 1.75rem;
}
.svc-related-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.15rem; background: #fff; border: 1px solid rgba(0,40,70,0.09);
  border-radius: 12px; text-decoration: none; color: var(--navy);
  font-size: 1rem; text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.svc-related-item:hover {
  border-color: var(--teal); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,40,70,0.07);
}
.svc-related-icon { flex-shrink: 0; width: 30px; height: 30px; color: var(--teal); }
.svc-related-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 768px) {
  .svc-body, .svc-video, .svc-related { padding: 0 1.25rem; }
  .svc-body { margin-top: 2.5rem; }
  .svc-cta { margin-left: 1.25rem; margin-right: 1.25rem; padding: 2rem 1.5rem; }
  .svc-body h2 { font-size: 1.6rem; }
}

/* Page hero subtitle was 14px, which is small under a 50px title and small in
   absolute terms. She has raised text size three times on other pages, so this
   is raised before she has to ask a fourth. */
.page-subtitle { font-size: 1.0625rem; line-height: 1.65; }
@media (max-width: 768px) { .page-subtitle { font-size: 1rem; } }

/* Linked article series on the Annual Vocal Physical page. Numbered, because
   the parts are meant to be read in order. */
.svc-series { max-width: 780px; margin: 4rem auto 0; padding: 0 3rem; text-align: center; }
.svc-series h2 { font-size: 1.7rem; color: var(--navy); margin-bottom: 1.75rem; }
.svc-series-list { list-style: none; margin: 0; padding: 0; text-align: left; counter-reset: none; }
.svc-series-list li { margin-bottom: 0.6rem; }
.svc-series-list a {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 1.35rem; background: #fff;
  border: 1px solid rgba(0,40,70,0.09); border-radius: 12px;
  text-decoration: none; color: var(--navy);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.svc-series-list a:hover {
  border-color: var(--teal); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,40,70,0.07);
}
.svc-series-num {
  flex-shrink: 0; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem; color: var(--teal); opacity: 0.65; min-width: 2ch;
}
.svc-series-label { flex: 1; font-size: 1rem; line-height: 1.5; }
.svc-series-arrow { flex-shrink: 0; color: var(--teal); }

@media (max-width: 768px) {
  .svc-series { padding: 0 1.25rem; }
  .svc-series a { padding: 0.85rem 1rem; gap: 0.75rem; }
  .svc-series-label { font-size: 1rem; }
}

/* All Services hub. Grouped by intent rather than listed flat: someone arriving
   hoarse and someone booking a yearly check want different things, and eight
   equal cards make them hunt. */
.all-services { max-width: var(--content-max); margin: 3.5rem auto 0; padding: 0 3rem; }
.svc-group { margin-bottom: 3.5rem; }
.svc-group-head { text-align: center; margin-bottom: 1.75rem; }
.svc-group-head h2 { font-size: 1.8rem; color: var(--navy); margin-bottom: 0.4rem; }
.svc-group-head p { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }

/* The design's .service-card was a div opening a modal. As a link it needs the
   default underline and colour reset, the same trap hit on the press items. */
a.service-card { text-decoration: none; color: inherit; display: block; }
a.service-card:hover { text-decoration: none; }
a.service-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.all-services .service-desc { min-height: 0; }
.all-services .service-link { display: inline-block; margin-top: 0.9rem; }

@media (max-width: 768px) {
  .all-services { padding: 0 1.25rem; margin-top: 2.5rem; }
  .svc-group { margin-bottom: 2.5rem; }
}

/* Journal archive. Empty until the articles import in Milestone 5, so the empty
   state says what is happening rather than showing a blank page. */
.content-area .blog-grid { max-width: var(--content-max); margin: 3.5rem auto 0; padding: 0 3rem; }
.journal-empty {
  max-width: 640px; margin: 4rem auto 6rem; padding: 0 1.5rem;
  text-align: center; font-size: 1.0625rem; line-height: 1.8; color: var(--text-muted);
}
.content-area .pagination,
.content-area .nav-links { text-align: center; margin: 3rem auto 5rem; }
.content-area .page-numbers {
  display: inline-block; padding: 0.5rem 0.9rem; margin: 0 0.15rem;
  border-radius: 8px; text-decoration: none; color: var(--navy); font-size: 1rem;
}
.content-area .page-numbers.current { background: var(--navy); color: #fff; }
.content-area .page-numbers:hover:not(.current) { background: var(--mint); }

@media (max-width: 768px) { .content-area .blog-grid { padding: 0 1.25rem; } }

/* ── Service page media, revision round 4 ───────────────────────────────── */

/* Videos. A single video sits full width; two consecutive ones sit side by side
   because on her Medical Evaluation page they are a comparison, captioned
   "older technology" against "cutting-edge technology". Stacked, the comparison
   is lost. */
.svc-video-row { margin: 2.5rem 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.svc-video-row.is-comparison { grid-template-columns: 1fr 1fr; }
.svc-video-item { margin: 0; }
.svc-video-item figcaption {
  margin-top: 0.7rem; font-family: 'Montserrat', sans-serif;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(0,40,70,0.55); text-align: center;
}

.svc-image { margin: 2.5rem 0; }
.svc-image img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Calls to action sit between sections in her originals, not only at the end. */
.svc-inline-cta { margin: 2.25rem 0; text-align: center; }

@media (max-width: 760px) {
  /* Side by side would make each video too small to read on a phone. */
  .svc-video-row.is-comparison { grid-template-columns: 1fr; }
  .svc-video-row, .svc-image { margin: 1.75rem 0; }
}

/* ── Header sizing, requested 2 Sept, enlarged again 5 Sept ─────────────── */

/* Logo, navigation and the Schedule button all enlarged at her request. The bar
   grows with them: keeping 64px would have crowded the logo against its own
   edges. She has asked for a bigger logo three times now, so this is a decisive
   step rather than another nudge. */
nav .nav-inner { height: 96px; }
.nav-logo img { height: 68px; }
.nav-links a { font-size: 1rem; letter-spacing: 0.06em; }
.btn-schedule { font-size: 0.9375rem; padding: 0.7rem 1.6rem; }
.nav-dropdown > a::after { font-size: 0.8125rem; }

/*
 * THE DROPDOWN MUST STAY REACHABLE. Do not hardcode this offset again.
 *
 * The menu sits below the bar with a small gap, and .dropdown-menu::before is an
 * invisible strip bridging that gap so the cursor keeps :hover while travelling
 * from the link down to the menu. The two measurements have to agree.
 *
 * An earlier version pinned the menu to a literal `top: 82px` when the bar was
 * enlarged. Because .nav-dropdown is only as tall as its own text, that opened a
 * gap far wider than the 14px bridge, so hover was lost in mid-air: the menu
 * vanished before the pointer arrived and not one service page could be reached
 * from the header. Stretching the item to the full height of the bar makes
 * `100%` mean the bottom of the bar, so the offset now follows any future header
 * size on its own.
 */
.nav-dropdown { align-self: stretch; display: flex; align-items: center; }
.dropdown-menu { top: calc(100% + 10px); }
.dropdown-menu::before { top: -10px; height: 10px; }

@media (max-width: 900px) {
  nav .nav-inner { height: 76px; }
  .nav-logo img { height: 54px; }
}

/* Q&A headings. Her Laryngeal Massage page is built almost entirely as
   question-and-answer, and rendered as plain headings that rhythm disappears,
   which is what she meant by it not converting well. The mark before each
   question makes the pattern visible at a glance. */
.svc-question {
  position: relative; padding-left: 1.9rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65rem; line-height: 1.3; color: var(--navy);
  margin: 2.75rem 0 0.9rem;
}
.svc-question::before {
  content: 'Q'; position: absolute; left: 0; top: 0.15em;
  font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 700;
  color: var(--teal); letter-spacing: 0.04em;
}
.svc-question + p { margin-left: 1.9rem; }

/* Closing panel on Singer's Tonsillectomy: colour difference, bold points and
   an underlined heading, all as she described. */
.svc-highlight {
  background: var(--mint-light); border-radius: 14px;
  padding: 2.75rem 2.5rem 2rem; margin: 3rem 0;
}
.svc-highlight > h2:first-child {
  margin-top: 0; padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--teal);
  display: inline-block;
}
.svc-highlight .svc-image { margin: 1.75rem 0; }
.svc-point { margin-bottom: 1.1rem; }
.svc-point strong { color: var(--navy); font-weight: 600; }

@media (max-width: 768px) {
  .svc-highlight { padding: 1.75rem 1.35rem 1.25rem; margin: 2rem 0; }
  .svc-question { font-size: 1.4rem; padding-left: 1.6rem; }
  .svc-question + p { margin-left: 0; }
}

/* Service cards that carry a photograph, matching her own All Services page. */
.service-card.has-image { padding-top: 0; overflow: hidden; }
.service-card-image { margin: -1px -1px 1.5rem; aspect-ratio: 16/9; overflow: hidden; }
.service-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * Photographic band. Her Laryngeal Massage page closes on a dark concert photo
 * with the symptom list over it. The image is decorative and already dark, but
 * it carries a bright stage flare, so a gradient scrim keeps the text legible
 * over the light part rather than trusting the photograph.
 */
.svc-band {
  position: relative; isolation: isolate;
  max-width: 780px; margin: 3rem auto; padding: 3rem 2.5rem 2.5rem;
  border-radius: 14px; overflow: hidden;
  background-image: var(--band-image);
  background-size: cover; background-position: center;
}
.svc-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 31, 51, 0.82), rgba(11, 31, 51, 0.9));
}
.svc-band .svc-question,
.svc-band h2, .svc-band h3 { color: #fff; }
.svc-band p, .svc-band li { color: rgba(255, 255, 255, 0.9); }
.svc-band .svc-question::before { color: var(--teal); opacity: 1; }
.svc-band .svc-list li::marker { color: var(--teal); }
.svc-band > :first-child { margin-top: 0; }
.svc-band > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .svc-band { padding: 2.25rem 1.5rem 2rem; border-radius: 10px; }
}

/* ── Testimonials page ──────────────────────────────────────────────────── */

.testi-grid-wrap { max-width: var(--content-max); margin: 3.5rem auto 0; padding: 0 2.5rem; }
.testi-count {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 1.75rem;
}

/*
 * Her quotes vary from a couple of lines to a page and a half, so a fixed-row
 * grid leaves ragged whitespace. Columns let each card take the height it
 * needs, which suits a wall of quotes.
 */
.testi-grid { columns: 3; column-gap: 1.75rem; }
.testi-card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%;
  background: #fff; border: 1px solid rgba(0, 40, 70, 0.09);
  border-radius: 14px; padding: 1.75rem 1.6rem 1.5rem;
  margin-bottom: 1.75rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.testi-card:hover {
  box-shadow: 0 10px 34px rgba(0, 40, 70, 0.09);
  transform: translateY(-2px);
}

.testi-card-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.testi-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--mint-light);
}
.testi-avatar.is-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem; color: var(--teal); background: var(--mint-light);
}
.testi-meta { min-width: 0; }
.testi-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem; line-height: 1.2; color: var(--navy); margin: 0;
}
.testi-role, .testi-stage {
  font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--text-muted);
  margin: 0.2rem 0 0;
}
.testi-stage { font-style: italic; opacity: 0.85; }

.testi-quote {
  margin: 0; padding: 0; border: 0;
  font-size: 1rem; line-height: 1.75; color: var(--ink);
}
.testi-quote::before { content: '\201C'; }
.testi-quote::after  { content: '\201D'; }

.testi-more {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--teal); text-decoration: none;
}
.testi-more:hover { color: var(--navy); text-decoration: underline; }

.testi-disclaimer {
  max-width: 780px; margin: 2.5rem auto 0; padding: 0 2.5rem 1rem;
  font-size: 0.8125rem; line-height: 1.7; color: var(--text-muted);
  text-align: center; font-style: italic;
}

@media (max-width: 1024px) { .testi-grid { columns: 2; } }
@media (max-width: 680px) {
  .testi-grid { columns: 1; }
  .testi-grid-wrap { padding: 0 1.25rem; }
  .testi-disclaimer { padding: 0 1.25rem 1rem; }
}

/* ── One patient's story ────────────────────────────────────────────────── */

.page-hero.is-compact { padding-top: 3.5rem; padding-bottom: 3rem; }

.story { max-width: var(--content-max); margin: 3rem auto 0; padding: 0 2.5rem; }
.story-head { text-align: center; margin-bottom: 2.25rem; }
.story-portrait { margin: 0 auto 1rem; width: 140px; }
.story-portrait img {
  width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 6px 26px rgba(0, 40, 70, 0.14);
}
.story-stage {
  font-size: 0.9375rem; font-style: italic; color: var(--text-muted); margin: 0;
}

.story-quote { margin: 0; padding: 0; border: 0; }
.story-quote p {
  font-size: 1.05rem; line-height: 1.85; color: var(--ink); margin: 0 0 1.35rem;
}
.story-quote p:first-child::before { content: '\201C'; }
.story-quote p:last-child::after   { content: '\201D'; }

.story-attrib {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem; color: var(--navy); margin: 1.75rem 0 0; text-align: right;
}
.story-back { max-width: var(--content-max); margin: 2rem auto 0; padding: 0 2.5rem; }
.story-back a {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--teal); text-decoration: none;
}
.story-back a:hover { color: var(--navy); text-decoration: underline; }

@media (max-width: 680px) {
  .story, .story-back { padding: 0 1.25rem; }
  .story-attrib { text-align: left; }
}

/* ── Careers ────────────────────────────────────────────────────────────── */

.careers { max-width: var(--content-max); margin: 3.5rem auto 0; padding: 0 2.5rem; }
.careers-intro {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem; color: var(--navy); margin: 0 0 2.5rem; text-align: center;
}

.job {
  background: #fff; border: 1px solid rgba(0, 40, 70, 0.1);
  border-radius: 14px; padding: 2.25rem 2.25rem 2rem; margin-bottom: 2rem;
}
.job-head { border-bottom: 2px solid var(--mint); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.job-title { font-size: 1.6rem; line-height: 1.25; color: var(--navy); margin: 0; }

.job-body p { font-size: 1rem; line-height: 1.8; color: var(--ink); margin: 0 0 1.1rem; }
.job-section {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  margin: 1.9rem 0 0.8rem;
}
.job-list { margin: 0 0 1.3rem; padding-left: 1.2rem; }
.job-list li {
  font-size: 1rem; line-height: 1.7; color: var(--ink); margin-bottom: 0.45rem;
}
.job-list li::marker { color: var(--teal); }
.job-apply { font-size: 1rem; }
.job-apply a, .job-body a { color: var(--teal); }

.job-cta { display: inline-block; margin-top: 0.75rem; }

@media (max-width: 680px) {
  .careers { padding: 0 1.25rem; }
  .job { padding: 1.6rem 1.35rem 1.5rem; }
  .job-title { font-size: 1.35rem; }
}

/* ── Speaking Engagements ───────────────────────────────────────────────── */

.speaking { max-width: var(--content-max); margin: 3.5rem auto 0; padding: 0 2.5rem; }
.spk-section { margin-bottom: 3rem; }
.spk-heading {
  font-size: 1.75rem; color: var(--navy);
  padding-bottom: 0.6rem; margin: 0 0 1.25rem;
  border-bottom: 2px solid var(--mint);
}
.spk-para { font-size: 1rem; line-height: 1.85; color: var(--ink); margin: 0 0 1.15rem; }
.spk-para a, .spk-press a { color: var(--teal); }

.spk-topics { list-style: none; margin: 0; padding: 0; }
.spk-topics li {
  position: relative; padding-left: 1.6rem; margin-bottom: 1rem;
  font-size: 1rem; line-height: 1.7; color: var(--ink);
}
.spk-topics li::before {
  content: ''; position: absolute; left: 0; top: 0.6rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.spk-topics strong { color: var(--navy); display: block; margin-bottom: 0.15rem; }

.spk-group { display: grid; grid-template-columns: 132px 1fr; gap: 0 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(0, 40, 70, 0.07); }
.spk-group:last-child { border-bottom: 0; }
.spk-group-label {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal);
  margin: 0.28rem 0 0; line-height: 1.4;
}
.spk-entries { list-style: none; margin: 0; padding: 0; }
.spk-entry {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  font-size: 1rem; line-height: 1.6; color: var(--ink);
  padding: 0.3rem 0;
}
.spk-entry-name a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(0, 110, 140, 0.4); }
.spk-entry-name a:hover { color: var(--teal); border-bottom-color: var(--teal); }
.spk-entry-note { font-size: 0.9375rem; color: var(--text-muted); }
.spk-episodes { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.spk-episodes-label {
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.spk-episode {
  font-size: 0.8125rem; line-height: 1; padding: 0.28rem 0.5rem;
  border: 1px solid rgba(0, 110, 140, 0.28); border-radius: 5px;
  color: var(--teal); text-decoration: none; white-space: nowrap;
}
.spk-episode:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.spk-episode.is-static { color: var(--text-muted); border-style: dashed; }

.spk-quotes { display: grid; gap: 1.5rem; }
.spk-quote {
  margin: 0; background: var(--mint-light);
  border-radius: 14px; padding: 1.75rem 1.75rem 1.4rem;
}
.spk-quote blockquote {
  margin: 0 0 0.9rem; padding: 0; border: 0;
  font-size: 1rem; line-height: 1.8; color: var(--ink);
}
.spk-quote blockquote::before { content: '\201C'; }
.spk-quote blockquote::after  { content: '\201D'; }
.spk-quote figcaption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; color: var(--navy);
}

@media (min-width: 760px) { .spk-quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .speaking { padding: 0 1.25rem; }
  .spk-group { grid-template-columns: 1fr; gap: 0.4rem; }
  .spk-group-label { margin-top: 0; }
}

/*
 * A button can never be the reason the page scrolls sideways. Long labels (an
 * email address, a role title) used to render wider than a 360px phone and
 * pushed the whole document into a horizontal scroll.
 */
.btn-cta, .btn-ghost, .btn-schedule {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/*
 * Press bar on a narrow phone.
 *
 * The mobile rule makes this a two-column grid, but `1fr` is shorthand for
 * minmax(AUTO, 1fr), so a column can never shrink below its content's own
 * minimum width. "Modern Luxury Los Angeles" set as an unwrappable wordmark
 * therefore forced its column past the screen edge and gave the whole home page
 * 38px of horizontal scroll. minmax(0, 1fr) is what actually allows a column to
 * shrink; the wordmark is then allowed to wrap.
 */
@media (max-width: 680px) {
  .press-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem;
  }
  .press-item { min-width: 0; }
  .press-item-wordmark {
    max-width: 100%; height: auto; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    white-space: normal; text-align: center;
    font-size: 0.9375rem; line-height: 1.25; padding: 0.35rem 0.5rem;
  }
  .press-item-label { max-width: 100%; overflow-wrap: anywhere; }
}

/* States she covers without keeping a building there. */
.footer-also {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Service page sections ──────────────────────────────────────────────────
 *
 * Her note: the page was narrow and read as an endless scroll, and she asked
 * for wider content, text broken into sections, images beside text on
 * occasion, and colour blocks between.
 *
 * The old layout was a single 780px column with every photograph dropped full
 * width between paragraphs. This is the same content grouped at each h2, so a
 * section can hold its own text and its own picture side by side, and alternate
 * sections can take a tint.
 */

.svc-sections { margin-top: 0; }

.svc-section { padding: 3.25rem 0; }
.svc-section.is-band { background: var(--mint-light); }
/* Consecutive plain sections should not each pay for full padding twice. */
.svc-section + .svc-section:not(.is-band) { padding-top: 0.5rem; }

.svc-section-inner {
  max-width: var(--content-max);              /* was 780: her "use more width of page" */
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Text beside its picture. One image and enough words to fill the column, or
   it falls back to stacked, which is handled by simply not adding is-split. */
.svc-section.is-split .svc-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.svc-section.is-split .svc-section-media { margin: 0; }

.svc-section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }

/* HER "ICONS ARE HUGE". These are line drawings that were rendering at the full
   width of the content column. They are icons; they sit beside their heading. */
.svc-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  object-fit: contain;
}
.svc-image.is-icon { max-width: 96px; margin: 1.25rem 0; }
.svc-image.is-icon img { width: 100%; height: auto; }

/* HER "fix font in all page headers to be larger, legible (subheadings)". */
.svc-heading {
  font-size: clamp(1.75rem, 3.2vw, 2.3rem);
  line-height: 1.18; color: var(--navy); margin: 0;
}
.svc-subheading {
  font-size: 1.45rem; line-height: 1.25; color: var(--navy);
  margin: 2.25rem 0 0.75rem;
}
.svc-section-text > :first-child { margin-top: 0; }

.svc-section-text p,
.svc-section-text li {
  font-size: 1.02rem; line-height: 1.8; color: var(--ink);
}
.svc-section-text p { margin: 0 0 1.1rem; }
.svc-list { margin: 0 0 1.3rem; padding-left: 1.2rem; }
.svc-list li { margin-bottom: 0.5rem; }
.svc-list li::marker { color: var(--teal); }

.svc-section-media figure { margin: 0 0 1.25rem; }
.svc-section-media figure:last-child { margin-bottom: 0; }
.svc-image img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
}
/* Icons must never take the photograph treatment. */
.svc-image.is-icon img { border-radius: 0; }

.svc-inline-cta { margin: 1.5rem 0 0; }

@media (max-width: 900px) {
  .svc-section.is-split .svc-section-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .svc-section { padding: 2.5rem 0; }
}
@media (max-width: 640px) {
  .svc-section-inner { padding: 0 1.25rem; }
  .svc-section-head { gap: 0.75rem; }
  .svc-icon { width: 44px; height: 44px; }
}

/* A heading that is really a sentence. Her Squarespace pages style some full
   sentences as headings; at display size they read as a wall rather than a
   signpost. */
.svc-heading.is-long {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.35;
  font-weight: 600;
}

/* The service card is an anchor now, so it needs the link styles reset. This
   theme has been caught by that three times: a div promoted to a link inherits
   the browser's blue and underline. */
a.service-card { text-decoration: none; color: inherit; display: block; }
a.service-card:hover, a.service-card:focus-visible { text-decoration: none; }
a.service-card:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px;
}

/* ── One featured patient story ─────────────────────────────────────────────
 * A wall of 34 equal cards gives the eye nowhere to land. This is the entry
 * point; it rotates daily so no single patient becomes the face of the page.
 */
.testi-featured {
  display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem;
  align-items: center;
  background: var(--mint-light); border-radius: 18px;
  padding: 2.25rem; margin-bottom: 2.5rem;
}
.testi-featured-photo img {
  width: 100%; height: 100%; max-height: 340px;
  object-fit: cover; border-radius: 14px; display: block;
}
.testi-featured-eyebrow {
  font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 0.9rem;
}
.testi-featured-quote {
  margin: 0 0 1.25rem; padding: 0; border: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.5; color: var(--navy);
}
.testi-featured-quote::before { content: '\201C'; }
.testi-featured-quote::after  { content: '\201D'; }
.testi-featured-name {
  margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: var(--navy);
}
.testi-featured-name span {
  display: block; font-weight: 400; font-size: 0.8125rem; color: var(--text-muted);
}

@media (max-width: 820px) {
  .testi-featured { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
  .testi-featured-photo img { max-height: 260px; }
}

/* The featured speaking testimonial, set apart from the rest. */
.spk-quote.is-featured {
  background: var(--navy); color: #fff;
  padding: 2.25rem 2.25rem 1.75rem; margin-bottom: 1.5rem;
}
.spk-quote.is-featured blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
}
.spk-quote.is-featured figcaption { color: var(--yellow, #F2C14E); }

/* ── Section themes, hers ───────────────────────────────────────────────────
 * plain = white, mint = her light sections, navy = her dark sections. The
 * boundaries and the choice of theme come from her own pages; nothing here is
 * an alternation rule.
 */
.svc-section.theme-mint { background: var(--mint-light); }
.svc-section.theme-navy { background: var(--navy); position: relative; isolation: isolate; }
.svc-section.theme-navy.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--band-image);
  background-size: cover; background-position: center;
  opacity: 0.35;
}
.svc-section.theme-navy .svc-heading,
.svc-section.theme-navy .svc-subheading,
.svc-section.theme-navy h3 { color: #fff; }
.svc-section.theme-navy .svc-section-text p,
.svc-section.theme-navy .svc-section-text li { color: rgba(255, 255, 255, 0.9); }
.svc-section.theme-navy .svc-point strong { color: #fff; }
.svc-section.theme-navy .svc-list li::marker { color: var(--yellow, #F2C14E); }
.svc-section.theme-navy .svc-question::before { color: var(--yellow, #F2C14E); opacity: 1; }
.svc-section.theme-navy .svc-heading.svc-question { color: #fff; }
.svc-section + .svc-section.theme-plain:not(:first-child) { padding-top: 0.5rem; }

/* All Services photographic bands, mirroring her page's use of these photos. */
.as-band { padding: 3.5rem 0; }
.svc-section-inner.is-duo {
  display: grid; grid-template-columns: 5fr 6fr; gap: 3rem; align-items: center;
}
.svc-section-inner.is-duo.is-flipped { grid-template-columns: 6fr 5fr; }
.svc-section-inner.is-duo.is-flipped .as-band-photo { order: 2; }
.as-band-photo { margin: 0; }
.as-band-photo img { width: 100%; height: auto; border-radius: 14px; display: block; }
.as-band-text { font-size: 1.05rem; line-height: 1.8; color: var(--ink); margin: 0.75rem 0 1.5rem; }
@media (max-width: 860px) {
  .svc-section-inner.is-duo, .svc-section-inner.is-duo.is-flipped { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-section-inner.is-duo.is-flipped .as-band-photo { order: 0; }
}

/* ── Type scale, raised at her request ──────────────────────────────────────
 * "font size throughout site is very small - navigation menu." She is right:
 * the nav was 14px and dozens of rules sat between 10 and 12.5px. The scale
 * above was floored at 13px; the pieces below get set exactly.
 */
.nav-links a { font-size: 1rem; }
.dropdown-menu a { font-size: 0.9375rem; }
.btn-schedule { font-size: 0.9375rem; }
.testi-quote { font-size: 1rem; }
.testi-role, .testi-stage { font-size: 0.875rem; }
.tcard-quote { font-size: 1rem; }
.tcard-cred { font-size: 0.875rem; }
.faq-answer { font-size: 1rem; }
.service-desc { font-size: 0.9375rem; }
.footer-contact-line { font-size: 0.9375rem; }
.footer-links a { font-size: 0.9375rem; }

/* ── One page width ─────────────────────────────────────────────────────────
 * "is there a reason that full page width is used in some content and not in
 * text sections? looks very awkward to have so many varying content widths."
 * There were seven different max-widths. Now there is one shell width; long
 * prose inside it may still cap its own measure for readability, which reads
 * as a deliberate column, not a different page width.
 */
:root { --w-page: 1200px; }
.nav-inner, .hero-inner, .svc-section-inner, .testi-grid-wrap,
.all-services, .careers, .speaking, .contact-section,
.footer-inner, .press-inner, .svc-cta, .svc-related, .svc-series,
.svc-video, .story-wrap { max-width: var(--w-page); }
.careers, .speaking { margin-left: auto; margin-right: auto; }

/* ── Featured story rotator ─────────────────────────────────────────────── */
.testi-rotator { margin-bottom: 2.5rem; }
.testi-rotator-track { position: relative; }
.testi-rotator .testi-featured {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
  margin-bottom: 0;
}
.testi-rotator .testi-featured.is-active {
  position: relative; opacity: 1; pointer-events: auto;
}
.testi-rotator-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1rem;
}
.testi-rotator-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(0, 40, 70, 0.2); background: #fff;
  color: var(--navy); font-size: 1rem; cursor: pointer;
  transition: background 0.15s ease;
}
.testi-rotator-btn:hover { background: var(--mint); }
.testi-rotator-dots { display: flex; gap: 0.5rem; }
.testi-rotator-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(0, 40, 70, 0.18); cursor: pointer;
}
.testi-rotator-dot.is-active { background: var(--teal); }

/* Card variety: some navy, some mint, so the wall has landing points. */
.testi-card.is-mint { background: var(--mint-light); border-color: transparent; }
.testi-card.is-navy { background: var(--navy); border-color: transparent; }
.testi-card.is-navy .testi-name { color: #fff; }
.testi-card.is-navy .testi-quote { color: rgba(255, 255, 255, 0.92); }
.testi-card.is-navy .testi-role,
.testi-card.is-navy .testi-stage { color: rgba(255, 255, 255, 0.65); }
.testi-card.is-navy .testi-more { color: #7FD1C7; }
.testi-card.is-navy .testi-more:hover { color: #fff; }

/* ── Speaking page, rebuilt wide ────────────────────────────────────────── */
.spk-portrait img { max-height: 520px; object-fit: cover; object-position: top; }
.spk-topic-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; margin-top: 1.75rem;
}
.spk-topic {
  background: #fff; border-radius: 14px; padding: 1.75rem 1.6rem;
  border: 1px solid rgba(0, 40, 70, 0.08);
}
.spk-topic h3 { font-size: 1.3rem; color: var(--navy); margin: 0 0 0.6rem; }
.spk-topic p { font-size: 0.9375rem; line-height: 1.75; color: var(--ink); margin: 0; }
.spk-listen-frame { margin: 0; }
.svc-section .spk-group { border-bottom-color: rgba(0, 40, 70, 0.1); }
@media (max-width: 860px) {
  .spk-topic-cards { grid-template-columns: 1fr; }
}

/* ── Published In: the journals from her CV ─────────────────────────────── */
.journals-label { margin-top: 3rem; }
.journal-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.5rem 2rem; max-width: var(--w-page); margin: 1.75rem auto 0;
  padding: 0 2.5rem;
}
.journal-item { margin: 0; text-align: center; width: 132px; }
.journal-item .journal-img {
  height: 76px; width: auto; max-width: 128px; margin: 0 auto;
  object-fit: contain; display: block;
  border-radius: 4px;
}
.journal-item figcaption {
  margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.35;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .journal-strip { gap: 1.25rem 1rem; padding: 0 1.25rem; }
  .journal-item { width: 104px; }
  .journal-item .journal-img { height: 60px; }
}

/* A body h2 keeps h2 rank; it shares the subheading look, slightly larger. */
h2.svc-subheading { font-size: 1.55rem; }
h2.svc-subheading.is-long, h3.svc-subheading.is-long {
  font-size: 1.25rem; line-height: 1.4;
}

/* ── Image discipline (DESIGN.md) ───────────────────────────────────────────
 * Photos render at sizes photographs can carry. Nothing full-column by
 * default, portraits capped narrower, galleries 2-up. Natural aspect always
 * in the flow: cropping belongs only to boxes designed for it.
 */
.svc-image img {
  width: auto; max-width: 100%;
  max-height: 560px;
  margin: 0 auto; display: block;
  border-radius: 14px;
}
.svc-image.is-portrait img { max-width: min(420px, 100%); } /* 420 alone overflowed a 350px phone column */
.svc-gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem; align-items: start; margin: 1.5rem 0;
}
.svc-gallery .svc-image { margin: 0; }
.svc-section.is-split .svc-section-media .svc-image img { max-height: 620px; }
@media (max-width: 760px) {
  .svc-gallery { grid-template-columns: 1fr; }
}

/* The featured-story photo box matches the shape of the portraits it holds
 * (4:5), with a top-biased position so a head can never be the part that
 * gets cropped. This box was 420x340 with a centre crop, which cut Amelia
 * Milo and Emmanuel Acho off at the forehead. */
.testi-featured-photo { aspect-ratio: 4 / 5; max-height: 400px; overflow: hidden; border-radius: 14px; }
.testi-featured-photo img {
  width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: center 18%;
}

/* ── Service pages: one layout system (web-composition skill) ─────────────
 *
 * Numbers here are the skill's, not guesses: 1296 canvas, 18px/1.5 body,
 * 70ch prose, Carbon spacing steps (8 12 16 24 32 40 48 64 80 96), 64px
 * section padding, five band shapes (1 col, 50/50, 33/67, 67/33, 3 equal).
 * Her pages supply the pairings; this system supplies the geometry.
 */
.svc-layout { margin: 0; }

.svc-strip { padding: 64px 0; }
.svc-strip--plain { background: #fff; }
.svc-strip--tint  { background: var(--mint-light); }
.svc-strip--navy  { background: var(--navy); }
/* Coloured band exit rule: the next section gets its own full top padding. */
.svc-strip--tint + .svc-strip, .svc-strip--navy + .svc-strip { padding-top: 64px; }

.svc-strip.has-photo {
  position: relative; isolation: isolate;
  background-image: var(--band-photo); background-size: cover; background-position: center;
}
.svc-strip.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,31,51,0.84), rgba(11,31,51,0.9));
}

/* One canvas, one left edge. */
.svc-wrap { max-width: 1296px; margin: 0 auto; padding: 0 32px; }
.svc-band-row + .svc-band-row { margin-top: 48px; }

.svc-band-row { display: grid; gap: 40px; align-items: start; }
.svc-band-row.is-duo            { grid-template-columns: 1fr 1fr; }
.svc-band-row.is-duo-wide-left  { grid-template-columns: 2fr 1fr; }
.svc-band-row.is-duo-wide-right { grid-template-columns: 1fr 2fr; }
.svc-band-row.is-trio           { grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Skill B6 case 2: short self-contained copy centres as a whole group against
   taller media. Everything else top aligns. */
.svc-band-row.is-centered { align-items: center; }
/* Skill B6 case 3: media must not tower over a short text group. A centred
   pair caps its media at roughly the height of a three-paragraph group, so
   the ratio stays under 1.75; the therapist portrait was 2.18x, the massage
   close-up 2.45x, the exam video 2.24x. */
.svc-band-row.is-centered .svc-figure img { max-height: 320px; width: auto; max-width: 100%; margin: 0 auto; }
.svc-band-row.is-centered .svc-figure.is-portrait img { max-height: 300px; }
.svc-band-row.is-centered .svc-video { max-width: 440px; }
/* Skill B6 case 3 continued: with a short text group, the media column also
   narrows (33/67 rather than 50/50), so the pair reads as a group rather
   than a photograph with a caption beside it. */
.svc-band-row.is-duo-wide-right.is-centered { grid-template-columns: 1fr 2fr; }
.svc-band-row.is-duo-wide-left.is-centered  { grid-template-columns: 2fr 1fr; }

.svc-col { min-width: 0; }
.svc-col > :first-child { margin-top: 0; }
.svc-col > :last-child { margin-bottom: 0; }

/* Prose measure applies to prose, not to the page. */
.svc-col p, .svc-col ul { max-width: 70ch; }
.svc-col p, .svc-col li { font-size: 18px; line-height: 1.5; color: var(--ink); }
.svc-col p { margin: 0 0 24px; }
.svc-list { margin: 0 0 24px; padding-left: 22px; }
.svc-list li { margin-bottom: 8px; }
.svc-list li::marker { color: var(--teal); }

.svc-figure { margin: 0; }
.svc-figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
.svc-figure.is-portrait img { max-height: 620px; width: auto; max-width: 100%; margin: 0 auto; }
/* Skill C6: spot illustration, 64px, above its heading. */
.svc-spot { display: block; width: 64px; height: 64px; margin: 0 0 12px; }
.svc-spot img { width: 64px; height: 64px; object-fit: contain; display: block; }
.svc-video .video-frame { border-radius: 14px; overflow: hidden; }

/* Light on dark, placed after the ink rules so they win. */
.svc-strip--navy .svc-col p, .svc-strip--navy .svc-col li,
.svc-strip.has-photo .svc-col p, .svc-strip.has-photo .svc-col li { color: rgba(255,255,255,0.92); }
.svc-strip--navy .svc-col .svc-h, .svc-strip.has-photo .svc-col .svc-h,
.svc-strip--navy .svc-col strong, .svc-strip.has-photo .svc-col strong { color: #fff; }
.svc-strip--navy .svc-col .svc-list li::marker,
.svc-strip.has-photo .svc-col .svc-list li::marker { color: var(--mint); }

/* Skill D2: H2 42/50 desktop, H3 28/36. */
.svc-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 42px; line-height: 50px; color: var(--navy); margin: 0 0 24px;
}
h3.svc-h { font-size: 28px; line-height: 36px; margin: 0 0 16px; }
.svc-h.is-long { font-size: 24px; line-height: 32px; font-weight: 600; }
.svc-point { margin: 0 0 16px; }
/* Skill B7: CTA 16 to 24px after the copy it serves, on the same left edge. */
.svc-cta-line { margin: 24px 0 0; }
p + .svc-cta-line, ul + .svc-cta-line { margin-top: 0; }

@media (max-width: 1024px) {
  .svc-band-row.is-trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .svc-band-row, .svc-band-row.is-duo, .svc-band-row.is-duo-wide-left,
  .svc-band-row.is-duo-wide-right, .svc-band-row.is-trio { grid-template-columns: 1fr; gap: 24px; }
  .svc-band-row + .svc-band-row { margin-top: 40px; }
  .svc-wrap { padding: 0 20px; }
  .svc-strip { padding: 48px 0; }
  .svc-strip--tint + .svc-strip, .svc-strip--navy + .svc-strip { padding-top: 48px; }
  .svc-h { font-size: 32px; line-height: 40px; }
  h3.svc-h { font-size: 24px; line-height: 32px; }
  .svc-col p, .svc-col li { font-size: 17px; }
}

/* Her Klaviyo booking form, the destination for every Book Now. */
.contact-form-block {
  max-width: 760px; margin: 3.5rem auto 0; padding: 2.5rem 2.5rem 2rem;
  background: var(--mint-light); border-radius: 16px; scroll-margin-top: 110px;
}
.contact-form-block .contact-info-heading { margin-bottom: 0.75rem; }
.contact-form-note { font-size: 0.95rem; color: var(--text-muted); margin: 0 0 1.5rem; }
@media (max-width: 640px) { .contact-form-block { padding: 1.5rem 1.25rem; margin-top: 2rem; } }

/* A journal with no mark available: its name, set as a wordmark. */
.journal-item.is-wordmark {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 0.75rem;
}
.journal-item.is-wordmark figcaption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem; line-height: 1.25; color: var(--navy); text-align: center;
}



/* Skill C3/C4: a photograph standing alone in a band is not a banner. It keeps
   the left edge and takes two thirds of the canvas, which is where her page
   places such images. */
.svc-band-row.is-full .svc-figure img { max-width: 66%; }
.svc-band-row.is-full .svc-figure.is-portrait img { max-width: 100%; max-height: 560px; }
@media (max-width: 880px) { .svc-band-row.is-full .svc-figure img { max-width: 100%; } }

/* Older renderer (vocal-surgery, annual-vocal-physical, on-location): images
   never exceed their column. A 394px image on a 390px phone was the only
   horizontal overflow left on the site. */
.svc-section img, .svc-body img { max-width: 100%; height: auto; }

/* Skill B6 case 3, stacked form: a photograph with its caption beneath. The
   photo keeps two thirds of the canvas; the caption sits under it on the same
   left edge, in the small text size. */
.svc-band-row.is-figure { grid-template-columns: 1fr; }
.svc-band-row.is-figure .svc-figure img { max-width: 66%; }
.svc-band-row.is-figure .svc-figure { margin-bottom: 12px; }
.svc-band-row.is-figure p { font-size: 16px; line-height: 24px; color: var(--text-muted); max-width: 66%; }
@media (max-width: 880px) { .svc-band-row.is-figure .svc-figure img, .svc-band-row.is-figure p { max-width: 100%; } }

/* The podcast band. Emerald: "even space on the front and back of the section".
   The container was already symmetric; the imbalance was compositional: the
   video filled a wider column to a hard left edge while short text trailed off
   on the right. Equal columns on a narrower, centred band read as one balanced
   unit, and the text column sits on its own comfortable measure. */
.svc-section-inner.is-duo.is-listen {
  max-width: 1040px; margin: 0 auto;
  grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.svc-section-inner.is-listen .spk-para { max-width: 40ch; }
@media (max-width: 860px) { .svc-section-inner.is-duo.is-listen { grid-template-columns: 1fr; } }

/* Stacked photographs in one column: air between them (skill A1, peers get
   24px), and each held to about three quarters of its former height so a
   column of two does not tower over the text beside it. */
.svc-col .svc-figure + .svc-figure { margin-top: 24px; }
.svc-col .svc-figure.is-portrait img { max-height: 470px; }

/* ══ QA pass, 2026-09-27 ═══════════════════════════════════════════════════
 * Every rule below answers a defect MEASURED in a browser across 18 pages at
 * 1440 and 390, not one noticed by eye. Thresholds are the web-composition
 * skill's: 4.5:1 text contrast, 16px minimum paragraph text, 44px tap targets,
 * 75ch maximum measure, 16 to 24px from a heading to its content, 64px section
 * padding with a full buffer after any coloured band.
 */

/* 1. CONTRAST. The design file set secondary text as navy or white at low
      alpha: 0.32 to 0.6. Composited, those measured 1.98 to 4.24 against a
      4.5 minimum. Navy at 0.72 is 6.2:1 on white and 5.9:1 on the mint panels;
      white at 0.7 is 8:1 on navy. */
body .mobile-nav .mobile-nav-sub,
body .press-item-label,
body .press-bar-label,
body .team-role-sub,
body .contact-stat-label,
body .contact-hours-note,
body .contact-gallery-item figcaption { color: rgba(0, 40, 70, 0.72); }
body .press-item:hover .press-item-label { color: rgba(0, 40, 70, 0.9); }
body .hero-locations { color: rgba(255, 255, 255, 0.7); }
/* Rating stars were teal on navy, 2.59:1. Gold on navy is 9:1. */
body .stars { color: #F2C14E; }
/* Teal at 0.7 alpha measured 3.22:1; solid teal is 5.8:1. */
body .bio-chapter-subtitle { color: var(--teal); }

/* 2. PARAGRAPH TEXT UNDER 16px. She asked twice for larger text. */
body .service-desc,
body .hero-locations,
body .footer-brand p { font-size: 16px; line-height: 1.7; }

/* 3. TAP TARGETS. Menu button was 34x27 and the rotator dots 9x9. The dots
      keep their 9px look; the button around each is 24px, the WCAG 2.2 AA
      minimum, and the arrows and menu button are 44px. */
.nav-hamburger { min-width: 44px; min-height: 44px; }
.testi-rotator-btn { width: 44px; height: 44px; }
.testi-rotator-dots { gap: 0; }
.testi-rotator-dot {
  width: 24px; height: 24px; background: transparent; position: relative;
}
.testi-rotator-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: rgba(0, 40, 70, 0.28);
}
.testi-rotator-dot.is-active { background: transparent; }
.testi-rotator-dot.is-active::after { background: var(--teal); }

/* 4. SECTION RHYTHM on the older renderer (Vocal Surgery, Annual Vocal
      Physical, On Location Care, Speaking). Two rules cut the top padding of
      ANY plain section that followed another to 8px, including the one after
      a coloured band, which is the missing buffer she reported twice. Plain
      after plain closes up; plain after colour gets the full 64px. */
.svc-section { padding: 64px 0; }
.svc-section.theme-plain + .svc-section.theme-plain { padding-top: 0; }
.svc-section.theme-mint + .svc-section.theme-plain,
.svc-section.theme-navy + .svc-section.theme-plain,
.svc-section.is-band + .svc-section.theme-plain { padding-top: 64px; }
.svc-section-inner { max-width: 1296px; padding-left: 32px; padding-right: 32px; }

/* 5. MEASURE. Prose is held to 70ch; the page is not. Vocal Surgery had ten
      paragraphs running to about 130 characters a line. */
.svc-section-text p, .svc-section-text ul,
.story-quote p { max-width: 70ch; }

/* 6. A BUTTON SHARES THE ALIGNMENT OF THE TEXT IT SERVES. These were centred
      under left-aligned paragraphs. */
.svc-section .svc-inline-cta { text-align: left; margin: 24px 0 0; }

/* 7. A HEADING IS 16 TO 24px FROM ITS CONTENT. Five headings on Speaking sat
      at 0px. Inside .svc-section-head the wrapper already carries the gap. */
.svc-section-inner .svc-heading { margin-bottom: 24px; }
.svc-section-inner .svc-section-head .svc-heading { margin-bottom: 0; }
.spk-listen-frame + div .svc-heading { margin-bottom: 16px; }

/* 8. THREE QUOTES, THREE COLUMNS. In a two-column grid the third sat alone. */
@media (min-width: 1000px) { .spk-quotes { grid-template-columns: repeat(3, 1fr); } }

/* 9. A SHORT ROW OF CARDS CENTRES under its centred heading. "Start Here" has
      two cards; in a three-column grid they hung left of their own title. */
.all-services .services-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
}
.all-services .services-grid > .service-card { flex: 0 1 calc((100% - 3rem) / 3); min-width: 260px; }
@media (max-width: 860px) {
  .all-services .services-grid > .service-card { flex: 1 1 100%; }
  .svc-section { padding: 48px 0; }
  .svc-section.theme-mint + .svc-section.theme-plain,
  .svc-section.theme-navy + .svc-section.theme-plain,
  .svc-section.is-band + .svc-section.theme-plain { padding-top: 48px; }
  .svc-section-inner { padding-left: 20px; padding-right: 20px; }
}

/* ══ QA pass 2, 2026-09-27 ══
 * Measured in the browser, band by band. An old rule meant for consecutive
 * plain sections (".svc-section + .svc-section:not(.is-band)") was also
 * catching tinted and navy bands, which left their headings 8px under the
 * band's top edge against 64px at the bottom. A coloured band always pays
 * full padding on both sides. */
.svc-section.theme-mint,
.svc-section.theme-navy,
.svc-section + .svc-section.theme-mint,
.svc-section + .svc-section.theme-navy { padding-top: 64px; padding-bottom: 64px; }

/* The last paragraph's own margin was adding 18px to the bottom of a band. */
.svc-section-inner > :last-child,
.svc-section-inner > div > :last-child,
.svc-section-text > :last-child,
.svc-col > :last-child { margin-bottom: 0; }

/* Reading measure: nothing runs past 75 characters. */
.job-body p, .job-body li, .job-list li { max-width: 72ch; }
.svc-band-row.is-full .svc-col > p,
.svc-band-row.is-full .svc-col > ul { max-width: 72ch; }
.svc-band-row.is-full.is-centered .svc-col > p { margin-left: auto; margin-right: auto; }
.svc-cta p { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* Body copy floor of 16px. */
.spk-topic p, .contact-form-note, .contact-cta-card p { font-size: 1rem; line-height: 1.7; }
.testi-disclaimer { font-size: 1rem; line-height: 1.7; max-width: 70ch; }

/* Video caption was 3.65:1. */
body .svc-video-item figcaption { color: rgba(0, 40, 70, 0.78); }
body .svc-section.theme-navy .svc-video-item figcaption { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 860px) {
  .svc-section.theme-mint,
  .svc-section.theme-navy,
  .svc-section + .svc-section.theme-mint,
  .svc-section + .svc-section.theme-navy { padding-top: 48px; padding-bottom: 48px; }
}
.svc-col > p, .svc-col > ul { max-width: 72ch; }
.svc-band-row.is-centered .svc-col > p { margin-left: auto; margin-right: auto; }
.spk-group:last-child { padding-bottom: 0; }
/* A figure's caption follows the photo's width but never the page's. */
.svc-band-row.is-figure .svc-col > p { max-width: min(66%, 72ch); }
/* Rotator dots: the visible dot stays 9px, the thumb target is 44px tall. */
@media (max-width: 860px) { .testi-rotator-dot { width: 40px; height: 44px; } }
@media (max-width: 880px) { .svc-band-row.is-figure .svc-col > p { max-width: 100%; } }
/* Closing statement above one photo: text and photo share one centre line. */
.svc-section.is-closing .svc-section-text { text-align: center; }
.svc-section.is-closing .svc-section-text p { max-width: 60ch; margin-left: auto; margin-right: auto; }
.svc-section.is-closing .svc-section-media { margin-top: 32px; }

/* ══ Medical Evaluation + Voice Therapy pass, 2026-09-28 ══ */

/* The old single-column .svc-video rule (860px, 4rem top margin, 3rem side
   padding) leaked into grid columns: the left exam video sat 48px in from the
   column edge and 64px lower than its partner. In a column, a video is flush. */
.svc-col .svc-video { max-width: none; margin: 0; padding: 0; }
.svc-col .svc-video + * { margin-top: 24px; }

/* A video beside a short intro takes half the band and centres with it. */
.svc-band-row.is-duo.is-centered .svc-video { max-width: none; }

/* A short text group beside a portrait (Tressa): the pair centres as ONE group
   in the band, photo larger, instead of the photo pinned left with a wide
   empty gutter before the text. */
.svc-band-row.is-centered:has(.svc-figure.is-portrait) {
  grid-template-columns: auto minmax(0, 560px); justify-content: center; gap: 64px;
}
.svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-figure.is-portrait img {
  max-height: 440px; margin: 0;
}

/* The question mark was a 13px letter floating beside the heading and pushed
   the heading 30px off the body's left edge. Now a badge inline with the
   first line: the heading's wrap line and the body share one left edge. */
.svc-question { padding-left: 0; }
.svc-question::before {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 14px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 15px; letter-spacing: 0;
  vertical-align: 0.2em; opacity: 1;
}
.svc-question + p { margin-left: 0; }
.svc-strip--navy .svc-question::before,
.svc-section.theme-navy .svc-question::before { background: var(--yellow, #F2C14E); color: var(--navy); }

@media (max-width: 880px) {
  .svc-band-row.is-centered:has(.svc-figure.is-portrait) { grid-template-columns: 1fr; gap: 32px; }
  .svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-figure.is-portrait img { max-height: 420px; margin: 0 auto; }
  .svc-question { padding-left: 0; }
  .svc-question::before { width: 30px; height: 30px; font-size: 14px; margin-right: 10px; }
}
.svc-band .svc-question::before { color: #fff; background: var(--teal); }

/* ══ Voice Therapy designer pass, 2026-09-28 ══ */

/* 2. An illustrated question needs one mark, not two. */
.svc-spot + .svc-question::before { display: none; }

/* 3. Tressa band: her first line is the lead, the credentials sit under it as
   a tight group (proximity), the button 24px after. */
.svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-col p:first-of-type {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; line-height: 40px;
  font-weight: 600; color: var(--navy); margin-bottom: 16px;
}
.svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-col p:not(:first-of-type) {
  margin-bottom: 4px; color: var(--teal); font-weight: 600;
}
.svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-cta-line { margin-top: 24px; }

/* 4. Her paragraph-typed sub-headings, and the kicker under a heading. */
.svc-col .svc-sub { margin: 40px 0 16px; }
.svc-col > .svc-sub:first-child { margin-top: 0; }
.svc-col .svc-kicker {
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--teal);
  margin: -8px 0 16px;
}
.svc-strip--navy .svc-col .svc-kicker { color: var(--yellow, #F2C14E); }

/* 5. Line icons were drawn on white squares; on a tinted band the squares
   showed as boxes. Multiply drops the white into the band colour. */
.svc-spot img { mix-blend-mode: multiply; }
.svc-strip--navy .svc-spot img, .svc-strip.has-photo .svc-spot img { mix-blend-mode: normal; }

/* 6. Media in a side column starts on the column's own left edge. */
.svc-band-row:not(.is-full):not(.is-figure) .svc-figure.is-portrait img { margin-left: 0; margin-right: 0; }

/* 7. A navy band holding only a closing statement: centred, set as a
   statement, so it reads as a finished ending rather than two stray lines. */
.svc-strip--navy .svc-wrap:not(:has(.svc-h, .svc-figure, .svc-video, .svc-list, .svc-spot)) { text-align: center; }
.svc-strip--navy .svc-wrap:not(:has(.svc-h, .svc-figure, .svc-video, .svc-list, .svc-spot)) .svc-col p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; line-height: 38px;
  max-width: 34ch; margin: 0 auto 12px;
}
.svc-strip--navy .svc-wrap:not(:has(.svc-h, .svc-figure, .svc-video, .svc-list, .svc-spot)) .svc-col p + p {
  font-family: 'Mulish', sans-serif; font-size: 18px; line-height: 27px; max-width: 60ch;
  color: rgba(255, 255, 255, 0.85);
}

/* 8. Other Services: an odd last row centres instead of leaving a hole. */
.svc-related-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.svc-related-item { flex: 0 1 calc((100% - 3 * 0.85rem) / 4); min-width: 0; }
@media (max-width: 1024px) { .svc-related-item { flex-basis: calc((100% - 0.85rem) / 2); } }
@media (max-width: 560px)  { .svc-related-item { flex-basis: 100%; } }

@media (max-width: 880px) {
  .svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-col p:first-of-type { font-size: 26px; line-height: 34px; }
  .svc-strip--navy .svc-wrap:not(:has(.svc-h, .svc-figure, .svc-video, .svc-list, .svc-spot)) .svc-col p { font-size: 24px; line-height: 32px; }
}
/* Question headings: one size everywhere (Carbon 36/44), so a question in a
   half column matches its twin at full width and never wraps to three lines. */
h2.svc-h.svc-question { font-size: 36px; line-height: 44px; }
@media (max-width: 880px) { h2.svc-h.svc-question { font-size: 28px; line-height: 36px; } }
/* Tressa band, measured: the text column now hugs its words so the photo and
   text centre as one group; photo 400px tall against a ~210px text group. */
.svc-band-row.is-centered:has(.svc-figure.is-portrait) { grid-template-columns: auto auto; }
.svc-band-row.is-centered:has(.svc-figure.is-portrait) > .svc-col:last-child { max-width: 560px; }
.svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-figure.is-portrait img { max-height: 400px; }
.svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-col p:not(:first-of-type) { margin-bottom: 8px; }
@media (max-width: 880px) {
  .svc-band-row.is-centered:has(.svc-figure.is-portrait) { grid-template-columns: 1fr; }
  .svc-band-row.is-centered:has(.svc-figure.is-portrait) > .svc-col:last-child { max-width: none; }
}
@media (max-width: 880px) {
  .svc-band-row.is-centered:has(.svc-figure.is-portrait) .svc-figure.is-portrait img { margin: 0; max-height: 380px; }
}

/* ══ Her 9 Oct notes: Tonsillectomy caption, Spine Surgery emphasis ══ */

/* A captioned figure beside text: the photo fills its one-third column and
   the caption under it shares the photo's edges exactly. */
.svc-band-row[class*="is-figcol-"] { align-items: start; }
.svc-band-row.is-figcol-left  > .svc-col:first-child .svc-figure img,
.svc-band-row.is-figcol-right > .svc-col:last-child  .svc-figure img {
  width: 100%; max-width: 100%; max-height: none; margin: 0;
}
.svc-band-row.is-figcol-left  > .svc-col:first-child > .svc-figure + p,
.svc-band-row.is-figcol-right > .svc-col:last-child  > .svc-figure + p {
  max-width: 100%; margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--text-muted);
}

/* A full-width section title that happens to be long is a title, not a
   footnote: 32/40, held to a readable measure. */
.svc-band-row.is-full .svc-col > h2.svc-h.is-long { font-size: 32px; line-height: 40px; font-weight: 600; max-width: 40ch; }
@media (max-width: 880px) { .svc-band-row.is-full .svc-col > h2.svc-h.is-long { font-size: 26px; line-height: 34px; } }


/* ══ Journal articles, 2026-10-14 ══ */
.article-hero .page-title { font-size: 44px; line-height: 52px; max-width: 26ch; margin-left: auto; margin-right: auto; }
.article-hero .page-eyebrow a { color: inherit; text-decoration: none; }
.article-hero .page-eyebrow a:hover { text-decoration: underline; }
.article-hero .page-eyebrow span, .article-meta span { margin: 0 10px; opacity: 0.6; }
.article-meta { font-size: 16px; }

.article { max-width: 760px; margin: 0 auto; padding: 64px 32px 48px; }
.article-hero-figure { margin: 0 0 40px; }
.article-hero-figure img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: center 30%; border-radius: 14px; }

.article-body { font-size: 18px; line-height: 1.6; color: var(--ink); }
.article-body > * { max-width: 70ch; }
.article-body p { margin: 0 0 24px; }
.article-body .article-lead { font-size: 21px; line-height: 1.55; color: var(--navy); }
.article-body .article-accent { color: var(--teal); }
.article-body h2, .article-body h3, .article-body h4 {
  font-family: 'Cormorant Garamond', Georgia, serif; color: var(--navy); font-weight: 600; margin: 40px 0 16px;
}
.article-body h2 { font-size: 32px; line-height: 40px; }
.article-body h3 { font-size: 28px; line-height: 36px; }
.article-body h4 { font-size: 22px; line-height: 30px; }
.article-body > h2:first-child, .article-body > h3:first-child, .article-body > h4:first-child { margin-top: 0; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 24px; }
.article-body li { margin-bottom: 10px; }
.article-body li::marker { color: var(--teal); }
.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--navy); }
.article-body strong { color: var(--navy); }
.article-body blockquote {
  margin: 32px 0; padding: 8px 0 8px 24px; border-left: 3px solid var(--teal);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 1.45; color: var(--navy);
}
.article-body .article-figure { margin: 32px 0; max-width: none; }
.article-body .article-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 14px; }
.article-body .article-figure figcaption { margin-top: 10px; font-size: 15px; color: var(--text-muted); text-align: center; }
.article-body .video-frame { margin: 32px 0; max-width: none; }
.article-body hr { border: 0; border-top: 1px solid rgba(0,40,70,0.12); margin: 40px 0; }

.article-tags { list-style: none; margin: 40px 0 0; padding: 32px 0 0; border-top: 1px solid rgba(0,40,70,0.1); display: flex; flex-wrap: wrap; gap: 8px; }
.article-tags a {
  display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--mint-light);
  color: var(--navy); font-size: 14px; text-decoration: none; line-height: 1.4;
}
.article-tags a:hover { background: var(--mint); }
.article-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.article-related { background: var(--mint-light); padding: 64px 0; }
.article-related-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 32px; }
.article-related h2 { font-size: 36px; line-height: 44px; color: var(--navy); margin: 0 0 8px; }
.article-related .blog-grid { margin-top: 32px; padding: 0; }
.blog-excerpt { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }
.blog-card-body .blog-title { margin-bottom: 10px; }

.journal-filter {
  max-width: var(--content-max); margin: 40px auto 0; padding: 0 48px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.journal-filter a {
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(0,40,70,0.14);
  color: var(--navy); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; line-height: 1.4;
}
.journal-filter a:hover { border-color: var(--teal); color: var(--teal); }
.journal-filter a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.content-area .journal-filter + .blog-grid { margin-top: 40px; }

@media (max-width: 860px) {
  .article-hero .page-title { font-size: 32px; line-height: 40px; }
  .article { padding: 48px 20px 40px; }
  .article-hero-figure img { max-height: 340px; }
  .article-body { font-size: 17px; }
  .article-body h2 { font-size: 26px; line-height: 34px; }
  .article-body h3 { font-size: 23px; line-height: 30px; }
  .article-body h4 { font-size: 20px; line-height: 28px; }
  .article-related { padding: 48px 0; }
  .article-related-inner { padding: 0 20px; }
  .article-related h2 { font-size: 28px; line-height: 36px; }
  .journal-filter { padding: 0 20px; margin-top: 32px; }
}
.article-hero-figure figcaption { margin-top: 10px; font-size: 15px; color: var(--text-muted); text-align: center; }
body .blog-date { color: rgba(0, 40, 70, 0.72); }
/* Her tag names are lowercase in the data; the page title sets them properly. */
.tag-archive .page-title { text-transform: capitalize; }

/* ══ Forms, 2026-10-14 ══ */
.cvh-form-wrap { margin-top: 8px; }
.cvh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.cvh-field { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.cvh-field.is-half { grid-column: span 1; }
.cvh-label { display: block; font-family: 'Mulish', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.4; }
.cvh-req { color: var(--teal); }
.cvh-help { font-size: 15px; line-height: 1.5; color: var(--text-muted); margin: -4px 0 10px; }
.cvh-form input[type="text"], .cvh-form input[type="email"], .cvh-form input[type="tel"],
.cvh-form select, .cvh-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid rgba(0, 40, 70, 0.18); border-radius: 8px;
  font-family: 'Mulish', sans-serif; font-size: 16px; line-height: 1.4; color: var(--navy); background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none;
}
.cvh-form textarea { min-height: 140px; resize: vertical; }
.cvh-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23002846' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.cvh-form input:focus, .cvh-form select:focus, .cvh-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 110, 140, 0.14); }
.cvh-field.has-error input, .cvh-field.has-error select, .cvh-field.has-error textarea { border-color: #b32d2e; }
.cvh-options { display: flex; flex-wrap: wrap; gap: 10px; }
.cvh-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1.5px solid rgba(0, 40, 70, 0.18); border-radius: 8px; font-size: 16px; color: var(--navy); cursor: pointer; background: #fff; }
.cvh-option:has(input:checked) { border-color: var(--teal); background: var(--mint-light); }
.cvh-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal); flex-shrink: 0; }
.cvh-field.is-scale .cvh-options { gap: 8px; }
.cvh-field.is-scale .cvh-option { flex: 1 1 0; justify-content: center; padding: 10px 8px; text-align: center; font-size: 15px; }
.cvh-form-actions { margin: 28px 0 0; }
.cvh-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cvh-form-success { padding: 28px 32px; border-radius: 12px; background: var(--mint-light); border-left: 4px solid var(--teal); }
.cvh-form-success-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; color: var(--navy); margin: 0 0 8px; }
.cvh-form-success p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.cvh-form-errors { padding: 18px 22px; border-radius: 10px; background: #fdf1f1; border-left: 4px solid #b32d2e; margin-bottom: 24px; }
.cvh-form-errors p { margin: 0 0 8px; font-weight: 700; color: #7a1f20; }
.cvh-form-errors ul { margin: 0; padding-left: 20px; color: #7a1f20; }
.cvh-form-errors li { margin-bottom: 4px; }
.contact-klaviyo { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(0, 40, 70, 0.1); }
.contact-klaviyo .contact-info-heading { font-size: 28px; margin-bottom: 8px; }

.form-page { max-width: 760px; margin: 0 auto; padding: 56px 32px 72px; }
.form-page-notes { margin-bottom: 32px; padding: 20px 24px; border-radius: 12px; background: var(--mint-light); }
.form-page-notes p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.form-page-notes p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .cvh-fields { grid-template-columns: 1fr; gap: 18px; }
  .cvh-field.is-half { grid-column: 1 / -1; }
  .cvh-field.is-scale .cvh-options { flex-direction: column; }
  .cvh-field.is-scale .cvh-option { justify-content: flex-start; text-align: left; }
  .form-page { padding: 40px 20px 56px; }
}
.cvh-label { font-size: 16px; }
.cvh-help { font-size: 16px; }
.cvh-field.is-scale .cvh-option { font-size: 16px; padding: 10px 6px; }
/* 404 */
.not-found-links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.not-found-search-row { display: flex; gap: 12px; }
.not-found-search-row input[type="search"] { flex: 1; min-height: 48px; padding: 12px 14px; border: 1.5px solid rgba(0,40,70,0.18); border-radius: 8px; font-family: 'Mulish', sans-serif; font-size: 16px; color: var(--navy); -webkit-appearance: none; }
.not-found-search-row input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,110,140,0.14); }
@media (max-width: 600px) { .not-found-search-row { flex-direction: column; } .not-found-links a { width: 100%; text-align: center; } }

/* ══ Journal per the design file, 2026-10-19 ══ */
.journal-page .journal-wrap { padding-top: 0; }
.journal-page .article-count { font-size: 15px; }
.journal-page .section-label a { color: var(--teal); text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 15px; }
.journal-page .article-card-title { font-size: 18px; line-height: 1.35; }
.journal-page .article-card-date { font-size: 15px; }
.journal-page .article-card-read { font-size: 12px; }
.journal-page .ftcard-title { font-size: 20px; }
.journal-page .ftcard-meta { font-size: 13px; color: rgba(255,255,255,0.72); }
.journal-page .sidebar-search input { font-size: 16px; min-height: 32px; }
.journal-page .sidebar-search { padding: 8px 12px; }
.journal-page .sidebar-index-link { font-size: 13px; padding: 10px 12px; }
.journal-page .popular-link { font-size: 16px; }
.journal-page .archive-btn { font-size: 16px; min-height: 44px; }
.journal-page .archive-months a { font-size: 15px; color: rgba(0,40,70,0.75); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.journal-page .archive-n { font-size: 12px; color: rgba(0,40,70,0.5); }
.journal-page .archive-item.open .archive-months { max-height: 600px; }
.journal-page .sidebar-label { font-size: 12px; color: rgba(0,40,70,0.6); }
.journal-page .section-label { font-size: 13px; color: rgba(0,40,70,0.6); }
.journal-page .tag { font-size: 12px; }
.journal-page .cat-heading-label .tag { font-size: 13px; }
.journal-page .ftcard-badge { font-size: 11px; }
.journal-page .ftcard-read { font-size: 12px; }
.article-card-ph, .ftcard-ph { width: 100%; aspect-ratio: 3/2; display: flex; align-items: flex-end; padding: 14px; box-sizing: border-box; background: linear-gradient(135deg, rgba(0,40,70,0.08), rgba(0,110,140,0.18)); }
.ftcard-ph { aspect-ratio: 4/3; background: linear-gradient(135deg, #0c3a5c, #002846); }
.article-card-ph span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: rgba(0,40,70,0.55); }
.show-more-btn { padding: 12px 22px; min-height: 44px; font-size: 13px; }
.journal-empty { grid-column: 1 / -1; padding: 24px 0; color: var(--text-muted); font-size: 16px; }
.journal-page .sidebar-filter-btns a:focus-visible, .journal-page .popular-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Article page per the design, at readable sizes */
#page-article .art-content-wrap { padding-top: 0; }
#page-article .art-nav { font-size: 13px; color: rgba(0,40,70,0.6); }
#page-article .art-title { font-size: clamp(32px, 4vw, 48px); }
#page-article .art-byline { font-size: 15px; color: rgba(0,40,70,0.7); flex-wrap: wrap; }
#page-article .art-hero { aspect-ratio: auto; }
#page-article .art-hero img { max-height: 520px; object-fit: cover; object-position: center 30%; }
#page-article .art-hero figcaption { margin-top: 10px; font-size: 15px; color: var(--text-muted); text-align: center; }
#page-article .art-body { font-size: 18px; line-height: 1.6; color: var(--ink); }
#page-article .art-body > * { max-width: 70ch; }
#page-article .art-body h2 { font-size: 28px; line-height: 36px; }
#page-article .art-body h3 { font-size: 23px; line-height: 30px; }
#page-article .art-body h4 { font-size: 20px; line-height: 28px; font-family: 'Montserrat', sans-serif; color: var(--navy); margin: 24px 0 8px; }
#page-article .art-body .article-lead { font-size: 21px; line-height: 1.55; color: var(--navy); }
#page-article .art-body .article-accent { color: var(--teal); }
#page-article .art-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
#page-article .art-body .article-figure { margin: 32px 0; max-width: none; }
#page-article .art-body .article-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
#page-article .art-body .article-figure figcaption { margin-top: 10px; font-size: 15px; color: var(--text-muted); text-align: center; }
#page-article .art-body .video-frame { margin: 32px 0; max-width: none; }
#page-article .art-body blockquote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 3px solid var(--teal); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 1.45; color: var(--navy); }
#page-article .art-body li::marker { color: var(--teal); }
#page-article .art-footer-eyebrow { font-size: 12px; }
#page-article .art-footer-heading { font-size: 30px; }
#page-article .svc-back-link { font-size: 13px; }

/* Home blog block */
.blog-section .blog-search-wrap input { font-size: 16px; min-height: 48px; }
.blog-section .filter-pill { font-size: 12px; min-height: 40px; padding: 8px 16px; }
.blog-section .blog-count { font-size: 15px; }
.blog-section .blog-title { font-size: 20px; }
.blog-section .blog-title a { color: inherit; text-decoration: none; }
.blog-section .blog-tag { font-size: 11px; }
.blog-section .blog-read { font-size: 12px; }
.blog-all { text-align: center; margin: 40px 0 0; }

@media (max-width: 860px) {
  .journal-page .journal-wrap { padding: 24px 16px 48px; }
  .journal-page .journal-masthead { padding: 48px 16px 40px; }
  .journal-page .journal-title { font-size: 44px; }
  #page-article .art-content-wrap { padding-left: 16px; padding-right: 16px; }
  #page-article .art-body { font-size: 17px; }
}
/* Journal review fixes */
.journal-page .article-count { max-width: 1280px; margin: 0 auto; padding: 24px 40px 16px; }
.journal-page .ftcard { min-height: 320px; display: flex; }
.journal-page .ftcard > img, .journal-page .ftcard-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.journal-page .ftcard-title { font-size: 18px; line-height: 1.3; }
.journal-page .ftcard-content { padding: 16px 18px 18px; }
.article-card-ph span { font-size: 15px; font-family: 'Montserrat', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0,40,70,0.45); }
@media (max-width: 860px) { .journal-page .article-count { padding: 20px 16px 8px; } .journal-page .ftcard { min-height: 260px; } }
/* Journal contrast and tap fixes (measured) */
.journal-page .journal-tagline { color: rgba(255,255,255,0.78); }
.journal-page .ftcard-content .tag { background: rgba(255,255,255,0.94); color: var(--navy); }
.journal-page .section-label, .journal-page .sidebar-label, .journal-page .article-count { color: rgba(0,40,70,0.72); }
.journal-page .sidebar-index-link { min-height: 44px; display: flex; align-items: center; }
.blog-section .filter-pill { color: var(--navy); border-color: rgba(0,40,70,0.35); }
.blog-section .filter-pill:hover, .blog-section .filter-pill.active { color: #fff; }
.blog-section .blog-count { color: rgba(0,40,70,0.72); }
@media (max-width: 860px) { .section-subtext { font-size: 16px; } }
.tag-td, .blog-tag.tag-td { background: #006E8C; color: #fff; }
.tag-cs, .blog-tag.tag-cs { background: rgba(31,130,117,0.16); color: #0f4f47; }