/* ==========================================================================
   TNT Colorado — Design System
   "Rugged Luxury" — photography-first editorial

   Direction: the photography is the material. Type, rules and space are the
   frame around it. Warm stone neutrals carry the page; the brand burgundy is
   used as a precise accent (rules, numerals, buttons) rather than as large
   flat fields, so the work in the photos stays the loudest thing on screen.
   ========================================================================== */

/* ----------------------------- Web fonts ------------------------------------
   Self-hosted rather than loaded from fonts.googleapis.com.

   The Google Fonts <link> was a stylesheet on a third-party origin, so before
   a single glyph could be requested the browser had to do a DNS lookup, a TLS
   handshake and a round trip to googleapis.com — and that stylesheet blocked
   rendering the whole time. On a throttled mobile connection Lighthouse
   measured 750 ms of blocked render from that one 1.6 KB file. Serving the
   same @font-face rules from this stylesheet, and the woff2 files from our own
   domain, removes both third-party origins from the critical path entirely.

   These are the exact variable fonts Google was serving (Manrope v20,
   Newsreader v26), split into the same latin / latin-ext subsets, so nothing
   about how the type renders has changed. Both are Open Font License, which
   permits self-hosting.

   To refresh them, see OPERATIONS.md §"Refreshing the self-hosted fonts".
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Brand ------------------------------------------------------------ */
  --brand: #6e1f33;          /* TNT burgundy (logo) */
  --brand-deep: #4a0e1f;
  --brand-soft: #8e4257;
  --brand-tint: #f4ecee;

  /* --- Warm stone neutrals ---------------------------------------------- */
  --ink: #1c1a19;            /* headings / near-black, warm */
  --ink-2: #4b4643;          /* body copy */
  --ink-3: #655f59;          /* muted / labels */
  --line: #e3ddd6;           /* hairline on light */
  --line-2: #d0c8c0;         /* stronger hairline */
  --paper: #ffffff;
  --shell: #f7f4f1;          /* page background, warm limestone */
  --shell-2: #efeae4;        /* alternate band */
  --sand: #bfa88c;           /* warm sand — labels & accents on dark */
  --gold: #d4a24c;           /* review stars only — see "Google reviews" */
  --night: #1a1917;          /* deep sections */
  --night-2: #232120;

  /* Frame colour — the surface a section sits on. Overridden per band so
     insets, hairline grids and photo borders always match their background. */
  --frame: var(--shell);

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Layout ----------------------------------------------------------- */
  --container: 78rem;
  --container-wide: 92rem;
  --gutter: 1.5rem;
  --hdr-h: 4.75rem;
  --section-y: clamp(4.5rem, 9vw, 8rem);

  --r-sm: 2px;
  --r: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(28, 26, 25, 0.05);
  --shadow-md: 0 10px 30px rgba(28, 26, 25, 0.08);
  --shadow-lg: 0 30px 70px rgba(28, 26, 25, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-2);
  background: var(--shell);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
::selection { background: var(--brand); color: #fff; }

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

/* --------------------------------- Type ----------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--brand); }
/* Burgundy has too little contrast on the dark bands — warm sand there. */
.band-night h2 em, .final-cta h2 em, .page-hero h1 em, .hero h1 em { color: var(--sand); }

.display {
  font-size: clamp(2.4rem, 5.1vw, 4rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
}
.h2 { font-size: clamp(1.95rem, 3.6vw, 3.1rem); line-height: 1.12; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.2; }

.lede {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 300;
}

/* An accented phrase inside a lede, borrowing the italic the headlines use for
   the same job: the one claim in a section worth slowing down for. Serif at a
   touch larger size so it holds its weight against the 300-weight sans. */
.lede em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--brand);
}
.band-night .lede em, .final-cta .lede em, .page-hero .lede em { color: var(--sand); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}
.eyebrow--plain::before { display: none; }
.band-night .eyebrow, .final-cta .eyebrow, .page-hero .eyebrow, .eyebrow--light { color: var(--sand); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* ------------------------------- Layout ----------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter); }

section { padding: var(--section-y) 0; }
.section--tight { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

.band-alt { background: var(--shell-2); --frame: var(--shell-2); }
.band-paper { background: var(--paper); --frame: var(--paper); }
.band-night {
  background: var(--night);
  --frame: var(--night);
  color: rgba(255, 255, 255, 0.74);
  position: relative;
}
.band-night h1, .band-night h2, .band-night h3, .band-night h4 { color: #fff; }

/* Fine film grain over dark bands — adds tactility so large dark areas don't
   read as flat digital black. */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Section head — editorial two-column: label + headline on the left,
   supporting copy on the right. Replaces the centred title-and-rule stack. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.band-night .sec-head { border-bottom-color: rgba(255,255,255,0.16); }
.sec-head h2 { margin-top: 1rem; }
.sec-head .lede { padding-bottom: 0.4rem; }
.band-night .sec-head .lede { color: rgba(255,255,255,0.7); }
.sec-head--solo { grid-template-columns: 1fr; }
.sec-head--center {
  grid-template-columns: 1fr;
  /* Stacked children — the two-column gap would otherwise become a 4rem
     gutter between the eyebrow, headline and lede. */
  row-gap: 0;
  justify-items: center;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
}
.sec-head--center .lede { max-width: 40rem; margin-top: 1.25rem; }

/* The reviews section keeps its header divider even though .sec-head--center
   normally drops it — the hairline reads as "end of header", so it belongs
   under the headline, not lower down attached to the summary rail. */
#reviews .sec-head--center {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding-bottom: 1.75rem;
}

@media (max-width: 800px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
}

/* --------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  min-height: 48px;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }

.btn-secondary { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn-on-dark { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-on-dark:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.15rem 2.35rem; font-size: 0.88rem; }

/* Text link with an animated rule — used for "view all" style actions. */
.link-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line-2);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-rule svg { transition: transform 0.3s var(--ease); }
.link-rule:hover { color: var(--brand); border-color: var(--brand); }
.link-rule:hover svg { transform: translateX(5px); }
.band-night .link-rule { color: #fff; border-color: rgba(255,255,255,0.35); }
.band-night .link-rule:hover { color: var(--sand); border-color: var(--sand); }

/* --------------------------------- Header --------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--hdr-h);
  background: rgba(247, 244, 241, 0.9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              height 0.35s var(--ease);
}
.site-header .container-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
}
.brand img { height: 2.4rem; width: auto; transition: filter 0.35s var(--ease); }

.main-nav { display: flex; align-items: center; gap: 2.25rem; }
.nav-foot { display: none; }
/* Direct children only — the mobile menu footer holds a button and a phone
   link that must not pick up nav-link styling. */
.main-nav > a {
  position: relative;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.35rem 0;
  transition: color 0.2s var(--ease);
}
.main-nav > a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right 0.3s var(--ease);
}
.main-nav > a:hover::after, .main-nav > a[aria-current="page"]::after { right: 0; }
.main-nav > a:hover { color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-phone {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.85rem;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.header-phone:hover { color: var(--brand); }

/* Overlay mode — header sits on top of the hero photo until the page scrolls */
body.has-hero .site-header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.16);
  height: 5.5rem;
}
body.has-hero .site-header:not(.is-stuck) .brand img { filter: brightness(0) invert(1); }
body.has-hero .site-header:not(.is-stuck) .main-nav > a,
body.has-hero .site-header:not(.is-stuck) .header-phone { color: #fff; }
body.has-hero .site-header:not(.is-stuck) .main-nav > a:hover,
body.has-hero .site-header:not(.is-stuck) .header-phone:hover { color: var(--sand); }
body.has-hero .site-header:not(.is-stuck) .btn-primary {
  background: transparent; border-color: rgba(255,255,255,0.6); color: #fff;
}
body.has-hero .site-header:not(.is-stuck) .btn-primary:hover { background: #fff; color: var(--ink); }
body.has-hero .site-header:not(.is-stuck) .nav-toggle span,
body.has-hero .site-header:not(.is-stuck) .nav-toggle::before,
body.has-hero .site-header:not(.is-stuck) .nav-toggle::after { background: #fff; }

body:not(.has-hero) main { padding-top: var(--hdr-h); }

.nav-toggle {
  display: none;
  background: none; border: none; padding: 0;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), background 0.35s var(--ease);
}
.nav-toggle[aria-expanded="true"]::before { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-7.5px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }

@media (max-width: 1000px) {
  .main-nav {
    /* The header's backdrop-filter makes it the containing block for fixed
       descendants, so `inset: var(--hdr-h) 0 0 0` would resolve against the
       header box (and collapse) rather than the viewport. Anchor to the bottom
       of the header and set the height explicitly instead. */
    position: fixed;
    top: 100%; left: 0; right: 0; bottom: auto;
    height: calc(100vh - var(--hdr-h));
    height: calc(100dvh - var(--hdr-h));
    overflow-y: auto;
    background: var(--shell);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .main-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .main-nav > a {
    color: var(--ink) !important;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line);
  }
  .main-nav > a::after { display: none; }
  .nav-foot { display: block; margin-top: auto; padding-top: 2.5rem; }
  .nav-foot .nav-phone {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin-top: 1.25rem;
    font-family: var(--font-display); font-size: 1.5rem;
    color: var(--ink) !important;
  }
  .header-phone { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 620px) {
  .header-actions .btn { display: none; }
}

/* ---------------------------------- Hero ----------------------------------- */
.hero {
  position: relative;
  min-height: min(94svh, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Slow push-in: the space feels alive without anything moving on the page. */
.hero-media img { animation: heroDrift 24s var(--ease) forwards; transform-origin: 60% 60%; }
@keyframes heroDrift { from { transform: scale(1.085); } to { transform: scale(1); } }

.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14,13,12,0.92) 0%, rgba(14,13,12,0.74) 20%,
                    rgba(14,13,12,0.40) 48%, rgba(14,13,12,0.20) 70%,
                    rgba(14,13,12,0.52) 100%),
    linear-gradient(to right, rgba(14,13,12,0.55) 0%, rgba(14,13,12,0.04) 68%);
}

.hero-body {
  position: relative;
  margin-top: auto;
  padding-top: calc(var(--hdr-h) + 2.5rem);
  padding-bottom: 2.5rem;
  /* Keeps type readable over the brightest patches of a photo without having
     to darken the whole image. */
  text-shadow: 0 1px 26px rgba(10, 9, 8, 0.42);
}
.hero-body .eyebrow { color: var(--sand); }
.hero h1 {
  color: #fff;
  max-width: 18ch;
  margin: 1.1rem 0 1.35rem;
}
.hero h1 em { color: var(--sand); }
.hero .sub {
  max-width: 38rem;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin-bottom: 2.1rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Credibility rail pinned to the bottom edge of the hero */
.hero-marks {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.22);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-marks li {
  /* Symmetric padding — the cells centre their contents, so an asymmetric
     gutter would throw the optical centre off by half the difference. */
  padding: 1.2rem 1.25rem 1.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.86);
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 0.7rem;
}
.hero-marks li + li { border-left: 1px solid rgba(255,255,255,0.16); }
.hero-marks .v {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
}
@media (max-width: 860px) {
  .hero-marks { grid-template-columns: repeat(2, 1fr); }
  .hero-marks li:nth-child(odd) { border-left: 0; }
  .hero-marks li:nth-child(3), .hero-marks li:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.16); }
}
@media (max-width: 560px) {
  /* Full-width stacked CTAs read as one clear tap target column instead of
     two buttons of mismatched width. */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}
@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; padding-left: 1.1rem; padding-right: 1.1rem; }
}
@media (max-width: 520px) {
  .hero { min-height: min(92svh, 44rem); }
  .hero-body { padding-top: calc(var(--hdr-h) + 4rem); }
  .hero-marks { grid-template-columns: 1fr 1fr; }
  .hero-marks li { font-size: 0.72rem; padding: 1rem 0.6rem; }
  .hero-marks .v { font-size: 1.2rem; }
}

/* Promise strip — the risk reversal, directly under the credibility rail.
   Deliberately quieter than the marks above it: the rail earns attention with
   display numerals, this line earns it by being the last thing read before the
   scroll. Sand keeps it in the hero's palette instead of pulling burgundy onto
   a photograph, where it would muddy. */
.hero-promise {
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
  padding: 0.85rem 1.25rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.86);
}
.hero-promise li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-promise svg {
  width: 0.95rem; height: 0.95rem;
  flex: none;
  color: var(--sand);
}
.hero-promise .hero-promise-link {
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 1px;
  color: rgba(255,255,255,0.8);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-promise .hero-promise-link:hover { color: var(--sand); border-color: var(--sand); }
@media (max-width: 560px) {
  .hero-promise {
    /* Two promises stacked read faster here than three items wrapping into a
       ragged block; the link is reachable a screen later in the section. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.74rem;
  }
  .hero-promise .hero-promise-link { display: none; }
}

/* Same promise ticks, centred under a dark-band CTA (gallery). No rule above
   it — the CTA's own buttons are the divider, and a second hairline in a
   centred stack would read as a table row rather than a closing note. */
.cta-promise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 2.25rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}
.cta-promise li { display: inline-flex; align-items: center; gap: 0.5rem; }
.cta-promise svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--sand); }
.cta-promise a {
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 1px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.cta-promise a:hover { color: var(--sand); border-color: var(--sand); }
@media (max-width: 520px) {
  .cta-promise { flex-direction: column; gap: 0.5rem; }
}

/* Scroll cue */
.hero-cue {
  position: absolute;
  /* 9.5rem + the 3.25rem promise strip added beneath the marks rail, so the cue
     sits exactly where it did relative to the rail before the strip existed. */
  right: var(--gutter); bottom: 12.75rem;
  writing-mode: vertical-rl;
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  display: flex; align-items: center; gap: 0.9rem;
}
.hero-cue::after {
  content: ""; width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0.65), transparent);
}
@media (max-width: 1100px) { .hero-cue { display: none; } }

/* ------------------------------ Figures ------------------------------------ */
.figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--shell-2);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .figure--tall { aspect-ratio: 4 / 3; } }
/* Landscape photos cropped to a portrait frame usually need their focal point
   pulled down out of the sky. */
img.obj-low { object-position: center 66%; }
img.obj-high { object-position: center 34%; }
img.obj-left { object-position: 0% center; }
.figure--wide { aspect-ratio: 3 / 2; }
.figure--pano { aspect-ratio: 16 / 9; }
.figure--square { aspect-ratio: 1 / 1; }

/* Caption strip that reads like a photographer's slug line */
.figure-note {
  margin-top: 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 0.6rem;
}
.figure-note::before { content: ""; width: 1.25rem; height: 1px; background: var(--line-2); }

/* Overlapping pair — a large frame with a smaller inset photo breaking its
   corner. Gives the about section depth without a drop-shadowed card. */
.figure-stack { position: relative; padding: 0 3.5rem 3.5rem 0; }
.figure-stack .figure--main { aspect-ratio: 5 / 6; }
.figure-stack .figure--inset {
  position: absolute; right: 0; bottom: 0;
  width: 55%; aspect-ratio: 1 / 1;
  border: 10px solid var(--frame);
  border-radius: calc(var(--r-md) + 10px);
}
.figure-stack .tag {
  position: absolute; left: 0; bottom: 1.25rem;
  background: var(--brand); color: #fff;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.7rem 1.1rem;
}
@media (max-width: 800px) {
  .figure-stack { padding: 0 2.25rem 2.25rem 0; }
  .figure-stack .figure--main { aspect-ratio: 4 / 3; }
}

/* ------------------------------ Split layout ------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5.5vw, 5.5rem);
  align-items: center;
}
.split--media-right .split-media { order: 2; }
.split--top { align-items: start; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--media-right .split-media { order: 0; }
}

/* Numbered editorial list — replaces the three icon cards */
.numlist { border-top: 1px solid var(--line); }
.numlist li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--line);
}
.numlist .n {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--brand);
  padding-top: 0.28rem;
}
.numlist h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; color: var(--ink); letter-spacing: 0; }
.numlist p { margin-top: 0.45rem; color: var(--ink-2); font-size: 0.97rem; }

/* Closing beat for the problem list: the section names three problems, then
   names the stake. Display serif at the same scale the guarantee section uses
   to close, so the two sections resolve in the same register. */
.problem-close {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.35;
  color: var(--ink);
  margin-top: clamp(1.6rem, 3vw, 2.1rem);
  text-wrap: balance;
}

/* Check list (about section) */
.check-list { margin-top: 2rem; border-top: 1px solid var(--line); }
.check-list li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.check-list .check { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.32rem; color: var(--brand); }
.check-list strong { display: block; color: var(--ink); font-size: 1rem; }
.check-list span.desc { display: block; color: var(--ink-3); font-size: 0.94rem; }

/* ------------------------------ Stat hairline grid ------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat { background: var(--frame); padding: 2.1rem 1.5rem; }
.stat .v {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--ink);
}
.stat .k {
  margin-top: 0.7rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------- Guarantee ---------------------------------
   The one section on the page that is a commitment rather than a claim, so it
   gets the only two paper cards on a tinted band — they lift off the shell the
   way a signed page lifts off a desk. The burgundy edge is the same "precise
   accent" the rest of the system uses for rules and numerals; here it does the
   work a seal or a stamp would do, without the novelty of an actual badge. */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.promise {
  background: var(--paper);
  border: 1px solid var(--line);
  /* Weight on the top edge only — a full burgundy border would turn the card
     into a flat field of brand and outshout the photography above it. */
  border-top: 2px solid var(--brand);
  border-radius: var(--r);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.promise-icon {
  width: 2rem; height: 2rem;
  color: var(--brand);
  margin-bottom: 1.25rem;
}
.promise h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.2;
}
.promise p { margin-top: 0.9rem; color: var(--ink-2); font-size: 0.97rem; }

/* Carve-outs sit in the quiet tier deliberately: legible and unhidden, but not
   competing with the promise it qualifies. */
.promise-fine {
  max-width: 52rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: 0.85rem;
  line-height: 1.65;
  text-align: center;
}

/* The three complaints homeowners arrive with. Set as quotes rather than a
   list: they are things people said, and the burgundy edge marks them as
   quoted voice without the cost of a full quote card each. */
.gripes {
  max-width: 44rem;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  display: grid;
  gap: 0.9rem;
}
.gripes li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
  padding-left: 1.1rem;
  border-left: 2px solid var(--brand);
  text-wrap: pretty;
}
/* The reply to the three quotes above. It is a claim rather than a caveat, so
   it carries full ink and a little more weight than body prose — small grey
   type here would undersell the one sentence the section turns on. */
.gripes-answer {
  max-width: 44rem;
  margin: clamp(1.4rem, 2.5vw, 1.9rem) auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.promise-close { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.promise-close-line {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 34rem;
  margin: 0 auto 1.75rem;
  text-wrap: balance;
}
@media (max-width: 820px) {
  .promise-grid { grid-template-columns: 1fr; }
}

/* --------------------------------- Process --------------------------------- */
.process-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.16; }
.process-bg img { width: 100%; height: 100%; object-fit: cover; }
.process-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--night) 0%, rgba(26,25,23,0.45) 45%, var(--night) 100%);
}
.band-night > .container, .band-night > .container-wide { position: relative; z-index: 1; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.step { padding-right: clamp(1.25rem, 2.5vw, 2.5rem); }
.step + .step {
  border-left: 1px solid rgba(255,255,255,0.16);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
.step .n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: rgba(255,255,255,0.26);
  display: block;
  margin-bottom: 1.1rem;
}
.step h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.01em; color: #fff; margin-bottom: 0.6rem;
}
.step p { font-size: 0.93rem; color: rgba(255,255,255,0.66); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 2.5rem; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step { border-left: 0 !important; padding-left: 0 !important; padding-bottom: 2rem; }
  .step + .step { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 2rem; }
  .step .n { font-size: 2.2rem; margin-bottom: 0.6rem; }
}

/* --------------------------------- Services -------------------------------- */
/* Every service leads with a photograph — visitors should be able to shop the
   list with their eyes before they read a word of it. */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem); }
@media (max-width: 950px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

.svc { display: block; }
.svc .shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--shell-2);
  margin-bottom: 1.25rem;
}
.svc .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.svc:hover .shot img { transform: scale(1.055); }
.svc .shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,13,12,0.35), transparent 45%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.svc:hover .shot::after { opacity: 1; }
.svc h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 1.06rem;
  color: var(--ink); letter-spacing: 0;
  display: inline-block;
  padding-bottom: 0.3rem;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease);
}
.svc:hover h3 { background-size: 100% 1px; }
.svc p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-2); }
/* The "what's actually included" line on every service card: concrete nouns
   for the reader and for search, sitting between the name and the prose so the
   card is scannable without reading a paragraph. */
.svc .svc-sub {
  margin-top: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-soft);
}
.svc .svc-sub + p { margin-top: 0.5rem; }

/* -------------------------- Work mosaic (home) ----------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(9rem, 14vw, 14.5rem);
  gap: clamp(0.6rem, 1.1vw, 1rem);
}
.mosaic .tile-lg { grid-column: span 2; grid-row: span 2; }
@media (max-width: 780px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10.5rem; }
  .mosaic .tile-lg { grid-column: span 2; grid-row: span 2; }
  /* Half-width tiles can't carry full-size captions */
  .tile .cap { padding: 0.8rem 0.85rem; }
  .mosaic .tile:not(.tile-lg) .cap .t { font-size: 0.82rem; }
  .mosaic .tile:not(.tile-lg) .cap .m { font-size: 0.58rem; letter-spacing: 0.14em; }
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--shell-2);
  display: block;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,13,12,0.88) 0%, rgba(14,13,12,0.34) 45%, transparent 75%);
  opacity: 0.8;
  transition: opacity 0.4s var(--ease);
}
.tile:hover::after { opacity: 1; }
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.15rem 1.25rem;
  color: #fff;
  transform: translateY(0.4rem);
  transition: transform 0.4s var(--ease);
}
.tile:hover .cap { transform: translateY(0); }
.tile .cap .t { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.tile .cap .m {
  display: block; margin-top: 0.3rem;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.tile-lg .cap .t { font-size: 1.2rem; }

/* The last cell of the mosaic is the gallery door, not a filler photo. */
.tile-more {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background: var(--night);
  color: #fff;
  transition: background 0.35s var(--ease);
}
.tile-more::after { display: none; }
.tile-more:hover { background: var(--brand-deep); }
.tile-more .k {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand);
}
.tile-more .t {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.15;
}
.tile-more .t svg { flex: none; margin-bottom: 0.25rem; transition: transform 0.35s var(--ease); }
.tile-more:hover .t svg { transform: translateX(5px); }

.mosaic-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.mosaic-foot p { color: var(--ink-3); font-size: 0.92rem; max-width: 34rem; }

/* --------------------------- Before / after slider -------------------------- */
.ba-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .ba-wrap { grid-template-columns: 1fr; } }

.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--shell-2);
  --pos: 50%;
  touch-action: pan-y;
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }

/* Empty "before" state — an obvious, self-documenting drop zone rather than an
   unrelated photo pretending to be a before shot. */
.ba-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 0.75rem;
  text-align: center;
  /* Sits in the left half so the message stays readable at the default
     50% split rather than disappearing under the "after" photo. */
  padding: 2rem 52% 2rem 2rem;
  background:
    repeating-linear-gradient(135deg, #e9e3dc 0 14px, #e3ddd5 14px 28px);
  color: var(--ink-3);
}
.ba-empty svg { width: 2rem; height: 2rem; opacity: 0.5; }
.ba-empty .t { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.ba-empty .d { font-size: 0.86rem; max-width: 22rem; }
@media (max-width: 700px) {
  .ba-empty { padding: 1rem 52% 1rem 1rem; gap: 0.5rem; }
  .ba-empty .d { display: none; }
  .ba-empty svg { width: 1.5rem; height: 1.5rem; }
}

.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(20,15,12,0.28), 0 0 16px rgba(0,0,0,0.4);
  pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  display: grid; place-items: center;
  color: var(--ink);
  pointer-events: none;
}
.ba-tag {
  position: absolute; top: 1rem;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff;
  background: rgba(14,13,12,0.55);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  pointer-events: none;
}
.ba-tag--before { left: 1rem; }
.ba-tag--after { right: 1rem; }

.ba input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none; -webkit-appearance: none;
  background: transparent;
}
.ba input[type="range"]:focus-visible ~ .ba-knob {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

/* ----------------------------------- Trust ---------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.trust-col h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 1rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.trust-col ul li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: 0.95rem;
}
.trust-col p.character { padding: 0.9rem 0; color: var(--ink-2); font-size: 0.95rem; }
.trust-tagline {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1.4;
  color: var(--ink);
}
.trust-tagline span { color: var(--brand); padding: 0 0.4rem; }

/* Callback to the guarantee section, not a restatement of it — the full promise
   copy lives once, up the page. Reads as a footnote closing the three columns. */
.trust-promise {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.95rem;
  text-align: center;
}
.trust-promise a {
  color: var(--brand);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}
.trust-promise a:hover { border-color: var(--brand); }

/* -------------------------------- Testimonials ------------------------------ */
.testimonial-carousel { max-width: 52rem; margin: 0 auto; }
.testimonial-track { position: relative; overflow: hidden; }
.testimonial-slide {
  display: none;
  position: absolute; top: 0; left: 0;
  width: 100%;
  padding: 0 clamp(0rem, 3vw, 2.5rem);
  text-align: center;
  transform: translateX(0%);
}
.testimonial-slide.is-active { display: block; }
.testimonial-slide .quote-mark {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1em;
  color: var(--sand);
  opacity: 0.55;
  display: block;
}
.testimonial-slide p.body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: #fff;
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
.testimonial-slide p.author {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sand);
}
.carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.carousel-arrow {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.carousel-arrow:hover { border-color: #fff; background: #fff; color: var(--ink); }
.carousel-dots { display: flex; align-items: center; }
/* The dot a visitor sees is 7px, but a 7px button is an unhittable target on a
   phone. The button is padded out to the 24px minimum and stays transparent;
   the visible dot is drawn by ::before, so the hit area grew without the
   control getting visually heavier. Gap is 0 because the padding now supplies
   the spacing. */
.carousel-dots .dot {
  width: 24px; height: 24px; padding: 0; border: none; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.carousel-dots .dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.carousel-dots .dot.is-active::before { background: var(--sand); transform: scale(1.5); }

/* ------------------------------ Google reviews ------------------------------
   Every Google attribution on the site sits on a dark surface — the hero photo,
   the night review band, the footer — so these tokens are tuned against
   --night rather than against the light bands.

   Two deliberate departures from the palette:
   - Stars use --gold, not --sand. Sand is quiet enough that a row of it reads
     as ornament; a rating has to read as a rating at a glance.
   - The Google "G" keeps its official four colours. It is the mark that makes
     the proof checkable, so it is reproduced rather than restyled to fit.
   Both are small, and both only ever appear at label size.
   -------------------------------------------------------------------------- */

/* One <symbol> beats 35 copies of the same star path across the page. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Stars scale off font-size so one component serves every context. */
.stars { display: inline-flex; gap: 0.14em; color: var(--gold); line-height: 1; }
.stars svg { width: 1em; height: 1em; fill: currentColor; }
.stars--sm { font-size: 0.8rem; }
.stars--lg { font-size: 1.2rem; }

.g-mark { width: 1em; height: 1em; flex: none; }

/* Google rating as the first cell of the hero credibility rail. It borrows the
   rail's own anatomy — display numeral, then a small label — instead of
   sitting above it as a badge, so the proof reads as part of the set. Only
   the gold stars and the "G" mark it as a Google rating. */
.hero-marks .mark-review > a {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  transition: opacity 0.25s var(--ease);
}
.hero-marks .mark-review > a:hover { opacity: 0.75; }
/* Numeral and stars are one unwrappable unit, so a narrow cell breaks after
   the rating rather than splitting "5.0" off from its own stars. */
.mark-review-score { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.mark-review-src { display: inline-flex; align-items: center; gap: 0.38rem; }
.mark-review .g-mark { font-size: 0.95rem; }

/* Summary rail below the carousel — the aggregate score on the left, the way
   through to the listing on the right. The section's one hairline stays up
   at the header (#reviews .sec-head--center); down here it's just breathing
   room off the carousel controls, not a second divider. */
.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  max-width: 52rem;
  margin: clamp(3.5rem, 7vw, 5rem) auto 0;
}
.rs-score { display: flex; align-items: center; gap: 1.15rem; }
.rs-num {
  font-family: var(--font-display);
  font-size: 3.1rem;
  line-height: 1;
  color: #fff;
}
.rs-meta { display: flex; flex-direction: column; gap: 0.4rem; }
.rs-count {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}
.rs-count b { color: #fff; font-weight: 700; }
.rs-link { padding-left: 1.45rem; padding-right: 1.45rem; }
.rs-link .g-mark { font-size: 1.05rem; }

@media (max-width: 620px) {
  /* Side by side, the caption wraps awkwardly under the numeral. Stacked and
     centred it reads as one block: score, stars, source. */
  .review-summary { justify-content: center; text-align: center; }
  .rs-score { flex-direction: column; gap: 0.55rem; }
  .rs-meta { align-items: center; gap: 0.5rem; }
  .rs-link { width: 100%; }
}

/* ------------------------------- Service area ------------------------------- */
.area-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .area-grid { grid-template-columns: 1fr; } }

.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.area-list--center { justify-content: center; }
.area-list li {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-weight: 600; font-size: 0.85rem;
  color: var(--ink-2);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.area-list li:hover { border-color: var(--brand); color: var(--brand); }
.area-note { margin-top: 1.75rem; color: var(--ink-3); font-size: 0.94rem; }
.area-note a { color: var(--brand); font-weight: 700; }

/* ----------------------------------- FAQ ------------------------------------ */
.faq-list { border-top: 1px solid var(--line); max-width: 60rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.faq-q:hover { color: var(--brand); }
.faq-q .plus { flex: none; width: 1.1rem; height: 1.1rem; position: relative; }
.faq-q .plus::before, .faq-q .plus::after {
  content: ""; position: absolute; background: var(--brand);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-q .plus::before { width: 100%; height: 1.5px; }
.faq-q .plus::after { width: 1.5px; height: 100%; transition: transform 0.3s var(--ease); }
.faq-item.is-open .faq-q .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-a p { padding: 0 3rem 1.6rem 0; color: var(--ink-2); max-width: 46rem; }
.faq-item.is-open .faq-a { max-height: 26rem; }

/* -------------------------------- Final CTA --------------------------------- */
.final-cta { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.final-cta .hero-media { position: absolute; inset: 0; z-index: -1; }
.final-cta .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.final-cta .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(14,13,12,0.94) 0%, rgba(14,13,12,0.82) 45%, rgba(74,14,31,0.62) 100%);
}
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (max-width: 950px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }
.final-cta h2 { color: #fff; }
.final-cta .lede { color: rgba(255,255,255,0.78); margin-top: 1.25rem; }

.contact-form {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--ink-2);
  box-shadow: var(--shadow-lg);
  margin-top: 2.5rem;
}
.contact-form .field { margin-bottom: 1.15rem; min-width: 0; }
.contact-form label {
  display: block; font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.5rem; color: var(--ink-3);
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  min-width: 0;
  max-width: 100%;
  transition: border-color 0.25s var(--ease);
}
.contact-form select { padding-right: 1rem; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-bottom-color: var(--brand);
}
.contact-form textarea { resize: vertical; min-height: 5rem; }
.contact-form .row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 520px) { .contact-form .row-2 { grid-template-columns: minmax(0, 1fr); } }
.contact-form .btn { margin-top: 1.25rem; }
.form-note { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.9rem; text-align: center; }
.form-success { display: none; text-align: center; padding: 3rem 1rem; background: var(--paper); border-radius: var(--r-md); margin-top: 2.5rem; }
.form-success.is-visible { display: block; }
.form-success h3 { margin-bottom: 0.6rem; }
.form-success p { color: var(--ink-2); }

.direct-contact { padding-top: 2.5rem; }
.direct-contact h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 0.9rem;
}
.direct-contact .phone-link {
  font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.6rem);
  color: #fff; display: inline-block; margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color 0.25s var(--ease);
}
.direct-contact .phone-link:hover { border-color: #fff; }
.direct-contact > p { color: rgba(255,255,255,0.78); margin-bottom: 2.5rem; }
.next-steps { margin-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.16); }
/* The gap belongs to the join between a list and the heading after it, not to
   whichever list happens to sit last — so the panel can be reordered without
   leaving a 2.5rem hole dangling at the bottom of the column. */
.direct-contact ul + h3 { margin-top: 2.5rem; }
.next-steps li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.8); font-size: 0.93rem;
}
.next-steps .step-num {
  flex: none;
  font-family: var(--font-display); font-size: 0.9rem; color: var(--sand);
}

/* Included-with-every-project list — same hairline anatomy as .next-steps so
   the panel reads as one column, with sand ticks marking these as things the
   visitor gets rather than steps they take. */
.included-list { margin-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.16); }
.included-list li {
  display: flex; gap: 0.85rem; align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.8); font-size: 0.93rem;
}
.included-list svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--sand); align-self: center; }

/* --------------------------------- Footer ----------------------------------- */
.site-footer { background: var(--night); color: rgba(255,255,255,0.62); padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 2.9rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.5rem; }
.footer-brand p { max-width: 24rem; font-size: 0.94rem; }
.footer-tagline {
  margin-top: 1.25rem; font-weight: 700; letter-spacing: 0.16em; font-size: 0.7rem;
  text-transform: uppercase; color: var(--sand);
}
.site-footer h4 {
  color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.4rem;
}
.site-footer ul li { margin-bottom: 0.75rem; font-size: 0.93rem; }
.site-footer a { transition: color 0.2s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: center; gap: 0.65rem; }
.footer-bottom {
  max-width: var(--container-wide); margin: 0 auto; padding: 1.75rem var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
}
.footer-bottom .legal-links { display: flex; gap: 1.5rem; }

/* ------------------------------- Gallery page -------------------------------- */
.page-hero {
  position: relative;
  padding: calc(var(--hdr-h) + clamp(4rem, 8vw, 7rem)) 0 clamp(3.5rem, 6vw, 5.5rem);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero .hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,13,12,0.92), rgba(14,13,12,0.6) 60%, rgba(14,13,12,0.72));
}
.page-hero h1 { color: #fff; max-width: 20ch; margin: 1.4rem 0 1.25rem; }
.page-hero .lede { color: rgba(255,255,255,0.8); max-width: 42rem; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.filter-btn {
  padding: 0.6rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  font-weight: 600; font-size: 0.82rem; color: var(--ink-2);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Uniform tiles here on purpose: the grid has to stay tidy as categories are
   filtered in and out. The editorial asymmetry lives in the home page mosaic. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.1vw, 1rem);
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-item { aspect-ratio: 4 / 3; cursor: pointer; }
.gallery-item.is-hidden { display: none; }
/* Captions always legible on touch, revealed on hover for pointers */
.gallery-item .cap { transform: translateY(0); }
@media (hover: hover) {
  .gallery-item::after { opacity: 0; }
  .gallery-item .cap { opacity: 0; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
  .gallery-item:hover::after, .gallery-item:hover .cap { opacity: 1; }
}

/* Gallery "add more" slot — a live placeholder so empty categories still read
   as intentional space rather than a broken grid. */
.tile-add {
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; justify-items: center; gap: 0.6rem;
  text-align: center; padding: 1.5rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink-3);
  background: var(--shell-2);
}
.tile-add svg { width: 1.6rem; height: 1.6rem; opacity: 0.5; }
.tile-add .t { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.tile-add .d { font-size: 0.82rem; max-width: 16rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14,13,12,0.96);
  display: none; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 80vh; border-radius: var(--r); }
.lightbox .cap {
  color: rgba(255,255,255,0.8); text-align: center; margin-top: 1.25rem;
  font-size: 0.85rem; letter-spacing: 0.02em;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: #fff; width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev { left: 0.75rem; }
  .lightbox-next { right: 0.75rem; }
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
}

/* ---------------------------------- Misc ------------------------------------ */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--brand); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* Scroll reveal — small, once, and completely optional.
   Gated on .has-js so content is never hidden when scripting is unavailable. */
.has-js .reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal[data-delay="1"].is-in { transition-delay: 0.09s; }
.reveal[data-delay="2"].is-in { transition-delay: 0.18s; }
.reveal[data-delay="3"].is-in { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .has-js .reveal { opacity: 1; transform: none; }
  .hero-media img { animation: none; transform: none; }
}

/* ------------------------- Legal pages (long-form) ------------------------ */
/* Privacy Policy and Terms of Service. These are reading pages, not selling
   pages: no photography, one narrow column, and a measure that stays
   comfortable for dense paragraphs. The base reset zeroes p margins and list
   styling, so everything long-form has to be re-established here rather than
   inherited. */

/* A page hero with no photograph behind it — the legal pages have nothing to
   show, and a stock patio shot above a liability disclaimer reads as filler. */
.page-hero--plain { background: var(--night); }

.legal { padding: clamp(3rem, 6vw, 5rem) 0 var(--section-y); }

.legal-body { max-width: 44rem; }
.legal-body > * + * { margin-top: 1.1rem; }

.legal-body h2 {
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: clamp(2.5rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.legal-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal-body h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1.9rem;
}

.legal-body p,
.legal-body li { color: var(--ink-2); line-height: 1.78; }

.legal-body ul { padding-left: 1.2rem; list-style: disc; }
.legal-body li::marker { color: var(--line-2); }
.legal-body li + li { margin-top: 0.55rem; }

.legal-body strong { color: var(--ink); font-weight: 700; }

.legal-body a {
  color: var(--brand);
  border-bottom: 1px solid rgba(110, 31, 51, 0.3);
  transition: border-color 0.25s var(--ease);
}
.legal-body a:hover { border-bottom-color: var(--brand); }

/* Effective date / entity block under the H1. */
.legal-meta {
  font-size: 0.85rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Closing contact block — set apart from the policy text above it. */
.legal-contact {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--shell-2);
  border-radius: var(--r-md);
}
.legal-contact > * + * { margin-top: 0.4rem; }
.legal-contact h2 {
  margin-top: 0; padding-top: 0; border-top: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: 0.9rem;
}