/* ==========================================================================
   Revora Homes — page layer.
   Everything here builds on the Modernist tokens in modernist.css, which is
   kept byte-identical to the design system so it can be re-synced.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Height of the sticky masthead. The hero's sticky scene maths subtracts it,
   and anchor targets clear it. home.js keeps it in step with the real nav. */
:root { --masthead-h: 61px; }
[id] { scroll-margin-top: calc(var(--masthead-h) + 16px); }
body { text-wrap: pretty; }
a { color: var(--color-text); }
a:hover { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* — shared primitives ---------------------------------------------------- */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

.rule { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-bg);
  padding: 10px 16px; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--color-bg); }

/* Optical alignment: the heading faces pull left by the sidebearing of their
   first glyph so the type edge lines up with the rules and images beside it. */
.h-display,
.h-scene,
.h-section,
.h-poster { margin-left: -0.058em; }

.h-display {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(26px, 8.8vw, 64px);
  line-height: 1.06; letter-spacing: -0.02em;
  margin-block: 0;
}
.h-scene {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 7.2vw, 46px);
  line-height: 1.06; letter-spacing: -0.02em;
  margin-block: 0;
}
.h-section {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.06; letter-spacing: -0.015em;
  margin-block: 0;
}
.h-poster {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 7.4vw, 56px);
  line-height: 1.06; letter-spacing: -0.015em;
  margin-block: 0;
}
/* Line-broken headings. fx.js masks each block-level span to slide it up. */
.ln { display: block; }

.kicker {
  display: block;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  font-feature-settings: 'tnum' 1;
  margin: 0 0 14px;
  color: var(--color-accent-700);
}
.kicker-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

.lede {
  font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0;
}
.fineprint {
  font-size: 13px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0;
}
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.link-more { display: inline-block; font-size: 15.5px; }

/* — masthead ------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-bg);
}
.nav { gap: clamp(12px, 1.6vw, 22px); padding: var(--space-3) clamp(16px, 4vw, 32px); }
.nav-brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
}
.nav-links { display: contents; }
.nav .btn-primary[aria-current='page'] { color: var(--color-bg); }
.nav-toggle { display: none; }
.nav .tel { white-space: nowrap; }

@media (max-width: 960px) {
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav-brand { margin-right: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 6px; cursor: pointer;
    font: inherit; font-size: 14px; color: inherit;
  }
  .nav-toggle svg { display: block; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
    border-top: 2px solid var(--color-divider);
  }
  .nav-links[data-open] { display: flex; }
  .nav-links > a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--color-divider);
  }
  .nav-links > .btn { margin: var(--space-3) 0; justify-content: flex-start; }
}

/* — scroll hero ---------------------------------------------------------- */
/* Three full-height scenes stacked with position:sticky inside a tall track;
   scrolling slides each new scene up over the one before it. `svh` keeps the
   panel height stable while mobile browser chrome collapses. */

.hero { position: relative; background: var(--color-neutral-800); }
.hero,
.hero-scene { --scene-h: calc(100svh - var(--masthead-h)); }
.hero { height: calc(3 * var(--scene-h)); }
.hero-scene { position: sticky; top: var(--masthead-h); height: var(--scene-h); overflow: hidden; }
.hero-scene > .hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media img:not([src]), .hero-media img[data-failed] { visibility: hidden; }

.hero-index {
  position: absolute; top: 0; right: 0;
  background: var(--color-bg);
  padding: 10px 16px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  font-feature-settings: 'tnum' 1;
}

.hero-card {
  position: absolute; left: 0; bottom: 0;
  width: min(780px, 100%);
  padding: 40px clamp(20px, 5vw, 72px) 44px;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  border-top: 2px solid var(--color-divider);
}
.hero-card--sub { width: min(700px, 100%); padding: 36px clamp(20px, 5vw, 72px) 40px; }
.hero-card p { margin: 0; max-width: 52ch; font-size: 17px; line-height: 28px; }
.hero-card--sub p { max-width: 48ch; font-size: 16px; }
.hero-card .h-display + p { margin-top: 20px; }
.hero-card .h-scene + p { margin-top: 16px; }
.hero-card .btn-row { margin-top: 28px; }

/* Without motion the flight collapses into three plain stacked scenes. */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-scene { position: relative; height: 78svh; }
  .masthead { position: relative; }
}

/* — stats ---------------------------------------------------------------- */

.stats { padding: 70px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 42px 28px;
}
.stat-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1;
  color: var(--color-accent);
  margin: 0 0 0 -0.045em;
}
.stat-label {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 14px 0 0;
}

/* — services ------------------------------------------------------------- */

.section { padding: 84px 0; }
.section > .h-section { margin-bottom: 48px; }
/* Sections whose heading is followed by its own standfirst set their own gap. */
.section > .h-section--tight { margin-bottom: 0; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px clamp(24px, 3vw, 48px);
}
.service { display: block; text-decoration: none; color: inherit; }
.service figure { margin: 0 0 18px; }
.service img { width: 100%; aspect-ratio: 900 / 620; object-fit: cover; }
.service h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 22px; line-height: 28px; letter-spacing: -0.01em;
  margin: 0;
}
.service p {
  font-size: 15.5px; line-height: 26px; margin: 8px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* Slot for artwork that has not been shot or licensed yet. Reads as a
   deliberate hold in the system's own language, not a broken image. */
/* A figure holding only a pending slot has no photograph to desaturate, and
   the grayscale filter would tint the slot a different shade. */
figure.grayscale:has(> .img-pending) { filter: none; }

.img-pending {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 900 / 620;
  padding: 24px;
  background: var(--color-neutral-200);
  border: 2px solid var(--color-divider);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* — estimator ------------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px clamp(32px, 5vw, 96px);
  align-items: start;
}
.split .h-section + .lede { margin-top: 24px; max-width: 46ch; }
.split .lede + .fineprint { margin-top: 20px; }

.panel {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-divider);
  padding: 36px;
  display: grid;
  gap: 20px;
}
.panel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.estimate {
  border-top: 2px solid var(--color-divider);
  padding-top: 20px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.estimate-value {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 3vw, 44px); line-height: 1;
  color: var(--color-accent);
  font-feature-settings: 'tnum' 1;
  margin: 0;
}
.estimate-label {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0;
}
.panel .btn { justify-self: start; }

/* — before / after ------------------------------------------------------- */

.compare-intro { margin: 12px 0 36px; max-width: 52ch; }

.compare {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--color-neutral-800);
  touch-action: pan-y;
  cursor: ew-resize;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-before {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--split, 62%)) 0 0);
}
.compare-before img { filter: grayscale(1) brightness(0.5) contrast(0.85); }
.compare-divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 62%);
  width: 2px;
  background: var(--color-accent);
}
/* Square, flat and accent-filled like the rest of the system's controls; the
   outward arrows are the only cue that the seam is draggable. */
.compare-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-neutral-900) 34%, transparent);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.compare-handle svg { display: block; }
.compare:hover .compare-handle { transform: translate(-50%, -50%) scale(1.08); }
.compare:active .compare-handle { transform: translate(-50%, -50%) scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .compare-handle { transition: none; }
  .compare:hover .compare-handle,
  .compare:active .compare-handle { transform: translate(-50%, -50%); }
}
.compare-tag {
  position: absolute; top: 0;
  padding: 8px 14px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.compare-tag--before { left: 0; background: var(--color-bg); }
.compare-tag--after { right: 0; background: var(--color-accent); color: var(--color-bg); }

.compare-range { width: 100%; margin-top: 16px; accent-color: var(--color-accent); }

@media (max-width: 640px) {
  .compare { aspect-ratio: 4 / 3; }
}

/* — process -------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
.step { border-top: 2px solid var(--color-divider); padding-top: 22px; }
.step-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 15px; margin: 0;
  font-feature-settings: 'tnum' 1;
}
.step h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 22px; line-height: 28px; margin: 14px 0 0;
}
.step p {
  font-size: 15px; line-height: 26px; margin: 8px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.steps + .link-more { margin-top: 36px; }

@media (max-width: 560px) {
  .steps { gap: 24px 0; }
}

/* — service areas -------------------------------------------------------- */

.areas { padding: 84px 0; gap: 40px clamp(32px, 5vw, 96px); }
/* Sized so the designed two-line break holds inside a half-width column;
   at 48px the first line needs 579px and the column only offers ~492px. */
.areas .h-section { font-size: clamp(26px, 3.2vw, 38px); }
.areas .h-section + .link-more { margin-top: 28px; }
.area {
  border-top: 2px solid var(--color-divider);
  padding: 18px 0;
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 16px;
  align-items: baseline;
}
.area:last-child { border-bottom: 2px solid var(--color-divider); }
.area h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 0; }
.area p {
  font-size: 15px; line-height: 24px; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
@media (max-width: 480px) {
  .area { grid-template-columns: 1fr; gap: 6px; }
}

/* — testimonial ---------------------------------------------------------- */

.testimonial { padding: 20px 0 84px; }
.testimonial figure { margin: 0; }
.testimonial blockquote {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; letter-spacing: -0.015em;
  max-width: 32ch; margin: 0;
  text-indent: -0.496em; /* hangs the opening quote into the margin */
}
.testimonial figcaption {
  font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 28px 0 0;
  text-indent: -1.209em; /* hangs the em dash */
}

/* — partners ------------------------------------------------------------- */

.partners { padding: 44px 0 84px; }
.partners > p { margin: 0 0 24px; }
.partner-row { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: baseline; }
.partner {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 22px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* — consultation --------------------------------------------------------- */

.consult { padding: 0 0 96px; }
.consult-contact { margin-top: 32px; font-size: 15.5px; line-height: 30px; }
.consult-contact p { margin: 0; }
.consult-contact .addr { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

.form { gap: 18px; }
.form-note { font-size: 13px; line-height: 20px; margin: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.form-done h3 { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 32px; margin: 0; }
.form-done p { font-size: 15.5px; line-height: 28px; margin: 16px 0 0; max-width: 42ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
[hidden] { display: none !important; }

@media (max-width: 420px) {
  .panel { padding: 24px; }
  .panel-pair { grid-template-columns: 1fr; }
}

/* — poster close --------------------------------------------------------- */

.poster { background: var(--color-accent); color: var(--color-bg); }
.poster .wrap { padding-block: 84px; }
.poster .btn-row { margin-top: 42px; }
.poster .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); }
.poster .btn-ghost:hover { background: color-mix(in srgb, #ffffff 16%, transparent); color: var(--color-bg); }

/* — footer --------------------------------------------------------------- */

.site-footer {
  max-width: 1200px; margin: 0 auto;
  padding: 56px clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  font-size: 14px; line-height: 26px;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-brand {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.footer-blurb { margin: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.footer-col { display: grid; gap: 4px; align-content: start; }
.footer-col--meta { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* ==========================================================================
   Inner pages — Services, Process, Service areas, About, Contact.
   All four row types are the same idea at different column rhythms: a ruled
   band, an index column, a body column, and a narrow trailing column.
   ========================================================================== */

.page-hero { padding: 96px 0 72px; }
.h-page {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.06; letter-spacing: -0.02em;
  margin: 0 0 0 -0.058em;
  font-size: clamp(24px, 7.1vw, 76px);
}
.lede-lg {
  font-size: 17px; line-height: 28px;
  margin: 28px 0 0; max-width: 56ch;
}

/* — ruled rows — */

.rows > .row { border-top: 2px solid var(--color-divider); display: grid; }
.rows > .row:last-child { border-bottom: 2px solid var(--color-divider); }

.row--service {
  grid-template-columns: minmax(64px, 120px) minmax(280px, 440px) minmax(280px, 1fr);
  gap: 28px clamp(24px, 4vw, 64px);
  padding: 56px 0;
  align-items: start;
}
.row--phase {
  grid-template-columns: minmax(64px, 120px) minmax(0, 1fr) minmax(0, 320px);
  gap: 24px clamp(24px, 4vw, 64px);
  padding: 52px 0;
  align-items: start;
}
.row--area {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 300px);
  gap: 24px clamp(24px, 4vw, 64px);
  padding: 48px 0;
  align-items: start;
}
.row--value {
  grid-template-columns: minmax(64px, 120px) minmax(280px, 420px) minmax(0, 1fr);
  gap: 20px clamp(24px, 4vw, 64px);
  padding: 32px 0;
  align-items: baseline;
}

@media (max-width: 900px) {
  .rows > .row { grid-template-columns: 1fr; gap: 16px; }
  .row--service, .row--phase { padding: 40px 0; }
  .row--area { padding: 36px 0; }
}

.row-index {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  margin: 0; font-feature-settings: 'tnum' 1;
}
.row-index--lg {
  font-size: clamp(28px, 3vw, 40px);
  color: var(--color-accent);
  line-height: 1;
}
.row-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em;
  margin: 0;
}
.row-title--area { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: 0; }
.row-title--value { font-size: 24px; line-height: 28px; letter-spacing: 0; }
.row-body {
  font-size: 15.5px; line-height: 28px; margin: 16px 0 0; max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.row-body--flush { margin-top: 0; max-width: 52ch; }
.row-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* trailing note column — "you leave with", neighbourhood lists */
.row-note {
  font-size: 14px; line-height: 26px; margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.row-note .row-note-label {
  margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.row-note .row-note-value { margin: 8px 0 0; color: var(--color-text); }

/* — comparison table — */

.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 560px; }
.table th, .table td { padding: var(--space-3) var(--space-2); }
.table .yes { font-weight: 600; }

/* — closing CTA row — */

.cta-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.cta-row .h-cta {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 0 -0.058em;
  /* A percentage basis, not auto: in a wrapping flex row items wrap before
     they shrink, so an auto-sized heading would shove the button onto its own
     line. At 60% the pair fits on wide rows and still stacks on narrow ones. */
  flex: 1 1 60%;
  min-width: 0;
}

/* — slim footer used by the inner pages — */

.footer-slim {
  border-top: 2px solid var(--color-divider);
  padding: 36px 0 56px;
  display: flex; flex-wrap: wrap;
  gap: 12px 36px;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.footer-slim a { text-decoration: none; }
.footer-slim a:hover { text-decoration: underline; }

/* — About: story split — */

.story {
  padding: 72px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px clamp(32px, 5vw, 96px);
  align-items: center;
}
.story .media img,
.story .img-pending { aspect-ratio: 951 / 665; }
.story .media img { width: 100%; object-fit: cover; }
.h-story {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0;
}
.story p { font-size: 15.5px; line-height: 28px; margin: 20px 0 0; max-width: 48ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.story p + p { margin-top: 16px; }

/* — Contact — */

.contact { padding: 96px 0; }
.contact .h-page { font-size: clamp(24px, 5.4vw, 68px); }
.contact .lede-lg { max-width: 46ch; }
.contact-details {
  border-top: 2px solid var(--color-divider);
  margin-top: 40px; padding-top: 28px;
  display: grid; gap: 20px;
  font-size: 15.5px; line-height: 26px;
}
.contact-details p { margin: 0; }
.contact-label {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.contact-value {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  text-decoration: none;
}
.contact .panel { padding: 40px; }

@media (max-width: 420px) {
  .contact .panel { padding: 24px; }
}

/* — Services figures — */

.row--service .media img { width: 100%; aspect-ratio: 900 / 620; object-fit: cover; }
.row--service .img-pending { aspect-ratio: 900 / 620; }
.cta-row { padding: 72px 0 96px; }
.cta-row--flush { padding-top: 0; }
.cta-row--tight { padding-top: 24px; }

/* ==========================================================================
   Chrome layer — frosted glass and the border beam.

   The Modernist system is flat, square-cornered and single-accent, so these
   stay in one hue and at low opacity. Driven by site.js; everything degrades
   to a plain surface without it.
   ========================================================================== */


.hero-scene > .hero-media { z-index: 0; }
.hero-scene > .hero-index,
.hero-scene > .hero-card { z-index: 2; }


/* — frosted glass — */

/* Translucent from the top so the bar frosts over the hero photography;
   firmer past the fold so body copy stays legible behind it. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .masthead {
    background: color-mix(in srgb, var(--color-bg) 68%, transparent);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
    transition: background .4s ease;
  }
  :root[data-scrolled] .masthead {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  }

  /* Small chips that sit directly on photography get the same treatment. */
  .hero-index,
  .compare-tag--before {
    background: color-mix(in srgb, var(--color-bg) 74%, transparent);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
  }
}

/* The open mobile menu needs an opaque ground to stay readable. */
@media (max-width: 960px) {
  .nav-links[data-open] {
    background: var(--color-bg);
  }
}

/* — border beam —
   fx.js keeps one shared "already handled" set across every effect, so an
   element declaring both data-fx-spot and data-fx-beam only ever receives the
   first — which is why the beam never appeared on the estimator or the booking
   form. Driving it from CSS removes the ordering dependency entirely.
   site.js drops fx.js's own beam node if it ever wins the race, so the
   trail is always drawn exactly once. */

@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes beam-orbit { to { --beam-angle: 360deg; } }

[data-fx-beam] { position: relative; }
[data-fx-beam]::after {
  content: '';
  position: absolute; inset: -2px;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0 76%,
    var(--color-accent) 88%,
    transparent 97%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: beam-orbit 5s linear infinite;
}

/* Without @property the angle cannot animate, so the trail would sit frozen at
   one arc. Show a plain accent hairline instead. */
@supports not (background: conic-gradient(from var(--beam-angle), red, blue)) {
  [data-fx-beam]::after {
    background: none;
    border: 2px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    mask: none; -webkit-mask: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fx-beam]::after { animation: none; }
}