/* ============================================================
   Cedar Chartered Accountants: Medical & Allied Health section
   Loaded only on /medical-accountants/ pages, after styles.css and
   blog.css (which supply the hero photograph, breadcrumb, FAQ
   accordion, post tags and the closing CTA). Every colour is a site
   token, apart from the tick images noted under "Lists".

   Page anatomy, top to bottom:
     hero (forest band, split in two)  >  credentials strip  >
     sticky "On this page" bar (audience pages only)  >  content bands
     alternating paper / paper 2  >  closing CTA (navy).

   Components
     .med-band, --alt    full-width band; --alt is paper 2
     .med-head           section heading and intro
     .med-split          heading column beside a content column
     .med-split--cta     short copy (.med-copy) beside a navy .med-cta-card
     .med-timeline       numbered steps joined by a line
     .med-compare        comparison table (one card per column on phones)
     .med-note           green callout
     .med-card           white card (.med-numbered list inside)
     .med-cards          two white cards side by side
     .med-duo            GST-free card beside a taxable card
     .med-panel          contained navy panel
     .med-checks         white checklist
     .med-lenses         one card split into three columns
     .med-tiles          small cards in an auto grid
     .med-features       hairline grid of services
     .med-examples       hub: short practitioner examples
     .med-directory      hub: professions in columns
     .med-faq-grid       FAQ introduction beside the accordion
     .med-more           links to other pages beside blog articles
   ============================================================ */

.page-medical { --navy-soft: #e4e9f1; }

/* Even line lengths in headings, no stranded words in paragraphs. */
.page-medical h1, .page-medical h2, .page-medical h3 { text-wrap: balance; }
.page-medical main p, .page-medical main li { text-wrap: pretty; }
/* Keeps a hyphenated word such as "GST-free" from splitting across lines. */
.med-nowrap { white-space: nowrap; }

/* ---------- Hero ---------- */
.med-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.med-hero .breadcrumb { margin-bottom: 1.5rem; }
/* Page names here are short enough to show in full, so let them wrap
   rather than truncate (blog.css truncates long article titles). */
.med-hero .breadcrumb [aria-current="page"] { max-width: none; overflow: visible; white-space: normal; }
.med-hero-title {
  color: #fff; font-weight: 500;
  font-size: clamp(2.1rem, 3.8vw, 3.05rem);
  line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.1rem;
}
.med-hero-lead {
  color: var(--on-dark); font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.7; max-width: 54ch; margin: 0;
}
.med-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* The right-hand pane: darker glass over the photograph. */
.med-hero-panel {
  background: rgba(9, 19, 34, .6);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 1.75rem);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Small uppercase label for dark grounds (hero pane, navy panel). Green
   Light, never Cedar Green, on navy. */
.med-panel-label {
  font-family: var(--sans); font-weight: 700; font-size: .72rem; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-light);
  margin: 0 0 1.1rem;
}

/* Audience pages: who the page is for. */
/* One column beside the copy (names stay on one line); two once the pane
   sits full width below it. */
.med-hero-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem;
}
.med-hero-list li {
  position: relative; padding-left: 1rem;
  color: #fff; font-size: .94rem; line-height: 1.4;
}
.med-hero-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-light);
}
.med-hero-foot {
  margin: 1.25rem 0 0; padding-top: 1.05rem; border-top: 1px solid var(--line-dark);
  color: var(--on-dark-soft); font-size: .86rem; line-height: 1.55;
}

/* Hub: one link per audience page. */
.med-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.med-route {
  display: flex; align-items: center; gap: .95rem;
  padding: .9rem 1rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  color: #fff; transition: background .2s ease, border-color .2s ease;
}
.med-route:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .26); color: #fff; }
.med-route:focus-visible { outline: 2px solid var(--green-light); outline-offset: 2px; }
.med-route-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 9px; background: rgba(143, 199, 166, .14); color: var(--green-light);
}
.med-route-icon svg { width: 22px; height: 22px; }
.med-route-text { flex: 1; min-width: 0; display: grid; gap: .12rem; }
.med-route-label { font-family: var(--display); font-weight: 500; font-size: 1.03rem; line-height: 1.3; }
.med-route-desc { font-size: .84rem; line-height: 1.45; color: var(--on-dark-soft); }
.med-route-arrow { flex: none; display: grid; color: var(--green-light); transition: transform .2s var(--ease); }
.med-route-arrow svg { width: 18px; height: 18px; }
.med-route:hover .med-route-arrow { transform: translateX(3px); }

/* ---------- Credentials strip ---------- */
.med-trust { background: var(--card); border-bottom: 1px solid var(--line); }
.med-trust-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.med-trust-item { display: flex; align-items: center; gap: .85rem; padding: 1.3rem 1.25rem; }
.med-trust-item:first-child { padding-left: 0; }
.med-trust-item + .med-trust-item { border-left: 1px solid var(--line-soft); }
.med-trust-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
}
.med-trust-icon svg { width: 20px; height: 20px; }
.med-trust-text { display: grid; gap: .1rem; min-width: 0; }
.med-trust-text strong {
  font-family: var(--display); font-weight: 500; font-size: .97rem; line-height: 1.3; color: var(--navy);
}
.med-trust-text span { font-size: .83rem; line-height: 1.4; color: var(--muted); }

/* ---------- "On this page" bar ----------
   Sticks under the 78px site header. main.js marks the current link and
   adds .has-more while the list can still scroll sideways. */
.med-subnav {
  position: sticky; top: 78px; z-index: 90;
  background: rgba(251, 250, 246, .96);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.med-subnav-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 58px; }
.med-subnav-label {
  flex: none; padding-right: 1.5rem; border-right: 1px solid var(--line);
  font-weight: 700; font-size: .7rem; line-height: 1.4; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.med-subnav-list {
  position: relative; flex: 1; min-width: 0;
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.6rem;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  /* A link tabbed to near either end scrolls clear of the edge fade. */
  scroll-padding-inline: 3rem;
}
.med-subnav-list::-webkit-scrollbar { display: none; }
.med-subnav-list.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}
/* No fade while a keyboard user is in the list, so focus is never dimmed. */
.med-subnav-list.has-more:focus-within { -webkit-mask-image: none; mask-image: none; }
.med-subnav-list li { flex: none; }
.med-subnav-list a {
  position: relative; display: block; padding: 1.1rem 0 1.05rem;
  font-size: .9rem; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--muted);
}
.med-subnav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.med-subnav-list a:hover,
.med-subnav-list a.is-active { color: var(--navy); }
.med-subnav-list a.is-active::after { transform: scaleX(1); }
.med-subnav-list a:focus-visible { outline: 2px solid var(--green); outline-offset: -5px; border-radius: 4px; }
.med-subnav-cta { flex: none; padding: .58rem 1.1rem; font-size: .86rem; }

/* ---------- Bands and headings ---------- */
.med-band { --band-pad: clamp(3.5rem, 7vw, 5.5rem); padding: var(--band-pad) 0; }
.med-band--alt { background: var(--paper-2); }
/* In-page links land with the heading just under the sticky bars:
   header 78px + bar 58px + 24px of air, less the 88px scroll-padding
   already on <html>, less the band's own top padding. */
.med-band[id] { scroll-margin-top: calc(72px - var(--band-pad)); }

.med-band h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.15; margin: 0 0 .55em; }
.med-head { max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 2.75rem); }
.med-head > :last-child { margin-bottom: 0; }
.med-intro { font-size: 1.06rem; line-height: 1.7; color: var(--muted); margin: 0; max-width: 62ch; }
.med-small { font-size: .95rem; line-height: 1.65; color: var(--muted); margin: 1rem 0 0; max-width: 60ch; }
.med-after { margin: clamp(1.5rem, 3vw, 2rem) 0 0; max-width: 72ch; font-size: .98rem; line-height: 1.7; color: var(--muted); }

/* Small uppercase label for light grounds. */
.med-kicker {
  font-family: var(--sans); font-weight: 700; font-size: .72rem; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep);
  margin: 0 0 1rem;
}

/* Links inside running text are underlined, not told apart by colour alone. */
.med-band p a:not(.med-arrow-link),
.med-faq .article-faq-answer a {
  color: var(--green-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(36, 79, 59, .45);
}
.med-band p a:not(.med-arrow-link):hover,
.med-faq .article-faq-answer a:hover { color: var(--green); text-decoration-color: currentColor; }

.med-arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .95rem; color: var(--green-deep);
}
.med-arrow-link:hover { color: var(--green); }
.med-arrow-link .arrow { transition: transform .2s var(--ease); }
.med-arrow-link:hover .arrow { transform: translateX(3px); }

/* Icon tile, shared by tiles, lenses, cards and examples. */
.med-icon,
.med-link-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 10px; background: var(--green-soft); color: var(--green-deep);
}
.med-icon svg,
.med-link-icon svg { width: 22px; height: 22px; }

/* ---------- Split: heading column beside content ---------- */
.med-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
/* The heading stays in view while a longer list scrolls past it. */
.med-split-aside { position: sticky; top: 168px; }
.med-split--center { align-items: center; }
.med-split--center .med-split-aside { position: static; }

/* ---------- Copy beside a call to action ---------- */
.med-split--cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.med-copy > p { font-size: 1.06rem; line-height: 1.75; color: var(--muted); margin: 0 0 1.1rem; max-width: 62ch; }
.med-copy > p:last-child { margin-bottom: 0; }
.med-cta-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--navy-deep); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.med-cta-card-icon {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.25rem;
  border-radius: 11px; background: rgba(143, 199, 166, .14); color: var(--green-light);
}
.med-cta-card-icon svg { width: 24px; height: 24px; }
.med-cta-card .med-cta-card-title {
  margin: 0 0 1.5rem;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.3; letter-spacing: -0.01em; color: #fff;
}

/* ---------- Timeline: numbered steps joined by a line ---------- */
.med-timeline {
  --dot: 2.5rem; --gap: clamp(1.5rem, 2.8vw, 2.5rem);
  list-style: none; margin: 0; padding: 0; counter-reset: med-step;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem var(--gap);
}
.med-timeline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.med-timeline-item { position: relative; counter-increment: med-step; padding-top: calc(var(--dot) + 1.25rem); }
.med-timeline-item::before {
  content: counter(med-step, decimal-leading-zero);
  position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: var(--dot); height: var(--dot);
  border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: .95rem; line-height: 1;
}
.med-timeline-item:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); height: 2px;
  left: calc(var(--dot) + .6rem); right: calc(.6rem - var(--gap));
  background: rgba(20, 35, 60, .14);
}
.med-timeline-title { font-size: 1.2rem; line-height: 1.25; margin: 0 0 .45rem; }
.med-timeline-item > p { font-size: .97rem; line-height: 1.65; margin: 0; }
.med-timeline-item > .med-timeline-sub { font-size: .95rem; line-height: 1.6; margin: 0 0 1.1rem; }

/* ---------- Lists ----------
   Ticks are small SVG data URIs, so lists need no extra markup. Their
   stroke colours are fixed: #244f3b is --green-deep, #8fc7a6 is
   --green-light. */
.med-ticks,
.med-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.med-ticks li,
.med-dots li { position: relative; padding-left: 1.75rem; font-size: .96rem; line-height: 1.5; color: var(--ink); }
.med-ticks li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244f3b' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5l7.5-8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.med-ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.med-dots li::before {
  content: ""; position: absolute; left: .36rem; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--navy);
}

/* ---------- Comparison table ---------- */
.med-compare {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.med-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.med-compare thead td { width: 22%; background: var(--paper); }
.med-compare thead th {
  text-align: left; vertical-align: bottom; padding: 1.3rem 1.4rem 1.1rem;
  font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.25; color: var(--navy);
}
.med-compare thead tr > * { border-bottom: 1px solid var(--line); }
.med-compare tbody th {
  text-align: left; vertical-align: top; padding: 1.05rem 1.4rem;
  font-family: var(--sans); font-weight: 600; font-size: .9rem; line-height: 1.5; color: var(--navy);
  background: var(--paper);
}
.med-compare tbody td {
  vertical-align: top; padding: 1.05rem 1.4rem;
  font-size: .95rem; line-height: 1.6; color: var(--ink);
}
.med-compare tbody tr + tr > * { border-top: 1px solid var(--line-soft); }
.med-compare thead th + th,
.med-compare tbody td + td { border-left: 1px solid var(--line-soft); }

.med-compare-cards { display: none; }
.med-compare-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.3rem 1.3rem 1.35rem;
}
.med-compare-card h3 { font-size: 1.18rem; margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.med-compare-card dl { margin: 0; display: grid; gap: .85rem; }
.med-compare-card dt {
  font-weight: 700; font-size: .7rem; line-height: 1.4; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-deep);
}
.med-compare-card dd { margin: .2rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink); }

/* ---------- Callout ---------- */
.med-note {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 1.35rem 1.5rem;
  background: var(--green-soft); border: 1px solid rgba(47, 107, 79, .2); border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.med-note-icon { flex: none; display: grid; padding-top: .1rem; color: var(--green-deep); }
.med-note-icon svg { width: 22px; height: 22px; }
.med-note-body { min-width: 0; }
.med-note-body p { color: var(--ink); font-size: .97rem; line-height: 1.65; margin: 0 0 .6rem; max-width: 80ch; }
.med-note-body p:last-child { margin-bottom: 0; }
.med-note-body .med-note-title {
  font-family: var(--display); font-weight: 500; font-size: 1.08rem; line-height: 1.35;
  color: var(--navy); margin-bottom: .45rem;
}

/* ---------- Cards ---------- */
.med-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 2.1rem);
}
.med-card-label {
  font-family: var(--sans); font-weight: 700; font-size: .72rem; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep);
  margin: 0 0 1.1rem;
}
.med-card-foot {
  margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .93rem; line-height: 1.6; color: var(--muted);
}

/* Numbered rows with navy counters, centred on each item's first line. */
.med-numbered { list-style: none; margin: 0; padding: 0; counter-reset: med-num; }
.med-numbered li {
  position: relative; counter-increment: med-num;
  padding: 1rem 0 1rem 3rem; border-top: 1px solid var(--line-soft);
  font-size: 1rem; line-height: 1.55; color: var(--ink);
}
.med-numbered li:first-child { padding-top: 0; border-top: 0; }
.med-numbered li:last-child { padding-bottom: 0; }
.med-numbered li::before {
  content: counter(med-num);
  position: absolute; left: 0; top: calc(1rem - .175rem);
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--navy); color: #fff;
  font-weight: 600; font-size: .82rem; line-height: 1;
}
.med-numbered li:first-child::before { top: -.175rem; }

.med-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem); }
.med-cards .med-card h3 { font-size: 1.22rem; line-height: 1.25; margin: 1.1rem 0 .55rem; }
.med-cards .med-card p { font-size: .98rem; line-height: 1.65; margin: 0 0 .9rem; }
.med-cards .med-card p:last-child { margin-bottom: 0; }

/* ---------- Duo: GST-free beside taxable ---------- */
.med-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem); }
.med-duo-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--green);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.med-duo-card--alt { border-top-color: var(--navy); }
.med-duo-head { display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem; }
.med-duo-head h3 { font-size: 1.25rem; line-height: 1.25; margin: 0; }
.med-duo-badge {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
}
.med-duo-badge svg { width: 20px; height: 20px; }
.med-duo-card--alt .med-duo-badge { background: var(--navy-soft); color: var(--navy); }
.med-duo-card > p { font-size: .97rem; line-height: 1.65; margin: 0 0 1.1rem; }
.med-duo-card > ul:not(:last-child) { margin-bottom: 1.4rem; }
/* Optional closing line, pinned to the bottom when the cards share a row. */
.med-duo-card > .med-duo-foot {
  margin: auto 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .93rem; line-height: 1.6; color: var(--muted);
}

/* ---------- Navy panel ----------
   Markup order is copy, list, then an optional note, which is also the
   order on phones. Side by side, the note tucks under the copy and the
   list sits beside both. */
.med-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "copy list" "note list";
  column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0;
  background: var(--navy-deep); border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.med-panel-copy { grid-area: copy; align-self: end; }
.med-panel:not(:has(> .med-panel-note)) { grid-template-areas: "copy list"; }
.med-panel:not(:has(> .med-panel-note)) > .med-panel-copy { align-self: center; }
.med-panel-list { grid-area: list; align-self: center; }
.med-panel > .med-panel-note {
  grid-area: note; align-self: start;
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line-dark);
  font-size: .9rem; line-height: 1.6; color: var(--on-dark-soft);
}
.med-band .med-panel h2 { color: #fff; }
.med-panel-copy p { color: var(--on-dark); font-size: 1.02rem; line-height: 1.7; margin: 0; }
.med-panel-copy .med-panel-label { margin-bottom: 1rem; font-size: .72rem; line-height: 1.4; color: var(--green-light); }
.med-panel-list { list-style: none; margin: 0; padding: 0; }
.med-panel-list li {
  position: relative; padding: 1rem 0 1rem 2.1rem;
  border-top: 1px solid var(--line-dark);
  color: #fff; font-size: 1.02rem; line-height: 1.5;
}
.med-panel-list li:last-child { border-bottom: 1px solid var(--line-dark); }
.med-panel-list li::before {
  content: ""; position: absolute; left: 0; top: calc(1rem + .14em);
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: rgba(143, 199, 166, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fc7a6' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5l7.5-8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.med-panel-list--terms li { color: var(--on-dark); font-size: .96rem; line-height: 1.6; }
.med-panel-list--terms li::before { top: calc(1rem + .2rem); }
.med-panel-list--terms strong {
  display: block; margin-bottom: .2rem;
  font-family: var(--display); font-weight: 500; font-size: 1.08rem; line-height: 1.35; color: #fff;
}

/* ---------- Checklist ---------- */
.med-checks {
  list-style: none; margin: 0; padding: .35rem clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.med-checks li {
  position: relative; padding: 1rem 0 1rem 2.25rem;
  font-size: 1rem; line-height: 1.55; color: var(--ink);
}
.med-checks li + li { border-top: 1px solid var(--line-soft); }
.med-checks li::before {
  content: ""; position: absolute; left: 0; top: calc(1rem + .1rem);
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244f3b' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5l7.5-8'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* ---------- Lenses: one card, three columns ---------- */
.med-lenses {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.med-lens { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.1rem); }
.med-lens + .med-lens { border-left: 1px solid var(--line); }
.med-lens .med-icon { margin-bottom: 1.1rem; }
.med-lens h3 { font-size: 1.22rem; line-height: 1.25; margin: 0 0 .5rem; }
.med-lens p { font-size: .97rem; line-height: 1.65; margin: 0; }
/* Who a rule affects. It follows the heading in the markup, so it is
   read after it, and is moved above it visually. */
.med-lens .med-lens-tag {
  order: -1; margin: 0 0 1rem; padding: .42rem .7rem; border-radius: 999px;
  background: var(--green-soft); color: var(--green-deep);
  font-size: .7rem; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Tiles ---------- */
.med-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(.9rem, 2vw, 1.25rem);
}
/* Fixed counts, so a row never ends with one tile on its own. */
.med-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.med-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.med-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem 1.35rem 1.5rem;
}
.med-tile .med-icon { margin-bottom: 1.05rem; }
.med-tile h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 .35rem; }
.med-tile p { font-size: .93rem; line-height: 1.55; margin: 0; }

/* ---------- Features: hairline grid ----------
   The 1px gap lets the line colour show through as rules between cells. */
.med-features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.med-feature { background: var(--card); padding: clamp(1.5rem, 3vw, 2.1rem); }
.med-feature-icon { display: block; margin-bottom: 1.1rem; line-height: 0; color: var(--green-deep); }
.med-feature-icon svg { width: 30px; height: 30px; }
.med-feature h3 { font-size: 1.14rem; line-height: 1.3; margin: 0 0 .45rem; }
.med-feature p { font-size: .95rem; line-height: 1.6; margin: 0; }

/* ---------- Hub: examples ---------- */
.med-examples {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.med-example {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
}
.med-example h3 { font-size: 1.06rem; line-height: 1.3; margin: .1rem 0 .3rem; }
.med-example p { font-size: .93rem; line-height: 1.55; margin: 0; }

/* ---------- Hub: directory of professions ---------- */
.med-directory { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 2.5rem); }
.med-dir-title {
  margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-weight: 700; font-size: .74rem; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep);
}
.med-dir-title a { color: inherit; }
.med-dir-title a:hover { color: var(--green); }
.med-dir-title a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.med-dir-title .arrow { display: inline-block; margin-left: .3rem; transition: transform .2s var(--ease); }
.med-dir-title a:hover .arrow { transform: translateX(3px); }
.med-dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.med-dir-list li { font-size: .95rem; line-height: 1.45; color: var(--ink); }

/* ---------- FAQ ----------
   Markup order is introduction, questions, then the contact card, which is
   also the order on phones. Side by side, the card tucks under the
   introduction and stays in view while the questions scroll past. */
.med-faq-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-areas: "intro main" "ask main"; grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0; align-items: start;
}
.med-faq-intro { grid-area: intro; }
.med-faq-main { grid-area: main; }
.med-faq { margin-top: 0; }
.med-ask {
  grid-area: ask; position: sticky; top: 168px;
  margin-top: 1.75rem; padding: 1.35rem 1.45rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.med-ask p { font-size: .94rem; line-height: 1.6; margin: 0 0 1rem; }
.med-ask .med-ask-title {
  margin: 0 0 .35rem;
  font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.3; color: var(--navy);
}
.med-ask-contact {
  list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--line-soft);
  display: grid; gap: .65rem;
}
.med-ask-contact li { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.med-ask-contact a { color: var(--navy); font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.med-ask-contact a:hover { color: var(--green-deep); }
.med-ask-icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--green-soft); color: var(--green-deep);
}
.med-ask-icon svg { width: 18px; height: 18px; }
.med-disclaimer { margin: 1.5rem 0 0; font-size: .86rem; line-height: 1.6; font-style: italic; color: var(--muted); }

/* ---------- More: other pages and articles ---------- */
.med-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.med-more--single { grid-template-columns: minmax(0, 1fr); }
/* Articles on their own: heading beside a wider card that shows the excerpt. */
.med-more--single .med-more-col {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.25rem, 4vw, 4.5rem); align-items: start;
}
.med-band .med-more--single h2.med-more-title { margin: 0 0 .8rem; }
.med-more-all { margin: 0; }
.med-article-excerpt { margin: 0 0 .9rem; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.med-band h2.med-more-title { font-size: clamp(1.35rem, 2vw, 1.65rem); margin: 0 0 1.15rem; }

.med-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.med-link {
  display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.med-link:hover { border-color: var(--green); box-shadow: var(--shadow-sm); color: var(--ink); }
.med-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.med-link-text { flex: 1; min-width: 0; display: grid; gap: .12rem; }
.med-link-label { font-family: var(--display); font-weight: 500; font-size: 1.06rem; line-height: 1.3; color: var(--navy); }
.med-link-desc { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.med-link-arrow { flex: none; display: grid; color: var(--green-deep); transition: transform .2s var(--ease); }
.med-link-arrow svg { width: 18px; height: 18px; }
.med-link:hover .med-link-arrow { transform: translateX(3px); }

.med-articles { display: grid; gap: .9rem; }
.med-article {
  position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.med-article:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.med-article:has(.med-article-title a:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.med-article-media { display: block; background: var(--navy-deep); }
.med-article-media img { width: 100%; height: 100%; object-fit: cover; }
.med-article-body { display: flex; flex-direction: column; min-width: 0; padding: 1.15rem 1.35rem 1.25rem; }
.med-article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem;
  margin: 0 0 .6rem; font-size: .8rem; line-height: 1.4; color: var(--muted);
}
.med-article-title { font-size: 1.08rem; line-height: 1.32; margin: 0 0 .8rem; }
.med-article-title a { color: var(--navy); }
.med-article-title a::after { content: ""; position: absolute; inset: 0; }
.med-article-title a:focus-visible { outline: none; }
.med-article:hover .med-article-title a { color: var(--green-deep); }
.med-article-more {
  margin: auto 0 0; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--green-deep);
}
.med-article-more .arrow { transition: transform .2s var(--ease); }
.med-article:hover .med-article-more .arrow { transform: translateX(3px); }

/* ---------- 404 links ---------- */
.med-missing-links { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.med-missing-links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.med-missing-links a:hover { color: var(--green-light); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
  .med-subnav-label { display: none; }
  .med-subnav-list { gap: 1.3rem; }
  .med-trust-item { gap: .7rem; padding: 1.2rem .9rem; }
  .med-trust-icon { width: 36px; height: 36px; }
  .med-trust-icon svg { width: 18px; height: 18px; }
  .med-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Beside the heading column, the examples read better one per row. */
  .med-split .med-examples { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .med-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .med-timeline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Two by two, a joining line would run off the end of each row. */
  .med-timeline:not(.med-timeline--3) > .med-timeline-item::after { display: none; }
  .med-tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .med-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .med-hero-panel { max-width: 640px; }
  .med-hero-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.3rem; }
  .med-split,
  .med-faq-grid,
  .med-more { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .med-split-aside { position: static; }
  .med-faq-grid { grid-template-areas: "intro" "main" "ask"; grid-template-rows: auto; }
  .med-ask { position: static; margin-top: 0; }
  .med-more--single .med-more-col { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .med-panel,
  .med-panel:not(:has(> .med-panel-note)) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "list" "note"; row-gap: 1.75rem;
  }
  .med-panel > .med-panel-note { margin: 0; padding: 0; border: 0; }
  .med-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last service takes the full row, so no empty cell shows. */
  .med-features > .med-feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .med-split .med-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-lenses { grid-template-columns: minmax(0, 1fr); }
  .med-lens + .med-lens { border-left: 0; border-top: 1px solid var(--line); }
  .med-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-trust-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .med-trust-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 760px) {
  .med-compare { display: none; }
  .med-compare-cards { display: grid; gap: 1rem; }
  .med-subnav-cta { display: none; }
  .med-subnav-inner { min-height: 52px; }
  .med-subnav-list a { padding: .95rem 0 .9rem; font-size: .88rem; }
  .med-duo,
  .med-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Every timeline becomes one rail down the left. */
  .med-timeline,
  .med-timeline--3 { --dot: 2.25rem; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .med-timeline-item { padding: 0 0 2rem calc(var(--dot) + 1.1rem); }
  .med-timeline-item:last-child { padding-bottom: 0; }
  .med-timeline > .med-timeline-item:not(:last-child)::after {
    display: block; top: calc(var(--dot) + .4rem); bottom: .4rem; right: auto;
    left: calc(var(--dot) / 2 - 1px); width: 2px; height: auto;
  }
  .med-timeline-title { padding-top: .375rem; }
  .med-examples,
  .med-split .med-examples,
  .med-features { grid-template-columns: minmax(0, 1fr); }
  /* Services: icon beside the text, to keep the list compact. */
  .med-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 1.2rem; }
  .med-feature-icon { grid-row: span 2; margin: .1rem 0 0; }
  .med-feature-icon svg { width: 26px; height: 26px; }
  .med-feature h3 { margin-bottom: .3rem; }
  /* Professions: one group per row, its list in two columns. */
  .med-directory { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .med-dir-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .med-article { grid-template-columns: minmax(0, 1fr); }
  .med-article-media img { height: auto; aspect-ratio: 1200 / 630; }
}

@media (max-width: 560px) {
  .med-hero-actions .btn { flex: 1 1 auto; }
  .med-cta-card .btn { align-self: stretch; }
  .med-hero-list { gap: .55rem 1rem; }
  .med-hero-list li { font-size: .9rem; }
  .med-trust-item { align-items: flex-start; gap: .65rem; padding: .95rem .75rem; }
  .med-trust-item:nth-child(odd) { padding-left: 0; }
  .med-trust-icon { width: 32px; height: 32px; }
  .med-trust-icon svg { width: 17px; height: 17px; }
  .med-trust-text strong { font-size: .88rem; }
  .med-trust-text span { font-size: .76rem; }
  .med-tiles,
  .med-tiles--4,
  .med-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-tile { padding: 1.15rem 1.05rem 1.25rem; }
  .med-panel { padding: 1.75rem 1.35rem; }
  .med-card,
  .med-duo-card { padding: 1.35rem 1.25rem; }
  .med-note { padding: 1.2rem 1.15rem; }
  .med-note-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .med-route, .med-route-arrow, .med-link, .med-link-arrow, .med-article,
  .med-article-more .arrow, .med-arrow-link .arrow, .med-dir-title .arrow,
  .med-subnav-list a::after { transition: none; }
  .med-route:hover .med-route-arrow, .med-link:hover .med-link-arrow,
  .med-article:hover .med-article-more .arrow, .med-arrow-link:hover .arrow,
  .med-dir-title a:hover .arrow { transform: none; }
}