/* ============================================================
   PAGE: HOME — sections unique to /index.html
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero .eyebrow{color: var(--c-red)}        /* text style: .t-eyebrow */
.hero h1{margin: var(--s-7) 0}             /* 32 — hero internal rhythm; text style: .t-display */
.hero .lead{max-width: 900px}              /* text style: .t-lead */
.hero-actions{display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-btns-l); margin-top: var(--s-7)}   /* 32 */
.hero-quick{display: flex; gap: var(--gap-btns-l)}
/* phone + portrait tablet: the phone button is a round icon, like fax & map.
   The number appears only from landscape tablet (md) up. */
.hero-call .hero-call-num{display: none}
.hero-call{aspect-ratio: 1; padding: 0}
@media (min-width: 905px){
  .hero-call .hero-call-num{display: inline}
  .hero-call{aspect-ratio: auto; padding: 0 var(--s-7)}
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-cards{
  display: grid; grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: var(--s-8);   /* 48 — hero intro → cards (phone) */
}
@media (min-width: 600px){ .service-cards{margin-top: var(--s-10)} }   /* 64 — from tablet up */
@media (min-width: 905px){ .service-cards{grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr} }
.service-card{
  background: var(--c-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* ≥905 (2 columns): each card becomes a subgrid spanning the cards' two rows, so the
   gradient .head of both cards shares one row → equal height even when one description
   wraps to fewer lines (e.g. landscape tablet). Placed AFTER the base rule to win. */
@media (min-width: 905px){
  .service-card{display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0}
}
.service-card .head{padding: var(--card-pad-lg); color: var(--c-white)}
.service-card.radiology .head{background: var(--g-radiology)}
.service-card.heart     .head{background: var(--g-heart)}
.service-card .head h2{color: var(--c-white); margin-bottom: var(--s-4)}  /* service-card head: tighter title→desc (16) than global --gap-text; text style: .t-h2 */
.service-card .head p{opacity: .9}                                       /* text style: .t-body */
/* landscape-tablet only (905–1064): HeartCare's description is one line shorter than Radiology's,
   leaving empty space under it (heads are equalised by subgrid). Slightly narrow it so it wraps
   to the same line count and fills the head. Outside this range both already match. */
@media (min-width: 905px) and (max-width: 1064.98px){
  .service-card.heart .head p{padding-right: var(--s-8)}
}
.service-card .body{padding: var(--card-pad-lg); display: flex; flex-direction: column; gap: var(--s-7); align-items: flex-start}


/* ============================================================
   PATHWAY (clinic photo placeholder)
   ============================================================ */
.pathway{width: 100%; height: 300px; background: var(--c-paper-3); overflow: hidden}   /* phone */
@media (min-width: 600px){ .pathway{height: 430px} }                                   /* tablet & desktop */
.pathway img{width: 100%; height: 100%; object-fit: cover; display: block}

/* ============================================================
   WHY COREVUE
   ============================================================ */
.why{background: var(--c-paper-2); padding: var(--section-pb) var(--section-px)}
/* row-gap = title→description when stacked (mobile, --gap-text); column-gap = the 2-col split on desktop (--gap-block) */
.why-top{display: grid; grid-template-columns: 1fr; row-gap: var(--gap-text); column-gap: var(--gap-block); margin-bottom: var(--gap-block)}
@media (min-width: 905px){ .why-top{grid-template-columns: 1fr 1fr} }
/* .why-top h2 → .t-h1 ; .why-top p → .t-lead */
.why-grid{
  display: grid; grid-template-columns: 1fr;
  background: var(--c-white);
  background-clip: padding-box;   /* translucent border composites over the warm section bg, not white (no cool-grey-on-beige clash) */
  border: 1px solid var(--c-rule);
  border-radius: var(--r-xl);
  min-height: 340px;
}
/* 4 columns only on desktop (≥1240); phone + both tablet orientations stay one column
   (4-across is too narrow on landscape tablet — cramped cards, icon stuck to the title) */
@media (min-width: 1240px){ .why-grid{grid-template-columns: repeat(4, 1fr)} }
/* dividers: stacked → bottom borders; 4-col → right borders */
.why-cell{padding: var(--card-pad-lg); display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-stack); border-bottom: 1px solid var(--c-rule)}
.why-cell:last-child{border-bottom: none}
@media (min-width: 1240px){
  .why-cell{border-right: 1px solid var(--c-rule); border-bottom: none}
  .why-cell:last-child{border-right: none}
}
.why-svg{width: 38px; height: 38px; flex-shrink: 0}
.why-cell h3{margin-bottom: var(--gap-stack)}    /* text style: .t-h3 */
.why-cell > div{margin-top: auto}
/* .why-cell p → .t-body */


/* ============================================================
   STEPS
   ============================================================ */
.steps{background: var(--c-paper-2); padding: 0 0 var(--section-pb);
  /* no horizontal padding — children inset via --doc-inset (same as .doctors), so the
     carousel track can bleed to the screen edges while head/CTA stay aligned to content */
  --doc-inset: max(var(--section-px), calc((100% - var(--container-max)) / 2));
}
.steps-head{margin-bottom: var(--gap-block); padding-inline: var(--doc-inset)}

/* phone + portrait tablet: cards become a full-bleed carousel — same rules as the doctors track */
.step-grid{
  display: flex; gap: var(--grid-gap); margin-bottom: var(--gap-subblock);   /* track → nav row (controls belong to the carousel, so closer than the next block) */
  padding-inline: var(--doc-inset); scroll-padding-inline: var(--doc-inset);   /* cards align to content; track box bleeds to screen edges */
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* carousel arrows — a row under the track, aligned to the content's right edge */
.step-nav{justify-content: flex-end; padding-inline: var(--doc-inset); margin-bottom: var(--gap-block)}
.step-grid::-webkit-scrollbar{display: none}
.step-grid:focus-visible{outline: 2px solid var(--c-navy); outline-offset: -2px}
@media (prefers-reduced-motion: reduce){ .step-grid{scroll-behavior: auto} }
.step{
  flex: 0 0 clamp(290px, 220px + 11.5vw, 384px);   /* carousel card width — same fluid sizing as doctors */
  scroll-snap-align: start;
  background: var(--c-paper);
  background-clip: padding-box;   /* translucent border over the section bg, not the card fill */
  border: 1px solid var(--c-rule);
  border-radius: var(--r-xl);
  padding: var(--card-pad-lg);
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--gap-stack);   /* min number→title gap (12, like Why's icon→title) so they never touch when space-between collapses on tight cards */
}
.step .num{font-size: 64px; font-weight: 100; line-height: var(--lh-eyebrow); opacity: .35}
.step h3{margin-bottom: var(--gap-stack)}        /* text style: .t-h3 */
/* .step p → .t-body */

/* portrait tablet (600–904): arrows move up beside the title (like the doctors head).
   .step-nav sits after the track in the DOM, so we re-place children with grid areas;
   the track still spans full width (full-bleed via its own padding-inline). */
@media (min-width: 600px) and (max-width: 904.98px){
  .steps{
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "head nav" "track track" "cta cta";
    align-items: end; column-gap: var(--gap-row); row-gap: var(--gap-block);   /* arrows sit at the title's bottom edge (title can be 2 lines) */
  }
  .steps-head{grid-area: head; margin-bottom: 0; padding-inline: 0; padding-left: var(--doc-inset)}
  .step-nav{grid-area: nav; margin-bottom: 0; padding-inline: 0; padding-right: var(--doc-inset)}
  .step-grid{grid-area: track; margin-bottom: 0}
  .steps-cta{grid-area: cta}
}

/* ≥ 905 (landscape tablet + desktop): static 3-column grid, no carousel (flex props ignored by grid items) */
@media (min-width: 905px){
  .step-grid{display: grid; grid-template-columns: repeat(3,1fr); overflow: visible; margin-bottom: var(--gap-block);}   /* nav hidden → track owns the full gap to the CTA */
  .steps .step-nav{display: none}   /* parent-scoped so it beats the shared .step-nav flex rule regardless of source order */
}

/* row-gap = vertical title→buttons when wrapped (heading → actions, like --gap-text);
   column-gap = the desktop in-row gap between the title and the button group */
.steps-cta{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: var(--gap-text); column-gap: var(--gap-row); padding-inline: var(--doc-inset)}
/* .steps-cta h3 → .t-h2 */
.steps-cta .group{display: flex; flex-wrap: wrap; gap: var(--gap-btns-m); justify-content: flex-start}   /* wrapped (phone + portrait tablet): buttons left, aligned under the heading */
@media (min-width: 905px){
  .steps-cta .group{justify-content: flex-end}   /* desktop: CTA is one row → buttons sit to the right */
}


/* ============================================================
   REFERRERS
   ============================================================ */
.referrers{background: var(--c-navy); color: var(--c-white); padding: var(--section-pb) var(--section-px)}
/* light variant (referrer home): paper-2 field, navy text; heading left / lead right
   (same split as .faq-top), then the four channel cards in one row below */
.referrers.light{background: var(--c-paper-2); color: var(--c-navy)}
.referrers.light .ref-top{display: flex; flex-wrap: wrap; row-gap: var(--gap-text); column-gap: var(--gap-block); margin-bottom: var(--gap-block)}
.referrers.light .ref-top h2{flex: 1; min-width: 300px}
.referrers.light .ref-top p{flex: 1; max-width: 555px; min-width: 300px}
.referrers.light .ref-cards{display: grid; grid-template-columns: 1fr; gap: var(--grid-gap)}
/* tablet portrait: two columns; the odd fifth card (email) takes the full row */
@media (min-width: 600px) and (max-width: 904.98px){
  .referrers.light .ref-cards{grid-template-columns: repeat(2, 1fr)}
  .referrers.light .ref-card:last-child{grid-column: 1 / -1}
}
/* ≥905: three download cards in row one, fax + email in row two (6-col grid + spans) */
@media (min-width: 905px){
  .referrers.light .ref-cards{grid-template-columns: repeat(6, 1fr)}
  .referrers.light .ref-card{grid-column: span 3}
  .referrers.light .ref-card:nth-child(-n+3){grid-column: span 2}
}
/* download cards restyled like the Why CoreVue cells (icon on top, no tile, navy; title below) —
   but kept as SEPARATE white cards, not one merged block */
.referrers.light .ref-card{
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: var(--gap-block); min-height: 200px;   /* icon pinned top, title pinned bottom (why-cell pattern); gap = floor when the card is at min height */
  padding: var(--card-pad-lg);
}
.referrers.light .ref-svg{width: 32px; height: 32px; flex-shrink: 0; color: var(--c-navy)}
/* service-branded fills — the same gradients as the home service cards; content goes white */
.referrers.light .ref-card.purple{background: var(--g-radiology); color: var(--c-white)}
.referrers.light .ref-card.red{background: var(--g-heart); color: var(--c-white)}
.referrers.light .ref-card.purple .ref-svg,
.referrers.light .ref-card.red .ref-svg{color: var(--c-white)}
/* bottom row: title left, file size in the bottom-right corner */
.referrers.light .ref-foot{display: flex; width: 100%; align-items: flex-end; justify-content: space-between; gap: var(--gap-row)}
.referrers.light .ref-foot .size{white-space: nowrap; opacity: .7}   /* inherits the card's text colour, muted like the old sub line */
/* whole card is one click target — lift on hover (same affordance family as .btn / .doc-card) */
.referrers.light .ref-card{transition: transform .15s ease, box-shadow .15s ease; cursor: pointer}
@media (hover: hover){
  .referrers.light .ref-card:hover{transform: translateY(-3px); box-shadow: 0 12px 24px var(--c-navy-a10)}
}
@media (prefers-reduced-motion: reduce){
  .referrers.light .ref-card{transition: none}
  .referrers.light .ref-card:hover{transform: none}
}
/* under the cards: heading left, email/fax buttons right — same split as .steps-cta ("Let's get started") */
.referrers.light .ref-send{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: var(--gap-text); column-gap: var(--gap-row); margin-top: var(--gap-block)}
.referrers.light .ref-send .group{display: flex; flex-wrap: wrap; gap: var(--gap-btns-l)}
/* the fax "button" is display-only (no href, fax numbers aren't linkable) — no hover lift */
@media (hover: hover){
  .referrers.light .ref-send .btn:not([href]):hover{transform: none}
}
.ref-grid{display: grid; grid-template-columns: 1fr; gap: var(--gap-block)}
@media (min-width: 905px){ .ref-grid{grid-template-columns: 1fr 1fr} }
.ref-grid h2{color: var(--c-white)}                          /* text style: .t-h1 */
.ref-grid p{color: var(--c-white); margin: var(--gap-text) 0}     /* text style: .t-lead */
.ref-cards{display: flex; flex-direction: column; gap: var(--gap-stack)}
.ref-card{
  display: grid; grid-template-columns: 44px 1fr 20px;
  gap: var(--gap-row); align-items: center;
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  color: var(--c-navy);
}
.ref-icon{width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--c-white)}
.ref-icon.navy  {background: var(--c-navy)}
.ref-icon.purple{background: var(--c-purple)}
.ref-icon.red   {background: var(--c-red)}
/* .ref-card h4 → .t-h4 */
.ref-card .sub{color: var(--c-navy-60); margin-top: var(--gap-caption)}   /* text style: .t-small */
.ref-card .arrow{color: var(--c-navy); justify-self: end}


/* ============================================================
   DOCTORS
   ============================================================ */
.doctors{padding: var(--section-pb) 0; scroll-margin-top: var(--s-11);
  /* --doc-inset = the ORIGINAL content inset (section-px + container-max centering).
     Head/cards align to it; only the track box itself bleeds to the screen edges. */
  --doc-inset: max(var(--section-px), calc((100% - var(--container-max)) / 2));
}
.doc-head{padding-inline: var(--doc-inset); margin-bottom: var(--gap-block)}
.doc-nav, .step-nav{display: flex; gap: var(--gap-btns-m); flex-shrink: 0}
/* phone (<600): arrows are a row under the track, aligned to the content's right edge (like the steps carousel) */
.doc-nav{justify-content: flex-end; padding-inline: var(--doc-inset)}
.doc-nav .btn, .step-nav .btn{border-color: transparent}   /* clean white circles, no outline */
.doc-nav .btn:focus-visible, .step-nav .btn:focus-visible{outline: 2px solid var(--c-navy); outline-offset: 2px}   /* visible keyboard focus */
.doc-prev .icon, .step-prev .icon{transform: rotate(180deg)}            /* left arrow = flipped right arrow */
.doc-nav button:disabled, .step-nav button:disabled{opacity: .4; cursor: default}
.doc-nav button:disabled:hover, .step-nav button:disabled:hover{transform: none}
/* carousel track — cards in a row, horizontal scroll + snap */
.doc-track{
  display: flex; gap: var(--grid-gap); margin-bottom: var(--gap-subblock);   /* phone: track → nav row (controls belong to the carousel) */
  padding-inline: var(--doc-inset); scroll-padding-inline: var(--doc-inset);   /* first/last card align to content inset; track itself is full-bleed */
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.doc-track::-webkit-scrollbar{display: none}
.doc-track:focus-visible{outline: 2px solid var(--c-navy); outline-offset: -2px}   /* keyboard focus (inset so it stays within the full-bleed track) */
@media (prefers-reduced-motion: reduce){ .doc-track{scroll-behavior: auto} }
.doc-card{
  /* fluid width — cards-per-view grows smoothly (~1 on phone → ~3 on desktop),
     no breakpoint jump; caps at 384 so it matches the capped track on wide screens */
  flex: 0 0 clamp(290px, 220px + 11.5vw, 384px);
  scroll-snap-align: start;
  background: var(--c-white); border-radius: var(--r-xl); overflow: hidden;
  position: relative;   /* anchor for the stretched "Read profile" link */
}
/* whole card is clickable — the single .btn-link's hit area is stretched over the card
   (one accessible link, no nested <a>; cursor + link hover come from the <a> itself) */
.doc-card .btn-link::after{content: ""; position: absolute; inset: 0}
.doc-photo{height: clamp(300px, 32vw, 400px); background: var(--c-paper-3); overflow: hidden}
.doc-photo img{width: 100%; height: 100%; object-fit: cover; object-position: top; display: block}
@media (hover: hover){
  .doc-photo img{transition: transform .3s cubic-bezier(0, 0, .2, 1)}
  .doc-card:hover .doc-photo img{transform: scale(1.04)}   /* subtle affordance for the card link */
}
@media (prefers-reduced-motion: reduce){ .doc-photo img{transition: none} .doc-card:hover .doc-photo img{transform: none} }
.doc-body{padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--gap-stack)}
/* .role → .t-eyebrow */
.role.purple{color: var(--c-purple)}
.role.red   {color: var(--c-red)}
/* .doc-body h3 → .t-h3 */

/* ≥ 600 (portrait tablet + desktop): arrows move up beside the title (the original look).
   .doc-nav sits after the track in the DOM, so re-place children with grid areas.
   The inset is applied as edge COLUMNS (not padding on head/nav): --doc-inset contains 100%,
   which on a grid track resolves against the grid container (full width) — whereas as padding
   on a 1fr/auto cell it would resolve against the narrower cell and misalign on wide screens.
   The track spans all 4 columns and keeps its own padding-inline → full-bleed. */
@media (min-width: 600px){
  .doctors{
    display: grid;
    grid-template-columns: var(--doc-inset) 1fr auto var(--doc-inset);
    grid-template-areas: ".    head nav  ."
                         "track track track track";
    align-items: center; row-gap: var(--gap-block);
  }
  .doc-head{grid-area: head; margin-bottom: 0; padding-inline: 0}
  .doc-nav{grid-area: nav; padding-inline: 0}
  .doc-track{grid-area: track; margin-bottom: 0}
}


/* ============================================================
   VISIT
   ============================================================ */
.visit{background: var(--c-paper-2); padding: var(--section-pb) var(--section-px); scroll-margin-top: var(--s-11)}
/* narrow (phone + portrait tablet): single column, DOM order =
   heading → info (address/hours/parking) → contacts. */
.visit-grid{display: grid; grid-template-columns: 1fr; gap: var(--gap-block)}
/* desktop: 2 cols — heading top-left, contacts pinned bottom-left, info spans right */
@media (min-width: 905px){
  .visit-grid{grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: var(--gap-block); row-gap: 0}
  .visit-intro{grid-column: 1; grid-row: 1}
  .visit-info {grid-column: 2; grid-row: 1 / span 2}
  .contact-list{grid-column: 1; grid-row: 2; align-self: end}
}
.visit h2{margin-bottom: 0}       /* spacing handled by grid gap; text style: .t-h1 */
.field-label{display: block; color: var(--c-navy-a45); margin-bottom: var(--gap-eyebrow)}  /* text style: .t-eyebrow */
.visit-block{margin-bottom: var(--gap-subblock)}
.visit-block:last-child{margin-bottom: 0}
/* parking / transport / accessibility — one row of three columns ONLY on portrait
   tablet (600–904), where the info block spans the full page width. Everywhere the
   .visit-grid is two-column (≥905, incl. desktop) the info half is too narrow for
   three, so they stack like the other visit fields. */
.visit-cols{display: grid; grid-template-columns: 1fr; gap: var(--gap-subblock)}
@media (min-width: 600px) and (max-width: 904.98px){
  .visit-cols{grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap)}
}
/* phone: address takes the full width, the "Open in Navigator" button drops below it
   (gap stays --gap-row = 16: a button that belongs to the text, not a new block). ≥600: back to one row. */
.visit-row{display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-row)}
.visit-row .btn{align-self: flex-start}   /* button keeps its content width, left-aligned */
@media (min-width: 600px){
  .visit-row{flex-direction: row; justify-content: space-between; align-items: center}
  .visit-row .btn{align-self: auto}
}
.hours-row{display: flex; justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-rule); font-size: var(--fs-body); line-height: var(--lh-body)}
.field-label + .hours-row{padding-top: 0}   /* first hours row: label→text gap matches other fields (8, not 8+8) */
.hours-row:last-child{border-bottom: none}
.hours-row .right{color: var(--c-navy)}
.contact-list{display: flex; flex-direction: column; gap: var(--gap-stack); scroll-margin-top: var(--s-11)}
.contact-item{display: flex; align-items: center; gap: var(--gap-icon); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-navy)}
.contact-item svg{color: var(--c-navy)}

/* full-width map band (mirrors .pathway) */
.map-band{
  position: relative;
  width: 100%; height: 320px;             /* phone */
  overflow: hidden;
  background: var(--c-paper-3);            /* fallback while the map loads */
}
@media (min-width: 600px){ .map-band{height: 460px} }   /* tablet (portrait + landscape) and desktop */
.map-band iframe{position: absolute; inset: 0; width: 100%; height: 100%; border: 0}


/* ============================================================
   FAQ
   ============================================================ */
.faq{background: var(--c-navy); color: var(--c-white); padding: var(--section-pb) var(--section-px); scroll-margin-top: var(--s-11)}
/* row-gap = title→description when wrapped (mobile, --gap-text); column-gap = in-row split on desktop (--gap-block) */
.faq-top{display: flex; row-gap: var(--gap-text); column-gap: var(--gap-block); margin-bottom: var(--gap-block); flex-wrap: wrap}
.faq-top h2{flex: 1; min-width: 300px; color: var(--c-white)}   /* text style: .t-h1 */
.faq-top p{flex: 1; max-width: 555px; min-width: 300px}   /* text style: .t-lead */
.faq-list{background: var(--c-white-a04); border: 1px solid var(--c-white-a10); border-radius: var(--r-xl); overflow: hidden}
details{border-bottom: 1px solid var(--c-white-a10)}
details:last-child{border-bottom: none}
details summary{                           /* text style: .t-h3 */
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-6) var(--s-7);
  gap: var(--gap-row);
  color: var(--c-white);
}
details summary::-webkit-details-marker{display: none}
.faq-icon{width: 32px; height: 32px; border: 1px solid var(--c-white-a20); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .24s cubic-bezier(0, 0, .2, 1), border-color .24s cubic-bezier(0, 0, .2, 1)}
.faq-icon svg{width: 14px; height: 14px; color: var(--c-white)}
/* + turns into − : the vertical bar rotates 90° onto the horizontal one.
   Driven by .is-open (toggled by JS in sync with the height animation), NOT [open],
   so the red/minus fade in/out together with the open/close, not after it. */
.faq-icon .bar-v{transform-box: fill-box; transform-origin: center; transition: transform .24s cubic-bezier(0, 0, .2, 1)}
details.is-open .faq-icon{background: var(--c-red); border-color: var(--c-red)}
details.is-open .faq-icon .bar-v{transform: rotate(90deg)}
@media (prefers-reduced-motion: reduce){ .faq-icon, .faq-icon .bar-v{transition: none} }
/* answer open/close — height is animated in JS (Web Animations API), because native
   <details> doesn't render closed content so a CSS transition has nothing to start from */
.faq-a{overflow: hidden}
.answer-clip{overflow: hidden}
details .answer{padding: 0 var(--s-7) var(--s-6); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-navy-20)}
.answer p{margin: 0 0 var(--gap-stack)}
.answer ul{list-style: disc; padding-left: var(--s-5); margin: 0 0 var(--gap-stack)}
.answer p:last-child, .answer ul:last-child{margin-bottom: 0}
.answer li + li{margin-top: var(--gap-caption)}


/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{background: var(--g-brand); color: var(--c-white); padding: var(--section-pb) var(--section-px); text-align: center}
.cta h2{color: var(--c-white); margin-bottom: var(--gap-text)}   /* text style: .t-display */
.cta p{opacity: .85; margin-bottom: var(--gap-text)}   /* text style: .t-lead */
.cta-actions{display: flex; justify-content: center; gap: var(--gap-btns-l); flex-wrap: wrap}