/* Created: 14:23 14-Aug-2026 */
/* Updated: 01:28 23-Sep-2026 — imports design-service-pages.css (per-page design accents) */
/* Updated: 09:38 25-Aug-2026 — .feat-grid: bold-label prose walls become cards */
/* Updated: 08:26 26-Aug-2026 — .road-card--ico / .road-ico: title-less step cards (BL-121 /admission/ rework — process roadmap, 3 photographs, 4 icons) */
/* Updated: 11:40 24-Aug-2026 — REWORK after Sumit's visual review: hero 72vh -> 54vh,
   rendered pages get alternating sections + editorial grid (was one narrow left column). */
/* Updated: 14:47 14-Aug-2026 — step number teal, title back to black; label 16px */
/* Updated: 14:44 14-Aug-2026 — step labels share a left edge (were dancing when centred) */
/* Updated: 14:37 14-Aug-2026 — step bar centred; was flush left against centred content */
/* Updated: 14:35 14-Aug-2026 — scroll-and-play rebuilt as stacked sticky panels */
/* Updated: 14:30 14-Aug-2026 — object-position so faces are not cropped out */
/* Updated: 13:10 21-Aug-2026 — BL-063: covers grid -> scroll-drawn roadmap */
/* Updated: 13:25 21-Aug-2026 — BL-062: stack -> sticky media stage */
/* Updated: 06:48 26-Aug-2026 — hero min-height -> --svc-hero-h token */
/* Updated: 16:09 22-Sep-2026 — prose-block headings: 16px to the text under them (site-wide heading gap) */
/* BL-006 · Service page — scroll-and-play layout. Loaded only by service pages. */

/* ---------- Service hero ---------- */
/* color must be set explicitly: .is-inverted only swaps the tokens, it never applies
   `color`, so without this the h1 inherited dark ink from body and was unreadable on
   every service page (found in visual review, Sumit 24-Aug). .hero does the same thing. */
@import url("design-service.css?v=f7af539419");   /* 23-Sep: the homepage design language, service-wide */
@import url("design-service-ui.css?v=a7fcdac4a9");     /* 23-Sep: shared FAQ / CTA / lead / links */
@import url("design-service-pages.css?v=4238641c9f");  /* 23-Sep: per-page accents for the same pass */
@import url("design-company.css?v=8b9a8e5d16");        /* 23-Sep: About / Career / Contact / Offers */
.svc-hero{position:relative;min-height:var(--svc-hero-h);display:flex;align-items:flex-end;overflow:clip;
  color:var(--paper-100)}
.svc-hero-media{position:absolute;inset:0;z-index:0}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.svc-hero-content{position:relative;z-index:3;width:100%;padding-bottom:var(--s-11)}
/* The shared .overlay-hero is tuned for the homepage's dark video. Over the brighter
   service photos the h1 was unreadable (visual review, Sumit 24-Aug) — service pages get
   a stronger bottom-left scrim on top of it. */
.svc-hero .overlay-hero{background:
  linear-gradient(180deg,#16262e2e 0%,#16262e5c 45%,#16262ee0 100%),
  linear-gradient(100deg,#16262eb8 0%,#16262e5c 52%,#16262e1f 100%)}
.svc-hero .svc-hero-content .h1,.svc-hero .svc-hero-content h1{text-shadow:0 2px 24px #16262e73}
.svc-hero-content .b1{color:var(--paper-88);margin-top:16px}
.svc-hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

/* ---------- Scroll-and-play · stacked sticky panels (DarDoc pin+scrub) ----------
   Each panel sticks at a stepped offset, so panel 2 slides up over panel 1 and
   its label bar comes to rest under panel 1's. DarDoc drives this with GSAP
   ScrollTrigger; sticky gets the same result with no JS and no CDN. */
/* ---------- BL-062 · Scroll-and-play, sticky media stage ----------
   Replaced the DarDoc pin-and-stack. The copy scrolls normally; one media frame
   stays put and cross-fades between shots as each step becomes active. Nothing
   pins over anything and there are no accumulating label bars — that stacking
   silhouette was the thing Omar recognised. */
.flow{background:var(--bg-two);--navh:96px;padding-top:var(--sec-s);padding-bottom:var(--sec-m)}
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}

/* Stage — sticky, so it holds while the four steps pass it. */
.flow-stage{position:sticky;top:calc(var(--navh) + 40px);order:2}
.flow-frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  background:var(--ink-8);box-shadow:0 18px 48px var(--ink-8)}
.flow-shot{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);
  transition:opacity .7s var(--ease-circ),transform 1.1s var(--ease-circ)}
.flow-shot.is-active{opacity:1;transform:scale(1)}
.flow-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}

/* Step counter over the frame. */
.flow-ticker{position:absolute;left:20px;bottom:18px;z-index:2;
  display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--paper-88);backdrop-filter:blur(6px);
  font-size:14px;letter-spacing:1.2px}
.flow-ticker b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.flow-ticker i{font-style:normal;color:var(--text-medium)}

/* Steps — plain vertical flow, each sized so one step reads at a time. */
.flow-steps{order:1;display:grid;gap:0}
/* min-height sets the rhythm on its own; a gap on top of it double-spaces.
   align-items:flex-start stops the flex column stretching the button to full width. */
.flow-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start}
.flow-label{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  letter-spacing:1.2px;color:var(--text-medium)}
.flow-num{color:var(--c1);font-weight:600;font-variant-numeric:tabular-nums}
.flow-step .h2{margin-bottom:20px}
.flow-step .b1{color:var(--text-medium);max-width:var(--measure);margin-bottom:32px}
/* Per-step shot is the MOBILE route only — see the note in 03-scroller.html. */
.flow-step-shot{display:none}

/* Dim the steps that are not current — the eye is told where it is without
   anything moving. Buttons keep full contrast so they stay clickable-looking. */
.js .flow-step{opacity:.4;transition:opacity .5s var(--ease-circ)}
.js .flow-step.is-current{opacity:1}

@media (max-width:991px){
  .flow{--navh:80px;padding-bottom:var(--sec-s)}
  .flow-grid{grid-template-columns:1fr;gap:28px}
  /* No sticky stage on mobile. A sticky frame eats the viewport and the step
     headline ends up hidden behind it. Each step carries its own shot instead. */
  .flow-stage{display:none}
  .flow-steps{order:1;gap:var(--sec-s)}
  .flow-step{min-height:0;padding:0}
  .flow-step-shot{display:block;margin:0 0 24px;border-radius:16px;overflow:hidden;
    aspect-ratio:16/10;background:var(--ink-8);box-shadow:0 10px 28px var(--ink-8);
    align-self:stretch}
  .flow-step-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}
  /* Nothing is "current" when every step shows its own image — undim them all. */
  .js .flow-step{opacity:1}
}
@media (max-width:639px){
  .flow-ticker{left:14px;bottom:12px;padding:6px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .flow-shot{transition:none}
  .js .flow-step{opacity:1}
}

/* ---------- What's included ---------- */
.svc-included{padding-block:var(--sec-m) var(--sec-s)}
.incl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;list-style:none}
.incl-item{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;
  background:var(--paper-100);border:1px solid var(--border-faint);border-radius:12px;
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.incl-item:hover{transform:translateY(-3px);box-shadow:0 12px 28px var(--ink-8)}}
/* ONE colour. These dots used to cycle the 6-colour circle palette by nth-child, so a
   list item's colour was decided by its POSITION and signified nothing - 123 of them
   across 11 pages, blue/purple/orange/green in no pattern. Sumit rejected the same
   thing on /doctors-on-call/ on 25-Aug ("all the dots are here and there"). 25-Aug. */
.incl-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:9px;
  background:var(--teal-deep)}
.incl-cta{margin-top:48px}

/* ---------- Preparation / How it works ---------- */
.svc-how{padding-block:var(--sec-s) var(--sec-m)}
.how-two{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.how-two.how-three{grid-template-columns:repeat(3,1fr)}
.how-block .h4{margin:8px 0 12px}
.how-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:var(--s-11)}

/* ---------- Rendered service pages (render_service.py, BL-089) ----------
   REWORKED 24-Aug after visual review: content is split into alternating sections using
   the Athelas editorial grid (.about-grid-2 — sticky heading left, prose right) instead
   of one narrow left-pinned column that left ~800px of dead space on desktop.

   Extracted live-site copy sometimes carries   between every word (the client's own
   typography, kept verbatim) — a long run can't wrap on a narrow viewport without
   overflow-wrap, which caused a real horizontal-overflow bug. */
.svc-sec{padding-block:var(--sec-s)}
.svc-sec-alt{background:var(--bg-two)}
.svc-sec + .svc-sec{padding-top:var(--sec-s)}
.svc-lead{padding-top:var(--sec-m)}
/* Lead sits centred, not pinned left: a 680px column hard against the left edge of a
   1376px container read as broken/unfinished (Sumit, visual review 24-Aug). */
.svc-lead-inner{max-width:800px;margin-inline:auto;font-size:21px;line-height:34px;
  color:var(--text-medium)}
.svc-lead-inner p{margin:0 0 22px}
.svc-lead-inner p:last-child{margin-bottom:0}
.svc-lead-inner strong{color:var(--text-strong)}

/* Card-led sections run full width under a section-head (homepage services shape). */
.svc-sec-cards .incl-grid{grid-template-columns:repeat(3,1fr);gap:20px}
.svc-sec-cards .incl-item{flex-direction:column;gap:10px}
@media (max-width:1199px){.svc-sec-cards .incl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.svc-sec-cards .incl-grid{grid-template-columns:1fr}}

.prose-block{overflow-wrap:anywhere}
.prose-block > h2,.prose-block > h3,.prose-block > h4{margin:32px 0 16px}
.prose-block > h2:first-child,.prose-block > h3:first-child{margin-top:0}
.prose-block p{margin:0 0 16px}
.prose-block p:last-child{margin-bottom:0}
.prose-block ul,.prose-block ol{margin:0 0 16px;padding-left:22px}
.prose-block li{margin-bottom:8px}
.prose-block a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px}

/* Never upscale: the accreditation badges are 330x120 and width:100% blew them up to
   full column width — the "all the images are big" problem (Sumit, 24-Aug). */
.svc-inline-media{margin:24px 0}
.svc-inline-media img{border-radius:12px;display:block;width:auto;max-width:100%;
  height:auto;margin-inline:auto}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;margin:24px 0}
.media-grid img{width:100%;border-radius:12px;display:block;overflow-wrap:normal}

/* Logo / badge strip — consecutive small images sit in a row at their own scale. */
.media-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px;margin:24px 0}
.media-row img{display:block;height:56px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:639px){.media-row{gap:20px 24px}.media-row img{height:44px}}

/* Card thumbnail for blurbs that carry a real photo (services hub) */
.incl-item--media{flex-direction:column;gap:10px}
.incl-item--media > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.incl-shot{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:10px;
  background:var(--ink-8);flex:0 0 auto}
.incl-shot img{width:100%;height:100%;object-fit:cover;display:block}
.incl-title{font-weight:600;color:var(--text-strong)}
.svc-sec-cards .incl-item > div{display:flex;flex-direction:column;gap:6px}

/* Typographic hero for pages with no image of their own — a generic stock skyline behind
   every service page read as filler and buried the h1. */
/* The nav is position:absolute and 96px tall, sitting over the hero — clear it properly
   rather than tucking the h1 24px under it. */
.svc-hero-plain{min-height:0;padding-top:calc(96px + var(--sec-s));
  background:linear-gradient(135deg,var(--ink-100) 0%,#1d3f47 55%,var(--teal-deep) 100%)}
.svc-hero-plain .svc-hero-content{padding-bottom:var(--sec-s)}
@media (max-width:991px){.svc-hero-plain{padding-top:calc(80px + var(--sec-s))}}

/* ---------------------------------------------------------------- plain-hero height
   Moved here from team.css on 26-Aug (Sumit: "the hero part of the blog is very short as
   compared to all other heroes, make it bigger"). Measured: /blogs/ 356px, /legal/ 484px,
   /the-team/ 640px - the SAME class, three heights, because this override lived in a
   stylesheet only /the-team/ loads. One rule, next to the min-height:0 it overrides, so
   every typographic hero reads as one family. Affects all 8 .svc-hero-plain pages. */
#hero.svc-hero-plain{min-height:var(--svc-hero-h);display:flex;align-items:flex-end}
@media (max-width:767px){#hero.svc-hero-plain{min-height:var(--svc-hero-h-sm)}}

@media (max-width:991px){
  .scroller-grid{grid-template-columns:1fr;gap:48px}
  .scroller-sticky{position:static}
  .scroller-steps{gap:var(--s-9)}
  .scroll-step{opacity:1;transform:none}
  .how-two,.how-two.how-three{grid-template-columns:1fr;gap:40px}
  .svc-hero{min-height:var(--svc-hero-h)}
}
@media (max-width:639px){
  .incl-grid{grid-template-columns:1fr}
}

/* ---------- About this service (sits between hero and the steps) ---------- */
.svc-about{padding-block:var(--sec-m) var(--sec-s)}
.about-grid-2{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.about-lead .h2{position:sticky;top:120px}
.about-prose .b1{margin-bottom:20px}
.about-prose .b2{margin-bottom:32px}
.about-points{list-style:none;display:grid;gap:12px;margin-bottom:32px}
.about-points li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:24px}
.about-points .incl-dot{margin-top:9px}

/* ---------- What our nursing team covers ---------- */
.covers{padding:var(--sec-s) 0 var(--sec-m);background:var(--bg-two)}
/* ---------- BL-063 · Scroll-drawn roadmap (house pattern for service pages) ----------
   Replaces the flat 9-card grid. A spine is drawn down the section as you scroll and
   each node lights up when it is reached, so the list reads as a progression rather
   than a wall of equal cards. Deliberately NOT the DarDoc sticky-stack (see BL-062):
   nothing pins, the page keeps scrolling normally. */
.roadmap-wrap{position:relative;padding-left:64px}
.roadmap{list-style:none;display:grid;gap:20px;margin:0;padding:0}

/* The unlit track, and the brand-coloured fill drawn over it. */
.road-spine,.road-fill{position:absolute;left:23px;top:12px;width:2px;border-radius:2px}
.road-spine{bottom:12px;background:var(--border-subtle)}
.road-fill{height:0;background:linear-gradient(180deg,
  var(--c1) 0%,var(--c2) 20%,var(--c3) 40%,var(--c4) 60%,var(--c5) 80%,var(--c6) 100%);
  background-size:100% 100vh;transition:height .15s linear}

.road-node{position:relative;display:block}
.road-marker{position:absolute;left:-64px;top:18px;width:48px;height:48px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--paper-100);border:2px solid var(--border-subtle);
  transition:border-color .5s var(--ease-circ),transform .5s var(--ease-circ),
             box-shadow .5s var(--ease-circ)}
.road-num{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-subtle);
  transition:color .5s var(--ease-circ)}

.road-card{background:var(--paper-100);border:1px solid var(--border-faint);
  border-radius:14px;padding:26px 24px;
  transition:transform .5s var(--ease-circ),box-shadow .5s var(--ease-circ)}
.road-card .h6{margin-bottom:10px}
.road-card .b3{color:var(--text-medium);max-width:78ch}
@media (hover:hover){.road-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px var(--ink-8)}}

/* Accent cycles through the brand palette, matching the spine gradient. */
.road-node:nth-child(6n+1) .road-marker.lit{border-color:var(--c1)}
.road-node:nth-child(6n+2) .road-marker.lit{border-color:var(--c2)}
.road-node:nth-child(6n+3) .road-marker.lit{border-color:var(--c3)}
.road-node:nth-child(6n+4) .road-marker.lit{border-color:var(--c4)}
.road-node:nth-child(6n+5) .road-marker.lit{border-color:var(--c5)}
.road-node:nth-child(6n+6) .road-marker.lit{border-color:var(--c6)}

/* Entrance. Uses its own .lit hook, not [data-reveal], so the two systems
   cannot fight over opacity on the same element. */
.js .road-node{opacity:0;transform:translateY(22px)}
.js .road-node.lit{opacity:1;transform:none;
  transition:opacity .7s var(--ease-circ),transform .7s var(--ease-circ)}
.js .road-node.lit .road-marker{transform:scale(1.06);box-shadow:0 6px 18px var(--ink-8)}
.js .road-node.lit .road-num{color:var(--text-strong)}

@media (max-width:639px){
  .roadmap-wrap{padding-left:46px}
  .road-spine,.road-fill{left:17px}
  .road-marker{left:-46px;top:16px;width:36px;height:36px}
  .road-num{font-size:11px}
  .road-card{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){
  .js .road-node{opacity:1;transform:none}
  .road-fill{transition:none}
}

@media (max-width:991px){
  .about-grid-2{grid-template-columns:1fr;gap:32px}
  .about-lead .h2{position:static}
  .roadmap{gap:18px}
}


/* ---------- BL-100 · content-shape sections (24-Aug-2026) ----------
   Measured problem: every <h2> section used .about-grid-2 (sticky heading left, prose
   right). A section whose whole body is "Influenza / HPV / Hepatitis B" therefore got a
   full-height coloured band that was ~90% empty — the "empty beige band" of the visual
   review. Sections now stack (heading above, content full width) unless the copy is long
   enough to fill an editorial column; structured copy gets a real component. */
.svc-sec-stack .section-head{margin-bottom:40px}
.svc-sec-stack .svc-stack-body{max-width:100%}
/* Prose that stacks still needs a reading measure — full-container line length is unreadable. */
.svc-sec-stack:not(.svc-sec-cards) .svc-stack-body{max-width:820px}
.svc-sec-stack .svc-stack-body > * + *{margin-top:20px}

/* Step timeline — reuses the homepage .how-grid/.how-num rhythm. */
.svc-steps{margin-top:0}
.svc-step{gap:8px}
.svc-step .h5{margin-top:2px}
.svc-step .b2{color:var(--text-medium)}
.svc-step .b2 p{margin:0}

/* Feature cards — the label becomes the card title instead of a bold run-in. */
.svc-sec-stack .incl-grid{grid-template-columns:repeat(3,1fr);gap:20px}
.svc-sec-stack .incl-item{flex-direction:column;gap:10px}
.svc-sec-stack .incl-item > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.incl-item .b3{color:var(--text-medium)}
.incl-item .b3 p{margin:0}

/* Pill row — bare labels with no description (vaccine names, panel names). */
.svc-pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.svc-pills li{padding:10px 18px;border:1px solid var(--border-faint);border-radius:999px;
  background:var(--paper-100);font-size:15px;line-height:22px;color:var(--text-strong)}

@media (max-width:1199px){
  .svc-sec-stack .incl-grid{grid-template-columns:repeat(2,1fr)}
  .svc-steps{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:767px){
  .svc-sec-stack .incl-grid{grid-template-columns:1fr}
  .svc-steps{grid-template-columns:1fr!important;gap:32px}
  .svc-sec-stack .section-head{margin-bottom:28px}
}

/* BL-100 spacing fix. Measured: .svc-about (120px) and its first .svc-lead child (120px)
   BOTH applied a top pad, so every service page opened with 240px of blank white between
   the hero and the first sentence. The wrapper no longer sets vertical rhythm — the
   sections inside it do. */
.svc-about{padding-top:0}
/* The lead now shares the page's left edge with every section heading below it. It was
   centred back when the whole body was one narrow left-pinned column; with full-width
   card grids under it, a centred intro over left-aligned headings reads as misaligned. */
.svc-lead-inner{margin-inline:0;max-width:820px}

/* BL-100 — one wide photograph after the opening, for pages the client's own site has no
   imagery for (see _build/gen_images.py). Fixed ratio so a tall source cannot push the
   page around, and object-position centred so nobody's head is cropped. */
.svc-figure{padding-block:0 var(--sec-s)}
.svc-figure figure{margin:0;border-radius:16px;overflow:hidden;background:var(--ink-8)}
/* Capped. A full-bleed figure at its natural ratio ran 688px tall, which is the
   same 'the image is very long' fault Sumit flagged on the hub hero. 25-Aug. */
.svc-figure img{display:block;width:100%;height:auto;aspect-ratio:21/9;max-height:460px;object-fit:cover;object-position:50% 45%}
@media (max-width:767px){.svc-figure img{aspect-ratio:4/3}}

/* BL-100 — hero legibility. The generated photography is deliberately bright (natural
   window light is a brand rule), and against a sunlit window the sub-headline in
   --paper-88 disappeared: readable h1, unreadable second line. Verified on
   /home-medication-injections/ at 1440. Strengthen the left scrim where the copy sits and
   give the sub-headline the same shadow treatment as the h1. */
.svc-hero .overlay-hero{background:
  linear-gradient(180deg,#16262e3d 0%,#16262e70 45%,#16262ee6 100%),
  linear-gradient(100deg,#16262ee6 0%,#16262eab 38%,#16262e33 100%)}
.svc-hero .svc-hero-content .b1{color:var(--paper-100);text-shadow:0 1px 16px #16262e8f}

/* Updated: 21:32 24-Aug-2026 — BL-091 team roster.
   The shared .team-grid is 3-across, which is right for the homepage's 3 leadership
   cards but leaves a lone orphan card on the 16-person roster (5 rows of 3 + 1).
   16 divides evenly by 4, so the roster page opts into a 4-across grid. Modifier only —
   the shared rule is untouched so the homepage keeps its 3-across layout. */
.team-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.team-grid--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.team-grid--4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-grid--4{grid-template-columns:1fr}}

/* BL-019's circle palette accents cards 2 and 3 (purple, teal-deep). That is a
   deliberate rhythm across the homepage's THREE leadership cards. Across the 16-person
   roster it tints two arbitrary cards and reads as a bug, not a decision — so the
   roster grid keeps one uniform accent. The homepage rule is untouched. */
.team-grid--4 .team-card:nth-child(2) .team-body,
.team-grid--4 .team-card:nth-child(3) .team-body{border-top-color:var(--teal)}

/* ---------- BL-081 · Physiotherapy category page (sections-physio-category/) ----------
   Updated: 06:40 25-Aug-2026
   Seven service cards rebuilt from Ceire Gribben's infographic, plus the callout and
   trust strip that run beneath it. Reuses the existing card language (paper surface,
   faint border, 12px radius, hover lift) rather than inventing a second one; the only
   thing genuinely new here is a card that carries a heading, a lead line and a bullet
   list, which .incl-item cannot hold. */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;
  padding:0;margin:0}
.pt-card{display:flex;flex-direction:column;gap:10px;padding:24px 26px;
  background:var(--paper-100);border:1px solid var(--border-faint);border-radius:12px;
  border-top:3px solid var(--teal);
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.pt-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px var(--ink-8)}}
.pt-card .h5{margin:0}
.pt-card > p{margin:0}
.pt-list{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px}
.pt-list li{position:relative;padding-left:20px;font-size:15px;line-height:24px;
  color:var(--text-medium)}
.pt-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:2px;background:var(--c1)}
/* The Specialization cards carry the live page's own long prose, not bullets. */
.pt-prose{overflow-wrap:anywhere}
.pt-prose p{margin:0 0 12px}
.pt-prose p:last-child{margin-bottom:0}
.pt-prose a{color:inherit;text-decoration:underline}

.pt-callout{margin-top:20px;padding:32px 36px;border-radius:12px;background:var(--accent);
  color:var(--paper-100)}
.pt-callout .h4{margin:0 0 8px;color:var(--paper-100)}
.pt-callout p{margin:0;color:var(--paper-88)}

.pt-trust{margin:20px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--border-faint);border-radius:12px;overflow:hidden}
.pt-trust li{padding:20px 22px;color:var(--text-medium);
  border-right:1px solid var(--border-faint)}
.pt-trust li:last-child{border-right:0}

@media (max-width:1199px){
  .pt-grid{grid-template-columns:repeat(2,1fr)}
  .pt-trust{grid-template-columns:repeat(2,1fr)}
  .pt-trust li{border-right:1px solid var(--border-faint);
    border-bottom:1px solid var(--border-faint)}
  .pt-trust li:nth-child(2n){border-right:0}
  .pt-trust li:last-child{border-bottom:0;grid-column:1/-1;border-right:0}
}
@media (max-width:767px){
  .pt-grid,.pt-grid-3{grid-template-columns:1fr}
  .pt-trust{grid-template-columns:1fr}
  .pt-trust li{border-right:0;border-bottom:1px solid var(--border-faint)}
  .pt-trust li:last-child{border-bottom:0}
  .pt-callout{padding:26px 24px}
}

/* BL-081 · How It Works steps. Ceire's reference image numbers each step in a circle and
   gives it no title, so the number is a decorative badge and the sentence is the content
   — an <h3> whose whole text is "2" tells a screen-reader user nothing. */
.pt-steps{list-style:none;padding:0;margin:0}
.pt-step{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pt-step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--paper-100);font-size:18px;font-weight:600;
  line-height:1}
.pt-step p{margin:0}

/* Feature grid — a text block whose paragraphs each led with a bold label. The generic
   renderer used to dump these as 400-750 characters of unbroken prose; they are a card
   list in disguise. See defect 7 in _build/GENERIC-RENDER-DEFECTS.md. 25-Aug. */
.feat-lead{margin-bottom:24px}
.feat-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  padding:0;margin:24px 0 0}
.feat-card{padding:22px 22px 20px;border-radius:12px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.feat-title{color:var(--text-strong);line-height:1.35}
.feat-body{color:var(--text-medium);margin-top:8px}
.feat-card:only-child{grid-column:1/-1}
@media (max-width:767px){.feat-grid{grid-template-columns:1fr}}

/* Roadmap card carrying an ICON and no title. Added 08:34 26-Aug-2026 for /admission/,
   whose four steps have no names in the client's copy — inventing medical headings is
   prohibited (project invariant), so the icon does the work an <h3> would. */
.road-card--ico{display:flex;gap:16px;align-items:flex-start}
.road-ico{flex:0 0 26px;width:26px;height:26px;margin-top:1px;color:var(--teal-deep)}
.road-card--ico p{margin:0}
@media (max-width:520px){.road-card--ico{gap:12px}}