/* ============================================================
   HiDrLee Clinic
   Warm daylight palette, taken from the hero photograph:
   plaster walls, oak floor, her navy sweater.
   Fraunces for voice, Public Sans for reading.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper:     #faf8f4;
  --paper-2:   #f3efe8;
  --card:      #ffffff;
  --rule:      rgba(28, 39, 51, .12);
  --rule-soft: rgba(28, 39, 51, .07);

  --ink:    #1c2733;
  --body-c: #55606c;
  --quiet:  #8d8579;

  --accent:      #2f5d7c;
  --accent-deep: #24485f;
  --accent-haze: rgba(47, 93, 124, .08);

  --good:  #3f7f63;
  --watch: #b8862f;
  --high:  #b5503f;

  --pad-x: max(24px, calc((100vw - 1140px) / 2));
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must beat any author display rule.
   Without this, .nav-panel and .qz (display:flex) stay laid out while
   hidden — an invisible full-screen layer that eats scrolling and clicks. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-c);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.012em;
  line-height: 1.14;
}
h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.5rem); }
h3 { font-size: 1.16rem; font-weight: 500; line-height: 1.3; }
h4 { font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0; }
p  { margin: 0; max-width: 66ch; }

/* ── shared bits ───────────────────────────────────────────── */

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 18px;
}
.lede { font-size: clamp(1.06rem, 1.5vw, 1.25rem); color: var(--body-c); line-height: 1.6; }
.small { font-size: 14.5px; color: var(--quiet); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

section {
  padding: clamp(64px, 9vw, 118px) var(--pad-x);
  border-top: 1px solid var(--rule-soft);
}
section.flush { border-top: none; }
section:nth-of-type(even) { background: var(--paper-2); }

.stack { display: flex; flex-direction: column; gap: 20px; }
.stack.tight { gap: 12px; }
.stack.loose { gap: 36px; }

/* ── buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 10px 26px -14px rgba(47,93,124,.75);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── floating header ───────────────────────────────────────── */

header.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px clamp(18px, 3vw, 40px);
  background: none; border: none; pointer-events: none;
}
header.site-header > * { pointer-events: auto; }
body:not(.has-hero) header.site-header {
  background: rgba(250,248,244,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-lockup:hover { color: inherit; }
.brand-mark { height: 34px; width: auto; display: block; flex: none; }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  letter-spacing: -.01em; color: var(--ink); line-height: 1;
}
.brand-name b { color: var(--accent); font-weight: 600; }

.nav-toggle {
  width: 46px; height: 46px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--rule);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: background .18s ease, border-color .18s ease;
}
.nav-toggle:hover { background: #fff; border-color: var(--accent); }
.nav-toggle span {
  display: block; width: 19px; height: 1.6px; border-radius: 2px; background: var(--ink);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }

.nav-panel {
  position: fixed; inset: 0; z-index: 75;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  padding: clamp(96px, 14vh, 150px) clamp(24px, 6vw, 88px) clamp(48px, 8vh, 88px);
  background: rgba(250,248,244,.985);
  backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
  overflow-y: auto;
}
.nav-panel.is-open { opacity: 1; transform: none; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(2px, .8vh, 10px); }
.nav-panel a {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  letter-spacing: -.015em; line-height: 1.18;
  color: var(--ink); display: inline-block;
  transition: color .16s ease, transform .16s ease;
}
.nav-panel a:hover { color: var(--accent); transform: translateX(8px); }
.nav-panel a.active { color: var(--accent); font-style: italic; }
.nav-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.nav-contact { font-size: 14.5px; color: var(--quiet); margin: 0; line-height: 1.6; }
.nav-contact a { font-family: var(--body); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.nav-contact a:hover { color: var(--accent); transform: none; }
html.nav-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   HERO — photograph on the left, the question on the right
   ══════════════════════════════════════════════════════════════ */

.hero-split {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 46fr 54fr;
  padding: 0; border-top: none;
  background: var(--paper);
  overflow: hidden;
}

/* A band of the photo's own wall colour sits above the image, so her head
   clears the floating logo without inventing any pixels. The band matches
   the top of the photograph, so the seam is invisible. */
/* this photograph has its own headroom, so no wall band is needed.
   object-position picks the window: far enough right that she sits at
   roughly 38% across, with the window and leaf shadow still to her left. */
.hs-art { position: relative; background: #efece5; overflow: hidden; }
.hs-art picture { display: contents; }
.hs-art img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 50%;
}
/* soft seam so the photo melts into the copy panel */
.hs-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(250,248,244,0) 58%, rgba(250,248,244,.55) 84%, rgba(250,248,244,1) 100%);
}

.hs-copy {
  display: flex; align-items: center;
  padding: clamp(88px, 11vh, 132px) clamp(28px, 4.4vw, 68px) clamp(56px, 8vh, 88px) clamp(22px, 3vw, 44px);
}
.hs-inner { display: flex; flex-direction: column; gap: 20px; max-width: 34rem; width: 100%; }
.hs-inner .eyebrow { margin: 0; }

.hs-copy h1 {
  font-size: clamp(1.85rem, 3.2vw, 3.05rem);
  line-height: 1.1; letter-spacing: -.018em;
}
.hs-copy h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
.hs-lede { font-size: clamp(1rem, 1.2vw, 1.13rem); color: var(--body-c); line-height: 1.55; max-width: 33rem; }

.hs-ask { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.hs-ask-q {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.hs-choices { display: flex; flex-direction: column; gap: 9px; }

.choice {
  display: flex; align-items: center; gap: 16px; text-align: left;
  width: 100%; cursor: pointer;
  font-family: var(--body);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 13px;
  padding: 15px 17px;
  box-shadow: 0 12px 30px -26px rgba(28,39,51,.6);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.choice:hover {
  border-color: var(--accent);
  background: #fff;
  transform: translateX(3px);
  box-shadow: 0 16px 34px -24px rgba(47,93,124,.65);
}
.c-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.c-t { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.c-s { font-size: 13.5px; color: var(--quiet); line-height: 1.35; }
.c-go { width: 19px; height: 19px; flex: none; color: var(--rule); transition: color .16s ease, transform .16s ease; }
.choice:hover .c-go { color: var(--accent); transform: translateX(3px); }

.hs-fine { font-size: 13px; color: var(--quiet); line-height: 1.5; margin-top: 3px; }
.hs-alt { font-size: 14.5px; color: var(--quiet); }
.hs-alt a { font-weight: 600; }

.hero-split .hero-cue { color: #b0a89b; }

/* the two service lists, directly under the hero */
.services-strip { padding-top: clamp(44px, 6vw, 70px); padding-bottom: clamp(44px, 6vw, 70px); }
.services-strip .side { width: auto; }

/* legacy full-bleed hero (kept for inner pages that still use it) */
.hero-full {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(74px, 10vh, 112px) clamp(28px, 5vw, 76px) clamp(52px, 7vh, 88px);
  border-top: none; overflow: hidden; isolation: isolate;
  background: var(--paper-2);
}
.hero-full picture { display: contents; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom; z-index: -2;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(246,243,238,0) 0%, rgba(246,243,238,0) 74%,
    rgba(246,243,238,.42) 88%, rgba(246,243,238,.94) 100%);
}

.hero-title { text-align: center; }
.hero-title h1 {
  font-size: clamp(1.6rem, 3.1vw, 2.7rem);
  line-height: 1.12; max-width: 24ch; margin-inline: auto;
}
.hero-title h1 em { font-style: italic; font-weight: 500; color: var(--accent); }

.hero-mid {
  flex: 1 1 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; padding-top: clamp(6px, 2.5vh, 34px);
}
.side {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  width: clamp(200px, 22vw, 290px);
  font-size: clamp(14px, 1.18vw, 16.5px);
  line-height: 1.42; color: var(--ink);
}
.side li { padding: 12px 0; border-top: 1px solid var(--rule); }
.side-head {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--accent);
  border: none; border-bottom: 1.5px solid var(--accent);
  padding: 0 0 11px; margin: 0 0 2px; width: 100%;
}
.side li.side-head + li { border-top: none; }
.side.right { text-align: right; }

.hero-bottom {
  margin-top: auto; align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.hero-note {
  font-family: var(--display); font-style: italic;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5;
  color: var(--body-c); margin: 0; max-width: 34ch;
}
.ht-sub { display: none; }
.hero-full .btn-ghost { background: rgba(255,255,255,.75); backdrop-filter: blur(6px); }
.hero-cue { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: #b0a89b; }
.hero-cue:hover { color: var(--accent); }
.hero-cue svg { display: block; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(4px);opacity:1} }
@media (prefers-reduced-motion: reduce) { .hero-cue svg { animation: none; } }

.hero-full + section { border-top: 1px solid var(--rule); }

/* ── grids ─────────────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ── the argument: two doors ───────────────────────────────── */

.door {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.2vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 18px 40px -30px rgba(28,39,51,.4);
  position: relative;
}
.door::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.door.a::before { background: linear-gradient(90deg, var(--accent), transparent); }
.door.b::before { background: linear-gradient(90deg, var(--quiet), transparent); }
.door h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--quiet);
}
.door .claim {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.22;
  color: var(--ink); letter-spacing: -.012em;
}
.door p { font-size: 15.5px; }

.note {
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 20px;
  font-family: var(--display); font-style: italic;
  font-size: 1.05rem; color: var(--body-c);
}

/* ── cards, tools, steps ───────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 14px 34px -28px rgba(28,39,51,.4);
}
.card p { font-size: 15.5px; }
.card.lift { border-color: rgba(47,93,124,.25); background: linear-gradient(168deg, var(--accent-haze), var(--card) 60%); }

.tool {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
}
.tool .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.tool p { font-size: 14.5px; }
.tool .metric {
  font-family: var(--mono); font-size: 12px; color: var(--quiet);
  border-top: 1px solid var(--rule-soft); padding-top: 10px; margin-top: auto;
}

.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid var(--rule-soft);
}
.step:last-child { border-bottom: none; }
.step .n { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); width: 30px; padding-top: 4px; }
.step p { font-size: 15.5px; margin-top: 5px; }

ul.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
ul.ticks li { padding-left: 24px; position: relative; font-size: 15.5px; }
ul.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }

/* ── the pair: each completes the other ────────────────────── */

.pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}

.pair-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 18px 40px -32px rgba(28,39,51,.42);
  height: 100%;
}
.pair-k {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 12px; border-bottom: 1.5px solid var(--accent);
}
.pair-card p { font-size: 15.5px; }
/* after .pair-card p, and equally specific, so the claim keeps its size */
.pair-card .pair-claim {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.18;
  color: var(--ink); letter-spacing: -.016em;
  text-wrap: balance;
}
.pair-gain {
  margin-top: auto; padding-top: 15px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14.5px; line-height: 1.55; color: var(--body-c);
}
.pair-gain b { color: var(--ink); font-weight: 600; }

.pair-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--accent); width: clamp(76px, 8vw, 120px);
}
.pair-arrow svg { width: 100%; height: auto; display: block; }
.pair-arrow span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--quiet);
  text-align: center; line-height: 1.5;
}

/* ── Google reviews ────────────────────────────────────────── */

.rev-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 4vw, 56px); flex-wrap: wrap;
}
/* let the copy shrink so the score card stays alongside it */
.rev-head > .stack { flex: 1 1 22rem; min-width: 0; }

.rev-score {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(30px, 3.4vw, 46px) clamp(38px, 4.4vw, 62px);
  border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--rule-soft);
  box-shadow: 0 22px 50px -34px rgba(28,39,51,.5);
  color: var(--ink); flex: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.rev-score:hover {
  border-color: var(--accent); transform: translateY(-3px); color: var(--ink);
  box-shadow: 0 26px 56px -32px rgba(47,93,124,.55);
}
.rev-num {
  font-family: var(--display); font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: .92;
  color: var(--ink); letter-spacing: -.03em;
}
.rev-stars { display: flex; gap: 5px; }
.rev-stars svg { width: clamp(22px, 2.2vw, 30px); height: auto; fill: #e0a12c; display: block; }
.rev-count {
  font-family: var(--mono); font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--body-c); margin-top: 4px;
}
.rev-asof { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); opacity: .8; }

.rev {
  margin: 0; display: flex; flex-direction: column; gap: 16px;
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--r-md); padding: 26px 24px;
  box-shadow: 0 14px 34px -30px rgba(28,39,51,.4);
}
.rev p {
  font-family: var(--display); font-size: 1.04rem; line-height: 1.5;
  color: var(--ink); margin: 0; text-wrap: pretty;
}
.rev cite {
  font-style: normal; margin-top: auto;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.rev cite span {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--quiet);
}

/* ── measurement read-outs ─────────────────────────────────── */

.kpis { display: flex; flex-direction: column; gap: 0; margin: 4px 0; }
.kpi {
  display: grid; grid-template-columns: minmax(150px, 12rem) 1fr; gap: 6px 22px;
  padding: 13px 0; border-top: 1px solid var(--rule-soft);
}
.kpi:last-child { border-bottom: 1px solid var(--rule-soft); }
.k-n { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent); line-height: 1.45; }
.k-s { font-size: 14.5px; color: var(--body-c); line-height: 1.5; }

/* ── the four layers ───────────────────────────────────────── */

.layer {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
}
.layer.flip > .layer-art { order: 2; }
.layer-art.bare { background: none; border: none; padding: 0; }
.layer-depth {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--quiet);
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.layer-depth b { color: var(--accent); font-weight: 500; }
.layer-depth::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.tool-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--accent); background: var(--accent-haze);
  border: 1px solid rgba(47,93,124,.22);
  padding: 6px 13px; border-radius: var(--r-pill); align-self: flex-start;
}

.photo {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
}

/* ── final CTA ─────────────────────────────────────────────── */

.final {
  background: linear-gradient(155deg, #fff 0%, var(--paper-2) 100%);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: clamp(34px, 5vw, 62px);
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
  box-shadow: 0 20px 50px -36px rgba(28,39,51,.45);
}

/* ── footer ────────────────────────────────────────────────── */

footer.site-footer {
  padding: 60px var(--pad-x) 40px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; }
footer h5 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--quiet); margin: 0 0 14px; font-weight: 500;
}
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
footer ul a { color: var(--body-c); font-size: 14.5px; }
footer ul a:hover { color: var(--accent); }
footer .addr { font-size: 14px; color: var(--body-c); line-height: 1.75; margin: 0; }
.footer-base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--quiet);
}

/* ── map ───────────────────────────────────────────────────── */

.map-frame { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.map-frame iframe { display: block; width: 100%; border: 0; filter: grayscale(.2) contrast(1.02); }

/* ── forms ─────────────────────────────────────────────────── */

.panel {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: 0 18px 44px -32px rgba(28,39,51,.4);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft);
}
.panel-head .t { font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
.panel-head .s { font-family: var(--mono); font-size: 10.5px; color: var(--quiet); letter-spacing: .14em; text-transform: uppercase; }

.bone-form label { font-weight: 500; color: var(--body-c); }
.bone-form input, .bone-form select, .bone-form textarea {
  width: 100%; font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 11px 13px;
  transition: border-color .15s ease, background .15s ease;
}
.bone-form textarea { resize: vertical; min-height: 90px; }
.bone-form input:focus, .bone-form select:focus, .bone-form textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px var(--accent-haze);
}
.bone-form input::placeholder, .bone-form textarea::placeholder { color: var(--quiet); }
.bone-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--quiet) 50%),
                    linear-gradient(135deg, var(--quiet) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}

/* ── follow us ─────────────────────────────────────────────── */

.platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.platform {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 24px 22px 22px;
  border: 1px solid var(--rule-soft); border-radius: var(--r-md);
  background: var(--card); color: var(--ink);
  box-shadow: 0 14px 34px -30px rgba(28,39,51,.4);
  transition: border-color .16s ease, transform .16s ease;
}
.platform:hover { transform: translateY(-2px); color: var(--ink); }
.platform.yt:hover { border-color: #ff4e45; }
.platform.ig:hover { border-color: #d8358a; }
.pf-icon { width: 30px; height: 30px; margin-bottom: 10px; }
.platform.yt .pf-icon { fill: #ff4e45; }
.platform.ig .pf-icon { color: #d8358a; fill: #d8358a; }
.pf-name { font-family: var(--display); font-size: 1.08rem; color: var(--ink); }
.pf-handle { font-family: var(--mono); font-size: 12px; color: var(--quiet); }

.lang-tabs {
  display: inline-flex; gap: 6px; padding: 5px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-pill); align-self: flex-start;
}
.lang-tabs button {
  font-family: var(--body); font-size: 14px; font-weight: 600;
  padding: 9px 22px; border-radius: var(--r-pill);
  border: none; background: transparent; color: var(--body-c); cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.lang-tabs button:hover { color: var(--ink); }
.lang-tabs button.active { background: var(--accent); color: #fff; }

.media-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.media-head .num { text-transform: none; letter-spacing: .02em; color: var(--body-c); }

.media-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule-soft); border-radius: var(--r-md);
  background: var(--card); padding: 12px;
  transition: border-color .16s ease, transform .16s ease;
}
.media-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.media-thumb {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-sm); background: var(--paper-2); aspect-ratio: 16 / 9;
}
.media-card.square .media-thumb { aspect-ratio: 1 / 1; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-play {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(28,39,51,.62); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(3px);
}
.media-play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-left: 13px solid #fff;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  transform: translateX(2px);
}
.media-title {
  font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.media-date { font-family: var(--mono); font-size: 11px; color: var(--quiet); margin-top: auto; }

/* ── inner-page hero clears the fixed header ───────────────── */

.hero {
  padding: clamp(48px, 7vw, 88px) var(--pad-x) clamp(56px, 8vw, 104px);
  border-top: none;
}
body:not(.has-hero) .hero { padding-top: calc(clamp(48px, 7vw, 88px) + 82px); }

/* ══════════════════════════════════════════════════════════════
   INTAKE OVERLAY
   ══════════════════════════════════════════════════════════════ */

html.qz-open { overflow: hidden; }

.qz {
  position: fixed; inset: 0; z-index: 140;
  display: flex; flex-direction: column;
  background: var(--paper);
  opacity: 0; transition: opacity .24s ease;
}
.qz.is-open { opacity: 1; }
/* a wash of the same daylight the hero photo has */
.qz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 12% 0%, rgba(47,93,124,.07), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(184,134,47,.06), transparent 70%);
}

.qz-bar {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px clamp(18px, 3vw, 40px);
}
.qz-x {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: var(--body-c);
  background: transparent; border: 1px solid var(--rule);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.qz-x:hover { background: #fff; border-color: var(--accent); color: var(--accent); }

.qz-progress { position: relative; z-index: 2; flex: none; height: 2px; background: var(--rule-soft); }
.qz-progress span {
  display: block; height: 100%; width: 20%;
  background: var(--accent);
  transition: width .34s cubic-bezier(.2,.7,.3,1);
}

.qz-stage {
  position: relative; z-index: 2;
  flex: 1 1 auto; overflow-y: auto;
  display: flex; justify-content: center;
  padding: clamp(30px, 6vh, 64px) clamp(28px, 7vw, 64px) clamp(56px, 9vh, 96px);
}
/* the inner padding guarantees breathing room even when the stage padding
   collapses to its minimum on a narrow window */
.qz-card { width: 100%; max-width: 44rem; padding-inline: clamp(0px, 2.5vw, 26px); }

/* The steps are <section> elements sitting inside a fixed overlay, so every
   global `section` rule (padding, --pad-x, border-top, the nth-of-type
   background stripe) leaks in. Cancel the lot in one place — anything added
   to `section` later is neutralised here too. */
.qz section,
.qz-step {
  padding: 0;
  border: 0;
  background: none;
}

.qz-step {
  display: flex; flex-direction: column; gap: 14px;
  animation: qzin .32s cubic-bezier(.2,.7,.3,1);
}
@keyframes qzin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qz-step { animation: none; } }

.qz-count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--quiet);
}
.qz-step h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.14; }
.qz-step h2:focus-visible { outline: none; }
.qz-help { font-size: 15.5px; color: var(--body-c); line-height: 1.55; max-width: 40rem; }

.qz-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.opt {
  position: relative; text-align: left; cursor: pointer;
  font-family: var(--body); font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 16px 52px 16px 18px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.opt:hover { border-color: var(--accent); transform: translateX(3px); box-shadow: 0 14px 30px -26px rgba(47,93,124,.7); }
.opt::after {
  content: ""; position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid var(--rule); transition: border-color .15s ease, background .15s ease;
}
.opt.on { border-color: var(--accent); background: linear-gradient(100deg, var(--accent-haze), var(--card) 62%); }
.opt.on::after {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3.5px #fff;
}
.qz-next { align-self: flex-start; margin-top: 14px; }

.qz-back {
  margin-top: 30px; align-self: flex-start; cursor: pointer;
  font-family: var(--body); font-size: 14px; color: var(--quiet);
  background: none; border: none; padding: 6px 0;
  transition: color .15s ease;
}
.qz-back:hover { color: var(--accent); }

/* contact step — the fields sit on their own panel so they aren't flush to the edge */
.qz-form {
  display: flex; flex-direction: column; gap: 16px; margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.2vw, 36px);
  box-shadow: 0 18px 44px -34px rgba(28,39,51,.42);
}
.qz-form label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.qz-form input, .qz-form select, .qz-form textarea { background: var(--paper); }
.qz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qz-opt-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }

.qz-check {
  flex-direction: row !important; align-items: flex-start; gap: 12px !important;
  font-size: 14px; line-height: 1.5; color: var(--body-c);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 16px 18px; margin-top: 4px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.qz-check:hover { border-color: var(--accent); }
.qz-check:has(input:checked) { border-color: var(--accent); background: var(--accent-haze); }
.qz-check input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.qz-legal { font-size: 12.5px; line-height: 1.55; color: var(--quiet); max-width: none; }
.qz-submit { align-self: flex-start; margin-top: 4px; }
.qz-err {
  font-size: 14px; color: var(--high);
  background: rgba(181,80,63,.07); border: 1px solid rgba(181,80,63,.25);
  border-radius: var(--r-sm); padding: 11px 14px;
}

.qz-done { align-items: flex-start; }
.qz-tick {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: var(--good); margin-bottom: 6px;
}

/* ── responsive ────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 40fr 60fr; }
}
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    grid-template-rows: 42svh auto;
    min-height: 0;
  }
  .hs-art::after {
    background: linear-gradient(180deg, rgba(250,248,244,0) 74%, rgba(250,248,244,.92) 100%);
  }
  .hs-art img { object-position: 50% 34%; }
  .hs-copy { padding: 26px clamp(22px, 6vw, 40px) clamp(40px, 7vw, 60px); align-items: flex-start; }
  .hs-inner { max-width: none; gap: 17px; }
  .hero-split .hero-cue { display: none; }
  .services-strip .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .pair { grid-template-columns: 1fr; gap: 0; }
  .pair-arrow {
    flex-direction: row; justify-content: center; align-items: center;
    gap: 18px; width: auto;
    /* the arrow is rotated, so its 74px length overflows the row box —
       this padding keeps the tips clear of both cards */
    padding: 68px 0; margin: 0;
  }
  /* stand the double-headed arrow up between the stacked cards */
  .pair-arrow svg { width: 64px; height: 24px; flex: none; transform: rotate(90deg); }
  .pair-arrow span { text-align: left; }
}
@media (max-width: 620px) {
  .services-strip .grid-2 { grid-template-columns: 1fr; gap: 26px; }
  .qz-row { grid-template-columns: 1fr; }
  .rev-head { align-items: flex-start; }
  .rev-score { align-items: flex-start; }
  .kpi { grid-template-columns: 1fr; gap: 3px; }
  .choice { padding: 14px 15px; gap: 12px; }
  .c-t { font-size: 15.5px; }
  .c-s { font-size: 13px; }
}
@media (max-width: 400px) {
  .hero-split { grid-template-rows: 34svh auto; }
}

/* ── legacy responsive ─────────────────────────────────────── */

@media (max-width: 960px) {
  .layer { grid-template-columns: 1fr; }
  .layer.flip > .layer-art { order: 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .platforms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-full { justify-content: center; }
  .hero-mid { flex-direction: column; align-items: center; gap: 20px; }
  .side { width: auto; max-width: 22rem; text-align: center; }
  .side.right { text-align: center; }
  .hero-bg { object-position: center 62%; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4, .platforms { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 4px; }
  .nav-panel { justify-content: flex-start; }
  .nav-panel a { font-size: 1.5rem; }
}