/* ==========================================================================
   SPECIALTY CLINIC PAGES — one template, four clinics.
   ========================================================================== */

/* ------------------------------------------------------ page hero -------- */
.page-hero { position: relative; overflow: hidden; background: var(--tint); }
.page-hero__inner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem,5vw,4.5rem); align-items: center;
  padding-block: clamp(3.25rem,6vw,5.5rem);
}
@media (max-width: 880px) { .page-hero__inner { grid-template-columns: 1fr; } }
.page-hero h1 { max-width: 16ch; }
.page-hero__lead { max-width: 48ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
/* Quiet second audience: referring providers, without competing with the
   patient CTA above it. */
.page-hero__note { margin: 1rem 0 0; font-size: var(--fs-small); color: var(--text-soft); }
.page-hero__note a { font-weight: 600; }
.page-hero__media img { width: 100%; border-radius: var(--r-lg); object-fit: cover; aspect-ratio: 4/3.4; }

.crumb { font-size: .8125rem; margin-bottom: 1.4rem; color: var(--text-soft); }
.crumb a { color: var(--text-soft); text-decoration: none; }
.crumb a:hover { color: var(--signal-text); text-decoration: underline; }
.crumb span { color: var(--muted); margin-inline: .4rem; }

/* --------------------------------------------- symptom checklist --------- */
.symptoms-band .wrap--narrow > p { margin-inline: 0; }
.symptom-list { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 2rem; }
@media (max-width: 640px) { .symptom-list { grid-template-columns: 1fr; } }
.symptom-list li {
  position: relative; padding: .8rem 0 .8rem 2.1rem;
  border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text);
}
.symptom-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.75px solid var(--signal);
}
.symptoms-note { margin-top: 1.6rem; font-size: var(--fs-small); color: var(--text-soft); }

/* ---------------------------------------------- the visit spine ----------
   Numbered steps on a vertical line — the PicnicHealth timeline, drawn in
   Webb's haze blue. The numbering is real information here: it is the order
   of the actual visits. */
.spine { list-style: none; margin: 2.75rem 0 0; padding: 0; position: relative; }
.spine::before {
  content: ""; position: absolute; left: 21px; top: 14px; bottom: 14px;
  width: 1.5px; background: var(--haze);
}
.spine li { position: relative; padding: 0 0 2.1rem 4.1rem; }
.spine li:last-child { padding-bottom: 0; }
.spine__n {
  position: absolute; left: 0; top: -2px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1.5px solid var(--haze);
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 55, "WONK" 0, "opsz" 20;
  font-size: 1.15rem; color: var(--ink);
}
.spine h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.spine p { font-size: var(--fs-small); color: var(--text-soft); margin: 0; max-width: 52ch; }

/* ------------------------------------------------ specialist card -------- */
.specialist {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
  background: var(--paper); border-radius: var(--r-lg);
  padding: clamp(1.5rem,3vw,2.25rem);
}
@media (max-width: 560px) { .specialist { grid-template-columns: 1fr; } }
.specialist img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }
.specialist h3 { margin-bottom: .2rem; }
.specialist__role { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-text); margin: 0 0 .7rem; }
.specialist p:last-child { margin: 0; font-size: var(--fs-small); color: var(--text-soft); }

/* Vision therapy is run by three people, not one. Same paper card as
   .specialist, but the portraits sit as a row of equals — no ranking, and
   deliberately no city under any name (staffing moves between clinics). */
.therapists {
  background: var(--paper); border-radius: var(--r-lg);
  padding: clamp(1.5rem,3vw,2.25rem);
}
.therapists__row {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(1.1rem,4vw,2.4rem);
}
.therapists__row li { text-align: center; }
.therapists__row img {
  width: clamp(88px,20vw,116px); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; display: block; margin: 0 auto .6rem;
}
.therapists__row h3 { margin: 0; font-size: 1.08rem; }
.therapists__role {
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal-text); margin: 0 0 .7rem;
}
.therapists p:last-child { margin: 0; font-size: var(--fs-small); color: var(--text-soft); }

/* --------------------------------------------------------- FAQ ----------- */
.faq { max-width: var(--wrap-narrow); margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem;
  padding: 1.35rem 0; font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 24;
  font-size: 1.22rem; color: var(--ink); letter-spacing: -0.015em;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--signal-text); }
.faq summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.faq summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--body); font-weight: 400; font-size: 1.35rem; color: var(--signal-text);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { margin: 0 0 1.5rem; padding-right: 2.5rem; font-size: var(--fs-small); color: var(--text-soft); max-width: 62ch; }

/* ------------------------------------------------- hub cards ------------- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.75rem; }
@media (max-width: 800px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: var(--tint); border-radius: var(--r-lg); overflow: hidden;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hub-card:hover { background: var(--tint-deep); transform: translateY(-4px); }
.hub-card:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.hub-card img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; }
.hub-card__body { padding: 1.6rem 1.6rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.hub-card h3 { margin-bottom: .35rem; }
.hub-card p { font-size: var(--fs-small); color: var(--text-soft); margin: 0 0 1rem; }
.hub-card .door__go { margin-top: auto; padding-top: .4rem; }

/* ==========================================================================
   TEAM PAGE
   ========================================================================== */
.doctor-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.75rem; }
@media (max-width: 900px) { .doctor-grid { grid-template-columns: 1fr; } }
.doctor { background: var(--paper); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); }
.doctor img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.doctor__body { padding: 1.7rem 1.6rem 1.8rem; }
.doctor__body h3 { margin-bottom: .15rem; }
.doctor__creds { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-text); margin: 0 0 .9rem; }
.doctor__body p { font-size: var(--fs-small); color: var(--text-soft); margin-bottom: .8em; }
.doctor__body p:last-child { margin-bottom: 0; }

.staff-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 2.2rem; }
@media (max-width: 980px) { .staff-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .staff-grid { grid-template-columns: repeat(2,1fr); } }
.staffer { text-align: left; }
.staffer img { width: 100%; aspect-ratio: 1/1.08; object-fit: cover; border-radius: var(--r-md); }
.staffer h3 { font-size: 1.08rem; margin: .8rem 0 .05rem; }
.staffer p { font-size: .8125rem; color: var(--text-soft); margin: 0; line-height: 1.4; }
.staff-section-note { font-size: var(--fs-small); color: var(--text-soft); max-width: 60ch; }

/* ==========================================================================
   LOCATIONS PAGE
   ========================================================================== */
.locpage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; padding-block: clamp(2.25rem,4vw,3.5rem); border-top: 1px solid var(--rule); }
.locpage:first-of-type { border-top: 0; }
.locpage:nth-child(even) .locpage__media { order: -1; }
@media (max-width: 860px) { .locpage { grid-template-columns: 1fr; } .locpage:nth-child(even) .locpage__media { order: 0; } }
.locpage__media img { width: 100%; border-radius: var(--r-lg); object-fit: cover; aspect-ratio: 16/10.5; }
.locpage h2 { margin-bottom: .2rem; }
.locpage__addr { color: var(--text-soft); margin-bottom: 1rem; }
.locpage__meta { display: grid; gap: .3rem; margin: 0 0 1.4rem; font-size: var(--fs-small); color: var(--text-soft); }
.locpage__meta strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   EYEWEAR / INSURANCE / COMMUNITY / RESOURCES
   ========================================================================== */
.brand-cloud { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding: 0; list-style: none; }
.brand-cloud li {
  font-size: .875rem; font-weight: 500; color: var(--text-soft);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: .5rem 1rem; background: var(--paper);
}
.lens-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.lens-list li { padding-left: 1.5rem; position: relative; font-size: var(--fs-small); color: var(--text-soft); }
.lens-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--signal); }
.lens-list strong { color: var(--text); }

.ins-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem,4vw,3rem); margin-top: 2.5rem; }
@media (max-width: 800px) { .ins-cols { grid-template-columns: 1fr; } }
.ins-card { background: var(--paper); border-radius: var(--r-lg); padding: 1.9rem 1.7rem; border: 1px solid var(--rule); }
.ins-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.ins-card ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.75rem; }
.ins-card--no ul, .ins-card--oon ul { columns: 1; }
.ins-side { display: grid; gap: clamp(1.25rem,3vw,1.75rem); align-content: start; }
.ins-card li { font-size: .875rem; color: var(--text-soft); padding: .3rem 0; break-inside: avoid; }
@media (max-width: 560px) { .ins-card ul { columns: 1; } }
.ins-note { font-size: .8125rem; color: var(--muted); margin-top: 1.1rem; }

.program-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 2.5rem; }
@media (max-width: 760px) { .program-grid { grid-template-columns: 1fr; } }
.program { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--rule); padding: 1.6rem 1.5rem; }
.program h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.program p { font-size: .9rem; color: var(--text-soft); margin: 0; }
.program--big { grid-column: 1 / -1; background: var(--tint); border: 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.75rem; align-items: center; }
@media (max-width: 760px) { .program--big { grid-template-columns: 1fr; } }
.program--big img { border-radius: var(--r-md); width: 100%; aspect-ratio: 16/10; object-fit: cover; }

.article { max-width: var(--wrap-narrow); margin-inline: auto; }
.article h2 { font-size: clamp(1.5rem,2vw,1.9rem); margin-top: 2.2em; }
.article .callout { background: var(--tint); border-radius: var(--r-lg); padding: 1.6rem 1.7rem; margin: 2rem 0; }
.article .callout h3 { font-size: 1.1rem; }
.article .callout ul { margin: .6rem 0 0; padding-left: 1.2rem; font-size: var(--fs-small); color: var(--text-soft); }
.article .callout li { margin-bottom: .35rem; }
.article__meta { font-size: .8125rem; color: var(--muted); margin-bottom: 2rem; }
.post-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.post-card:hover { border-color: var(--haze); transform: translateY(-3px); }
.post-card h3 { margin-bottom: .4rem; }
.post-card p { font-size: var(--fs-small); color: var(--text-soft); margin: 0 0 1rem; }
.post-card .door__go { margin-top: auto; }
.post-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } }
.legal { max-width: var(--wrap-narrow); margin-inline: auto; }
.legal h2 { font-size: 1.4rem; margin-top: 2em; }
.legal p, .legal li { font-size: var(--fs-small); color: var(--text-soft); }

/* ---------------------------------------------------------- icon system --
   One line set, 24px grid, 1.6 stroke. Icons label a real category —
   never decoration for its own sake. */
.ic { flex: none; color: var(--signal-text); stroke-width: 1.6; }

.icon-list { list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem 2.2rem; }
@media (max-width: 700px) { .icon-list { grid-template-columns: 1fr; } }
.icon-list li { display: flex; gap: .8rem; align-items: flex-start;
  font-size: 1rem; line-height: 1.55; color: var(--body); }
.icon-list li .ic { margin-top: .16rem; stroke-width: 1.5; opacity: .95; }
.icon-list li strong { color: var(--ink); font-weight: 600; }

/* icon as a section marker beside a heading */
.icon-head { display: flex; align-items: center; gap: .7rem; }
.icon-head .ic { color: var(--signal-text); }

/* icon chip inside cards */
.icon-chip { width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--tint);
  color: var(--ink); margin-bottom: .9rem; }
.icon-chip .ic { color: inherit; }

/* the numbered spine gains an icon slot */
.spine__ic { color: var(--signal-text); }

/* role band on the team page */
.role-band { display: flex; align-items: center; gap: .65rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal-text); font-weight: 600; }
.staffer__loc { display: block; font-size: .72rem; letter-spacing: .06em;
  color: var(--muted); margin-top: .1rem; }

.icon-list--single { grid-template-columns: 1fr; gap: .95rem; }
.locpage__addr { display: flex; gap: .55rem; align-items: flex-start; }
.locpage__addr .ic { margin-top: .2rem; color: var(--signal-text); }
.loc__phone { display: inline-flex; align-items: center; gap: .5rem; }
.btn .ic { margin-right: .1rem; }

/* callout — a single highlighted fact inside a section */
.callout { margin: 1.9rem 0; padding: 1.35rem 1.5rem; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--signal); }
.callout h3 { font-size: 1.12rem; color: var(--ink); margin: 0 0 .4rem; }
.callout p { margin: 0; }
/* callout--face — the same card with the person it names beside it */
.callout--face { display: flex; gap: clamp(1.1rem,3vw,1.75rem); align-items: flex-start; }
.callout__face { margin: 0; flex: 0 0 auto; width: clamp(104px,17vw,140px); text-align: center; }
.callout__face img { width: 100%; aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; display: block; margin: 0 0 .55rem; }
.callout__face figcaption { font-size: .78rem; line-height: 1.35; color: var(--ink); font-weight: 600; }
.callout__face figcaption span { display: block; font-weight: 400; color: var(--text-soft); }
.callout__face figcaption span:first-of-type { margin-top: .14rem; }
@media (max-width: 560px) {
  /* stacked: the caption gets the full card width so the name does not wrap */
  .callout--face { display: block; }
  .callout__face { width: auto; margin: 0 0 1.1rem; }
  .callout__face img { width: 120px; margin-inline: auto; }
}
.sub-h { font-size: 1.12rem; color: var(--ink); margin: 2rem 0 .3rem; }

/* ------------------------------------------------------------ reviews ----
   Facts are rendered statically — the rating never animates. */
.rating-band { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center;
  padding: 1.4rem 1.6rem; border-radius: var(--r-md);
  background: var(--tint); border: 1px solid rgba(0,92,153,.12); }
.rating-band__score { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.rating-band__score b { font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 0, "opsz" 48;
  font-size: 3rem; line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.rating-band .stars { color: var(--signal-text); font-size: 1.1rem; letter-spacing: .1em; }
.rating-band__label { font-size: .9375rem; color: var(--ink); font-weight: 600; }
.rating-band__note { margin: 0; font-size: .875rem; color: var(--text-soft); max-width: 42ch; }

.quote-grid--page { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem; margin-top: 2rem; align-items: start; }
@media (max-width: 980px) { .quote-grid--page { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .quote-grid--page { grid-template-columns: 1fr; } }
.quote-grid--page .quote { background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 1.35rem 1.4rem; display: flex; flex-direction: column;
  gap: .7rem; height: auto; }
.quote__head { font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 0, "opsz" 30;
  font-size: 1.18rem; line-height: 1.22; color: var(--ink); margin: 0; letter-spacing: -.015em; }
.quote__src { font-size: .8125rem; color: var(--muted); margin: 0; }
.quote-grid--page .quote__who { margin-top: .35rem; padding-top: .8rem;
  border-top: 1px solid var(--rule); }

.video-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.9rem; }
@media (max-width: 780px) { .video-slots { grid-template-columns: 1fr; } }
.ph--video { aspect-ratio: 16/10; }

/* two-part explainer + split layout */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; margin-top: 1.9rem; }
@media (max-width: 700px) { .halves { grid-template-columns: 1fr; } }
.half { padding: 1.4rem 1.5rem; border-radius: var(--r-md);
  background: var(--tint); border: 1px solid rgba(0,92,153,.10); }
.half h3 { font-size: 1.14rem; color: var(--ink); margin: 0 0 .35rem; }
.half p { margin: 0; }
.split { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* mission statement — reproduced verbatim, never paraphrased */
.mission { margin: 1.6rem 0 0; padding: 1.6rem 1.9rem; border-left: 3px solid var(--signal);
  background: var(--tint); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 0, "opsz" 32;
  font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.5; color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.9rem; }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact { padding: 1.15rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--r-md); }
.fact b { display: block; font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 0, "opsz" 40;
  font-size: 2.1rem; line-height: 1; color: var(--ink); letter-spacing: -.025em; }
.fact span { display: block; font-size: .8125rem; color: var(--text-soft); margin-top: .45rem; line-height: 1.4; }

/* --------------------------------------------------------- service map ---
   Hand-drawn SVG, real coordinates, zero third-party requests. */
.mapframe { position: relative; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; }
.svgmap { display: block; width: 100%; height: auto; background: var(--paper); }
.svgmap__roads path { stroke: var(--haze); stroke-width: 2.4; opacity: .75; }
.svgmap__towns circle { fill: var(--haze); }
.svgmap__towns text { font-family: var(--body); font-size: 17px;
  fill: var(--muted); letter-spacing: .01em; }
.svgmap__halo { fill: var(--signal); opacity: .13; }
.svgmap__dot  { fill: var(--signal); stroke: var(--paper); stroke-width: 2.5; }
.svgmap__name { font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 55, "WONK" 0, "opsz" 28;
  font-size: 30px; fill: var(--ink); letter-spacing: -.012em; }
.svgmap__addr { font-family: var(--body); font-size: 16px; fill: var(--muted); }
.mapframe__legend { max-width: none; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  padding: .8rem 1.1rem; border-top: 1px solid var(--rule); background: var(--tint);
  font-size: .8125rem; color: var(--text-soft); }
.mapframe__legend b { display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink); font-weight: 600; }
.mapframe__legend i { width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal); display: inline-block; }
.mapframe__legend i.town { background: var(--haze); }

/* click-to-load Google map — nothing third-party loads until asked */
.mapload { position: relative; border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; background: var(--tint); }
.mapload__inner { aspect-ratio: 16/9; display: grid; place-items: center; text-align: center;
  padding: 1.5rem; gap: .7rem; }
.mapload__inner p { margin: 0; font-size: .875rem; color: var(--text-soft); max-width: 40ch; }
.mapload iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* ------------------------------------------------------------- people ----
   Staff cards. A card with a bio reveals it on hover and on keyboard focus;
   a card without one stays inert, because the practice has not written a bio
   for everybody and an empty panel would look broken rather than honest. */
.person-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2rem; }
.person-grid--lg { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 980px) { .person-grid { grid-template-columns: repeat(3, 1fr); }
                            .person-grid--lg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .person-grid, .person-grid--lg { grid-template-columns: repeat(2, 1fr); } }

.person { position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--tint); isolation: isolate; }
/* The studio headshots are 2400x3000, which is exactly 4:5. Displaying them at
   that ratio means the browser crops nothing and the photos appear as shot. */
.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }

.person__base { padding: .8rem .9rem 1rem; }
.person__base h3 { font-size: 1.06rem; color: var(--ink); margin: 0 0 .1rem; }
.person__role { font-size: .8125rem; color: var(--text-soft); margin: 0 0 .15rem; line-height: 1.35; }
.person__loc { display: block; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }

/* the reveal */
.person__panel { position: absolute; inset: 0; background: var(--ink);
  color: #E8F1F9; display: grid; align-items: end; opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s; overflow-y: auto; }
.person__panelin { padding: 1.15rem 1.15rem 1.25rem; }
.person__panel h3 { color: #fff; font-size: 1.06rem; margin: 0 0 .15rem; }
.person__panel .person__role { color: var(--on-ink-soft); margin-bottom: .3rem; }
.person__panel .person__loc { color: var(--on-ink-soft); margin-bottom: .55rem; }
.person__bio { font-size: .8125rem; line-height: 1.55; margin: 0; color: #D6E6F4; }

.person--bio { cursor: default; }
.person--bio:hover .person__panel,
.person--bio:focus-visible .person__panel,
.person--bio.is-open .person__panel { opacity: 1; visibility: visible; }
.person--bio:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* a quiet cue that there is something to read, so the hover is discoverable */
.person--bio .person__base::after { content: "Read more";
  display: block; margin-top: .45rem; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--signal-text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .person__panel { transition: none; } }
/* Phones: cards are two to a row (~170px wide), too narrow to read most bios
   inside the photo. A tapped card spans the whole row so the bio fits. */
@media (max-width: 640px) {
  .person--bio.is-open { grid-column: 1 / -1; }
  .person--bio.is-open .person__bio { font-size: .875rem; }
}

/* A placeholder standing in for a hero photo must fill the hero slot, or it
   reads as a rendering fault rather than an intentional gap. */
.page-hero__media .ph { aspect-ratio: 4/3.4; width: 100%;
  background: var(--paper); border: 1px solid var(--rule); }
.page-hero__media .ph svg { width: 52%; max-width: 240px; color: var(--haze); }
.ph__note { color: var(--muted) !important; }
.framed .ph { aspect-ratio: 4/5; width: 100%; }

/* the locations hero shows the service-area map instead of a photo */
.page-hero__media--map { background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 1rem 1rem .4rem; }
.page-hero__media--map .svgmap { width: 100%; height: auto; }
.page-hero__mapnote { margin: 0 0 .5rem; text-align: center; font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); max-width: none; }

/* A hero with no photo: the page's own content is the picture. */
.page-hero--text .page-hero__inner { grid-template-columns: 1fr; }
.page-hero--text .page-hero__lead { max-width: 62ch; }

/* Insurance: "not the cheapest" value groups */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } }
.value-grid .lens-list { margin-top: .9rem; }

/* reviews page: name and role sit on two lines; keep them together */
.quote-grid--page .quote__who > span { line-height: 1.35; }

/* a hub card without a photo: same shape as the photo cards, one tint step deeper */
.hub-card .ph { aspect-ratio: 16/8.5; border-radius: 0; background: var(--tint-deep); }

/* Article body: a list must not run into the paragraph after it. */
.article .icon-list + p, .article ul + p, .article ol + p { margin-top: 1.6rem; }
/* Related cards: titles reserve two lines so descriptions start level across a row. */
.post-card h3 { min-height: 2.5em; }

/* Placeholder inside a framed slot: a white card, like the hero placeholder, so it never reads
   as a pale box on a pale section. */
.framed .ph { background: var(--paper); }
/* Hub: an odd last card spans the row and lays out side by side instead of sitting alone. */
@media (min-width: 801px) {
  .hub-grid > .hub-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .hub-grid > .hub-card:last-child:nth-child(odd) img,
  .hub-grid > .hub-card:last-child:nth-child(odd) .ph { height: 100%; aspect-ratio: auto; min-height: 300px; }
  .hub-grid > .hub-card:last-child:nth-child(odd) .hub-card__body { justify-content: center; padding: 2.2rem 2.4rem; }
  .hub-grid > .hub-card:last-child:nth-child(odd) .door__go { margin-top: 1.5rem; }
}

/* Terms / privacy: sub-headings sit below section headings in size. */
.legal h3 { font-size: 1.1rem; margin: 1.4em 0 .3em; }
/* Two sections in a row on the same background: one gap between them, not two. */
.section:not(.surface-tint):not(.surface-ink) + .section:not(.surface-tint):not(.surface-ink),
.section.surface-tint + .section.surface-tint { padding-top: 0; }
/* An odd last card in a two-column program grid spans the row instead of sitting alone. */
@media (min-width: 761px) { .program-grid:not(:has(> .program--big)) > .program:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Team cards and FAQ rules on pale blue: white card bodies, visible dividers. */
.surface-tint .person { background: var(--paper); }
.surface-tint .faq details { border-bottom-color: rgba(0, 92, 153, .16); }
@media (min-width: 801px) { .hub-grid > .program:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.hub-card .ph .ph__note { color: var(--text-soft) !important; } /* 4.8:1 on the deeper tint */