/* ============================================================
   Bright-Side Home Services — bright-side.ca
   Brand tokens taken from the existing Bright-Side identity.
   ============================================================ */

:root {
  /* Brand palette — logo navy + royal blue */
  --ink:        #0b1c45;   /* logo lettering navy — headings, dark sections */
  --blue:       #1d3a8f;   /* deep royal — hovers, depth */
  --ink-soft:   #475673;   /* blue-grey — body copy */
  --paper:      #ffffff;   /* page ground */
  --off:        #f5f7fd;   /* royal-tinted off-white wash */
  --pane:       #e9edfb;   /* light wash, chips */
  --pane-deep:  #d5ddf6;
  --sun:        #4169e1;   /* royal blue — primary accent */
  --sun-deep:   #2e4fc4;
  --sky:        #3a5ede;   /* royal blue — links, icons */
  --sky-light:  #8aa2ef;   /* light royal highlight */
  --sky-deep:   #1d3a8f;
  --star:       #f5a623;   /* review stars only — ratings stay gold */
  --white:      #ffffff;

  /* Type */
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Open Sans", "Segoe UI", sans-serif;

  /* Rhythm */
  --container: 1140px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(80px, 10vw, 128px);
  --radius: 16px;
  --radius-lg: 22px;

  /* Motion — the “buttery” curve used everywhere */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
  --speed: 0.55s;

  --shadow-soft: 0 4px 22px rgba(11, 28, 69, 0.07);
  --shadow-lift: 0 16px 44px rgba(11, 28, 69, 0.14);

  --topbar-h: 36px;
  --nav-h: 80px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; }

p { margin: 0 0 1.1em; max-width: 64ch; }

a {
  color: var(--sky);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
a:hover { color: var(--blue); }

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

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.62); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--sun);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 9999px;
  border: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: var(--sun);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(65, 105, 225, 0.35);
  transition:
    transform var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out),
    background var(--speed) var(--ease-out),
    color var(--speed) var(--ease-out);
}
.btn:hover {
  background: var(--sun-deep);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(46, 79, 196, 0.4);
}
.btn:active { transform: translateY(-1px) scale(0.99); }

.btn .arrow { transition: transform var(--speed) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-white {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.btn-white:hover {
  background: var(--sun);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}

.btn-navy {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
  padding: 11px 24px;
  font-size: 0.85rem;
}
.btn-navy:hover { background: var(--blue); color: var(--white); box-shadow: none; }

/* ---------- Top bar ---------- */

.top-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 110;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-inline: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.top-bar a { color: var(--sky-light); font-weight: 700; }
.top-bar a:hover { color: var(--white); }
.top-bar .tb-hours { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 640px) { .top-bar .tb-hours { display: none; } }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11, 28, 69, 0.06);
  transition: box-shadow var(--speed) var(--ease-out), height var(--speed) var(--ease-out);
}
.site-header.scrolled {
  height: 68px;
  box-shadow: 0 4px 30px rgba(11, 28, 69, 0.1);
}

.header-inner {
  height: 100%;
  width: min(1360px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.brand {
  justify-self: center;
  display: flex;
  align-items: center;
}
.brand img {
  height: 68px;
  width: auto;
  transition: height var(--speed) var(--ease-out);
}
.site-header.scrolled .brand img { height: 56px; }

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
}
.nav > a,
.nav-drop > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
  white-space: nowrap;
}
.nav > a:hover,
.nav-drop > button:hover,
.nav-drop.open > button {
  color: var(--ink);
  background: var(--pane);
}

.nav-drop { position: relative; }
.nav-drop > button .caret {
  width: 9px; height: 9px;
  opacity: 0.55;
  transition: transform 0.35s var(--ease-out);
}
.nav-drop.open > button .caret { transform: rotate(180deg); }

.drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 9px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--pane-deep);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    visibility 0.35s;
  z-index: 120;
}
.nav-drop.open .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.drop-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-soft);
  transition: background 0.25s var(--ease-out), color 0.25s, transform 0.25s var(--ease-out);
  white-space: nowrap;
}
.drop-menu a:hover {
  background: var(--pane);
  color: var(--ink);
  transform: translateX(3px);
}
.drop-menu-tall { max-height: min(60vh, 520px); overflow-y: auto; }
.drop-note {
  padding: 10px 14px 4px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-socials {
  display: flex;
  gap: 14px;
  align-items: center;
}
.nav-socials a {
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  transition: color 0.2s, transform 0.3s var(--ease-out);
}
.nav-socials a:hover { color: var(--ink); transform: translateY(-2px); }
.nav-socials svg { width: 19px; height: 19px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 11px;
  border: 0;
  border-radius: 12px;
  background: var(--pane);
  cursor: pointer;
  justify-self: start;
}
.menu-toggle span {
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.site-header.open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-header.open .menu-toggle span:nth-child(2) { opacity: 0; }
.site-header.open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu-toggle { display: flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px var(--gutter) 26px;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  .site-header.open .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav > a, .nav-drop > button { width: 100%; justify-content: space-between; padding: 13px 16px; font-size: 1rem; }
  .nav-drop .drop-menu {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 14px;
    display: none;
  }
  .nav-drop.open .drop-menu { display: block; }
  .nav-socials { display: none; }
  .brand img { height: 48px; }
}

/* ---------- Hero (drone shot) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--topbar-h) + var(--nav-h));
}
.hero.compact { min-height: clamp(520px, 72svh, 720px); align-items: flex-end; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #8CC7E8 0%, #A9D8EF 55%, #BFE3F2 100%);
}
.hero-media canvas,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: ken-burns 28s var(--ease-soft) infinite alternate;
  will-change: transform;
}
/* a blurred copy fills the frame behind tall phone photos so nothing shows through */
.hero-media .hero-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(26px) saturate(1.1);
  transform: scale(1.15);
}
@keyframes ken-burns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.07); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(11, 28, 69, 0.34) 0%,
    rgba(11, 28, 69, 0.46) 50%,
    rgba(11, 28, 69, 0.7) 100%
  );
}

/* Page heroes set their copy against the left edge, and some of these photos
   are a white van in full sun, which white type has no chance against. A
   second gradient weights that side only. It is gone by two thirds across so
   the right of the picture, where the subject usually is, keeps its light.
   The home page hero is centred, so it does not get this. */
.page-hero .hero-scrim {
  background:
    linear-gradient(
      90deg,
      rgba(11, 28, 69, 0.6) 0%,
      rgba(11, 28, 69, 0.32) 38%,
      rgba(11, 28, 69, 0) 66%
    ),
    linear-gradient(
      180deg,
      rgba(11, 28, 69, 0.34) 0%,
      rgba(11, 28, 69, 0.46) 50%,
      rgba(11, 28, 69, 0.7) 100%
    );
}
@media (max-width: 720px) {
  /* narrow enough that the copy sits over the whole frame anyway */
  .page-hero .hero-scrim {
    background: linear-gradient(180deg, rgba(11, 28, 69, 0.46), rgba(11, 28, 69, 0.72));
  }
}

/* light sweep — a slow clean wipe across the hero */
.hero-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-sweep::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -60%;
  width: 40%;
  height: 300%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  animation: sweep 5.5s var(--ease-soft) infinite;
  animation-delay: 1.5s;
}
@keyframes sweep {
  0% { left: -60%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 7vh, 90px);
}
.hero-inner.center {
  text-align: center;
  display: grid;
  justify-items: center;
}

/* A tight dark halo as well as the soft glow. The soft one alone
   disappears against a white van in full sun. */
.hero h1 {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(6, 16, 40, 0.55), 0 4px 30px rgba(0, 0, 0, 0.45);
}
.hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
}
.hero .lede {
  color: rgba(255, 255, 255, 0.92);
  max-width: 56ch;
  text-shadow: 0 1px 3px rgba(6, 16, 40, 0.6);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  margin-bottom: 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.hero-kicker .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: pulse-dot 2s var(--ease-soft) infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero-inner.center .hero-actions { justify-content: center; }
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { justify-content: center; }
}

/* staggered word rise (interior pages) */
.hero h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero h1 .w > span {
  display: inline-block;
  transform: translateY(110%);
  animation: word-rise 0.9s var(--ease-out) forwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.07s);
}
@keyframes word-rise { to { transform: translateY(0); } }

.hero-fade {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-fade 0.9s var(--ease-out) forwards;
}
@keyframes hero-fade { to { opacity: 1; transform: translateY(0); } }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 1;
}
.scroll-mouse {
  width: 22px; height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-wheel {
  width: 3px; height: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  animation: scroll-wheel 1.8s var(--ease-soft) infinite;
}
@keyframes scroll-wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(8px); opacity: 0; }
}

/* ---------- Reveal on scroll ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Stats ---------- */

.stats-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 1120px;
  margin-inline: auto;
}
.stat-item { padding: 12px; }
.stat-icon {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  color: var(--ink);
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}
.stat-divider { width: 1px; background: var(--pane-deep); align-self: stretch; }
@media (max-width: 1040px) {
  /* two by two, and the vertical rules stop making sense */
  .stats-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; max-width: 620px; }
  .stat-divider { display: none; }
}
@media (max-width: 520px) {
  .stats-inner { grid-template-columns: 1fr; }
}

/* ---------- Trusted-by marquee ---------- */

.logos-band {
  background: var(--pane);
  padding-block: 44px;
  overflow: hidden;
}
.logos-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-bottom: 26px;
}
.marquee-wrap { position: relative; overflow: hidden; }
.marquee-wrap::before,
.marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--pane), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--pane), transparent); }

.marquee {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.marquee-group span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0.65;
  transition: opacity 0.3s, color 0.3s;
}
.marquee-group span:hover { opacity: 1; color: var(--ink); }
.marquee-group .logo-item { opacity: 1; }
.logo-item img {
  height: 44px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s, opacity 0.3s, transform 0.3s var(--ease-out);
}
.logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Service cards ---------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 32px 28px 28px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--pane-deep);
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
  overflow: hidden;
  transition:
    transform var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out),
    border-color var(--speed) var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  color: var(--ink-soft);
}
.svc-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--sky-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) var(--ease-out);
}
.svc-card:hover::after { transform: scaleX(1); }

.svc-icon {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--pane);
  color: var(--sky);
  transition: transform var(--speed) var(--ease-out), background var(--speed) var(--ease-out), color var(--speed) var(--ease-out);
}
.svc-card:hover .svc-icon {
  background: var(--sun);
  color: var(--white);
  transform: rotate(-6deg) scale(1.06);
}
.svc-icon svg { width: 28px; height: 28px; }

.svc-card h3 { margin-bottom: 0; }
.svc-card p { margin: 0; font-size: 0.93rem; }
.svc-more {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--sky);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.svc-more .arrow { transition: transform var(--speed) var(--ease-out); }
.svc-card:hover .svc-more .arrow { transform: translateX(5px); }

/* dark variant — services on navy, like the main site */
.services-dark {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.services-dark::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.services-dark .section-head h2 { color: var(--white); }
.services-dark .section-head p { color: rgba(255, 255, 255, 0.6); }
.services-dark .eyebrow { color: var(--sky-light); }
.services-dark .svc-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.6);
}
.services-dark .svc-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.65);
}
.services-dark .svc-card h3 { color: var(--white); }
.services-dark .svc-icon { background: rgba(255, 255, 255, 0.08); color: var(--sky-light); }
.services-dark .svc-more { color: var(--sky-light); }

/* chips — the rest of the service menu */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 0.83rem;
  font-weight: 500;
  transition: background 0.3s var(--ease-out), color 0.3s, transform 0.3s var(--ease-out);
}
.chip:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
  transform: translateY(-2px);
}

/* ---------- Split / checklist ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }

.check-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.check-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.check-list.two-col {
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  margin-top: 0;
}
@media (max-width: 760px) { .check-list.two-col { grid-template-columns: 1fr; } }
.check-list .tick {
  flex: none;
  width: 28px; height: 28px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--white);
}
.check-list .tick svg { width: 14px; height: 14px; }
.check-list strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- 3D service area map ---------- */

.map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--off), var(--pane));
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--pane-deep);
}
.map-stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 58vw, 620px);
  cursor: grab;
  touch-action: pan-y;
}
/* the plate is wide and short, so a tall box on a phone is just dead space */
@media (max-width: 760px) {
  .map-stage { height: clamp(280px, 76vw, 420px); }
}
.map-stage canvas { display: block; outline: none; }
.map-stage canvas:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }

.map-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 7px 12px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-lift);
  z-index: 2;
}

.map-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border-top: 1px solid var(--pane-deep);
  background: var(--white);
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
}
.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.map-legend i {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.map-legend .k-base { background: var(--star); }
.map-legend .k-town { background: var(--sun); }
.map-legend .k-water { background: var(--sky-light); border-radius: 3px; }
.map-legend .k-edge {
  width: 20px; height: 0;
  border-radius: 0;
  border-top: 2.5px dashed var(--sun);
}
.map-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- multi-select service checkboxes ---------- */

.service-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 520px) { .service-picker { grid-template-columns: 1fr; } }

.service-picker label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid var(--pane-deep);
  border-radius: 11px;
  background: var(--off);
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.service-picker label:hover { border-color: var(--sun); }
.service-picker input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px; height: 19px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--pane-deep);
  border-radius: 6px;
  background: var(--white);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.service-picker input::after {
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform 0.15s var(--ease-out);
  box-shadow: inset 1em 1em var(--white);
  clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 84% 0, 40% 62%);
}
.service-picker input:checked { background: var(--sun); border-color: var(--sun); }
.service-picker input:checked::after { transform: scale(1); }
.service-picker input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.service-picker label:has(input:checked) {
  border-color: var(--sun);
  background: var(--pane);
}
.field-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 2px 0 0;
}
.map-hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.map-bar button {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--pane);
  border: 0;
  border-radius: 9999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.25s var(--ease-out);
}
.map-bar button:hover { background: var(--pane-deep); }

/* ---------- Landing-page work band ---------- */

.work-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.work-band .work-tile.tall {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 900px) {
  .work-band { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .work-band .work-tile.tall { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .work-band { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .work-band .work-tile.tall { grid-column: span 1; }
}

.work-tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.work-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.work-tile:hover img { transform: scale(1.06); }
.wt-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 13px;
  background: linear-gradient(180deg, transparent, rgba(11, 28, 69, 0.82));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}
.work-more {
  margin: 26px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- Photos ---------- */

.split-photo {
  margin: 0 0 22px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.split-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.split-photo:hover img { transform: scale(1.04); }

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 720px) { .photo-strip { grid-template-columns: 1fr; } }
.photo-strip figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.photo-strip figure:hover img { transform: scale(1.05); }

/* ---------- Before / after slider ----------
   Two photographs of the same thing stacked exactly on top of each other.
   The "before" sits in a clipped wrapper whose width is driven by --split,
   so dragging the handle wipes one image across the other. A real range
   input does the dragging, which gives keyboard and touch support free. */

.ba { max-width: 940px; margin: 0 auto; }

.ba-stage {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--ink);
  line-height: 0;
  touch-action: pan-y;
  user-select: none;
}

.ba-stage img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* On a phone the stage can afford to be portrait, which is the shape the
   photos were actually taken in, so nothing needs cropping away. */
@media (max-width: 620px) {
  .ba-stage img { aspect-ratio: 3 / 4; object-position: 50% 50%; }
}

.ba-clip {
  position: absolute;
  inset: 0;
  width: var(--split, 55%);
  overflow: hidden;
}
/* The clipped copy has to stay the full stage width or it squashes as it wipes. */
.ba-clip img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--stage-w, 100%);
  max-width: none;
}

.ba-tag {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--white);
  background: rgba(11, 28, 69, 0.72);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; background: rgba(65, 105, 225, 0.85); }
/* Once the handle runs to an edge, the label on that side has nothing left
   to name, so it fades out rather than sitting over the wrong photo. */
.ba-stage.at-start .ba-tag-before,
.ba-stage.at-end .ba-tag-after { opacity: 0; }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 55%);
  z-index: 4;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(11, 28, 69, 0.18);
  pointer-events: none;
}
.ba-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(11, 28, 69, 0.32);
  transition: transform 0.3s var(--ease-out);
}
/* Two chevrons pointing outward, drawn with borders so there is no asset. */
.ba-handle span::before,
.ba-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border: 2px solid var(--ink);
  border-width: 2px 2px 0 0;
}
.ba-handle span::before { left: 13px; transform: rotate(-135deg); }
.ba-handle span::after { right: 13px; transform: rotate(45deg); }
.ba-stage:hover .ba-handle span { transform: scale(1.08); }

/* The range input is the actual control. It is invisible but covers the
   whole stage, so a drag anywhere on the photo moves the wipe. */
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 100%;
  cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
  width: 56px;
  height: 240px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}
.ba-range:focus-visible + .ba-handle span,
.ba-stage:focus-within .ba-handle span {
  box-shadow: 0 0 0 4px var(--sun), 0 6px 20px rgba(11, 28, 69, 0.32);
}

.gallery-grid {
  columns: 3;
  column-gap: 18px;
}
@media (max-width: 980px) { .gallery-grid { columns: 2; } }
@media (max-width: 620px) { .gallery-grid { columns: 1; } }
.gallery-grid figure {
  margin: 0 0 18px;
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--pane);
}
.gallery-grid img {
  width: 100%;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.gallery-grid figure:hover img { transform: scale(1.04); }

.portfolio-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.portfolio-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.portfolio-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.portfolio-card .pc-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(11, 28, 69, 0.85));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Process steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 920px) { .steps { grid-template-columns: 1fr; } }
.step {
  counter-increment: step;
  position: relative;
  padding: 30px 28px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--pane-deep);
  box-shadow: var(--shadow-soft);
}
.step::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--pane);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
}
.step h3 { font-size: 1.1rem; }
.step p { margin: 0; font-size: 0.93rem; }

/* ---------- Reviews ---------- */

.reviews-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 26px;
}
.reviews-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.stars-row { display: flex; gap: 3px; }
.stars-row svg { width: 21px; height: 21px; color: var(--star); fill: var(--star); }
.reviews-score {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}
.reviews-count { font-size: 0.9rem; }

.reviews-divider { height: 1px; background: var(--pane-deep); margin-bottom: 40px; }

.reviews-grid {
  columns: 3;
  column-gap: 22px;
}
@media (max-width: 980px) { .reviews-grid { columns: 2; } }
@media (max-width: 640px) { .reviews-grid { columns: 1; } }

.review-card {
  break-inside: avoid;
  background: var(--off);
  border: 1px solid var(--pane-deep);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 22px;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.review-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}
.reviewer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.reviewer-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  flex-shrink: 0;
}
.reviewer-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.reviewer-time { font-size: 0.78rem; opacity: 0.7; }
.review-stars { display: flex; gap: 2px; margin-bottom: 10px; }
.review-stars svg { width: 14px; height: 14px; color: var(--star); fill: var(--star); }
.review-text { font-size: 0.9rem; line-height: 1.65; margin: 0; }
.review-footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ---------- Locations ---------- */

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 920px) { .locations-grid { grid-template-columns: 1fr; } }

.location-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--pane-deep);
  transition: box-shadow var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.location-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.location-map {
  width: 100%;
  height: 240px;
  background: var(--pane-deep);
  display: block;
  border: 0;
}
.location-body { padding: 28px; }
.location-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
}
.location-detail svg {
  width: 18px; height: 18px;
  color: var(--sky);
  flex-shrink: 0;
  margin-top: 3px;
}
.location-detail div { font-size: 0.92rem; line-height: 1.55; }
.location-detail strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 2px;
}
.location-detail a { font-weight: 700; }

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  right: -180px; top: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 162, 239, 0.28), transparent 65%);
  pointer-events: none;
}
.cta-band h2 { color: var(--white); }
.cta-band .lede { color: rgba(255, 255, 255, 0.75); }
.cta-band .eyebrow { color: var(--sky-light); }
.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 920px) { .cta-inner { grid-template-columns: 1fr; } }
.cta-contact { display: grid; gap: 13px; }
.cta-contact a, .cta-contact div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 19px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.cta-contact a:hover { background: rgba(255, 255, 255, 0.13); transform: translateX(4px); color: var(--white); }
.cta-contact svg { width: 21px; height: 21px; flex: none; color: var(--sky-light); }
.cta-contact small { display: block; font-family: var(--font-body); font-weight: 400; color: rgba(255, 255, 255, 0.55); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 13px; max-width: 780px; }
.faq details {
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--pane-deep);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
  transition: background 0.3s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--pane); }
.faq summary::after {
  content: "+";
  flex: none;
  width: 29px; height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pane);
  color: var(--blue);
  font-weight: 700;
  font-size: 1.15rem;
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--sun);
  color: var(--white);
}
.faq details > div { padding: 0 22px 20px; }
.faq details > div p { margin: 0; font-size: 0.94rem; }

/* ---------- Page hero (interior pages) ---------- */

.page-hero .hero-inner {
  padding-block: clamp(40px, 7vh, 80px) clamp(44px, 7vh, 72px);
}
.breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.8); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { opacity: 0.5; }

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

.info-card {
  display: grid;
  gap: 13px;
  padding: 32px 30px;
  border-radius: 20px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
}
.info-card h3 { color: var(--white); }
.info-card .row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--speed) var(--ease-out);
}
a.row:hover { background: rgba(255, 255, 255, 0.13); color: var(--white); }
.info-card .row svg { width: 21px; height: 21px; flex: none; color: var(--sky-light); margin-top: 2px; }
.info-card .row small { display: block; font-family: var(--font-body); font-weight: 400; color: rgba(255, 255, 255, 0.55); }

.form-card {
  padding: 34px 32px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--pane-deep);
  box-shadow: var(--shadow-soft);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 12px 15px;
  border-radius: 11px;
  border: 1.5px solid var(--pane-deep);
  background: var(--off);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(65, 105, 225, 0.15);
}
.form-note { font-size: 0.85rem; margin: 14px 0 0; }

/* ---------- Prose (terms) ---------- */

.prose { max-width: 740px; }
.prose h2 { font-size: 1.45rem; margin-top: 2.2em; }
.prose h2:first-of-type { margin-top: 0; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* ---------- Footer ---------- */

.site-footer {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.55);
  padding: 64px 0 48px;
  text-align: center;
}
.footer-logo img {
  height: 64px;
  width: auto;
  margin: 0 auto 8px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 26px;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 10px 28px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex-wrap: wrap;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.footer-socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.2s, color 0.2s, transform 0.3s var(--ease-out);
}
.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  transform: translateY(-2px);
}
.footer-socials svg { width: 17px; height: 17px; }

.footer-contact {
  margin-bottom: 18px;
  font-size: 0.88rem;
}
.footer-contact a { color: var(--sky-light); }
.footer-contact a:hover { color: var(--white); }

.footer-areas {
  max-width: 720px;
  margin: 0 auto 22px;
  font-size: 0.8rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.35);
}
.footer-areas a { color: rgba(255, 255, 255, 0.5); }
.footer-areas a:hover { color: var(--sky-light); }

.footer-insured {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.45);
}
.footer-insured svg { width: 15px; height: 15px; color: var(--sky-light); }

.footer-copy { font-size: 0.8rem; color: rgba(255, 255, 255, 0.3); }

/* ---------- Utility washes ---------- */

.wash { background: var(--off); }
.wash-white { background: var(--white); }

.section-head { max-width: 640px; margin-bottom: clamp(34px, 5vw, 54px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-inline: auto; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee { animation: none; flex-wrap: wrap; }
}

/* ---------- Quote form fallback panel ---------- */

.form-fallback {
  grid-column: 1 / -1;
  margin-top: 22px;
  padding: 22px 22px 20px;
  border: 1px solid var(--pane-deep);
  border-radius: var(--radius-lg);
  background: var(--off);
  outline: none;
}
.form-fallback h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.form-fallback p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.6;
}
.form-fallback textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--pane-deep);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  resize: vertical;
}
.form-fallback .fb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.form-fallback .fb-actions .btn { font-size: 0.84rem; padding: 11px 18px; }
/* .btn-ghost is built for dark backgrounds and vanishes on this panel */
.form-fallback .fb-actions .btn-ghost {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--pane-deep);
}
.form-fallback .fb-actions .btn-ghost:hover {
  background: var(--pane);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--sun);
}

/* screen reader only, for labels that would otherwise be silent */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Interactive 3D house ---------- */

.house-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pane-deep);
  box-shadow: var(--shadow-soft);
  background: linear-gradient(180deg, #b9d2ee, #eef4f9);
}
.house-stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 56vw, 640px);
  touch-action: pan-y;
}
.house-stage canvas { display: block; outline: none; }
.house-stage canvas:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; }

/* the wipe handle sits over the canvas as a real range input,
   so it works with a keyboard and with touch for free */
.house-wipe { position: absolute; inset: 0; display: block; pointer-events: none; }
.house-wipe input[type="range"] {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
}
.house-wipe input[type="range"]::-webkit-slider-runnable-track {
  height: 44px; background: transparent; border: 0;
}
.house-wipe input[type="range"]::-moz-range-track {
  height: 44px; background: transparent; border: 0;
}
.house-wipe input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234169e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;
  border: 3px solid var(--sun);
  box-shadow: 0 6px 18px rgba(11, 28, 69, 0.35);
  cursor: ew-resize;
}
.house-wipe input[type="range"]::-moz-range-thumb {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234169e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;
  border: 3px solid var(--sun);
  box-shadow: 0 6px 18px rgba(11, 28, 69, 0.35);
  cursor: ew-resize;
}
.house-wipe input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--ink); outline-offset: 2px;
}

.house-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.house-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.house-picks button,
.house-pins {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--pane);
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}
.house-picks button:hover, .house-pins:hover { background: var(--pane-deep); }
.house-picks button.is-on {
  background: var(--sun);
  color: var(--white);
  border-color: var(--sun);
}
.house-pins { background: transparent; border-color: var(--pane-deep); color: var(--ink-soft); }

.house-card {
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--off);
  border: 1px solid var(--pane-deep);
  max-width: 720px;
}
.house-card h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.house-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.72;
}
.house-note {
  margin-top: 16px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.85;
  max-width: 640px;
}
.house-foot {
  margin-top: 18px;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .house-stage { height: clamp(300px, 74vw, 420px); }
  .house-picks button, .house-pins { font-size: 0.78rem; padding: 9px 14px; }
  .house-bar { justify-content: flex-start; }
}

/* ---------- Do we come out to you? ---------- */

.serve-check { max-width: 640px; margin-inline: auto; }
.serve-check form { display: flex; gap: 10px; }
.serve-check input {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--pane-deep);
  border-radius: 9999px;
  padding: 15px 22px;
  min-width: 0;
}
.serve-check input:focus-visible {
  outline: none;
  border-color: var(--sun);
  box-shadow: 0 0 0 4px rgba(65, 105, 225, 0.16);
}
.serve-check .btn { flex: 0 0 auto; }

.serve-result {
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pane-deep);
  background: var(--off);
}
.serve-result.is-yes { border-color: var(--sun); background: var(--pane); }
.serve-result h3 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
  margin: 0 0 8px;
}
.serve-result p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.7; font-size: 0.95rem; }
.serve-result p:last-child { margin-bottom: 0; }
.serve-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-sm { font-size: 0.82rem; padding: 11px 20px; }
.btn-ghost-ink {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--pane-deep);
}
.btn-ghost-ink:hover { background: var(--pane); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--sun); }

@media (max-width: 560px) {
  .serve-check form { flex-direction: column; }
  .serve-check .btn { width: 100%; }
}

/* ---------- Lighting designer ---------- */

.lights-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pane-deep);
  box-shadow: var(--shadow-soft);
  background: #0d1730;
}
.lights-stage { position: relative; width: 100%; height: clamp(300px, 46vw, 540px); }
.lights-stage canvas { display: block; }

.lights-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 22px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--off);
  border: 1px solid var(--pane-deep);
}
.lights-group h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.lights-group h3 + h3 { margin-top: 18px; }
.lights-runs { display: grid; gap: 9px; }
.lights-runs label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.92rem; color: var(--ink); cursor: pointer;
}
.lights-runs input { width: 18px; height: 18px; accent-color: var(--sun); cursor: pointer; }

.lights-looks { display: flex; flex-wrap: wrap; gap: 7px; }
.lights-looks button {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--pane-deep);
  border-radius: 9999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.lights-looks button:hover { background: var(--pane); }
.lights-looks button.is-on { background: var(--sun); border-color: var(--sun); color: var(--white); }

.lights-group input[type="range"] {
  width: 100%; accent-color: var(--sun); cursor: ew-resize;
}

.lights-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 20px;
}
.lights-foot p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.lights-foot strong { color: var(--ink); }

@media (max-width: 860px) {
  .lights-panel { grid-template-columns: 1fr; gap: 20px; }
}

/* Honeypot for the quote form. Hidden from people, left in the DOM for bots
   to fill in. Not display:none, because some bots skip those. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Caption under a photo-strip shot. Only used where the picture needs a word
   to be legible, which in practice means a before sitting next to an after.
   Without it the two frames just look like two different houses. */
.photo-strip figure { display: flex; flex-direction: column; }
.photo-strip figcaption {
  padding: 10px 14px 12px;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.photo-strip figcaption .tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--pane);
  color: var(--sky-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.photo-strip figcaption .tag.after { background: var(--sun); color: var(--white); }

/* Review quotes. Deliberately plain: a testimonial that looks designed to
   within an inch of its life reads as marketing rather than as something a
   customer actually typed. */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 940px;
  margin: 0 auto;
}
@media (max-width: 720px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
  margin: 0;
  padding: 30px 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--sun);
}
.quote-card blockquote { margin: 0 0 14px; }
.quote-card blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.quote-card figcaption { font-size: 0.93rem; color: var(--ink-soft); }



/* ============================================================
   Commercial proposal intake

   A stepped brief that stays sealed until the visitor identifies
   themselves. Deliberately heavier and more instrument-like than the
   residential form: this is a page for a facilities manager, and it
   should feel like filling in a spec rather than a contact form.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the counter ---- */
.prop-count-band { padding-block: clamp(46px, 6vw, 74px); }
.prop-count { text-align: center; }
.prop-count .pc-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.6rem, 11vw, 7.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ink) 30%, var(--sun) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prop-count .pc-plus { font-size: 0.5em; vertical-align: super; color: var(--sun); -webkit-text-fill-color: var(--sun); }
.prop-count .pc-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- layout ---- */
.prop-wrap {
  scroll-margin-top: calc(var(--nav-h) + 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}
@media (max-width: 940px) { .prop-wrap { grid-template-columns: 1fr; } }

.prop-form {
  position: relative;
  padding: clamp(22px, 3.4vw, 38px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
/* A hairline of brand colour down the edge, so the panel reads as a device */
.prop-form::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--sun), var(--sky-deep));
}

/* ---- the rail ---- */
.prop-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 26px;
  padding: 0 0 20px;
  list-style: none;
  border-bottom: 1px solid var(--pane);
}
.prop-rail li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.45;
  transition: opacity 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.prop-rail li span {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--pane);
  color: var(--ink);
  font-size: 0.72rem;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.prop-rail li.on { opacity: 1; color: var(--ink); }
.prop-rail li.on span { background: var(--sun); color: #fff; transform: scale(1.12); }
.prop-rail li.done { opacity: 1; }
.prop-rail li.done span { background: var(--sky-deep); color: #fff; }

/* ---- steps ---- */
.prop-body { position: relative; }
.pstep { display: none; border: 0; margin: 0; padding: 0; }
.pstep.is-on { display: block; animation: pstep-in 0.42s var(--ease-out) both; }
@keyframes pstep-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.step-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sun);
}
.step-h { margin: 0 0 6px; font-size: clamp(1.35rem, 2.6vw, 1.85rem); color: var(--ink); }
.step-help { margin: 0 0 20px; color: var(--ink-soft); }
.step-note {
  margin: 18px 0 0; padding-left: 13px;
  border-left: 2px solid var(--pane-deep);
  font-size: 0.9rem; color: var(--ink-soft);
}
.sub-label {
  margin: 22px 0 10px;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- choice tiles ---- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.tile { position: relative; display: block; cursor: pointer; }
/* Sized over the whole tile rather than collapsed to nothing. A zero-size
   input drops out of the tab order in some browsers, which would make every
   choice on this form keyboard-inaccessible. */
.tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}
.tile-face {
  display: block;
  height: 100%;
  /* The face is painted over the input, so it has to let clicks through or
     it swallows every one of them. */
  pointer-events: none;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--off);
  box-shadow: inset 0 0 0 1.5px var(--pane-deep);
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.tile:hover .tile-face { background: var(--pane); transform: translateY(-2px); }
.tile-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.tile-sub { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--ink-soft); }
.tile input:checked + .tile-face {
  background: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 18px rgba(11, 28, 69, 0.24);
  transform: translateY(-2px);
}
.tile input:checked + .tile-face .tile-label { color: #fff; }
.tile input:checked + .tile-face .tile-sub { color: rgba(255, 255, 255, 0.72); }
.tile input:focus-visible + .tile-face { box-shadow: inset 0 0 0 1.5px var(--sun), 0 0 0 4px rgba(65, 105, 225, 0.28); }

/* ---- plain fields ---- */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.prop-form .field { margin-bottom: 14px; }
.prop-form label { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.prop-form .opt { font-weight: 400; color: var(--ink-soft); }
.prop-form input[type="text"], .prop-form input[type="email"],
.prop-form input[type="tel"], .prop-form input[type="number"], .prop-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--off);
  box-shadow: inset 0 0 0 1.5px var(--pane-deep);
  font: inherit;
  color: var(--ink);
  transition: box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.prop-form input:focus, .prop-form textarea:focus {
  outline: none;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--sun), 0 0 0 4px rgba(65, 105, 225, 0.16);
}
.prop-form input.invalid { box-shadow: inset 0 0 0 1.5px #d2544a, 0 0 0 4px rgba(210, 84, 74, 0.14); }
.check-inline { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 500 !important; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--sun); }

/* ---- footer buttons ---- */
.prop-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pane); }
/* .btn sets display:inline-flex, which outranks the user agent rule for the
   hidden attribute, so Back and Send stayed on screen at every step. */
.prop-foot .btn[hidden] { display: none !important; }

/* ---- the aside ---- */
.prop-aside { position: sticky; top: calc(var(--nav-h) + 18px); }
@media (max-width: 940px) { .prop-aside { position: static; } }

.pa-lock, .pa-live {
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--ink), var(--sky-deep));
  color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-lift);
}
.pa-lock-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  animation: pa-pulse 2.8s ease-in-out infinite;
}
.pa-lock-icon svg { width: 23px; height: 23px; }
@keyframes pa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.22); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
.pa-lock h4 { margin: 0 0 8px; color: #fff; font-size: 1.12rem; }
.pa-lock p { margin: 0; font-size: 0.92rem; }

.pa-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sky-light);
}
.pa-list { margin: 0; }
.pa-list div { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); animation: pstep-in 0.3s var(--ease-out) both; }
.pa-list div:last-child { border-bottom: 0; }
.pa-list dt {
  font-family: var(--font-display);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pa-list dd { margin: 3px 0 0; font-size: 0.95rem; color: #fff; }
.pa-foot { margin: 16px 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }

/* ---- the done panel ---- */
.prop-done { text-align: center; padding: clamp(30px, 5vw, 52px) 20px; animation: pstep-in 0.5s var(--ease-out) both; }
.prop-done .pd-tick {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--sun);
  color: #fff;
}
.prop-done .pd-tick svg { width: 30px; height: 30px; }
.prop-done h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); }
.prop-done p { margin: 0 auto; max-width: 46ch; color: var(--ink-soft); }

/* Trustmary embed. Given a minimum height so the rest of the page does not
   jump when the widget finishes loading, and a centred fallback line for the
   case where the script is blocked. */
.tm-embed { min-height: 220px; }
.tm-embed .tm-fallback { text-align: center; color: var(--ink-soft); }

/* Trustmary block on the landing page. Sits under the hand-picked cards, so
   it gets a label to explain the change of gear from three chosen reviews to
   the whole unfiltered set. */
.tm-home { margin-top: clamp(30px, 4vw, 48px); }
.tm-home-label {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Autumn promo popup (home page only) ----------
   Sits above the nav (z-index 120) and the mobile drawer. Hidden until
   js/promo.js decides it should open, so if the script never runs, or the
   promo window has passed, nothing appears and nothing shifts. */

.promo[hidden] { display: none !important; }

.promo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.promo-scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 28, 69, 0.55);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.promo.is-open .promo-scrim { opacity: 1; }

.promo-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - var(--gutter) * 2);
  overflow-y: auto;
  padding: 40px 34px 32px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.promo.is-open .promo-card { opacity: 1; transform: none; }

.promo-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: 9999px;
  background: var(--pane);
  color: var(--sky-deep);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.promo-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4.4vw, 2.05rem);
  line-height: 1.18;
  text-wrap: balance;
  color: var(--ink);
}
.promo-off { color: var(--sun); }

.promo-card p {
  margin: 0 auto 12px;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}
.promo-fine {
  font-size: 0.82rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

.promo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.promo-actions .btn { width: 100%; justify-content: center; }

.promo-dismiss {
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}
.promo-dismiss:hover { color: var(--ink); }

.promo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.promo-close:hover { background: var(--pane); color: var(--ink); }

.promo :focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.promo-card:focus { outline: none; }

@media (max-width: 480px) {
  .promo-card { padding: 36px 22px 26px; }
}

/* Tier 1: the card sliding and scaling is the vestibular trigger, so it is
   removed outright. The fade stays, because appearing with no transition at
   all is more startling than a soft one. */
@media (prefers-reduced-motion: reduce) {
  .promo-card { transform: none; transition: opacity 0.2s linear; }
  .promo-scrim { transition: opacity 0.2s linear; }
}

/* Portable, interactive views of the detailed 3D house. */
.house-stage{height:clamp(240px,62.5vw,640px);overflow:hidden;background:#b9cbd2;isolation:isolate}
.house-static-preview,.house-viewer-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.house-static-preview[hidden]{display:none}
.house-viewer-canvas{touch-action:pan-y;cursor:grab}
.house-viewer-canvas:active{cursor:grabbing}
.house-viewer-status{position:absolute;bottom:16px;left:16px;max-width:calc(100% - 32px);padding:8px 12px;border-radius:6px;background:#102c3de8;color:#fff;font:600 12px system-ui,sans-serif;pointer-events:none}
.house-viewer-status[hidden]{display:none}
.house-viewer-marker{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:3px solid #fff;background:#4169e1;color:white;font:700 24px system-ui,sans-serif;box-shadow:0 2px 12px #0005;cursor:pointer;touch-action:manipulation}
.house-viewer-marker[hidden]{display:none}
.house-viewer-marker:focus-visible,.house-navigation button:focus-visible{outline:3px solid #f5a623;outline-offset:3px}
.house-wipe{position:relative;inset:auto;display:flex;align-items:center;gap:16px;padding:8px 18px;background:#fff;pointer-events:auto}
.house-wipe input[type="range"]{position:relative;inset:auto;top:auto;transform:none;flex:1;width:auto;min-width:0;height:44px;margin:0;touch-action:none}
.house-wipe input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:#d9e0f1}
.house-wipe input[type="range"]::-webkit-slider-thumb{margin-top:-19px}
.house-wipe input[type="range"]::-moz-range-track{height:6px;border-radius:4px;background:#d9e0f1}
.house-wipe-label{color:var(--ink);font-size:12px;font-weight:700}
.house-navigation{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.house-navigation button{min-height:42px;min-width:42px;padding:8px 13px;border:1px solid #d9e0f1;border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;touch-action:manipulation}
.house-navigation button:hover{background:var(--pane-deep)}
.house-pins[hidden]{display:none}
@media(max-width:720px){.house-navigation{gap:6px}.house-navigation button{padding:8px 10px}.house-wipe{gap:12px;padding:8px 12px}.house-viewer-marker{width:34px;height:34px}}

/* Keep the solid house visible independently of the comparison canvas. */
.house-viewer-image{position:absolute;max-width:none;pointer-events:none;user-select:none}