/* Self-hosted fonts, added 2026-08-15. Both are the latin variable subsets
   Google serves, downloaded once and committed. Loading them from
   fonts.googleapis.com cost 1,690ms of render-blocking time on mobile (measured
   by Lighthouse, 2026-08-15) because the stylesheet had to be fetched from a
   second origin before the font files could even be requested. Serving them
   from this origin removes that round trip and stops sending every visitor's IP
   to Google. Both families are SIL Open Font License 1.1, which permits this.
   The weight ranges below are the full variable ranges; the site uses
   Playfair 400-600 and Jost 300-500. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/playfair-latin-var.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: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/jost-latin-var.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 {
  --charcoal: #2b2926;
  --charcoal-deep: #211f1d;
  --gold: #c9a45c;
  /* --gold on cream measures 1.93:1, so it fails WCAG AA as text. It stays the
     brand accent for fills and borders; --gold-text is the same hue darkened
     until it clears 4.5:1 on the darkest light ground the site uses (--mist).
     Verified 2026-08-15: 4.56:1 on mist, 4.99:1 on cream, 5.56:1 on white. */
  --gold-text: #7c6539;
  --gold-soft: #d7ba7e;
  --ink: #33302c;
  --stone: #6f6a63;
  /* --stone measured 4.40:1 on mist at 18px, just under AA. Used for .lede. */
  --stone-aa: #6d6861;
  --mist: #efe8db;
  --cream: #f7f2e9;
  --white: #ffffff;
  --serif: "Playfair Display", "Didot", "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-weight: 300;
  font-size: 17px;
}

img { max-width: 100%; display: block; height: auto; }

/* Every photo is a <picture> (webp with a jpg fallback). display:contents
   removes the wrapper from layout so the <img> stays a direct child of its
   parent for sizing, and every existing `.parent img` selector keeps working.
   Rules that set an explicit height on an img override the height:auto above. */
picture { display: contents; }

/* Keyboard users land on the fixed nav first; without this they tab through
   every nav link on the way to the content on each visit. Visible only on
   focus, which is the one time it is useful. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--charcoal-deep);
  color: var(--white);
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------- Clear peek-a-boo nav ---------- */
.nav-shell {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  color: var(--ink);
  transform: translateY(0);
  transition: transform 0.32s ease;
  will-change: transform;
}
.nav-shell.is-hidden {
  transform: translateY(-100%);
}
.nav-shell:hover,
.nav-shell:focus-within {
  transform: translateY(0);
}

/* --nav-bg is written by main.js from the computed background-color of the
   section actually under the bar. Photo-backed sections (hero, detail,
   con-feature, cta-band) compute to transparent, so the bar stays clear over
   imagery and only goes solid over flat-colour sections — where transparent
   text was unreadable when the bar peeked back on scroll-up. */
header.nav {
  background: var(--nav-bg, transparent);
  border-bottom: 0;
  box-shadow: none;
  transition: background-color 0.28s ease;
}
/* On a solid bar the shadows were doing a job nothing needs doing anymore,
   and they read as smudge against a flat colour. */
.nav-shell.has-solid-nav .brand,
.nav-shell.has-solid-nav .brand-name small,
.nav-shell.has-solid-nav nav.links a,
.nav-shell.has-solid-nav .nav-mobile-cta {
  text-shadow: none;
}
header.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.nav-shell.is-over-dark .brand {
  color: var(--white);
  text-shadow: 0 1px 16px rgba(15, 13, 11, 0.65);
}
.nav-shell.is-over-light .brand {
  text-shadow: 0 1px 12px rgba(250, 246, 238, 0.72);
}
.brand-mark { height: 52px; width: 52px; }
.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.08em;
  line-height: 1.25;
}
.brand-name small {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--stone);
  font-weight: 400;
}
.nav-shell.is-over-dark .brand-name small { color: rgba(255, 255, 255, 0.74); }
nav.links { display: flex; gap: 28px; align-items: center; }
nav.links a {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-shell.is-over-dark nav.links a {
  color: var(--white);
  text-shadow: 0 1px 14px rgba(15, 13, 11, 0.62);
}
.nav-shell.is-over-light nav.links a {
  text-shadow: 0 1px 12px rgba(250, 246, 238, 0.72);
}
nav.links a:hover { border-bottom-color: var(--gold); color: var(--charcoal); }
.nav-shell.is-over-dark nav.links a:hover { color: var(--gold-soft); }
nav.links a.nav-call {
  color: var(--gold-text);
}
.nav-shell.is-over-dark nav.links a.nav-call {
  color: var(--gold-soft);
}
nav.links a.btn {
  border: 1px solid var(--charcoal);
  padding: 11px 22px;
}
nav.links a.btn:hover { background: var(--charcoal); color: var(--gold-soft); }
.nav-shell.is-over-dark nav.links a.btn {
  border-color: rgba(255, 255, 255, 0.72);
}
.nav-shell.is-over-dark nav.links a.btn:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
  text-shadow: none;
}

/* Mobile bar: CTA + hamburger. Hidden until the nav collapses. */
.nav-mobile-actions { display: none; align-items: center; gap: 10px; }
.nav-mobile-cta {
  border: 1px solid var(--charcoal);
  padding: 9px 15px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink);
}
.nav-shell.is-over-dark .nav-mobile-cta {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 14px rgba(15, 13, 11, 0.62);
}
.nav-shell.is-over-light .nav-mobile-cta {
  text-shadow: 0 1px 12px rgba(250, 246, 238, 0.72);
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--charcoal);
  color: var(--ink);
  cursor: pointer;
}
.nav-shell.is-over-dark .nav-toggle {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.72);
}
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 19px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-shell.nav-open .nav-toggle-bars { background: transparent; }
.nav-shell.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-shell.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
/* Height is capped, not just floored. The old max(760px, 100svh - 28px) grew
   without limit on tall displays, which is what buried the owner dock below
   the fold and left a screenful of empty sky above the copy. */
.hero {
  position: relative;
  min-height: clamp(600px, calc(100svh - 24px), 820px);
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(24, 20, 15, 0.66) 0%, rgba(24, 20, 15, 0.44) 43%, rgba(24, 20, 15, 0.04) 76%),
    linear-gradient(180deg, rgba(24, 20, 15, 0.28) 0%, rgba(24, 20, 15, 0.10) 36%, rgba(24, 20, 15, 0.56) 100%),
    url("assets/img/cx-hero-daylight.jpg") center 30% / cover no-repeat;
  background:
    linear-gradient(90deg, rgba(24, 20, 15, 0.66) 0%, rgba(24, 20, 15, 0.44) 43%, rgba(24, 20, 15, 0.04) 76%),
    linear-gradient(180deg, rgba(24, 20, 15, 0.28) 0%, rgba(24, 20, 15, 0.10) 36%, rgba(24, 20, 15, 0.56) 100%),
    image-set(url("assets/img/cx-hero-daylight.webp") type("image/webp"),
              url("assets/img/cx-hero-daylight.jpg") type("image/jpeg")) center 30% / cover no-repeat;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(296px, 356px);
  align-items: end;
  gap: clamp(32px, 5vw, 64px);
  padding-top: clamp(112px, 12vh, 148px);
  padding-bottom: clamp(44px, 7vh, 78px);
  width: 100%;
}
.hero-copy { max-width: 760px; }
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 18px;
  font-weight: 400;
}
.eyebrow.gold { color: var(--gold-text); }

/* Keeps a hyphenated phrase from splitting across lines. */
.nowrap { white-space: nowrap; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.14;
  text-wrap: balance;
  max-width: 14em;
}
.hero p.sub {
  margin-top: 22px;
  max-width: 34em;
  font-size: 18px;
  color: #efeae1;
}
.hero h1, .hero p.sub, .hero .eyebrow {
  text-shadow: 0 1px 18px rgba(15, 13, 11, 0.55), 0 1px 3px rgba(15, 13, 11, 0.4);
}
.cta-row { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.button {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 34px;
  font-weight: 400;
  transition: all 0.2s ease;
}
.button.gold { background: var(--gold); color: var(--charcoal-deep); }
.button.gold:hover { background: var(--gold-soft); }
.button.ghost { border: 1px solid rgba(255, 255, 255, 0.7); color: var(--white); }
.button.ghost:hover { background: var(--white); color: var(--charcoal); }
.button.dark { border: 1px solid var(--charcoal); color: var(--charcoal); }
.button.dark:hover { background: var(--charcoal); color: var(--gold-soft); }

.owner-contact-dock {
  position: absolute;
  right: max(32px, calc((100vw - 1180px) / 2 + 32px));
  bottom: clamp(44px, 7vh, 78px);
  justify-self: end;
  width: min(560px, calc(100vw - 64px));
  color: var(--white);
}
.owner-contact-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--gold-soft);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(15, 13, 11, 0.65);
}
.owner-contact-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.owner-contact-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(245, 239, 226, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 48px rgba(13, 11, 9, 0.22);
}
.owner-link {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  color: var(--white);
  text-decoration: none;
  background: rgba(18, 16, 14, 0.58);
  transition: background 0.2s ease, transform 0.2s ease;
}
.owner-link:hover {
  background: rgba(18, 16, 14, 0.78);
  transform: translateX(-2px);
}
.owner-link img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 1px solid rgba(215, 186, 126, 0.76);
}
.owner-link strong,
.owner-link span {
  display: block;
}
.owner-link strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(15, 13, 11, 0.5);
}
.owner-role {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.owner-phone {
  margin-top: 4px;
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Sections ---------- */
section { padding: 110px 0; }
.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.lede { font-size: 18px; color: var(--stone-aa); }

/* intro */
.intro { background: var(--cream); }
.intro .cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.intro .badge-row {
  display: flex;
  gap: 34px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e8e4dd;
}
.badge { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); font-weight: 400; }
.badge span { color: var(--gold-text); margin-right: 8px; }
.intro figure img { aspect-ratio: 4 / 5; object-fit: cover; }

/* weekly services */
.services { background: var(--mist); }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.svc {
  position: relative;
  aspect-ratio: 3 / 4.7;
  background-image:
    linear-gradient(180deg, rgba(20, 18, 15, 0.10) 18%, rgba(20, 18, 15, 0.52) 52%, rgba(20, 18, 15, 0.90) 100%),
    var(--tile);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 1px 3px rgba(30, 27, 23, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(30, 27, 23, 0.22);
}
.svc-txt { padding: 0 20px 24px; width: 100%; }
.svc .kicker {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 400;
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(15, 13, 11, 0.7);
  min-height: 2.9em;
  display: flex;
  align-items: flex-end;
}
.svc h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.28;
  color: var(--white);
  margin-bottom: 9px;
  min-height: calc(19px * 1.28 * 3);
  display: flex;
  align-items: flex-end;
  text-shadow: 0 1px 10px rgba(15, 13, 11, 0.6);
}
.svc p {
  font-size: 13px;
  color: #ddd6ca;
  line-height: 1.55;
  min-height: calc(13px * 1.55 * 3);
}

/* inspection detail — full-bleed band */
.detail {
  background:
    linear-gradient(90deg, rgba(22, 19, 15, 0.74) 0%, rgba(22, 19, 15, 0.52) 46%, rgba(22, 19, 15, 0.08) 80%),
    url("assets/img/cx4-checklist.jpg") center 45% / cover no-repeat;
  background:
    linear-gradient(90deg, rgba(22, 19, 15, 0.74) 0%, rgba(22, 19, 15, 0.52) 46%, rgba(22, 19, 15, 0.08) 80%),
    image-set(url("assets/img/cx4-checklist.webp") type("image/webp"),
              url("assets/img/cx4-checklist.jpg") type("image/jpeg")) center 45% / cover no-repeat;
  padding: 130px 0;
  color: var(--white);
}
.detail .eyebrow { color: var(--gold-soft); }
.detail h2 { color: var(--white); }
.detail-inner { max-width: 620px; }
.detail-inner > p { color: #e8e3da; }
.checklist { list-style: none; margin-top: 28px; }
.checklist li {
  padding: 14px 0 14px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
  color: #f2ede3;
  text-shadow: 0 1px 8px rgba(15, 13, 11, 0.5);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* concierge */
.concierge { background: var(--mist); }
.concierge .lede { color: var(--stone-aa); }
.con-feature {
  margin-top: 64px;
  background:
    linear-gradient(90deg, rgba(24, 20, 15, 0.72) 0%, rgba(24, 20, 15, 0.5) 48%, rgba(24, 20, 15, 0.06) 80%),
    url("assets/img/cx4-kitchen.jpg") center 60% / cover no-repeat;
  background:
    linear-gradient(90deg, rgba(24, 20, 15, 0.72) 0%, rgba(24, 20, 15, 0.5) 48%, rgba(24, 20, 15, 0.06) 80%),
    image-set(url("assets/img/cx4-kitchen.webp") type("image/webp"),
              url("assets/img/cx4-kitchen.jpg") type("image/jpeg")) center 60% / cover no-repeat;
  padding: 110px 0;
}
.con-panel {
  max-width: 660px;
  background: rgba(27, 24, 21, 0.66);
  backdrop-filter: blur(3px);
  padding: 44px 44px 40px;
}
.con-panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  color: var(--white);
  margin-bottom: 28px;
  text-shadow: 0 1px 12px rgba(15, 13, 11, 0.55);
}
.offer-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 44px; margin-bottom: 22px; }
.offer-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  color: #f0e9dc;
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(15, 13, 11, 0.55);
}
.offer-list li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 13px;
  font-size: 9px;
  color: var(--gold);
}
.con-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 10px;
}
.con {
  position: relative;
  aspect-ratio: 4 / 3.1;
  background-image:
    linear-gradient(180deg, rgba(20, 18, 15, 0.08) 20%, rgba(20, 18, 15, 0.5) 55%, rgba(20, 18, 15, 0.9) 100%),
    var(--tile);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 1px 3px rgba(30, 27, 23, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.con:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(30, 27, 23, 0.22);
}
.con-txt { padding: 0 24px 24px; width: 100%; }
.con h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 8px;
  min-height: calc(20px * 1.3 * 2);
  display: flex;
  align-items: flex-end;
  text-shadow: 0 1px 10px rgba(15, 13, 11, 0.6);
}
.con p {
  font-size: 13.5px;
  color: #ddd6ca;
  line-height: 1.55;
  min-height: calc(13.5px * 1.55 * 3);
}

/* faq */
.faq { background: var(--mist); }
.faq .faq-list { max-width: 780px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid rgba(43, 41, 38, 0.14);
  padding: 6px 0;
}
.faq details:first-child { border-top: 1px solid rgba(43, 41, 38, 0.14); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 4px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--charcoal);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 300;
  /* Sits on --mist. axe cannot test pseudo-element contrast, so this one was
     invisible to the automated pass and was checked by hand. */
  color: var(--gold-text);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 4px 22px;
  max-width: 44em;
  color: #56524c;
  line-height: 1.7;
}

/* about */
.about { background: var(--cream); }
.about .cols {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.about img { aspect-ratio: 4 / 3; object-fit: cover; }
.signatures {
  margin-top: 34px;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--charcoal);
}
.signatures small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 6px;
}

/* process */
.process { background: var(--cream); padding-top: 96px; padding-bottom: 96px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step {
  position: relative;
  aspect-ratio: 4 / 3.4;
  background-image:
    linear-gradient(180deg, rgba(20, 18, 15, 0.10) 22%, rgba(20, 18, 15, 0.52) 56%, rgba(20, 18, 15, 0.9) 100%),
    var(--tile);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 1px 3px rgba(30, 27, 23, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(30, 27, 23, 0.22); }
.step-txt { padding: 0 26px 26px; width: 100%; }
.step-num {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold-soft);
  display: block;
  margin-bottom: 8px;
  text-shadow: 0 1px 8px rgba(15, 13, 11, 0.6);
}
.step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--white);
  margin-bottom: 8px;
  text-shadow: 0 1px 10px rgba(15, 13, 11, 0.6);
}
.step p {
  font-size: 14px;
  color: #ddd6ca;
  line-height: 1.55;
  min-height: calc(14px * 1.55 * 3);
}

/* contact + inquiry form */
.contact { background: var(--cream); }
.contact .cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.contact-list { list-style: none; margin-top: 26px; }
.contact-list li { margin-bottom: 10px; }
.contact-list a { color: var(--charcoal); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.contact-list a:hover { color: var(--gold-text); }
.inquiry { background: var(--white); padding: 40px 36px; box-shadow: 0 1px 4px rgba(30, 27, 23, 0.08); display: grid; gap: 18px; }
.inquiry label { display: grid; gap: 7px; }
.inquiry label span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); font-weight: 400; }
.inquiry input, .inquiry select, .inquiry textarea {
  font-family: var(--sans); font-size: 15px; font-weight: 300; color: var(--ink);
  border: 1px solid #ddd4c2; background: #fdfcf9; padding: 12px 14px; border-radius: 0;
}
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { outline: 1px solid var(--gold); border-color: var(--gold); }
.inquiry .button { border: 0; cursor: pointer; font-family: var(--sans); }
.form-note { font-size: 13px; color: var(--stone); }

/* founders */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-self: start; }
.founder { position: relative; }
.founder img { aspect-ratio: 1 / 1.25; object-fit: cover; width: 100%; display: block; }
.founder.pending img { display: none; }
.founder.pending::before {
  content: attr(data-initials);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.25;
  background: var(--charcoal);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 56px;
  letter-spacing: 0.08em;
}
.founder figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--charcoal);
}
.founder figcaption small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 4px;
}
.founder .bio {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #56524c;
}

/* CTA band */
.cta-band {
  position: relative;
  padding: 150px 0;
  text-align: center;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(24, 20, 15, 0.5), rgba(24, 20, 15, 0.55)),
    url("assets/img/cx4-cta.jpg") center 40% / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(24, 20, 15, 0.5), rgba(24, 20, 15, 0.55)),
    image-set(url("assets/img/cx4-cta.webp") type("image/webp"),
              url("assets/img/cx4-cta.jpg") type("image/jpeg")) center 40% / cover no-repeat;
}
.cta-band h2 { color: var(--white); max-width: 18em; margin: 0 auto 18px; }
.cta-band p { max-width: 36em; margin: 0 auto 36px; color: #e8e3da; }

/* contact / footer */
footer {
  background: var(--charcoal-deep);
  color: #b4aca0;
  padding: 90px 0 40px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #3a3733;
}
footer h3 {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 400;
  margin-bottom: 20px;
}
footer a { color: #d9d4cb; text-decoration: none; }
footer a:hover { color: var(--gold-soft); }
footer ul { list-style: none; }
footer li { margin-bottom: 12px; font-size: 15px; }
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3a3733;
  color: #d9d4cb;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover,
.social-link:focus-visible {
  color: var(--gold-soft);
  border-color: var(--gold);
  background: rgba(201, 164, 92, 0.09);
}
.foot-note {
  padding-top: 28px;
  font-size: 13px;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: #8c867f;
}

/* hero credit — small credential in the hero's own type system. No band, no
   CTA: a trust mark that asks for a click stops reading as a trust mark. */
.hero-credit {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 30px;
  font-size: 12.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(15, 13, 11, 0.6);
  border-bottom: 1px solid rgba(201, 164, 92, 0.45);
  padding-bottom: 7px;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.hero-credit em {
  font-style: normal;
  color: var(--gold-soft);
  letter-spacing: 0.22em;
}
.hero-credit:hover,
.hero-credit:focus-visible {
  border-bottom-color: var(--gold);
  color: var(--white);
}

/* credit quote — the placement's substance, not a badge. Sits between the
   hero and .intro; both are cream-adjacent, so the hairline carries the seam. */
.credit-quote {
  background: var(--cream);
  border-bottom: 1px solid rgba(43, 41, 38, 0.08);
}
.credit-quote .wrap {
  padding-top: 30px;
  padding-bottom: 30px;
}
.credit-quote blockquote {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.credit-quote p {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.32;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.credit-quote cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.7;
}
.credit-quote cite a {
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}
.credit-quote cite a:hover { color: var(--gold-text); }

@media (max-width: 560px) {
  .credit-quote .wrap { padding-top: 24px; padding-bottom: 24px; }
  .hero-credit { letter-spacing: 0.22em; font-size: 11.5px; }
}

/* press — "As Seen In". Dark band separating .about (cream) from .faq (mist).
   Grid so a second placement drops in without restyling. */
.press { background: var(--charcoal); }
.press h2 { color: var(--white); }
.press .lede { color: #c5bdb1; }
.press-grid {
  display: grid;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}
/* Link-preview tile: the founders' photo carries it, the text stays out of
   the way. Portrait source image, so it takes the narrower column and
   object-fit crops rather than letterboxes. */
.press-tile {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  text-decoration: none;
  background: rgba(247, 242, 233, 0.045);
  border: 1px solid rgba(201, 164, 92, 0.26);
  overflow: hidden;
  transition: background 0.24s ease, border-color 0.24s ease;
}
.press-tile:hover,
.press-tile:focus-visible {
  background: rgba(247, 242, 233, 0.085);
  border-color: var(--gold);
}
.press-tile-media {
  margin: 0;
  min-height: 100%;
  background: var(--charcoal-deep);
}
.press-tile-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: center 32%;
}
.press-tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 36px 34px;
}
.press-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 15px;
}
.press-tile-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.24;
  color: var(--white);
  margin-bottom: 18px;
}
.press-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.press-cue::after {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: width 0.24s ease;
}
.press-tile:hover .press-cue::after,
.press-tile:focus-visible .press-cue::after { width: 32px; }

/* Stack the tile before the two columns get too narrow to hold either the
   photo or the headline. */
@media (max-width: 700px) {
  .press-tile { grid-template-columns: 1fr; }
  .press-tile-media img { min-height: 300px; object-position: center 30%; }
  .press-tile-body { padding: 30px 28px 28px; }
}
@media (max-width: 520px) {
  .press-tile-body { padding: 26px 22px 24px; }
  .press-tile-body h3 { font-size: 23px; }
  /* The cue wraps to two lines here and the trailing rule strands itself on
     the far right, so drop the rule and let the text wrap cleanly. */
  .press-cue { letter-spacing: 0.16em; }
  .press-cue::after { display: none; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* The hero entry animation moves but does not fade. That is deliberate and
     it is a performance fix, not a style preference.

     Chrome decides whether an element is eligible to be the Largest Contentful
     Paint at the moment it FIRST paints, and an element painting at opacity 0
     is skipped permanently. The old keyframes started every hero element at
     opacity 0, so the headline, eyebrow, sub and CTA were all disqualified for
     the life of the page load. Chrome then had to fall back to the only sizable
     hero text that was never faded, the <em> inside .hero-credit, and reported
     LCP against it: 4.0s in Lighthouse, against a headline that was actually
     readable at 1.2s. Measured 2026-08-15.

     Animating transform alone leaves the text painted at full opacity from the
     first frame, so the headline is the LCP candidate it always should have
     been. It still rises into place, and transform animations stay on the
     compositor, so this is also the cheaper of the two to run. */
  .hero .eyebrow, .hero h1, .hero p.sub, .hero .cta-row {
    animation: heroUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero h1 { animation-delay: 0.1s; }
  .hero p.sub { animation-delay: 0.2s; }
  .hero .cta-row { animation-delay: 0.3s; }
  @keyframes heroUp {
    from { transform: translateY(28px); }
    to { transform: none; }
  }

  figure { overflow: hidden; }
  figure img { transition: transform 0.8s ease; }
  figure:hover img { transform: scale(1.035); }
  .con-photos img { transition: transform 0.8s ease; }
  .con-photos img:hover { transform: scale(1.03); }

  .nav-shell { transition: transform 0.32s ease; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: transform 0.24s ease, top 0.24s ease, background 0.18s ease; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .con-grid { grid-template-columns: repeat(2, 1fr); }
  nav.links { gap: 20px; }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: clamp(108px, 12vh, 140px);
  }
  .owner-contact-dock {
    position: static;
    right: auto;
    bottom: auto;
    justify-self: start;
    width: min(100%, 520px);
  }
  .owner-contact-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .owner-link {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .owner-link img {
    width: 54px;
    height: 54px;
  }
  .owner-link strong {
    font-size: 18px;
  }
  .owner-phone {
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .owner-role {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 780px) {
  section { padding: 72px 0; }
  .intro .cols, .about .cols, .contact .cols { grid-template-columns: 1fr; gap: 44px; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .offer-list { grid-template-columns: 1fr; }
  .detail { padding: 84px 0; }
  .con-feature { padding: 72px 0; }
  .con-grid, .con-photos { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Collapse the link row into a hamburger drawer: logo, CTA, toggle. */
  header.nav { position: relative; }
  header.nav .wrap { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .nav-mobile-actions { display: flex; }
  .brand { gap: 11px; }
  .brand-mark { height: 38px; width: 38px; }
  .brand-name { font-size: 15px; white-space: nowrap; }
  .brand-name small { font-size: 8.5px; letter-spacing: 0.28em; }

  nav.links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    padding: 4px 0 8px;
    background: var(--charcoal-deep);
    border-top: 1px solid rgba(201, 164, 92, 0.34);
    box-shadow: 0 18px 40px rgba(15, 13, 11, 0.34);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }
  .nav-shell.nav-open nav.links {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  nav.links a { display: block; padding: 14px 32px; border-bottom: 0; }
  .nav-shell.is-over-dark nav.links a,
  .nav-shell.is-over-light nav.links a {
    color: var(--white);
    text-shadow: none;
  }
  .nav-shell.is-over-dark nav.links a:hover,
  .nav-shell.is-over-light nav.links a:hover { color: var(--gold-soft); }
  nav.links a + a { border-top: 1px solid rgba(245, 239, 226, 0.14); }
  nav.links a.btn { display: none; }

  /* Open drawer and bar read as one solid block. */
  .nav-shell.nav-open header.nav { background: var(--charcoal-deep); }
  .nav-shell.nav-open .brand,
  .nav-shell.nav-open .nav-mobile-cta,
  .nav-shell.nav-open .nav-toggle { color: var(--white); text-shadow: none; }
  .nav-shell.nav-open .brand-name small { color: rgba(255, 255, 255, 0.74); }
  .nav-shell.nav-open .nav-mobile-cta,
  .nav-shell.nav-open .nav-toggle { border-color: rgba(255, 255, 255, 0.72); }
  .intro .badge-row {
    flex-wrap: wrap;
    gap: 14px 22px;
  }
  /* conversion: form first when the contact section stacks */
  .contact .cols { display: flex; flex-direction: column; }
  .contact form.inquiry { order: -1; }
  .inquiry {
    min-width: 0;
    padding: 32px 24px;
  }
  .inquiry input, .inquiry select, .inquiry textarea {
    min-width: 0;
    width: 100%;
  }
  .hero {
    min-height: max(100svh, 780px);
    align-items: flex-end;
    background-position: 66% 30%;
  }
  .hero .wrap {
    padding-top: 84px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero h1 { font-size: clamp(31px, 8.8vw, 37px); line-height: 1.08; }
  .hero p.sub { margin-top: 16px; font-size: 15.5px; line-height: 1.55; }
  .hero .cta-row { margin-top: 24px; gap: 12px; }
  .hero .button { padding: 13px 24px; font-size: 11.5px; letter-spacing: 0.18em; }
  .owner-contact-kicker {
    margin-bottom: 10px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
  }
  .owner-contact-panel {
    grid-template-columns: 1fr;
  }
  .owner-link {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 11px 12px;
  }
  .owner-link img {
    width: 50px;
    height: 50px;
  }
  .owner-link strong {
    font-size: 17px;
  }
  .svc-grid { grid-template-columns: 1fr; }
}

/* Below this the wordmark can't hold one line beside the CTA and toggle,
   so the mark carries the brand on its own. */
@media (max-width: 520px) {
  .brand-name { display: none; }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: clamp(33px, 9.8vw, 39px);
  }
  .hero p.sub {
    font-size: 15.5px;
  }
}

/* anchored sections clear the sticky header */
section[id] { scroll-margin-top: 120px; }
@media (max-width: 780px) {
  section[id] { scroll-margin-top: 78px; }
}
@media (max-width: 780px) and (prefers-reduced-motion: no-preference) {
  nav.links { transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s; }
}

/* Cache-key bump 2026-08-15: the previous version hash was poisoned at the
   Cloudflare edge (old bytes cached under the new ?v= url during the deploy
   window). This comment changes the hash so the site references a fresh,
   uncached asset url. */

/* ---------- Document pages (privacy, and anything like it) ----------
   Added 2026-08-15 with the privacy page. Deliberately narrow: one readable
   column on the site's cream, using the type scale already defined above. */
.doc {
  background: var(--cream);
  padding: 168px 0 96px;
}
.doc .wrap { max-width: 780px; }
.doc-head { padding-bottom: 40px; border-bottom: 1px solid #e4ddd0; }
.doc-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.doc-date {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-aa);
}
.doc-body { padding-top: 44px; }
.doc-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.3;
  margin: 46px 0 14px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body p { margin-bottom: 16px; max-width: 40em; }
.doc-body a { color: var(--gold-text); text-underline-offset: 3px; }
.doc-body a:hover { color: var(--charcoal); }
.doc-back {
  margin-top: 54px;
  padding-top: 28px;
  border-top: 1px solid #e4ddd0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 780px) {
  .doc { padding: 132px 0 72px; }
}
.foot-note a { color: inherit; text-underline-offset: 3px; }
.foot-note a:hover { color: var(--gold-soft); }

/* ---------- Small-viewport background photos ----------
   Added 2026-08-15. The four full-bleed photos ship at 1600px because desktop
   needs it, but a 390px phone at 3x needs at most ~1170px and was downloading
   the full-width file. On a throttled connection the 120KB hero alone held the
   link for four seconds, which is most of why Lighthouse's simulated model put
   LCP at 3-4s while a real throttled browser painted the headline at 964ms.

   These overrides repeat the gradients because `background` is shorthand and a
   bare `background-image` would drop them. Each keeps the jpg fallback line
   first for browsers without image-set(), same pattern as the full-size rules. */
@media (max-width: 900px) {
  .hero {
    background:
      linear-gradient(90deg, rgba(24, 20, 15, 0.66) 0%, rgba(24, 20, 15, 0.44) 43%, rgba(24, 20, 15, 0.04) 76%),
      linear-gradient(180deg, rgba(24, 20, 15, 0.28) 0%, rgba(24, 20, 15, 0.10) 36%, rgba(24, 20, 15, 0.56) 100%),
      url("assets/img/cx-hero-daylight.jpg") center 30% / cover no-repeat;
    background:
      linear-gradient(90deg, rgba(24, 20, 15, 0.66) 0%, rgba(24, 20, 15, 0.44) 43%, rgba(24, 20, 15, 0.04) 76%),
      linear-gradient(180deg, rgba(24, 20, 15, 0.28) 0%, rgba(24, 20, 15, 0.10) 36%, rgba(24, 20, 15, 0.56) 100%),
      image-set(url("assets/img/cx-hero-daylight-sm.webp") type("image/webp"),
                url("assets/img/cx-hero-daylight.jpg") type("image/jpeg")) center 30% / cover no-repeat;
  }
  .detail {
    background:
      linear-gradient(90deg, rgba(22, 19, 15, 0.74) 0%, rgba(22, 19, 15, 0.52) 46%, rgba(22, 19, 15, 0.08) 80%),
      url("assets/img/cx4-checklist.jpg") center 45% / cover no-repeat;
    background:
      linear-gradient(90deg, rgba(22, 19, 15, 0.74) 0%, rgba(22, 19, 15, 0.52) 46%, rgba(22, 19, 15, 0.08) 80%),
      image-set(url("assets/img/cx4-checklist-sm.webp") type("image/webp"),
                url("assets/img/cx4-checklist.jpg") type("image/jpeg")) center 45% / cover no-repeat;
  }
  .con-feature {
    background:
      linear-gradient(90deg, rgba(24, 20, 15, 0.72) 0%, rgba(24, 20, 15, 0.5) 48%, rgba(24, 20, 15, 0.06) 80%),
      url("assets/img/cx4-kitchen.jpg") center 60% / cover no-repeat;
    background:
      linear-gradient(90deg, rgba(24, 20, 15, 0.72) 0%, rgba(24, 20, 15, 0.5) 48%, rgba(24, 20, 15, 0.06) 80%),
      image-set(url("assets/img/cx4-kitchen-sm.webp") type("image/webp"),
                url("assets/img/cx4-kitchen.jpg") type("image/jpeg")) center 60% / cover no-repeat;
  }
  .cta-band {
    background:
      linear-gradient(180deg, rgba(24, 20, 15, 0.5), rgba(24, 20, 15, 0.55)),
      url("assets/img/cx4-cta.jpg") center 40% / cover no-repeat;
    background:
      linear-gradient(180deg, rgba(24, 20, 15, 0.5), rgba(24, 20, 15, 0.55)),
      image-set(url("assets/img/cx4-cta-sm.webp") type("image/webp"),
                url("assets/img/cx4-cta.jpg") type("image/jpeg")) center 40% / cover no-repeat;
  }
}