/* ============================================================
   AGC v3.0 — site chrome, pinned hero mosaic, section patterns
   Depends on brand-v3.css
   ============================================================ */

/* ---------- NAV ----------
   Chrome is nearly absent: one word for the menu, a centred wordmark,
   one phone number, one action. No seven-link bar. */
.nav {
  /* Above .menu (95): while the menu is open the wordmark must stay
     clickable as the way home, and the button must stay reachable to close. */
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(var(--u) * 26) clamp(20px, 5.2vw, 120px);
  color: var(--sand);
  transition: color .6s var(--ease), background .6s var(--ease),
              padding .6s var(--ease), backdrop-filter .6s var(--ease);
}
.nav::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,20,39,.55), rgba(7,20,39,0));
  opacity: 1; transition: opacity .6s var(--ease);
  pointer-events: none;
}
.nav.is-docked {
  padding-block: calc(var(--u) * 16);
  background: rgba(11, 29, 58, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.nav.is-docked::before { opacity: 0; }

/* Over the open menu the nav carries no ground of its own. */
body.menu-open .nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-open .nav::before { opacity: 0; }
body.menu-open .nav__side--end { opacity: 0; pointer-events: none; }

/* The nav always sits on a dark ground, so its action inverts. */
.nav .btn { color: var(--sand); border-color: var(--sand-faint); }
.nav .btn:hover { background: var(--sand); border-color: var(--sand); color: var(--navy); }

.nav__side { display: flex; align-items: center; gap: calc(var(--u) * 30); }
.nav__side--end { justify-content: flex-end; }

.nav__label {
  font-size: calc(var(--u) * 11);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.menu-btn { display: flex; align-items: center; gap: calc(var(--u) * 14); color: inherit; }
.menu-btn__bars { display: block; width: 26px; }
.menu-btn__bars span {
  display: block; height: 1px; background: currentColor;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.menu-btn__bars span + span { margin-top: 6px; width: 18px; }
.menu-btn:hover .menu-btn__bars span + span { width: 26px; }

/* Below 860px the "Close" word is hidden, so the mark itself has to say
   "close" — the two bars cross into an X. */
body.menu-open .menu-btn__bars span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
body.menu-open .menu-btn__bars span + span {
  width: 26px;
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------- LOGO LOCKUP ----------
   Per the brand book the wordmark is MONTSERRAT with wide tracking — not
   the Instrument Serif used elsewhere in v3. The logo is the one element
   that does not bend to the type system; the type system bends to it.
   The mark is inline SVG so it inherits currentColor and works in Lake
   Blue, Deep Navy, reverse white and the kitchens gold from one file. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  color: inherit;
  line-height: 1;
}
.wordmark__mark {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  flex: none;
  color: currentColor;
}
.wordmark__text { display: grid; gap: calc(var(--u) * 5); }
.wordmark__a {
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 16);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__b {
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 9.5);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lake-light);
  white-space: nowrap;
}
.on-stone .wordmark__b, .foot .wordmark__b { color: var(--lake-light); }

/* Stacked lockup — used in the footer and anywhere with vertical room. */
.wordmark--stacked { flex-direction: column; gap: calc(var(--u) * 14); text-align: center; }
.wordmark--stacked .wordmark__mark { width: calc(var(--u) * 62); height: calc(var(--u) * 62); }
.wordmark--stacked .wordmark__text { justify-items: center; }

/* ---------- FULL-SCREEN MENU ---------- */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--navy-deep);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--u) * 26) clamp(20px, 5.2vw, 120px) calc(var(--u) * 48);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-slow);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.menu__nav {
  align-self: center;
  display: grid;
  gap: calc(var(--u) * 4);
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding-block: calc(var(--u) * 12);
  scrollbar-width: none;
}
.menu__nav::-webkit-scrollbar { display: none; }
.menu__link {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 60);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--sand);
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-slow), transform .7s var(--ease-slow),
              color .4s var(--ease);
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu__item:nth-child(1) .menu__link, .menu__item:nth-child(1) .menu__sub { transition-delay: .18s; }
.menu__item:nth-child(2) .menu__link, .menu__item:nth-child(2) .menu__sub { transition-delay: .24s; }
.menu__item:nth-child(3) .menu__link, .menu__item:nth-child(3) .menu__sub { transition-delay: .30s; }
.menu__item:nth-child(4) .menu__link, .menu__item:nth-child(4) .menu__sub { transition-delay: .36s; }
.menu__item:nth-child(5) .menu__link, .menu__item:nth-child(5) .menu__sub { transition-delay: .42s; }
.menu__item:nth-child(6) .menu__link, .menu__item:nth-child(6) .menu__sub { transition-delay: .48s; }
.menu__item:nth-child(7) .menu__link, .menu__item:nth-child(7) .menu__sub { transition-delay: .54s; }
.menu__item:nth-child(8) .menu__link, .menu__item:nth-child(8) .menu__sub { transition-delay: .60s; }
.menu__item:nth-child(9) .menu__link, .menu__item:nth-child(9) .menu__sub { transition-delay: .66s; }
.menu__link:hover { color: var(--lake-light); }
.menu__item { display: block; }
.menu__sub {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8) calc(var(--u) * 26);
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 10) calc(var(--u) * 34);
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-slow), transform .7s var(--ease-slow);
}
.menu.is-open .menu__sub { opacity: 1; transform: none; }
.menu__sub a {
  font-family: "Montserrat", sans-serif; font-size: calc(var(--u) * 11); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sand-dim);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.menu__sub a:hover { color: var(--lake-light); border-color: var(--lake-light); }
/* The wordmark is the way home; say so while the menu is open. */
.wordmark { position: relative; }
.wordmark__home {
  position: absolute; left: 0; top: 100%; margin-top: calc(var(--u) * 8);
  font-family: "Montserrat", sans-serif; font-size: calc(var(--u) * 10); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sand-dim);
  opacity: 0; transition: opacity .5s var(--ease) .3s; pointer-events: none;
}
body.menu-open .wordmark__home { opacity: 1; }
.wordmark:hover .wordmark__home { color: var(--sand); }
.menu__link .idx {
  font-family: "Montserrat", sans-serif;
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.18em;
  vertical-align: super;
  opacity: .45;
  margin-right: calc(var(--u) * 16);
}
.menu__foot {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 40);
  justify-content: space-between;
  border-top: 1px solid var(--sand-faint);
  padding-top: calc(var(--u) * 26);
  color: var(--sand-dim);
}

/* ============================================================
   HERO — pinned, scroll-driven 3-D mosaic
   The section is tall; an inner sticky pane holds the camera. The
   tile field flies toward the viewer as --p goes 0 → 1, veiled in
   navy so the photographs read as texture rather than as a gallery.
   ============================================================ */
.hero { position: relative; height: 440vh; background: var(--navy-deep); }

.hero__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

.hero__stage {
  position: absolute; inset: 0;
  perspective: 1150px;
  perspective-origin: 52% 46%;
}

.hero__field {
  position: absolute;
  left: 50%; top: 50%;
  width: 146%; height: 164%;
  transform: translate(-50%, -50%) rotateX(6deg) rotateZ(-3.5deg);
  transform-style: preserve-3d;
}

.tile {
  position: absolute;
  --z: calc(var(--tz) + var(--p, 0) * 1900);
  transform: translateZ(calc(var(--z) * 1px));
  opacity: calc(
      clamp(0, (var(--z) + 1700) / 450, 1)
    - clamp(0, (var(--z) - 200) / 450, 1)
  );
  will-change: transform, opacity;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.80) contrast(1.04) brightness(.98) sepia(.10);
}
/* Near-white subjects (stone, plaster) need pulling back or they punch
   holes in the veil and the field stops reading as one atmosphere. */
.tile--light img { filter: saturate(.70) contrast(1.02) brightness(.66) sepia(.14); }

/* The veil. Without it this is a photo grid; with it, it is atmosphere. */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(7,20,39,.10) 0%, rgba(7,20,39,.58) 64%, rgba(7,20,39,.92) 100%),
    linear-gradient(to bottom, rgba(7,20,39,.74) 0%, rgba(7,20,39,.14) 32%, rgba(7,20,39,.24) 62%, rgba(7,20,39,.88) 100%);
}
/* A whisper of Lake Blue — the identifier, at ~6% ink. */
.hero__veil::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 22% 78%, rgba(13,91,170,.22), transparent 70%),
    radial-gradient(60% 46% at 76% 26%, rgba(220,210,195,.10), transparent 72%);
  mix-blend-mode: screen;
}

.hero__ui {
  position: absolute; inset: 0; z-index: 3;
  padding: calc(var(--u) * 120) clamp(20px, 5.2vw, 120px) calc(var(--u) * 56);
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--sand);
  pointer-events: none;
}
.hero__ui a, .hero__ui button { pointer-events: auto; }

.hero__caption {
  align-self: center;
  max-width: 30ch;
  font-size: calc(var(--u) * 19);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--sand);
  /* Fades as the field flies past — it belongs to the first beat only. */
  opacity: calc(1 - clamp(0, (var(--p, 0) - 0.30) / 0.22, 1));
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 40);
}

.hero__title {
  margin-left: auto;
  text-align: right;
  color: var(--sand);
}
.hero__title .d0 { color: var(--sand); display: block; }

.hero__cue {
  display: flex; flex-direction: column; gap: calc(var(--u) * 14);
  align-items: flex-start;
  opacity: calc(1 - clamp(0, var(--p, 0) / 0.14, 1));
}
.hero__cue-dot {
  width: calc(var(--u) * 42); height: calc(var(--u) * 42);
  border: 1px solid var(--sand-faint);
  border-radius: 50%;
  display: grid; place-items: center;
}
.hero__cue-dot svg { animation: cue 2.6s var(--ease-slow) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(-3px); opacity: .4; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* Progress hairline across the bottom of the pin. */
.hero__progress {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  height: 1px; width: 100%;
  background: var(--sand-faint);
}
.hero__progress::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--lake-light);
}

/* ============================================================
   SECTION PATTERNS
   ============================================================ */

/* Opening statement: one long serif sentence, centred, nothing else. */
.statement {
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
}

/* Discipline row — eyebrow / serif word / overline / prose / figure */
.discipline { align-items: end; }
.discipline__word { display: block; }
.discipline__meta {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 28);
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--u) * 18);
}
.discipline__meta div { min-width: 9ch; }
.discipline__meta dt {
  font-size: calc(var(--u) * 10);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim);
  margin-bottom: 4px;
}
.on-navy .discipline__meta dt { color: var(--sand-dim); }
.discipline__meta dd {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 26);
  line-height: 1;
  color: var(--ink);
}
.on-navy .discipline__meta dd { color: var(--sand); }

/* Numbers band — the Springs 3 / 9 / 16 move. */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 90px);
}
.figures > div { border-top: 1px solid var(--hairline); padding-top: calc(var(--u) * 26); }
.figures .eyebrow { margin-bottom: calc(var(--u) * 14); }
.figures .u-mono-num { color: var(--sand); font-size: calc(var(--u) * 62); }
.figures p:not(.u-mono-num) {
  margin-top: calc(var(--u) * 16);
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  line-height: 1.7;
  color: var(--sand-dim);
  max-width: 26ch;
}

/* Process list — numbered, hairline-separated, generous. */
.steps { border-top: 1px solid var(--hairline); }
.step {
  display: grid;
  grid-template-columns: calc(var(--u) * 90) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 70px);
  align-items: start;
  padding: calc(var(--u) * 42) 0;
  border-bottom: 1px solid var(--hairline);
}
.step__n {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 32);
  line-height: 1;
  color: var(--body-dim);
}
.on-navy .step__n { color: var(--sand-dim); }
.step h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: calc(var(--u) * 34);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.on-navy .step h3 { color: var(--sand); }

/* Closing call — a single enormous serif line on navy. */
.call { display: grid; gap: calc(var(--u) * 46); justify-items: start; }

/* Footer */
.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  padding-top: calc(var(--u) * 60);
  border-top: 1px solid var(--sand-faint);
}
.foot h4 {
  font-size: calc(var(--u) * 10);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--sand-dim);
  margin-bottom: calc(var(--u) * 18);
}
.foot ul { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 10); }
.foot a { color: var(--sand); }
.foot a:hover { color: var(--lake-light); }
.foot__legal {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 24);
  justify-content: space-between;
  margin-top: calc(var(--u) * 64);
  padding-top: calc(var(--u) * 22);
  border-top: 1px solid var(--sand-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .step { grid-template-columns: calc(var(--u) * 60) 1fr; }
  .step > .prose { grid-column: 2; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero { height: 330vh; }
  .hero__field { width: 190%; height: 170%; }
  .hero__ui { padding-top: calc(var(--u) * 130); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 34); }
  .hero__title { margin-left: 0; text-align: left; }
  .figures { grid-template-columns: 1fr; }
  .menu__link { font-size: calc(var(--u) * 44); }
  .nav__side--start .nav__label { display: none; }
}
/* The nav carries four things beside a centred wordmark. They come off in
   order — phone first, then the action — as soon as they would collide. */
@media (max-width: 1000px) {
  .nav__side--end .nav__label { display: none; }
}
@media (max-width: 700px) {
  .nav__side--end .btn { display: none; }
}
@media (max-width: 620px) {
  .nav { grid-template-columns: auto 1fr auto; }
  /* Montserrat 700 uppercase is far wider than the old serif — on a phone the
     lockup must give way to the mark. */
  .wordmark__mark { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
  .wordmark__a { font-size: calc(var(--u) * 13); letter-spacing: 0.16em; }
  .wordmark__b { font-size: calc(var(--u) * 8);  letter-spacing: 0.26em; }
  .foot { grid-template-columns: 1fr; }
  .hero__ui { padding-bottom: calc(var(--u) * 40); }
}

/* Motion-safe fallback: no fly-through, just a still veiled mosaic. */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; }
  .hero__field { transform: translate(-50%, -50%); }
  .tile { transform: none; opacity: 1; }
  .hero__caption, .hero__cue { opacity: 1; }
  .hero__cue-dot svg { animation: none; }
}

/* On a navy ground the solid action must invert, or it is a navy block
   on a navy field and reads as an outline button. */
.on-navy .btn--solid { background: var(--sand); border-color: var(--sand); color: var(--navy); }
.on-navy .btn--solid:hover { background: var(--lake-light); border-color: var(--lake-light); color: var(--navy); }

/* ============================================================
   INNER PAGE HERO
   Discipline pages get a short hero, not the fly-through: one navy
   band of type, then a full-bleed plate. Same voice, less theatre.
   ============================================================ */
.phero {
  background: var(--navy);
  /* padding-block only — a `padding` shorthand here would wipe out the
     horizontal padding .shell contributes and slam the title to the edge. */
  padding-block: calc(var(--u) * 230) calc(var(--u) * 110);
}
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 100px);
  align-items: end;
}
.phero .d0 { color: var(--sand); }

.plate {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--navy-deep);
}
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,20,39,.45), rgba(7,20,39,0) 45%);
}

/* Included / excluded columns — the scope made literal. */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); }
.scope ul { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 14); }
.scope li {
  display: grid; grid-template-columns: calc(var(--u) * 26) 1fr;
  gap: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 14);
  border-bottom: 1px solid var(--hairline);
}
.scope li span[aria-hidden] { color: var(--lake); }
.on-navy .scope li span[aria-hidden] { color: var(--lake-light); }
.scope--out li span[aria-hidden] { color: var(--body-dim); }
.on-navy .scope--out li span[aria-hidden] { color: var(--sand-dim); }

@media (max-width: 860px) {
  .phero { padding-block-start: calc(var(--u) * 200); }
  .phero__grid { grid-template-columns: 1fr; align-items: start; }
  .plate { aspect-ratio: 4 / 3; }
  .scope { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK CARDS
   These describe real delivered projects for which no closeout
   photography exists yet. Rather than dress a real job in a stock
   photograph, the card is typographic: the project is the type.
   Add `data-img` handling later — .work-card__fig is ready.
   ============================================================ */
.work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 18);
  background: var(--stone);
  padding: calc(var(--u) * 46) calc(var(--u) * 38) calc(var(--u) * 40);
  min-height: calc(var(--u) * 380);
  transition: background .6s var(--ease);
}
.on-navy .work,      .on-navy .work-card { background: var(--navy); }
.on-navy .work { background: var(--sand-faint); }
.work-card:hover    { background: var(--stone-deep); }
.on-navy .work-card:hover { background: var(--navy-soft); }

.work-card__fig { margin: calc(var(--u) * -46) calc(var(--u) * -38) 0; }
.work-card__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.work-card h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: calc(var(--u) * 40);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.on-navy .work-card h3 { color: var(--sand); }

.work-card__place {
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--lake);
}
.on-navy .work-card__place { color: var(--lake-light); }

.work-card__desc { max-width: 34ch; }
.work-card__foot {
  margin-top: auto;
  padding-top: calc(var(--u) * 22);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10);
  justify-content: space-between; align-items: baseline;
}
.work-card__brand {
  font-size: calc(var(--u) * 10);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim);
}
.on-navy .work-card__brand { color: var(--sand-dim); }
.work-card__pending {
  font-size: calc(var(--u) * 10);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--body-dim); opacity: .72;
}
.on-navy .work-card__pending { color: var(--sand-dim); }

/* Markets list */
.markets { border-top: 1px solid var(--hairline); }
.market {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 24);
  align-items: baseline;
  padding: calc(var(--u) * 26) 0;
  border-bottom: 1px solid var(--hairline);
}
.market h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: calc(var(--u) * 38);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.on-navy .market h3 { color: var(--sand); }
.market__status {
  font-size: calc(var(--u) * 10);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim);
}
.on-navy .market__status { color: var(--sand-dim); }
.market--live .market__status { color: var(--lake); }
.on-navy .market--live .market__status { color: var(--lake-light); }

.work--4 { grid-template-columns: repeat(4, 1fr); }
.work--4 .work-card h3 { font-size: calc(var(--u) * 34); }
@media (max-width: 980px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .work--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .work { grid-template-columns: 1fr; } }

/* ---------- Chip list: 113 cities without a wall of text ---------- */
.chips {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--u) * 10) calc(var(--u) * 8);
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--u) * 30);
}
.chips a {
  font-size: calc(var(--u) * 13);
  line-height: 1;
  padding: calc(var(--u) * 11) calc(var(--u) * 17);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  color: var(--body);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.on-navy .chips a { color: var(--sand-dim); }
.chips a:hover { background: var(--lake); border-color: var(--lake); color: #fff; }
.brand-kitchens .chips a:hover { color: #0D0D0D; }

/* Work cards used as links keep the card affordance. */
a.work-card { text-decoration: none; }
a.work-card h3 { transition: color .4s var(--ease); }
a.work-card:hover h3 { color: var(--lake); }
.on-navy a.work-card:hover h3 { color: var(--lake-light); }

/* FAQ accordion (v3.13) — native <details>, no JS. The question row is the
   whole summary; a thin plus at the right turns into a cross when open. */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 26) 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-size: calc(var(--u) * 28); line-height: 1.1;
  letter-spacing: -0.016em; color: var(--ink); margin: 0;
  transition: color .3s var(--ease);
}
.faq__x { position: relative; flex: 0 0 auto; width: calc(var(--u) * 14); height: calc(var(--u) * 14); transition: transform .35s var(--ease); }
.faq__x::before, .faq__x::after {
  content: ""; position: absolute; inset: 50% auto auto 0; width: 100%; height: 1px;
  background: currentColor; color: var(--body-dim); transform: translateY(-50%);
}
.faq__x::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__x { transform: rotate(45deg); }
.faq__item summary:hover h3, .faq__item[open] h3 { color: var(--lake); }
.faq__item summary:focus-visible { outline: 2px solid var(--lake); outline-offset: 4px; border-radius: 2px; }
.faq__a { padding: 0 0 calc(var(--u) * 30); max-width: 62ch; }
.faq__a p + p { margin-top: calc(var(--u) * 12); }
.on-navy .faq__item h3 { color: var(--sand); }
.on-navy .faq__item summary:hover h3, .on-navy .faq__item[open] h3 { color: var(--lake-light); }
.on-navy .faq__x::before, .on-navy .faq__x::after { color: var(--sand-dim); }
.brand-kitchens .faq__item h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq__x, .faq__item::details-content { transition: none; } }

/* Blog article body (v3.14) */
.article { max-width: 66ch; }
.article > p, .article li { font-size: calc(var(--u) * 18); line-height: 1.7; color: var(--body); }
.article > p + p, .article ul + p, .article p + ul, .article blockquote + p { margin-top: calc(var(--u) * 22); }
.article h2 {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: calc(var(--u) * 40); line-height: 1.04; letter-spacing: -0.018em; color: var(--ink);
  margin: calc(var(--u) * 56) 0 calc(var(--u) * 18);
}
.article h3 {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: calc(var(--u) * 28); line-height: 1.1; color: var(--ink);
  margin: calc(var(--u) * 40) 0 calc(var(--u) * 12);
}
.article ul { padding-left: 1.2em; }
.article li + li { margin-top: calc(var(--u) * 10); }
.article blockquote { margin: calc(var(--u) * 32) 0; padding-left: calc(var(--u) * 24); border-left: 2px solid var(--lake); }
.article blockquote p { font-family: "Instrument Serif", Georgia, serif; font-size: calc(var(--u) * 26); line-height: 1.3; color: var(--ink); }
.article strong { font-weight: 600; color: var(--ink); }

/* Scope points */
.points { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 14); }
.points li {
  display: grid; grid-template-columns: calc(var(--u) * 26) 1fr;
  padding-bottom: calc(var(--u) * 14); border-bottom: 1px solid var(--hairline);
}
.points li::before { content: "+"; color: var(--lake); }
.on-navy .points li::before { color: var(--lake-light); }

/* The brand switcher opens <main>, so it has to clear the fixed nav. */
.brandbar-wrap { padding-top: calc(var(--u) * 118); }
.brandbar-wrap + .phero { padding-block-start: calc(var(--u) * 76); }
@media (max-width: 860px) {
  .brandbar-wrap { padding-top: calc(var(--u) * 150); }
  .brandbar-wrap + .phero { padding-block-start: calc(var(--u) * 56); }
}

/* Story copy: the scene has to land before anyone reads a spec, so it is set
   larger than body text and narrower than full measure. */
.story { max-width: 62ch; }
.story p {
  font-size: calc(var(--u) * 22);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--body);
}
.on-navy .story p { color: var(--sand); }
.story p + p { margin-top: calc(var(--u) * 24); }
.story p:first-child::first-letter { /* no drop cap — kept deliberately plain */ }
.brand-kitchens .story p { font-size: calc(var(--u) * 21); }

/* Benefit cards read as a headline plus a line of copy. */
.work-card__desc { max-width: 34ch; color: var(--body-dim); }
.on-navy .work-card__desc { color: var(--sand-dim); }

/* ============================================================
   LINK VISIBILITY  (v3.3)
   The first pass hid affordance behind hover: underlines that drew
   themselves, cards with no visible target, chips that read as tags.
   On a 1,290-page site where the links ARE the navigation, that is
   the wrong trade. Links now announce themselves at rest.
   ============================================================ */

/* Underline is the resting state; hover changes colour, not presence. */
.link-u::after { transform: scaleX(1); transform-origin: left; }
.link-u:hover { color: var(--lake); }
.on-navy .link-u:hover { color: var(--lake-light); }
.link-u::before {
  content: "";
  display: inline-block;
  width: calc(var(--u) * 16); height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: calc(var(--u) * 10);
  transition: width .45s var(--ease);
}
.link-u:hover::before { width: calc(var(--u) * 26); }

/* Links inside running copy must be unmistakable. */
.prose a, .story a, .legal a, .faq a {
  color: var(--lake);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.on-navy .prose a, .on-navy .story a { color: var(--lake-light); }
.prose a:hover, .story a:hover, .legal a:hover { text-decoration-thickness: 2px; }

/* Cards: a visible target, not a mystery rectangle. */
a.work-card { position: relative; padding-bottom: calc(var(--u) * 66); }
a.work-card::after {
  content: "View \2192";
  position: absolute;
  left: calc(var(--u) * 38); bottom: calc(var(--u) * 34);
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lake);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.on-navy a.work-card::after { color: var(--lake-light); }
a.work-card:hover::after { color: var(--ink); }
.on-navy a.work-card:hover::after { color: var(--sand); }

/* Chips read as buttons, not labels. */
.chips a {
  border-color: rgba(13, 91, 170, 0.38);
  color: var(--lake);
}
.on-navy .chips a { border-color: var(--sand-faint); color: var(--sand); }
.brand-kitchens .chips a { border-color: rgba(200, 162, 99, 0.45); color: var(--lake); }

/* Breadcrumbs: actual links, visibly. */
[aria-label="Breadcrumb"] a {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--sand-faint);
}
[aria-label="Breadcrumb"] a:hover { text-decoration-color: currentColor; }

/* Footer + menu links get a resting underline too. */
.foot a { text-decoration: underline; text-underline-offset: 0.2em;
          text-decoration-color: var(--sand-faint); }
.foot a:hover { text-decoration-color: currentColor; }

/* ============================================================
   TRUST  (v3.3)
   Ratings strip, video blocks, testimonials. Ratings are rendered as
   typographic wordmarks rather than platform logo files: the real
   marks are trademarks with their own brand rules, and a wordmark set
   in our own type sits better in this system anyway. Drop real SVGs
   into .rating__mark later if licensing is cleared.
   ============================================================ */
.ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 190), 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.rating {
  background: var(--stone);
  padding: calc(var(--u) * 34) calc(var(--u) * 28);
  display: flex; flex-direction: column; gap: calc(var(--u) * 10);
  transition: background .5s var(--ease);
}
.on-navy .ratings { background: var(--sand-faint); }
.on-navy .rating { background: var(--navy); }
a.rating:hover { background: var(--stone-deep); }
.on-navy a.rating:hover { background: var(--navy-soft); }

.rating__stars {
  font-size: calc(var(--u) * 15);
  letter-spacing: 0.22em;
  color: var(--lake);
  line-height: 1;
}
.on-navy .rating__stars { color: var(--lake-light); }
.brand-kitchens .rating__stars { color: var(--lake); }

.rating__score {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 40);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.on-navy .rating__score { color: var(--sand); }
.brand-kitchens .rating__score { font-family: "Fraunces", Georgia, serif; font-weight: 600; }

.rating__mark {
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim);
}
.on-navy .rating__mark { color: var(--sand-dim); }
.rating__meta { font-size: calc(var(--u) * 12); color: var(--body-dim); }
.on-navy .rating__meta { color: var(--sand-dim); }

/* ---------- Video ---------- */
.videoblock {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-deep);
}
.videoblock img, .videoblock video { width: 100%; height: 100%; object-fit: cover; }
.videoblock img { filter: saturate(.72) brightness(.66); }
.videoblock__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
}
.videoblock__play span {
  width: calc(var(--u) * 86); height: calc(var(--u) * 86);
  border: 1px solid rgba(220,210,195,.5);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--sand);
  font-size: calc(var(--u) * 15);
  backdrop-filter: blur(3px);
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.videoblock__play:hover span { background: var(--lake); border-color: var(--lake); transform: scale(1.06); }

/* An unmistakable placeholder — it must never read as finished work. */
.videoblock--placeholder::after {
  content: attr(data-label);
  position: absolute; left: 0; bottom: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 18);
  background: var(--lake);
  color: #fff;
  font-size: calc(var(--u) * 10);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
}

/* ---------- Testimonials ---------- */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
}
.tcard { display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.tcard .videoblock { aspect-ratio: 4 / 5; }
.tcard__name {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 24); line-height: 1.05; color: var(--ink);
}
.on-navy .tcard__name { color: var(--sand); }
.brand-kitchens .tcard__name { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.tcard__meta {
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim);
}
.on-navy .tcard__meta { color: var(--sand-dim); }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
          background: var(--hairline); border-block: 1px solid var(--hairline); }
.quote { background: var(--stone); padding: calc(var(--u) * 40) calc(var(--u) * 34);
         display: flex; flex-direction: column; gap: calc(var(--u) * 18); }
.on-navy .quotes { background: var(--sand-faint); }
.on-navy .quote { background: var(--navy); }
.quote blockquote {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 27); line-height: 1.2; letter-spacing: -0.014em;
  color: var(--ink); margin: 0;
}
.on-navy .quote blockquote { color: var(--sand); }
.brand-kitchens .quote blockquote { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.quote__foot { margin-top: auto; padding-top: calc(var(--u) * 18);
               border-top: 1px solid var(--hairline); }
.quote--placeholder blockquote { color: var(--body-dim); font-style: italic; }

@media (max-width: 900px) {
  .tgrid, .quotes { grid-template-columns: 1fr; }
  .quotes { gap: 1px; }
}

/* With only two verified platforms the strip should read as a considered
   pair, not as a thin row stretched across the page. */
.ratings--2, .ratings--3 {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 210), 1fr));
  max-width: calc(var(--u) * 760);
}
.rating__mark { line-height: 1.5; }

/* ============================================================
   THE GUARANTEE  (v3.4)
   The strongest claim on the site, so it gets the strongest frame:
   a full band, the number set at display scale, and the emphasis line
   given its own weight. Lake Blue is used at full strength here —
   this is the one place on the page that earns the identifier.
   ============================================================ */
.guarantee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: center;
}
.guarantee__num {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: calc(var(--u) * 190);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--lake-light);
  display: block;
}
.brand-kitchens .guarantee__num { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.guarantee__emph {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(var(--u) * 34);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--sand);
  border-left: 2px solid var(--lake-light);
  padding-left: calc(var(--u) * 24);
}
.brand-kitchens .guarantee__emph { font-family: "Fraunces", Georgia, serif; font-weight: 600; }

.terms { border-top: 1px solid var(--hairline); margin-top: calc(var(--u) * 56); }
.terms__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(16px, 3vw, 50px);
  padding: calc(var(--u) * 26) 0;
  border-bottom: 1px solid var(--hairline);
}
.terms__row dt {
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim);
}
.on-navy .terms__row dt { color: var(--sand-dim); }
.terms__row dd { margin: 0; }

/* An unmissable flag while the legal terms are still placeholders. */
.terms--review { position: relative; }
.terms--review::before {
  content: "Terms pending legal review — do not publish this section as written";
  display: block;
  background: var(--lake);
  color: #fff;
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  margin-bottom: calc(var(--u) * 10);
}

/* Guarantee badge — a compact form for use inside other pages. */
.gbadge {
  display: inline-flex; align-items: baseline; gap: calc(var(--u) * 14);
  border: 1px solid var(--lake-light);
  border-radius: 100px;
  padding: calc(var(--u) * 14) calc(var(--u) * 26);
}
.gbadge b {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-size: calc(var(--u) * 26); color: var(--lake-light);
}
.brand-kitchens .gbadge b { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.gbadge span {
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--sand);
}

@media (max-width: 860px) {
  .guarantee, .terms__row { grid-template-columns: 1fr; }
  .guarantee__num { font-size: calc(var(--u) * 130); }
}

/* ============================================================
   HOMEPAGE FLOW  (v3.6)
   ============================================================ */
/* Plain-spoken hero: title says what we do, subhead says why it matters. */
.hero__sub {
  margin-top: calc(var(--u) * 26);
  max-width: 28ch;
  font-size: calc(var(--u) * 21);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--sand-dim);
  text-align: right;
  margin-left: auto;
}
@media (max-width: 860px) { .hero__sub { text-align: left; margin-left: 0; } }

/* Ratings + guarantee badge side by side. */
.truststrip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
}
.truststrip .ratings { border-block: 0; max-width: none; }
.gbadge--dark { border-color: var(--lake); }
.gbadge--dark b { color: var(--lake); }
.gbadge--dark span { color: var(--ink); }
.gbadge--dark:hover { background: var(--navy); border-color: var(--navy); }
.gbadge--dark:hover b, .gbadge--dark:hover span { color: var(--sand); }
@media (max-width: 860px) { .truststrip { grid-template-columns: 1fr; } }

/* How-we-work: phases on the left, the three assurances as a side column. */
.howwork { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
           gap: clamp(28px, 5vw, 90px); align-items: start; }
.assure { display: grid; gap: calc(var(--u) * 22); position: sticky; top: calc(var(--u) * 120); }
.assure a { display: block; padding: calc(var(--u) * 24) 0; border-top: 1px solid var(--hairline); }
.assure a:last-child { border-bottom: 1px solid var(--hairline); }
.assure h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
             font-size: calc(var(--u) * 28); line-height: 1.08; letter-spacing: -0.016em;
             color: var(--ink); margin-bottom: calc(var(--u) * 8); }
.assure p { font-size: calc(var(--u) * 15); color: var(--body-dim); }
.assure a:hover h3 { color: var(--lake); }
@media (max-width: 980px) { .howwork { grid-template-columns: 1fr; } .assure { position: static; } }

/* ============================================================
   SCROLL MOTION  (v3.7)
   Two behaviours only. Both are driven from the same rAF tick that
   already runs the hero, and both switch off under reduced-motion.
   ============================================================ */
/* 1. Parallax on plates and figures — --py is set by site-v3.js. */
[data-parallax] img {
  transform: translateY(calc(var(--py, 0) * 1px)) scale(1.06);
  will-change: transform;
}
/* 2. Phase progress line — --p on the steps block, 0 -> 1 as it scrolls. */
.howwork .steps { position: relative; }
.howwork .steps::before {
  content: "";
  position: absolute; left: calc(var(--u) * 12); top: 0; bottom: 0;
  width: 1px;
  background: var(--lake);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.howwork .step .step__n { transition: color .5s var(--ease); }
.howwork .step.is-past .step__n { color: var(--lake); }
@media (prefers-reduced-motion: reduce) {
  [data-parallax] img { transform: none; }
  .howwork .steps::before { transform: none; }
}

/* ============================================================
   BRAND BAR GROUND  (v3.7.1)
   On every page that opens with the brand switcher, the switcher is the
   first thing under the fixed nav — and it had no ground of its own, so
   the nav's sand type sat on the stone body and vanished. The switcher is
   always followed by a navy .phero, so its ground is navy, always.
   ============================================================ */
.brandbar-wrap { background: var(--navy); }
.brandbar-wrap .brandbar { border-bottom-color: var(--sand-faint); }
.brandbar-wrap .brandbar__label { color: var(--sand-dim); }
.brandbar-wrap .brandbar a { color: var(--sand-dim); }
.brandbar-wrap .brandbar a:hover { color: var(--lake-light); border-color: var(--lake-light); }
.brandbar-wrap .brandbar a[aria-current="page"] { color: var(--sand); border-color: var(--lake-light); }

/* ============================================================
   CONTRAST TABLE  (v3.8) — the AG Standard, side by side
   ============================================================ */
.contrast-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.contrast { width: 100%; min-width: 560px; border-collapse: collapse; }
.contrast th, .contrast td {
  padding: calc(var(--u) * 22) calc(var(--u) * 18) calc(var(--u) * 22) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top; text-align: left;
}
.contrast thead th {
  font-size: calc(var(--u) * 11); font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--body-dim); padding-top: 0;
}
.on-navy .contrast thead th { color: var(--sand-dim); }
.contrast tbody th {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: calc(var(--u) * 26); line-height: 1.05; letter-spacing: -0.016em;
  color: var(--ink); width: 22%;
}
.on-navy .contrast tbody th { color: var(--sand); }
.brand-kitchens .contrast tbody th { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.contrast td.typ { color: var(--body-dim); }
.on-navy .contrast td.typ { color: var(--sand-dim); }
.contrast td.std { color: var(--ink); }
.on-navy .contrast td.std { color: var(--sand); }
.contrast td.std::before { content: "+\00a0"; color: var(--lake); }
.on-navy .contrast td.std::before { color: var(--lake-light); }

/* ---------- Decision-aid cards (v3.9): a cue above the title, price below ---------- */
.work-card__cue {
  font-size: calc(var(--u) * 11);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lake); margin-bottom: calc(var(--u) * 4);
}
.on-navy .work-card__cue { color: var(--lake-light); }
.work-card__price { font-size: calc(var(--u) * 12); color: var(--body-dim); }
.on-navy .work-card__price { color: var(--sand-dim); }

/* ============================================================
   SERVICE-AREA MAP  (v3.10) — inline SVG, every city a real link
   ============================================================ */
.geomap-wrap { margin-bottom: calc(var(--u) * 44); }
svg.geomap { width: 100%; height: auto; display: block; overflow: visible; }
.geomap__frame { fill: none; stroke: var(--hairline); }
.geomap__caption, .geomap__county, .geomap__label {
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 500;
}
.geomap__caption { font-size: calc(var(--u) * 10); letter-spacing: .19em; text-transform: uppercase; color: var(--body-dim); }
.geomap__county  { font-size: 10px; letter-spacing: .22em; fill: var(--body-dim); opacity: .55; pointer-events: none; }
.geomap__label   { font-size: 11px; letter-spacing: .06em; fill: var(--body); opacity: 0;
                   transition: opacity .3s var(--ease); pointer-events: none; }
.geomap__city.is-labeled .geomap__label { opacity: 1; }
.geomap__hit { fill: transparent; }
.geomap__dot { fill: var(--lake); transition: transform .3s var(--ease), fill .3s var(--ease);
               transform-box: fill-box; transform-origin: center; }
.geomap__city { cursor: pointer; outline: none; }
/* The label reveals on ANY focus (screen readers, programmatic, keyboard); the
   ring is reserved for keyboard focus. */
.geomap__city:is(:hover, :focus, :focus-visible) .geomap__dot   { transform: scale(1.5); fill: var(--ink); }
.geomap__city:is(:hover, :focus, :focus-visible) .geomap__label { opacity: 1; fill: var(--ink); font-weight: 600; }
.geomap__city:focus-visible .geomap__hit { stroke: var(--lake); stroke-width: 2; }
/* Navy ground */
.on-navy .geomap__caption, .on-navy .geomap__county { fill: var(--sand-dim); }
.on-navy .geomap__label { fill: var(--sand); }
.on-navy .geomap__dot { fill: var(--lake-light); }
.on-navy .geomap__city:is(:hover, :focus, :focus-visible) .geomap__dot   { fill: var(--sand); }
.on-navy .geomap__city:is(:hover, :focus, :focus-visible) .geomap__label { fill: var(--sand); }
/* On a phone the whole map is a third the size; the invisible hit circle grows
   (CSS geometry property) so a dot is tappable without swallowing its neighbours.
   The chip list beneath remains the complete tap target on small screens. */
@media (max-width: 640px) { .geomap__hit { r: 26; } }
@media (prefers-reduced-motion: reduce) { .geomap__dot, .geomap__label { transition: none; } }

/* ---------- Map basemap layers (v3.10.1): counties, lakes — highways removed in v3.11.2 ----------
   Drawn under the dots at low contrast so the metroplex is recognisable
   without becoming GIS. All colours are the page's own variables. */
.geomap__county-shape { fill: none; stroke: var(--hairline); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.geomap__water        { fill: var(--lake); fill-opacity: .13; stroke: none; }
.on-navy .geomap__water { fill: var(--lake-light); fill-opacity: .16; }
.on-navy .geomap__county-shape { stroke: var(--sand-faint); }
.brand-kitchens .geomap__water { fill: var(--lake); }


/* ---------- Map zoom / pan (v3.11) ----------
   The SVG viewBox is driven by site-v3.js. Dots and labels counter-scale with
   --zi (1/zoom) so they stay the same size on screen; strokes are non-scaling.
   Past ~2.2x every community's name is shown. */
.geomap-wrap { position: relative; outline: none; }
.geomap-wrap:focus-visible svg.geomap { outline: 2px solid var(--lake); outline-offset: 4px; }
.geomap__bar { display: flex; align-items: center; justify-content: space-between;
               gap: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 12); }
.geomap__zoom { display: inline-flex; gap: 2px; }
.geomap__zoom button {
  width: calc(var(--u) * 34); height: calc(var(--u) * 34);
  border: 1px solid var(--hairline); border-radius: 100px; background: transparent;
  color: var(--ink); font-size: calc(var(--u) * 16); line-height: 1; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.geomap__zoom button:hover { background: var(--lake); border-color: var(--lake); color: #fff; }
.geomap__zoom button:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
.on-navy .geomap__zoom button { color: var(--sand); border-color: var(--sand-faint); }
.on-navy .geomap__zoom button:hover { background: var(--sand); border-color: var(--sand); color: var(--navy); }
.geomap__hint { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 12); color: var(--body-dim); }
.on-navy .geomap__hint { color: var(--sand-dim); }
svg.geomap { touch-action: pan-y; cursor: default; }
.geomap-wrap { position: relative; }
.geomap__toast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  background: rgba(11, 29, 58, .86); color: var(--sand);
  font-size: calc(var(--u) * 12); letter-spacing: .04em; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); white-space: nowrap;
}
.geomap__toast.is-shown { opacity: 1; }
.brand-kitchens .geomap__toast { background: rgba(13, 13, 13, .88); }
/* At rest edge labels may overhang the frame, so the SVG stays overflow:visible.
   Once zoomed the viewBox is a sub-window and everything outside it would paint
   over the page — so clip while panned. */
.geomap-wrap.is-panned svg.geomap { touch-action: none; cursor: grab; overflow: hidden; }
.geomap-wrap.is-dragging svg.geomap { cursor: grabbing; }
.geomap__dot   { transform: scale(var(--zi, 1)); }
.geomap__city:is(:hover, :focus, :focus-visible) .geomap__dot { transform: scale(calc(1.5 * var(--zi, 1))); }
.geomap__label  { font-size: calc(11px * var(--zi, 1)); }
.geomap__county { font-size: calc(10px * var(--zi, 1)); }
svg.geomap.is-zoomed .geomap__label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .geomap__zoom button { transition: none; } }