
/* ==========================================================================
   OPTION A — "CARE DOSSIER"           provider bio body, MID-LEVEL tier
   Reference page: site/provider/courtney-travis.html  (12 of 14 pages)

   THE IDEA
   A skeptical patient on a phone should be able to answer "who is this, what
   do they do for me, where are they, how do I book" before reading a single
   paragraph. So the page is ordered facts-first: a dark navy IDENTITY BAND
   (photo or monogram + name + credential letters + role at display scale),
   a persistent BOOKING RAIL carrying this provider's OWN clinic numbers as
   separate labelled controls, then a formally structured FACT DOSSIER, and
   only then the prose. The bio is the narrative backing for the facts, not
   the opening.

   TIER EXTENSION (physician pages — joshua-hare, michael-warden)
   The <dl class="facts-a"> absorbs Board certification / Fellowship /
   Residency / Medical school / Memberships as five more labelled rows in the
   same grid, and the "Day-to-day care" tile row swaps its three labels. No
   new sections, no different page — which is also why the mid-level page
   never reads as a physician page with sections deleted: the dossier is the
   page, and it is full either way.

   VOCABULARY — deliberately the shipped /our-providers dark system, suffixed
   -a so N option fragments inline on one comparison page with zero collision:
     .shell-b -> .shell-a   .eyebrow-b -> .eyebrow-a   .chip-b -> .chip-a
     .cred-b  -> .cred-a    .btn-b     -> .btn-a       .tile-b -> .shot-a
     .lede-b-facts -> .facts-a (grown from a card row into a real <dl>)
   A patient arriving from that index lands in the same world.

   ZERO JavaScript. Every control is a static <a href>. The one inline
   handler is the contract-pinned photo onerror, and the monogram now renders
   UNDERNEATH the photo at all times, so the tile is never empty even with
   scripting off.

   CONTRAST, on the pixel actually painted:
     white on #00054C  16.8:1     green #53BA00 on navy      6.71:1
     --oa-ink on green  7.57:1    --oa-green-text on white   5.32:1
   White never touches green. Green never carries body text on light.

   PHONE — THE LIVE DEFECT, FIXED. The reference hardcodes the DALTON clinic's
   number in the sidebar for a provider who works in Farragut and Oak
   Ridge. Every phone control below is one of THIS provider's own clinics,
   taken from the Locations list on this same page, one labelled control per
   clinic so a two-clinic patient never guesses. (docket #28/#82/#87)

   KNOWN, ACCEPTED COST — DESKTOP FOCUS ORDER. Carry this into the owner-facing
   summary; it is a disclosed tradeoff, not an oversight. From 980px up the grid
   reverses DOM order against visual order: <aside class="rail-a"> is DOM-FIRST
   but grid-placed into the RIGHT column, while <div class="col-a"> is
   DOM-SECOND and renders on the LEFT. A sighted keyboard user therefore tabs
   breadcrumb -> top-right rail (Request Appointment, both clinic numbers) ->
   then back across to the left column for the dossier, bio and locations
   (WCAG 2.4.3 Focus Order). The reading sequence — book, then read — is
   defensible on its own, and DOM-first is what reaches a labelled clinic number
   without scrolling past the whole dossier. It is NOT "above the fold": see the
   measurement in the <=600px block below. The only clean removal (two grid
   areas, rail DOM-second, plus a mobile `order`) trades this for a worse mobile
   cost, so the DOM order is KEPT and the desktop cost is accepted on the record.
   ========================================================================== */

.opt-a{
  /* ---- logo-measured brand. Values, not preferences. No raw hex at a call
          site; nothing here is a new colour in the navy/green family. ---- */
  --oa-navy:        #00076D;
  --oa-navy-deep:   #00054C;
  --oa-navy-lift:   #00098F;
  --oa-navy-soft:   #2B3A9E;
  --oa-green:       #53BA00;   /* fills, rules, tile edges. NEVER under white */
  --oa-green-hover: #489F00;   /* ink on this = 5.64:1 */
  --oa-green-text:  #377A00;   /* the only green allowed as text on light */
  --oa-green-tint:  rgba(83,186,0,.10);
  --oa-ink:         #0B1020;   /* the dark that goes ON green — 7.57:1 */

  --oa-text:        #1E293B;
  --oa-text-light:  #4A5568;
  --oa-text-muted:  #6B7280;

  --oa-card:        #FFFFFF;
  --oa-bg-light:    #F7F8FA;
  --oa-bg-blue:     #F2F5FA;
  --oa-border:      #E3E8EF;
  --oa-border-lite: #F1F4F8;

  /* on-dark ladder, against #00054C: .82 white 11.3:1 · .68 white 8.1:1 */
  --oa-on:    #FFFFFF;
  --oa-on-2:  rgba(255,255,255,.82);
  --oa-on-3:  rgba(255,255,255,.68);
  --oa-hair:  rgba(255,255,255,.14);
  --oa-hair-2:rgba(255,255,255,.26);

  /* resting TWO-LAYER shadow — contact + ambient, tinted navy. The shadow
     does the work; a hairline between #fff and #fff reads as nothing. */
  --oa-shadow:    0 2px 4px rgba(0,7,109,.04), 0 12px 32px rgba(0,7,109,.09);
  --oa-shadow-hi: 0 4px 8px rgba(0,7,109,.05), 0 20px 52px rgba(0,7,109,.16);

  --oa-shell:  1320px;
  --oa-radius: 22px;
  --oa-radius-sm: 13px;
  --oa-header: 72px;          /* MEASURED: the shipped .hp-header renders 72px,
                                 which is chrome.css's own `--header-h: 72px`
                                 (declared on .hp-header, not :root, so .opt-a
                                 cannot var() it). style.css's --header-height:
                                 80px does NOT govern this chrome; the 80px that
                                 stood here over-cleared the real header by
                                 25.6px. For the sticky rail. */
  --oa-rhythm: 60px;
  --oa-rhythm-tight: 46px;

  --oa-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --oa-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  display: block; position: relative;
  background: var(--oa-card);
  font-family: var(--oa-sans);
  color: var(--oa-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* scoped reset — the fragment must stand up on a comparison page that may
   not link style.css, and must not leak one declaration outside .opt-a */
.opt-a, .opt-a *, .opt-a *::before, .opt-a *::after { box-sizing: border-box; }
.opt-a h1, .opt-a h2, .opt-a h3, .opt-a p, .opt-a ul, .opt-a li,
.opt-a dl, .opt-a dt, .opt-a dd, .opt-a figure { margin: 0; padding: 0; }
.opt-a ul { list-style: none; }
.opt-a img { max-width: 100%; display: block; }
.opt-a a { text-decoration: none; color: inherit; }

.opt-a .shell-a{
  width: 100%; max-width: var(--oa-shell); margin: 0 auto;
  padding-inline: clamp(1.05rem, 3.4vw, 2rem);
}

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

.opt-a .eyebrow-a{
  font-family: var(--oa-sans); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em; line-height: 1.5;
}
.opt-a .eyebrow-a--on   { color: var(--oa-green); }        /* on navy, 6.71:1 */
.opt-a .eyebrow-a--dark { color: var(--oa-green-text); }   /* on light, 5.32:1 */

/* ── 1. IDENTITY BAND — the one full navy-gradient moment on this page ──── */

.opt-a .id-a{
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--oa-on);
  background-color: var(--oa-navy-deep);
  background-image:
    radial-gradient(115% 145% at 84% -10%, rgba(0,9,143,.92), rgba(0,5,76,0) 60%),
    linear-gradient(152deg, var(--oa-navy-lift) 0%, var(--oa-navy) 44%, var(--oa-navy-deep) 100%);
  padding-top: clamp(1.15rem, 2.6vw, 1.8rem);
  padding-bottom: calc(var(--oa-rhythm-tight) + 40px);
}
.opt-a .id-a::after{
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(83,186,0,0), rgba(83,186,0,.55), rgba(83,186,0,0));
}

.opt-a .crumb-a{
  font-size: .78rem; font-weight: 500; line-height: 1.6;
  color: var(--oa-on-3); margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.opt-a .crumb-a a{ color: var(--oa-on-2); transition: color .18s ease; }
.opt-a .crumb-a a:hover{ color: var(--oa-green); }
.opt-a .crumb-a span[aria-hidden]{ color: rgba(255,255,255,.42); padding: 0 .38rem; }

.opt-a .id-a-row{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 2.8vw, 2.1rem);
}

.opt-a .shot-a{
  position: relative; flex: 0 0 auto;
  width: clamp(96px, 21vw, 232px);
}
.opt-a .id-a-say{ flex: 1 1 220px; }
/* basis 100% forces its own flex line below 1040px, where the panel becomes a
   wrapping chip row instead of the band's third column */
.opt-a .at-a{ flex: 1 1 100%; }
.opt-a .shot-a::after{
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 2px;
  z-index: 2; border-radius: 2px;
  background: linear-gradient(90deg, rgba(83,186,0,0), var(--oa-green), rgba(83,186,0,0));
}
/* contract 10 — the class, the data-initials and the onerror handler are kept
   verbatim. These declarations out-specify style.css's own rules for the same
   class, so the tile renders identically whether or not that sheet is loaded. */
.opt-a .provider-photo-placeholder{
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--oa-hair-2);
  background-color: var(--oa-navy-deep);
  background-image: linear-gradient(148deg, var(--oa-navy-lift), var(--oa-navy-deep));
  box-shadow: 0 10px 34px rgba(0,0,0,.34);
}
/* the monogram sits UNDER the photograph at all times. Eight of the fourteen
   headshots do not exist on disk (docket #114); this is the state those eight
   pages actually ship, so it is designed rather than fallen back into. */
.opt-a .provider-photo-placeholder::after{
  content: attr(data-initials);
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--oa-serif); font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: .08em;
  color: rgba(255,255,255,.58);   /* 5.3:1 at the tile's lightest point.
                                     MEASURED off the painted pixels (element
                                     screenshot, 1440x900): glyph rgb(148,151,195)
                                     vs local ground rgb(0,7,110) = 5.95:1, vs the
                                     gradient's lightest rgb(0,9,138) = 5.32:1.
                                     Passes -- the monogram computes at 49.6px,
                                     which is large text (3:1) and clears the
                                     small-text 4.5:1 bar anyway. The "6.3:1" that
                                     stood here overstated by ~1 point. */
}
.opt-a .provider-photo-placeholder.show-initials::after{ color: rgba(255,255,255,.74); }
.opt-a .provider-photo-placeholder img{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}

.opt-a .id-a-say{ min-width: 0; }
.opt-a .id-a-say .cred-a{ display: inline; }
.opt-a .id-a h1{
  font-family: var(--oa-serif); font-weight: 600; color: var(--oa-on);
  font-size: clamp(1.55rem, 4.4vw, 3rem); line-height: 1.08;
  letter-spacing: -.015em; margin-top: .3rem;
}
.opt-a .cred-a{
  font-family: var(--oa-sans); font-weight: 800;
  font-size: .48em; letter-spacing: .07em;
  color: var(--oa-green); white-space: nowrap;
  vertical-align: .14em;
}
.opt-a .id-a-role{
  font-size: clamp(.95rem, 1.5vw, 1.1rem); font-weight: 500;
  color: var(--oa-on-2); margin-top: .45rem;
}
/* "Practicing at" — the same information the index shows as chips, given the
   room to carry the county and the metro it anchors to. It is the third column
   of the band from 1040px up (which is what stops the band from running out of
   content halfway across a desktop screen), and a wrapping chip row below. */
.opt-a .at-a{ margin-top: .9rem; }
.opt-a .at-a-l{
  font-size: .655rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .15em; color: var(--oa-green); margin-bottom: .45rem;
}
.opt-a .at-a-list{ display: flex; flex-wrap: wrap; gap: .4rem; }
.opt-a .at-a-list li{
  display: flex; align-items: center; gap: .42rem;
  padding: .34rem .68rem .36rem .5rem; border-radius: 999px;
  border: 1px solid var(--oa-hair-2); background: rgba(255,255,255,.06);
}
.opt-a .at-a-list svg{ width: 12px; height: 12px; flex-shrink: 0; color: var(--oa-green); }
.opt-a .at-a-city{ font-size: .78rem; font-weight: 700; color: var(--oa-on); }
.opt-a .at-a-meta{ font-size: .715rem; font-weight: 500; color: var(--oa-on-3); }

@media (min-width: 1040px){
  .opt-a .id-a-row{ align-items: stretch; }
  .opt-a .id-a-say{ display: flex; flex-direction: column; justify-content: center; }
  .opt-a .at-a{
    flex: 0 0 264px; align-self: center; width: 264px; margin-top: 0;
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--oa-hair); border-radius: 18px;
    background: rgba(255,255,255,.06);
  }
  .opt-a .at-a-list{ display: block; }
  .opt-a .at-a-list li{
    display: grid; grid-template-columns: 14px minmax(0, 1fr);
    align-items: start; gap: .1rem .55rem;
    padding: .6rem 0; border: 0; border-radius: 0; background: none;
    border-bottom: 1px solid var(--oa-hair);
  }
  .opt-a .at-a-list li:last-child{ border-bottom: 0; padding-bottom: 0; }
  .opt-a .at-a-list li:first-child{ padding-top: 0; }
  .opt-a .at-a-list svg{ grid-column: 1; grid-row: 1; margin-top: .22rem; }
  .opt-a .at-a-city{ grid-column: 2; grid-row: 1; font-size: .93rem; }
  .opt-a .at-a-meta{ grid-column: 2; grid-row: 2; font-size: .73rem; line-height: 1.4; }
}

/* ── 2. BODY — light clinical ground, cards tucked up into the navy ─────── */

.opt-a .body-a{
  background: var(--oa-bg-light);
  padding-bottom: var(--oa-rhythm);
}
.opt-a .grid-a{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  position: relative; z-index: 2;
  margin-top: -40px;              /* the dossier lifts off the navy band */
}

.opt-a .card-a{
  background: var(--oa-card);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius);
  box-shadow: var(--oa-shadow);
  padding: clamp(1.3rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.35rem, 2.4vw, 1.65rem);
}
.opt-a .col-a{ min-width: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

/* ── the booking rail ──────────────────────────────────────────────────── */

.opt-a .rail-a{
  background: var(--oa-card);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius);
  box-shadow: var(--oa-shadow);
  overflow: hidden;
}
/* a real header block, not a decorative top edge: it carries the eyebrow and
   the rail's own <h2>, and it is what makes the booking column read as a
   different kind of object from the dossier beside it. */
.opt-a .rail-a-head{
  background: var(--oa-navy); color: var(--oa-on);
  padding: 1rem clamp(1.05rem, 2.2vw, 1.35rem) .9rem;
}
.opt-a .rail-a-head h2{
  font-family: var(--oa-serif); font-weight: 600; color: var(--oa-on);
  font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.22;
  letter-spacing: -.01em; margin-top: .2rem;
}
.opt-a .rail-a-body{ padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1.05rem, 2.2vw, 1.35rem) 1.25rem; }
.opt-a .rail-a-or{
  font-size: .855rem; color: var(--oa-text-light);
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--oa-border-lite);
}
.opt-a .rail-a-foot{
  font-size: .755rem; line-height: 1.55; color: var(--oa-text-muted);
  margin-top: .95rem; padding-top: .8rem; border-top: 1px solid var(--oa-border-lite);
}

.opt-a .btn-a{
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--oa-sans); font-weight: 700; font-size: .95rem; line-height: 1.2;
  border: 2px solid transparent; border-radius: 999px;
  padding: .72rem 1.4rem; min-height: 48px; text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.opt-a .btn-a--green{ background: var(--oa-green); color: var(--oa-ink); }
.opt-a .btn-a--green:hover{ background: var(--oa-green-hover); }
.opt-a .btn-a--navy{ background: var(--oa-navy); color: var(--oa-on); }
.opt-a .btn-a--navy:hover{ background: var(--oa-navy-lift); }
.opt-a .rail-a .btn-a{ width: 100%; }

/* one labelled control per clinic. The clinic name is part of the link's own
   accessible name, so "Farragut, TN (865) 218-2100" is what a screen reader
   announces — never a bare number a patient has to attribute themselves. */
.opt-a .call-a{
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0 .8rem;
  margin-top: .6rem; padding: .68rem .8rem;
  border: 1px solid var(--oa-border); border-radius: var(--oa-radius-sm);
  background: var(--oa-card);
  box-shadow: 0 1px 2px rgba(0,7,109,.05);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.opt-a .call-a-l{
  grid-column: 1; grid-row: 1;
  font-size: .665rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--oa-green-text);
}
.opt-a .call-a-n{
  grid-column: 1; grid-row: 2;
  font-size: 1.06rem; font-weight: 700; letter-spacing: -.012em;
  color: var(--oa-navy);
}
.opt-a .call-a-i{
  grid-column: 2; grid-row: 1 / 3;
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--oa-on);
  background-image: linear-gradient(148deg, var(--oa-navy-lift), var(--oa-navy-deep));
}
.opt-a .call-a-i svg{ width: 17px; height: 17px; }
.opt-a .call-a:hover{
  border-color: var(--oa-navy-soft);
  background: var(--oa-bg-blue);
  box-shadow: var(--oa-shadow);
}

/* ── the fact dossier ─────────────────────────────────────────────────── */

.opt-a .dossier-a h2,
.opt-a .bio-a h2,
.opt-a .locs-a h2{
  font-family: var(--oa-serif); font-weight: 600; color: var(--oa-navy);
  font-size: clamp(1.32rem, 2.1vw, 1.72rem); line-height: 1.22; letter-spacing: -.012em;
}
.opt-a .dossier-a-head{
  padding-bottom: .85rem; border-bottom: 2px solid var(--oa-bg-blue);
}

.opt-a .facts-a{
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
.opt-a .fact-a{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .1rem;
  padding: .72rem 0 .68rem;
  border-bottom: 1px solid var(--oa-border);
}
.opt-a .fact-a dt{
  font-size: .69rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--oa-green-text);
}
.opt-a .fact-a dd{
  font-size: .95rem; font-weight: 500; line-height: 1.55; color: var(--oa-text);
}

.opt-a .does-a{ margin-top: 1.25rem; }
.opt-a .does-a-list{
  display: grid; gap: .6rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.opt-a .does-a-list li{
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .8rem;
  border: 1px solid var(--oa-border); border-radius: var(--oa-radius-sm);
  background: var(--oa-bg-blue);
}
.opt-a .ico-a{
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--oa-on);
  background-image: linear-gradient(148deg, var(--oa-navy-lift), var(--oa-navy-deep));
}
.opt-a .ico-a svg{ width: 17px; height: 17px; }
.opt-a .does-a-list b{
  font-size: .855rem; font-weight: 600; line-height: 1.35; color: var(--oa-text);
}

/* ── the prose, and the house callout ─────────────────────────────────── */

.opt-a .bio-a p{
  font-size: 1.01rem; line-height: 1.82; color: var(--oa-text);
  margin-top: 1rem;
}
/* the sanctioned single accent edge in this system: a 3px LEFT border over a
   faint accent wash. Never a per-card top stripe. */
.opt-a .note-a{
  margin-top: 1.5rem;
  padding: 1.05rem 1.3rem 1.1rem;
  border-left: 3px solid var(--oa-green);
  border-radius: 0 var(--oa-radius-sm) var(--oa-radius-sm) 0;
  background: linear-gradient(90deg, var(--oa-green-tint), rgba(83,186,0,.02));
}
.opt-a .note-a-l{
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--oa-green-text); margin-bottom: .3rem;
}
.opt-a .note-a p{ font-size: .93rem; line-height: 1.7; color: var(--oa-text); margin: 0; }

/* ── locations ────────────────────────────────────────────────────────── */

.opt-a .locs-a-grid{
  display: grid; gap: .85rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.opt-a .loc-a{
  display: block; padding: 1.1rem 1.15rem 1.15rem;
  background: var(--oa-card);
  border: 1px solid var(--oa-border); border-radius: var(--oa-radius-sm);
  box-shadow: 0 1px 2px rgba(0,7,109,.05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.opt-a .loc-a-top{ display: flex; align-items: center; gap: .65rem; }
.opt-a .loc-a h3{
  font-family: var(--oa-serif); font-weight: 600; color: var(--oa-navy);
  font-size: 1.1rem; line-height: 1.25;
}
.opt-a .loc-a-meta{ display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--oa-green-text); margin-top: .12rem; }
.opt-a .loc-a-addr{ display: block; font-size: .855rem; color: var(--oa-text-light); margin-top: .7rem; }
.opt-a .loc-a-line{ display: block; font-size: .855rem; font-weight: 600; color: var(--oa-text); margin-top: .2rem; }
.opt-a .loc-a-go{
  display: inline-block; margin-top: .7rem;
  font-size: .8rem; font-weight: 700; color: var(--oa-navy);
}
.opt-a .loc-a:hover{ border-color: var(--oa-navy-soft); box-shadow: var(--oa-shadow-hi); }

/* ── 3. CLOSING BAND — inverted to light, so it is not a second navy band ─ */

.opt-a .close-a{
  background-color: var(--oa-card);
  background-image: radial-gradient(88% 130% at 10% 0%, var(--oa-green-tint), rgba(83,186,0,0) 56%);
  border-top: 1px solid var(--oa-border);
  padding-block: var(--oa-rhythm);
}
.opt-a .close-a h2{
  font-family: var(--oa-serif); font-weight: 600; color: var(--oa-navy);
  font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.15;
  letter-spacing: -.018em; margin-top: .3rem;
}
.opt-a .close-a-say{
  font-size: 1.02rem; line-height: 1.75; color: var(--oa-text-light);
  margin-top: .8rem; max-width: 62rem;
}
.opt-a .close-a-ctas{
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem;
}

/* ── focus, motion, and the small-screen ladder ───────────────────────── */

.opt-a :focus-visible{
  outline: 3px solid var(--oa-green-text); outline-offset: 3px; border-radius: 8px;
}
.opt-a .id-a :focus-visible{ outline-color: var(--oa-on); }

@media (prefers-reduced-motion: no-preference){
  .opt-a .loc-a:hover{ transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){
  .opt-a .btn-a, .opt-a .call-a, .opt-a .loc-a, .opt-a .crumb-a a{ transition: none; }
}

@media (max-width: 600px){
  .opt-a .id-a{ padding-bottom: calc(var(--oa-rhythm-tight) + 34px); }
  .opt-a .grid-a{ margin-top: -34px; }
  .opt-a .body-a{ padding-bottom: var(--oa-rhythm-tight); }
  .opt-a .close-a{ padding-block: var(--oa-rhythm-tight); }
  /* these tighten the rail on small screens so the Request Appointment button
     and both labelled clinic numbers sit as high as the layout allows.
     NOW MEASURED, on the real generated page with the real chrome, and it is
     WORSE than the retraction that stood here estimated. At 390x844 (a
     two-clinic provider): crisis-bar top y=762, last .call-a bottom y=759 — 3px
     of clearance — and .rail-a-foot occupies 771-819, i.e. ENTIRELY under the
     fixed crisis bar. At 360x740 (a very common Android viewport): crisis-bar
     top y=658, Request Appointment bottom y=653, first .call-a top y=708 — so
     NO clinic number is on the first screen at all.
     Therefore: do NOT claim "the whole rail inside the first screen", and do NOT
     defend the DOM order on an above-the-fold property. Mitigating, and why this
     is not a lead-path defect: the sitewide crisis bar itself carries CALL A
     CLINIC with all five numbers, so the patient always has a phone path.
     These padding values have NOT been retuned — doing so is a design change to
     the owner-picked option and needs the owner, not a passing session. */
  .opt-a .at-a{ margin-top: .7rem; }
  .opt-a .rail-a-head{ padding: .8rem 1.05rem .75rem; }
  .opt-a .rail-a-body{ padding: .9rem 1.05rem 1rem; }
  .opt-a .rail-a-or{ margin-top: .8rem; padding-top: .7rem; }
  .opt-a .rail-a-foot{ margin-top: .75rem; padding-top: .65rem; }
  .opt-a .call-a{ margin-top: .5rem; }
}

@media (min-width: 700px){
  .opt-a .facts-a{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-a .fact-a--wide{ grid-column: 1 / -1; }
}

@media (min-width: 980px){
  .opt-a .grid-a{ grid-template-columns: minmax(0, 1fr) 348px; }
  .opt-a .col-a { grid-column: 1; grid-row: 1; }
  /* persistent on desktop; on a phone it is simply the second thing on the
     page — reached before the whole dossier, but NOT above the fold (measured
     in the <=600px block above) — without a floating bar that would collide
     with the site's own crisis call bar. */
  .opt-a .rail-a{
    grid-column: 2; grid-row: 1;
    position: sticky; top: calc(var(--oa-header) + 1.1rem);
  }
}
