/* ==========================================================================
   AJK Dream House Ltd. — Page sections
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(12, 10, 6, 0.86);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
}

.nav { display: flex; align-items: center; gap: 28px; width: 100%; }

.nav__brand { display: flex; align-items: center; gap: 13px; flex: none; }

.nav__logo {
  width: 54px; height: 31px;
  object-fit: contain;
  transition: transform var(--dur) var(--ease-back);
}
.nav__brand:hover .nav__logo { transform: translateY(-2px) scale(1.04); }

.nav__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__menu { display: flex; align-items: center; gap: 6px; margin-inline: auto; }

.nav__link {
  position: relative;
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--layer-04); }

.nav__link[aria-current='true'] {
  color: var(--gold);
  background: var(--gold-06);
}

.nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Click-to-call in the header — the single most important action */
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.nav__phone svg { color: var(--gold); }
.nav__phone:hover { color: var(--gold); }

/* Mobile toggle */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity 150ms linear;
}
.nav__toggle span::before { transform: translateY(-5.5px); }
.nav__toggle span::after  { transform: translateY(4px); }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after  { transform: rotate(-45deg); }

@media (max-width: 1120px) {
  .nav__phone span { display: none; }
}

@media (max-width: 1000px) {
  /* The drawer is two separately-positioned fixed panels — the links and the
     call/CTA block are siblings with no shared wrapper. They are therefore
     anchored to opposite edges rather than stacked: the links hang from the
     header, the actions are pinned to the bottom of the screen, and the links
     reserve --nav-actions-h of clearance so the last one can always scroll
     clear of them.

     `top: auto` on the actions is what broke this before: with no wrapper to
     flow after, a fixed box with auto offsets falls back to its *static*
     position, which is the header row — so the phone number and the primary
     CTA rendered on top of the header and clipped off the top of the screen. */

  /* Must sit on a selector, not bare inside the @media. A stray declaration
     here is parsed as the start of a qualified rule, so it swallows the next
     rule's selector into its own prelude — which silently killed the
     `.nav__toggle { display: grid }` below and left phones with no way to
     open the menu at all. .nav is the nearest shared ancestor of both panels. */
  .nav { --nav-actions-h: 9.5rem; }

  .nav__toggle { display: grid; }

  /* A backdrop-filter turns its element into the containing block for every
     `position: fixed` descendant. Both drawer panels live inside .site-header,
     so the moment the page scrolled 12px and .is-stuck applied its blur, they
     stopped resolving against the viewport and started resolving against the
     72px header box: the links collapsed into a sliver and the phone/CTA block
     landed *above* the top of the screen. (That is the same symptom the note
     above blames on `top: auto` — the blur was the real cause both times.)

     Phones therefore get an opaque bar instead of a blurred one. Nothing is
     lost visually and the drawer's fixed positioning stays anchored to the
     viewport where it belongs. Keep this rule ahead of any future header
     blur — a blurred ancestor and a fixed drawer cannot coexist. */
  .site-header,
  .site-header.is-stuck {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.is-stuck { background: var(--bg); }

  /* The drawer starts below the header, so the bar itself has to stop being
     transparent while the menu is open or the page shows through behind the
     logo and the close button. */
  html.nav-open .site-header {
    background: var(--bg);
    border-bottom-color: var(--line);
  }

  .nav__menu, .nav__actions {
    position: fixed;
    left: 0; right: 0;
    margin: 0;
    padding: 0 var(--gutter);
    /* Opaque, not translucent — these cover the whole screen, so a backdrop
       blur here would cost a full-viewport GPU pass to show nothing. */
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }

  .nav__menu {
    top: var(--header-h);
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 18px;
    /* clearance for the pinned actions block */
    padding-bottom: calc(var(--nav-actions-h) + 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't chain the scroll to the page */
  }

  .nav__link { padding: 15px 14px; font-size: 1.0625rem; border-radius: var(--r-sm); }

  .nav__actions {
    top: auto;
    bottom: 0;
    min-height: var(--nav-actions-h);   /* keeps the reserved clearance honest */
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 18px;
    /* clear the home indicator on notched phones */
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }
  .nav__actions .btn { width: 100%; }
  .nav__phone { justify-content: center; padding: 10px 0; }
  .nav__phone span { display: inline; }

  .nav.is-open .nav__menu,
  .nav.is-open .nav__actions {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }

  /* The wordmark is the home link; at 31px it was under the 44px touch floor. */
  .nav__brand { min-height: 44px; }
}

/* Landscape phones. At 360px tall the stacked call/CTA block claimed 152px —
   42% of the screen — and left two of the five links visible. Lay the actions
   out as a single row so the reserve drops to ~88px and the links keep the
   space. */
@media (max-width: 1000px) and (max-height: 560px) {
  .nav { --nav-actions-h: 5.5rem; }

  .nav__menu { padding-top: 8px; }
  .nav__link { padding: 11px 14px; font-size: 1rem; }

  .nav__actions {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .nav__actions .btn { width: auto; flex: 1 1 auto; }
  .nav__phone { flex: none; padding: 0; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 900px);
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px));
  padding-bottom: clamp(80px, 12vw, 160px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.06);
  animation: kenburns 26s var(--ease) infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
}

/* Tuned for the golden-hour exterior: the sunset sky sits directly behind
   the headline, so the left third is pooled down hard for contrast while the
   sky and the house keep their glow toward the right. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 88% at 6% 52%,
      rgba(10, 8, 5, 0.95) 0%, rgba(10, 8, 5, 0.74) 36%, rgba(10, 8, 5, 0.18) 68%, transparent 82%),
    linear-gradient(96deg,
      rgba(10, 8, 5, 0.93) 0%, rgba(10, 8, 5, 0.66) 34%,
      rgba(10, 8, 5, 0.22) 62%, rgba(10, 8, 5, 0.04) 84%),
    linear-gradient(180deg,
      rgba(10, 8, 5, 0.66) 0%, rgba(10, 8, 5, 0.10) 20%,
      rgba(10, 8, 5, 0.00) 46%, rgba(16, 14, 9, 0.72) 84%, var(--bg) 99%);
}

/* Warm gold bloom bleeding in from the window light */
.hero__bloom {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 18%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 195, 100, 0.10), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.hero__inner { max-width: 46rem; }

.hero h1 { margin-top: 26px; }
.hero h1 .gold-text { display: inline-block; }

.hero__lead {
  margin-top: 26px;
  max-width: 34rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Trust row under the CTAs */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.hero__trust svg { color: var(--gold); flex: none; }

@media (max-width: 900px) {
  /* Cover crops horizontally on narrow screens — bias toward the house,
     and swap to a vertical scrim since the copy now spans the full width. */
  .hero { min-height: 0; padding-bottom: clamp(64px, 12vw, 110px); }
  .hero__media img { object-position: 72% center; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(10, 8, 5, 0.58) 0%, rgba(10, 8, 5, 0.50) 26%,
        rgba(10, 8, 5, 0.72) 58%, rgba(10, 8, 5, 0.92) 82%, var(--bg) 99%);
  }
  .hero__bloom { display: none; }
  .hero__trust { gap: 10px 20px; }
}

@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; }
}


/* ==========================================================================
   STATS
   ========================================================================== */
.stats { position: relative; z-index: 3; margin-top: clamp(-90px, -7vw, -56px); }

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--edge), var(--shadow-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
}

.stat {
  position: relative;
  padding: clamp(24px, 3vw, 38px) clamp(14px, 2vw, 28px);
  text-align: center;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 22%;
  width: 1px; height: 56%;
  background: linear-gradient(180deg, transparent, var(--gold-20), transparent);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: 12px; }

@media (max-width: 820px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before,
  .stat:nth-child(2n + 1)::before { display: none; }
  .stat:nth-child(n + 3)::after {
    content: '';
    position: absolute;
    top: 0; left: 12%;
    width: 76%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-20), transparent);
  }
}

/* ==========================================================================
   SERVICES — bento, rebuilt with real internal rhythm
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 40px);
  overflow: hidden;
  /* Own stacking context, so the decorative layers below can sit at z-index
     -1: above the card's background, beneath its content. */
  isolation: isolate;
}

/* Feature cards span 4/2 then 2/4 — asymmetry without dead space */
.svc--wide  { grid-column: span 4; }
.svc--slim  { grid-column: span 2; }

/* The content is deliberately NOT positioned.
   `.svc > * { position: relative }` used to live here to lift the content
   above the wash, but it also made the <h3> the containing block for
   .svc__hit::after — so the stretched link covered only the 33px heading
   instead of the whole 370px card, and everything else on the card (the
   body copy, the icon, the "Explore" row) was dead to the pointer.
   Isolation + a negative index on the decorative layers gets the same
   layering without positioning any children. */
.svc .svc__media,
.svc .svc__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.svc .svc__media picture { display: block; height: 100%; }
.svc .svc__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.20; }
.svc .svc__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(16,14,9,0.55) 0%, rgba(16,14,9,0.94) 65%);
}

.svc .svc__wash {
  background: var(--gold-grad-soft);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.svc:hover .svc__wash { opacity: 1; }

/* Push the CTA to the bottom so cards in a row align regardless of copy length */
.svc__spacer { flex: 1 1 auto; min-height: 18px; }

.svc__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 26px;
  border-radius: var(--r-md);
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  color: var(--gold);
  transition: transform var(--dur) var(--ease-back),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.svc:hover .svc__icon {
  transform: translateY(-3px) scale(1.05);
  background: var(--gold-grad);
  color: var(--gold-ink);
}
.svc__icon svg { width: 26px; height: auto; }

.svc h3 { margin-bottom: 12px; }
.svc p { max-width: 46ch; }

.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 22px;
  padding-top: 20px;
  width: 100%;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.svc:hover .svc__more { color: var(--gold); gap: 14px; }

.svc__hit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

@media (max-width: 1000px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .svc--wide, .svc--slim { grid-column: span 1; }
}
@media (max-width: 660px) {
  .services__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
/* Scroll-driven journey. JS writes --p (0 → 1) onto .process as the section
   travels the viewport; the rail fills and each node lights up in sequence. */
.process__track { position: relative; }

.process__rail {
  position: absolute;
  top: 27px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
  background: var(--layer-06);
  overflow: hidden;
}
.process__rail::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold-grad);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 220ms linear;
  box-shadow: 0 0 14px var(--gold-35);
}

.process__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

.step { position: relative; text-align: center; padding-inline: 8px; }

.step__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text-dim);
  transition: color 320ms var(--ease), border-color 320ms var(--ease),
              background 320ms var(--ease), transform 420ms var(--ease-back),
              box-shadow 320ms var(--ease);
}

/* Halo that pulses only on the node you're currently at */
.step__node::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--gold-20);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 320ms var(--ease), transform 420ms var(--ease-back);
}

.step.is-done .step__node {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--gold-ink);
  box-shadow: var(--glow-gold-soft);
}
.step.is-current .step__node { transform: scale(1.12); }
.step.is-current .step__node::before { opacity: 1; transform: scale(1); }

/* The dimmed/hidden start states are gated on `html.js`, exactly like
   .acc__panel is. `.is-done` only ever arrives from site.js, so ungated
   these left the whole Process section stranded at 42% opacity with the
   "Week 0 / Handover" labels fully invisible whenever JS was off or failed
   — the one section on the page that did not degrade. */
.step__label { display: block; margin-bottom: 10px; }

html.js .step__label {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease-out);
}
html.js .step.is-done .step__label { opacity: 1; transform: none; }

.step h3 { margin-bottom: 10px; }
.step p { font-size: var(--fs-sm); max-width: 30ch; margin-inline: auto; }

html.js .step__body {
  opacity: 0.42;
  transition: opacity 420ms var(--ease);
}
html.js .step.is-done .step__body { opacity: 1; }

@media (max-width: 860px) {
  /* Vertical rail on narrow screens */
  .process__rail {
    top: 0; bottom: 0;
    left: 27px; right: auto;
    width: 2px; height: auto;
  }
  .process__rail::after {
    transform: scaleY(var(--p, 0));
    transform-origin: top;
  }
  .process__grid { grid-template-columns: 1fr; gap: 38px; }
  .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    text-align: left;
    padding-inline: 0;
  }
  .step__node { margin: 0; }
  .step p { margin-inline: 0; max-width: none; }
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

.project {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
}

.project img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.project:hover img { transform: scale(1.06); }

.project::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 14, 9, 0.05) 30%,
    rgba(16, 14, 9, 0.72) 66%,
    rgba(16, 14, 9, 0.95) 100%);
  transition: opacity var(--dur) var(--ease);
}

.project__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 2.4vw, 34px);
}

.project__tag { margin-bottom: 12px; }
.project__title { color: #fff; }

.project__meta {
  margin-top: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.project:hover .project__meta { max-height: 60px; opacity: 1; }

.project:hover .icon-circle {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--gold-ink);
  transform: translateX(4px);
}

@media (max-width: 820px) {
  .projects__grid { grid-template-columns: 1fr; }
  .project { aspect-ratio: 3 / 2; }
}


/* ==========================================================================
   WHY CHOOSE US — real assurances, not a decorative diagram
   ========================================================================== */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.why__lead { margin-top: 22px; font-size: var(--fs-lead); }

.why__list { display: grid; gap: 26px; margin-top: 40px; }
.why__item { display: flex; align-items: flex-start; gap: 16px; }
.why__item h3 {
  /* Semantically h3 (correct nesting under this section's h2), but keeps
     the smaller body-font treatment it had as an h4 — this is a heading
     hierarchy fix, not a visual redesign. */
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.why__item p { margin-top: 6px; }

.why__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

.assure {
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--r-md);
}
.assure:nth-child(even) { transform: translateY(clamp(16px, 2.5vw, 34px)); }

.assure__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  color: var(--gold);
}
.assure h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.assure p { font-size: var(--fs-sm); }

@media (max-width: 1000px) {
  .why__grid { grid-template-columns: 1fr; }
  .assure:nth-child(even) { transform: none; }
}
@media (max-width: 520px) {
  .why__cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.8vw, 44px);
  overflow: hidden;
}

.quote__mark {
  position: absolute;
  top: clamp(20px, 2vw, 30px);
  right: clamp(22px, 2.4vw, 36px);
  color: var(--gold);
  opacity: 0.13;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quote:hover .quote__mark { opacity: 0.24; transform: translateY(-3px); }

.quote__stars { display: flex; gap: 5px; color: var(--gold); margin-bottom: 22px; }
.quote__stars svg { width: 17px; height: auto; }

.quote__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
  max-width: 46ch;
}

.quote__person {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding-top: 30px;
}

.quote__avatar {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--gold);
}
.quote__name { font-weight: 600; color: var(--text); }
.quote__meta { margin-top: 3px; }

@media (max-width: 820px) { .quotes__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */
/* Capability ticker — its own band, so it never repeats the linked list below */
.band {
  padding-block: clamp(22px, 2.4vw, 32px);
  border-block: 1px solid var(--line);
  background: var(--bg-raise);
}
.band .marquee__track { align-items: center; gap: 0; }
.band__item {
  display: inline-flex;
  align-items: center;
  padding-inline: clamp(18px, 2vw, 34px);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.band__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

.area {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.area img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 900ms var(--ease-out), filter var(--dur) var(--ease);
}

.area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 14, 9, 0.25) 0%,
    rgba(16, 14, 9, 0.70) 55%,
    rgba(16, 14, 9, 0.94) 100%);
  transition: opacity var(--dur) var(--ease);
}

.area:hover { border-color: var(--gold-35); box-shadow: var(--glow-gold-soft); }
.area:hover img { transform: scale(1.12); }
.area:hover::after { opacity: 0.8; }

.area__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
}

.area__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.area__sub {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}
.area:hover .area__sub { color: var(--gold); }

.area__go {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: #fff;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.area:hover .area__go {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--gold-ink);
  transform: translateX(3px);
}

.areas__note {
  margin-top: 32px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

@media (max-width: 1000px) { .areas__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .areas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .areas__grid { grid-template-columns: 1fr; } }

/* NOTE: a `.areas__grid a { display:flex; padding:15px 18px; … }` block used
   to sit here, left over from an earlier chip-list design of this section.
   Because `.areas__grid a` (0,1,1) outranks `.area` (0,1,0) it was still
   winning against the photo cards that replaced it — forcing display:flex,
   overriding the corner radius, and injecting a gold ::before dot that was
   invisible only because the cards' gradient overlay painted over it.
   Removed; `.area` in this file is the single source of truth. */

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.faq__aside p { margin-top: 18px; }
.faq__aside .btn { margin-top: 28px; }

@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta__banner {
  position: relative;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px);
  border-radius: var(--r-xl);
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--layer-06), transparent),
    var(--bg-raise);
  border: 1px solid var(--line);
}

.cta__orb {
  position: absolute;
  width: min(46vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 195, 100, 0.30), transparent 68%);
  filter: blur(50px);
  pointer-events: none;
}
.cta__orb--a { top: -34%; left: -12%; }
.cta__orb--b { bottom: -40%; right: -10%; }

.cta__banner > *:not(.cta__orb) { position: relative; z-index: 1; }
.cta__banner h2 { margin-top: 20px; font-size: var(--fs-display); }
.cta__banner p {
  max-width: 54ch;
  margin: 22px auto 0;
  font-size: var(--fs-lead);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
.cta__note { margin-top: 26px; font-size: var(--fs-sm); color: var(--text-dim); }

/* ==========================================================================
   CONTACT BAND (NAP)
   ========================================================================== */
/* Compact utility strip, not a full section — it sits directly under the
   CTA's large bottom padding, so its own top padding stays small. */
.nap { padding-block: 0 clamp(3rem, 5vw, 4.5rem); }

.nap__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nap__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
}
.nap__card .icon-circle {
  width: 38px; height: 38px;
  color: var(--gold);
  border-color: var(--gold-20);
  background: var(--gold-06);
}
.nap__label { margin-bottom: 4px; }
.nap__value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
a.nap__value:hover { color: var(--gold); }
.nap__sub { margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-dim); }

@media (max-width: 900px) { .nap__grid { grid-template-columns: 1fr; } }

/* CTA sits above the contact strip — trim its bottom so the two don't
   compound into one oversized gap. */
.cta-section { padding-bottom: clamp(3rem, 5vw, 4.5rem); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 6vw, 84px) 32px;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.footer__brandline { display: flex; align-items: center; gap: 12px; }
.footer__brandline img { width: 48px; height: 28px; object-fit: contain; }
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footer__about { margin-top: 20px; max-width: 42ch; font-size: var(--fs-sm); }

.footer__socials { display: flex; gap: 12px; margin-top: 26px; }
.footer__socials .icon-circle:hover {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--gold-ink);
  transform: translateY(-3px);
}

.footer__col-title { margin-bottom: 20px; }
.footer__links { display: grid; gap: 13px; }
.footer__links a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--gold); padding-left: 5px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__legal a:hover { color: var(--gold); }

@media (max-width: 940px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Footer photo credits (CC BY-SA attribution) ------------------------ */
.credits {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.credits summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.credits summary::-webkit-details-marker { display: none; }
.credits summary::before {
  content: '';
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}
.credits[open] summary::before { transform: rotate(45deg); }
.credits summary:hover { color: var(--gold); }
.credits__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 24px;
  margin-top: 12px;
  line-height: 1.6;
}
.credits__list a { text-decoration: underline; text-underline-offset: 2px; }
.credits__list a:hover { color: var(--gold); }

/* ==========================================================================
   INNER PAGE HERO — compact variant of the home hero
   ========================================================================== */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(18px, 2vw, 28px));
  padding-bottom: clamp(16px, 1.8vw, 22px);
  overflow: hidden;
  isolation: isolate;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 120% at 18% 0%, rgba(230, 195, 100, 0.09), transparent 62%),
    linear-gradient(180deg, var(--bg-raise) 0%, var(--bg) 100%);
}

.page-hero__inner { max-width: 46rem; }
/* Inner pages step well down from the home hero scale — these pages are
   task-oriented, so the headline must not eat the fold. */
.page-hero h1 {
  margin-top: 14px;
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  line-height: 1.14;
}
.page-hero__lead {
  margin-top: 14px;
  max-width: 42rem;
  font-size: var(--fs-body);
}

/* Breadcrumb */
.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.crumb a { transition: color var(--dur) var(--ease); }
.crumb a:hover { color: var(--gold); }
.crumb span { opacity: 0.5; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 1.8vw, 26px);
  align-items: stretch;   /* both panels end on the same line */
}

.contact__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  min-width: 0;
}
/* Pin the reassurance list to the foot so the details panel fills its
   column instead of leaving a ragged gap under the last detail. */
.contact__assure { margin-top: auto; }
.contact__panel #contactForm { flex: 1 1 auto; }

.contact__panel h2 {
  font-size: 1.25rem;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

/* Detail list */
.info { display: grid; gap: 4px; }

.info__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.info__item:last-child { border-bottom: 0; padding-bottom: 0; }

.info__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  color: var(--gold);
}

.info__label { margin-bottom: 4px; }
.info__value {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
a.info__value:hover { color: var(--gold); }

/* Reassurance strip under the details */
.contact__assure {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.contact__assure li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.contact__assure svg { color: var(--gold); flex: none; }

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

/* Grid/flex children default to min-width:auto, so an unbreakable string
   (a long email address) can force a track wider than its container and
   push the whole card past the viewport. */
.contact__grid > *,
.info__item > div,
.nap__card > div,
.footer__grid > * { min-width: 0; }

.info__value,
.nap__value,
.form__note { overflow-wrap: anywhere; }

/* Compact photo cards — same treatment as the home page, shorter crop so
   the strip costs ~200px of scroll instead of ~400px. */
.areas__grid--compact { gap: 14px; }
.areas__grid--compact .area { aspect-ratio: 16 / 10; border-radius: var(--r-sm); }
.areas__grid--compact .area__body { padding: 14px; }
.areas__grid--compact .area__name { font-size: 0.9375rem; }
.areas__grid--compact .area__sub { font-size: 0.6875rem; }
.areas__grid--compact .area__go { width: 26px; height: 26px; }

/* ---- Slim service-area strip (inner pages) ------------------------------ */
.areas-strip { padding-block: clamp(26px, 3vw, 40px); }

.areas-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
  border-radius: var(--r-md);
  background: var(--layer-02);
  border: 1px solid var(--line);
}
.areas-strip__lead {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.areas-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */
.svc-cat__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.svc-cat {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  min-width: 0;
}

.svc-cat__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease-back);
}
.svc-cat__icon svg { width: 21px; height: auto; }
.svc-cat:hover .svc-cat__icon {
  background: var(--gold-grad);
  color: var(--gold-ink);
  transform: translateY(-2px);
}

.svc-cat h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.svc-cat > p { font-size: 0.875rem; margin-bottom: 16px; }

.svc-cat__list {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.svc-cat__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.svc-cat__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Additional-services band */
.svc-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
  margin-top: var(--grid-gap);
  padding: clamp(22px, 2.2vw, 32px);
}
.svc-extra h3 { font-size: 1.1875rem; margin: 12px 0 8px; }
.svc-extra p { font-size: 0.9375rem; max-width: 62ch; }
.svc-extra__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* "See the work" link at the foot of a service category card */
.svc-cat > .btn { margin-top: 20px; align-self: start; }

@media (max-width: 1080px) { .svc-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .svc-cat__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   INNER-PAGE RHYTHM
   These pages sit under a compact hero, so the first section needs no top
   padding, and the band that follows it stays tighter than a home section.
   ========================================================================== */
.contact-section { padding-top: 0; padding-bottom: clamp(28px, 3vw, 44px); }
.contact-section + .section { padding-block: clamp(36px, 3.6vw, 56px); }
.contact-section + .section .section-head { margin-bottom: clamp(22px, 2.4vw, 32px); }
.contact-section + .section .section-foot { margin-top: clamp(22px, 2.4vw, 32px); }

/* ==========================================================================
   ESTIMATE PAGE
   ========================================================================== */
.assure-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.assure-row li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.assure-row svg { color: var(--gold); flex: none; }

.estimate__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(18px, 1.8vw, 26px);
  align-items: start;
}
.estimate__aside { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.estimate__card { padding: clamp(20px, 2vw, 26px); }
.estimate__card h3 { font-size: 1.0625rem; margin-bottom: 14px; }

.form__legend {
  margin-top: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.form__grid > .form__legend:first-child { margin-top: 0; }

.mini-steps { display: grid; gap: 14px; }
.mini-steps li { display: flex; gap: 12px; align-items: flex-start; }
.mini-steps span {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: var(--gold-06); border: 1px solid var(--gold-20);
  color: var(--gold);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
}
.mini-steps b { display: block; color: var(--text); font-size: 0.9375rem; }
.mini-steps p { font-size: 0.8125rem; margin-top: 2px; }

/* Consent checkbox */
.field--check { margin-top: 2px; }
.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 0.8125rem; }
.check input {
  appearance: none;
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--layer-04);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check input:checked {
  background: var(--gold-grad) center/70% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
  border-color: transparent;
}
.check input:checked::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201705' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E");
}
.check a { color: var(--gold); border-bottom: 1px solid var(--gold-35); }

@media (max-width: 1000px) { .estimate__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PROJECTS GALLERY
   ========================================================================== */
.projects__grid--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.projects__grid--gallery .project { aspect-ratio: 4 / 3; }

/* Honest placeholder where no photography exists yet */
.project--empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, var(--layer-06), var(--layer-02)),
    var(--bg-raise);
}
.project--empty::after { background: linear-gradient(180deg, transparent 45%, rgba(16,14,9,0.85) 100%); }
.project__placeholder { color: var(--gold); opacity: 0.28; }
.project--empty:hover .project__placeholder { opacity: 0.5; }

/* Four-up variant used by the service-trade card rows (our-work, home, services) */
.projects__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.projects__grid--four .project { aspect-ratio: 1 / 1; }
@media (max-width: 1180px) { .projects__grid--four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .projects__grid--four { grid-template-columns: 1fr; } }

@media (max-width: 1000px) { .projects__grid--gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .projects__grid--gallery { grid-template-columns: 1fr; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__badge {
  position: absolute;
  left: 20px; bottom: 20px;
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--gold-20);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
}
.about__badge b { font-weight: 500; color: var(--text-muted); font-size: 0.8125rem; }

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 900px) { .values__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SERVICE AREAS — region cards
   ========================================================================== */
.regions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.region { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.region__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.region__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.region:hover .region__media img { transform: scale(1.07); }
.region__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; flex: 1 1 auto; }
.region__body h3 { font-size: 1.25rem; margin: 8px 0 8px; }
.region__body p { font-size: 0.875rem; }
.region__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.region:hover .region__go { color: var(--gold); gap: 13px; }

@media (max-width: 1000px) { .regions__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .regions__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   LEGAL / PROSE
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: 1.25rem;
  margin: clamp(28px, 3vw, 40px) 0 10px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p { margin-bottom: 12px; }
.prose a { color: var(--gold); border-bottom: 1px solid var(--gold-35); }
.prose a:hover { border-bottom-color: var(--gold); }
.prose__updated {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--layer-04);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* Photo wash on a service category card (same treatment as the home bento) */
.svc-cat { position: relative; overflow: hidden; }
.svc-cat > *:not(.svc-cat__media) { position: relative; z-index: 1; }
.svc-cat .svc-cat__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.svc-cat .svc-cat__media picture { display: block; height: 100%; }
.svc-cat .svc-cat__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.svc-cat .svc-cat__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(16,14,9,0.55) 0%, rgba(16,14,9,0.94) 65%);
}

/* ==========================================================================
   TOUCH TARGETS

   Measured on a 390px viewport, the smallest interactive elements on the
   site were 16px tall — the footer link lists, whose 14px text sat in a
   grid with the spacing entirely in `gap` and none of it inside the link
   box. WCAG 2.5.8 wants 24px minimum; a thumb wants nearer 44px.

   The fix trades gap for padding rather than adding height: the link's own
   box absorbs the spacing that used to sit between rows, so hit areas grow
   substantially while the visual rhythm of the list barely moves.
   ========================================================================== */
@media (max-width: 700px) {
  .footer__links { gap: 0; }
  .footer__links a {
    display: block;
    padding: 12px 0;
  }
  /* the hover nudge would fight the larger box */
  .footer__links a:hover { padding-left: 0; }

  .footer__legal { gap: 0 20px; }
  .footer__legal a { display: inline-block; padding: 11px 0; }

  .credits__list { gap: 0 24px; }
  .credits__list a { display: inline-block; padding: 7px 0; }

  /* Phone and email are the two most likely taps on a phone — they were
     19-21px. */
  a.info__value,
  a.nap__value {
    display: inline-block;
    padding: 9px 0;
  }

  .crumb { gap: 12px; }
  .crumb a { display: inline-block; padding: 8px 0; }

  .form__note-link { display: inline-block; padding: 6px 0; }

  /* The whole <label class="check"> already toggles this, so the effective
     target is the full sentence — but the box itself is what a thumb aims
     at, so give it a few more pixels. */
  .check input { width: 22px; height: 22px; }

  /* Deliberately NOT padded: it sits inline inside the consent sentence, and
     vertical padding on an inline link overlaps the neighbouring lines,
     producing hit areas that fight each other. */
}

/* ==========================================================================
   ABOUT

   Deliberately does not reuse .assure / .stats__inner / .why__grid — those
   already carry the home page and repeating them here made About read as a
   remix of pages the visitor had just scrolled past. Four purpose-built
   components instead: a dated timeline, a numbered standards ledger, an
   honest two-column scope statement, and a practical facts strip.
   ========================================================================== */

/* ---- Story ---------------------------------------------------------------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.story__body > * + * { margin-top: 20px; }
.story__body p { font-size: var(--fs-lead); }

/* A quiet pull-quote, set off by a gold rule rather than a card */
.story__pull {
  margin-top: 28px;
  padding-left: clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--gold-35);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--text);
}
.story__pull cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}

.story__media { position: relative; }
.story__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.story__badge {
  position: absolute;
  left: clamp(-10px, -1vw, 0px);
  bottom: clamp(-14px, -1.4vw, -8px);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--gold-grad);
  color: var(--gold-ink);
  box-shadow: var(--glow-gold-soft);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
}
.story__badge span {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  opacity: 0.75;
}

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__media { order: -1; }          /* photo leads on a phone */
}

/* ---- Milestones ----------------------------------------------------------- */
/* Single left rail at every width. An alternating desktop timeline collapses
   badly on a phone, and this page is read top-to-bottom either way. */
.milestones {
  position: relative;
  display: grid;
  gap: clamp(26px, 3vw, 40px);
  padding-left: clamp(38px, 5vw, 58px);
}
.milestones::before {
  content: '';
  position: absolute;
  left: clamp(11px, 1.6vw, 17px);
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--gold-35), var(--gold-20) 55%, transparent);
}

.milestone { position: relative; }
.milestone::before {
  content: '';
  position: absolute;
  left: calc(clamp(38px, 5vw, 58px) * -1 + clamp(6px, 1vw, 12px));
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--gold-35);
}
.milestone__year {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.milestone h3 { margin-bottom: 8px; }
.milestone p { max-width: 60ch; }

/* ---- Standards ledger ----------------------------------------------------- */
/* A numbered ledger, not cards — the point is that these read as a list of
   commitments you could hold us to, and a row of tiles reads as marketing. */
.ledger { counter-reset: ledger; display: grid; }

.ledger__item {
  counter-increment: ledger;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--line);
}
.ledger__item:last-child { border-bottom: 1px solid var(--line); }

.ledger__item::before {
  content: counter(ledger, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.ledger__item h3 { margin-bottom: 7px; }
.ledger__item p { max-width: 68ch; }

/* ---- Scope --------------------------------------------------------------- */
.scope__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.scope__col { padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg); }
.scope__col h3 { margin-bottom: 6px; }
.scope__col > p { font-size: var(--fs-sm); color: var(--text-dim); }

.scope__list { display: grid; gap: 12px; margin-top: 22px; }
.scope__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.scope__list svg { flex: none; margin-top: 3px; }
.scope--yes .scope__list svg { color: var(--gold); }
.scope--no  .scope__list svg { color: var(--text-dim); }
.scope--no  .scope__list li  { color: var(--text-muted); }

@media (max-width: 780px) { .scope__grid { grid-template-columns: 1fr; } }

/* ---- Practical facts ------------------------------------------------------ */
/* Explicit columns rather than auto-fit: there are six facts, and auto-fit
   resolved to five across at desktop width, leaving a single orphan on the
   second row. 3 / 2 / 1 divides them evenly at every breakpoint. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.fact { padding-left: 18px; border-left: 1px solid var(--gold-20); }
.fact dt {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.fact dd span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-dim);
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound { padding-top: calc(var(--header-h) + clamp(60px, 9vw, 120px)); }
.notfound__code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.notfound__links a {
  /* Standalone links in their own row, not inline prose — so they carry the
     padding needed to clear a 44px touch target rather than sitting at their
     23px text height. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.notfound__links a:hover { color: var(--gold); }

/* ==========================================================================
   FOUNDERS
   ========================================================================== */
.founders__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.founder {
  padding: clamp(28px, 3vw, 40px);
  text-align: center;
}

/* No headshots supplied yet — an initials mark in the same gold-ring
   treatment as .quote__avatar, just larger, rather than a stock photo
   standing in for a real person. */
.founder__avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
}

.founder h3 { font-size: 1.25rem; }
.founder__role { margin: 8px 0 16px; }
.founder p:not(.founder__role) { text-align: left; font-size: 0.9375rem; margin-top: 12px; }
.founder p:not(.founder__role):first-of-type { margin-top: 0; }

@media (max-width: 780px) {
  .founders__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROJECT DETAIL PAGES
   ========================================================================== */

/* ---- Hero card: large contained photo with a glass facts panel, echoing
   the homepage hero pattern but scaled for a portfolio piece rather than
   a full-bleed viewport band. ---- */
.project-hero {
  padding-top: calc(var(--header-h) + clamp(20px, 3vw, 32px));
}

.project-hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 2 / 1;
  isolation: isolate;
}
/* <picture> is content-sized by default, so `height: 100%` on the <img> inside
   resolved against the picture's own shrink-wrapped height rather than the
   tile's — every cover image letterboxed and left a dark band (worst in the
   3/4 mobile hero, where a 467px frame held a 200px photo). Same fix the
   .svc media wrappers already carry; these components were missed. */
.project-hero__frame picture,
.hero-slide picture,
.carousel__slide picture,
.bento__item picture,
.project-next__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.project-hero__frame::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  /* Ramps hard through the lower third because these galleries are mostly
     bright, white-walled interiors — a gentle wash left the white title
     sitting on near-white pixels. */
  background: linear-gradient(180deg,
    rgba(10,8,5,0.10) 0%, rgba(10,8,5,0.06) 32%,
    rgba(10,8,5,0.52) 68%, rgba(10,8,5,0.88) 100%);
  pointer-events: none;
}

/* ---- Hero slideshow: crossfading slides behind the same glass panel ---- */
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 6500ms linear;
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero-slide.is-active img { transform: scale(1.14); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide img { transition: none; transform: none !important; }
}

.hero-slides__nav {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: clamp(18px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.hero-slides__nav button { pointer-events: auto; }

.hero-slides__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-back), width var(--dur) var(--ease);
}
.hero-slides__dot:hover { background: rgba(255,255,255,0.6); }
.hero-slides__dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--gold-grad);
}

.hero-slides__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(10,8,5,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
.project-hero__frame:hover .hero-slides__arrow,
.hero-slides__arrow:focus-visible { opacity: 1; }
.hero-slides__arrow:hover { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); }
.hero-slides__arrow--prev { left: clamp(10px, 1.6vw, 20px); }
.hero-slides__arrow--next { right: clamp(10px, 1.6vw, 20px); }

@media (max-width: 780px) {
  .hero-slides__arrow { display: none; }
}

.project-hero__panel {
  position: absolute;
  inset: auto 0 0 0;
  /* Above the frame's ::after scrim. At the same z-index the scrim won on DOM
     order (generated content sorts last) and greyed out the title it exists to
     make readable. The arrows and dots are already on 2 for the same reason. */
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3.5vw, 48px);
}

.project-hero__panel h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  color: #fff;
}
.project-hero__tag { margin-bottom: 12px; }
.project-hero__loc {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.78);
}
.project-hero__loc svg { color: var(--gold); flex: none; }

.project-hero__cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 320px;
}
.project-hero__cats .chip {
  background: rgba(16,14,9,0.55);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}

/* ---- Quick facts strip: reuses .stats__inner / .stat from the homepage
   stats bar rather than a parallel component. ---- */
.project-facts { margin-top: clamp(20px, 2.4vw, 30px); }
.project-facts .stats__inner { grid-template-columns: repeat(4, minmax(0,1fr)); }
.project-facts .stat__value { font-size: 1.375rem; line-height: 1.25; }

/* Unlike the homepage stats (short numbers, always one line), these values are
   phrases — "Full Reno + Basement Suite" wraps to two lines while "15" doesn't,
   which shunted the wrapped cells' labels below their neighbours'. Pinning the
   labels to the bottom of the row puts them all back on one line. */
.project-facts .stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.project-facts .stat__label { margin-top: 14px; }

@media (max-width: 780px) {
  .project-hero__frame { aspect-ratio: 3 / 4; border-radius: var(--r-lg); }
  .project-hero__cats { max-width: none; }
  .project-facts .stats__inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---- The story / narrative block ----
   This used to borrow .contact-section for its `padding-top: 0`, but that class
   also carries `.contact-section + .section` overrides that reached forward and
   squashed the Highlights band to ~46px of padding and its heading to ~22px —
   so Highlights and Gallery, two sibling sections, sat on visibly different
   rhythms. Own class, no sibling selectors: the intro stays tucked under the
   facts strip, and everything after it keeps the site-wide --section-y beat. */
.project-intro {
  padding-top: clamp(48px, 5.5vw, 80px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
/* The heading used to carry an inline margin-top and no margin-bottom, so it
   sat flush against the first paragraph (0px) while the paragraphs had 14px
   between them — the block read as one undifferentiated slab. Space now grows
   with the size of the break: paragraph < heading < eyebrow. */
.project-story { max-width: 68ch; }
.project-story .eyebrow { margin-bottom: 20px; }
.project-story h2 { margin-bottom: 22px; }
.project-story p + p { margin-top: 18px; }

/* ---- Filter chips ---- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.gallery-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--layer-04);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.gallery-filters button:hover { color: var(--text); border-color: var(--line-strong); }
.gallery-filters button[aria-pressed="true"] {
  color: var(--gold-ink);
  background: var(--gold-grad);
  border-color: transparent;
  font-weight: 600;
}
.gallery-filters button .count {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.gallery-filters button[aria-pressed="true"] .count { opacity: 0.85; }

/* ---- Cross-link to the other project ---- */
/* The card sits alone between two large sections, so it was reading as a bare
   rule in a lot of empty space. A thumbnail of where the link actually goes
   gives it enough weight to hold that position — and previews the destination,
   which a text-only "Next Project" bar never did. */
/* Sits between the gallery's --section-y-lg bottom and the CTA's --section-y
   top, so its own padding is trimmed to leave the card visually centred in
   that band rather than crowding the gallery and drifting from the CTA. */
.section--next {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.project-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  padding: clamp(14px, 1.6vw, 18px) clamp(18px, 2vw, 24px);
}
.project-next__thumb {
  width: clamp(84px, 11vw, 132px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.project-next__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.project-next:hover .project-next__thumb img { transform: scale(1.06); }

.project-next__body { display: block; min-width: 0; }
.project-next__label { display: block; margin-bottom: 6px; }
.project-next__name { display: block; font-size: 1.25rem; font-weight: 600; }
.project-next__meta {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

@media (max-width: 560px) {
  .project-next { gap: 14px; padding: 14px; }
  .project-next__thumb { width: 72px; }
  .project-next__name { font-size: 1.0625rem; }
}
.project-next__go {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.project-next:hover .project-next__go {
  background: var(--gold-grad); border-color: transparent; color: var(--gold-ink);
  transform: translateX(4px);
}

/* ==========================================================================
   HIGHLIGHTS CAROUSEL — snap-scroll filmstrip, drag on desktop
   ========================================================================== */
.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carousel__slide {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 560px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  isolation: isolate;
}
.carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
  -webkit-user-drag: none;
}
.carousel__slide:hover img { transform: scale(1.05); }

.carousel__slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,8,5,0.85) 100%);
}
.carousel__cap {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
}

.carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
.carousel__arrow {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--layer-04);
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel__arrow:hover { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); }
.carousel__arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

@media (max-width: 560px) {
  .carousel__slide { width: 82vw; }
}

/* ==========================================================================
   BENTO GALLERY — replaces a uniform grid with varied tile sizes
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: var(--grid-gap);
}

.bento__item {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: opacity var(--dur) var(--ease);
}
.bento__item.is-hidden { display: none; }
/* A short, wide strip crops straight into the ceiling on a typical
   wide-angle interior shot — the counters and furniture that make the photo
   worth featuring sit in the lower half of the frame. Spanning both axes
   keeps the tile close to the source's natural aspect instead. */
.bento__item--wide { grid-column: span 2; grid-row: span 2; }
.bento__item--tall { grid-row: span 2; }

.bento__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.bento__item:hover img { transform: scale(1.06); }

.bento__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,8,5,0.82) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.bento__item:hover::after { opacity: 1; }

.bento__label {
  position: absolute;
  left: 14px; bottom: 12px;
  right: 14px;
  z-index: 1;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bento__item:hover .bento__label { opacity: 1; transform: none; }

/* Touch devices never fire :hover, so the room name — the whole point of a
   section called "Browse By Room" — was invisible on phones and tablets.
   Pin the caption and its scrim on permanently where there's no pointer. */
@media (hover: none) {
  .bento__item::after { opacity: 1; }
  .bento__label { opacity: 1; transform: none; }
}

.bento__zoom {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(16,14,9,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
.bento__item:hover .bento__zoom { opacity: 1; transform: scale(1); }

/* Reference tiles — stock photography standing in for a stage or detail we have
   no site photography of yet. The badge is a disclosure, so unlike .bento__zoom
   it is always visible, not revealed on hover. */
.bento__ref {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(16,14,9,0.62);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}

.gallery-note {
  margin-top: 10px;
  font-size: 0.92rem;
  opacity: 0.72;
}
.gallery-note strong { font-weight: 600; opacity: 0.95; }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 220px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  /* --wide spans both axes, so flattening it to one column is only half the
     job: without the row reset these three tiles stayed 536px tall next to
     260px neighbours, which is what made the single-column rhythm lurch. */
  .bento__item--wide { grid-column: span 1; grid-row: span 1; }
  .bento__item--tall { grid-row: span 1; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  background: rgba(8, 7, 5, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: block; }

.lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 9vw, 100px) clamp(16px, 6vw, 88px) clamp(110px, 13vw, 132px);
}

@media (max-width: 560px) {
  .lightbox__stage { padding-bottom: 96px; }
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.lightbox.is-ready .lightbox__img { opacity: 1; transform: none; }

.lightbox__caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(86px, 11vw, 110px);
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
}
.lightbox__caption b { color: var(--gold); font-weight: 600; }

.lightbox__close,
.lightbox__prev,
.lightbox__next,
.lightbox__play {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover,
.lightbox__play:hover {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--gold-ink);
}
.lightbox__close { top: 30px; right: 18px; }
.lightbox__play { top: 30px; right: 76px; }
.lightbox__play .icon-pause { display: none; }
.lightbox.is-playing .lightbox__play .icon-play { display: none; }
.lightbox.is-playing .lightbox__play .icon-pause { display: block; }
.lightbox__prev { left: clamp(8px, 2.4vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(8px, 2.4vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%); }

.lightbox__counter {
  position: absolute;
  top: 40px; left: 18px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
}

/* Segmented progress bar — one bar per image; the active one fills while
   slideshow mode is playing, like a stories UI. Purely decorative (and
   absent) when there's only one image or the gallery hasn't loaded it. */
.lightbox__progress {
  position: absolute;
  top: 14px; left: 18px; right: 18px;
  z-index: 2;
  display: flex;
  gap: 5px;
}
.lightbox__progress span {
  flex: 1 1 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  overflow: hidden;
}
.lightbox__progress span::after {
  content: '';
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold-grad);
}
.lightbox__progress span.is-done::after { width: 100%; }
.lightbox.is-playing .lightbox__progress span.is-current::after {
  width: 100%;
  transition: width linear;
  transition-duration: var(--slide-ms, 4000ms);
}

/* ---- Thumbnail filmstrip ---- */
.lightbox__strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 14px clamp(16px, 3vw, 32px);
  overflow-x: auto;
  background: linear-gradient(0deg, rgba(8,7,5,0.9) 40%, transparent 100%);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.lightbox__strip::-webkit-scrollbar { display: none; }

.lightbox__thumb {
  flex: 0 0 auto;
  width: 62px; height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb.is-current { opacity: 1; border-color: var(--gold); transform: translateY(-3px); }

@media (max-width: 560px) {
  .lightbox__prev, .lightbox__next { width: 38px; height: 38px; }
  .lightbox__close, .lightbox__play { width: 38px; height: 38px; }
  .lightbox__play { right: 64px; }
  .lightbox__strip { padding: 10px 14px; }
  .lightbox__thumb { width: 48px; height: 34px; }
  .lightbox__caption { bottom: 76px; }
}

/* ==========================================================================
   SERVICE PAGES — placeholder treatments (temporary)
   ==========================================================================
   Three rules that exist only while the service-page photography is pending.
   Delete this whole block once assets/img/work/<service>/ is populated and the
   real gallery markup in each service page has been uncommented.
   ========================================================================== */

/* Non-interactive placeholder tile: keep the caption visible, since there is
   no hover target to reveal it. */
.project--static .project__meta { max-height: 60px; opacity: 1; }
.project--static { cursor: default; }
/* Body copy fills the lower half of these tiles, so lift the icon clear of it. */
.project--empty .project__placeholder { align-self: start; margin-top: clamp(24px, 3vw, 38px); }

/* "Next service" thumb with a trade icon instead of a photo. */
.project-next__thumb--icon {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--layer-06), var(--layer-02)), var(--bg-raise);
  color: var(--gold);
}
.project-next__thumb--icon svg { width: 26px; height: auto; opacity: 0.45; }
.project-next:hover .project-next__thumb--icon svg { opacity: 0.75; }

/* ==========================================================================
   PAINTING PAGE — image-led sections
   Built for painting.html only: a full-bleed photographic hero, a four-up
   trade grid, a horizontally-scrolled process rail and a colour split.
   The rail is CSS scroll-snap, so it works with JS off and needs no transport
   controls — the reader's own scroll is the input.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.phero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 78vh, 760px);
  padding-block: clamp(90px, 12vw, 150px) clamp(36px, 5vw, 64px);
  overflow: hidden;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(16,14,9,0.52) 0%, rgba(16,14,9,0.3) 40%, rgba(16,14,9,0.9) 100%),
    linear-gradient(90deg, rgba(16,14,9,0.66) 0%, rgba(16,14,9,0.12) 62%, transparent 100%);
}
.phero__inner { position: relative; }
.phero h1 { margin-top: 14px; max-width: 16ch; }
.phero__lead {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: rgba(255,255,255,0.82);
}
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.phero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.16);
  list-style: none;
}
.phero__facts li { display: flex; flex-direction: column; gap: 4px; }
.phero__facts b { font-size: clamp(0.95rem, 1.3vw, 1.08rem); font-weight: 600; }
.phero__facts span {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* --- what we paint: four-up image grid ----------------------------------- */
.ptrades__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--grid-gap);
}
.ptrade {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
}
.ptrade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.ptrade:hover img { transform: scale(1.06); }
.ptrade::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,14,9,0.08) 34%, rgba(16,14,9,0.78) 68%, rgba(16,14,9,0.96) 100%);
}
.ptrade__body {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(16px, 2vw, 22px);
}
.ptrade__num { color: var(--gold); }
.ptrade__title { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; color: #fff; }
.ptrade__note { font-size: 0.86rem; color: rgba(255,255,255,0.7); }

/* --- process steps -------------------------------------------------------
   Five steps, all of them on screen at once. An earlier version put these in a
   horizontal scroller; that hid three of the five behind a gesture nobody asks
   for, so the row collapses to stacked rows instead of scrolling sideways.
   ------------------------------------------------------------------------- */
.pstep {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(30px, 4vw, 48px);
  list-style: none;
  padding: 0;
}
.pstep__item { display: flex; flex-direction: column; gap: 14px; }
.pstep__mark { display: flex; align-items: center; gap: 12px; }
.pstep__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pstep__mark::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.pstep__item:last-child .pstep__mark::after { display: none; }
.pstep__media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.pstep__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.pstep__item:hover .pstep__media img { transform: scale(1.05); }
.pstep__body h3 { font-size: 1.02rem; margin-bottom: 6px; }
.pstep__body p { font-size: 0.86rem; opacity: 0.72; }

/* Below five-up, the row becomes stacked number / thumbnail / text rows. */
@media (max-width: 1080px) {
  .pstep { grid-template-columns: 1fr; gap: 0; }
  .pstep__item {
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 2.5vw, 24px);
    padding-block: clamp(16px, 2.6vw, 22px);
    border-bottom: 1px solid var(--line);
  }
  .pstep__item:last-child { border-bottom: none; }
  .pstep__mark::after { display: none; }
  .pstep__media { flex: 0 0 clamp(96px, 20vw, 168px); aspect-ratio: 4 / 3; }
  .pstep__body { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .pstep__num { width: 28px; height: 28px; font-size: 0.68rem; }
  .pstep__media { flex-basis: 84px; }
  .pstep__body p { font-size: 0.82rem; }
}

/* --- colour split --------------------------------------------------------- */
.pcolour__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.pcolour__media {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
}
.pcolour__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcolour__copy h2 { margin: 14px 0 16px; }
.pcolour__copy p + p { margin-top: 12px; }

@media (max-width: 980px) {
  .phero__facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ptrades__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pcolour__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .phero { min-height: 0; }
  .ptrades__grid { grid-template-columns: 1fr; }
  .ptrade { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   FLOORING PAGE — deliberately a different shape from painting.html
   Split hero rather than full-bleed, material cards that carry spec data,
   a stacked "three layers" sequence, and a room-by-room guide. Shared with
   painting only through .bento, which gets a --stagger modifier here so the
   two galleries do not read as the same grid.
   ========================================================================== */

/* --- split hero ----------------------------------------------------------- */
.fhero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); }
.fhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.fhero h1 { margin-top: 14px; }
.fhero__lead {
  margin-top: 18px;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  opacity: 0.82;
}
.fhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fhero__media {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.fhero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- material cards with specs -------------------------------------------- */
.fmats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(30px, 4vw, 48px);
}
.fmat {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raise);
}
.fmat__media { display: block; aspect-ratio: 12 / 7; }
.fmat__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 800ms var(--ease-out);
}
.fmat:hover .fmat__media img { transform: scale(1.05); }
.fmat__body { padding: clamp(18px, 2.4vw, 26px); }
.fmat__body h3 { font-size: 1.15rem; }
.fmat__body p { margin-top: 6px; font-size: 0.9rem; opacity: 0.74; }
.fmat__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fmat__spec dt {
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.55;
}
.fmat__spec dd { margin: 4px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--gold); }

/* --- three layers --------------------------------------------------------- */
.flayer { list-style: none; padding: 0; margin-top: clamp(30px, 4vw, 48px); }
.flayer__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.flayer__item:last-child { border-bottom: 1px solid var(--line); }
/* alternate sides so the stack reads as layers rather than a list */
.flayer__item:nth-child(even) .flayer__media { order: 2; }
.flayer__media {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
}
.flayer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flayer__num {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  opacity: 0.32;
}
.flayer__body h3 { margin: 10px 0 8px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.flayer__body p { opacity: 0.76; max-width: 46ch; }

/* --- room guide ----------------------------------------------------------- */
.froom {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.froom__head,
.froom__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.2vw, 26px);
}
.froom__head {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  background: var(--layer-06);
}
.froom__row { border-top: 1px solid var(--line); align-items: baseline; }
.froom__place { font-weight: 600; }
.froom__good { color: rgba(255,255,255,0.82); }
.froom__bad { opacity: 0.6; }
.froom__tag { display: none; }

/* --- gallery variant ------------------------------------------------------ */
.bento--stagger { grid-auto-rows: 210px; }
.bento--stagger .bento__item:nth-child(4n+1) { grid-row: span 2; }

@media (max-width: 980px) {
  .fhero__grid { grid-template-columns: 1fr; }
  .fmats__grid { grid-template-columns: 1fr; }
  .flayer__item { grid-template-columns: 1fr; gap: 16px; }
  .flayer__item:nth-child(even) .flayer__media { order: 0; }
  .froom__head { display: none; }
  .froom__row { grid-template-columns: 1fr; gap: 8px; }
  .froom__tag { display: block; margin-bottom: 2px; }
  .bento--stagger .bento__item:nth-child(4n+1) { grid-row: span 1; }
}
@media (max-width: 560px) {
  .fmat__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fmat__spec dd { font-size: 0.82rem; }
}

/* ==========================================================================
   HOME RENOVATION PAGE — a third layout shape
   Headline block with a three-image band beneath it (rather than one hero
   photo), a phase sequence drawn as a spine, and three large room blocks with
   an overlapping content card. Shares only .bento, via a --mosaic variant.
   ========================================================================== */

/* --- headline + image band ------------------------------------------------ */
.hhero { padding-block: clamp(44px, 6vw, 88px) clamp(36px, 5vw, 64px); }
.hhero__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
}
.hhero h1 { margin-top: 14px; }
.hhero__lead { font-size: clamp(1rem, 1.4vw, 1.12rem); opacity: 0.8; max-width: 46ch; }
.hhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hband {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(28px, 4vw, 52px);
}
.hband__cell {
  display: block;
  aspect-ratio: 9 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hband__cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 900ms var(--ease-out);
}
.hband__cell:hover img { transform: scale(1.05); }
/* the middle frame sits lower, so the band reads as a composition not a row */
@media (min-width: 981px) {
  .hband__cell:nth-child(2) { transform: translateY(clamp(16px, 3vw, 40px)); }
}

/* --- phase spine ---------------------------------------------------------- */
.hphase {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(34px, 4vw, 52px);
  list-style: none;
  padding: 0;
}
.hphase__item { position: relative; padding-top: 26px; }
.hphase__item::before {
  content: '';
  position: absolute;
  top: 6px; left: 0; right: calc(-1 * clamp(16px, 2vw, 28px));
  height: 1px;
  background: var(--line);
}
.hphase__item:last-child::before { right: 0; }
.hphase__dot {
  position: absolute;
  top: 1px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gold);
}
.hphase__num {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 6px;
}
.hphase h3 { font-size: 1rem; margin-bottom: 6px; }
.hphase p { font-size: 0.85rem; opacity: 0.72; }

/* --- room feature blocks -------------------------------------------------- */
.hroom { position: relative; margin-top: clamp(30px, 5vw, 64px); }
.hroom__media {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.hroom__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hroom__card {
  position: relative;
  margin: -12% 0 0 auto;
  width: min(520px, 88%);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-raise);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
/* alternate which side the card lands on */
.hroom:nth-child(even) .hroom__card { margin-left: 0; margin-right: auto; }
.hroom__card h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 14px; }
.hroom__list { list-style: none; padding: 0; display: grid; gap: 9px; }
.hroom__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  opacity: 0.8;
}
.hroom__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--gold);
}

/* --- gallery variant ------------------------------------------------------ */
.bento--mosaic { grid-auto-rows: 230px; }
.bento--mosaic .bento__item:nth-child(5) { grid-column: span 2; }

@media (max-width: 980px) {
  .hhero__head { grid-template-columns: 1fr; }
  .hband { grid-template-columns: 1fr; }
  .hband__cell { aspect-ratio: 16 / 10; }
  .hphase { grid-template-columns: 1fr; gap: 0; }
  .hphase__item { padding: 18px 0 18px 26px; }
  .hphase__item::before { top: 0; left: 5px; right: auto; width: 1px; height: 100%; }
  .hphase__item:last-child::before { height: 22px; }
  .hphase__dot { top: 22px; left: 0; }
  .hroom__card { margin: -40px auto 0; width: 92%; }
  .hroom:nth-child(even) .hroom__card { margin-left: auto; margin-right: auto; }
  .bento--mosaic .bento__item:nth-child(5) { grid-column: span 1; }
}

/* ==========================================================================
   FIX & FLIP PAGE — the fourth layout shape
   Image strip first and headline underneath (the inverse of the other three),
   three strategy tiers keyed to timeline, and paired start/target frames that
   are labelled as separate properties rather than a before-and-after of one job.
   ========================================================================== */

/* --- strip-first hero ----------------------------------------------------- */
.xhero { padding-bottom: clamp(36px, 5vw, 64px); }
.xhero__strip {
  display: block;
  width: 100%;
  aspect-ratio: 25 / 8;
  max-height: 46vh;
  overflow: hidden;
}
.xhero__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xhero__body {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-top: clamp(30px, 4vw, 54px);
}
.xhero h1 { margin-top: 14px; }
.xhero__lead { font-size: clamp(1rem, 1.4vw, 1.12rem); opacity: 0.8; }
.xhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.xhero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  list-style: none;
}
.xhero__stats li { display: flex; flex-direction: column; gap: 4px; }
.xhero__stats b { font-size: clamp(0.95rem, 1.3vw, 1.08rem); font-weight: 600; }
.xhero__stats span {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.55;
}

/* --- strategy tiers ------------------------------------------------------- */
.xtiers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(30px, 4vw, 48px);
}
.xtier {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raise);
}
.xtier__media { display: block; aspect-ratio: 11 / 7; }
.xtier__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 800ms var(--ease-out);
}
.xtier:hover .xtier__media img { transform: scale(1.05); }
.xtier__body { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 8px; }
.xtier__time { color: var(--gold); }
.xtier__body h3 { font-size: 1.15rem; }
.xtier__body > p { font-size: 0.9rem; opacity: 0.74; }
.xtier__list {
  list-style: none; padding: 0; margin-top: 6px;
  display: grid; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.xtier__list li { position: relative; padding-left: 18px; font-size: 0.86rem; opacity: 0.8; }
.xtier__list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.7;
}

/* --- start / target frames ------------------------------------------------ */
.xpairs { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(28px, 4vw, 44px); }
.xpair__title { font-size: 1.1rem; margin-bottom: 14px; }
.xpair__frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.xpair__frame { margin: 0; }
.xpair__frame picture {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 11 / 8;
}
.xpair__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xpair__frame figcaption { margin-top: 10px; }
.xpair__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.xpair__tag--start { opacity: 0.62; }
.xpair__tag--target { border-color: var(--gold); color: var(--gold); }

/* --- gallery variant ------------------------------------------------------ */
.bento--split { grid-auto-rows: 215px; }
.bento--split .bento__item:nth-child(7) { grid-column: span 2; }

@media (max-width: 980px) {
  .xhero__body { grid-template-columns: 1fr; }
  .xhero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xtiers__grid { grid-template-columns: 1fr; }
  .bento--split .bento__item:nth-child(7) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .xhero__strip { aspect-ratio: 16 / 9; }
  .xpair__frames { grid-template-columns: 1fr; }
}


/* ==========================================================================
   ESTIMATE PAGE — the quote request
   Built for estimate.html only. The old page was one undifferentiated column
   of 9 inputs behind two dropdowns; this replaces it with four named sections,
   tap-first controls, and a rail that reads the reader's scroll position and
   their answers back to them as they go. Nothing is hidden behind a step
   gesture — every section is on the page at once and the rail is a read-out,
   not a transport.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------
   Left-weighted and shorter than the trade-page heroes: the job of this page
   starts below the fold, so the hero states the deal and gets out of the way.
   ------------------------------------------------------------------------- */
.qhero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 64vh, 620px);
  padding-block: clamp(96px, 12vw, 140px) clamp(34px, 4vw, 54px);
  overflow: hidden;
}
.qhero__media { position: absolute; inset: 0; z-index: -2; }
.qhero__media img { width: 100%; height: 100%; object-fit: cover; }
.qhero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(16,14,9,0.58) 0%, rgba(16,14,9,0.34) 34%, rgba(16,14,9,0.94) 100%),
    linear-gradient(76deg, rgba(16,14,9,0.92) 0%, rgba(16,14,9,0.55) 44%, rgba(16,14,9,0.05) 86%);
}
.qhero__inner { position: relative; }
.qhero h1 { margin-top: 14px; max-width: 17ch; }
.qhero__lead {
  margin-top: 18px;
  max-width: 48ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: rgba(255,255,255,0.82);
}
.qhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.qhero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.qhero__facts li { display: flex; flex-direction: column; gap: 3px; }
.qhero__facts b { font-size: clamp(0.92rem, 1.25vw, 1.05rem); font-weight: 600; }
.qhero__facts span {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* --- narrow-screen progress strip ---------------------------------------
   The rail is a desktop-only column, so below 1080px the same read-out
   becomes a 52px strip pinned under the header. Position only — there is
   nothing to press.
   ------------------------------------------------------------------------- */
.qtick {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: none;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border-block: 1px solid var(--line);
}
.qtick__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.qtick__step {
  flex: none;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.qtick__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qtick__count { flex: none; color: var(--text-dim); }
.qtick__fill {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0%;
  background: var(--gold-grad);
  box-shadow: var(--glow-gold-soft);
  transition: width 160ms linear;
}

/* --- page grid ------------------------------------------------------------ */
.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
  gap: clamp(28px, 3.4vw, 60px);
  align-items: start;
}

.qform { display: block; }
/* Same specificity trap as .qsum__row: a class-level `display` beats the UA
   sheet's [hidden] rule, so the confirmation swap needs these explicitly. */
.qform[hidden] { display: none; }
.qdone[hidden] { display: none; }

/* --- a section of the form ------------------------------------------------ */
.qstep {
  border: 0;
  margin: 0;
  padding: 0 0 clamp(30px, 4vw, 46px);
  scroll-margin-top: calc(var(--header-h) + 80px);
}
.qstep + .qstep {
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4vw, 46px);
}
.qstep > * + * { margin-top: clamp(20px, 2.4vw, 28px); }
.qstep > legend + * { margin-top: 0; }

.qstep__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
}
.qstep__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--gold-35);
  background: var(--gold-06);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qstep__heading { min-width: 0; }
.qstep__title { font-size: var(--fs-h3); }
.qstep__hint {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  max-width: 54ch;
}
/* Tick that appears once a section is answered */
.qstep__state {
  flex: none;
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.qstep.is-done .qstep__num { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; }
.qstep.is-done .qstep__state {
  opacity: 1;
  border-color: transparent;
  background: var(--gold-grad);
  position: relative;
}
.qstep.is-done .qstep__state::after {
  content: '';
  position: absolute;
  left: 8px; top: 5px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(45deg);
}

/* --- grouped controls ----------------------------------------------------- */
.qgroup { min-width: 0; }
.qgroup__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.qgroup__aside {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--text-dim);
  max-width: 58ch;
}
.qgroup__error { margin-top: 12px; }
.qgroup.is-invalid .qgroup__error { display: block; }
.qgroup.is-invalid .qpick__box,
.qgroup.is-invalid .qopt span { border-color: rgba(180, 85, 63, 0.55); }

/* --- service picker: the page's main choice ------------------------------- */
.qpicks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
}
.qpick { position: relative; display: block; cursor: pointer; }
.qpick input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qpick__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--layer-04), var(--layer-02));
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease);
}
.qpick__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: var(--layer-06);
  color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qpick__icon svg { width: 21px; height: 21px; }
.qpick__name {
  font-family: var(--font-display);
  font-size: 0.9875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.qpick__note { font-size: 0.78rem; line-height: 1.45; color: var(--text-dim); }

.qpick:hover .qpick__box { border-color: var(--line-strong); transform: translateY(-2px); }
.qpick:hover .qpick__icon { color: var(--gold); }

.qpick input:checked + .qpick__box {
  border-color: var(--gold-35);
  background: linear-gradient(180deg, var(--gold-12), var(--gold-06));
  box-shadow: var(--glow-gold-soft);
}
.qpick input:checked + .qpick__box .qpick__icon { background: var(--gold-grad); color: var(--gold-ink); }
.qpick input:checked + .qpick__box::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}
.qpick input:focus-visible + .qpick__box {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- card options (budget, timing) ----------------------------------------
   Same card language as .qpick above (border, gradient fill, hover lift,
   gold wash + corner tick on selection) — kept as its own class because
   these are plain text, no icon/note row, so the internal spacing differs. */
.qopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.qopt { position: relative; cursor: pointer; }
.qopt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qopt span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--layer-04), var(--layer-02));
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease);
}
.qopt:hover span { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); }
.qopt input:checked + span {
  background: linear-gradient(180deg, var(--gold-12), var(--gold-06));
  border-color: var(--gold-35);
  color: var(--gold);
  font-weight: 600;
  box-shadow: var(--glow-gold-soft);
}
.qopt input:checked + span::after {
  content: '';
  position: absolute;
  top: 10px; right: 12px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}
.qopt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- segmented control (preferred contact) -------------------------------- */
.qseg {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--layer-04);
}
.qseg__opt { position: relative; cursor: pointer; }
.qseg__opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qseg__opt span {
  display: block;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.qseg__opt:hover span { color: var(--text); }
.qseg__opt input:checked + span { background: var(--gold-grad); color: var(--gold-ink); font-weight: 600; }
.qseg__opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- description field ---------------------------------------------------- */
.qwrite { position: relative; }
.qwrite__area { min-height: 156px; padding-bottom: 30px; }
.qwrite__count {
  position: absolute;
  right: 12px; bottom: 9px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  pointer-events: none;
}

.qprompts { margin-top: 14px; }
.qprompts__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.qprompts__row { display: flex; flex-wrap: wrap; gap: 8px; }
.qprompt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.qprompt::before { content: '+'; color: var(--gold); font-weight: 600; line-height: 1; }
.qprompt:hover { color: var(--text); border-color: var(--gold-35); background: var(--gold-06); }
.qprompt.is-used {
  border-style: solid;
  border-color: var(--gold-20);
  color: var(--text-dim);
  opacity: 0.6;
}
.qprompt.is-used::before { content: '✓'; font-size: 0.75rem; }

/* --- send panel ----------------------------------------------------------- */
.qsend {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--gold-20);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--gold-06), rgba(255,255,255,0.01));
}
.qsend .form__status.is-shown { margin-bottom: 16px; }
.qsend__note {
  margin-top: 12px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

/* --- confirmation --------------------------------------------------------- */
.qdone { padding: clamp(24px, 3vw, 40px); }
.qdone:focus { outline: none; }
.qdone__tick {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--gold-ink);
  box-shadow: var(--glow-gold);
}
.qdone h2 { margin-top: 20px; font-size: var(--fs-h2); }
.qdone__lead { margin-top: 14px; max-width: 56ch; }
.qdone__recap {
  margin-top: 26px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--layer-02);
}
.qdone__list { margin-top: 14px; display: grid; gap: 10px; }
.qdone__list li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.qdone__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.qdone__list b { color: var(--text); white-space: pre-line; }
.qdone__list span {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 2px;
}
.qdone__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.qdone__note { margin-top: 12px; font-size: 0.8125rem; color: var(--gold); min-height: 1.2em; }

/* --- the rail ------------------------------------------------------------- */
.quote__rail { position: sticky; top: calc(var(--header-h) + 22px); }
.qrail { display: grid; gap: 14px; }

.qprog { padding: 20px; }
.qprog__head { display: flex; align-items: center; gap: 14px; }
.qprog__title { min-width: 0; }
.qprog__title strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.25;
}
.qprog__sub { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--text-dim); }

.qring { position: relative; flex: none; width: 62px; height: 62px; }
.qring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.qring__bg { stroke: var(--layer-10); }
.qring__fg {
  stroke: var(--gold);
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  transition: stroke-dashoffset 520ms var(--ease-out);
}
.qring__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
}
html:not(.js) .qring { display: none; }

.qprog__list { margin-top: 18px; display: grid; gap: 2px; }
.qprog__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 0.8375rem;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.qprog__row:hover { color: var(--text); background: var(--layer-04); }
.qprog__dot {
  position: relative;
  flex: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.qprog__row.is-active { color: var(--text); background: var(--layer-04); }
.qprog__row.is-active .qprog__dot { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-12); }
.qprog__row.is-done .qprog__dot { border-color: transparent; background: var(--gold-grad); }
.qprog__row.is-done .qprog__dot::after {
  content: '';
  position: absolute;
  left: 5.5px; top: 3px;
  width: 4px; height: 7px;
  border-right: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(45deg);
}

.qsum { padding: 20px; }
.qsum__empty { margin-top: 12px; font-size: 0.8125rem; color: var(--text-dim); }
.qsum__list { margin-top: 14px; display: grid; gap: 0; }
.qsum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.qsum__row:last-child { border-bottom: 0; }
/* `hidden` has to beat the flex above — the UA sheet's display:none loses on specificity */
.qsum__row[hidden] { display: none; }
.qsum__row > span {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.qsum__row > b {
  min-width: 0;
  text-align: right;
  font-size: 0.8375rem;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qcall { padding: 20px; }
.qcall__num {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.qcall__hours { margin-top: 4px; font-size: 0.78rem; color: var(--text-dim); }
.qcall__alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--gold);
  border-bottom: 1px solid var(--gold-35);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}
.qcall__alt:hover { border-bottom-color: var(--gold); }

/* --- what happens next ---------------------------------------------------- */
.qnext__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(30px, 4vw, 48px);
}
.qnext__item h3 { margin-top: 18px; }
.qnext__item p { margin-top: 10px; font-size: var(--fs-sm); }
.qnext__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}
.qnext__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.qnext__item:hover .qnext__media img { transform: scale(1.05); }
.qnext__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,14,9,0.05) 45%, rgba(16,14,9,0.72) 100%);
}
.qnext__num {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.qnext__foot {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-sm);
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .quote__grid { grid-template-columns: 1fr; }
  .quote__rail { position: static; margin-top: clamp(26px, 3vw, 40px); }
  .qrail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qprog { display: none; }
  .qtick { display: block; }
  .qnext__grid { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .qnext__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .qhero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .qrail { grid-template-columns: 1fr; }
  .qseg { width: 100%; }
  .qseg__opt { flex: 1 1 0; }
  .qseg__opt span { text-align: center; padding-inline: 8px; }
  .qdone__list li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
  .qpicks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qpick__box { padding: 13px 13px 15px; }
  .qpick__icon { width: 34px; height: 34px; margin-bottom: 8px; }
  .qpick__note { display: none; }
  .qstep__num { width: 38px; height: 38px; font-size: 0.75rem; }
  .qopt span { padding: 11px 16px; }
  .qtick__count { display: none; }
  .qdone__actions .btn { width: 100%; justify-content: center; }
}