:root {
      --ink: #3D5A7A;
      --ink-deep: #2A4360;
      --ink-night: #1B2F47;
      --sea: #A3BBD2;
      --sea-pale: #C9D8E6;
      --mist: #EAF0F6;          /* cool sea-mist — replaces warm cream-deep */
      --cream: #F9F5EE;         /* near-white with a hint of warmth — was #F4ECDC */
      --cream-paper: #FFFFFF;   /* clean white for card surfaces */
      --brick: #B86E4A;         /* secondary accent — used sparingly */
      --brick-deep: #9A5736;
      --brick-pale: #E2C2AC;
      --paper-line: #DDE3EA;    /* cool, neutral divider line — was warm tan */
      --muted: #4A5868;
      --quiet: #7A8696;

      --display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      --radius: 10px;       /* buttons, inputs, cards */
      --radius-lg: 18px;    /* feature images, larger panels */
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: var(--sans);
      color: var(--ink-deep);
      background: var(--cream);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img, video, svg { display: block; max-width: 100%; }
    a { color: inherit; }
    button, input { font: inherit; }
    ::selection { background: var(--brick); color: var(--cream); }

    .eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0 0 24px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .eyebrow::before, .eyebrow.both::after {
      content: '';
      width: 28px; height: 1px;
      background: var(--ink);
    }
    .eyebrow.dark { color: var(--sea-pale); }
    .eyebrow.dark::before, .eyebrow.dark::after { background: var(--sea-pale); }

    /* ============================ TOPBAR ============================ */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 24px 40px;
      z-index: 50;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
    }
    /* Header legibility scrim.
       The bar is transparent over the hero, so its white chrome sits on whatever
       frame the hero video happens to be showing. Measured against real glyph
       pixels, that lands anywhere from 2.1:1 to 6.7:1 depending on the frame —
       i.e. it fails AA intermittently, on every page, and a passing measurement
       is just a lucky frame. This guarantees the backdrop regardless of frame.
       It fades out entirely, so it reads as hero vignetting, not a bar. */
    .topbar::before {
      content: '';
      position: absolute; left: 0; right: 0; top: 0;
      height: 190px;
      background: linear-gradient(to bottom,
        rgba(20, 36, 56, 0.82) 0%,
        rgba(20, 36, 56, 0.62) 42%,
        rgba(20, 36, 56, 0.28) 74%,
        rgba(20, 36, 56, 0) 100%);
      pointer-events: none;
      z-index: -1;
      transition: opacity 0.35s ease;
    }
    /* Once scrolled the bar paints solid navy, so the scrim is redundant. */
    .topbar.scrolled::before { opacity: 0; }
    .topbar.scrolled {
      background: var(--ink-night);
      padding-top: 14px; padding-bottom: 14px;
      box-shadow: 0 1px 0 rgba(201, 216, 230, 0.16);
    }
    .topbar .seal {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: rgba(255,255,255,0.94);
      overflow: hidden;
      flex-shrink: 0;
      transition: width 0.35s ease, height 0.35s ease;
    }
    .topbar.scrolled .seal { width: 52px; height: 52px; }
    .brand-lockup { justify-self: start; display: flex; align-items: center; gap: 14px; }
    .topbar .seal img { width: 100%; height: 100%; object-fit: contain; }
    .topbar .opening {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.22em;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.82);
    }
    .topnav { display: flex; align-items: center; gap: 32px; justify-self: center; }
    .topnav a {
      color: rgba(255,255,255,0.82);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .topnav a:hover { color: #FFFFFF; }
    .topbar .join {
      padding: 11px 22px;
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: var(--radius);
      color: #FFFFFF;
      text-decoration: none;
      transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    }
    .topbar .join { justify-self: end; }
    .topbar .join:hover { background: #FFFFFF; color: var(--ink-deep); border-color: #FFFFFF; }

    /* Header quick-contact: call + text icons beside the CTA.
       Pattern proven on cementcreekvet.com — the number lives in data-num and is
       revealed as a tooltip. Two things that pattern gets right and are kept here:
       the reveal fires on :focus-visible as well as :hover (hover alone strands
       keyboard users), and the number is ALSO in each link's aria-label, because a
       CSS ::after tooltip is decorative and is NOT an accessible name.
       Colours mirror .join so the icons read as part of the same control group in
       both header states (transparent over hero, solid navy once .scrolled). */
    .topbar-actions {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .topbar-icon {
      position: relative;
      width: 40px; height: 40px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: var(--radius);
      color: #FFFFFF;
      text-decoration: none;
      transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    }
    .topbar-icon svg { width: 18px; height: 18px; display: block; }
    .topbar-icon:hover { background: #FFFFFF; color: var(--ink-deep); border-color: #FFFFFF; }
    .topbar-icon::after {
      content: attr(data-num);
      position: absolute; top: calc(100% + 10px); left: 50%;
      transform: translateX(-50%);
      background: var(--ink-night);
      color: #FFFFFF;
      /* .topbar sets 0.24em tracking + uppercase; a phone number needs neither. */
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: none; white-space: nowrap;
      padding: 7px 11px;
      border: 1px solid rgba(201,216,230,0.24);
      border-radius: var(--radius);
      opacity: 0; visibility: hidden;
      transition: opacity 0.18s ease;
      pointer-events: none;
      z-index: 60;
    }
    .topbar-icon:hover::after,
    .topbar-icon:focus-visible::after { opacity: 1; visibility: visible; }

    /* ============================ HERO — full video, no band ============================ */
    .hero {
      position: sticky;
      top: 0;
      z-index: 0;
      height: 100vh;
      min-height: 720px;
      background: var(--ink-night);
      color: var(--cream);
      overflow: hidden;
      isolation: isolate;
    }
    /* everything after the hero scrolls up over the pinned hero (tide effect) */
    .scroll-over { position: relative; z-index: 1; }
    /* footer is a <main> sibling now (for the landmark) — keep it above the sticky hero */
    footer.site { position: relative; z-index: 1; }
    .hero-media { position: absolute; inset: 0; z-index: 0; }
    .hero-media img,
    .hero-media video {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .hero-media img { position: absolute; inset: 0; object-position: center 55%; z-index: 0; }
    .hero-media video { position: absolute; inset: 0; object-position: center 60%; z-index: 1; }
    /* The homepage hero has its OWN scrim system — .hero-scrim, not the
       .careers-hero/.scrim pair the service pages use, so .hero-bright does
       nothing here. The 0.20 band at 58% sat exactly under the h1 + headline
       and measured 1.67-2.29:1 over bright frames. Raised 2026-08-20. */
    .hero-scrim {
      position: absolute; inset: 0;
      background:
        linear-gradient(to top,
          rgba(20, 36, 56, 0.86) 0%,
          rgba(20, 36, 56, 0.66) 32%,
          rgba(20, 36, 56, 0.56) 58%,
          rgba(20, 36, 56, 0.66) 100%),
        rgba(20, 36, 56, 0.16);
      z-index: 1;
    }
    .hero-inner {
      position: relative;
      z-index: 3;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: clamp(64px, 10vh, 120px);
    }
    .hero-inner .lead-in {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.84);
      margin: 0 0 28px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .hero-inner .lead-in::before {
      content: '';
      width: 40px; height: 1px;
      background: rgba(255,255,255,0.6);
    }
    .hero h1 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(64px, 10vw, 152px);
      line-height: 0.96;
      letter-spacing: -0.03em;
      margin: 0 0 40px;
      color: #FFFFFF;
      max-width: 16ch;
    }
    .hero h1 .light {
      font-weight: 300;
      color: var(--sea-pale);
    }
    .hero-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .hero-row .left {
      font-family: var(--sans);
      font-size: clamp(16px, 1.4vw, 19px);
      font-weight: 400;
      line-height: 1.55;
      color: rgba(255,255,255,0.86);
      max-width: 42ch;
      margin: 0;
    }
    .hero-row .right {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      text-align: right;
      line-height: 1.9;
    }
    .hero-row .right .pin {
      color: var(--sea-pale);
      margin-right: 8px;
    }

    /* ============================ NAME STORY (reverted to V1 centered) ============================ */
    .story {
      position: relative;
      background: var(--cream);
      padding: clamp(120px, 18vh, 180px) 48px clamp(96px, 14vh, 140px);
      text-align: center;
    }
    .story-rise { will-change: transform; }
    /* Seal cutout at the top — visual link from hero into paper */
    .story .seal-inset {
      position: absolute;
      top: 0; left: 50%;
      transform: translate(-50%, -50%);
      will-change: transform;
      width: 132px; height: 132px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--cream);
      box-shadow: 0 0 0 1px var(--ink), 0 0 0 14px var(--cream);
    }
    .story .seal-inset img { width: 100%; height: 100%; object-fit: contain; }

    .story h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(36px, 4.4vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink-deep);
      max-width: 18ch;
      margin: 0 auto 32px;
    }
    .story h2 .light {
      font-weight: 300;
      color: var(--ink);
      font-style: italic;
    }
    .story-prose {
      max-width: 640px;
      margin: 0 auto;
    }
    .story-prose p {
      font-family: var(--sans);
      font-size: clamp(17px, 1.3vw, 19px);
      line-height: 1.7;
      color: var(--muted);
      margin: 0 0 1.2em;
    }
    .story-prose p:last-child { margin-bottom: 0; }
    .story-prose em { color: var(--ink); font-style: italic; }

    .signature {
      margin-top: 40px;
      font-family: var(--sans);
      font-style: italic;
      font-size: 18px;
      color: var(--ink);
    }
    .signature::before {
      content: '— ';
      color: var(--ink);
      font-style: normal;
    }

    /* Signup inline beneath story */
    .signup {
      max-width: 540px;
      margin: 56px auto 0;
    }
    .signup .label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0 0 16px;
    }
    .ml-form {
      display: flex;
      border: 1px solid var(--ink-deep);
      background: var(--cream-paper);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .ml-form input {
      flex: 1;
      padding: 18px 22px;
      border: 0;
      background: transparent;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink-deep);
      outline: none;
    }
    .ml-form input::placeholder { color: var(--quiet); font-style: italic; }
    .ml-form button {
      padding: 18px 30px;
      background: var(--ink-deep);
      color: #FFFFFF;
      border: 0;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s ease;
    }
    .ml-form button:hover { background: var(--ink-night); }
    .ml-foot {
      font-size: 12px;
      color: var(--quiet);
      margin: 14px 0 0;
      font-family: var(--sans);
      font-style: italic;
    }

    /* ============================ EDITORIAL IMAGE BAND — Santa Barbara dog ============================ */
    .image-band {
      position: relative;
      height: clamp(420px, 62vh, 640px);
      overflow: hidden;
      background: var(--ink-night);
    }
    .image-band img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 35%;
    }
    .image-band::after {
      content: '';
      position: absolute; inset: 0;
      background: rgba(27, 47, 71, 0.40);
    }
    .image-band .caption {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: 56px;
      gap: 32px;
    }
    .image-band .caption .line {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(20px, 1.8vw, 28px);
      line-height: 1.35;
      color: #FFFFFF;
      max-width: 32ch;
      margin: 0;
    }
    .image-band .caption .credit {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.8);
      text-align: right;
      line-height: 1.6;
    }
    .image-band .caption .credit .dot { color: var(--sea-pale); margin: 0 6px; }

    /* ============================ BRICK PULL-QUOTE ============================ */
    .quote {
      position: relative;
      padding: clamp(120px, 20vh, 200px) 48px;
      background-color: var(--brick-deep);
      background-image: url('../images/brick-wall.webp');
      background-size: cover;
      background-position: center 55%;
      color: var(--cream);
      text-align: center;
      isolation: isolate;
    }
    .quote::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to top,
          rgba(20, 36, 56, 0.78) 0%,
          rgba(20, 36, 56, 0.42) 32%,
          rgba(20, 36, 56, 0.20) 58%,
          rgba(20, 36, 56, 0.46) 100%),
        rgba(20, 36, 56, 0.12);
      z-index: 0;
    }
    .quote-inner {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
    }
    .quote-text {
      font-family: var(--display);
      font-weight: 400;
      color: #FFFFFF;
      margin: 0;
      max-width: 42ch;
      text-align: left;
      text-shadow: 0 2px 28px rgba(20, 36, 56, 0.55);
    }
    .quote-text .lead {
      display: block;
      font-weight: 600;
      font-size: clamp(40px, 6vw, 84px);
      line-height: 1.02;
      letter-spacing: -0.03em;
      max-width: 14ch;
      margin: 0;
    }
    .quote-text .light {
      display: block;
      font-weight: 300;
      font-size: clamp(20px, 2.4vw, 32px);
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--sea-pale);
      font-style: italic;
      max-width: 38ch;
      margin: 0.6em 0 0;
    }
    .quote-attr {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      display: inline-flex;
      align-items: center;
      gap: 16px;
      text-shadow: 0 2px 20px rgba(20, 36, 56, 0.5);
    }
    .quote-attr::before,
    .quote-attr::after {
      content: '';
      width: 32px; height: 1px;
      background: rgba(255,255,255,0.5);
    }

    /* ============================ SERVICES — split: list + image ============================ */
    /* Services + FAQ sit on one shared blue->cream gradient */
    .grad-blue-cream { background: linear-gradient(to bottom, var(--mist) 0%, var(--cream) 100%); }
    .services {
      background: transparent;
      padding: 0;
    }
    .services-grid {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .services-list-col {
      padding: clamp(96px, 16vh, 160px) clamp(40px, 6vw, 88px) clamp(96px, 16vh, 160px);
    }
    .services-image-col {
      position: relative;
      min-height: 600px;
      overflow: hidden;
    }
    .services-image-col img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 30% 45%;
    }

    .services-head h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(36px, 4.4vw, 60px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink-deep);
      margin: 0 0 24px;
      max-width: 18ch;
    }
    .services-head h2 .light {
      font-weight: 300;
      color: var(--ink);
      font-style: italic;
    }
    .services-head .lede {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 64px;
      max-width: 36ch;
    }

    .services-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .service {
      display: grid;
      grid-template-columns: 36px 1fr;
      column-gap: 24px;
      padding: 28px 0;
      border-top: 1px solid var(--paper-line);
      align-items: baseline;
    }
    .service:last-child { border-bottom: 1px solid var(--paper-line); }
    .service .num {
      font-family: var(--display);
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.16em;
      color: var(--ink);
      padding-top: 6px;
    }
    .service h3 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(22px, 2.2vw, 28px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: var(--ink-deep);
      margin: 0 0 8px;
    }
    .service p {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
      max-width: 48ch;
    }

    /* ============================ Q&A ============================ */
    .qa {
      background: transparent;
      padding: clamp(96px, 16vh, 160px) 0;
    }
    .qa-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .qa-head {
      text-align: center;
      margin-bottom: 56px;
    }
    .qa-head .eyebrow {
      display: inline-block;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--ink);
      margin: 0 0 22px;
    }
    .qa-head h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.025em;
      color: var(--ink-deep);
      margin: 0 auto;
      max-width: 20ch;
    }
    .qa-head h2 .light { font-weight: 300; color: var(--ink); font-style: italic; }

    /* accordion */
    .qa-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 64px;
      border-top: 1px solid var(--paper-line);
      align-content: start;
    }
    .qa-item {
      border-bottom: 1px solid var(--paper-line);
      align-self: start;
    }
    .qa-q {
      width: 100%;
      background: none;
      border: 0;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 26px 2px;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(17px, 1.9vw, 21px);
      line-height: 1.32;
      letter-spacing: -0.01em;
      color: var(--ink-deep);
      transition: color .25s ease;
    }
    .qa-q:hover { color: var(--ink); }
    .qa-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
    .qa-item.is-open .qa-q { color: var(--ink); }

    .qa-icon {
      flex: none;
      position: relative;
      width: 18px; height: 18px;
      margin-top: 2px;
    }
    .qa-icon::before, .qa-icon::after {
      content: '';
      position: absolute;
      background: var(--ink);
      transition: transform .3s ease, opacity .3s ease;
    }
    .qa-icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
    .qa-icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
    .qa-item.is-open .qa-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

    .qa-a-wrap {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
    }
    .qa-item.is-open .qa-a-wrap { grid-template-rows: 1fr; }
    .qa-a { overflow: hidden; min-height: 0; }
    .qa-a-inner {
      padding: 2px 2px 30px;
      max-width: 62ch;
      font-family: var(--sans);
      font-size: 15.5px;
      line-height: 1.65;
      color: var(--muted);
    }
    .qa-a-inner p { margin: 0 0 0.7em; }
    .qa-a-inner p:last-child { margin-bottom: 0; }
    .qa-a-inner a { color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--sea); text-underline-offset: 3px; }

    /* ============================ CAREERS ============================ */
    .careers {
      background: var(--ink-night);
      color: var(--cream);
      padding: clamp(96px, 16vh, 160px) 48px;
    }
    .careers-wrap {
      max-width: 1240px;
      margin: 0 auto;
    }
    .careers-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(201, 216, 230, 0.28);
      margin-bottom: 64px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--sea-pale);
    }
    .careers-top .ed { color: rgba(244, 236, 220, 0.72); }

    .careers-grid {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 72px;
      align-items: start;
    }
    .careers-grid h2 {
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(48px, 7.2vw, 112px);
      line-height: 0.92;
      letter-spacing: -0.035em;
      color: #FFFFFF;
      margin: 0 0 24px;
    }
    .careers-grid h2 .light {
      display: block;
      font-weight: 300;
      color: var(--sea-pale);
      font-style: italic;
      font-size: 0.42em;
      letter-spacing: -0.015em;
      margin-top: 20px;
      line-height: 1.25;
    }
    .careers-grid .right p {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.65;
      color: rgba(233, 240, 247, 0.90);
      margin: 0 0 1.2em;
    }
    .careers-grid .right p em { color: var(--sea-pale); font-style: italic; font-weight: 500; }

    .careers-roles {
      margin-top: 56px;
      display: block;
      border-top: 1px solid var(--paper-line);
    }
    .careers-roles .role {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--paper-line);
      border-radius: 0;
      padding: 26px 6px;
      cursor: pointer;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 28px;
      text-align: left;
      transition: padding-left 0.28s ease, color 0.2s ease;
    }
    .careers-roles .role:hover { padding-left: 16px; }
    .careers-roles .role .role-title {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(21px, 2.4vw, 30px);
      color: var(--ink-deep);
      line-height: 1.2;
      letter-spacing: -0.012em;
      transition: color 0.2s ease;
    }
    .careers-roles .role:hover .role-title { color: var(--ink); }
    .careers-roles .role .ab {
      flex: none;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
    }

    .careers-benefits {
      margin: 32px 0 0;
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(201, 216, 230, 0.72);
      max-width: 72ch;
    }

    /* careers application form */
    .careers-apply-bar { margin-top: 44px; }
    #apply-toggle.is-open { display: none; }

    .careers-apply {
      margin-top: 44px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 56px;
      align-items: stretch;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .careers-apply[hidden] { display: none; }
    .careers-apply.revealed { opacity: 1; transform: none; }
    .careers-form-head {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      margin: 0 0 12px;
    }
    .careers-form-sub {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(201, 216, 230, 0.78);
      margin: 0 0 32px;
      max-width: 44ch;
    }
    .careers-apply-image {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 100%;
    }
    .careers-apply-image img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .careers-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px 24px;
    }
    .careers-form .field { display: flex; flex-direction: column; gap: 8px; }
    .careers-form .field-file,
    .careers-form .btn-apply { grid-column: 1 / -1; }
    .careers-form label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sea-pale);
    }
    .careers-form input,
    .careers-form select {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(201, 216, 230, 0.3);
      border-radius: var(--radius);
      padding: 14px 16px;
      color: #FFFFFF;
      font-family: var(--sans);
      font-size: 15px;
      width: 100%;
    }
    .careers-form input:focus,
    .careers-form select:focus {
      outline: none;
      border-color: var(--sea-pale);
      background: rgba(255, 255, 255, 0.1);
    }
    .careers-form select option { color: var(--ink-night); }
    .careers-form input[type="file"] { padding: 11px 14px; color: rgba(255, 255, 255, 0.72); }
    .careers-form input[type="file"]::file-selector-button {
      margin-right: 14px;
      padding: 8px 16px;
      border: 1px solid rgba(201, 216, 230, 0.4);
      border-radius: var(--radius);
      background: transparent;
      color: var(--sea-pale);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .careers-form .btn-apply { justify-self: start; cursor: pointer; margin-top: 6px; }

    .form-sent {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--ink-deep);
      margin: 8px 0 0;
    }
    .careers-apply .form-sent,
    .closer-signup .form-sent { color: var(--sea-pale); }
    .btn-apply {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 36px;
      background: var(--cream);
      color: var(--ink-deep);
      border: 0;
      border-radius: var(--radius);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.25s ease, transform 0.2s ease;
    }
    .btn-apply:hover {
      background: #FFFFFF;
      transform: translateY(-1px);
    }
    .btn-apply svg { width: 16px; height: 16px; }

    /* ============================ INVITATION — address + signup ============================ */
    .invite {
      background: var(--cream);
      padding: clamp(96px, 16vh, 160px) 0 80px;
    }
    .invite-wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .invite-top {
      padding-bottom: 56px;
      margin-bottom: 56px;
      border-bottom: 1px solid var(--paper-line);
    }
    .invite-top .eyebrow {
      display: inline-block;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--ink);
      margin: 0 0 22px;
    }
    .invite-top h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(40px, 6vw, 88px);
      line-height: 0.96;
      letter-spacing: -0.03em;
      color: var(--ink-deep);
      margin: 0;
      max-width: 16ch;
    }
    .invite-top h2 .light { font-weight: 300; color: var(--ink); font-style: italic; }
    .invite-top .right p {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
      max-width: 44ch;
    }

    .invite-card {
      margin-top: 80px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 80px;
      align-items: start;
    }
    /* Standalone contact page: no invite-top above the card, so drop the orphaned top margin */
    .invite.is-page .invite-card { margin-top: 0; }
    .invite.is-page .address > .eyebrow { display: inline-flex; margin: 0 0 26px; }

    /* Contact page: map sits flush against the footer (drop section bottom padding) */
    .invite.is-page { padding-bottom: 0; }

    /* Embedded Google map on the contact page */
    .contact-map {
      /* full-bleed: break out of the centered .invite-wrap to span the viewport */
      margin: clamp(48px, 7vh, 88px) calc(50% - 50vw) 0;
      width: auto;
    }
    .contact-map iframe {
      display: block;
      width: 100%;
      height: clamp(360px, 52vh, 560px);
      border: 0;
      border-radius: 0;
    }

    /* Contact page: balanced address | message-form layout */
    .invite.is-page .invite-card {
      margin-top: 0;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 5vw, 72px);
    }
    .address .tel-link {
      color: var(--ink-deep);
      text-decoration: none;
      border-bottom: 1px solid var(--paper-line);
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    .address .tel-link:hover,
    .address .tel-link:focus-visible { color: var(--ink); border-color: var(--ink); }

    /* Contact page: "Send us a message" form card — dark ink card on the cream section */
    .contact-form-col {
      background: var(--ink-deep);
      border-radius: var(--radius-lg);
      padding: clamp(28px, 3vw, 40px);
      color: var(--cream);
    }
    .contact-form-col h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(26px, 2.6vw, 34px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      margin: 0 0 10px;
    }
    .contact-form-col h2 .light { font-weight: 300; color: var(--sea-pale); font-style: italic; }
    .contact-form-sub {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(201, 216, 230, 0.82);
      margin: 0 0 26px;
      max-width: 46ch;
    }
    .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
    .contact-form .field { display: flex; flex-direction: column; gap: 8px; }
    .contact-form .field-wide,
    .contact-form .btn-apply { grid-column: 1 / -1; }
    .contact-form label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sea-pale);
    }
    .contact-form input,
    .contact-form textarea {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(201, 216, 230, 0.3);
      border-radius: var(--radius);
      padding: 14px 16px;
      color: #FFFFFF;
      font-family: var(--sans);
      font-size: 15px;
      width: 100%;
    }
    .contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color: rgba(201, 216, 230, 0.6); }
    .contact-form input:focus,
    .contact-form textarea:focus { outline: none; border-color: var(--sea-pale); background: rgba(255, 255, 255, 0.1); }
    .contact-form .btn-apply {
      background: var(--sea);
      color: var(--ink-deep);
      justify-self: start;
      cursor: pointer;
      margin-top: 4px;
    }
    .contact-form .btn-apply:hover { background: var(--sea-pale); }
    .contact-form-col .form-sent { color: var(--sea-pale); }

    @media (max-width: 920px) {
      .invite.is-page .invite-card { grid-template-columns: 1fr; }
    }
    @media (max-width: 540px) {
      .contact-form { grid-template-columns: 1fr; }
    }
    .address .line1 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(36px, 4.4vw, 56px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink-deep);
      margin: 0 0 6px;
    }
    .address .line2 {
      font-family: var(--display);
      font-weight: 300;
      font-size: clamp(20px, 1.8vw, 26px);
      color: var(--ink);
      margin: 0 0 14px;
      letter-spacing: -0.015em;
      font-style: italic;
    }
    /* Address → Google Maps directions link (contact card) */
    .address .addr-link {
      display: block;
      text-decoration: none;
      color: inherit;
      margin: 0 0 36px;
    }
    .address .addr-link .line2 { margin-bottom: 14px; }
    .address .addr-link .directions {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      transition: color .2s ease, transform .2s ease;
    }
    .address .addr-link:hover .line1,
    .address .addr-link:focus-visible .line1 { color: var(--ink); }
    .address .addr-link:hover .directions,
    .address .addr-link:focus-visible .directions { color: var(--ink-deep); }
    /* Address → Google Maps directions link (hero) */
    .hero-row .right .addr-link {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      text-decoration-color: rgba(255, 255, 255, 0.35);
      transition: text-decoration-color .2s ease, color .2s ease;
    }
    .hero-row .right .addr-link:hover,
    .hero-row .right .addr-link:focus-visible {
      color: var(--sea-pale);
      text-decoration-color: var(--sea-pale);
    }
    .address-grid {
      display: grid;
      grid-template-columns: repeat(2, auto);
      column-gap: 48px;
      row-gap: 24px;
      padding-top: 32px;
      border-top: 1px solid var(--paper-line);
    }
    .address-grid .k,
    .urgent-note .k {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0 0 8px;
    }
    .address-grid .v {
      font-family: var(--sans);
      font-size: 16px;
      color: var(--ink-deep);
      line-height: 1.5;
      margin: 0;
    }

    /* Urgent care sits with the visit facts, not in a section of its own —
       same hairline rhythm as .address-grid, one column so the paragraph
       keeps a readable measure. */
    .urgent-note {
      margin-top: 26px;
      padding-top: 26px;
      border-top: 1px solid var(--paper-line);
    }
    .urgent-note p:last-child {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.65;
      color: var(--muted);
      margin: 0;
      max-width: 46ch;
    }

    .closer-signup {
      padding: 36px 36px 40px;
      background: var(--ink-deep);
      color: var(--cream);
      border-radius: var(--radius-lg);
    }
    .closer-signup .small {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--sea-pale);
      margin: 0 0 16px;
    }
    .closer-signup h3,
    .closer-signup h2 {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(24px, 2.4vw, 30px);
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: #FFFFFF;
      margin: 0 0 24px;
    }
    .closer-signup h3 .light,
    .closer-signup h2 .light { font-weight: 300; color: var(--sea-pale); font-style: italic; }
    .closer-signup form { display: flex; flex-direction: column; gap: 10px; }
    .closer-signup input {
      padding: 14px 16px;
      border: 1px solid rgba(201, 216, 230, 0.4);
      border-radius: var(--radius);
      background: transparent;
      color: #FFFFFF;
      font-family: var(--sans);
      font-size: 14px;
      outline: none;
    }
    .closer-signup input::placeholder { color: rgba(244, 236, 220, 0.55); font-style: italic; }
    .closer-signup button {
      padding: 14px 16px;
      background: var(--sea);
      color: var(--ink-deep);
      border: 0;
      border-radius: var(--radius);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s ease;
    }
    .closer-signup button:hover { background: var(--sea-pale); }
    .closer-signup .fine {
      font-family: var(--sans);
      font-style: italic;
      font-size: 13px;
      color: rgba(244, 236, 220, 0.82);
      margin: 14px 0 0;
    }

    /* ============================ FOOTER ============================ */
    footer.site {
      background: var(--ink-night);
      color: var(--cream);
      padding: 72px 48px 32px;
    }
    footer.site .wrap {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.7fr 1fr 1.15fr 1.3fr;
      gap: 56px;
      align-items: start;
      padding-bottom: 44px;
      border-bottom: 1px solid rgba(201, 216, 230, 0.18);
    }

    /* Brand column */
    footer.site .foot-brand { max-width: 360px; }
    footer.site .brand { display: flex; align-items: center; gap: 16px; }
    footer.site .seal {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--cream);
      overflow: hidden;
      flex-shrink: 0;
    }
    footer.site .seal img { width: 100%; height: 100%; object-fit: contain; }
    footer.site .brand .name {
      font-family: var(--display);
      font-size: 17px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 1.15;
      letter-spacing: -0.005em;
    }
    footer.site .brand .footer-opening {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--sea-pale);
      margin-top: 6px;
    }
    footer.site .foot-tagline {
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.65;
      color: rgba(201, 216, 230, 0.82);
      margin: 22px 0 20px;
    }

    /* Column heads */
    footer.site .foot-head {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--sea-pale);
      margin: 0 0 18px;
    }

    /* Link + info lists */
    footer.site .foot-col ul {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }
    footer.site .foot-col a {
      color: rgba(201, 216, 230, 0.82);
      text-decoration: none;
      font-family: var(--sans);
      font-size: 14px;
      transition: color 0.2s ease;
    }
    footer.site .foot-col a:hover { color: #FFFFFF; }

    footer.site .foot-info li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.5;
      color: rgba(201, 216, 230, 0.82);
    }
    footer.site .foot-info svg {
      width: 17px; height: 17px;
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--sea);
    }
    footer.site .foot-info .lbl {
      display: block;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(201, 216, 230, 0.72);
      margin-bottom: 3px;
    }

    /* Bottom legal bar */
    footer.site .bottom {
      max-width: 1240px;
      margin: 24px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(201, 216, 230, 0.8);
    }
    footer.site .bottom .credit {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: none;
    }
    footer.site .bottom .credit a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
      text-decoration-color: rgba(201, 216, 230, 0.4);
      transition: color .2s ease, text-decoration-color .2s ease;
    }
    footer.site .bottom .credit a:hover {
      color: var(--sea-pale);
      text-decoration-color: var(--sea-pale);
    }

    /* ============================ Reveal ============================ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .reveal.in { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .hero video { display: none; }
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* ============================ Mobile ============================ */
    @media (max-width: 920px) {
      .topbar { padding: 18px 22px; }
      .topbar.scrolled { padding: 12px 22px; }
      .topnav { display: none; }
      .topbar .opening { display: none; }
      .hero-inner { padding: 0 24px clamp(40px, 8vh, 80px); }
      .hero h1 { font-size: clamp(48px, 14vw, 80px); max-width: 14ch; }
      .hero-row .right { text-align: left; }

      .quote { background-size: cover; background-position: 50% 56%; }

      .story { padding: 96px 24px 80px; }
      .story .seal-inset { width: 104px; height: 104px; }

      .image-band, .quiet { height: clamp(320px, 52vh, 480px); }
      .image-band .caption { flex-direction: column; align-items: flex-start; padding: 0 24px 40px; }
      .image-band .caption .credit { text-align: left; }

      .quote { padding: 80px 24px; }

      .services-grid { grid-template-columns: 1fr; }
      .services-list-col { padding: 80px 24px; }
      .services-image-col { min-height: 420px; order: -1; }

      .qa-wrap { padding: 0 24px; }
      .qa-list { grid-template-columns: 1fr; column-gap: 0; }
      .qa-q { padding: 22px 2px; }

      .careers { padding: 80px 24px; }
      .careers-grid { grid-template-columns: 1fr; gap: 40px; }
      .careers-roles { grid-template-columns: 1fr; gap: 14px; }
      .careers-apply { grid-template-columns: 1fr; gap: 32px; }
      .careers-form { grid-template-columns: 1fr; }
      .careers-apply-image { min-height: 320px; order: -1; }

      .invite-wrap { padding: 0 24px; }
      .invite-top, .invite-card { grid-template-columns: 1fr; gap: 32px; }
      .invite-top { padding-bottom: 48px; }
      .invite-card { margin-top: 48px; }
      .address-grid { grid-template-columns: 1fr; column-gap: 0; }

      footer.site { padding: 56px 24px 28px; }
      footer.site .wrap { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
      footer.site .foot-brand { grid-column: 1 / -1; max-width: 480px; }
      footer.site .bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    /* Footer: single column on small phones */
    @media (max-width: 560px) {
      footer.site .wrap { grid-template-columns: 1fr; gap: 36px; }
      footer.site .foot-brand { grid-column: auto; }
    }

    /* ===== Small phones (<=400px): stack inline pairs that crowd ===== */
    @media (max-width: 400px) {
      /* Mailing-list signup: stack email input above a full-width button
         (was inline; the button got clipped by .ml-form overflow:hidden) */
      .ml-form { flex-direction: column; }
      .ml-form input { width: 100%; }
      .ml-form button {
        width: 100%;
        padding: 16px 22px;
        border-top: 1px solid var(--ink-deep);
      }

      /* Careers role rows: stack the title above its badge so the
         nowrap badge stops running off the right edge */
      .careers-roles .role { flex-direction: column; align-items: flex-start; gap: 8px; }
      .careers-roles .role .ab { white-space: normal; }
    }
/* ===== Dedicated careers page (careers.html) ===== */
.careers.is-page { padding-top: clamp(80px, 12vh, 130px); }
.careers.is-page .careers-grid h2 { font-size: clamp(38px, 5vw, 68px); }
.careers.is-page .careers-grid h2 .light { display: inline; font-size: 1em; }

/* ===== Hiring teaser band (splash -> links to careers.html) ===== */
.hiring-teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink-night);
  background-image: url('../images/hiring-teaser.webp');
  background-size: cover;
  background-position: center 40%;
  color: #FFFFFF;
  padding: clamp(96px, 15vh, 150px) 48px;
}
.hiring-teaser::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 36, 56, 0.74);
  z-index: 0;
}
.hiring-teaser-wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; text-align: center; }
.hiring-teaser .eyebrow { display: inline-block; padding-bottom: 10px; margin: 0 0 22px; border-bottom: 1px solid rgba(201, 216, 230, 0.45); color: var(--sea-pale); }
.hiring-teaser h2 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.025em; color: #FFFFFF; margin: 0 auto 18px; }
.hiring-teaser h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.hiring-teaser .lede { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: rgba(201, 216, 230, 0.82); max-width: 56ch; margin: 0 auto 36px; }

/* ===== Careers page = LIGHT content theme (navy header + footer bookend it) ===== */
.careers.is-page { background: linear-gradient(to bottom, var(--mist) 0%, var(--cream) 100%); color: var(--ink-deep); }
.careers.is-page .careers-top { color: var(--ink); border-bottom-color: var(--paper-line); }
.careers.is-page .careers-grid h2 { color: var(--ink-deep); }
.careers.is-page .careers-grid .right p { color: var(--muted); }
.careers.is-page .careers-grid .right p em { color: var(--ink); }
.careers.is-page .careers-roles .role { border-bottom-color: var(--paper-line); }
.careers.is-page .careers-benefits { color: var(--muted); }
.careers.is-page .careers-form-head { color: var(--ink-deep); }
.careers.is-page .careers-form-sub { color: var(--muted); }
.careers.is-page .careers-form label { color: var(--ink); }
.careers.is-page .careers-form input,
.careers.is-page .careers-form select { background: var(--cream-paper); border-color: var(--paper-line); color: var(--ink-deep); }
.careers.is-page .careers-form input::placeholder { color: var(--quiet); }
.careers.is-page .careers-form input:focus,
.careers.is-page .careers-form select:focus { border-color: var(--ink); background: var(--cream-paper); }
.careers.is-page .careers-form input[type="file"] { color: var(--muted); }
.careers.is-page .careers-form input[type="file"]::file-selector-button { border-color: var(--paper-line); color: var(--ink); }
.careers.is-page .btn-apply { background: var(--ink-deep); color: #FFFFFF; }
.careers.is-page .btn-apply:hover { background: var(--ink-night); }
.careers.is-page .form-sent { color: var(--ink-deep); }

/* ===== Careers page hero + emotional pull-quote ===== */
.careers-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-night);
  color: #FFFFFF;
  isolation: isolate;
}
.careers-hero-media { position: absolute; inset: 0; z-index: 0; }
.careers-hero-media img,
.careers-hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.careers-hero-media img { z-index: 0; }
.careers-hero-media video { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .careers-hero-media video { display: none; }
}
.careers-hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20, 36, 56, 0.84) 0%, rgba(20, 36, 56, 0.34) 46%, rgba(20, 36, 56, 0.34) 100%),
    rgba(20, 36, 56, 0.08);
  z-index: 1;
}
/* Strong-scrim variant for heroes whose media is bright enough that the 0.34 top
   band leaves white chrome under 4.5:1. Measured on tour.html (sunlit room video):
   0.34 -> ~2.8:1, this -> AA. Apply to any hero with bright/high-key footage. */
.careers-hero.hero-bright .scrim {
  background:
    linear-gradient(to top, rgba(20, 36, 56, 0.88) 0%, rgba(20, 36, 56, 0.58) 46%, rgba(20, 36, 56, 0.66) 100%),
    rgba(20, 36, 56, 0.10);
}

/* TEAM hero — directional scrim. APPROVED by Brees 2026-08-25 over a flat
   .hero-bright wash, which passed AA but flattened the golden hour to navy.
   The headline occupies the LEFT ~60%; the sunset and the paw/hand land RIGHT,
   so this darkens hard behind the text and stays light over the sky. It is both
   warmer AND safer than the flat version: the text sits where the scrim is
   heaviest, so worst-frame h1 measured 4.56:1 vs 3.85:1 flat (need 3).
   🔴 MEASURED across all 11 sampled frames of the 6s clip, because a single
   reading is a lucky frame -- this site has shipped a failing hero that way
   before. Do NOT retune without re-running .qa/team-hero-frames.mjs. */
.careers-hero.team-hero.hero-bright .scrim {
  background:
    linear-gradient(to right,
      rgba(20, 36, 56, 0.88) 0%,
      rgba(20, 36, 56, 0.80) 34%,
      rgba(20, 36, 56, 0.46) 58%,
      rgba(20, 36, 56, 0.22) 78%,
      rgba(20, 36, 56, 0.16) 100%),
    linear-gradient(to top,
      rgba(20, 36, 56, 0.62) 0%,
      rgba(20, 36, 56, 0.20) 40%,
      rgba(20, 36, 56, 0.42) 100%);
}

.careers-hero .inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px clamp(56px, 9vh, 110px);
}
.careers-hero .eyebrow { margin: 0 0 24px; color: rgba(255, 255, 255, 0.92); }
.careers-hero .eyebrow::before, .careers-hero .eyebrow::after { background: rgba(255, 255, 255, 0.55); }
.careers-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(20, 36, 56, 0.4);
}
.careers-hero h1 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }

.careers-perks {
  margin: clamp(72px, 11vh, 120px) auto 0;
  max-width: 780px;
  text-align: center;
}
.careers.is-page .careers-quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 20px;
}
.careers.is-page .careers-quote .light { font-weight: 300; font-style: italic; color: var(--ink); }
.careers.is-page .careers-perks .careers-benefits {
  margin: 0 auto;
  max-width: 58ch;
  text-align: center;
}

@media (max-width: 920px) {
  .careers-hero { min-height: 72vh; }
  .careers-hero .inner { padding: 0 24px clamp(40px, 7vh, 72px); }
}

/* ============================================================
   Skip link + global focus ring (a11y baseline — all pages)
   ============================================================ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--ink-deep);
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--sea-pale);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.topbar a:focus-visible,
.topbar .join:focus-visible,
footer.site a:focus-visible,
.svc-cta a:focus-visible,
.careers-hero a:focus-visible {
  outline-color: var(--sea-pale);
}

/* ============================================================
   Service pages (wellness.html and future service pages)
   ============================================================ */
.service-hero { min-height: clamp(440px, 64vh, 640px); }
/* Lift the hero title so the overlap card has room beneath it */
.service-hero .inner { padding-bottom: clamp(140px, 20vh, 230px); }

.svc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }

/* Intro = a cream card that overlaps up into the bottom of the hero */
.svc-intro { background: var(--cream); padding: 0 0 clamp(96px, 14vh, 180px); }
.svc-intro .svc-wrap { max-width: 1440px; padding: 0 clamp(40px, 6vw, 88px); }
.svc-intro-card {
  position: relative;
  z-index: 3;
  margin-top: clamp(-112px, -10vh, -66px);
  max-width: 880px;
  background: var(--cream-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4.5vw, 60px) clamp(30px, 4.5vw, 66px);
  box-shadow: 0 34px 90px rgba(20, 36, 56, 0.20);
}
.svc-intro .eyebrow { margin: 0 0 20px; }
.svc-intro .lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.9vw, 38px);
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  max-width: 30ch;
  margin: 0;
  text-wrap: balance;
}
.svc-intro .lead .light { font-weight: 300; font-style: italic; color: var(--ink); }
/* Optional second line beneath the intro lead (client copy that qualifies the lead). */
.svc-intro-sub {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.68;
  color: var(--muted);
}
@media (max-width: 720px) {
  .svc-intro-card { margin-top: clamp(-67px, -8vh, -39px); padding: clamp(28px, 7vw, 40px); }
}

/* Gentle load/scroll stagger (only active when .reveal is animating;
   under prefers-reduced-motion .reveal is forced still, so these no-op). */
.careers-hero .inner > *.reveal { transition-delay: 70ms; }
.careers-hero .inner > *:first-child.reveal { transition-delay: 0ms; }
.svc-intro .svc-wrap > *:nth-child(2).reveal { transition-delay: 100ms; }
.svc-split-list li:nth-child(2).reveal { transition-delay: 90ms; }
.svc-darklist li:nth-child(2).reveal { transition-delay: 70ms; }
.svc-darklist li:nth-child(3).reveal { transition-delay: 140ms; }
.svc-darklist li:nth-child(4).reveal { transition-delay: 210ms; }
.svc-darklist li:nth-child(5).reveal { transition-delay: 280ms; }
/* Dentistry treatment-journey ("Our approach") — each step reveals as its own beat */
.dn-step:nth-child(2).reveal { transition-delay: 90ms; }
.dn-step:nth-child(3).reveal { transition-delay: 180ms; }
.dn-step:nth-child(4).reveal { transition-delay: 270ms; }
.dn-step:nth-child(5).reveal { transition-delay: 360ms; }

.svc-section { background: var(--cream); padding: clamp(36px, 6vh, 64px) 0 clamp(72px, 11vh, 130px); }
.svc-block {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(40px, 6vh, 68px) 0;
  border-top: 1px solid var(--paper-line);
}
.svc-block:first-child { border-top: 0; }
.svc-head { align-self: start; }
@media (min-width: 921px) { .svc-head { position: sticky; top: 104px; } }
.svc-head .num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--sea);
  margin-bottom: 14px;
}
.svc-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink-deep);
  margin: 0;
  max-width: 12ch;
}
.svc-body > p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 64ch;
}
.svc-body > p:last-child { margin-bottom: 0; }
.svc-list-lead { font-weight: 500; color: var(--ink-deep); margin-bottom: 12px; }

/* Vaccine cards */
.vax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 0; }
.vax-card {
  background: var(--cream-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
.vax-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  margin: 0 0 6px;
}
.vax-lead { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.vax-card ul { list-style: none; margin: 0; padding: 0; }
.vax-card li {
  position: relative;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-deep);
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--paper-line);
}
.vax-card li:first-child { border-top: 0; }
.vax-card li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sea);
}

/* Titers callout */
.svc-note {
  margin-top: 28px;
  background: none;
  border: none;
  border-top: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 26px 0 0;
}
.svc-note h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink-deep);
  margin: 0 0 8px;
}
.svc-note p { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }

/* Check lists (parasite prevention, wellness diagnostics) */
.svc-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 32px;
}
.svc-list li {
  position: relative;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-deep);
  padding-left: 22px;
}
/* dash marker to match the diagnostics X-ray reasons list */
.svc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 1px;
  background: var(--ink);
}

/* Closing CTA band */
.svc-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink-night);
  background-image: linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-night) 100%);
  background-size: cover;
  background-position: center 38%;
  color: var(--cream);
  text-align: center;
  padding: clamp(72px, 13vh, 150px) 48px;
}
.svc-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 36, 56, 0.74);
  z-index: 0;
}
.svc-cta .svc-wrap { position: relative; z-index: 1; }
.svc-cta .eyebrow { color: rgba(255, 255, 255, 0.85); margin: 0 0 22px; }
.svc-cta .eyebrow::before, .svc-cta .eyebrow.both::after { background: rgba(255, 255, 255, 0.5); }
.svc-cta h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 36px;
}
.svc-cta h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.svc-cta .btn-apply { background: var(--sea); color: var(--ink-deep); }
.svc-cta .btn-apply:hover { background: var(--sea-pale); }

@media (max-width: 920px) {
  .svc-wrap { padding: 0 24px; }
  .svc-intro .lead { max-width: none; }
  .svc-block { grid-template-columns: 1fr; gap: 18px; }
  .svc-head h2 { max-width: none; }
  .vax-grid { grid-template-columns: 1fr; }
  .svc-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Primary nav v2 — dropdown menus + mobile hamburger
   ============================================================ */
.nav-list { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list a,
.nav-trigger {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
}
.nav-list a:hover,
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] { color: #FFFFFF; }
.nav-trigger .caret { width: 9px; height: 6px; transition: transform 0.22s ease; }
.has-menu.open .nav-trigger .caret { transform: rotate(180deg); }

/* Static (non-clickable) nav labels — Home, Team (dead page). Keep nav styling, drop interaction. */
.nav-dead { pointer-events: none; cursor: default; }

.nav-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 248px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: var(--cream-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(20, 36, 56, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* hover bridge so the menu doesn't close in the gap */
.has-menu::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 18px; }
.has-menu.open .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Pointer/desktop hover affordance (click/keyboard still drives aria-expanded) */
@media (hover: hover) and (min-width: 921px) {
  .has-menu:hover .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .has-menu:hover .nav-trigger .caret { transform: rotate(180deg); }
}
.nav-menu a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--radius);
  color: var(--ink-deep);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { background: var(--mist); color: var(--ink-deep); }
.nav-menu a[aria-current="page"] { color: var(--ink); }

/* Hamburger button */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  justify-self: end;
}
.nav-burger span { display: block; width: 24px; height: 2px; background: #FFFFFF; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-down panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ink-night);
  padding: 100px 28px 48px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.mobile-nav.open { opacity: 1; transform: none; }
body.nav-open { overflow: hidden; }
.mobile-nav-inner { max-width: 560px; margin: 0 auto; }
.mobile-list { list-style: none; margin: 0; padding: 0; }
.mobile-list > li { border-bottom: 1px solid rgba(201, 216, 230, 0.16); }
.mobile-list a,
.m-trigger {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  color: #FFFFFF;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
}
.m-trigger .caret { width: 13px; height: 8px; color: var(--sea-pale); transition: transform 0.22s ease; }
.m-has-menu.open .m-trigger .caret { transform: rotate(180deg); }
.m-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.m-has-menu.open .m-menu { max-height: 640px; padding-bottom: 10px; }
.m-menu a {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  padding: 11px 4px 11px 18px;
  color: rgba(201, 216, 230, 0.92);
  border-bottom: 0;
  justify-content: flex-start;
}
.mobile-contact { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.mobile-contact .btn-apply { background: var(--sea); color: var(--ink-deep); justify-content: center; }
.mobile-contact .btn-apply:hover { background: var(--sea-pale); }
.mobile-phone { display: flex; flex-direction: column; gap: 8px; }
.mobile-phone a { color: var(--sea-pale); text-decoration: none; font-size: 15px; font-family: var(--sans); }
.mobile-phone a:hover { color: #FFFFFF; }

/* Social icons (footer + mobile) */
.social { display: flex; gap: 12px; }
.social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201, 216, 230, 0.3);
  border-radius: 50%;
  color: var(--sea-pale);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social a:hover { background: var(--sea); color: var(--ink-deep); border-color: var(--sea); }
.social svg { width: 18px; height: 18px; }

/* Footer info-row links (Visit / Contact columns) */
footer.site .foot-info a {
  color: rgba(201, 216, 230, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}
footer.site .foot-info a:hover { color: #FFFFFF; }

@media (min-width: 921px) {
  .nav-burger { display: none; }
}
@media (max-width: 920px) {
  .topbar { display: flex; justify-content: space-between; align-items: center; }
  .topnav { display: none; }
  .topbar .join { display: none; }
  /* the mobile nav already lists Call + Text, so the icon pair would be duplicate chrome */
  .topbar-actions { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .nav-menu, .nav-burger span, .m-menu, .caret,
  .topbar-icon, .topbar-icon::after { transition: none !important; }
}

/* ============================================================
   Service page — sticky media column that swaps per section
   ============================================================ */
.svc-scroller {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.svc-media {
  position: sticky;
  top: 104px;
  height: clamp(440px, 78vh, 660px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
}
.svc-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.svc-media-img.is-active { opacity: 1; }

/* Content column: blocks become simple stacked sections (override the 2-col .svc-block) */
.svc-content .svc-block {
  display: block;
  grid-template-columns: none;
  border-top: 1px solid var(--paper-line);
  padding: clamp(48px, 8vh, 88px) 0;
  gap: 0;
}
.svc-content .svc-block:first-child { border-top: 0; padding-top: 0; }
.svc-content .num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--sea);
  margin-bottom: 12px;
}
.svc-content .svc-block > h2 {
  position: static;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-deep);
  margin: 0 0 20px;
  max-width: none;
}
/* Inline per-section image — mobile only */
.svc-block-img {
  display: none;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 26px;
}

@media (max-width: 920px) {
  .svc-scroller { grid-template-columns: 1fr; gap: 0; }
  .svc-media { display: none; }
  .svc-block-img { display: block; }
  .svc-content .svc-block:first-child { padding-top: clamp(24px, 5vh, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-media-img { transition: none; }
}

/* ============================================================
   Service page v3 — compact alternating image + text rows
   (see more than one service at a time, each with its own image)
   ============================================================ */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(40px, 6vh, 72px) 0;
  border-top: 1px solid var(--paper-line);
}
.svc-row:first-child { border-top: 0; padding-top: clamp(8px, 2vh, 24px); }
.svc-row:nth-child(even) .svc-row-media { order: 2; }
.svc-row-media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.svc-row-text .num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--sea);
  margin-bottom: 12px;
}
.svc-row-text > h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-deep);
  margin: 0 0 16px;
}
/* Content-heavy rows (vaccinations, diagnostics): top-align + let the image follow */
.svc-row-wide { align-items: start; }
.svc-row-wide .svc-row-media { position: sticky; top: 104px; }

@media (max-width: 920px) {
  .svc-row,
  .svc-row.svc-row-wide { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .svc-row:nth-child(even) .svc-row-media { order: 0; }
  .svc-row-wide .svc-row-media { position: static; }
}

/* ============================================================
   Service page v4 — clean stacked list, small thumbnail per item
   (Brees-approved: keeps polish + detail, light visual cue, several visible)
   ============================================================ */
.svc-item {
  display: grid;
  grid-template-columns: clamp(192px, 24vw, 304px) 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
  padding: clamp(40px, 6vh, 64px) 0;
  border-top: 1px solid var(--paper-line);
}
.svc-item:first-child { border-top: 0; padding-top: clamp(8px, 2vh, 20px); }
.svc-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  position: sticky;
  top: 104px;
}
.svc-item-main .num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #4d6b8a;
  margin-bottom: 10px;
}
.svc-item-main > h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-deep);
  margin: 0 0 18px;
}

@media (max-width: 920px) {
  .svc-item { grid-template-columns: 1fr; gap: 18px; }
  .svc-thumb { width: 100%; aspect-ratio: 16 / 10; position: static; }
  .vax-grid { grid-template-columns: 1fr; }
}

/* Shared numeric eyebrow for service modules (AA-safe on light: --ink) */
.svc-num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink);
  margin-bottom: 12px;
}

/* ============================================================
   SURGERY (surgery.html) — card catalog + advanced spotlight
   Distinct from wellness: grid of cards + a dark color-block band,
   variety driven by COLOR, not photo repetition.
   ============================================================ */
.sg-section { background: var(--cream); padding: clamp(40px, 7vh, 80px) 0 clamp(72px, 12vh, 140px); }
.sg-group { margin-top: clamp(48px, 8vh, 96px); }
.sg-group:first-child { margin-top: clamp(8px, 2vh, 24px); }
.sg-group-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin: 0 0 clamp(24px, 3vh, 34px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
}
.sg-group-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.0; letter-spacing: -0.02em;
  color: var(--ink-deep); margin: 0;
}
.sg-group-head h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.sg-group-head .count {
  margin-left: auto; align-self: center;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--quiet);
}
.sg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 26px); }
.sg-card {
  background: var(--cream-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.sg-card h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink-deep); margin: 0 0 14px;
}
.sg-card p { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.sg-spotlight { background: var(--ink-night); color: #FFFFFF; padding: clamp(64px, 11vh, 128px) 0; }
.sg-spotlight-head { max-width: 60ch; margin: 0 0 clamp(36px, 5vh, 56px); }
.sg-spotlight-head .eyebrow { color: var(--sea-pale); margin: 0 0 22px; }
.sg-spotlight-head .eyebrow::before, .sg-spotlight-head .eyebrow::after { background: var(--sea-pale); }
.sg-spotlight-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.0; letter-spacing: -0.03em;
  color: #FFFFFF; margin: 0 0 18px; max-width: 18ch;
}
.sg-spotlight-head h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.sg-spotlight-head p { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: rgba(233, 240, 247, 0.86); margin: 0; max-width: 60ch; }
.sg-spotlight .sg-cards { grid-template-columns: repeat(3, 1fr); }
.sg-card.dark { background: var(--ink-deep); border: 1px solid rgba(201, 216, 230, 0.14); }
.sg-card.dark .svc-num { color: var(--sea-pale); }
.sg-card.dark h3 { color: #FFFFFF; }
.sg-card.dark p { color: rgba(233, 240, 247, 0.88); }
@media (max-width: 920px) {
  .sg-cards, .sg-spotlight .sg-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   SURGERY (surgery.html) — riffs on homepage elements:
   pull-quote band + split list/image + dark numbered band.
   A distinct rhythm from the wellness thumbnail list.
   ============================================================ */

/* Pull-quote band (riffs homepage .quote) */
/* Sticky-parallax pull-quote: fixed background image + quote pinned while it scrolls.
   Pure CSS, so it shows even with OS "Reduce Motion" on. */
.svc-quote {
  position: relative;
  isolation: isolate;
  background-color: var(--ink-night);
  background-image: url('../images/img-surgery-quote.webp');
  background-size: cover;
  background-position: center 42%;
  background-attachment: fixed;
  color: var(--cream);
  min-height: 150vh;
  padding: 0;
}
.svc-quote::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 36, 56, 0.58);
  z-index: 0;
}
.svc-quote .svc-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media (max-width: 720px) {
  .svc-quote {
    background-attachment: scroll;
    min-height: auto;
    padding: clamp(80px, 14vh, 130px) 0;
  }
  .svc-quote .svc-wrap { position: static; min-height: 0; display: block; }
}
.svc-quote .quote-text { font-family: var(--display); color: #FFFFFF; margin: 0; max-width: 42ch; text-shadow: 0 2px 28px rgba(20,36,56,0.55); }
.svc-quote .quote-text .lead { display: block; font-weight: 600; font-size: clamp(38px,5.4vw,76px); line-height: 1.03; letter-spacing: -0.03em; max-width: 16ch; }
.svc-quote .quote-text .light { display: block; font-weight: 300; font-style: italic; font-size: clamp(19px,2.3vw,30px); line-height: 1.28; letter-spacing: -0.01em; color: var(--sea-pale); max-width: 40ch; margin: 0.55em 0 0; }

/* Split: numbered list + tall image (riffs homepage .services-grid) */
.svc-split { background: var(--cream); }
.svc-split-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.svc-split-col { padding: clamp(72px,13vh,150px) clamp(40px,6vw,88px); align-self: center; }
.svc-split-head .eyebrow { margin: 0 0 18px; }
.svc-split-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px,4vw,56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-deep); margin: 0 0 40px; max-width: 16ch; }
.svc-split-head h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.svc-split-list { list-style: none; padding: 0; margin: 0; }
.svc-split-list li { display: grid; grid-template-columns: 40px 1fr; column-gap: 22px; padding: 26px 0; border-top: 1px solid var(--paper-line); align-items: baseline; }
.svc-split-list li:last-child { border-bottom: 1px solid var(--paper-line); }
.svc-split-list .num { font-family: var(--display); font-size: 14px; letter-spacing: 0.16em; color: var(--ink); padding-top: 6px; }
.svc-split-list h3 { font-family: var(--display); font-weight: 500; font-size: clamp(21px,2.2vw,28px); line-height: 1.15; color: var(--ink-deep); margin: 0 0 8px; }
.svc-split-list p { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.svc-split-media { position: relative; min-height: 540px; overflow: hidden; }
.svc-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.svc-split-prose p { font-family: var(--sans); font-size: 17px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; max-width: 54ch; }
.svc-split-prose p:last-child { margin-bottom: 0; }

/* Dark numbered band (riffs homepage opening band) */
.svc-darkband { background: var(--ink-night); color: #FFFFFF; padding: clamp(72px,13vh,150px) 0; }
.svc-darkband-head { max-width: 62ch; margin: 0 0 clamp(40px,6vh,64px); }
.svc-darkband-head .eyebrow { color: var(--sea-pale); margin: 0 0 20px; }
.svc-darkband-head .eyebrow::before, .svc-darkband-head .eyebrow::after { background: var(--sea-pale); }
.svc-darkband-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px,4.2vw,56px); line-height: 1.0; letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 18px; max-width: 18ch; }
.svc-darkband-head h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.svc-darkband-head p { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: rgba(233,240,247,0.86); margin: 0; max-width: 62ch; }
.svc-darklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(36px,5vw,80px); }
.svc-darklist li { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; padding: 28px 0; border-top: 1px solid rgba(201,216,230,0.18); align-items: baseline; }
.svc-darklist .num { font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; color: var(--sea-pale); padding-top: 6px; }
.svc-darklist h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px,2vw,26px); line-height: 1.15; color: #FFFFFF; margin: 0 0 8px; }
.svc-darklist p { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: rgba(233,240,247,0.86); margin: 0; }

/* Term variant: a glossed list of procedures, not a numbered sequence.
   Drops the .num column so the term itself carries the row. */
.svc-darklist--terms li { grid-template-columns: 1fr; }
.svc-darklist--terms h3 { font-size: clamp(18px, 1.6vw, 22px); }
.svc-darklist--terms em { font-style: italic; color: rgba(233,240,247,0.82); }

/* Sub-list nested inside a numbered .svc-split-list item (grouped procedures). */
.svc-sublist {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 12px;
}
.svc-sublist li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--paper-line);
}
.svc-sublist strong { color: var(--ink-deep); font-weight: 600; }

/* ============================================================
   PROSE BANDS — an editorial paragraph section with no container.
   Emphasis comes from type and the ground it sits on, not a box.
   ============================================================ */
.svc-prose { background: var(--cream); padding: clamp(64px, 10vh, 120px) 0; }
.svc-prose--mist { background: var(--mist); }
.svc-prose .eyebrow { margin: 0 0 22px; }
.svc-prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink-deep);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  max-width: 20ch;
}
.svc-prose h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.svc-prose p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 64ch;
}
.svc-prose p:last-of-type { margin-bottom: 0; }
.svc-prose strong { color: var(--ink-deep); font-weight: 600; }
.svc-prose p a {
  color: var(--ink-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.svc-prose p a:hover { color: var(--brick-deep); }
.prose-list-lead {
  font-weight: 600;
  color: var(--ink-deep) !important;
  margin-top: clamp(24px, 3vw, 32px) !important;
  margin-bottom: 14px !important;
}
.prose-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 64ch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
.prose-list li {
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  padding: 13px 0;
  border-bottom: 1px solid var(--paper-line);
}

/* Prose paragraphs used inside a .svc-split column (no h2 of their own). */
.svc-prose-inline p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 56ch;
}
.svc-prose-inline p:last-child { margin-bottom: 0; }

/* Paired supporting images beneath a prose band. */
.prose-media {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.prose-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Inline forward link at the end of a prose band. */
.prose-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 34px);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.prose-link svg { width: 16px; height: 16px; flex: none; transition: transform 0.3s ease; }
.prose-link:hover { color: var(--brick-deep); }
/* On a dark band the link needs a pale ink to stay legible. */
.prose-link--dark { color: #FFFFFF; }
.prose-link--dark:hover { color: var(--sea-pale); }
.prose-link:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .prose-link svg { transition: none; }
  .prose-link:hover svg { transform: none; }
}

@media (max-width: 920px) {
  .svc-split-grid { grid-template-columns: 1fr; }
  .svc-split-col { padding: clamp(56px,9vh,90px) 24px; }
  .svc-split-media { min-height: 360px; order: -1; }
  .svc-darklist { grid-template-columns: 1fr; }
  .svc-quote { padding: clamp(72px,12vh,120px) 0; }
}

/* ============================================================
   DENTISTRY (dentistry.html) — editorial + stat + treatment journey
   Distinct: reads top-to-bottom like a story with a big stat and a
   connected numbered timeline, not a card grid or a list.
   ============================================================ */
.dn-editorial { background: var(--cream); padding: clamp(40px, 7vh, 76px) 0; }
.dn-editorial h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12; letter-spacing: -0.02em;
  color: var(--ink-deep); margin: 0 0 22px; max-width: 20ch;
}
.dn-editorial h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.dn-editorial p { font-family: var(--sans); font-size: 17px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; max-width: 64ch; }
.dn-editorial p:last-child { margin-bottom: 0; }

/* Periodontal stat = the dentistry sticky-parallax moment (CSS-only, shows w/ Reduce Motion on) */
.dn-stat {
  position: relative;
  isolation: isolate;
  background-color: var(--ink-night);
  background-image: url('../images/img-dentistry-stat.webp');
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed;
  color: #FFFFFF;
  min-height: 150vh;
  padding: 0;
}
.dn-stat::before { content: ''; position: absolute; inset: 0; background: rgba(20, 36, 56, 0.66); z-index: 0; }
.dn-stat .svc-wrap { position: sticky; top: 0; z-index: 1; min-height: 100vh; display: flex; align-items: center; }
@media (max-width: 720px) {
  .dn-stat { background-attachment: scroll; min-height: auto; padding: clamp(80px, 14vh, 130px) 0; }
  .dn-stat .svc-wrap { position: static; min-height: 0; display: block; }
}
.dn-stat-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.dn-stat-fig {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(56px, 10vw, 132px);
  line-height: 0.9; letter-spacing: -0.04em;
  color: var(--sea-pale); margin: 0;
}
.dn-stat-fig .u {
  display: block; font-size: 0.22em; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #FFFFFF; margin-top: 18px; line-height: 1.4;
}
.dn-stat-body .eyebrow { color: var(--sea-pale); margin: 0 0 18px; }
.dn-stat-body .eyebrow::before, .dn-stat-body .eyebrow::after { background: var(--sea-pale); }
.dn-stat-body h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: #FFFFFF; margin: 0 0 18px; max-width: 18ch;
}
.dn-stat-body p { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: rgba(233, 240, 247, 0.88); margin: 0; max-width: 56ch; }

.dn-journey { background: var(--cream); padding: clamp(64px, 11vh, 130px) 0; }
.dn-journey-head { text-align: center; margin: 0 0 clamp(40px, 6vh, 64px); }
.dn-journey-head .eyebrow { margin: 0 0 20px; }
.dn-journey-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink-deep); margin: 0 auto; max-width: 18ch;
}
.dn-journey-head h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.dn-steps { max-width: 820px; margin: 0 auto; }
.dn-step {
  display: grid; grid-template-columns: 64px 1fr;
  gap: clamp(20px, 3vw, 38px);
  padding: 0 0 clamp(34px, 5vh, 52px);
  position: relative;
}
.dn-step:last-child { padding-bottom: 0; }
.dn-step::before {
  content: ''; position: absolute;
  left: 31px; top: 70px; bottom: 0; width: 2px;
  background: var(--paper-line);
}
.dn-step:last-child::before { display: none; }
.dn-step-num {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--cream-paper); border: 1px solid var(--sea);
  color: var(--ink-deep);
  font-family: var(--display); font-weight: 500; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.dn-step-body h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink-deep); margin: 6px 0 12px;
}
.dn-step-body p { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 60ch; }

/* Intro paragraph under a journey heading (COHAT framing). */
.dn-journey-lead {
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  max-width: 66ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Day-of-procedure variant: a sequence of moments, not numbered steps.
   The markers are non-semantic dashes, so shrink the dial to a quiet node. */
.dn-day { background: var(--mist); }
.dn-day .dn-step { grid-template-columns: 40px 1fr; }
.dn-day .dn-step::before { left: 19px; top: 46px; }
.dn-day .dn-step-num {
  width: 40px; height: 40px;
  font-size: 15px;
  background: var(--mist);
  color: var(--ink);
}

/* ---- Anesthesia: full-bleed dark image band (cinematic reassurance) ---- */
.dn-anes {
  position: relative;
  isolation: isolate;
  background-color: var(--ink-night);
  background-image: url('../images/img-dentistry-anes.webp');
  background-size: cover;
  background-position: center 38%;
  color: #FFFFFF;
  padding: clamp(80px, 14vh, 168px) 0;
}
.dn-anes::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 36, 56, 0.80) 0%, rgba(20, 36, 56, 0.88) 100%);
}
.dn-anes-inner { max-width: 940px; }
.dn-anes .eyebrow { color: var(--sea-pale); margin: 0 0 20px; }
.dn-anes .eyebrow::before, .dn-anes .eyebrow::after { background: var(--sea-pale); }
.dn-anes h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.0; letter-spacing: -0.03em;
  color: #FFFFFF; margin: 0 0 28px; max-width: 16ch;
  text-shadow: 0 2px 28px rgba(20, 36, 56, 0.5);
}
.dn-anes h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.dn-anes-prose p {
  font-family: var(--sans); font-size: 17px; line-height: 1.72;
  color: rgba(233, 240, 247, 0.92); margin: 0 0 16px; max-width: 64ch;
}
.dn-anes-prose p:last-child { margin-bottom: 0; }
.dn-anes-list {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 64px);
  max-width: 760px;
}
.dn-anes-list li {
  position: relative;
  padding: 22px 0 0 28px;
  border-top: 1px solid rgba(201, 216, 230, 0.30);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.25;
  letter-spacing: -0.01em; color: #FFFFFF;
}
.dn-anes-list li::before {
  content: ''; position: absolute; left: 0; top: 33px;
  width: 15px; height: 2px; background: var(--sea-pale);
}

/* ---- Between visits: light editorial 2-col (lead + "Our team can" dashed list) ---- */
.dn-home { background: var(--cream); padding: clamp(72px, 12vh, 150px) 0; }
.dn-home-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.dn-home-lead .eyebrow { margin: 0 0 18px; }
.dn-home-lead h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.03; letter-spacing: -0.03em;
  color: var(--ink-deep); margin: 0 0 26px; max-width: 16ch;
}
.dn-home-lead h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.dn-home-lead p {
  font-family: var(--sans); font-size: 17px; line-height: 1.75;
  color: var(--muted); margin: 0; max-width: 54ch;
}
.dn-home-help-label {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin: 6px 0 4px;
}
.dn-home-list { list-style: none; margin: 0; padding: 0; }
.dn-home-list li {
  position: relative;
  padding: 20px 0 20px 28px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.8vw, 22px); line-height: 1.3;
  letter-spacing: -0.015em; color: var(--ink-deep);
}
.dn-home-list li:last-child { border-bottom: 1px solid var(--paper-line); }
.dn-home-list li::before {
  content: ''; position: absolute; left: 0; top: 31px;
  width: 15px; height: 2px; background: var(--sea);
}

@media (max-width: 920px) {
  .dn-stat-grid { grid-template-columns: 1fr; gap: 22px; }
  .dn-anes-list { grid-template-columns: 1fr; }
  .dn-home-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   DIAGNOSTICS (diagnostics.html) — grouped categories + tag cluster
   Distinct: hierarchy is the design — two labeled groups, a dark
   feature card, a pill/tag cluster, and nested sub-cards.
   ============================================================ */
.dx-section { background: var(--cream); padding: clamp(40px, 7vh, 76px) 0 clamp(72px, 12vh, 140px); }
.dx-group { margin-top: clamp(56px, 9vh, 104px); }
.dx-group:first-child { margin-top: clamp(8px, 2vh, 20px); }
.dx-group-head { margin: 0 0 clamp(28px, 4vh, 40px); }
.dx-group-head .eyebrow { margin: 0 0 16px; }
.dx-group-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.0; letter-spacing: -0.03em;
  color: var(--ink-deep); margin: 0; max-width: 16ch;
}
.dx-group-head h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.dx-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 26px); }
.dx-card { background: var(--cream-paper); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); }
.dx-card h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink-deep); margin: 0 0 14px;
}
.dx-card p { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
.dx-card p:last-child { margin-bottom: 0; }
.dx-card.wide { grid-column: 1 / -1; }
.dx-card.feature { background: var(--ink-deep); border-color: transparent; color: #FFFFFF; }
.dx-card.feature h3 { color: #FFFFFF; }
.dx-card.feature p { color: rgba(233, 240, 247, 0.88); }

.dx-tags-lead {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); margin: 18px 0 14px;
}
.dx-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dx-tags li {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink-deep); background: var(--mist);
  border: 1px solid var(--sea-pale); border-radius: 100px;
  padding: 9px 18px;
}
.dx-card.feature .dx-tags-lead { color: var(--sea-pale); }
.dx-card.feature .dx-tags li { background: rgba(255, 255, 255, 0.08); border-color: rgba(201, 216, 230, 0.32); color: #FFFFFF; }

.dx-sub { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 22px); margin-top: clamp(16px, 2vw, 22px); }
.dx-subcard { background: var(--mist); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px); }
.dx-subcard h4 {
  font-family: var(--display); font-weight: 500; font-size: 19px;
  letter-spacing: -0.01em; color: var(--ink-deep); margin: 0 0 10px;
}
.dx-subcard p { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

@media (max-width: 920px) {
  .dx-cards, .dx-sub { grid-template-columns: 1fr; }
}

/* Diagnostics imaging — de-boxed editorial (no card borders/fills) */
.dx-card { background: transparent; border: none; border-radius: 0; padding: clamp(36px, 6vh, 64px) 0 0; }
.dx-card.wide + .dx-card.wide { border-top: 1px solid var(--paper-line); }
.dx-card.feature { background: transparent; color: inherit; }
.dx-card.feature h3 { color: var(--ink-deep); }
.dx-card.feature p { color: var(--muted); }
.dx-card.feature .dx-tags-lead { color: var(--ink); }
.dx-card.feature .dx-tags li { background: var(--mist); border-color: var(--paper-line); color: var(--ink-deep); }
.dx-subcard { background: transparent; border: none; border-top: 1px solid var(--paper-line); border-radius: 0; padding: clamp(18px, 2vw, 24px) 0 0; }

/* multi-paragraph spacing inside split list items */
.svc-split-list p + p { margin-top: 14px; }
/* end-of-life: a lead paragraph sits between the head and the numbered rows, so give the
   first hairline room to breathe instead of butting straight against the copy. */
.eol-split-lead { margin-bottom: 34px; }

/* Diagnostics imaging — wellness-style numbered service items, on a dark section */
.svc-section.dx-imaging { background: var(--ink-night); }
.dx-imaging-head { margin: 0 0 clamp(8px, 2vh, 22px); }
.dx-imaging-head .eyebrow { color: var(--sea-pale); margin: 0 0 16px; }
.dx-imaging-head .eyebrow::before, .dx-imaging-head .eyebrow::after { background: var(--sea-pale); }
.dx-imaging-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.0; letter-spacing: -0.03em; color: #FFFFFF; margin: 0; }
.dx-imaging-head h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.dx-imaging .svc-item { border-top-color: rgba(201, 216, 230, 0.18); }
.dx-imaging .svc-item:first-child { border-top: 1px solid rgba(201, 216, 230, 0.18); }
.dx-imaging .svc-item-main .num { color: var(--sea-pale); }
.dx-imaging .svc-item-main > h2 { color: #FFFFFF; }
.dx-imaging .svc-body > p { color: rgba(233, 240, 247, 0.86); }
.dx-imaging .svc-list-lead { color: var(--sea-pale); }
.dx-imaging .svc-list li { color: rgba(233, 240, 247, 0.9); }
.dx-imaging .svc-list li::before { background: var(--sea); }
.dx-imaging .dx-sub { margin-top: clamp(18px, 2.4vw, 26px); }
.dx-imaging .dx-subcard { border-top-color: rgba(201, 216, 230, 0.18); }
.dx-imaging .dx-subcard h4 { color: #FFFFFF; }
.dx-imaging .dx-subcard p { color: rgba(233, 240, 247, 0.82); }

/* ============================================================
   END-OF-LIFE (end-of-life.html) — quiet editorial
   Distinct: restraint IS the design — spacious centered single column,
   airy light-weight type, one calm band, a soft (non-navy) closer.
   ============================================================ */
.eol-intro { background: var(--cream); padding: clamp(64px, 11vh, 120px) 0 clamp(40px, 6vh, 72px); }
.eol-intro .lead {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.35; letter-spacing: -0.015em;
  color: var(--ink-deep); max-width: 30ch; margin: 0;
}
.eol-intro .lead em { font-style: italic; color: var(--ink); }

.eol-flow { background: var(--cream); }
.eol-section { padding: clamp(56px, 10vh, 120px) 0; border-top: 1px solid var(--paper-line); }
.eol-wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 48px; text-align: center; }
.eol-section .eyebrow { margin: 0 0 22px; }
.eol-section h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.08; letter-spacing: -0.025em;
  color: var(--ink-deep); margin: 0 0 26px;
}
.eol-section h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.eol-section p {
  font-family: var(--sans); font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.8; color: var(--muted); margin: 0 auto; max-width: 60ch;
}

/* Calm visual breath — fixed-background parallax (CSS-only, shows w/ Reduce Motion on) */
.eol-band {
  position: relative;
  height: clamp(420px, 68vh, 640px);
  background-color: var(--ink-night);
  background-image: url('../images/img-eol-band.webp');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}
.eol-band::after { content: ''; position: absolute; inset: 0; background: rgba(27, 47, 71, 0.30); }
@media (max-width: 720px) {
  .eol-band { background-attachment: scroll; height: clamp(320px, 48vh, 440px); }
}

/* Soft closer = image band + soft scrim */
.eol-closer {
  position: relative;
  isolation: isolate;
  background-color: var(--ink-night);
  background-image: url('../images/img-eol-closer.webp');
  background-size: cover;
  background-position: center 42%;
  text-align: center;
  padding: clamp(96px, 16vh, 180px) 0;
}
.eol-closer::before { content: ''; position: absolute; inset: 0; background: rgba(20, 36, 56, 0.76); z-index: 0; }  /* 0.66 left the eyebrow at 4.33:1 */
.eol-closer .svc-wrap { position: relative; z-index: 1; }
.eol-closer .eyebrow { color: var(--sea-pale); margin: 0 0 22px; }
.eol-closer .eyebrow::before, .eol-closer .eyebrow::after { background: var(--sea-pale); }
.eol-closer h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.08; letter-spacing: -0.03em;
  color: #FFFFFF; margin: 0 auto 16px; max-width: 20ch;
  text-shadow: 0 2px 28px rgba(20, 36, 56, 0.5);
}
.eol-closer h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.eol-closer p { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: rgba(233, 240, 247, 0.92); max-width: 54ch; margin: 0 auto 36px; text-shadow: 0 1px 18px rgba(20, 36, 56, 0.45); }
.eol-closer .btn-apply { background: #FFFFFF; color: var(--ink-deep); }
.eol-closer .btn-apply:hover { background: var(--sea-pale); }

/* Euthanasia + In-home = side-by-side 50/50 dark band, aligned to the page frame */
.eol-twin { background: var(--ink-night); color: #FFFFFF; }
.eol-twin-grid { max-width: 1440px; margin: 0 auto; padding: 0 clamp(40px, 6vw, 86px); display: grid; grid-template-columns: 1fr 1fr; }
.eol-twin-col { padding: clamp(64px, 10vh, 130px) 0; }
.eol-twin-col:first-child { padding-right: clamp(36px, 5vw, 72px); }
.eol-twin-col:last-child { padding-left: clamp(36px, 5vw, 72px); border-left: 1px solid rgba(201, 216, 230, 0.18); }
.eol-twin-col .eyebrow { color: var(--sea-pale); margin: 0 0 22px; }
.eol-twin-col .eyebrow::before, .eol-twin-col .eyebrow::after { background: var(--sea-pale); }
.eol-twin-col h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 24px; }
.eol-twin-col h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.eol-twin-col p { font-family: var(--sans); font-size: 17px; line-height: 1.72; color: rgba(233, 240, 247, 0.88); max-width: none; margin: 0; }
@media (max-width: 860px) {
  .eol-twin-grid { grid-template-columns: 1fr; padding: 0 clamp(24px, 6vw, 40px); }
  .eol-twin-col:first-child { padding-right: 0; }
  .eol-twin-col:last-child { padding-left: 0; border-left: none; border-top: 1px solid rgba(201, 216, 230, 0.18); padding-top: clamp(48px, 9vh, 90px); }
  .eol-twin-col:first-child { padding-bottom: clamp(48px, 9vh, 90px); }
}

@media (max-width: 920px) {
  .eol-wrap-narrow { padding: 0 24px; }
}

/* ============================================================
   PAYMENT OPTIONS (payment-options.html)
   ============================================================ */
.pay-intro { background: var(--cream); padding: clamp(72px, 12vh, 150px) 0 clamp(48px, 7vh, 80px); }
.pay-intro .eyebrow { margin: 0 0 24px; }
.pay-lead {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--ink-deep); margin: 0; max-width: 24ch;
}
.pay-lead { max-width: 30ch; }

.pay-head { margin: 0 0 clamp(36px, 5vh, 56px); }
.pay-head .eyebrow { margin: 0 0 18px; }
.pay-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink-deep); margin: 0; max-width: 16ch;
}
.pay-head h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.pay-sub {
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  color: var(--muted); margin: 18px 0 0; max-width: 56ch;
}

/* Accepted methods — numbered hairline list, multi-column */
.pay-methods { background: var(--cream-paper); padding: clamp(64px, 10vh, 120px) 0; }
.pay-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(40px, 5vw, 88px);
  row-gap: clamp(28px, 4vh, 44px);
  align-items: start;
  max-width: 900px;
}
.pay-jump {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-deep); text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.pay-jump svg { width: 14px; height: 14px; color: var(--sea); transition: transform 0.2s ease; }
.pay-jump:hover { color: var(--ink); gap: 10px; }
.pay-jump:hover svg { transform: translateY(2px); }
.pay-list li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px;
  align-items: start;
  padding: 28px 0 0; border-top: 1px solid var(--paper-line);
}
.pay-list .num {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.16em;
  color: var(--ink); padding-top: 5px;
}
.pay-list h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--ink-deep); margin: 0 0 8px;
}
.pay-list p { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* Financing — two editorial columns (top hairline, no boxes) */
.pay-finance { background: var(--cream); padding: clamp(64px, 10vh, 120px) 0; }
.pay-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
}
.pay-opt { border-top: 1px solid var(--paper-line); padding: 30px 0 0; }
.pay-opt-logo { margin: 0 0 20px; line-height: 0; }
.pay-opt-logo img { height: 30px; width: auto; max-width: 100%; display: block; }
.pay-opt-num {
  font-family: var(--display); font-weight: 300; font-size: 30px;
  color: var(--sea); margin: 0 0 14px; line-height: 1;
}
.pay-opt h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink-deep); margin: 0 0 14px;
}
.pay-opt p { font-family: var(--sans); font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 0 0 22px; max-width: 46ch; }
.pay-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-deep); text-decoration: none;
  border-bottom: 1px solid var(--sea); padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.pay-link svg { width: 15px; height: 15px; }
.pay-link:hover { color: var(--ink); border-color: var(--ink); gap: 13px; }

/* Anchor offset for in-page "Learn more" jumps (clears the fixed header) */
.pay-finance, .pay-ins { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Pet insurance — dark band, lead + numbered steps */
.pay-ins { background: var(--ink-night); color: #FFFFFF; padding: clamp(72px, 12vh, 150px) 0; }
.pay-ins-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.pay-ins-lead .eyebrow { color: var(--sea-pale); margin: 0 0 18px; }
.pay-ins-lead .eyebrow::before, .pay-ins-lead .eyebrow::after { background: var(--sea-pale); }
.pay-ins-lead h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.8vw, 50px); line-height: 1.0;
  letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 24px; max-width: 14ch;
}
.pay-ins-lead h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.pay-ins-lead p { font-family: var(--sans); font-size: 17px; line-height: 1.72; color: rgba(233, 240, 247, 0.9); margin: 0; max-width: 54ch; }
.pay-steps { list-style: none; margin: 0; padding: 0; }
.pay-steps li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center;
  padding: 24px 0; border-top: 1px solid rgba(201, 216, 230, 0.22);
}
.pay-steps li:last-child { border-bottom: 1px solid rgba(201, 216, 230, 0.22); }
.pay-steps-num {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--sea); color: var(--sea-pale);
  font-family: var(--display); font-weight: 500; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.pay-steps p { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: rgba(233, 240, 247, 0.92); margin: 0; }

@media (max-width: 920px) {
  .pay-list { grid-template-columns: 1fr; row-gap: 0; }
  .pay-grid { grid-template-columns: 1fr; gap: 0; }
  .pay-opt:not(:first-child) { margin-top: 36px; }
  .pay-ins-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Per-page CTA background images (unique per page; ::before navy scrim sits on top) */
.svc-cta.cta-wellness    { background-image: url('../images/cta-wellness.webp'); }
.svc-cta.cta-surgery     { background-image: url('../images/cta-surgery.webp'); }
.svc-cta.cta-dentistry   { background-image: url('../images/cta-dentistry.webp'); }
.svc-cta.cta-diagnostics { background-image: url('../images/cta-diagnostics.webp'); background-position: center 60%; }
.svc-cta.cta-payment     { background-image: url('../images/cta-payment.webp'); background-position: center 45%; }
.svc-cta.cta-anesthesia  { background-image: url('../images/cta-anesthesia.webp'); }
.svc-cta.cta-catworld    { background-image: url('../images/cta-catworld.webp'); }

/* ============================================================
   HOMEPAGE v2 — open-practice rebuild (staging, 2026-07-01)
   Motion pattern: base rules = static fallback (final state);
   .anim = JS-armed pre-state (added ONLY when motion is allowed);
   .anim.in = animate back to the final/static state.
   ============================================================ */

/* ---- Hero: kicker H1 + big display headline + sub + CTA ---- */
.hero-inner .hero-kicker {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  /* 0.86 measured 4.23:1 over the hero even with the raised scrim; solid white
     clears AA without darkening the photo any further. */
  color: #FFFFFF;
  margin: 0 0 26px; max-width: none;
  display: inline-flex; align-items: center; gap: 14px;
}
.hero-inner .hero-kicker::before { content: ''; width: 40px; height: 1px; background: rgba(255,255,255,0.6); }
.hero-headline {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(46px, 7vw, 104px); line-height: 0.98;
  letter-spacing: -0.03em; color: #FFFFFF;
  margin: 0 0 26px; max-width: 20ch;
}
.hero-headline .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.hero-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
  color: rgba(255,255,255,0.88); max-width: 52ch; margin: 0 0 34px;
}
.hero-cta { align-self: flex-start; background: var(--sea); color: var(--ink-deep); }
.hero-cta:hover { background: var(--sea-pale); }

/* ---- Trust bar (bridges hero -> paper; hosts the seal coin) ---- */
.trust-bar {
  position: relative; background: var(--cream);
  padding: clamp(82px, 11vh, 120px) 40px clamp(30px, 5vh, 44px);
  border-bottom: 1px solid var(--paper-line);
}
.trust-bar .seal-inset {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  background: var(--cream);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 14px var(--cream);
}
.trust-bar .seal-inset img { width: 100%; height: 100%; object-fit: contain; }
.trust-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.trust-list li {
  position: relative; font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); padding: 6px clamp(18px, 2.4vw, 34px);
}
.trust-list li + li::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 13px; background: var(--paper-line);
}

/* ---- About story: eyebrow support (section reuses .story) ---- */
.story .eyebrow { display: inline-flex; margin: 0 0 22px; }

/* ---- THE NAME: Bonnie + Mara motion centerpiece (dark, SB map watermark) ---- */
.union {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(130% 92% at 50% 10%, rgba(42,67,96,0.6), rgba(27,47,71,0) 60%),
    var(--ink-night);
  color: #FFFFFF;
  padding: clamp(120px, 20vh, 224px) 24px;
}
/* Two worlds: warm land (Bonnie) + the sea (Mara) as soft feathered image orbs */
.union-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute; top: 50%; left: 50%;
  width: clamp(300px, 38vw, 560px); aspect-ratio: 1 / 1; border-radius: 50%;
  background-size: cover; background-position: center; opacity: .5;
  transform: translate(-50%, -50%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 36%, rgba(0,0,0,0) 70%);
          mask: radial-gradient(circle at 50% 50%, #000 36%, rgba(0,0,0,0) 70%);
  will-change: transform, opacity;
}
.orb.bonnie { background-image: url('../images/union-bonnie.webp'); margin-left: clamp(-190px, -13vw, -120px); }
.orb.mara   { background-image: url('../images/union-mara.webp');   margin-left: clamp(120px, 13vw, 190px); }
/* dark scrim over the overlap keeps the wordmark legible */
.union-orbs::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(64% 54% at 50% 47%, rgba(20,36,56,0.58), rgba(20,36,56,0) 80%);
}
/* faint sea glow low-center */
.union::before {
  content: ''; position: absolute; left: 50%; bottom: -25%; transform: translateX(-50%);
  width: min(1000px, 130%); height: 65%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124,138,217,0.16), rgba(124,138,217,0) 70%);
  z-index: 0; pointer-events: none;
}
.union-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.union .eyebrow { display: inline-flex; margin: 0 0 48px; color: var(--sea-pale); }
.union .eyebrow::before, .union .eyebrow::after { background: var(--sea-pale); }
.union-words {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(20px, 5vw, 80px);
}
.union-word { display: flex; flex-direction: column; align-items: center; }
.union-word .u-word {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(60px, 11vw, 168px); line-height: 1;
  letter-spacing: -0.03em; color: #FFFFFF;
  text-shadow: 0 2px 40px rgba(11,20,34,0.6), 0 1px 10px rgba(11,20,34,0.45);
}
.union-word.mara .u-word { font-style: italic; font-weight: 300; color: var(--sea-pale); }
.union-word .u-mean {
  font-family: var(--sans); font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55; color: rgba(201,216,230,0.95); max-width: 24ch; margin: 20px auto 0;  /* 0.82 = 4.42:1, under AA */
}
.union-tide {
  height: 2px; width: min(460px, 64%); margin: clamp(34px, 5vh, 56px) auto 0;
  background: linear-gradient(90deg, transparent, var(--sea) 24%, var(--sea-pale) 50%, var(--sea) 76%, transparent);
  border-radius: 2px;
}
.union-quote {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(23px, 3vw, 40px); line-height: 1.35; letter-spacing: -0.015em;
  color: #FFFFFF; max-width: 26ch; margin: clamp(34px, 6vh, 60px) auto 0; padding: 0; border: 0;
}
.union-sig { margin-top: 28px; color: var(--sea-pale); }
.union-sig::before { color: var(--sea-pale); }

/* Motion pre-state (JS adds .anim only when motion is allowed) */
.union.anim .union-word { opacity: 0; transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.19,1,.22,1); }
.union.anim .union-word.bonnie { transform: translateX(-14vw); }
.union.anim .union-word.mara   { transform: translateX(14vw); }
/* the two worlds drift in from opposite sides and settle into their overlap */
.union.anim .orb { opacity: 0; transition: transform 1.7s cubic-bezier(.19,1,.22,1), opacity 1.3s ease; }
.union.anim .orb.bonnie { transform: translate(-50%, -50%) translateX(-18vw) scale(.85); }
.union.anim .orb.mara   { transform: translate(-50%, -50%) translateX(18vw) scale(.85); }
.union.anim .u-mean,
.union.anim .union-quote,
.union.anim .union-sig { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.1s ease; }
.union.anim .union-tide { width: 0; transition: width 1.5s cubic-bezier(.19,1,.22,1); }
/* Joined / resolved */
.union.anim.in .union-word { opacity: 1; transform: none; }
.union.anim.in .orb { opacity: .5; }
.union.anim.in .orb.bonnie, .union.anim.in .orb.mara { transform: translate(-50%, -50%); }
.union.anim.in .u-mean     { opacity: 1; transform: none; transition-delay: .7s; }
.union.anim.in .union-tide { width: min(460px, 64%); transition-delay: .65s; }
.union.anim.in .union-quote { opacity: 1; transform: none; transition-delay: 1.05s; }
.union.anim.in .union-sig   { opacity: 1; transform: none; transition-delay: 1.2s; }

/* ---- Experience: Time, attention, faces you know (editorial + image) ---- */
.experience { background: var(--cream); padding: clamp(96px, 15vh, 150px) 0; border-top: 1px solid var(--paper-line); }
.experience-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.experience-grid2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.experience-head { margin: 0 0 34px; }
.experience-head .eyebrow { display: inline-flex; margin: 0 0 18px; }
.experience-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.025em; color: var(--ink-deep); margin: 0; max-width: 15ch; }
.experience-head h2 .light { font-weight: 300; font-style: italic; color: var(--ink); }
.xp-list { display: flex; flex-direction: column; }
.xp { display: grid; grid-template-columns: 42px 1fr; column-gap: 20px; padding: 24px 0; border-top: 1px solid var(--paper-line); align-items: baseline; }
.xp:last-child { border-bottom: 1px solid var(--paper-line); }
.xp-num { font-family: var(--display); font-size: 14px; letter-spacing: 0.14em; color: var(--ink); padding-top: 5px; }
.xp h3 { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-deep); margin: 0 0 8px; }
.xp p { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 46ch; }
.experience-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 32px 64px -34px rgba(27,47,71,0.4); }
.experience-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* ---- Designed for calm (reuses .svc-darkband head styles) ---- */
.calm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.calm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(36px, 5vw, 80px); }
.calm-list li {
  position: relative; font-family: var(--sans);
  font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.6; color: rgba(233,240,247,0.9);
  padding: 26px 0 26px 30px; border-top: 1px solid rgba(201,216,230,0.18);
}
.calm-list li::before { content: ''; position: absolute; left: 0; top: 34px; width: 16px; height: 1px; background: var(--sea-pale); }
/* calm image closer — full-bleed photo band carrying the payoff line (merged brick quote) */
.svc-darkband.calm { padding-bottom: 0; }
.calm-closer {
  position: relative; isolation: isolate; margin-top: 0;
  background-color: var(--ink-night);
  background-image: url('../images/home-calm.webp');
  background-size: cover; background-position: center 40%;
  padding: clamp(88px, 16vh, 180px) 24px clamp(96px, 18vh, 200px);
}
/* Emerge out of the calm band: top stays solid --ink-night (no seam), photo reveals lower */
.calm-closer::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, var(--ink-night) 0%, rgba(20,36,56,0.92) 16%, rgba(20,36,56,0.5) 58%, rgba(20,36,56,0.74) 100%);
}
.calm-closer-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }

/* ---- What we do: service title links ---- */
.service h3 a { color: inherit; text-decoration: none; }
.service h3 a:hover, .service h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--sea); text-underline-offset: 4px; }

/* ---- Serving Santa Barbara — full-bleed SB photo band ---- */
.serving {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--ink-night);
  background-image: url('../images/home-serving-sb.webp');
  background-size: cover; background-position: center 58%;
  padding: clamp(112px, 20vh, 224px) 0; text-align: center; color: #FFFFFF;
}
.serving::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(20,36,56,0.82) 0%, rgba(20,36,56,0.52) 50%, rgba(20,36,56,0.66) 100%);
}
.serving-wrap { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 48px; }
.serving .eyebrow { display: inline-flex; margin: 0 0 24px; }
.serving-lede { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.32; letter-spacing: -0.02em; color: #FFFFFF; margin: 0 0 34px; text-shadow: 0 2px 24px rgba(20,36,56,0.5); }
.serving-addr { display: inline-flex; flex-direction: column; gap: 6px; font-family: var(--sans); font-size: 15px; color: #FFFFFF; text-decoration: none; }
.serving-addr .directions { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-pale); }
.serving-addr:hover .directions, .serving-addr:focus-visible .directions { color: #FFFFFF; }

/* ---- CTA close — warm photo band ---- */
.cta-close {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--ink-night);
  background-image: url('../images/home-meet.webp');
  background-size: cover; background-position: center 40%;
  color: #FFFFFF; padding: clamp(110px, 18vh, 200px) 40px; text-align: center;
}
.cta-close::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  /* 0.6 mid-band left the eyebrow at 4.04:1 and .cta-lede at 4.45:1 over the photo. */
  background: linear-gradient(to top, rgba(20,36,56,0.9) 0%, rgba(20,36,56,0.74) 50%, rgba(20,36,56,0.8) 100%);
}
.cta-close-wrap { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.cta-close .eyebrow { display: inline-flex; margin: 0 0 24px; }
.cta-close h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 24px; }
.cta-close h2 .light { font-weight: 300; font-style: italic; color: var(--sea-pale); }
.cta-lede { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: rgba(233,240,247,0.96); max-width: 60ch; margin: 0 auto 36px; }
.cta-close .btn-apply { background: var(--sea); color: var(--ink-deep); }
.cta-close .btn-apply:hover { background: var(--sea-pale); }
.cta-second { font-family: var(--sans); font-size: 14px; color: rgba(201,216,230,0.86); margin: 22px 0 0; }
.cta-second a { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--sea); text-underline-offset: 3px; }

/* ---- Homepage v2 — mobile ---- */
@media (max-width: 920px) {
  .hero-headline { font-size: clamp(40px, 12vw, 68px); max-width: 16ch; }
  .hero-sub { font-size: 16px; }
  .trust-bar { padding: 80px 22px 30px; }
  .trust-list li { padding: 5px 15px; font-size: 10px; letter-spacing: 0.16em; }
  .union { padding: clamp(84px, 14vh, 130px) 22px; }
  .union-words { gap: 6px 28px; }
  .orb { width: clamp(230px, 64vw, 340px); }
  .orb.bonnie { margin-left: clamp(-96px, -22vw, -64px); }
  .orb.mara   { margin-left: clamp(64px, 22vw, 96px); }
  .experience-wrap { padding: 0 24px; }
  .experience-grid2 { grid-template-columns: 1fr; gap: 36px; }
  .experience-media { order: -1; aspect-ratio: 16 / 10; }
  .calm-wrap { padding: 0 24px; }
  .calm-list { grid-template-columns: 1fr; }
  .calm-list li:first-child { border-top: none; }
  .calm-closer { padding: 80px 24px; }
  .serving-wrap { padding: 0 24px; }
  .cta-close { padding: 84px 24px; }
}

/* ---- Homepage v2 — reduced-motion belt-and-suspenders (JS also no-ops) ---- */
@media (prefers-reduced-motion: reduce) {
  .union.anim .union-word,
  .union.anim .u-mean,
  .union.anim .union-quote,
  .union.anim .union-sig { opacity: 1; transform: none; }
  .union.anim .union-tide { width: min(460px, 64%); }
  .union.anim .orb { opacity: .5; }
  .union.anim .orb.bonnie, .union.anim .orb.mara { transform: translate(-50%, -50%); }
}

/* ============================ TEAM PAGE ============================ */
/* Intro (sec 2) shares the mist bg so it flows into the team grid below.
   Scoped to the team page — .svc-intro stays cream on the service pages. */
.team-intro { background: var(--mist); padding-bottom: clamp(58px, 8.4vh, 108px); }

/* CTA close — Santa Barbara coastline behind the base .svc-cta navy scrim.
   ::before (rgba 20,36,56,.74) keeps white text WCAG-compliant over the photo. */
.team-cta { background-image: url('../images/home-serving-sb.webp'); background-position: center 45%; }

/* Profile-card grid + accessible "Read bio" modals.
   Grid holds one card today (Dr. Putnam) and grows as staff are added. */
.bio-team { background: var(--mist); padding: clamp(38px, 6.6vh, 78px) 0 clamp(80px, 13vh, 150px); text-align: center; }
.bio-team .eyebrow { justify-content: center; margin: 0 auto 20px; }
.bio-team-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-deep);
  margin: 0 0 clamp(44px, 6vh, 68px);
}
.bio-team-title .light { font-weight: 300; font-style: italic; color: var(--ink); }

/* Grouped rows — Doctor / Supervisors / RVTs / Assistants.
   The label is a hairline-ruled caption, NOT a box: emphasis from type, per the
   standing no-cards rule. --muted on --mist measures 6.26:1. */
.bio-groups { display: grid; gap: clamp(46px, 7vh, 86px); }
.bio-group__label {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  max-width: 640px; margin: 0 auto clamp(26px, 3.4vh, 38px);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.bio-group__label::before,
.bio-group__label::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--paper-line);
}

.bio-grid {
  display: grid;
  /* auto-FIT, not auto-fill: auto-fill keeps empty tracks alive, so
     justify-content centred the TRACKS and left-aligned the cards — most
     visible on the single-card Doctor row. auto-fit collapses them. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 290px));
  justify-content: center;
  gap: clamp(28px, 3.5vw, 44px);
}

.bio-card {
  background: var(--cream-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  padding-bottom: 28px;
  box-shadow: 0 14px 38px rgba(20, 36, 56, 0.12);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.bio-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.bio-card__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); }
.bio-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.bio-card__name { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2vw, 23px); color: var(--ink-deep); margin: 22px 20px 4px; }
.bio-card__role { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 0 20px 18px; }
.bio-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-deep); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 10px 22px; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bio-btn svg { width: 15px; height: 15px; transition: transform .25s ease; }
/* The whole card is the control now — hovering anywhere lights up the pill. */
.bio-card:hover .bio-btn { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; }
.bio-card:hover .bio-btn svg { transform: translateX(3px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bio-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(20, 36, 56, 0.22); }
}

/* Overlay + dialog */
.bio-overlay { position: fixed; inset: 0; background: rgba(20, 36, 56, 0.62); backdrop-filter: blur(3px); z-index: 200; display: none; }
.bio-overlay.open { display: block; }
.bio-modal { position: fixed; inset: 0; z-index: 201; display: none; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 48px); }
.bio-modal.open { display: flex; }
.bio-modal__panel {
  position: relative;
  background: var(--cream-paper);
  border-radius: var(--radius-lg);
  max-width: 600px; width: 100%; max-height: 90vh;
  overflow: hidden auto;            /* clip x so the banner follows the rounded corners; scroll y */
  box-shadow: 0 40px 100px rgba(20, 36, 56, 0.4);
}
/* Photo = full-width banner at the top (suits a landscape shot, no dead space).
   object-fit: cover crops — never distorts. */
.bio-modal__media { position: relative; width: 100%; background: var(--mist); }
.bio-modal__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center 22%; display: block;
}

/* Desktop: the headshots are 3:4 PORTRAIT, so the photo becomes a full-height
   column beside the bio instead of a landscape banner that would crop the
   dogs out of Catharine's and Angie's frames. */
@media (min-width: 721px) {
  .bio-modal__panel {
    max-width: 880px;
    display: grid; grid-template-columns: minmax(260px, 36%) 1fr;
    align-items: stretch;
  }
  .bio-modal__media { height: 100%; min-height: 100%; }
  .bio-modal__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto;
    object-position: center 20%;
  }
  .bio-modal__body { padding: clamp(34px, 3.4vw, 52px); }
}
.bio-modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--paper-line); border-radius: 999px;
  color: var(--ink-deep); cursor: pointer; transition: background .2s ease;
}
.bio-modal__close:hover { background: #fff; }
.bio-modal__close svg { width: 20px; height: 20px; }
.bio-modal__body { padding: clamp(30px, 4vw, 52px); }
.bio-modal__role { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; }
.bio-modal__name { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink-deep); margin: 0 0 24px; }
.bio-modal__prose p { font-family: var(--sans); font-size: 16px; line-height: 1.72; color: var(--muted); margin: 0 0 16px; }
.bio-modal__prose p:last-child { margin-bottom: 0; }
.bio-modal__label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin: 30px 0 2px; }
.bio-modal__personal { margin-top: 24px; padding-top: 22px; }
.bio-modal__personal p { font-family: var(--sans); font-style: italic; font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Credential rows — compact, reused inside the modal */
.team-cred { margin: 0; }
.team-cred .cred-row {
  display: grid; grid-template-columns: minmax(120px, 150px) 1fr;
  column-gap: clamp(20px, 3vw, 40px); align-items: baseline;
  padding: 15px 0; border-top: 1px solid var(--paper-line);
}
.team-cred .cred-row:last-child { border-bottom: 1px solid var(--paper-line); }
.team-cred dt { font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; color: var(--ink-deep); }
.team-cred dd { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--muted); }

@media (max-width: 720px) {
  .bio-modal__panel { max-height: 92vh; }
  .bio-modal__media img { aspect-ratio: 4 / 3; object-position: center 20%; }
  .team-cred .cred-row { grid-template-columns: 1fr; row-gap: 3px; padding: 13px 0; }
}

/* ============================================================
   TOUR PAGE — solid navy hero (no media) + responsive 3D embed
   ============================================================ */
.tour-hero { background: var(--ink-night); }
.tour-hero .scrim { background: linear-gradient(180deg, rgba(20,36,56,.25), rgba(20,36,56,.55)); }
.tour-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--mist); box-shadow: 0 30px 70px rgba(20,36,56,.20);
}
.tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tour-note { margin: 18px auto 0; max-width: 620px; text-align: center; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--muted); }
@media (max-width: 640px) {
  .tour-frame { aspect-ratio: 4 / 3; }
}