/* ============================================================
   EVANSTON SENIOR CARE GUIDE
   Read by a 55-year-old on a phone at eleven at night, after a
   bad week. Calm, serious, legible. Nothing cheerful. No stock
   photography of laughing strangers.
   ============================================================ */

:root {
  /* INK — one hue family, four weights. Never pure black. */
  --ink:        #121a1d;
  --ink-soft:   #46565b;
  --ink-faint:  #76878c;
  --ink-ghost:  #a3b1b5;

  /* SURFACE */
  --paper:      #fcfaf7;
  --paper-warm: #f5f0e8;
  --card:       #ffffff;
  --line:       #e6e0d5;
  --line-soft:  #efeae0;

  /* DEPTH */
  --deep:       #16242a;
  --deep-2:     #1d3138;
  --deep-3:     #27454e;
  --deep-soft:  #2b3f45;

  /* ACCENT — terracotta. Warm, serious, never alarming. */
  --accent:     #a8543a;
  --accent-2:   #8e4430;
  --accent-tint:#fbf2ee;
  --sage:       #5f7f76;
  --sage-tint:  #eef3f1;
  --focus:      #a8543a;

  /* ELEVATION — three steps, no more */
  --e1: 0 1px 2px rgba(18,26,29,.04), 0 1px 3px rgba(18,26,29,.04);
  --e2: 0 2px 4px rgba(18,26,29,.04), 0 12px 28px rgba(18,26,29,.06);
  --e3: 0 4px 10px rgba(18,26,29,.06), 0 28px 64px rgba(18,26,29,.10);
  --shadow-sm: var(--e1);
  --shadow:    var(--e2);
  --shadow-lg: var(--e3);

  /* RHYTHM */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22,.68,.26,1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1.15em; }
em { font-style: italic; }
strong { font-weight: 600; }

.wrap { width: min(1080px, 88vw); margin: 0 auto; }
.narrow { width: min(680px, 88vw); }
.narrow-p { max-width: 62ch; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--deep); color: #fff; padding: 14px 22px;
  border-radius: 0 0 10px 0; font-size: 17px; text-decoration: none;
}
.skip:focus { left: 0; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  background: var(--deep);
  color: #f3efe8;
  overflow: hidden;
  padding: clamp(72px, 13vw, 150px) 0 clamp(64px, 11vw, 120px);
}

/* A slow warm light, top-right. No image, no weight. */
.hero__glow {
  position: absolute;
  top: -35%; right: -20%;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle at center,
    rgba(168,84,58,.34) 0%,
    rgba(168,84,58,.13) 38%,
    rgba(168,84,58,0) 68%);
  pointer-events: none;
}
.hero__inner { position: relative; }

.kicker {
  font-size: 14px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #a9bcb6;
  font-weight: 500;
  margin: 0 0 30px;
}

.hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: clamp(38px, 7.4vw, 86px);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0 0 34px;
  max-width: 19ch;
}
.hero__title em {
  color: #e8b9a6;
  font-weight: 300;
}

.hero__lede {
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.6;
  color: #cfd8d5;
  max-width: 58ch;
  margin-bottom: 1.1em;
}
.hero__lede--tight { color: #aebcb8; font-size: clamp(17px, 2vw, 20px); }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 40px 0 26px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 18px; font-weight: 500;
  min-height: 62px; padding: 0 34px;
  border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 10px rgba(168,84,58,.3);
}
.btn--primary:hover { background: #944630; transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: #dbe3e0;
  border-color: rgba(219,227,224,.34);
}
.btn--ghost:hover { border-color: #dbe3e0; }

.hero__meta { font-size: 16px; color: #8da09b; margin: 0; }

/* ---------------- BANDS ---------------- */
.band { padding: clamp(64px, 10vw, 120px) 0; }
.band--quiet { background: var(--paper-warm); }
.band--dark { background: var(--deep); color: #eee9e1; }

.eyebrow {
  font-size: 13.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 16px;
}
.eyebrow--light { color: #e8b9a6; }

.h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0 0 30px;
  max-width: 26ch;
}
.h2--light { color: #f3efe8; }

.pull {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1.42;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 1.1em;
}

/* ---------------- FOUR LEVELS ---------------- */
.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.level {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 32px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.level:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.level__n {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px; letter-spacing: .1em;
  color: var(--accent); margin: 0 0 14px; font-weight: 600;
}
.level__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px; font-weight: 400; line-height: 1.2;
  margin: 0 0 10px; letter-spacing: -.01em;
}
.level__for {
  font-size: 18px; color: var(--sage); font-weight: 500;
  margin: 0 0 18px;
}
.level p { font-size: 17.5px; color: var(--ink-soft); }
.level__tell {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px; color: var(--ink);
}
.level__tell strong { color: var(--accent); }

.aside {
  margin-top: 34px;
  background: var(--card);
  border-left: 5px solid var(--sage);
  border-radius: 0 16px 16px 0;
  padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.aside__label {
  font-size: 13.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sage); font-weight: 600; margin: 0 0 12px;
}
.aside p:last-child { margin: 0; color: var(--ink-soft); font-size: 17.5px; }

/* ---------------- ASSESSMENT ---------------- */
.quiz__intro {
  font-size: 18.5px; color: #b9c6c2; max-width: 56ch; margin-bottom: 36px;
}

.quiz {
  background: #fdfcfa;
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-lg);
}

.q__bar {
  height: 4px; background: var(--line); border-radius: 999px;
  overflow: hidden; margin-bottom: 26px;
}
.q__fill {
  height: 100%; background: var(--accent); border-radius: 999px;
  transition: width .32s cubic-bezier(.4,0,.2,1);
}
.q__count {
  font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 14px;
}
.q__text {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 400; line-height: 1.25; letter-spacing: -.015em;
  margin: 0 0 10px;
}
.q__help { font-size: 17px; color: var(--ink-faint); margin: 0 0 26px; }

.opts { display: grid; gap: 12px; }
.opt {
  font: inherit; font-size: 18px; text-align: left;
  min-height: 70px; padding: 16px 24px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 15px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.opt:hover {
  border-color: var(--accent); background: #fdf6f3;
  transform: translateX(3px);
}

.q__back {
  font: inherit; font-size: 16.5px; background: none; border: none;
  color: var(--ink-faint); cursor: pointer; padding: 18px 2px 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.q__back:hover { color: var(--ink); }

/* ---- result ---- */
.res__label {
  font-size: 13.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 12px;
}
.res__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(32px, 5.2vw, 52px);
  font-weight: 400; line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 18px;
}
.res__summary { font-size: clamp(19px, 2.3vw, 22px); line-height: 1.52; }

/* Jump links for the two blocks that moved below the form. Costs and
   evaluation questions stayed in the page; this is how they stay one
   click away rather than one scroll away. Borrows the .wp__compare
   link treatment so no new visual language is introduced. */
/* The form is the primary call to action on every result page as of
   2026-10-17: the three outbound Westminster links were removed, so
   this block carries the whole action. Raised surface, accent edge,
   and a heading a size up — enough to read as the next step without
   shouting over the educational content above it. */
.plan--primary {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage-deep);
  border-radius: 16px;
  padding: 30px 32px 34px;
  margin: 34px 0;
}
.plan--primary .plan__h { font-size: clamp(21px, 2.6vw, 25px); }
.plan__notbooking {
  margin: 0 0 22px; font-size: 16.5px; line-height: 1.5;
  color: var(--ink);
}
.plan--primary .plan__submit {
  width: 100%; min-height: 54px; font-size: 18px; margin-top: 4px;
}
@media (max-width: 620px) {
  .plan--primary { padding: 22px 18px 26px; border-radius: 13px; margin: 26px -4px; }
  .plan--primary .plan__row { display: block; }
  .plan--primary .plan__field { margin-bottom: 14px; }
  .plan__notbooking { font-size: 16px; }
}

.res__jump {
  margin: 14px 0 0; font-size: 16px; color: var(--ink-faint);
}
.res__jump a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
}
.res__jump a:hover { text-decoration-color: var(--sage-deep); }

.res__why {
  background: var(--paper-warm);
  border-radius: 15px; padding: 24px 28px; margin: 26px 0;
}
.res__why-label {
  font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sage); font-weight: 600; margin: 0 0 10px;
}
.res__why p { margin: 0; font-size: 17.5px; color: var(--ink-soft); }

.res__h {
  font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 30px 0 12px;
}
.res__list { margin: 0; padding-left: 24px; font-size: 17.5px; color: var(--ink-soft); }
.res__list li { margin-bottom: 9px; }

.res__cost {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  margin: 28px 0 8px; padding: 22px 26px;
  background: var(--deep); color: #eee9e1; border-radius: 15px;
}
.res__cost-fig {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 3.4vw, 32px); font-weight: 400;
}
.res__cost-note { font-size: 16px; color: #a9bcb6; width: 100%; margin: 0; }

.res__also {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line);
}
.res__also-item {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.res__also-item:last-child { border-bottom: none; }
.res__also-name { font-weight: 600; font-size: 18px; }
.res__also-why { font-size: 16.5px; color: var(--ink-faint); }

.res__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn--dark { background: var(--deep); color: #fff; }
.btn--dark:hover { background: #0e1719; }
.btn--line {
  background: #fff; color: var(--ink); border-color: var(--line);
}
.btn--line:hover { border-color: var(--ink-faint); }

.res__fine {
  margin: 28px 0 0; font-size: 15.5px; line-height: 1.6;
  color: var(--ink-faint);
}

.quiz__privacy {
  font-size: 16px; color: #8da09b; margin: 24px 0 0; text-align: center;
}

/* ---------------- COSTS ---------------- */
.costs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin: 44px 0 30px;
}
.cost {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.cost--flag { border-color: var(--sage); background: #f7faf8; }
.cost__level {
  font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 14px;
}
.cost__fig {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(26px, 3.2vw, 34px); font-weight: 400;
  line-height: 1.1; margin: 0 0 8px; letter-spacing: -.02em;
}
.cost__fig span { color: var(--ink-faint); padding: 0 2px; }
.cost__per { font-size: 15.5px; color: var(--accent); margin: 0 0 14px; font-weight: 500; }
.cost__note { font-size: 16.5px; color: var(--ink-soft); margin: 0; }

.fine {
  max-width: 68ch; font-size: 17px; color: var(--ink-soft);
  padding-top: 8px;
}

/* ---------------- TOUR QUESTIONS ---------------- */
.asks {
  counter-reset: ask; list-style: none;
  margin: 44px 0 30px; padding: 0;
  columns: 2; column-gap: 40px;
}
.asks li {
  counter-increment: ask;
  position: relative;
  padding: 0 0 20px 46px;
  font-size: 18px; color: var(--ink);
  break-inside: avoid;
}
.asks li::before {
  content: counter(ask, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px; font-weight: 600; color: var(--accent);
}

/* ---------------- FOOTER ---------------- */
.foot {
  background: var(--deep); color: #9fb0ac;
  padding: 56px 0 70px; font-size: 16.5px;
}
.foot__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px; color: #f3efe8; margin: 0 0 10px; font-weight: 400;
}
.foot p { max-width: 62ch; }
.foot__fine { font-size: 15px; color: #7b8c88; margin: 18px 0 0; }

/* ---------------- REVEAL ON SCROLL ---------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 860px) {
  .asks { columns: 1; }
}
@media (max-width: 620px) {
  body { font-size: 18px; }
  .hero { padding-top: 56px; }
  .hero__title { max-width: none; }
  .btn { width: 100%; }
  .hero__actions { gap: 12px; }
  .level { padding: 28px 24px 26px; }
  .res__cost { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .level:hover, .opt:hover, .btn:hover { transform: none; }
  .q__fill { transition: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #2d3b3f; --ink-faint: #4a5a5f; --line: #b9b1a3; }
}

/* ---------------- SOURCES & METHODOLOGY ---------------- */
/* Understated on purpose. Present for anyone who checks, invisible
   to anyone who does not. Never competes with the funnel. */
.src {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 4px;
}
.src__toggle {
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; list-style: none;
  padding: 22px 26px;
  font-size: 18px; font-weight: 600; color: var(--ink);
}
.src__toggle::-webkit-details-marker { display: none; }
.src__toggle::before {
  content: "+ "; color: var(--accent); font-weight: 600;
}
.src[open] .src__toggle::before { content: "‘2 "; }
.src__hint {
  font-size: 16px; font-weight: 400; color: var(--ink-faint);
  padding-left: 1.1em;
}
.src__body { padding: 4px 26px 28px; }
.src__h {
  font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 24px 0 10px;
}
.src__body p { font-size: 17px; color: var(--ink-soft); }
.src__body code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--paper-warm);
  padding: 2px 6px; border-radius: 5px;
}
.src__list { margin: 0; padding-left: 22px; font-size: 17px; color: var(--ink-soft); }
.src__list li { margin-bottom: 12px; }
.src__links li { margin-bottom: 18px; }
.src__links a {
  display: block; color: var(--ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.src__links a:hover { text-decoration-color: var(--accent); }
.src__links span {
  display: block; font-size: 16px; color: var(--ink-faint); margin-top: 3px;
}
.src__updated {
  margin: 26px 0 0; font-size: 15.5px; color: var(--ink-faint);
  padding-top: 18px; border-top: 1px solid var(--line);
}
.foot__link { color: #cfd8d5; text-decoration: underline; text-underline-offset: 3px; }
.foot__link:hover { color: #fff; }


/* ============================================================
   PRODUCT LAYER
   Navigation, hero system, surface refinement. Loaded after the
   base sheet so it refines rather than replaces.
   ============================================================ */

/* ---------------- NAV ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252,250,247,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(252,250,247,.94);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--nav-h);
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--deep);
}
.brand__mark { display: inline-flex; color: var(--accent); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.brand__sub {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links > a {
  font-size: 15.5px; color: var(--ink-soft); text-decoration: none;
  font-weight: 500; transition: color .16s var(--ease);
}
.nav__links > a:hover { color: var(--ink); }
.nav__cta {
  background: var(--deep); color: #fff !important;
  padding: 11px 20px; border-radius: 999px; font-size: 15px !important;
  box-shadow: var(--e1);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.nav__cta:hover { background: var(--accent); transform: translateY(-1px); }

/* reading-progress hairline */
.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), #c9765b);
  transition: width .1s linear;
}

@media (max-width: 880px) {
  .nav__links > a:not(.nav__cta) { display: none; }
  .brand__sub { display: none; }
}

/* ---------------- HERO SYSTEM ---------------- */
.hero {
  background: linear-gradient(168deg, var(--deep) 0%, var(--deep-2) 62%, var(--deep-3) 100%);
  padding: clamp(60px, 9vw, 116px) 0 clamp(52px, 8vw, 92px);
}
/* faint architectural grid — structure, not decoration */
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 28% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 28% 0%, #000 18%, transparent 76%);
}
.kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.kicker__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #e8b9a6;
  box-shadow: 0 0 0 4px rgba(232,185,166,.16);
}
.hero__title { margin-bottom: 26px; }
.hero__lede { margin-bottom: 0; }
.hero__actions { margin: 36px 0 44px; }

.btn { gap: 10px; font-weight: 500; letter-spacing: -.005em; }
.btn__arrow { transition: transform .2s var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }
.btn--primary {
  background: linear-gradient(180deg, #b25c41, var(--accent));
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 8px 22px rgba(168,84,58,.32);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #a04f36, var(--accent-2));
}

/* trust strip — four facts, no persuasion */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin: 0; padding: 0; list-style: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md); overflow: hidden;
}
.trust li {
  background: rgba(255,255,255,.03);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
}
.trust strong { font-size: 16px; color: #f1ece4; font-weight: 600; }
.trust span { font-size: 14px; color: #93a7a4; }
@media (max-width: 760px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- SURFACE REFINEMENT ---------------- */
.level, .cost, .aside, .quiz, .src { border-color: var(--line-soft); }

.level {
  position: relative; overflow: hidden;
  box-shadow: var(--e1);
  border-radius: var(--r-lg);
}
/* a hairline of accent that grows on hover — engineered, not bouncy */
.level::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .34s var(--ease);
}
.level:hover::after { transform: scaleY(1); }
.level:hover { transform: none; box-shadow: var(--e2); border-color: var(--line); }

.level__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-tint); color: var(--accent);
  font-size: 13px; letter-spacing: 0; margin-bottom: 16px;
}
.level__for { color: var(--sage); }
.level__tell { border-top-color: var(--line-soft); }

.aside { border-radius: var(--r-lg); border-left-width: 4px; box-shadow: var(--e1); }

/* ---------------- ASSESSMENT ---------------- */
.band--dark {
  background: linear-gradient(170deg, var(--deep-2) 0%, var(--deep) 100%);
}
.quiz {
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--e3);
  border-radius: var(--r-xl);
}
.q__bar { background: var(--line-soft); height: 3px; }
.q__fill { background: linear-gradient(90deg, var(--accent), #c9765b); }
.opt {
  border-color: var(--line-soft);
  box-shadow: var(--e1);
  border-radius: var(--r-md);
  transition: border-color .16s var(--ease), background .16s var(--ease),
              box-shadow .16s var(--ease), transform .14s var(--ease);
}
.opt:hover {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: var(--e2); transform: translateX(4px);
}
.res__why { background: var(--sage-tint); border-radius: var(--r-md); }
.res__cost {
  background: linear-gradient(145deg, var(--deep-2), var(--deep));
  border-radius: var(--r-md);
}
.res__also-item { border-bottom-color: var(--line-soft); }

/* ---------------- COSTS ---------------- */
.cost { box-shadow: var(--e1); border-radius: var(--r-lg); }
.cost--flag { border-color: var(--sage); background: var(--sage-tint); }
.cost__fig { letter-spacing: -.03em; }

/* ---------------- TOUR LIST ---------------- */
.asks li::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--card); border: 1px solid var(--line-soft);
  top: -1px;
}

/* ---------------- FOOTER ---------------- */
.foot { background: var(--deep); padding-top: 50px; }
.foot__name { letter-spacing: -.01em; }

/* ---------------- MOTION ---------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .nav__progress { display: none; }
  .level::after { transition: none; }
  .opt:hover, .nav__cta:hover, .btn--primary:hover .btn__arrow { transform: none; }
}

/* ---------------- STICKY-NAV CORRECTIONS ----------------
   A sticky bar hides whatever an anchor jumps to. Every target
   reserves its own height, so nothing lands underneath it. */
section[id], header[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }

/* Cards size to their content instead of stretching to the tallest
   sibling, which was leaving dead space under the short ones. */
.costs { align-items: start; }
.levels { align-items: start; }

/* The cost band sat on too much empty space below the fine print. */
#cost .fine { margin-bottom: 0; }

/* ---------------- NAV ON SMALL SCREENS ----------------
   At 390px the wordmark and the action were both wrapping, which
   doubled the bar height and pushed the hero off the fold. Both
   are held on one line and the action shortens. */
.nav__cta, .brand__name { white-space: nowrap; }

@media (max-width: 560px) {
  :root { --nav-h: 60px; }
  .brand { gap: 9px; }
  .brand__name { font-size: 16px; }
  .brand__mark svg { width: 28px; height: 28px; }
  .nav__cta { padding: 9px 16px; font-size: 14.5px !important; }
  .nav__cta::after { content: ""; }
  .nav__inner { gap: 10px; }
}

/* The hero action was wrapping too. Give it room, then let it shrink. */
@media (max-width: 420px) {
  .btn { font-size: 17px; padding: 0 24px; }
  .hero__actions .btn--primary { justify-content: space-between; }
}
.nav__cta-short { display: none; }
@media (max-width: 560px) {
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
}


/* ============================================================
   EDITORIAL LAYER
   Pacing, whitespace, and the four care categories. The page
   should breathe, not stack.
   ============================================================ */

/* ---------------- HERO: three-second comprehension ----------------
   One claim, one sentence of explanation, one action. Nothing else
   competes with the button. */
.hero__title {
  font-size: clamp(40px, 6.6vw, 76px);
  line-height: 1.05;
  max-width: 16ch;
  margin-bottom: 28px;
}
.hero__lede {
  font-size: clamp(19px, 2.1vw, 23px);
  max-width: 46ch;
  color: #c7d2cf;
}
.hero__actions { margin: 42px 0 20px; }
.btn--xl {
  min-height: 70px; padding: 0 40px; font-size: 19px; font-weight: 600;
}
.hero__meta { font-size: 16.5px; color: #8fa3a0; }

/* ---------------- TRUST STRIP: editorial, not badges ---------------- */
.strip {
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.strip__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 42px; margin: 0; padding: 20px 0; list-style: none;
}
.strip__list li {
  position: relative;
  font-size: 15px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.strip__list li + li::before {
  content: ""; position: absolute; left: -22px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--line); transform: translateY(-50%);
}
@media (max-width: 680px) {
  .strip__list { gap: 8px 22px; justify-content: flex-start; font-size: 14px; }
  .strip__list li { font-size: 13.5px; }
  .strip__list li + li::before { left: -13px; }
}

/* ---------------- SECTION RHYTHM ---------------- */
.band { padding: clamp(74px, 11vw, 148px) 0; }
.band--air { background: var(--paper); }
.band--tight { padding: clamp(56px, 8vw, 104px) 0; }

/* A measured lead-in, never full-bleed paragraphs. */
.lead { max-width: 62ch; margin-bottom: clamp(44px, 6vw, 76px); }
.lead__p {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}
.h2 { margin-bottom: 22px; }

/* ---------------- FOUR CARE CATEGORIES ----------------
   Major navigation elements. Big, quiet, confident. */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.cat {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(32px, 3.4vw, 44px) clamp(28px, 3vw, 38px) clamp(34px, 3.4vw, 42px);
  box-shadow: var(--e1);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease);
}
.cat:hover {
  box-shadow: var(--e2);
  border-color: var(--line);
  transform: translateY(-2px);
}
.cat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 18px;
  background: var(--accent-tint); color: var(--accent);
  margin-bottom: 26px;
}
.cat:nth-child(2) .cat__icon { background: var(--sage-tint); color: var(--sage); }
.cat:nth-child(3) .cat__icon { background: var(--accent-tint); color: var(--accent); }
.cat:nth-child(4) .cat__icon { background: var(--sage-tint); color: var(--sage); }

.cat__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(26px, 2.6vw, 31px);
  font-weight: 400; line-height: 1.15; letter-spacing: -.015em;
  margin: 0 0 14px;
}
.cat__desc {
  font-size: 18.5px; line-height: 1.55; color: var(--ink);
  margin: 0 0 18px; max-width: 32ch;
}
.cat__tell {
  font-size: 16.5px; line-height: 1.6; color: var(--ink-faint);
  margin: 0; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  max-width: 34ch;
}

/* ---------------- ASIDE ---------------- */
.aside {
  margin-top: clamp(34px, 4vw, 54px);
  padding: clamp(28px, 3vw, 38px) clamp(28px, 3vw, 40px);
  background: var(--paper-warm);
  border: none; border-left: 3px solid var(--sage);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: none;
  max-width: 76ch;
}
.aside p:last-child { font-size: 17.5px; }

/* ---------------- MEASURE CONTROL ----------------
   Paragraphs never stretch the full browser width. */
.band p { max-width: 68ch; }
.narrow-p, .fine { max-width: 62ch; }
.pull { max-width: 24ch; font-size: clamp(25px, 3.4vw, 38px); }
#about p, .src__body p { max-width: 64ch; }

/* ---------------- COSTS: less boxed, more editorial ---------------- */
.costs { gap: clamp(16px, 2vw, 22px); margin-top: clamp(40px, 5vw, 60px); }
.cost { padding: clamp(26px, 2.8vw, 34px); }

/* ---------------- TOUR QUESTIONS ---------------- */
.asks { margin-top: clamp(40px, 5vw, 58px); column-gap: clamp(32px, 5vw, 64px); }
.asks li { font-size: 17.5px; }

/* ---------------- ASSESSMENT BAND ---------------- */
#assessment .quiz__intro { max-width: 52ch; }

/* ---------------- SMALL SCREENS: exceptional clarity ---------------- */
@media (max-width: 620px) {
  .band { padding: clamp(56px, 13vw, 84px) 0; }
  .cat { padding: 30px 26px 32px; border-radius: var(--r-lg); }
  .cat__icon { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 22px; }
  .cat__name { font-size: 25px; }
  .cat__desc { font-size: 18px; max-width: none; }
  .cat__tell { max-width: none; }
  .lead { margin-bottom: 36px; }
  .aside { border-radius: 0 var(--r-md) var(--r-md) 0; }
  .hero__title { max-width: none; }
}

/* ---------------- CATEGORY GRID: explicit columns ----------------
   auto-fit was breaking four cards into 3 + 1 at desktop, which read
   as an accident. The four are a set and sit as a set. */
.cats { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cats { grid-template-columns: repeat(4, 1fr); } }

/* Four across needs a little more room than the reading measure. */
@media (min-width: 1080px) {
  #levels .wrap { width: min(1220px, 92vw); }
  .cat { padding: 34px 28px 36px; }
  .cat__name { font-size: 27px; }
  .cat__desc { font-size: 17.5px; max-width: none; }
  .cat__tell { font-size: 16px; max-width: none; }
  .cat__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 22px; }
}


/* ============================================================
   RESTRAINT LAYER
   Warm ivory, deep charcoal, muted sage, warm neutral accent.
   Flat colour over gradients. Borders over shadows. Smaller
   radii. No glass, no blobs, no neon.
   ============================================================ */

:root {
  --charcoal:   #1c1f1e;   /* deep charcoal, not black, not navy */
  --charcoal-2: #2a2f2d;
  --ivory:      #faf7f1;   /* warm ivory */
  --ivory-2:    #f3eee4;
  --sage:       #6b8277;   /* muted sage */
  --sage-deep:  #4f6459;
  --sage-tint:  #edf1ee;
  --clay:       #9c5a3f;   /* warm neutral accent, used sparingly */
  --clay-tint:  #f7efe9;

  --deep:   var(--charcoal);
  --deep-2: var(--charcoal-2);
  --deep-3: #35403c;
  --paper:      var(--ivory);
  --paper-warm: var(--ivory-2);
  --accent:     var(--clay);
  --accent-2:   #83472f;
  --accent-tint:var(--clay-tint);
  --focus:      var(--sage-deep);

  --line:      #e2dbcd;
  --line-soft: #ece6da;

  /* Subtle elevation only. Borders do most of the work. */
  --e1: 0 1px 2px rgba(28,31,30,.04);
  --e2: 0 1px 3px rgba(28,31,30,.05), 0 6px 18px rgba(28,31,30,.05);
  --e3: 0 2px 6px rgba(28,31,30,.06), 0 16px 40px rgba(28,31,30,.08);

  /* Restrained radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;
}

/* ---------------- NO GLASS, NO GRADIENT WASH ---------------- */
.nav {
  background: var(--ivory);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav.is-stuck { background: var(--ivory); border-bottom-color: var(--line); }
.nav__progress { background: var(--sage); }

.hero { background: var(--charcoal); }
.hero__glow {
  background: radial-gradient(circle at center,
    rgba(156,90,63,.20) 0%, rgba(156,90,63,.07) 42%, rgba(156,90,63,0) 70%);
}
.band--dark { background: var(--charcoal); }

.btn--primary {
  background: var(--clay);
  box-shadow: none;
  border-color: var(--clay);
}
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.q__fill { background: var(--sage); }
.res__cost { background: var(--charcoal-2); }

/* ---------------- SAGE AS STRUCTURE, NOT DECORATION ---------------- */
.kicker__dot { background: var(--sage); box-shadow: 0 0 0 4px rgba(107,130,119,.18); }
.hero__title em { color: #d8c4b4; }
.eyebrow { color: var(--sage-deep); }
.eyebrow--light { color: #a8bdb2; }
.level__for, .cat__tell strong { color: var(--sage-deep); }
.cat:nth-child(1) .cat__icon,
.cat:nth-child(3) .cat__icon { background: var(--sage-tint); color: var(--sage-deep); }
.cat:nth-child(2) .cat__icon,
.cat:nth-child(4) .cat__icon { background: var(--clay-tint); color: var(--clay); }
.aside { border-left-color: var(--sage); }
.cost--flag { border-color: var(--sage); background: var(--sage-tint); }
.cost__per { color: var(--sage-deep); }
.asks li::before { color: var(--sage-deep); }

/* ---------------- ACCESSIBILITY ---------------- */
:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .band--dark :focus-visible { outline-color: #c9d6cf; }

/* ============================================================
   THE ASSESSMENT IS THE PRODUCT
   It gets the most space, the clearest hierarchy, and the
   largest targets on the page.
   ============================================================ */
#assessment { padding: clamp(72px, 10vw, 136px) 0; }
#assessment .wrap { width: min(760px, 90vw); }

.quiz {
  background: var(--ivory);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-xl);
  box-shadow: var(--e3);
  padding: clamp(28px, 4.4vw, 52px);
}

/* progress: a number first, a bar second */
.q__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.q__count {
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 600; margin: 0;
}
.q__of { font-size: 14px; color: var(--ink-faint); }
.q__bar { margin-bottom: clamp(28px, 4vw, 42px); }

.q__text {
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1.22;
  margin: 0 0 12px;
  max-width: 22ch;
}
.q__help {
  font-size: 17px; color: var(--ink-faint);
  margin: 0 0 clamp(26px, 3.4vw, 36px); max-width: 44ch;
}

/* large answer buttons — never a radio, never a survey row */
.opts { gap: 14px; }
.opt {
  min-height: 76px;
  padding: 20px 26px;
  font-size: 18.5px; line-height: 1.4;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  display: flex; align-items: center;
}
.opt:hover, .opt:focus-visible {
  border-color: var(--sage-deep);
  background: var(--sage-tint);
  transform: none;
  box-shadow: none;
}
.q__back {
  margin-top: 26px; font-size: 16.5px; min-height: 44px;
  color: var(--ink-faint);
}

/* ---------------- RESULT: a document, not a widget ---------------- */
.res__label {
  font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 600; margin: 0 0 12px;
}
.res__name {
  font-size: clamp(34px, 5vw, 52px); margin: 0 0 16px;
}
.res__summary {
  font-size: clamp(18.5px, 2.1vw, 21px); color: var(--ink-soft);
  max-width: 52ch; margin: 0 0 clamp(30px, 4vw, 42px);
}
.res__block {
  padding-top: clamp(26px, 3vw, 34px);
  margin-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line-soft);
}
.res__block:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.res__h {
  font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 18px;
}

/* the reasons: question above, their own words below */
.why { list-style: none; margin: 0 0 16px; padding: 0; }
.why__item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.why__item:last-child { border-bottom: none; }
.why__q { font-size: 15px; color: var(--ink-faint); }
.why__a { font-size: 18px; color: var(--ink); font-weight: 500; }
.why__note { font-size: 15.5px; color: var(--ink-faint); margin: 0; max-width: 48ch; }

.res__list { font-size: 17.5px; }
.res__cost {
  display: block; padding: 22px 24px; margin: 24px 0 0;
  border-radius: var(--r-md);
}
.res__cost-fig { display: block; margin-bottom: 6px; }

.res__actions { margin-top: clamp(30px, 4vw, 40px); gap: 12px; }
.btn--line {
  background: var(--charcoal); color: #fff; border-color: var(--charcoal);
}
.btn--line:hover { background: #000; border-color: #000; }
.btn--quiet {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line);
}
.btn--quiet:hover { border-color: var(--ink-faint); color: var(--ink); }
.res__fine {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 15.5px; color: var(--ink-faint); max-width: 62ch;
}

/* ---------------- TOUR CHECKLIST: a real tool ---------------- */
.asks { columns: 2; column-gap: clamp(30px, 4vw, 56px); }
.asks li {
  padding: 14px 0 14px 44px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0;
}
@media (max-width: 860px) { .asks { columns: 1; } }

/* ---------------- MOBILE: 375 / 390 / 430 ---------------- */
@media (max-width: 440px) {
  body { font-size: 18px; }
  .quiz { padding: 24px 20px 28px; border-radius: var(--r-lg); }
  .q__text { font-size: 24px; max-width: none; }
  .q__help { font-size: 16.5px; max-width: none; }
  .opt { min-height: 72px; padding: 18px 20px; font-size: 17.5px; }
  .res__name { font-size: 32px; }
  .res__summary { font-size: 18px; max-width: none; }
  .why__a { font-size: 17px; }
  .res__actions .btn { width: 100%; }
  .cost { padding: 24px 22px; }
  .asks li { padding-left: 40px; font-size: 17px; }
}
@media (max-width: 380px) {
  .q__text { font-size: 22.5px; }
  .opt { padding: 16px 18px; font-size: 17px; }
  .btn--xl { font-size: 18px; padding: 0 26px; }
}

/* ============================================================
   LOCAL OPTION — disclosed, never dressed as an endorsement
   Quiet surface, no badge, no logo, no persuasion. The
   disclosure is set at full reading size, not fine print.
   ============================================================ */
.local { }
.wp {
  background: var(--sage-tint);
  border: 1px solid #dde5e1;
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 32px);
}
.wp__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 2.8vw, 29px);
  font-weight: 400; letter-spacing: -.015em;
  margin: 0 0 4px; color: var(--ink);
}
.wp__meta {
  font-size: 16.5px; color: var(--ink-faint); margin: 0 0 20px;
}
.wp__disclosure {
  font-size: 16.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 24px; padding: 18px 20px;
  background: #fff; border-left: 3px solid var(--sage-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  max-width: 62ch;
}
.wp__disclosure strong { color: var(--ink); }
.wp__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wp__actions .btn { min-height: 56px; font-size: 17px; padding: 0 24px; }
.wp__compare {
  margin: 20px 0 0; font-size: 16.5px; color: var(--ink-faint);
  max-width: 58ch;
}
.wp__compare a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
}
.wp__compare a:hover { text-decoration-color: var(--sage-deep); }

@media (max-width: 440px) {
  .wp { padding: 22px 18px; }
  .wp__actions { flex-direction: column; }
  .wp__actions .btn { width: 100%; }
  .wp__disclosure { padding: 16px 16px; font-size: 16px; }
}

/* ============================================================
   PLAN YOUR VISIT
   The only form on the site. It sits after the Westminster card
   and is styled as a quiet continuation of it, not as a
   conversion unit — no coloured panel, no urgency, no shadow.
   Senior-legible: 17px inputs, 56px tap targets, visible labels
   that never collapse into placeholders.
   ============================================================ */
.res__block.plan { border-top: 1px solid var(--line); padding-top: 28px; }

.plan__lead {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 62ch;
}

.plan__form { display: block; }

.plan__row { display: flex; gap: 16px; margin-bottom: 16px; }
.plan__field { flex: 1 1 0; display: block; min-width: 0; }
.plan__field--date { max-width: 320px; margin-bottom: 4px; }

.plan__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 7px;
}
.plan__label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}

.plan__field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 0 15px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan__field input:hover { border-color: #cfc6b4; }
.plan__field input:focus-visible {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
.plan__field--date input { min-height: 56px; }

.plan__hint {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 0 0 22px;
}

/* The consent copy is not fine print. It is the same size as the
   body text around it, because a visitor has to actually read it
   for the checkbox beneath to mean anything. */
.plan__consent-copy {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: #fff;
  border-left: 3px solid var(--sage);
  padding: 15px 17px;
  margin: 22px 0 18px;
  max-width: 64ch;
}

.plan__check {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 0 0 20px;
  cursor: pointer;
  max-width: 64ch;
}
.plan__check input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--sage-deep);
  cursor: pointer;
}
.plan__check input:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}
.plan__check span {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
}

.plan__separation {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--ink-faint);
  margin: 0 0 24px;
  max-width: 64ch;
}

.plan__submit { min-height: 56px; font-size: 17px; padding: 0 28px; }
.plan__submit:disabled { opacity: 0.55; cursor: default; }

.plan__status {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  min-height: 1px;
}
.plan__status--error { color: #8c3a28; }

.plan__done-h {
  font-family: var(--serif, Georgia, serif);
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 10px;
}
.plan__done { font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.plan__ref { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; }
.plan__ref code {
  font-size: 15px;
  background: var(--sage-tint);
  padding: 3px 7px;
  border-radius: 3px;
  word-break: break-all;
}
.plan__done-fine {
  font-size: 16px;
  line-height: 1.58;
  color: var(--ink-faint);
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 640px) {
  .plan__row { flex-direction: column; gap: 16px; }
  .plan__field--date { max-width: none; }
  .plan__submit { width: 100%; }
  .plan__lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan__field input { transition: none; }
}

/* Westminster actions repeated inside the saved-visit confirmation.
   The three ways to reach Westminster stay available after saving —
   saving a visit is not a substitute for contacting them. */
.plan__actions { margin: 20px 0 18px; }

@media (max-width: 640px) {
  .plan__actions { flex-direction: column; }
  .plan__actions .btn { width: 100%; }
}

/* Secondary half of the disclosure: the fee and data statements sit
   below the employment statement, same card, same reading size. */
.wp__disclosure--sub { margin-top: -6px; }

/* ============================================================
   COST SOURCING
   Every figure carries four things in a fixed order: what it is,
   the number, what it measures, and the survey it came from. The
   order is the credibility — a number with no provenance reads
   as a price, and a price next to Westminster reads as
   Westminster's price.
   ============================================================ */
.res__cost-label,
.cost__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}

.res__cost-fig span,
.cost__fig span {
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-left: 6px;
}

.res__cost-basis,
.cost__basis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.res__cost-basis strong,
.cost__basis strong { color: var(--ink); }

.res__cost-src,
.cost__src {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 8px 0 0;
}
.res__cost-link,
.cost__src-link {
  color: var(--sage-deep);
  font-weight: 500;
  white-space: nowrap;
  text-underline-offset: 3px;
}

.res__cost-note,
.cost__note { margin-top: 10px; }

/* The Westminster line. Quiet, present, and never omitted from a
   block that shows a statewide figure. */
.res__cost-wp,
.costs__wp {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  font-style: italic;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.costs__wp {
  grid-column: 1 / -1;
  font-style: normal;
  margin-top: 4px;
  padding-top: 14px;
}

/* Blocks that honestly have no number are not failures of layout.
   They get the same frame, without the figure. */
.res__cost--nofig,
.cost--nofig { background: var(--paper-warm); }

/* ------------------------------------------------------------------
   The result cost card sits on charcoal, not on paper. The shared
   rules above are written for the light cost section on the page and
   were washing out here — "Illinois assisted living median" is the
   sentence that stops the number being read as a price, so it cannot
   be the faintest thing on the card. Scoped overrides, light-on-dark.
   ------------------------------------------------------------------ */
.res__cost .res__cost-label { color: #93a9a2; }
.res__cost .res__cost-basis { color: #e4ded4; font-size: 16.5px; }
.res__cost .res__cost-basis strong { color: #fff; }
.res__cost .res__cost-src { color: #9db0aa; }
.res__cost .res__cost-link { color: #c9b8a6; font-weight: 600; }
.res__cost .res__cost-link:hover { color: #e0d2c2; }
.res__cost .res__cost-fig span { color: #9db0aa; }
.res__cost .res__cost-wp {
  color: #93a9a2;
  border-top-color: rgba(255, 255, 255, 0.14);
}
/* A block with no figure still has to look deliberate rather than
   empty, and keeps the same light-on-dark treatment. */
.res__cost--nofig { background: var(--charcoal-2); }
.res__cost--nofig .res__cost-basis { color: #e4ded4; }

/* An inline citation sitting inside running prose. Visible enough to
   be followed, quiet enough not to break the sentence. */
.inline-src {
  color: var(--sage-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.inline-src:hover { text-decoration-thickness: 2px; }

/* The paused state. Deliberately plain: this is an explanation, not
   a teaser. Nothing here should read as "coming soon, check back". */
.plan__paused {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 64ch;
}
.plan__paused:last-child { margin-bottom: 0; }

/* The routed line, and the limits of the request form. Both sit
   inside the Westminster card: a family should not have to leave
   the block to learn whose form it is. */
.wp__route {
  font-size: 15.5px;
  line-height: 1.58;
  color: #9db0aa;
  margin: 14px 0 0;
}
.wp__route strong { color: #e4ded4; }

.wp__fine {
  font-size: 15.5px;
  line-height: 1.58;
  color: #9db0aa;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wp__fine strong { color: #e4ded4; }

/* The "how did you hear about us" note sits outside the card,
   between it and the state directory — it is advice about their
   form, not a claim about Westminster. */
.wp__hear {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 64ch;
}
.wp__hear strong { color: var(--ink); }
.wp__hear em { color: var(--ink); font-style: italic; }

/* ============================================================
   BRAND LAYER — the logo's own palette, 2026-10-17
   ============================================================
   Colours sampled from Navy_Arch_Sunrise_Landscape_Logo.png, not
   invented: navy #001e44 -> #285e90 (the arch), forest #003c3c ->
   #006048 (the hills), sunrise #e8bb64 -> #f6cf83 (the sun), and
   the white path.

   The restraint rules above still hold and are the reason this is
   a palette change rather than a redesign: flat colour, borders
   doing structural work, small radii, no glass. What changes is
   WHICH colours, plus depth that reads as paper under light
   instead of drop shadow.

   The gold is the only action colour. It appears on the primary
   button and nowhere else, so the one thing a visitor should do
   is the one thing that glows.
   ============================================================ */

:root {
  --navy:       #001e44;
  --navy-2:     #0c3c6c;
  --navy-3:     #285e90;
  --forest:     #003c3c;
  --forest-2:   #00513f;
  --forest-3:   #006048;
  --sun:        #e8bb64;
  --sun-2:      #f6cf83;
  --sun-deep:   #c99a3f;
  --path:       #ffffff;

  /* Ink carries a trace of the navy so text and brand agree. */
  --ink:        #0b1a2b;
  --ink-soft:   #40536a;
  --ink-faint:  #6d8098;
  --ink-ghost:  #9fb0c2;

  --paper:      #fbfaf7;
  --paper-warm: #f4f1ea;
  --card:       #ffffff;
  --line:       #e0dccf;
  --line-soft:  #eeebe1;

  --charcoal:   var(--navy);
  --charcoal-2: var(--navy-2);
  --deep:       var(--navy);
  --deep-2:     var(--navy-2);
  --deep-3:     var(--navy-3);

  --sage:       var(--forest-3);
  --sage-deep:  var(--forest-2);
  --sage-tint:  #e9f1ed;

  --accent:     var(--sun);
  --accent-2:   var(--sun-deep);
  --accent-tint:#fdf4e4;
  --clay:       var(--sun);
  --clay-tint:  #fdf4e4;
  --focus:      var(--forest-2);

  /* Navy-tinted elevation. A shadow the colour of the surface it
     falls on reads as light; a grey one reads as dirt. */
  --e1: 0 1px 2px rgba(0,30,68,.05);
  --e2: 0 1px 3px rgba(0,30,68,.06), 0 8px 22px rgba(0,30,68,.06);
  --e3: 0 2px 8px rgba(0,30,68,.07), 0 22px 54px rgba(0,30,68,.10);

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;
}

/* ---------------- SURFACES ---------------- */
.nav, .nav.is-stuck { background: rgba(251,250,247,.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: var(--e1); }
.nav__progress { background: linear-gradient(90deg, var(--forest-3), var(--sun)); }

.hero { background: var(--navy); }
/* The sunrise sits low and centred, the way it does inside the arch. */
.hero__glow {
  background:
    radial-gradient(60% 46% at 50% 86%, rgba(232,187,100,.30) 0%, rgba(232,187,100,.10) 46%, rgba(232,187,100,0) 74%),
    radial-gradient(90% 70% at 50% 120%, rgba(0,96,72,.42) 0%, rgba(0,96,72,0) 68%);
}
.band--dark { background: var(--navy); }
.hero__title em { color: var(--sun-2); }
.eyebrow--light { color: #9fc6bb; }
.kicker__dot { background: var(--sun); box-shadow: 0 0 0 4px rgba(232,187,100,.20); }

/* ---------------- THE ONE ACTION COLOUR ---------------- */
.btn--primary {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,30,68,.10), 0 6px 18px rgba(201,154,63,.26);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn--primary:hover {
  background: var(--sun-2); border-color: var(--sun-2); color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,30,68,.12), 0 12px 28px rgba(201,154,63,.32);
}
.btn--primary:active { transform: translateY(0); }
.btn__arrow { transition: transform .22s var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }
.q__fill { background: linear-gradient(90deg, var(--forest-3), var(--sun)); }

/* ---------------- DEPTH, QUIETLY ---------------- */
.cat, .level, .cost { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.cat:hover, .level:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line-soft); }
.opt { transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); }
.opt:hover { border-color: var(--forest-3); background: var(--sage-tint); transform: translateX(2px); }

/* ---------------- THE FORM, AS THE DESTINATION ---------------- */
.plan--primary {
  background:
    linear-gradient(180deg, #ffffff 0%, var(--paper-warm) 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--forest-3);
  box-shadow: var(--e2);
}
.plan--primary .plan__h { letter-spacing: -.012em; }
.plan--primary .plan__submit { box-shadow: 0 2px 6px rgba(0,30,68,.12), 0 10px 26px rgba(201,154,63,.28); }
.plan__notbooking {
  background: var(--accent-tint);
  border-left: 3px solid var(--sun);
  padding: 12px 16px;
  border-radius: var(--r-sm);
}

/* ---------------- TYPE ---------------- */
.hero__title { letter-spacing: -.022em; }
.h2 { letter-spacing: -.016em; }
.res__name { letter-spacing: -.014em; }
.brand__name { letter-spacing: -.01em; }

/* The real mark in the nav, replacing the generic house glyph. */
.brand__logo { width: 34px; height: 34px; display: block; border-radius: 7px; }

/* ---------------- MOTION RESPECTS THE VISITOR ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .cat:hover, .level:hover, .btn--primary:hover { transform: none; }
}

/* The glow element is pinned top-right at 70vw square in the base
   layer, so percentage stops inside it landed in the corner rather
   than under the headline. Full-bleed it, then put the sunrise low
   and centred — the way it sits inside the arch in the mark. */
.hero__glow {
  position: absolute;
  inset: 0;
  top: 0; right: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(44% 52% at 50% 96%, rgba(232,187,100,.34) 0%, rgba(232,187,100,.12) 44%, rgba(232,187,100,0) 72%),
    radial-gradient(70% 58% at 50% 128%, rgba(0,96,72,.46) 0%, rgba(0,96,72,0) 70%);
}