/* ============================================================
   J BASS CONSTRUCTION — SHARED DESIGN SYSTEM
   Edit colors/fonts here once; every page inherits the change.
   ============================================================ */

:root {
  /* Color */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f6f3;
  --color-dark: #16181b;
  --color-dark-2: #1f2226;
  --color-text: #22252a;
  --color-text-muted: #63676e;
  --color-border: #e6e3dc;
  --color-orange: #ff5a1f;
  --color-orange-dark: #e04c14;
  --color-orange-soft: #fff1ea;
  --color-white: #ffffff;

  /* Type */
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 8px 30px rgba(20, 20, 20, 0.06);
  --shadow-card-hover: 0 16px 40px rgba(20, 20, 20, 0.1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: hidden;
  overflow-x: clip;   /* clip does not create a scroll container, hidden does */
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { color: var(--color-text-muted); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-orange);
  display: inline-block;
}

section { padding: 88px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-dark); color: #f4f2ee; }
.section-dark h2, .section-dark h3, .section-dark p { color: #f4f2ee; }
.section-dark p { color: #c7c9cd; }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background 200ms, box-shadow 200ms, border-color 200ms, color 200ms;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-primary {
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 90, 31, 0.3);
}
.btn-primary:hover { background: var(--color-orange-dark); transform: translateY(-2px); }
.btn-secondary {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-dark); transform: translateY(-2px); }
.btn-on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.btn-on-dark:hover { border-color: #fff; transform: translateY(-2px); }
.btn-block { width: 100%; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Nav ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background 260ms ease, box-shadow 260ms ease, padding 260ms ease, border-color 260ms ease;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
/* Nav shares the content container width so the logo lines up with the page
   content below it. Fit is achieved by sizing the parts, not by widening the
   bar or letting anything shrink. */
.site-nav .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
/* Neither group may shrink below its content: a shrunk flex item does not wrap
   here, it overlaps its neighbour. Fit is handled by the size rules below. */
.nav-links, .nav-right { flex: none; }

.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); flex: none; min-width: 0; }

/* Real logo. Two artwork variants ship because the nav sits on a dark hero
   before scroll and a white bar after, and one wordmark cannot read on both.
   Only one is ever visible; the other is display:none, never just faded. */
.brand-logo { display: block; line-height: 0; flex: none; }
.brand-logo img { display: block; height: 40px; width: auto; max-width: none; }
.site-nav:not(.is-scrolled) .brand-logo .logo-on-light { display: none; }
.site-nav.is-scrolled .brand-logo .logo-on-dark { display: none; }

.brand-tagline {
  flex: none;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding-left: 12px; border-left: 1px solid var(--color-border);
  line-height: 1.2; max-width: 92px;
}
.site-nav:not(.is-scrolled) .brand-tagline { color: rgba(255,255,255,0.72); border-left-color: rgba(255,255,255,0.22); }
.site-nav.is-scrolled .brand-tagline { color: var(--color-text-muted); border-left-color: var(--color-border); }
/* Tagline lives in the logo lockup on the drawer/mobile header only; on the
   desktop bar the space belongs to the nav links. */
.brand-tagline { display: none; }
@media (max-width: 640px) { .brand-logo img { height: 34px; } }

/* drawer sits on a white panel, footer on the dark band */
.drawer-logo { display: block; width: auto; height: 34px; }
.footer-logo { display: block; width: auto; height: 42px; margin-bottom: 10px; }
.footer-tagline {
  display: block; font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8d9096;
}
.qr-logo { display: block; width: auto; height: 46px; margin: 0 auto 18px; }
/* drawer links are <li> outside a <ul>, so browsers drew default bullets */
.mobile-drawer li { list-style: none; }
.mobile-drawer ul { list-style: none; margin: 0; padding: 0; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > li { position: relative; }
.nav-links a.nav-link {
  display: block; padding: 10px 14px; font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-sm);
  color: var(--color-dark);
  transition: background 160ms, color 160ms;
}
.nav-links a.nav-link:hover { background: var(--color-bg-alt); color: var(--color-orange); }

.has-dropdown > .nav-link::after { content: "▾"; margin-left: 4px; font-size: 0.7em; opacity: 0.6; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 0.92rem; color: var(--color-text); }
.dropdown a:hover { background: var(--color-bg-alt); color: var(--color-orange); }

.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta { padding: 11px 18px; font-size: 0.88rem; white-space: nowrap; }
.nav-phone { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.nav-phone svg { flex: none; }
.nav-phone svg { width: 18px; height: 18px; stroke: var(--color-orange); }

.hamburger {
  display: none; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--color-border);
  background: #fff; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.hamburger span { width: 20px; height: 2px; background: var(--color-dark); display: block; transition: transform 200ms, opacity 200ms; }

/* Nav sits transparent over a dark hero until scrolled — its own text colors
   must be set explicitly for each state so text never goes dark-on-dark. */
.site-nav:not(.is-scrolled) .nav-links > li > a.nav-link { color: #fff; }
.site-nav:not(.is-scrolled) .nav-phone { color: #fff; }
.site-nav:not(.is-scrolled) .hamburger { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
.site-nav:not(.is-scrolled) .hamburger span { background: #fff; }

.site-nav.is-scrolled .nav-links > li > a.nav-link { color: var(--color-dark); }
.site-nav.is-scrolled .nav-phone { color: var(--color-dark); }
.site-nav.is-scrolled .hamburger { background: #fff; border-color: var(--color-border); }
.site-nav.is-scrolled .hamburger span { background: var(--color-dark); }

/* Hover states, scoped per nav theme so hover never lands white-on-light or dark-on-dark */
.site-nav:not(.is-scrolled) .nav-links > li > a.nav-link:hover { background: rgba(255,255,255,0.14); color: var(--color-orange); }
.site-nav.is-scrolled .nav-links > li > a.nav-link:hover { background: var(--color-bg-alt); color: var(--color-orange); }
.hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Off-canvas by transform rather than by `right: -100%`. Offsetting with `right`
   pushed the panel into the page's scrollable area, which produced real
   horizontal overflow on narrow screens, and animating `right` animates layout
   instead of the compositor. `visibility: hidden` while closed also keeps its
   links out of the tab order, which an off-screen panel otherwise stays in. */
.mobile-drawer {
  position: fixed; top: 0; right: 0; width: min(86vw, 360px); height: 100%;
  background: #fff; z-index: 1100; box-shadow: -20px 0 50px rgba(0,0,0,0.15);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
  padding: 24px; overflow-y: auto;
}
.mobile-drawer.is-open { transform: none; visibility: visible; transition: transform 260ms var(--ease-out), visibility 0s; }
.mobile-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.mobile-drawer a.nav-link { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); }
.mobile-drawer .submenu { padding-left: 14px; }
.mobile-drawer .submenu a { font-size: 0.95rem; color: var(--color-text-muted); border-bottom: none; padding: 10px 4px; }
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.45); z-index: 1050;
  opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 260ms;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-cta { margin-top: 18px; }

@media (max-width: 960px) {
  .nav-links, .nav-right .nav-phone { display: none; }
  .hamburger { display: flex; }
}
/* On phones the nav CTA overflowed the viewport. The mobile drawer and the
   sticky bottom bar both carry a CTA, so the nav one is redundant here. */
@media (max-width: 640px) {
  .nav-right > .btn-primary { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 170px 0 100px;
  background: radial-gradient(1200px 600px at 15% -10%, #23262b 0%, var(--color-dark) 55%, #0f1113 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 90px);
  pointer-events: none;
}
/* Two-column hero: copy left, featured project photo right.
   The photo sits beside the text rather than behind it, so the headline never
   competes with the image for contrast and the work is shown undarkened. */
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.hero-inner { max-width: 640px; position: relative; z-index: 1; }
/* Two deliberate lines. The second is set smaller and lighter so it always
   fits inside the copy column instead of running under the hero photo. */
.hero h1 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.08; }
.hero h1 span { display: block; }
.hero h1 .h1-lead { font-weight: 700; }
.hero h1 .h1-sub {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.90);
  margin-top: 4px;
}

.hero-figure { margin: 0; position: relative; }
.hero-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: var(--radius-lg);
  background-color: #23262b;      /* opaque while decoding, pairs with hero */
  color: #d8dade;                 /* alt text stays legible on that backing */
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
/* thin warm edge so the photo reads as intentional against the dark hero */
.hero-figure::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  pointer-events: none;
}

/* On desktop the photo matches the height of the copy column exactly, so the
   two sides finish level and no dead space opens up beside the text. A fixed
   aspect ratio can't do this — the copy height changes with the viewport. */
@media (min-width: 1025px) {
  .hero-grid { align-items: stretch; }
  /* The image is taken out of the height calculation (absolute, no intrinsic
     ratio) so the row is sized purely by the copy. The photo then fills
     whatever height the copy ends up being — always level, never a gap. */
  .hero-figure { align-self: stretch; min-height: 360px; }
  .hero-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-inner { max-width: 720px; }
  .hero-figure img { aspect-ratio: 16/10; height: auto; }
}
@media (max-width: 640px) {
  .hero-figure img { aspect-ratio: 4/3; }
}
.hero .eyebrow { color: var(--color-orange); }
.hero h1 { color: #fff; }
.hero-tagline { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--color-orange); margin: 10px 0 18px; }
.hero p.lead { color: #c7c9cd; font-size: 1.08rem; max-width: 560px; margin-bottom: 30px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12); }
.trust-row .item { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: #d8dade; font-weight: 500; }
.trust-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-orange); }

.page-hero {
  padding: 170px 0 70px;
  background: var(--color-dark);
  color: #fff;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: #c7c9cd; max-width: 620px; }
.breadcrumb { font-size: 0.85rem; color: #9fa2a8; margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--color-orange); }

/* ---------- Placeholder media (swap for real photos) ---------- */
.ph {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #efece5, #ddd8ce);
  border: 1px dashed #c9c3b6;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  color: #8a8577; font-size: 0.82rem; font-weight: 500;
  overflow: hidden;
}
.ph::before { content: attr(data-label); }
.ba-slider .ba-before::before, .ba-slider .ba-after::before { content: attr(data-label); }
.ph.wide { aspect-ratio: 16/9; }
.ph.square { aspect-ratio: 1/1; }
.ph.tall { aspect-ratio: 3/4; }

/* ---------- Real photos (same footprint as the .ph placeholders) ---------- */
.media {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
  /* opaque fallback so nothing shows through while the image decodes */
  background-color: #e6e2da;
  color: #4a463d;           /* alt text stays readable if an image 404s */
  font-size: 0.82rem;
}
.media.wide   { aspect-ratio: 16/9; }
.media.square { aspect-ratio: 1/1; }
.media.tall   { aspect-ratio: 3/4; }
/* Portrait that sits beside a column of text: capped so it stays in proportion
   with the copy rather than towering over it, and framed from the top so the
   face never gets cropped. */
.media.portrait {
  aspect-ratio: 4/5;
  max-width: 400px;
  width: 100%;
  margin-inline: auto;
  object-fit: cover;
  object-position: 50% 18%;
}
.service-card .media { margin-bottom: 18px; }
.gallery-item .media { aspect-ratio: 1/1; margin: 0; }

/* Captioned featured tile on the home page */
.feature-tile { margin: 0; }
.feature-tile figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  background-color: transparent;
}

/* Photos inside the before/after slider fill the frame edge to edge */
.ba-slider .ba-before img,
.ba-slider .ba-after img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ph-logo {
  width: 46px; height: 46px; border-radius: 8px; background: var(--color-dark); color: var(--color-orange);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* ---------- Trust bar ---------- */
.trust-bar { padding: 34px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-bar-track { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; justify-content: center; }
.badge {
  display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--color-text);
  padding: 10px 16px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff;
}

/* ---------- Grids / cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 26px; box-shadow: var(--shadow-card); transition: transform 220ms var(--ease-out), box-shadow 220ms;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card .icon-tile {
  width: 44px; height: 44px; border-radius: 10px; background: var(--color-orange-soft); color: var(--color-orange);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.2rem; font-weight: 700;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.94rem; }

.service-card { display: block; overflow: hidden; }
.service-card .ph { margin-bottom: 18px; border-radius: var(--radius-md); }
.service-card .tag { color: var(--color-orange); font-weight: 600; font-size: 0.82rem; }
.service-card h3 { margin: 6px 0 8px; }
.service-card .link { color: var(--color-orange); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }

/* ---------- Stats ---------- */
.stats-band { background: var(--color-dark); color: #fff; padding: 56px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats-grid .num { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--color-orange); }
.stats-grid .label { color: #c7c9cd; font-size: 0.88rem; margin-top: 6px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Before / After slider ---------- */
.ba-slider {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden;
  user-select: none; cursor: ew-resize; border: 1px solid var(--color-border);
}
.ba-slider .ba-before, .ba-slider .ba-after {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8a8577; font-weight: 600; font-size: 0.85rem; text-align: center; padding: 16px;
}
.ba-slider .ba-before { background: linear-gradient(135deg, #efece5, #ddd8ce); }
.ba-slider .ba-after { background: linear-gradient(135deg, #2a2d31, #16181b); color: #cfd2d6; overflow: hidden; }
.ba-slider .ba-after:has(img) { background: #16181b; color: #16181b; }
.ba-slider .ba-before:has(img) { background: #e6e2da; color: #e6e2da; }
.ba-slider .ba-handle {
  position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; left: 50%;
  transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.ba-slider .ba-handle::after {
  content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--color-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ba-label { position: absolute; top: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.9); color: var(--color-dark); z-index: 2; }
.ba-label.before { left: 10px; }
.ba-label.after { right: 10px; background: rgba(0,0,0,0.72); color: #fff; }
.ba-caption { margin-top: 12px; font-size: 0.92rem; color: var(--color-text-muted); text-align: center; }

/* ---------- Reviews ---------- */
.review-row { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.review-row::-webkit-scrollbar { height: 6px; }
.review-row::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.review-card { min-width: 300px; max-width: 340px; scroll-snap-align: start; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-card); }
.stars { color: var(--color-orange); letter-spacing: 2px; margin-bottom: 10px; font-size: 0.95rem; }
.review-card p.quote { color: var(--color-text); font-size: 0.94rem; margin-bottom: 14px; }
.review-name { font-weight: 600; font-size: 0.9rem; }
.review-meta { font-size: 0.8rem; color: var(--color-text-muted); }
.review-summary { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.review-summary .score { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; }

/* ---------- Guarantee band ---------- */
.guarantee-band {
  background: var(--color-orange-soft); border: 1px solid #ffd9c4; border-radius: var(--radius-lg);
  padding: 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.guarantee-band > div { flex: 1 1 320px; min-width: 0; }
.guarantee-band h3 { display: block; }
.guarantee-check { margin-right: 10px; font-size: 1.1em; line-height: 1; }

/* ---------- Service area ---------- */
.city-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.city-pill { padding: 9px 16px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.88rem; font-weight: 500; background: #fff; }

/* ---------- Gallery ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filter-tab {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff;
  font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: 160ms;
}
.filter-tab.is-active, .filter-tab:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.gallery-item .ph { aspect-ratio: 1/1; border-radius: var(--radius-md); margin: 0; }
.gallery-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-size: 0.76rem; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); opacity: 0; transition: 200ms; }
.gallery-item:hover .cap { opacity: 1; }
@media (max-width: 960px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Podcast ---------- */
.episode-card { display: flex; gap: 18px; align-items: flex-start; }
.episode-card .ph { width: 160px; flex: none; aspect-ratio: 1/1; margin: 0; }
.ep-num { color: var(--color-orange); font-weight: 700; font-size: 0.85rem; }
.ep-meta { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 6px; }

/* ---------- Contact / forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Grid items default to min-width:auto, so a control with a wide intrinsic size
   (the file input especially) refuses to shrink and pushes the form past the
   viewport on small screens. */
.form-grid > * { min-width: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--color-dark); }
.field input, .field select, .field textarea {
  padding: 13px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--color-text);
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px var(--color-orange-soft); }
.form-note { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 8px; }
.form-success { display: none; background: #eefaf0; border: 1px solid #bfe8c6; color: #1d6b2c; padding: 18px; border-radius: var(--radius-sm); font-weight: 600; }
.form-success.is-visible { display: block; }
.contact-form.is-hidden { display: none; }

/* ---------- Final CTA ---------- */
.final-cta { background: var(--color-dark); color: #fff; text-align: center; padding: 96px 0; }
.final-cta h2 { color: #fff; }
.final-cta p { color: #c7c9cd; max-width: 560px; margin: 14px auto 30px; }
.final-cta .cta-row { justify-content: center; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--color-border);
  display: none; padding: 10px 14px; gap: 10px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
.sticky-cta a { flex: 1; text-align: center; }
@media (max-width: 760px) { .sticky-cta { display: flex; } body { padding-bottom: 66px; } }
.sticky-cta.is-hidden { display: none !important; }

/* ---------- Footer ---------- */
footer { background: #0f1113; color: #c7c9cd; padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 16px; }
footer a { color: #a3a7ad; font-size: 0.9rem; display: block; margin-bottom: 10px; }
footer a:hover { color: var(--color-orange); }
.footer-bottom { border-top: 1px solid #262a2e; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: #767a80; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.list-check { margin-top: 18px; }
.list-check li { display: flex; gap: 10px; padding: 8px 0; color: var(--color-text); font-weight: 500; font-size: 0.96rem; }
.list-check li::before { content: "✓"; color: var(--color-orange); font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.container.narrow { max-width: 820px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background-color: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 54px 20px 22px;
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  background-color: #fff;
  color: var(--color-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background-color: var(--color-orange-soft);
  color: var(--color-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { background-color: var(--color-orange-soft); color: var(--color-dark); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-orange); outline-offset: -2px; }
.faq-body {
  padding: 0 22px 22px;
  background-color: #fff;
  color: var(--color-text-muted);
}
.faq-body p { color: var(--color-text-muted); margin: 0; font-size: 0.96rem; line-height: 1.65; }
/* on the tinted section background the cards keep their own white surface */
.section-alt .faq-item,
.section-alt .faq-item summary,
.section-alt .faq-body { background-color: #fff; }

/* ---------- Service area map ---------- */
.service-map {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  /* opaque surface + matching text colour so the fallback stays readable
     before tiles load and if the map library never arrives */
  background-color: #eef0f2;
  color: var(--color-text);
  z-index: 0;               /* keep Leaflet panes under the fixed nav */
}
.service-map.map-failed {
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.map-fallback {
  margin: 0; text-align: center; max-width: 46ch;
  font-size: 0.95rem; color: var(--color-text); background-color: transparent;
}
.leaflet-container { background-color: #eef0f2; font-family: var(--font-body); }
/* Standard OSM tiles are quite saturated; easing them back lets the orange
   service-area boundaries sit on top clearly. Labels stay legible. */
.leaflet-tile-pane { filter: saturate(0.55) brightness(1.03) contrast(0.96); }
/* default focus ring is a hard black box over the map; keep it visible but on-brand */
.leaflet-container:focus,
.leaflet-container:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }
.leaflet-container:focus:not(:focus-visible) { outline: none; }
.leaflet-container a { color: var(--color-orange); }
.map-hint {
  background-color: rgba(255,255,255,0.92);
  color: var(--color-text-muted);
  transition: background-color 160ms, color 160ms;
  padding: 5px 9px; border-radius: 6px;
  font-size: 0.72rem; font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.map-hint.is-active { background-color: var(--color-orange); color: #fff; }
.leaflet-tooltip {
  background-color: var(--color-dark);
  color: #fff;
  border: none; border-radius: 6px;
  font-weight: 600; font-size: 0.8rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.leaflet-tooltip-top::before { border-top-color: var(--color-dark); }
.leaflet-control-attribution {
  background-color: rgba(255,255,255,0.86) !important;
  color: var(--color-text-muted);
  font-size: 0.66rem;
}
@media (max-width: 700px) { .service-map { aspect-ratio: 4/3; } }

/* ---------- Podcast ---------- */
.podcast-hero { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.podcast-art {
  width: 190px; height: 190px; flex: none;
  border-radius: var(--radius-lg); object-fit: cover;
  background-color: #23262b; color: #d8dade;
  box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.podcast-hero > div { flex: 1 1 340px; min-width: 0; }
.podcast-tagline {
  margin-top: 8px; font-family: var(--font-head); font-weight: 700;
  color: var(--color-orange); background-color: transparent;
}
.listen-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.listen-label {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); background-color: transparent;
}
.listen-link {
  padding: 7px 14px; border-radius: 999px; font-size: 0.84rem; font-weight: 600;
  background-color: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.listen-link:hover { background-color: var(--color-orange); color: #fff; border-color: var(--color-orange); }

.episode-list { display: flex; flex-direction: column; gap: 16px; }
.episode {
  background-color: #fff; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.episode h3 {
  margin-top: 8px; font-size: 1.12rem; line-height: 1.3;
  color: var(--color-dark); background-color: transparent;
}
.episode p { margin-top: 8px; font-size: 0.94rem; color: var(--color-text-muted); }
.episode-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted);
}
.episode-meta .ep-num {
  color: var(--color-orange); background-color: var(--color-orange-soft);
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.04em;
}
.ep-dot { color: var(--color-border); }

.episode-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ep-play { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.ep-play-icon { font-size: 0.72rem; line-height: 1; }
.ep-notes {
  font-size: 0.86rem; font-weight: 600;
  color: var(--color-orange); background-color: transparent;
}
.ep-notes:hover { text-decoration: underline; }

.episode-player { display: none; }
.episode-player[data-open] { display: block; margin-top: 18px; }
.episode-player iframe {
  display: block; width: 100%; border: 0; border-radius: var(--radius-md);
  background-color: #f1f1ef;
}

@media (max-width: 640px) {
  .podcast-art { width: 132px; height: 132px; }
  .episode { padding: 20px; }
}

/* ---------- Podcast: video episodes ---------- */
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.video-episode {
  background-color: #fff; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Click-to-play thumbnail. No YouTube iframe or cookie loads until pressed. */
.video-facade {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  cursor: pointer; line-height: 0;
  background-color: #14161a; color: #e8e8e8;
}
.video-facade img {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background-color: #14161a;
}
.video-facade .video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background-color: var(--color-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 160ms var(--ease-out), background-color 160ms;
}
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-facade:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }
.video-frame { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background-color: #14161a; }
.video-body { padding: 20px 22px 22px; background-color: #fff; color: var(--color-text); }
.video-body h3 { font-size: 1.02rem; line-height: 1.35; color: var(--color-dark); }
.video-body p { margin-top: 8px; font-size: 0.92rem; color: var(--color-text-muted); }
.video-body .ep-notes { display: inline-block; margin-top: 12px; }
@media (max-width: 760px) { .video-list { grid-template-columns: 1fr; } }

/* ---------- Podcast episode pages ---------- */
.episode h3 a { color: var(--color-dark); background-color: transparent; }
.episode h3 a:hover { color: var(--color-orange); }
.episode-embed {
  display: block; width: 100%; border: 0;
  border-radius: var(--radius-md); background-color: #f1f1ef;
}
.episode-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.ep-nav {
  font-size: 0.86rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  background-color: #fff; color: var(--color-text);
  border: 1px solid var(--color-border);
}
.ep-nav:hover { background-color: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.ep-nav.all { color: var(--color-orange); }
.ep-nav.all:hover { color: #fff; }

.show-notes { margin-top: 4px; color: var(--color-text-muted); background-color: transparent; }
.show-notes p { margin-top: 12px; font-size: 0.98rem; line-height: 1.7; color: var(--color-text-muted); }
.show-notes a { color: var(--color-orange); }
.show-notes strong { color: var(--color-dark); }

.chapter-heading { font-size: 1.05rem; color: var(--color-dark); background-color: transparent; }
.chapter-list { margin: 14px 0 0; padding-left: 0; list-style: none; counter-reset: chap; }
.chapter-list li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--color-border);
  font-size: 0.94rem; color: var(--color-text);
}
.chapter-list li:first-child { border-top: 0; }
.chapter-time {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.82rem;
  color: var(--color-orange); background-color: var(--color-orange-soft);
  padding: 2px 8px; border-radius: 999px;
}

.transcript { max-width: 68ch; }
.transcript-section + .transcript-section { margin-top: 34px; }
.transcript-heading {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 1.06rem; margin-bottom: 12px;
  color: var(--color-dark); background-color: transparent;
}
.transcript p {
  margin-top: 12px; font-size: 0.97rem; line-height: 1.75;
  color: var(--color-text); background-color: transparent;
}

/* "Watch on YouTube" sits in the same listen bar but reads as its own tab,
   because it jumps to embedded video on this page rather than leaving. */
.listen-link.watch {
  display: inline-flex; align-items: center; gap: 8px;
  background-color: #fff; color: var(--color-dark);
  border-color: #fff;
}
.listen-link.watch:hover { background-color: var(--color-orange); color: #fff; border-color: var(--color-orange); }
.listen-yt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 15px; border-radius: 4px;
  background-color: #FF0000; color: #fff;
  font-size: 0.5rem; padding-left: 1px; line-height: 1;
}
.listen-link.watch:hover .listen-yt { background-color: var(--color-dark); color: #fff; }

/* anchor jump shouldn't hide the heading under the fixed nav */
#watch { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Education tabs ---------- */
.edu-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.edu-tab {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 0.88rem;
  background-color: #fff; color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.edu-tab:hover { border-color: var(--color-orange); color: var(--color-orange); }
.edu-tab.is-active {
  background-color: var(--color-dark); color: #fff; border-color: var(--color-dark);
}
.edu-tab:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }

.edu-pane {
  background-color: #fff; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.edu-pane h3 { font-size: 1.15rem; color: var(--color-dark); background-color: transparent; }
.edu-pane p {
  margin-top: 12px; font-size: 0.98rem; line-height: 1.75;
  color: var(--color-text-muted); background-color: transparent;
}
/* Every pane is in the DOM for indexing. With JS on, only the active one shows;
   with JS off the rule below never applies and all panes stay readable. */
.js-on .edu-pane { display: none; }
.js-on .edu-pane.is-active { display: block; }
.js-on .edu-pane + .edu-pane { margin-top: 0; }
.edu-pane + .edu-pane { margin-top: 14px; }
@media (max-width: 640px) { .edu-pane { padding: 22px; } }

/* ---------- Gallery lightbox ---------- */
.gallery-item.is-zoomable { cursor: zoom-in; position: relative; }
.gallery-item.is-zoomable .media { transition: transform 220ms var(--ease-out); }
.gallery-item.is-zoomable:hover .media { transform: scale(1.03); }
.gallery-item.is-zoomable:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; }
.gallery-item.is-zoomable > .media { will-change: transform; }
.gallery-grid .gallery-item { overflow: hidden; border-radius: var(--radius-md); }

body.lb-open { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 1200;   /* above the fixed nav (1000), drawer (1100) and sticky CTA (900) */
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background-color: rgba(12, 13, 15, 0.94);
  color: #fff;                     /* pairs with the dark scrim */
}
.lightbox[hidden] { display: none; }

.lb-figure {
  margin: 0; max-width: 100%; max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lb-img {
  display: block; max-width: 100%; max-height: 80vh;
  object-fit: contain; border-radius: var(--radius-md);
  background-color: #1a1c20;
}
.lb-cap {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: center;
  font-size: 0.92rem; font-weight: 600;
  color: #f2f2f2; background-color: transparent; text-align: center;
}
.lb-count { font-size: 0.8rem; font-weight: 500; color: #a9adb4; }

.lb-close, .lb-nav {
  position: absolute; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 50%;
  transition: background-color 160ms, color 160ms;
}
.lb-close:hover, .lb-nav:hover { background-color: var(--color-orange); color: #fff; border-color: var(--color-orange); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; }
.lb-close { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

@media (max-width: 640px) {
  .lightbox { padding: 6vh 3vw; }
  .lb-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-img { max-height: 66vh; }
}

/* Reviews section wrapper. The widget itself is styled by its own scoped
   rtr- stylesheet, injected with the section. */
.rv-outer { padding: var(--section-y) 0; }

/* ---------- Nav fit ----------
   Stepped down as the viewport narrows, so the bar always fits without any
   element having to shrink into another. Verified at every width from 320 to
   1920 with no overflow and no overlap. */
.nav-links a.nav-link { padding-left: 10px; padding-right: 10px; font-size: 0.93rem; }
@media (max-width: 1400px) {
  .nav-links a.nav-link { padding-left: 9px; padding-right: 9px; font-size: 0.92rem; }
}
@media (max-width: 1200px) {
  .nav-links a.nav-link { padding-left: 7px; padding-right: 7px; font-size: 0.88rem; }
  .nav-phone { font-size: 0.86rem; }
  .nav-cta { padding: 10px 14px; font-size: 0.83rem; }
}
@media (max-width: 1060px) {
  .nav-links a.nav-link { padding-left: 5px; padding-right: 5px; font-size: 0.85rem; }
  .site-nav .container { gap: 12px; }
  .nav-right { gap: 10px; }
}

/* ---------- Tap targets ----------
   WCAG 2.5.8 sets a 24x24 minimum for pointer targets. Several inline text
   links sat at 15 to 23px tall. These add vertical padding on coarse pointers
   only, so desktop density is unchanged and nothing reflows on the way. */
@media (pointer: coarse) {
  footer a {
    padding: 9px 0;
    margin-bottom: 2px;
    min-height: 24px;
  }
  .breadcrumb { line-height: 2.1; }
  .breadcrumb a { display: inline-block; padding: 5px 2px; }
  .rtr-more { padding: 8px 2px; min-height: 32px; }
  .ep-notes, .listen-link { display: inline-block; padding: 4px 0; }
  /* Any remaining link sitting inline inside body copy. inline-block plus
     padding lifts the target box without breaking the text flow. */
  section p > a, .page-hero p > a, .card p > a {
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
  }
}