/* ============================================================================
   Dental Cost Index — design system
   Direction: premium clinical data publication.

   Palette and type pairing come from a healthcare design profile (calm cyan +
   health green, Figtree). Two recommendations from that profile were rejected
   deliberately:
     * Neumorphism — carries a high accessibility risk and its soft embossed
       edges destroy legibility in dense numeric tables, which are this site's
       primary content. Replaced with crisp elevation.
     * Hero + testimonials + CTA — this is a reference publication with nothing
       to sell and no customers to quote. Replaced with a data-led hero.

   Figtree is self-hosted (SIL Open Font License) rather than loaded from a CDN
   so the site keeps working when opened offline from a local folder.
   ========================================================================= */

/* Both self-hosted (SIL Open Font License) so the site works offline.
   Playfair carries display headings only; everything numeric or small stays in
   Figtree, which is far more legible at UI sizes. */
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-latin-var.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- surfaces: three distinct layers, page < band < card ---- */
  --page: #f4fafb;
  --band: #e8f6f8;
  --band-2: #ffffff;
  --card: #ffffff;
  --card-raised: #ffffff;

  --border: #d6e7ec;
  --border-strong: #b4d2da;

  /* ---- ink ---- */
  --ink: #0d2b33;
  --ink-soft: #46646f;
  --ink-faint: #7694a0;

  /* ---- brand ---- */
  --primary: #0e7f91;
  --primary-deep: #0a5f6e;
  --primary-bright: #0891b2;
  --primary-wash: #e0f4f7;

  /* ---- semantic: the observed / estimated distinction ---- */
  --observed: #047857;
  --observed-wash: #e6f6f0;
  --estimated: #a15c07;
  --estimated-wash: #fdf4e4;
  --estimated-line: #d99a2b;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  --sh-1: 0 1px 2px rgba(13, 43, 51, .05);
  --sh-2: 0 2px 4px rgba(13, 43, 51, .05), 0 6px 16px -6px rgba(13, 43, 51, .09);
  --sh-3: 0 4px 8px rgba(13, 43, 51, .06), 0 18px 38px -14px rgba(13, 43, 51, .18);

  --ease: cubic-bezier(.22, .68, .36, 1);
  --maxw: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #08141a;
    --band: #0d2029;
    --band-2: #0f2630;
    --card: #11232c;
    --card-raised: #16303b;
    --border: #1f3b47;
    --border-strong: #2d5867;
    --ink: #e9f3f6;
    --ink-soft: #9db9c4;
    --ink-faint: #6d8c99;
    --primary: #4ec5d6;
    --primary-deep: #8ae2ee;
    --primary-bright: #5fd3dc;
    --primary-wash: #0e2f39;
    --observed: #4ad4a6;
    --observed-wash: #0d2d26;
    --estimated: #e6b65c;
    --estimated-wash: #2b2214;
    --estimated-line: #8a6c24;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(0, 0, 0, .5);
    --sh-3: 0 6px 14px rgba(0, 0, 0, .45), 0 22px 44px -16px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --page: #08141a; --band: #0d2029; --band-2: #0f2630;
  --card: #11232c; --card-raised: #16303b;
  --border: #1f3b47; --border-strong: #2d5867;
  --ink: #e9f3f6; --ink-soft: #9db9c4; --ink-faint: #6d8c99;
  --primary: #4ec5d6; --primary-deep: #8ae2ee; --primary-bright: #5fd3dc;
  --primary-wash: #0e2f39;
  --observed: #4ad4a6; --observed-wash: #0d2d26;
  --estimated: #e6b65c; --estimated-wash: #2b2214; --estimated-line: #8a6c24;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Safety net: nothing should ever scroll the page sideways. `clip` (not
     `hidden`) because it does not create a scroll container, so the sticky
     header keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font: 400 16.5px/1.65 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---- full-bleed section bands ----
   <main> is unconstrained; these span the viewport and carry their own .wrap.
   No viewport maths, so no scrollbar overflow. */
section.band {
  width: 100%;
  padding-block: 56px;
  border-block: 1px solid var(--border);
  background: var(--band);
}
section.band > .wrap > :first-child { margin-top: 0; }
section.band > .wrap > :last-child { margin-bottom: 0; }
section.band + section.band { border-top: 0; }

/* Content sections carry the SAME vertical padding as the bands, so the rhythm
   down the page is even. Without this the gaps alternated ~124px (band -> wrap,
   where a band's 56px padding stacked on an h2's 68px margin) and ~78px
   (wrap -> band), because plain sections had no padding of their own and
   relied entirely on heading margins. Collapsing the first/last child margins
   keeps the padding authoritative. */
main > .wrap { padding-block: 56px; }
main > .wrap:first-child { padding-top: 0; }
main > .wrap:empty { padding-block: 0; }
main > .wrap > :first-child { margin-top: 0; }
main > .wrap > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  main > .wrap { padding-block: 36px; }
}

section.band.alt {
  background:
    radial-gradient(900px 340px at 84% 0%,
      color-mix(in srgb, var(--primary-bright) 10%, transparent), transparent 62%),
    var(--band-2);
}

/* ---- photographic band: image background + overlay for legible text ---- */
section.band.photo {
  position: relative;
  isolation: isolate;
  border-block: 0;
  background: var(--ink);
  background-size: cover;
  background-position: center;
  color: #f2f8fa;
}
section.band.photo::before {
  /* The overlay is what makes body text readable over photography. Two layers:
     a flat scrim for contrast, and a directional gradient so the left-hand
     column (where the text sits) is darkest. */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(6, 26, 32, .93) 0%, rgba(6, 26, 32, .80) 42%,
      rgba(6, 26, 32, .58) 100%),
    rgba(6, 26, 32, .35);
}
section.band.photo h2,
section.band.photo h3 { color: #ffffff; }
section.band.photo p,
section.band.photo li { color: #d4e5ea; }
section.band.photo .lede { color: #c7dde3; }
section.band.photo a:not(.card) { color: #8fe6ec; }
section.band.photo .stat {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .17);
  backdrop-filter: blur(3px);
}
section.band.photo .stat .v { color: #ffffff; }
section.band.photo .stat .k,
section.band.photo .stat .sub { color: #a8c6ce; }
section.band.photo .card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #f2f8fa;
  backdrop-filter: blur(3px);
}
section.band.photo .card .d { color: #b9d4db; }
section.band.photo .card:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(143, 230, 236, .6);
}

@media (max-width: 760px) {
  section.band { padding-block: 36px; }
}

/* ============================ header ============================ */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: saturate(170%) blur(12px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex; align-items: center; gap: 26px;
  flex-wrap: wrap; padding-block: 12px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 750; font-size: 1.04rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand img {
  display: block; border-radius: 8px; box-shadow: var(--sh-1);
  transition: transform .25s var(--ease);
}
.brand:hover img { transform: rotate(-6deg) scale(1.06); }
.brand b { color: var(--primary); font-weight: 750; }

nav.main { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
nav.main a {
  position: relative; color: var(--ink-soft); text-decoration: none;
  font-size: .89rem; font-weight: 550; padding: 7px 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
nav.main a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
nav.main a:hover { color: var(--primary); background: var(--primary-wash); }
nav.main a:hover::after { transform: scaleX(1); }

/* ============================ type ============================ */
.crumbs { font-size: .8rem; color: var(--ink-faint); margin: 22px 0 4px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs span { margin: 0 8px; opacity: .4; }

h1, h2, .brand span {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}
h1 {
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 1.08; letter-spacing: -.022em; font-weight: 700;
  margin: .3em 0 .42em; text-wrap: balance;
}
h2 {
  font-size: clamp(1.42rem, 1.12rem + .95vw, 1.9rem);
  letter-spacing: -.012em; font-weight: 650; margin: 2.4em 0 .6em;
  text-wrap: balance;
}
/* A hairline under section headings reads as editorial structure. Scoped to
   content sections only — inside a band the background already separates it.
   (This was previously `main > h2`, which stopped matching once headings moved
   inside .wrap children.) */
main > .wrap > h2 {
  padding-bottom: .34em;
  border-bottom: 1px solid var(--border);
}
h3 { font-size: 1.07rem; font-weight: 680; margin: 1.8em 0 .4em;
     letter-spacing: -.012em; }
p { margin: 0 0 1.08em; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-deep); }
.lede {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  color: var(--ink-soft); max-width: 62ch; line-height: 1.56;
}
main { padding-bottom: 0; }
.prose { max-width: 70ch; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .42em 0; }

/* ============================ hero ============================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(1100px 380px at 88% 12%,
      color-mix(in srgb, var(--primary-bright) 15%, transparent), transparent 62%),
    linear-gradient(152deg, var(--card) 0%, var(--primary-wash) 100%);
  padding: 44px 40px; margin: 22px 0 10px; box-shadow: var(--sh-2);
}
.hero::after {   /* soft clinical grid, drawn not loaded */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(620px 300px at 78% 20%, #000, transparent 72%);
}
.hero h1 { margin-top: 0; max-width: 17ch; }
.hero .lede { max-width: 52ch; }
.hero-art {
  position: absolute; right: -26px; bottom: -14px; width: 38%;
  max-width: 400px; opacity: .42; pointer-events: none; z-index: -1;
}
@media (max-width: 900px) {
  .hero { padding: 28px 22px; }
  .hero-art { display: none; }
}

/* ============================ stat cards ============================ */
.headline {
  display: grid; gap: 15px; margin: 26px 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}
.stat {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px 19px 15px;
  box-shadow: var(--sh-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.stat::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--primary), var(--observed));
}
.stat .k {
  font-size: .685rem; text-transform: uppercase; letter-spacing: .085em;
  color: var(--ink-faint); font-weight: 700;
}
.stat .v {
  font-size: 1.72rem; font-weight: 760; letter-spacing: -.032em;
  margin-top: 4px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat .sub { font-size: .78rem; color: var(--ink-soft); margin-top: 3px; }

/* ============================ badges & notes ============================ */
.badge {
  display: inline-block; font-size: .64rem; font-weight: 760;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; vertical-align: 1px;
  border: 1px solid transparent;
}
.badge.obs {
  background: var(--observed-wash); color: var(--observed);
  border-color: color-mix(in srgb, var(--observed) 22%, transparent);
}
.badge.est {
  background: var(--estimated-wash); color: var(--estimated);
  border-color: color-mix(in srgb, var(--estimated) 25%, transparent);
}

.basis-note {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  padding: 15px 19px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem; margin: 18px 0; color: var(--ink-soft);
  box-shadow: var(--sh-1);
}
.basis-note.est {
  border-left-color: var(--estimated-line); background: var(--estimated-wash);
}
.basis-note strong {
  display: block; margin-bottom: 4px; color: var(--ink);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
}

/* ============================ tables ============================ */
.tablewrap {
  overflow-x: auto; margin: 20px 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--sh-2);
}
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
caption {
  text-align: left; font-size: .8rem; color: var(--ink-soft);
  padding: 13px 17px; border-bottom: 1px solid var(--border);
  background: var(--band);
}
th, td { padding: 11px 17px; text-align: left; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--band); font-size: .685rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-soft); font-weight: 760;
  white-space: nowrap; border-bottom: 1px solid var(--border-strong);
}
/* sortable headers (added by script; absent without JS) */
thead th.sortcol { cursor: pointer; user-select: none; padding-right: 26px; position: relative; }
thead th.sortcol::after {
  content: "\2195"; position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); opacity: .35; font-size: .9em;
}
thead th.sortcol:hover { color: var(--primary); background: var(--primary-wash); }
thead th.sortcol.sorted { color: var(--primary); }
thead th.sortcol[data-dir="asc"]::after { content: "\2191"; opacity: 1; }
thead th.sortcol[data-dir="desc"]::after { content: "\2193"; opacity: 1; }

tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--band) 42%, transparent);
}
tbody tr:last-child { border-bottom: 0; }
tbody tr { transition: background .14s var(--ease); }
tbody tr:hover { background: var(--primary-wash); }
td.num, th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
td a { font-weight: 560; text-decoration: none; }
td a:hover { text-decoration: underline; }
td .n { color: var(--ink-faint); font-size: .83rem; }

.dist {
  position: relative; display: block; height: 10px; min-width: 100px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 5px;
}
.dist i {
  position: absolute; inset-block: 0; border-radius: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 55%, transparent), var(--primary));
  opacity: .5;
}
.dist b {
  position: absolute; top: -3px; width: 2.5px; height: 16px;
  background: var(--primary); border-radius: 2px;
}

/* ============================ charts ============================ */
.chart {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 20px 20px 12px; margin: 20px 0;
  box-shadow: var(--sh-2); overflow-x: auto;
}
.chart svg { display: block; width: 100%; height: auto; min-width: 540px; }
.chart .cap {
  font-size: .82rem; color: var(--ink-soft); margin: 0 0 16px; font-weight: 550;
}
.chart text { font-family: 'Figtree', sans-serif; }
.chart .lbl { font-size: 11.5px; fill: var(--ink-soft); font-weight: 500; }
.chart .val { font-size: 11px; fill: var(--ink-faint);
              font-variant-numeric: tabular-nums; }
.chart .box { fill: var(--primary); opacity: .26; }
.chart .whisk { stroke: var(--border-strong); stroke-width: 1.5; }
.chart .med { stroke: var(--primary); stroke-width: 2.75; stroke-linecap: round; }
.chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .natline { stroke: var(--estimated-line); stroke-width: 1.5;
                  stroke-dasharray: 5 3; }

/* chart draws itself in once, on first paint */
@media (prefers-reduced-motion: no-preference) {
  .chart .box { animation: growx .55s var(--ease) both; transform-origin: left; }
  .chart .med, .chart .whisk { animation: fade .5s .22s var(--ease) both; }
}
@keyframes growx { from { transform: scaleX(.02); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---- ranked bar chart ---- */
.chart.bars { margin: 20px 0; padding: 20px 20px 14px; }
figure.chart { margin-inline: 0; }
.chart .chart-note {
  font-size: .78rem; color: var(--ink-faint); margin: 10px 0 0;
}
.chart .blbl { font-size: 12px; fill: var(--ink); font-weight: 560; }
.chart .bval {
  font-size: 12px; fill: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chart .bsub { font-size: 11px; fill: var(--ink-faint); }
.chart .btrack { fill: var(--border); opacity: .45; }
.chart .bfill {
  fill: var(--primary);
  transition: fill .18s var(--ease);
}
.chart .bar:hover .bfill { fill: var(--primary-deep); }
.chart .bar:hover .blbl { fill: var(--primary); }
.chart .bar:first-of-type .bfill { fill: var(--observed); }

@media (prefers-reduced-motion: no-preference) {
  .chart .bfill { animation: barin .62s var(--ease) both; transform-origin: left; }
  .chart .bval { animation: fade .5s .3s var(--ease) both; }
}
@keyframes barin { from { transform: scaleX(.015); } }

.legend {
  display: flex; gap: 20px; flex-wrap: wrap; font-size: .79rem;
  color: var(--ink-soft); margin-top: 12px;
}
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 15px; height: 10px; border-radius: 3px; display: block; }
.legend i.box { background: var(--primary); opacity: .26; }
.legend i.med { background: var(--primary); width: 3px; height: 15px; }
.legend i.nat { background: var(--estimated-line); width: 15px; height: 2px; }

/* ============================ cards ============================ */
.grid {
  display: grid; gap: 15px; margin: 22px 0;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
}
.card {
  display: block; padding: 17px 19px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); box-shadow: var(--sh-1);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 7%, transparent), transparent 55%);
  opacity: 0; transition: opacity .22s var(--ease);
}
.card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-3);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}
.card:hover::after { opacity: 1; }
.card .t { font-weight: 670; font-size: .97rem; letter-spacing: -.012em; }
.card .d { font-size: .81rem; color: var(--ink-soft); margin-top: 4px; }

/* ---- card slider ---- */
.slider { margin: 22px 0 10px; }
.slider-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.slider-head h3 { margin: 0; font-size: 1.05rem; }
.slider-nav { display: flex; gap: 8px; }
.sbtn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease);
}
.sbtn:hover {
  background: var(--primary); border-color: var(--primary);
  color: #fff; transform: translateY(-1px);
}
.sbtn[disabled] { opacity: .35; cursor: default; transform: none; }

.slider-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w, 280px);
  gap: 15px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 14px; margin: 0 -2px;
  scrollbar-width: thin;
}
.slider-track > * { scroll-snap-align: start; }
.slider-track:focus-visible { outline: 2.5px solid var(--primary-bright); outline-offset: 3px; }

/* page header photograph */
figure.page-hero {
  margin: 20px 0 8px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-2);
}
figure.page-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 9;
  object-fit: cover; filter: saturate(.97);
}

/* photographic card */
.card.pcard {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--radius);
}
.card.pcard .pc-media {
  display: block; position: relative; overflow: hidden;
  background: var(--surface-2, var(--band));
}
.card.pcard img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing. The width/height HTML attributes become a
     presentational hint (height: 428px); without this, that hint wins and
     aspect-ratio is ignored, rendering a tall cropped sliver. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .3s var(--ease);
  filter: saturate(.96);
}
/* a soft scrim at the image foot ties photo to card and stops the busier
   stock images fighting the title underneath */
.card.pcard .pc-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--card) 88%, transparent), transparent);
  pointer-events: none;
}
.card.pcard:hover img { transform: scale(1.055); filter: saturate(1.06); }
.card.pcard .pc-body {
  display: block; padding: 13px 16px 16px; position: relative;
}
.card.pcard .pc-body::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0; transition: opacity .22s var(--ease);
}
.card.pcard:hover .pc-body::before { opacity: 1; }
.card.pcard .t {
  display: block; font-weight: 680; font-size: .97rem; letter-spacing: -.012em;
  line-height: 1.32;
}
.card.pcard .d {
  display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
section.band.photo .card.pcard .pc-media::after {
  background: linear-gradient(to top, rgba(10, 30, 36, .55), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
  .card.pcard:hover img { transform: none; }
}

.linklist { columns: 3 190px; column-gap: 30px; font-size: .9rem; margin: 18px 0; }
.linklist a {
  display: block; padding: 5px 0; text-decoration: none;
  break-inside: avoid; color: var(--primary);
  transition: transform .16s var(--ease), color .16s var(--ease);
}
.linklist a:hover { text-decoration: underline; transform: translateX(3px); }
.linklist .n { color: var(--ink-faint); font-size: .8rem; }

/* ============================ FAQ ============================ */
details.faq {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 14px 18px; margin: 10px 0;
  box-shadow: var(--sh-1); transition: border-color .18s var(--ease);
}
details.faq:hover { border-color: var(--border-strong); }
details.faq[open] { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
details.faq summary {
  cursor: pointer; font-weight: 640; font-size: .97rem; list-style: none;
  display: flex; align-items: flex-start; gap: 11px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before {
  content: "+"; color: var(--primary); font-weight: 700; font-size: 1.1rem;
  line-height: 1.3; flex: none; transition: transform .22s var(--ease);
}
details.faq[open] summary::before { content: "\2212"; transform: rotate(180deg); }
details.faq[open] summary { color: var(--primary); }
details.faq .a {
  margin: 10px 0 2px 22px; color: var(--ink-soft);
  font-size: .93rem; max-width: 68ch;
}
@media (prefers-reduced-motion: no-preference) {
  details.faq[open] .a { animation: slidein .26s var(--ease) both; }
}
@keyframes slidein { from { opacity: 0; transform: translateY(-5px); } }

/* ============================ reveal on scroll ============================ */
/* CSS-only, no library. Falls back to fully visible where unsupported. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .headline > .stat, .grid > .card, .tablewrap, .chart {
      animation: rise .6s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ============================ focus ============================ */
a:focus-visible, summary:focus-visible, select:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--primary-bright);
  outline-offset: 2px; border-radius: 4px;
}

/* ============================ footer ============================ */
/* Dark grey footer in both themes — it anchors the page and separates the
   reference material from the data above it. Colours are fixed here rather
   than tokenised, because this block is intentionally dark in light mode too. */
footer.site {
  --f-bg: #232b2f;
  --f-ink: #e7eef1;
  --f-dim: #a7b7bf;
  --f-faint: #7f9099;
  --f-line: #39444a;
  --f-accent: #6fd8e2;

  border-top: 4px solid var(--primary);
  background: var(--f-bg);
  padding: 46px 0 28px; font-size: .87rem; color: var(--f-dim);
}
footer.site h4 { color: var(--f-ink) !important; }
footer.site a { color: var(--f-dim) !important; }
footer.site a:hover { color: var(--f-accent) !important; }
footer.site .brand { color: var(--f-ink); }
footer.site .brand b { color: var(--f-accent); }
footer.site .fbrand p { color: var(--f-faint); }
footer.site .fupd { color: var(--f-faint); }
footer.site a.more { color: var(--f-accent) !important; }
footer.site .badge.obs {
  background: rgba(111, 216, 226, .14); color: var(--f-accent);
  border-color: rgba(111, 216, 226, .35);
}
footer.site .cols {
  display: grid; gap: 30px 26px; align-items: start;
  grid-template-columns: 1.6fr repeat(4, minmax(132px, 1fr));
}
@media (max-width: 980px) {
  footer.site .cols { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
  footer.site .fbrand { grid-column: 1 / -1; }
}

footer.site .fbrand .brand { margin-bottom: 12px; }
footer.site .fbrand p {
  font-size: .84rem; line-height: 1.58; color: var(--ink-faint);
  max-width: 36ch; margin: 0 0 12px;
}
footer.site .fmeta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
footer.site .fupd { font-size: .76rem; color: var(--ink-faint); }

footer.site a.more {
  margin-top: 8px; font-weight: 620; color: var(--primary); font-size: .82rem;
}
footer.site a.more:hover { transform: translateX(3px); }

footer.site .fbar {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--f-line);
  font-size: .76rem; color: var(--f-faint);
}
footer.site .fbar span { display: block; }
footer.site h4 {
  font-size: .71rem; text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 10px; color: var(--ink);
}
footer.site a {
  display: block; padding: 3px 0; color: var(--ink-soft); text-decoration: none;
  transition: color .16s var(--ease), transform .16s var(--ease);
}
footer.site a:hover {
  color: var(--primary); text-decoration: underline; transform: translateX(3px);
}
footer.site .fine {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--f-line);
  font-size: .79rem; max-width: 88ch; line-height: 1.62; color: var(--f-faint);
}
footer.site .fine strong { color: var(--f-dim); }

/* ============================ responsive ============================ */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .linklist { columns: 2 140px; }
  nav.main { gap: 0; }
  nav.main a { font-size: .83rem; padding: 6px 8px; }
  header.site .wrap { gap: 10px; }
  th, td { padding: 10px 12px; }
  .band > .wrap, .band-alt > .wrap { padding-block: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================ hero slider ============================ */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 40px; align-items: center; padding: 40px;
}
.hero-split h1 { max-width: 14ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; color: var(--primary-deep);
  background: color-mix(in srgb, var(--primary-wash) 80%, var(--card));
  border: 1px solid var(--border);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 600;
  text-decoration: none; transition: transform .2s var(--ease),
    box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn-primary {
  color: #fff; background: var(--primary);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; background: var(--primary-deep);
  transform: translateY(-1px); text-decoration: none; }
.btn-ghost {
  color: var(--primary-deep); background: var(--card);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { color: var(--primary-deep); border-color: var(--primary);
  transform: translateY(-1px); text-decoration: none; }
.btn:focus-visible { outline: 2.5px solid var(--primary-bright); outline-offset: 3px; }

.hero-slider {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--primary-wash);
  box-shadow: 0 2px 6px rgba(13, 43, 51, .08),
    0 30px 60px -24px rgba(13, 43, 51, .38);
  outline: 1px solid rgba(255, 255, 255, .55); outline-offset: -1px;
}
.hs-stage, .hs-slide { position: absolute; inset: 0; margin: 0; }
.hs-slide { opacity: 0; visibility: hidden; transition: opacity .9s var(--ease),
  visibility 0s linear .9s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hs-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  transform: scale(1.06); transition: transform 7s linear;
}
.hs-slide.is-active img { transform: scale(1); }
.hs-slide::after {   /* legibility scrim behind the caption */
  content: ""; position: absolute; inset: 45% 0 0;
  background: linear-gradient(to top, rgba(6, 30, 37, .78), transparent);
}
.hs-slide figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 58px; z-index: 1;
  display: grid; gap: 3px; color: #fff;
}
.hs-t { font-family: "Playfair Display", Georgia, serif; font-size: 1.28rem;
  font-weight: 600; line-height: 1.2; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.hs-d { font-size: .92rem; color: #dcedf0; }
.hs-controls {
  position: absolute; left: 18px; right: 14px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
}
.hs-dots { display: flex; gap: 6px; }
.hs-dot {
  width: 26px; height: 24px; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative;
}
.hs-dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px;
  border-radius: 4px; background: rgba(255, 255, 255, .42);
}
.hs-dot::after {
  content: ""; position: absolute; left: 0; top: 10px; height: 4px; width: 0;
  border-radius: 4px; background: #fff;
}
.hs-dot.is-active::after { width: 100%; }
.hero-slider:not(.is-paused):not(:hover):not(:focus-within) .hs-dot.is-active::after {
  animation: hs-progress 6s linear both;
}
@keyframes hs-progress { from { width: 0; } to { width: 100%; } }
.hs-dot:focus-visible, .hs-pause:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px;
}
.hs-pause {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px);
  display: grid; place-items: center;
}
.hs-pause span {   /* two bars = pause; a triangle when paused */
  width: 10px; height: 12px;
  border-left: 3px solid #fff; border-right: 3px solid #fff;
}
.is-paused .hs-pause span {
  width: 0; height: 0; border-right: 0; margin-left: 3px;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.hs-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: var(--ink); background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px); box-shadow: 0 4px 14px -6px rgba(13, 43, 51, .35);
}
.hs-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .22);
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide, .hs-slide img { transition: none; }
  .hs-slide img { transform: none; }
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .hero-slider { aspect-ratio: 4 / 3; order: -1; }
  .hs-t { font-size: 1.1rem; }
  .hs-badge { left: auto; right: 12px; top: 12px; padding: 5px 10px;
    font-size: .72rem; }
}
@media (max-width: 480px) {
  .hs-d { display: none; }
  .hs-slide figcaption { bottom: 52px; }
}

/* ============================ quick price answers ============================ */
.quick-prices { margin: 34px 0 10px; }
.qa-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 10px 18px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qa-list li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 12px; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--sh-1);
}
.qa-list a { font-weight: 600; }
.qa-price { font-weight: 700; font-size: 1.05rem; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.qa-range { grid-column: 1 / -1; font-size: .84rem; color: var(--ink-soft); }
.related-searches { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 640px) { .qa-list { grid-template-columns: 1fr; } }