/* ─────────────────────────────────────────────
   The Cleaning Lab — design system
   minimal luxury · architectural · editorial
   ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

/* ─── Tokens ─────────────────────────────── */
:root {
  /* Palette (from brand guide) */
  --navy:        #0B1F3A;
  --navy-700:    #102849;
  --navy-900:    #050F1F;
  --taupe:       #B79F92;
  --taupe-700:   #A28778;
  --taupe-muted: #8F776C;
  --beige:       #F4F1EC;
  --beige-deep:  #EBE5DB;
  --beige-light: #FAF7F2;
  --paper:       #FBFAF6;
  --ink:         #1B1A18;
  --ink-soft:    #4A4642;
  --ink-mute:    #8A847C;
  --line:        rgba(11, 31, 58, 0.10);
  --line-strong: rgba(11, 31, 58, 0.22);

  /* Typography */
  --display: "Cormorant Garamond", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Spacing scale */
  --gut:   clamp(1.25rem, 4vw, 2.25rem);
  --gut-x: clamp(1.5rem, 6vw, 4rem);
  --max:   1380px;
  --max-narrow: 980px;
  --max-prose:  680px;

  /* Motion */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --ease-q: cubic-bezier(.45, 0, .15, 1);
  --pop:    cubic-bezier(.34, 1.56, .64, 1);

  /* Header */
  --hdr-h: 96px;
}

@media (max-width: 1280px) { :root { --hdr-h: 90px; } }
@media (max-width: 1100px) { :root { --hdr-h: 84px; } }
@media (max-width: 768px)  { :root { --hdr-h: 72px; } }

/* ─── Base typography ──────────────────── */
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--beige-light);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--navy); color: var(--beige); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--navy);
}

h1 { font-size: clamp(2.6rem, 8.5vw, 6.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 5.5vw, 4.2rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.005em; }
h4 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }

p { color: var(--ink-soft); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--taupe-muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--taupe);
  display: inline-block;
}
.eyebrow.no-line::before { display: none; }
.eyebrow .num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: 0.18em;
}

.serif-italic { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--taupe-700); }
.lab-accent   { color: var(--taupe-700); font-style: italic; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

.small { font-size: 0.875rem; color: var(--ink-mute); }
.label-mono { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }

/* ─── Layout ──────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut-x);
}
.shell-narrow { max-width: var(--max-narrow); margin-inline: auto; padding-inline: var(--gut-x); }
.section { padding-block: clamp(80px, 12vw, 180px); position: relative; }
.section--paper { background: var(--paper); }
.section--beige { background: var(--beige); }
.section--navy  { background: var(--navy); color: var(--beige); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--beige); }
.section--navy p, .section--navy .lead { color: rgba(244, 241, 236, 0.78); }
.section--navy .eyebrow { color: var(--taupe); }
.section--navy .eyebrow .num { color: var(--beige); }

/* Architectural rule lines */
.rule {
  width: 100%;
  height: 1px;
  background: var(--line);
  border: 0;
}
.rule-thin { background: rgba(11, 31, 58, 0.07); }

/* ─── Buttons ─────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 26px 16px 28px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-radius: 999px;
  /* 1px transparent border keeps all variants on the same box-model — */
  /* without it, .btn--outline (which has a real border) is 2px taller. */
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  isolation: isolate;
  white-space: nowrap;
}
.btn .arrow {
  width: 14px; height: 14px;
  transition: transform .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--filled {
  background: var(--navy);
  color: var(--beige);
  box-shadow: 0 18px 40px -22px rgba(11, 31, 58, 0.6);
}
.btn--filled::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--taupe-700);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
  z-index: -1;
}
.btn--filled:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--filled:hover { box-shadow: 0 22px 50px -22px rgba(143, 119, 108, 0.6); }

.btn--outline {
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
}
.btn--outline:hover { background: var(--navy); color: var(--beige); }

.btn--ghost {
  color: var(--navy);
  padding-inline: 4px;
  border-radius: 0;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 10px;
  height: 1px;
  background: var(--navy);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn--ghost:hover::after { transform: scaleX(0); transform-origin: right; }

.btn--lab {
  background: var(--taupe);
  color: var(--navy);
}
.btn--lab:hover { background: var(--navy); color: var(--beige); }

/* ─── Header / Nav ─────────────────────── */
.site-hdr {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--hdr-h);
  display: flex; align-items: center;
  background: rgba(251, 250, 246, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.site-hdr.is-scrolled {
  background: rgba(251, 250, 246, 0.92);
  border-bottom-color: var(--line);
}
.hdr-inner {
  width: 100%; max-width: var(--max);
  margin: 0 auto; padding-inline: var(--gut-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
}
.hdr-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--navy);
  letter-spacing: 0.16em;
  font-weight: 600;
  font-size: 0.84rem;
  text-transform: uppercase;
}
.hdr-brand svg { width: 38px; height: 38px; transition: transform .55s var(--ease); }
.hdr-brand:hover svg { transform: rotate(-8deg) scale(1.06); }
.hdr-brand .b-stack { display: flex; flex-direction: column; line-height: 1.05; }
.hdr-brand .b-stack span:nth-child(2) { color: var(--taupe-700); letter-spacing: 0.22em; }

/* Full brand lockup (icon + type baked together) — primary header brand */
.hdr-brand__full {
  height: 64px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  transition: transform .55s var(--ease), filter .4s var(--ease);
  filter: drop-shadow(0 6px 14px rgba(11, 31, 58, 0.08));
}
.hdr-brand:hover .hdr-brand__full {
  transform: scale(1.04);
  filter: drop-shadow(0 10px 22px rgba(11, 31, 58, 0.14));
}
@media (max-width: 1280px) {
  .hdr-brand__full { height: 58px; }
}
@media (max-width: 1100px) {
  .hdr-brand__full { height: 54px; }
}
@media (max-width: 768px) {
  .hdr-brand__full { height: 44px; }
}

.hdr-nav {
  display: flex; align-items: center;
  gap: clamp(18px, 2vw, 32px);
}
.hdr-nav a {
  position: relative;
  font-size: 0.83rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  padding-block: 8px;
}
.hdr-nav a::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.hdr-nav a:hover::before,
.hdr-nav a[aria-current="page"]::before { transform: scaleX(1); transform-origin: left; }
.hdr-nav a[aria-current="page"] { color: var(--taupe-700); }

.hdr-cta { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hdr-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: var(--navy); font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.hdr-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1180px) { .hdr-phone { display: none; } }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  align-items: center; justify-content: center;
}
.menu-toggle .bars {
  width: 18px; height: 12px;
  position: relative;
}
.menu-toggle .bars span {
  position: absolute; left: 0; right: 0;
  height: 1.4px; background: var(--navy);
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.menu-toggle .bars span:nth-child(1) { top: 0; }
.menu-toggle .bars span:nth-child(2) { top: 5px; }
.menu-toggle .bars span:nth-child(3) { top: 10px; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ─── Mobile drawer — full-screen, premium ─────────── */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .65s var(--ease), visibility 0s linear .65s;
  visibility: hidden;
  overflow: hidden auto;
}
.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .65s var(--ease), visibility 0s linear 0s;
}

.nav-drawer__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gut-x);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0;
  z-index: 2;
  min-height: var(--hdr-h);
  flex-shrink: 0;
}
.nav-drawer__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-drawer__brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.nav-drawer__brand .b-stack { display: flex; flex-direction: column; line-height: 1.05; }
.nav-drawer__brand .b-stack span:nth-child(2) { color: var(--taupe-700); letter-spacing: 0.22em; }

.nav-drawer__close {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.nav-drawer__close::before, .nav-drawer__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 1.4px;
  background: var(--navy);
  transition: background .3s var(--ease);
}
.nav-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-drawer__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-drawer__close:hover { background: var(--navy); border-color: var(--navy); transform: rotate(90deg); }
.nav-drawer__close:hover::before, .nav-drawer__close:hover::after { background: var(--beige); }

.nav-drawer__body {
  padding: 22px var(--gut-x) 28px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 24px;
}

.nav-drawer__links {
  list-style: none;
  border-top: 1px solid var(--line);
}
.nav-drawer__links li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-drawer.is-open .nav-drawer__links li {
  opacity: 1; transform: none;
}
.nav-drawer.is-open .nav-drawer__links li:nth-child(1) { transition-delay: .15s; }
.nav-drawer.is-open .nav-drawer__links li:nth-child(2) { transition-delay: .22s; }
.nav-drawer.is-open .nav-drawer__links li:nth-child(3) { transition-delay: .29s; }
.nav-drawer.is-open .nav-drawer__links li:nth-child(4) { transition-delay: .36s; }
.nav-drawer__links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: padding .3s var(--ease), color .3s var(--ease);
}
.nav-drawer__links a[aria-current="page"] { color: var(--taupe-700); }
.nav-drawer__links a:hover, .nav-drawer__links a:focus-visible {
  padding-left: 10px;
  color: var(--taupe-700);
}
.nav-drawer__links a .arrow {
  width: 16px; height: 16px;
  transition: transform .3s var(--ease);
  color: var(--taupe-700);
}
.nav-drawer__links a:hover .arrow { transform: translateX(6px); }

.nav-drawer__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease) .42s, transform .5s var(--ease) .42s;
}
.nav-drawer.is-open .nav-drawer__featured { opacity: 1; transform: none; }
.nav-drawer__cta {
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
  min-height: 84px;
}
.nav-drawer__cta--primary {
  background: var(--navy);
  color: var(--beige);
  border-color: var(--navy);
}
.nav-drawer__cta--primary .num { color: var(--taupe); }
.nav-drawer__cta--primary .title { color: var(--beige); }
.nav-drawer__cta:hover {
  transform: translateY(-2px);
  border-color: var(--taupe);
}
.nav-drawer__cta .num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  display: block;
}
.nav-drawer__cta .title {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-drawer__cta .title svg { width: 14px; height: 14px; vertical-align: middle; }
.nav-drawer__cta--primary .title { color: #ffffff; }
.nav-drawer__cta--primary .num { color: var(--taupe); }

.nav-drawer__contact {
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease) .48s, transform .5s var(--ease) .48s;
}
.nav-drawer.is-open .nav-drawer__contact { opacity: 1; transform: none; }
.nav-drawer__contact .label-mono { margin-bottom: 2px; }
.nav-drawer__contact a {
  display: inline-flex; align-items: center;
  gap: 12px;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 500;
  width: fit-content;
}
.nav-drawer__contact a svg {
  width: 16px; height: 16px;
  color: var(--taupe-700);
  flex-shrink: 0;
}
.nav-drawer__contact .small { color: var(--ink-mute); font-size: 0.84rem; }

.nav-drawer__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--gut-x);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  gap: 12px;
}
.nav-drawer__foot .copyright {
  color: var(--ink-mute);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.nav-drawer__social { display: flex; gap: 8px; }
.nav-drawer__social a {
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: all .3s var(--ease);
}
.nav-drawer__social a:hover {
  background: var(--navy);
  color: var(--beige);
  border-color: var(--navy);
}
.nav-drawer__social svg { width: 14px; height: 14px; }

@media (min-width: 981px) {
  .nav-drawer { display: none !important; }
}

@media (max-width: 980px) {
  .hdr-nav { display: none; }
  .hdr-phone { display: none; }
  .menu-toggle { display: inline-flex; }
}

body.nav-locked { overflow: hidden; }

/* ─── Marquee ─────────────────────────── */
.marquee {
  display: flex; overflow: hidden;
  width: 100%;
  border-block: 1px solid var(--line);
  background: var(--paper);
  padding-block: 22px;
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 56px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: scroll-x 38s linear infinite;
  min-width: 100%;
}
.marquee__track span {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: var(--navy);
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 56px;
}
.marquee__track span::after {
  content: "✦";
  color: var(--taupe);
  font-size: 0.8em;
}
@keyframes scroll-x { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ─── Animation utilities ──────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .26s; }
.reveal.d4 { transition-delay: .36s; }

.reveal-img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.reveal-img img { transition: transform 1.6s var(--ease), filter 1.4s var(--ease); transform: scale(1.06); filter: brightness(0.88); }
.reveal-img::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--navy);
  transform-origin: right;
  transition: transform 1s var(--ease);
}
.reveal-img.in::after { transform: scaleX(0); }
.reveal-img.in img { transform: scale(1); filter: brightness(1); }

.reveal-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
}
.reveal-line.in > span { transform: translateY(0); }
.reveal-line.d1 > span { transition-delay: .08s; }
.reveal-line.d2 > span { transition-delay: .18s; }
.reveal-line.d3 > span { transition-delay: .3s; }
.reveal-line.d4 > span { transition-delay: .42s; }

/* Character split for headlines */
.split-chars .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.split-chars.in .char { opacity: 1; transform: none; }

/* Parallax */
.parallax-y { will-change: transform; }

/* Scroll-snap horizontal scroller */
.h-scroll {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ─── Hero — home page ─────────────── */
.hero {
  position: relative;
  padding-top: calc(var(--hdr-h) + clamp(36px, 5vw, 72px));
  padding-bottom: clamp(70px, 10vw, 130px);
  background: var(--paper);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
/* Tiny top-offset so the eyebrow doesn't sit literally on the photo's
   top edge — keeps an editorial top air without losing the alignment. */
.hero__copy {
  padding-top: clamp(0px, 0.8vw, 12px);
}
.hero__title {
  font-size: clamp(2.6rem, 6.8vw, 5.4rem);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--navy);
}
.hero__title em {
  font-style: italic;
  color: var(--taupe-700);
  font-weight: 400;
}
.hero__lead {
  margin-top: 32px;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.55;
}
.hero__actions {
  margin-top: 36px;
  display: inline-flex; gap: 14px; flex-wrap: wrap;
}
.hero__meta {
  margin-top: 56px;
  display: flex; gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero__meta-item {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 130px;
}
.hero__meta-item .v {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--navy);
}
.hero__meta-item .k {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero__visual {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(11, 31, 58, 0.45);
}
.hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: hero-zoom 14s var(--ease) infinite alternate;
}
@keyframes hero-zoom { to { transform: scale(1.13) translateY(-2%); } }

.hero__visual-tag {
  position: absolute;
  left: 24px; bottom: 24px;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__visual-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #2BC48A;
  box-shadow: 0 0 0 4px rgba(43, 196, 138, 0.18);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(43, 196, 138, 0); }
}

.hero__ticker {
  position: absolute;
  right: -10px; top: 30%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: none;
}
@media (min-width: 1180px) { .hero__ticker { display: block; } }

/* Hero floor decoration: subtle grid */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: var(--hdr-h);
  height: 1px;
  background: var(--line);
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { aspect-ratio: 5 / 4; max-width: 600px; margin-inline: auto; }
  .hero__visual img { object-position: center 55%; }
}

/* ─── Service split (home) ─────────────────── */
.split-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.split-card {
  position: relative;
  padding: clamp(40px, 6vw, 80px) var(--gut-x);
  display: flex; flex-direction: column; gap: 24px;
  min-height: clamp(440px, 60vh, 620px);
  overflow: hidden;
  isolation: isolate;
}
.split-card + .split-card { border-left: 1px solid var(--line); }
.split-card__img {
  position: absolute; inset: 0;
  z-index: -1;
}
.split-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.4s var(--ease);
  filter: brightness(0.65) saturate(0.95);
}
.split-card:hover .split-card__img img { transform: scale(1.12); }
.split-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,0.05), rgba(11,31,58,0.85));
  z-index: -1;
}
.split-card .eyebrow { color: var(--taupe); }
.split-card .eyebrow .num { color: var(--beige); }
.split-card h2 { color: var(--beige); font-size: clamp(2.4rem, 5vw, 3.6rem); }
.split-card p { color: rgba(244, 241, 236, 0.84); max-width: 38ch; }
.split-card .arrow-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--beige);
  font-family: var(--display);
  font-size: 1.4rem;
  font-style: italic;
}
.split-card .arrow-cta svg { transition: transform .5s var(--ease); }
.split-card:hover .arrow-cta svg { transform: translateX(8px); }

@media (max-width: 880px) {
  .split-services { grid-template-columns: 1fr; }
  .split-card + .split-card { border-left: 0; border-top: 1px solid var(--line); }
}

/* ─── Section frame ──────────────────── */
.section-head {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: clamp(28px, 5vw, 80px);
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head .eyebrow { align-self: start; }
.section-head h2 { max-width: 22ch; }
.section-head p { margin-top: 16px; max-width: 56ch; }

@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── Process timeline (horizontal) ──────────────────── */
.process {
  position: relative;
  margin-top: clamp(40px, 4vw, 60px);
}
.process__rail {
  position: absolute;
  top: 38px; left: 0; right: 0; height: 1px;
  background: var(--line);
  overflow: hidden;
}
.process__rail::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--navy);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 2.4s var(--ease);
}
.process.in .process__rail::after { transform: scaleX(1); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.process__step {
  padding-top: 64px;
  position: relative;
}
.process__step::before {
  content: "";
  position: absolute;
  top: 30px; left: 0;
  width: 16px; height: 16px;
  background: var(--navy);
  border-radius: 999px;
  transform: scale(0);
  transition: transform .6s var(--pop);
}
.process.in .process__step::before { transform: scale(1); transition-delay: var(--d, 0s); }
.process__step:nth-child(1) { --d: 0.3s; }
.process__step:nth-child(2) { --d: 0.7s; }
.process__step:nth-child(3) { --d: 1.1s; }
.process__step:nth-child(4) { --d: 1.5s; }
.process__step .step-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--taupe-muted);
  text-transform: uppercase;
}
.process__step h4 {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--navy);
}
.process__step p { margin-top: 8px; font-size: 0.95rem; }
@media (max-width: 880px) {
  .process__rail { top: 22px; left: 8px; right: auto; width: 1px; height: 100%; }
  .process__rail::after { transform-origin: top; transform: scaleY(0); }
  .process.in .process__rail::after { transform: scaleY(1); }
  .process__grid { grid-template-columns: 1fr; gap: 32px; }
  .process__step { padding-top: 0; padding-left: 36px; }
  .process__step::before { top: 6px; left: 0; }
}

/* ─── Stat band ───────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stats__cell {
  background: var(--paper);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 8px;
}
.stats__cell .v {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  color: var(--navy);
  letter-spacing: -0.02em;
}
.stats__cell .v sup {
  font-size: 0.5em;
  vertical-align: top;
  color: var(--taupe-700);
  font-style: italic;
  margin-left: 4px;
}
.stats__cell .k {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Testimonial editorial ───────────── */
.testimonial-ed {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.testimonial-ed__visual {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
}
.testimonial-ed__visual img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-ed blockquote {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy);
  font-weight: 400;
}
.testimonial-ed blockquote::before {
  content: "“";
  font-size: 5rem;
  color: var(--taupe);
  display: block;
  line-height: 0.4;
  margin-bottom: 24px;
}
.testimonial-ed .author {
  margin-top: 32px;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.testimonial-ed .author strong { color: var(--navy); font-weight: 600; margin-right: 14px; }

@media (max-width: 880px) {
  .testimonial-ed { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Reviews stack ─────────────────── */
.reviews-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.review {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.review:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(11, 31, 58, 0.2);
  border-color: var(--taupe);
}
.review__stars { display: inline-flex; gap: 4px; color: var(--taupe-700); }
.review__stars svg { width: 14px; height: 14px; }
.review p {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--navy);
  font-weight: 400;
}
.review__author {
  margin-top: auto;
  display: flex; align-items: center; gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review__avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--beige-deep);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--taupe-700);
  font-weight: 600;
  font-size: 0.85rem;
}
.review__author .n { color: var(--navy); font-weight: 600; font-size: 0.92rem; }
.review__author .m { font-size: 0.75rem; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

@media (max-width: 980px) { .reviews-stack { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .reviews-stack { grid-template-columns: 1fr; } }

/* ─── FAQ ──────────────────────────── */
.faq {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__btn {
  width: 100%;
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding: 28px 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  transition: color .3s var(--ease);
}
.faq__btn:hover { color: var(--taupe-700); }
.faq__icon {
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--navy);
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.faq__icon::before { width: 10px; height: 1px; }
.faq__icon::after { width: 1px; height: 10px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__item.is-open .faq__icon { background: var(--navy); }
.faq__item.is-open .faq__icon::before { background: var(--beige); }
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.faq__answer > div { overflow: hidden; }
.faq__answer p {
  padding-bottom: 28px;
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 70ch;
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }

.faq__side {
  position: sticky;
  top: calc(var(--hdr-h) + 32px);
  padding: clamp(28px, 4vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.faq__side h3 { font-size: 1.4rem; }
.faq__side p { margin-top: 12px; }
.faq__side .btn { margin-top: 24px; }

@media (max-width: 980px) {
  .faq { grid-template-columns: 1fr; }
  .faq__side { position: relative; top: 0; order: -1; }
}

/* ─── CTA banner ─────────────────────── */
.cta-banner {
  position: relative;
  padding-block: clamp(80px, 12vw, 160px);
  background: var(--navy);
  color: var(--beige);
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(183, 159, 146, 0.18), transparent 60%);
  pointer-events: none;
}
.cta-banner h2 { color: var(--beige); font-size: clamp(2.4rem, 7vw, 5.6rem); max-width: 16ch; margin-inline: auto; }
.cta-banner h2 em { color: var(--taupe); font-style: italic; }
.cta-banner p { margin: 20px auto 32px; color: rgba(244, 241, 236, 0.78); max-width: 60ch; }
.cta-banner .btn--filled { background: var(--taupe); color: var(--navy); }
.cta-banner .btn--filled::before { background: var(--beige); }
.cta-banner .btn--filled:hover { color: var(--navy); }

/* ─── Footer — enterprise overhaul ──────────────────── */
.site-foot {
  background: var(--navy);
  color: rgba(244, 241, 236, 0.78);
  position: relative;
  overflow: hidden;
}
.site-foot::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(183, 159, 146, 0.12), transparent 60%),
    radial-gradient(700px 380px at 95% 100%, rgba(183, 159, 146, 0.07), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.site-foot > * { position: relative; z-index: 1; }

/* — Hero CTA band — */
.foot-hero {
  padding-block: clamp(90px, 13vw, 170px);
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
}
.foot-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.foot-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 24px;
}
.foot-hero__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--taupe);
}
.foot-hero__title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.97;
  letter-spacing: -0.022em;
  color: var(--beige);
  font-weight: 500;
}
.foot-hero__title em {
  color: var(--taupe);
  font-style: italic;
  font-weight: 400;
}
.foot-hero__actions {
  display: flex; flex-direction: column;
  gap: 14px;
}
.foot-cta {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  padding: 26px 30px;
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: 6px;
  background: rgba(244, 241, 236, 0.02);
  transition: border-color .45s var(--ease), transform .45s var(--ease), color .45s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.foot-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--taupe), var(--taupe-700));
  transform: translateX(-101%) skewX(-6deg);
  transform-origin: left;
  transition: transform .65s var(--ease);
  z-index: -1;
}
.foot-cta:hover::before { transform: translateX(0) skewX(-6deg); }
.foot-cta:hover {
  border-color: var(--taupe);
  transform: translateX(6px);
  color: var(--navy);
}
.foot-cta__inner { display: flex; flex-direction: column; gap: 4px; }
.foot-cta__eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: color .4s var(--ease);
}
.foot-cta:hover .foot-cta__eyebrow { color: var(--navy); }
.foot-cta__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--beige);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color .4s var(--ease);
}
.foot-cta:hover .foot-cta__title { color: var(--navy); }
.foot-cta__arrow {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: var(--beige);
  transition: transform .55s var(--ease), color .4s var(--ease);
}
.foot-cta:hover .foot-cta__arrow { transform: translateX(8px); color: var(--navy); }

@media (max-width: 980px) {
  .foot-hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* — Stat band — */
.foot-stats {
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
  padding-block: 36px;
}
.foot-stats__row {
  display: flex; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 60px);
  align-items: baseline;
  justify-content: center;
}
.foot-stat {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: rgba(244, 241, 236, 0.6);
}
.foot-stat strong {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 500;
  color: var(--beige);
  letter-spacing: -0.012em;
}
.foot-stat sup {
  font-family: var(--display);
  font-size: 0.7em;
  color: var(--taupe);
  vertical-align: top;
  font-style: italic;
}
.foot-stat small {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
}

/* — Main grid — */
.foot-main {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr 1.3fr;
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(56px, 7vw, 90px);
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
}
.foot-brand { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.foot-brand__logo {
  display: inline-block;
  width: 60px; height: 60px;
  margin-bottom: 4px;
  transition: transform .55s var(--ease);
}
.foot-brand__logo:hover { transform: rotate(-8deg) scale(1.05); }
.foot-brand__lockup {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--beige);
  line-height: 1.05;
  font-weight: 500;
}
.foot-brand__lockup em { color: var(--taupe); font-style: italic; font-weight: 400; }
.foot-brand p {
  color: rgba(244, 241, 236, 0.7);
  max-width: 38ch;
}
.foot-brand__owner {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 8px;
}
.foot-brand__owner span { color: var(--beige); margin-left: 8px; }
.foot-brand__contact {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.foot-contact-link {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--beige);
  width: fit-content;
  transition: color .3s var(--ease), gap .3s var(--ease);
  font-size: 0.95rem;
}
.foot-contact-link svg {
  width: 16px; height: 16px;
  color: var(--taupe);
  transition: transform .3s var(--ease);
  flex-shrink: 0;
}
.foot-contact-link:hover { color: var(--taupe); gap: 14px; }
.foot-contact-link:hover svg { transform: scale(1.15) rotate(-4deg); }
.foot-meta { font-size: 0.85rem; color: rgba(244, 241, 236, 0.5); }

.foot-col h5 {
  color: var(--taupe);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col a {
  position: relative;
  color: rgba(244, 241, 236, 0.72);
  transition: color .3s var(--ease), padding-left .35s var(--ease);
  display: inline-block;
  width: fit-content;
  font-size: 0.95rem;
}
.foot-col li.indent a { color: rgba(244, 241, 236, 0.55); font-size: 0.88rem; }
.foot-col li.indent a::before { content: ""; }
.foot-col li.indent { padding-left: 14px; position: relative; }
.foot-col li.indent::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 8px; height: 1px;
  background: var(--taupe);
  opacity: 0.5;
}
.foot-col a::after {
  content: "→";
  font-family: var(--mono);
  margin-left: 6px;
  opacity: 0;
  display: inline-block;
  transform: translateX(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  color: var(--taupe);
}
.foot-col a:hover { color: var(--taupe); }
.foot-col a:hover::after { opacity: 1; transform: translateX(0); }

/* — Quick actions column — */
.foot-quick { display: flex; flex-direction: column; }
.foot-quick h5 { margin-bottom: 16px; }
.foot-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(244, 241, 236, 0.10);
  border-radius: 6px;
  margin-bottom: 10px;
  background: rgba(244, 241, 236, 0.025);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.foot-action:hover {
  border-color: var(--taupe);
  background: rgba(183, 159, 146, 0.08);
  transform: translateX(4px);
}
.foot-action__inner { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.foot-action__num {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--taupe);
}
.foot-action__title {
  color: var(--beige);
  font-weight: 500;
  font-size: 0.96rem;
}
.foot-action__meta {
  font-size: 0.78rem;
  color: rgba(244, 241, 236, 0.55);
}
.foot-action svg {
  width: 16px; height: 16px;
  color: var(--taupe);
  transition: transform .4s var(--ease);
  flex-shrink: 0;
}
.foot-action:hover svg { transform: translateX(6px) scale(1.15); }

@media (max-width: 1100px) {
  .foot-main { grid-template-columns: 1fr 1fr; }
  .foot-brand, .foot-quick { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 640px) {
  .foot-main { grid-template-columns: 1fr; }
}

/* — Service areas — */
.foot-areas {
  padding-block: clamp(40px, 6vw, 70px);
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
}
.foot-areas__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.foot-areas__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
}
.foot-areas__subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(244, 241, 236, 0.6);
}
.foot-areas__grid {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.foot-pill {
  position: relative;
  padding: 9px 17px;
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 999px;
  font-size: 0.86rem;
  color: rgba(244, 241, 236, 0.74);
  transition: color .35s var(--ease), border-color .35s var(--ease);
  isolation: isolate;
  overflow: hidden;
}
.foot-pill::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--taupe);
  border-radius: 999px;
  transform: scale(0);
  transition: transform .45s var(--ease);
  z-index: -1;
}
.foot-pill:hover::before { transform: scale(1); }
.foot-pill:hover { color: var(--navy); border-color: var(--taupe); }

/* — Marquee — */
.foot-marquee {
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
  padding-block: 26px;
  overflow: hidden;
  display: flex;
}
.foot-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: scroll-x 48s linear infinite;
  font-family: var(--display);
  font-style: italic;
  color: rgba(244, 241, 236, 0.22);
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  letter-spacing: 0.02em;
  min-width: 100%;
}
.foot-marquee__track .dot {
  color: var(--taupe);
  font-style: normal;
}

/* — Bottom — */
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  padding-block: 32px;
  font-size: 0.82rem;
  color: rgba(244, 241, 236, 0.5);
}
.foot-legal { display: flex; gap: 24px; }
.foot-legal a { transition: color .3s var(--ease); }
.foot-legal a:hover { color: var(--taupe); }
.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .35s var(--ease);
}
.foot-social a:hover {
  background: var(--taupe);
  color: var(--navy);
  border-color: var(--taupe);
  transform: translateY(-3px);
}
.foot-social svg { width: 16px; height: 16px; }

@media (max-width: 640px) { .foot-bottom { flex-direction: column; align-items: flex-start; } }

/* ─── Page hero (residential / commercial / hiring) ─── */
.page-hero {
  position: relative;
  padding-top: calc(var(--hdr-h) + clamp(36px, 5vw, 72px));
  padding-bottom: clamp(60px, 8vw, 110px);
  background: var(--paper);
  overflow: hidden;
}
.page-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.page-hero__copy { padding-top: clamp(0px, 0.8vw, 12px); }
.page-hero__copy h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin-top: 24px;
}
.page-hero__copy h1 em { color: var(--taupe-700); font-style: italic; font-weight: 400; }
.page-hero__copy p { margin-top: 28px; max-width: 56ch; }
.page-hero__copy .actions { margin-top: 36px; display: inline-flex; gap: 14px; flex-wrap: wrap; }
.page-hero__visual {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 36px 80px -50px rgba(11, 31, 58, 0.5);
  position: relative;
}
.page-hero__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.page-hero__visual:hover img { transform: scale(1.05); }
.page-hero__visual .tag {
  position: absolute;
  top: 24px; left: 24px;
  padding: 8px 14px;
  background: rgba(244, 241, 236, 0.95);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
}
@media (max-width: 880px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .page-hero__visual { aspect-ratio: 5 / 4; max-width: 600px; margin-inline: auto; }
  .page-hero__visual img { object-position: center 55%; }
}

/* breadcrumb */
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.crumb a:hover { color: var(--navy); }
.crumb .sep { color: var(--taupe); }
.crumb .here { color: var(--navy); }

/* ─── Service / inclusion grid ──────────── */
.inclusion {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.inclusion__cell {
  background: var(--paper);
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .35s var(--ease);
}
.inclusion__cell:hover { background: var(--beige-light); }
.inclusion__cell .num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--taupe-muted);
}
.inclusion__cell h4 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--navy);
}
.inclusion__cell ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.inclusion__cell li {
  padding-left: 18px;
  position: relative;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.inclusion__cell li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1px;
  background: var(--taupe);
}
@media (max-width: 880px) { .inclusion { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .inclusion { grid-template-columns: 1fr; } }

/* ─── Pricing tiles ────────────── */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 28px);
}
.tier {
  padding: clamp(32px, 4vw, 48px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  position: relative;
}
.tier:hover { transform: translateY(-8px); box-shadow: 0 36px 80px -40px rgba(11, 31, 58, 0.22); border-color: var(--taupe); }
.tier .name { font-family: var(--display); font-size: 1.7rem; color: var(--navy); font-weight: 500; }
.tier .price { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3rem); color: var(--navy); letter-spacing: -0.015em; }
.tier .price small { font-size: 0.45em; color: var(--ink-mute); margin-left: 6px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--sans); }
.tier .desc { color: var(--ink-soft); max-width: 36ch; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tier li { display: flex; gap: 12px; font-size: 0.93rem; color: var(--ink-soft); }
.tier li::before {
  content: "✓"; color: var(--taupe-700);
  font-weight: 600;
  width: 18px; flex: 0 0 18px;
}
.tier--feature {
  background: var(--navy);
  color: var(--beige);
  border-color: var(--navy);
}
.tier--feature .name,
.tier--feature .price { color: var(--beige); }
.tier--feature .desc,
.tier--feature li { color: rgba(244, 241, 236, 0.84); }
.tier--feature li::before { color: var(--taupe); }
/* Make .btn--filled visible on the navy feature tier */
.tier--feature .btn--filled {
  background: transparent;
  color: var(--beige);
  border: 1px solid rgba(244, 241, 236, 0.45);
  box-shadow: none;
}
.tier--feature .btn--filled::before { background: var(--taupe); }
.tier--feature .btn--filled:hover {
  color: var(--navy);
  border-color: var(--taupe);
  box-shadow: 0 22px 50px -22px rgba(183, 159, 146, 0.5);
}
.tier__tag {
  position: absolute; top: -12px; left: 24px;
  padding: 6px 14px;
  background: var(--taupe);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
}
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; } }

/* ─── Spec strip (architectural detail) ──────── */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.spec-strip__cell {
  background: var(--paper);
  padding: 28px var(--gut);
  display: flex; flex-direction: column; gap: 6px;
}
.spec-strip__cell .k {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-muted);
}
.spec-strip__cell .v {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--navy);
}

/* ─── Image gallery (residential / commercial) ──────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--beige-deep);
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item--a { grid-column: span 7; aspect-ratio: 4 / 3; }
.gallery__item--b { grid-column: span 5; aspect-ratio: 4 / 3; }
.gallery__item--c { grid-column: span 4; aspect-ratio: 1 / 1; }
.gallery__item--d { grid-column: span 4; aspect-ratio: 1 / 1; }
.gallery__item--e { grid-column: span 4; aspect-ratio: 1 / 1; }
.gallery__cap {
  position: absolute; bottom: 14px; left: 14px;
  padding: 6px 12px;
  background: rgba(11, 31, 58, 0.78);
  color: var(--beige);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
}
@media (max-width: 768px) {
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .gallery__item--a { grid-column: 1 / -1; }
  .gallery__item--b { grid-column: 1 / -1; }
  .gallery__item--c, .gallery__item--d, .gallery__item--e { grid-column: span 2; }
}

/* ─── Compare table ────────────── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.compare-table th, .compare-table td {
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare-table th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  font-weight: 500;
}
.compare-table td:first-child { color: var(--navy); font-weight: 500; }
.compare-table td.check { color: var(--taupe-700); font-weight: 600; }

/* ─── Form ────────────────────── */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 22px);
}
.form .field { display: flex; flex-direction: column; gap: 8px; }
.form .field.full { grid-column: 1 / -1; }
.form label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.form input, .form select, .form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: white;
}
.form textarea { min-height: 130px; resize: vertical; }
.form .submit { display: flex; justify-content: flex-start; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ─── Floating book-now bar (mobile) ──────── */
.fab-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  background: var(--navy);
  color: var(--beige);
  padding: 12px 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  box-shadow: 0 24px 50px -22px rgba(11, 31, 58, 0.6);
  z-index: 60;
  transform: translateY(140%);
  transition: transform .6s var(--ease);
}
.fab-bar.show { transform: none; }
.fab-bar .label {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--taupe);
}
.fab-bar a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--taupe);
  color: var(--navy);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
@media (min-width: 980px) { .fab-bar { display: none !important; } }

/* ─── Cursor follower (subtle) ──────── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--taupe);
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: multiply;
  transform: translate3d(0, 0, 0);
  /* NOTE: no transform transition here — JS positions the cursor every
     mousemove for zero-lag tracking. Only animate size/color/blend on hover. */
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  will-change: transform;
  display: none;
}
.cursor.is-hover {
  width: 56px; height: 56px;
  background: var(--navy);
  mix-blend-mode: difference;
}
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

/* ─── Misc helpers ──────────────────── */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
@media (max-width: 880px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

.bullet-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
}
.bullet-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px; height: 1px;
  background: var(--taupe);
}

.tag-row {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--beige-deep);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--navy);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   PREMIUM POLISH LAYER — page-load, trust, badges, etc.
   ═══════════════════════════════════════════════════ */

/* ─── Page-load curtain reveal ─────────────────────── */
.page-curtain {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transform-origin: top;
}
.page-curtain__mark {
  width: 96px; height: 96px;
  opacity: 0;
  transform: scale(0.92) rotate(-6deg);
}
.page-curtain__bar {
  position: absolute;
  left: 50%; bottom: 30%;
  width: 0;
  height: 1px;
  background: var(--taupe);
  transform: translateX(-50%);
}
body:not(.is-ready) .page-curtain__mark { animation: curtain-mark-in .8s .15s var(--ease) forwards; }
body:not(.is-ready) .page-curtain__bar  { animation: curtain-bar-grow 1s .25s var(--ease) forwards; }
body.is-ready .page-curtain {
  animation: curtain-up 1s var(--ease) forwards;
}
@keyframes curtain-mark-in {
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes curtain-bar-grow {
  to { width: 220px; }
}
@keyframes curtain-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); visibility: hidden; }
}
body:not(.is-ready) main,
body:not(.is-ready) .site-foot { opacity: 0; }
body.is-ready main,
body.is-ready .site-foot { opacity: 1; transition: opacity .8s var(--ease) .2s; }

/* ─── Trust strip (under hero) ─────────────────────── */
.trust-strip {
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding-block: 22px;
  overflow: hidden;
}
.trust-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 56px);
  row-gap: 12px;
}
.trust-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
}
.trust-mark + .trust-mark::before {
  content: "";
  width: 1px; height: 16px;
  background: var(--line-strong);
  display: inline-block;
  margin-right: clamp(16px, 4vw, 56px);
  margin-left: calc(clamp(16px, 4vw, 56px) * -1 + 0px);
}
@media (max-width: 720px) {
  .trust-mark + .trust-mark::before { display: none; }
}
.trust-mark svg, .trust-mark__icon {
  width: 18px; height: 18px;
  color: var(--taupe-700);
  flex-shrink: 0;
}
.trust-mark strong { color: var(--navy); font-weight: 600; }
.trust-mark .stars {
  color: var(--taupe-700);
  letter-spacing: 0.04em;
  font-size: 0.9rem;
}

/* ─── 24h Guarantee stamp (corner badge) ──────────── */
.guarantee-stamp {
  position: absolute;
  top: 30px; right: 30px;
  width: 130px; height: 130px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--taupe);
  color: var(--navy);
  z-index: 4;
  text-align: center;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transform: rotate(-8deg);
  animation: stamp-wobble 8s ease-in-out infinite;
  box-shadow: 0 18px 40px -18px rgba(11, 31, 58, 0.35);
}
.guarantee-stamp::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(11, 31, 58, 0.3);
  border-radius: 999px;
  pointer-events: none;
}
.guarantee-stamp__inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  line-height: 1.1;
}
.guarantee-stamp .big {
  font-family: var(--display);
  font-style: italic;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-weight: 500;
  text-transform: none;
}
.guarantee-stamp .small {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-top: 2px;
}
@keyframes stamp-wobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(-4deg) scale(1.02); }
}
@media (max-width: 880px) {
  .guarantee-stamp { width: 96px; height: 96px; top: 16px; right: 16px; }
  .guarantee-stamp .big { font-size: 1.5rem; }
  .guarantee-stamp .small { font-size: 0.5rem; letter-spacing: 0.14em; }
}

/* ─── Back-to-top floating button ─────────────────── */
.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 48px; height: 48px;
  background: var(--navy);
  color: var(--beige);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 70;
  box-shadow: 0 20px 40px -20px rgba(11, 31, 58, 0.5);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .35s var(--ease), background .3s var(--ease);
  cursor: pointer;
}
.to-top.show { transform: translateY(0); opacity: 1; }
.to-top:hover { background: var(--taupe-700); transform: translateY(-4px); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 980px) { .to-top { bottom: 80px; } }

/* ─── FAQ open-state polish ───────────────────────── */
.faq__item {
  transition: background .35s var(--ease), padding-inline .35s var(--ease);
}
.faq__item.is-open {
  background: rgba(11, 31, 58, 0.025);
  padding-inline: 18px;
  border-radius: 4px;
}

/* ─── Section divider (architectural rule between sections) ─── */
.section-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 159, 146, 0.4), transparent);
  border: 0;
  margin: 0;
}

/* ─── Right-rail section indicator (scroll dots) ──── */
.rail-dots {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 12px;
  z-index: 50;
}
.rail-dots__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(11, 31, 58, 0.25);
  transition: background .3s var(--ease), transform .3s var(--ease);
  cursor: pointer;
  position: relative;
}
.rail-dots__dot.active {
  background: var(--navy);
  transform: scale(1.6);
}
.rail-dots__dot:hover { background: var(--taupe-700); }
.rail-dots__dot::after {
  content: attr(data-label);
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 6px 10px;
  background: var(--navy);
  color: var(--beige);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rail-dots__dot:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 980px) { .rail-dots { display: none; } }

/* ─── Hero parallax wrapper ───────────────────────── */
.hero__visual.has-parallax img,
.page-hero__visual.has-parallax img { will-change: transform; }

/* ═══════════════════════════════════════════════════
   MOBILE REFINEMENTS — smaller, tighter, more detailed
   ═══════════════════════════════════════════════════ */

@media (max-width: 880px) {
  /* Tighter section padding */
  .section { padding-block: clamp(60px, 14vw, 100px); }
  .cta-banner { padding-block: clamp(60px, 14vw, 100px); }

  /* Hero — smaller title, less vertical breathing */
  .hero { padding-top: calc(var(--hdr-h) + 36px); padding-bottom: 60px; }
  .hero__title { font-size: clamp(2.4rem, 11vw, 4rem); letter-spacing: -0.02em; }
  .hero__lead { font-size: 1rem; margin-top: 22px; }
  .hero__actions { margin-top: 28px; }
  .hero__meta { margin-top: 36px; padding-top: 22px; gap: 18px; }
  .hero__meta-item { min-width: 0; flex: 1 1 100px; }
  .hero__meta-item .v { font-size: clamp(1.4rem, 5.4vw, 1.9rem); }
  .hero__meta-item .k { font-size: 0.68rem; }

  /* Page hero */
  .page-hero { padding-top: calc(var(--hdr-h) + 32px); padding-bottom: 60px; }
  .page-hero__copy h1 { font-size: clamp(2.4rem, 9.5vw, 3.6rem); }
  .page-hero__copy p { font-size: 0.98rem; margin-top: 20px; }
  .page-hero__copy .actions { margin-top: 28px; }

  /* Section heads */
  .section-head { margin-bottom: 36px; gap: 16px; }
  .section-head h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .section-head p { font-size: 0.98rem; margin-top: 12px; }
  h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.4rem); }
  .lead { font-size: 1rem; }

  /* Buttons — slightly more comfortable tap area */
  .btn { padding: 14px 22px 14px 24px; font-size: 0.9rem; }

  /* Stats band */
  .stats__cell { padding: 24px 18px; }
  .stats__cell .v { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .stats__cell .k { font-size: 0.7rem; }

  /* Process step */
  .process__step h4 { font-size: 1.2rem; }
  .process__step p { font-size: 0.92rem; }

  /* Service split cards */
  .split-card { min-height: 380px; padding-block: 50px; }
  .split-card h2 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .split-card p { font-size: 0.95rem; }

  /* Reviews */
  .review { padding: 24px; }
  .review p { font-size: 1.05rem; }

  /* Pricing tier */
  .tier { padding: 28px 26px; }
  .tier .name { font-size: 1.5rem; }
  .tier .desc { font-size: 0.95rem; }
  .tier li { font-size: 0.9rem; }

  /* Inclusion grid */
  .inclusion__cell h4 { font-size: 1.1rem; }

  /* FAQ */
  .faq__btn { padding: 22px 0; font-size: 1.08rem; }
  .faq__btn span:first-child { padding-right: 12px; }
  .faq__answer p { padding-bottom: 22px; font-size: 0.95rem; }

  /* Testimonial editorial */
  .testimonial-ed blockquote { font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .testimonial-ed blockquote::before { font-size: 3.6rem; }

  /* CTA banner */
  .cta-banner h2 { font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.05; }
  .cta-banner p { font-size: 0.98rem; margin: 16px auto 24px; }

  /* Marquee — smaller on mobile */
  .marquee__track span { font-size: 1.15rem; gap: 36px; }
  .marquee { padding-block: 16px; }

  /* Spec strip - 2 cols on mobile */
  .spec-strip { grid-template-columns: 1fr 1fr; }
  .spec-strip__cell { padding: 18px 14px; }
  .spec-strip__cell .v { font-size: 0.95rem; line-height: 1.25; }
  .spec-strip__cell .k { font-size: 0.6rem; }

  /* Compare table — convert to stacked card on small */
  .compare-table { font-size: 0.85rem; }
  .compare-table th, .compare-table td { padding: 12px 10px; }
}

@media (max-width: 540px) {
  /* Even tighter for small phones */
  .section { padding-block: 56px; }
  .hero__visual-tag { font-size: 0.65rem; padding: 6px 11px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats__cell { padding: 20px 14px; }
  .row-2,
  .row-3 { grid-template-columns: 1fr; }
  .footer-only-mobile { display: block; }

  /* Spec strip stacks at very small */
  .spec-strip { grid-template-columns: 1fr; }

  /* Trust strip - tighter on mobile */
  .trust-strip { padding-block: 16px; }
  .trust-strip__row { gap: 14px; row-gap: 10px; flex-direction: column; align-items: flex-start; padding-inline: 8px; }
  .trust-mark { font-size: 0.78rem; gap: 10px; width: 100%; justify-content: flex-start; }
  .trust-mark + .trust-mark::before { display: none; }
  .trust-mark svg { width: 18px; height: 18px; }

  /* Footer pills - bigger tap targets */
  .foot-pill { padding: 10px 16px; font-size: 0.82rem; }

  /* Hero visual tag */
  .hero__visual-tag { left: 16px; bottom: 16px; }
  .page-hero__visual .tag { left: 14px; top: 14px; padding: 6px 11px; font-size: 0.62rem; }

  /* Guarantee stamp smaller on small phones */
  .guarantee-stamp { width: 84px; height: 84px; top: 14px; right: 14px; }
  .guarantee-stamp .big { font-size: 1.25rem; }
  .guarantee-stamp .small { font-size: 0.44rem; letter-spacing: 0.1em; }
}

/* ═══════════════════════════════════════════════════
   MOBILE BUTTON-PAIR ALIGNMENT
   Stack hero/page-hero CTAs at small widths so they
   become equal-width, visually balanced, full-bleed.
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* iOS 16px font for any form input to prevent auto-zoom */
  .form input, .form select, .form textarea { font-size: 16px; padding: 14px 16px; }
}
@media (max-width: 560px) {
  .hero__actions,
  .page-hero__copy .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 360px;
  }
  .hero__actions .btn,
  .page-hero__copy .actions .btn {
    width: 100%;
    justify-content: center;
    padding-block: 16px;
  }
}
/* At small-but-not-tiny widths, keep buttons side-by-side but equal width */
@media (min-width: 561px) and (max-width: 880px) {
  .hero__actions,
  .page-hero__copy .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero__actions .btn,
  .page-hero__copy .actions .btn {
    flex: 1 1 200px;
    justify-content: center;
  }
}

/* Tap-target safety net — anywhere a button/link should be 44x44+ */
@media (max-width: 980px) {
  .hdr-cta .menu-toggle { width: 44px; height: 44px; }
  .nav-drawer__close { width: 44px; height: 44px; }
  .to-top { width: 48px; height: 48px; bottom: 16px; right: 16px; }
}

/* Reduce horizontal overflow risk */
html, body { overflow-x: clip; }

/* iOS safe-area awareness */
@supports (padding: max(0px)) {
  .site-hdr { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .fab-bar { bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); }
}

/* ═══════════════════════════════════════════════════
   NEW HEADER · with Services dropdown + Book Now CTA
   ═══════════════════════════════════════════════════ */

.hdr-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}
.hdr-brand-lockup .name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.hdr-brand-lockup .name em {
  font-style: normal;
  color: var(--navy);
  letter-spacing: 0.18em;
  margin-left: 4px;
}
.hdr-brand-lockup .tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe-muted);
}
@media (max-width: 540px) {
  .hdr-brand-lockup .name { font-size: 1.2rem; }
  .hdr-brand-lockup .tag { display: none; }
}

/* Brand mark (icon next to lockup) */
.hdr-brand__mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  transition: transform .55s var(--ease);
}
.hdr-brand:hover .hdr-brand__mark {
  transform: rotate(-6deg) scale(1.06);
}
@media (max-width: 540px) {
  .hdr-brand__mark { width: 38px; height: 38px; }
}

.nav-drawer__brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.foot-simple__mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.hdr-nav .has-dropdown {
  position: relative;
}
/* Invisible bridge that fills the 18px gap between the Services trigger
   and the dropdown panel below it. Without this, moving the cursor down
   leaves :hover and the dropdown closes before the user can reach it. */
.hdr-nav .has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px; right: -12px;
  height: 24px;
  pointer-events: none;
}
.hdr-nav .has-dropdown:hover::after,
.hdr-nav .has-dropdown:focus-within::after,
.hdr-nav .has-dropdown.is-open::after {
  pointer-events: auto;
}
.hdr-nav .has-dropdown > a {
  display: inline-flex; align-items: center; gap: 6px;
}
.hdr-nav .has-dropdown > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s var(--ease);
}
.hdr-nav .has-dropdown:hover > a::after,
.hdr-nav .has-dropdown.is-open > a::after {
  transform: rotate(-135deg) translateY(0);
}
.hdr-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(11, 31, 58, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  z-index: 10;
}
.hdr-dropdown::before {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.has-dropdown:hover .hdr-dropdown,
.has-dropdown.is-open .hdr-dropdown,
.has-dropdown:focus-within .hdr-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}
.hdr-dropdown a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
  transition: background .25s var(--ease), color .25s var(--ease), padding-left .3s var(--ease);
}
.hdr-dropdown a::before { display: none; }
.hdr-dropdown a .lbl {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  display: block;
  margin-bottom: 4px;
}
.hdr-dropdown a:hover {
  background: var(--beige);
  padding-left: 20px;
}
.hdr-dropdown a:hover .arrow { transform: translateX(4px); }
.hdr-dropdown a .arrow {
  width: 14px; height: 14px;
  color: var(--taupe-700);
  transition: transform .3s var(--ease);
}

.btn--booknow {
  background: var(--navy);
  color: var(--beige);
  padding: 12px 22px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  font-weight: 600;
}
.btn--booknow:hover { background: var(--taupe-700); color: var(--beige); }

/* ═══════════════════════════════════════════════════
   "SOLUTIONS FOR EVERY SPACE" — 4-tile service grid
   ═══════════════════════════════════════════════════ */
.solutions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.solution {
  position: relative;
  display: flex; flex-direction: column;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* No overflow:hidden here so the icon can hang below the image area. */
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.solution:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px -40px rgba(11, 31, 58, 0.25);
  border-color: var(--taupe);
}
.solution__img {
  position: relative;
  aspect-ratio: 5 / 3.4;
  background: var(--beige-deep);
}
/* Picture wrapper clips the image (so the hover scale stays bounded)
   without clipping the icon that hangs over the bottom edge. */
.solution__img > picture {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.solution__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1s var(--ease);
  filter: brightness(0.92) saturate(0.96);
}
.solution:hover .solution__img img { transform: scale(1.07); filter: brightness(1) saturate(1); }
.solution__icon {
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--beige);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 14px 30px -14px rgba(11, 31, 58, 0.5);
  transition: background .4s var(--ease), transform .55s var(--ease);
}
.solution:hover .solution__icon { background: var(--taupe-700); transform: translateX(-50%) rotate(360deg); }
.solution__icon svg { width: 20px; height: 20px; }
.solution__body { padding: 38px 22px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.solution__name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.solution__desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0; flex: 1; }
.solution__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 10px;
  font-weight: 600;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.solution__link::after {
  content: "→";
  transition: transform .35s var(--ease);
}
.solution:hover .solution__link { color: var(--taupe-700); gap: 12px; }
.solution:hover .solution__link::after { transform: translateX(5px); }
@media (max-width: 1100px) { .solutions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .solutions { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════
   PACKAGE-WITH-INCLUDES — service page row component
   ═══════════════════════════════════════════════════ */
.package {
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.package:last-of-type { border-bottom: 1px solid var(--line); }

.package__visual {
  aspect-ratio: 5 / 4;
  border-radius: 8px;
  overflow: hidden;
  /* Sticky removed — it was making the image drift down as the user
     scrolled past the package, and pinning the includes panel out of
     alignment with its own copy. */
}
.package__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.package:hover .package__visual img { transform: scale(1.05); }

.package__copy { padding-top: 6px; }
.package__copy h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.package__copy .type-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  margin-bottom: 16px;
  display: block;
}
.package__copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.package__copy .note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--beige);
  border-left: 2px solid var(--taupe);
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-radius: 2px;
}

.package__includes {
  background: var(--beige);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  /* Sticky removed so the includes panel stays in its own row,
     properly aligned with its matching image and copy. */
}
.package__includes h5 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.package__includes ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.package__includes li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.package__includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--taupe);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F4F1EC' stroke-width='2'><polyline points='2.5 6.5 5 9 9.5 3.5'/></svg>");
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 1080px) {
  .package { grid-template-columns: 1fr; gap: 32px; }
  .package__visual { max-width: 600px; margin-inline: auto; }
}

/* ═══════════════════════════════════════════════════
   ADD-ON SERVICES STRIP
   ═══════════════════════════════════════════════════ */
.addon-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  background: var(--beige);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3.5vw, 40px);
  margin-top: clamp(40px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.addon-strip::before {
  content: "✦";
  position: absolute;
  right: -10px; top: -30px;
  font-size: 200px;
  color: var(--taupe);
  opacity: 0.08;
  z-index: -1;
  font-family: var(--display);
  line-height: 1;
}
.addon-strip__copy { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; }
.addon-strip__copy .eyebrow-row {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.addon-strip__copy .eyebrow-row::before { content: "✦"; color: var(--taupe-700); font-size: 0.85rem; }
.addon-strip__copy h4 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--navy);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
}
.addon-strip__copy p { font-size: 0.95rem; color: var(--ink-soft); margin: 4px 0 0; }
.addon-strip__link {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
}
.addon-strip__link:hover { background: var(--navy); color: var(--beige); gap: 14px; }
.addon-strip__link svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .addon-strip { flex-direction: column; align-items: flex-start; gap: 18px; }
  .addon-strip__link { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   MID-PAGE CTA STRIP — "Ready for a Higher Standard"
   ═══════════════════════════════════════════════════ */
.mid-cta {
  background: var(--navy);
  color: var(--beige);
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mid-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(183, 159, 146, 0.16), transparent 55%);
  z-index: -1;
}
.mid-cta__copy { display: flex; flex-direction: column; gap: 4px; max-width: 60ch; }
.mid-cta__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  color: var(--beige);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.mid-cta__title em { color: var(--taupe); font-style: italic; font-weight: 400; }
.mid-cta__sub {
  color: rgba(244, 241, 236, 0.75);
  font-size: 0.92rem;
}
.mid-cta__btn {
  background: transparent;
  border: 1px solid rgba(244, 241, 236, 0.6);
  color: var(--beige);
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
  white-space: nowrap;
}
.mid-cta__btn:hover { background: var(--taupe); border-color: var(--taupe); color: var(--navy); gap: 14px; }
.mid-cta__btn svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .mid-cta { flex-direction: column; align-items: flex-start; gap: 18px; padding: 32px 28px; }
}

/* ═══════════════════════════════════════════════════
   PRINCIPLES GRID — About page "Principles Behind"
   ═══════════════════════════════════════════════════ */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.principle {
  display: flex; flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.principle__icon {
  width: 72px; height: 72px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: background .4s var(--ease), color .4s var(--ease), transform .55s var(--ease), border-color .4s var(--ease);
}
.principle:hover .principle__icon {
  background: var(--navy);
  color: var(--taupe);
  border-color: var(--navy);
  transform: rotate(8deg) scale(1.06);
}
.principle__icon svg { width: 30px; height: 30px; }
.principle__name {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.principle__desc {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 26ch;
  margin: 0 auto;
  line-height: 1.55;
}
@media (max-width: 980px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .principles { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════
   CONTACT — split form / info layout
   ═══════════════════════════════════════════════════ */
.contact-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(28px, 4vw, 44px);
}
.contact-form-card h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.contact-form-card .form .submit { grid-column: 1 / -1; margin-top: 8px; }
.contact-form-card .form .submit .btn { width: 100%; justify-content: center; padding-block: 18px; }
.contact-form-card .respond-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.contact-form-card .respond-note::before { content: "● "; color: #2BC48A; }

.contact-info { padding-top: 8px; }
.contact-info > h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  margin-bottom: 28px;
  font-weight: 600;
}
.contact-item {
  display: flex; gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-item:first-of-type { border-top: 1px solid var(--line); }
.contact-item__icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.contact-item:hover .contact-item__icon { background: var(--navy); color: var(--taupe); }
.contact-item__icon svg { width: 18px; height: 18px; }
.contact-item__body { display: flex; flex-direction: column; gap: 2px; }
.contact-item__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  font-weight: 600;
}
.contact-item__value {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.contact-item__value a { color: inherit; transition: color .25s var(--ease); }
.contact-item__value a:hover { color: var(--taupe-700); }
.contact-item__sub { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 980px) {
  .contact-split { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════
   SIMPLE 3-COL FOOTER (new variant)
   ═══════════════════════════════════════════════════ */
.foot-simple {
  background: var(--navy);
  color: rgba(244, 241, 236, 0.78);
  position: relative;
  overflow: hidden;
}
.foot-simple::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 420px at 12% 0%, rgba(183, 159, 146, 0.10), transparent 60%),
    radial-gradient(600px 320px at 92% 100%, rgba(183, 159, 146, 0.06), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.foot-simple > * { position: relative; z-index: 1; }

.foot-simple__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(50px, 7vw, 84px);
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
}
.foot-simple__brand .foot-simple__lockup {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--beige);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 14px;
}
.foot-simple__brand .foot-simple__lockup em { font-style: normal; color: var(--beige); letter-spacing: 0.18em; }
.foot-simple__brand p {
  color: rgba(244, 241, 236, 0.62);
  max-width: 38ch;
  font-size: 0.95rem;
  line-height: 1.6;
}
.foot-simple__brand .tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 4px;
}
.foot-simple__social { display: flex; gap: 10px; margin-top: 20px; }
.foot-simple__social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(244, 241, 236, 0.7);
  transition: all .35s var(--ease);
}
.foot-simple__social a:hover {
  background: var(--taupe);
  color: var(--navy);
  border-color: var(--taupe);
  transform: translateY(-3px);
}
.foot-simple__social svg { width: 14px; height: 14px; }

.foot-simple__col h5 {
  color: var(--taupe);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
}
.foot-simple__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-simple__col a {
  color: rgba(244, 241, 236, 0.74);
  font-size: 0.95rem;
  transition: color .3s var(--ease), padding-left .35s var(--ease);
  display: inline-block;
}
.foot-simple__col a:hover { color: var(--taupe); padding-left: 6px; }

.foot-simple__contact-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.foot-simple__contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.foot-simple__contact-list svg { width: 16px; height: 16px; color: var(--taupe); flex-shrink: 0; margin-top: 3px; }
.foot-simple__contact-list a { color: var(--beige); font-size: 0.95rem; transition: color .3s var(--ease); }
.foot-simple__contact-list a:hover { color: var(--taupe); }
.foot-simple__contact-list .meta { color: rgba(244, 241, 236, 0.55); font-size: 0.85rem; display: block; margin-top: 2px; }

.foot-simple__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding-block: 28px;
  font-size: 0.82rem;
  color: rgba(244, 241, 236, 0.5);
}
.foot-simple__legal { display: flex; gap: 22px; }
.foot-simple__legal a { color: inherit; transition: color .3s var(--ease); }
.foot-simple__legal a:hover { color: var(--taupe); }

@media (max-width: 980px) {
  .foot-simple__grid { grid-template-columns: 1fr 1fr; }
  .foot-simple__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .foot-simple__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   HOME REVIEW BIG — featured single review with image
   ═══════════════════════════════════════════════════ */
.review-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.review-feature__visual {
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.review-feature__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.review-feature:hover .review-feature__visual img { transform: scale(1.05); }
.review-feature__visual::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(11, 31, 58, 0.25));
  z-index: 1;
}
.review-feature__copy h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.15;
}
.review-feature__copy h3 em { color: var(--taupe-700); font-style: italic; font-weight: 400; }
.review-feature__copy .stars {
  color: var(--taupe-700);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.review-feature__copy blockquote {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 22px;
  border-left: 2px solid var(--taupe);
  padding-left: 22px;
}
.review-feature__copy .meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.review-feature__copy .meta strong { color: var(--navy); font-weight: 600; }
@media (max-width: 880px) {
  .review-feature { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   FAQ PAGE HERO (different from inline FAQ on home)
   ═══════════════════════════════════════════════════ */
.faq-page-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.faq-page-list .faq__item { border-top: 0; border-bottom: 1px solid var(--line); }
.faq-page-list .faq__item:last-child { border-bottom: 0; }
.faq-page-list .faq__btn { padding-block: 32px; }

/* ═══════════════════════════════════════════════════
   SCROLL-DRIVEN STORYTELLING UTILITIES
   ═══════════════════════════════════════════════════ */

/* Horizontal-scroll services row (for "Solutions" if user prefers carousel on mobile) */
.h-services {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 30px 6px 30px;
  scroll-padding-left: var(--gut-x);
}
.h-services::-webkit-scrollbar { display: none; }
.h-services > .solution {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

/* Marquee text reveal on scroll (uses .reveal-marquee) */
.reveal-marquee {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-block: 12px;
  white-space: nowrap;
  width: 100%;
}
.reveal-marquee > span {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2rem, 8vw, 7rem);
  color: var(--beige-deep);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 28px;
  transform: translateX(40%);
  transition: transform 2.4s var(--ease), color 1.6s var(--ease);
}
.reveal-marquee.in > span { transform: translateX(-20%); color: var(--taupe-700); }
.reveal-marquee > span::after {
  content: "✦";
  font-style: normal;
  color: var(--taupe);
  font-size: 0.7em;
  vertical-align: middle;
}

/* Scroll-pinned hero variant — image stays as you scroll past it */
.hero-pinned {
  position: relative;
  padding-top: calc(var(--hdr-h) + clamp(48px, 8vw, 100px));
}
.hero-pinned__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.hero-pinned__copy { padding-bottom: 80px; }
.hero-pinned__visual {
  position: sticky;
  top: calc(var(--hdr-h) + 24px);
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(11, 31, 58, 0.45);
}
.hero-pinned__visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .hero-pinned__grid { grid-template-columns: 1fr; }
  .hero-pinned__visual { position: relative; top: 0; aspect-ratio: 5 / 4; }
}

/* Animated SVG icons in principles — stroke draw */
.icon-draw path,
.icon-draw circle,
.icon-draw line,
.icon-draw polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.principle.in .icon-draw path,
.principle.in .icon-draw circle,
.principle.in .icon-draw line,
.principle.in .icon-draw polyline {
  stroke-dashoffset: 0;
}

/* Section title with scroll-driven outline reveal */
.section-title-big {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  max-width: 18ch;
  margin: 0 auto;
}
.section-title-big em { color: var(--taupe-700); font-style: italic; font-weight: 400; }

/* About page intro split */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.about-split--reverse { grid-template-columns: 1.05fr 1fr; }
.about-split--reverse .about-split__copy { order: 1; }
.about-split--reverse .about-split__visual { order: 2; }
.about-split__visual {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.about-split__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.about-split__visual:hover img { transform: scale(1.05); }
.about-split__copy h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 22px;
  letter-spacing: -0.015em;
}
.about-split__copy h2 em { color: var(--taupe-700); font-style: italic; font-weight: 400; }
.about-split__copy p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 16px;
}
@media (max-width: 880px) {
  .about-split, .about-split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .about-split--reverse .about-split__copy,
  .about-split--reverse .about-split__visual { order: unset; }
}

/* Image with mask reveal (used on service hero images)
   Default is fully revealed for no-JS / failsafe; JS-driven scroll
   reveal handled by the .reveal-img sibling effect. */
.mask-reveal {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--ease);
}
.mask-reveal.in { clip-path: inset(0 0 0 0); }
/* Optional: when body is "ready" but element hasn't intersected, hide it
   so the reveal animation has somewhere to come from. Browsers that don't
   support :has() or browsers where the failsafe forces .in still see the image. */
@supports selector(:has(*)) {
  body.is-ready .mask-reveal:not(.in) { clip-path: inset(0 0 0 100%); }
}

/* Smooth page transition curtain (slides up on link nav) */
.page-transition {
  position: fixed; inset: 0;
  background: var(--navy);
  z-index: 9998;
  transform: translateY(100%);
  pointer-events: none;
}
.page-transition.is-active {
  transform: translateY(0);
  transition: transform .55s var(--ease);
}

/* ═══════════════════════════════════════════════════
   IMAGE ROW — 3-up showcase strip (commercial/residential)
   ═══════════════════════════════════════════════════ */
.image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}
.image-row__cell {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--beige-deep);
}
.image-row__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1s var(--ease);
  filter: saturate(0.96);
}
.image-row__cell:hover img { transform: scale(1.06); filter: saturate(1); }
.image-row__cell::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 31, 58, 0.55));
  pointer-events: none;
  opacity: 0.7;
  transition: opacity .45s var(--ease);
}
.image-row__cell:hover::after { opacity: 0.45; }
.image-row__cap {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 7px 14px;
  background: rgba(244, 241, 236, 0.96);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  font-weight: 600;
  z-index: 2;
}
@media (max-width: 720px) {
  .image-row { grid-template-columns: 1fr 1fr; }
  .image-row__cell:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .image-row { grid-template-columns: 1fr; }
  .image-row__cell:nth-child(3) { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════
   VEGAS SERVICE-AREA MAP — Editorial Atlas
   Fully redesigned topographic illustration
   ═══════════════════════════════════════════════════ */
.section--map {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(183, 159, 146, 0.07), transparent 55%),
    var(--paper);
  overflow: hidden;
  position: relative;
}
.section--map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143,119,108,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,119,108,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.vegas-map-wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.45fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  position: relative;
}
.vegas-map-wrap__copy h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -0.015em;
}
.vegas-map-wrap__copy h2 em { color: var(--taupe-700); font-style: italic; font-weight: 400; }
.vegas-map-wrap__copy p { margin-bottom: 16px; }
.vegas-map-wrap__copy .meta-row {
  display: flex; gap: 32px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.vegas-map-wrap__copy .meta-row > div {
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .35s var(--ease);
}
.vegas-map-wrap__copy .meta-row > div:hover { transform: translateY(-2px); }
.vegas-map-wrap__copy .meta-row strong {
  font-family: var(--display);
  font-size: 1.75rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
}
.vegas-map-wrap__copy .meta-row strong small {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--taupe-700);
  margin-left: 2px;
  vertical-align: super;
  letter-spacing: 0.04em;
}
.vegas-map-wrap__copy .meta-row span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 980px) {
  .vegas-map-wrap { grid-template-columns: 1fr; gap: 50px; }
}

/* ─── Figure frame ─── */
.vegas-map-figure {
  margin: 0;
  position: relative;
  padding: 14px 18px 18px;
  background:
    linear-gradient(180deg, rgba(251,250,246,0.5), rgba(244,241,236,0.25));
  border: 1px solid rgba(143,119,108,0.22);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 40px 80px -40px rgba(11,31,58,0.12),
    0 12px 30px -20px rgba(143,119,108,0.18);
}
.vegas-map-figure::before,
.vegas-map-figure::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  height: 1px;
  background: rgba(143,119,108,0.20);
}
.vegas-map-figure::before { top: 36px; }
.vegas-map-figure::after  { bottom: 36px; }

.vegas-map-figure__head,
.vegas-map-figure__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 6px;
}
.vegas-map-figure__head { margin-bottom: 6px; }
.vegas-map-figure__foot { margin-top: 6px; }
.vegas-map-figure__head-l,
.vegas-map-figure__foot-l { color: var(--navy); font-weight: 600; }

/* ─── SVG ─── */
.vegas-map {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Frame & ticks */
.vmap-frame { opacity: 0; transition: opacity 1s var(--ease) 0.15s; }
.vegas-map.in .vmap-frame { opacity: 1; }
.vmap-ticks text {
  fill: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 500;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.4s;
}
.vegas-map.in .vmap-ticks text { opacity: 0.7; }

/* Topographic lines — animated draw-in */
.vmap-topo path {
  stroke: rgba(143,119,108,0.32);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.vegas-map.in .vmap-topo path { stroke-dashoffset: 0; }
.vegas-map.in .vmap-topo path:nth-child(1) { transition-delay: 0.10s; }
.vegas-map.in .vmap-topo path:nth-child(2) { transition-delay: 0.18s; }
.vegas-map.in .vmap-topo path:nth-child(3) { transition-delay: 0.26s; }
.vegas-map.in .vmap-topo path:nth-child(4) { transition-delay: 0.34s; }
.vegas-map.in .vmap-topo path:nth-child(5) { transition-delay: 0.42s; }
.vegas-map.in .vmap-topo path:nth-child(6) { transition-delay: 0.50s; }
.vegas-map.in .vmap-topo path:nth-child(7) { transition-delay: 0.58s; }
.vegas-map.in .vmap-topo path:nth-child(8) { transition-delay: 0.66s; }

/* Mountain massifs — elevation ring sets */
.vmap-massif ellipse {
  stroke: rgba(143,119,108,0.40);
  stroke-width: 0.9;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.vmap-massif ellipse:nth-child(2) { stroke: rgba(143,119,108,0.50); }
.vmap-massif ellipse:nth-child(3) { stroke: rgba(143,119,108,0.60); }
.vmap-massif ellipse:nth-child(4) { stroke: rgba(143,119,108,0.75); }
.vmap-massif ellipse:nth-child(5) { stroke: rgba(143,119,108,0.90); fill: rgba(143,119,108,0.05); }
.vegas-map.in .vmap-massif ellipse:nth-child(1) { opacity: 1; transition-delay: 0.55s; }
.vegas-map.in .vmap-massif ellipse:nth-child(2) { opacity: 1; transition-delay: 0.65s; }
.vegas-map.in .vmap-massif ellipse:nth-child(3) { opacity: 1; transition-delay: 0.75s; }
.vegas-map.in .vmap-massif ellipse:nth-child(4) { opacity: 1; transition-delay: 0.85s; }
.vegas-map.in .vmap-massif ellipse:nth-child(5) { opacity: 1; transition-delay: 0.95s; }

/* Peak markers */
.vmap-peak text {
  fill: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.20em;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.8s var(--ease) 1.1s;
}
.vmap-peak polygon {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 1.05s;
}
.vegas-map.in .vmap-peak text,
.vegas-map.in .vmap-peak polygon { opacity: 1; }

/* The Strip */
.vmap-strip {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.95s;
}
.vmap-strip-label {
  fill: var(--taupe-700);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.28em;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.8s var(--ease) 1.2s;
}
.vegas-map.in .vmap-strip,
.vegas-map.in .vmap-strip-label { opacity: 1; }

/* Service radius */
.vmap-radius {
  fill: rgba(183,159,146,0.04);
  stroke: var(--taupe);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: 0;
  transform-origin: 498px 318px;
  transform: scale(0.94);
  transition: opacity 1.5s var(--ease) 0.65s, transform 1.5s var(--ease) 0.65s;
}
.vegas-map.in .vmap-radius { opacity: 0.85; transform: scale(1); }

/* Lake Mead */
.vmap-lake path,
.vmap-lake text {
  opacity: 0;
  transition: opacity 1s var(--ease) 0.9s;
}
.vmap-lake text {
  fill: rgba(120,150,180,0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.28em;
  font-weight: 600;
}
.vegas-map.in .vmap-lake path,
.vegas-map.in .vmap-lake text { opacity: 1; }

/* Neighborhood pins */
.vmap-pin {
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--pop);
  transition-delay: var(--d, 0s);
  cursor: pointer;
}
.vegas-map.in .vmap-pin { opacity: 1; transform: translateY(0); }
.vmap-pin circle {
  fill: var(--navy);
  transition: fill 0.3s var(--ease), r 0.3s var(--ease);
}
.vmap-pin text {
  fill: var(--navy);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.20em;
  font-weight: 600;
  transition: fill 0.3s var(--ease);
}
.vmap-pin:hover circle { fill: var(--taupe-700); r: 5; }
.vmap-pin:hover text   { fill: var(--taupe-700); }

/* LAS VEGAS center surveyor's mark */
.vmap-center {
  opacity: 0;
  transition: opacity 1s var(--ease) 1.1s;
}
.vegas-map.in .vmap-center { opacity: 1; }
.vmap-center__halo {
  fill: rgba(183,159,146,0.22);
  transform-origin: center;
  animation: vmap-center-pulse 3s ease-in-out infinite;
}
.vmap-center__ring {
  stroke: var(--taupe-700);
  stroke-width: 1.2;
}
.vmap-center__cross {
  stroke: var(--navy);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.vmap-center__dot {
  fill: var(--taupe-700);
}
.vmap-center__label {
  fill: var(--navy);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  font-weight: 700;
}

@keyframes vmap-center-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.35); opacity: 0.15; }
}

/* Compass rose */
.vmap-compass {
  opacity: 0;
  transition: opacity 0.9s var(--ease) 1.2s;
}
.vegas-map.in .vmap-compass { opacity: 0.7; }
.vmap-compass > circle:first-of-type {
  stroke: rgba(143,119,108,0.5);
  stroke-width: 0.8;
}
.vmap-compass__needle {
  fill: var(--navy);
  opacity: 0.85;
}
.vmap-compass__cross {
  stroke: rgba(143,119,108,0.55);
  stroke-width: 0.6;
}
.vmap-compass__n,
.vmap-compass__s {
  fill: var(--navy);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.vmap-compass__s { fill: var(--ink-mute); font-weight: 500; }

/* Scale bar */
.vmap-scale {
  opacity: 0;
  transition: opacity 0.9s var(--ease) 1.25s;
}
.vegas-map.in .vmap-scale { opacity: 0.7; }
.vmap-scale line {
  stroke: var(--navy);
  stroke-width: 1;
}
.vmap-scale text {
  fill: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* ─── Mobile tuning ─── */
@media (max-width: 880px) {
  .vegas-map-figure { padding: 12px 10px 14px; }
  .vegas-map-figure__head,
  .vegas-map-figure__foot { font-size: 0.55rem; letter-spacing: 0.18em; }
  .vmap-pin text { font-size: 7.5px; letter-spacing: 0.14em; }
  .vmap-peak text { font-size: 6.5px; letter-spacing: 0.14em; }
  .vmap-center__label { font-size: 10px; letter-spacing: 0.24em; }
}
@media (max-width: 540px) {
  .vegas-map-figure::before,
  .vegas-map-figure::after { display: none; }
  .vmap-pin text { font-size: 6.5px; letter-spacing: 0.10em; }
  .vmap-peak text { display: none; }
  .vmap-ticks text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vmap-topo path,
  .vmap-massif ellipse,
  .vmap-radius,
  .vmap-pin,
  .vmap-center,
  .vmap-compass,
  .vmap-scale,
  .vmap-peak text,
  .vmap-peak polygon,
  .vmap-strip,
  .vmap-strip-label,
  .vmap-lake path,
  .vmap-lake text,
  .vmap-ticks text,
  .vmap-frame {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .vmap-center__halo { animation: none !important; }
}

/* ═══════════════════════════════════════════════════
   WHY-CHOOSE-US 3-card grid
   ═══════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.why-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(11, 31, 58, 0.18);
  border-color: var(--taupe);
}
.why-card__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-muted);
  font-weight: 600;
}
.why-card__title {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.why-card__desc { font-size: 0.95rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.why-card__icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease);
  margin-bottom: 4px;
}
.why-card:hover .why-card__icon { background: var(--navy); color: var(--taupe); }
.why-card__icon svg { width: 22px; height: 22px; }
@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════
   POLISH LAYER — refinements across the whole site
   ═══════════════════════════════════════════════════ */

/* Custom scrollbar — taupe accent on paper track */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 159, 146, 0.55) transparent;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--beige-light); }
::-webkit-scrollbar-thumb {
  background: var(--taupe);
  border: 2px solid var(--beige-light);
  border-radius: 999px;
  transition: background .3s ease;
}
::-webkit-scrollbar-thumb:hover { background: var(--taupe-700); }
::-webkit-scrollbar-corner { background: var(--beige-light); }

/* Brand-aligned selection */
::selection { background: var(--taupe); color: var(--navy); }

/* Refined focus rings — accessibility + polish */
:focus-visible {
  outline: 2px solid var(--taupe-700);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Button shimmer — subtle light pass on filled buttons */
.btn--filled {
  position: relative;
  overflow: hidden;
}
.btn--filled::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -130%;
  width: 60%;
  background: linear-gradient(110deg, transparent 0%, rgba(244, 241, 236, 0.22) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .9s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.btn--filled:hover::after { left: 130%; }

/* Refined trust-mark hover lift */
.trust-mark {
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.trust-mark:hover { transform: translateY(-1px); }
.trust-mark:hover strong { color: var(--taupe-700); }

/* Solution card — subtle gradient border glow on hover */
.solution {
  isolation: isolate;
}
.solution::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--taupe), rgba(183, 159, 146, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.solution:hover::before { opacity: 1; }

/* Hero meta hover lift */
.hero__meta-item { transition: transform .35s var(--ease); }
.hero__meta-item:hover { transform: translateY(-2px); }

/* Editorial drop cap — apply via class="drop-cap" */
.drop-cap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.4em;
  line-height: 0.85;
  margin: 6px 14px -4px 0;
  color: var(--taupe-700);
  font-style: italic;
  font-weight: 500;
}

/* Decorative sparkle above section-title-big */
.section-title-big::before {
  content: "✦";
  display: block;
  font-size: 0.42em;
  color: var(--taupe-700);
  opacity: 0.7;
  margin-bottom: 0.5em;
  font-style: normal;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
}

/* Ornamental divider — rule with center mark, used between sections */
.divider-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  padding-block: clamp(28px, 4vw, 48px);
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.divider-ornament::before,
.divider-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--taupe), transparent);
  opacity: 0.7;
}
.divider-ornament__mark {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: inline-block;
  opacity: 0.65;
  color: var(--taupe-700);
}

/* Refined image hover transitions on visual cards */
.image-row__cell img,
.gallery__item img,
.testimonial-ed__visual img,
.about-split__visual img,
.review-feature__visual img {
  transition: transform 1.5s var(--ease), filter .8s var(--ease);
}

/* Subtle "tag" treatment for eyebrow .num for editorial weight */
.eyebrow .num {
  padding: 3px 9px 3px 9px;
  background: linear-gradient(180deg, rgba(183, 159, 146, 0.10), rgba(183, 159, 146, 0.04));
  border: 1px solid rgba(183, 159, 146, 0.22);
  border-radius: 3px;
  font-size: 0.66rem;
}

/* Refined card transitions (consistency) */
.review, .tier, .why-card, .principle, .solution {
  will-change: transform;
}

/* Refined link hover for content links */
.legal a {
  position: relative;
  background-image: linear-gradient(var(--taupe), var(--taupe));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s var(--ease), color .3s var(--ease);
}
.legal a:hover {
  background-size: 100% 1px;
  color: var(--navy);
}

/* Subtle gradient accent on package__includes — premium feel */
.package__includes {
  background: linear-gradient(180deg, var(--beige) 0%, var(--paper) 100%);
  position: relative;
}
.package__includes::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--taupe), transparent);
  border-radius: 8px 8px 0 0;
  opacity: 0.6;
}

/* Form field nicer focus */
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: white;
  box-shadow: 0 0 0 4px rgba(183, 159, 146, 0.18);
}

/* Header background refinement — slightly stronger blur when scrolled */
.site-hdr.is-scrolled {
  background: rgba(251, 250, 246, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px -22px rgba(11, 31, 58, 0.08);
}

/* Mid-CTA — subtle inner highlight */
.mid-cta::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 159, 146, 0.4), transparent);
  pointer-events: none;
}

/* ─── prefers-reduced-motion ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero__visual img { animation: none; }
  .reveal-marquee > span { transform: none; }
  .vmap-center__halo { animation: none !important; }
  .btn--filled::after { display: none; }
}