/* Seven Home Improvement. Stone and brass: warm ivory pages with near-black and charcoal bands,
   brass kept to hairlines, numbers and hovers. Square edges. Stone textures are cut from Seven's own job photos (see README).
   The texture url()s below carry no ?v= hash and /static/* is cached for a year: never overwrite a texture file in place.
   A replacement gets a new file name (texture-quartzite-3-640.webp) and its url() here changes with it.
   The home page adds a cinematic layer (end of this file): a full-screen hero and full-bleed project chapters. */
:root {
  --night: #0e0d0c;        /* header, footer, trust bar */
  --charcoal: #1a1816;     /* dark sections */
  --charcoal-2: #24211e;   /* panels on dark */
  --ink: #161412;          /* text on light */
  --ink-2: #47423c;
  --muted: #675f57;        /* 5.9:1 on bone, 5.3:1 on ivory, 4.8:1 on ivory-2 */
  --bone: #faf7f2;         /* page background */
  --ivory: #f2ece2;        /* alternate light sections */
  --ivory-2: #e9e1d3;
  --line: #ddd3c4;
  --brass: #c6a46c;        /* brass on dark: rules, numbers, stars (8.2:1 on night) */
  --brass-soft: #dcc394;   /* links and hovers on dark */
  --brass-ink: #7a5a28;    /* brass as text and focus ring on light (5.9:1 on bone, 5.4:1 on ivory) */
  --brass-line: #bfa173;   /* decorative hairlines on light */
  --on-dark: #f3eee6;      /* ivory text on dark */
  --on-dark-2: rgba(243, 238, 230, .8);
  --on-dark-3: rgba(243, 238, 230, .66);
  --line-dark: rgba(243, 238, 230, .14);
  --white: #ffffff;
  --paper: var(--ivory);
  --stone: var(--ivory-2);
  --display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1280px;
  --hdr-h: 85px;           /* sticky header: 84px bar + 1px brass hairline */
}
@media (max-width: 640px) { :root { --hdr-h: 69px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 18px/1.7 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--brass); color: var(--night); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brass-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; font-weight: 500; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); letter-spacing: -.012em; }
h2 { font-size: clamp(2.05rem, 3.7vw, 3.15rem); letter-spacing: -.008em; }
h3 { font-size: 1.12rem; font-family: var(--body); font-weight: 500; letter-spacing: .005em; line-height: 1.35; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 600; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 28px; }
@media (max-width: 560px) { .wrap { padding-inline: 18px; } body { font-size: 17px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--night); color: var(--on-dark); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.eyebrow { font: 500 .76rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--brass-line); }
.lead { font-size: 1.16rem; color: var(--ink-2); max-width: 62ch; }
.fine { font-size: .9rem; color: var(--muted); }

/* Buttons: square, quiet, uppercase. Brass only arrives on hover. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 0; font: 500 .875rem/1.15 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.btn-primary { background: var(--night); color: var(--on-dark); border-color: var(--night); }
.btn-primary:hover { background: var(--brass); border-color: var(--brass); color: var(--night); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--on-dark); }
.btn-light { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn-light:hover { background: var(--brass); border-color: var(--brass); color: var(--night); }
.btn-ghost-light { border-color: rgba(243, 238, 230, .5); color: var(--on-dark); }
.btn-ghost-light:hover { border-color: var(--brass); background: transparent; color: var(--brass-soft); }
.btn-accent { background: transparent; border-color: var(--brass); color: var(--on-dark); }
.btn-accent:hover { background: var(--brass); color: var(--night); }
.btn-sm { padding: 12px 18px; font-size: .875rem; }
.btn-block { width: 100%; }
.text-link { font: 500 .875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass-line); padding-bottom: 6px; transition: color .2s, border-color .2s; }
.text-link:hover { color: var(--brass-ink); border-bottom-color: var(--brass-ink); }

/* Header: near-black bar, white logo, a brass hairline underneath */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--night); color: var(--on-dark); border-bottom: 1px solid rgba(198, 164, 108, .28); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.brand img { height: 56px; width: auto; }
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.main-nav a { display: block; padding: 12px 12px; color: var(--on-dark-2); text-decoration: none; font: 500 .76rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; transition: color .2s, box-shadow .2s; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--on-dark); box-shadow: inset 0 -1px 0 var(--brass); }
.has-sub { position: relative; }
.has-sub .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--night); border: 1px solid var(--line-dark); border-top: 1px solid var(--brass); list-style: none; padding: 10px 0; margin: 0; }
.has-sub .sub a { padding: 11px 18px; letter-spacing: .1em; }
.has-sub .sub a:hover { box-shadow: none; background: rgba(243, 238, 230, .06); color: var(--brass-soft); }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.phone { font: 500 .95rem/1 var(--body); letter-spacing: .05em; color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.phone:hover { color: var(--brass-soft); }
.header-actions .btn { padding: 13px 18px; }
.menu-toggle { display: none; background: none; border: 1px solid rgba(243, 238, 230, .5); padding: 10px 14px; font: 500 .875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); cursor: pointer; }
.menu-toggle:hover { border-color: var(--brass); color: var(--brass-soft); }
.mobile-nav { border-top: 1px solid var(--line-dark); background: var(--night); }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 24px 24px; }
.mobile-nav a { display: block; padding: 13px 0; color: var(--on-dark); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line-dark); }
.mobile-nav .sub, .mobile-nav .has-sub:hover .sub, .mobile-nav .has-sub:focus-within .sub { display: block; position: static; min-width: 0; border: 0; background: none; padding: 0 0 0 16px; }
.mobile-nav { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav .sub a { font-weight: 400; color: var(--on-dark-2); }
@media (max-width: 1140px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-block; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 640px) {
  .header-actions .btn, .header-actions .phone { display: none; }
  .brand img { height: 46px; }
  .header-inner { min-height: 68px; }
}

/* Sections */
.section { padding-block: clamp(72px, 10vw, 136px); }
.section-tight { padding-block: clamp(40px, 5vw, 64px); }
.section-alt { background: var(--ivory); }
.section-dark { background: var(--charcoal); color: var(--on-dark-2); }
.section-dark h2, .section-dark h3 { color: var(--on-dark); }
.section-dark .eyebrow { color: var(--brass); }
.section-dark .eyebrow::before { background: var(--brass); }
.section-dark .lead, .section-dark p { color: var(--on-dark-2); }
.section-dark .fine { color: var(--on-dark-3); }
.section-dark a:not(.btn):not(.tile), .hero-full a:not(.btn), .cta-band a:not(.btn), .cta-photo a:not(.btn) { color: var(--on-dark); text-decoration-color: var(--brass); }
.section-dark a:not(.btn):not(.tile):hover, .hero-full a:not(.btn):hover, .cta-band a:not(.btn):hover, .cta-photo a:not(.btn):hover { color: var(--brass-soft); }
.section-dark .btn-outline { border-color: rgba(243, 238, 230, .6); color: var(--on-dark); }
.section-dark .btn-outline:hover { background: var(--on-dark); color: var(--ink); }
.section-dark .btn-primary { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.section-dark .btn-primary:hover { background: var(--brass); border-color: var(--brass); color: var(--night); }
.section-dark .text-link { color: var(--on-dark); border-bottom-color: var(--brass); }
.section-dark .text-link:hover { color: var(--brass-soft); }
.section-head { max-width: 800px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p:last-child { margin-bottom: 0; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.split > * { min-width: 0; }
.split h2 { margin-bottom: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.two-col > * { min-width: 0; }
.two-col.flip > :first-child { order: 2; }
.two-col.top { align-items: start; }
@media (max-width: 900px) { .two-col, .split { grid-template-columns: 1fr; } .two-col.flip > :first-child { order: 0; } }
.rule-top { border-top: 1px solid var(--line); padding-top: 28px; }

/* Stone band: Del Mar charcoal porcelain behind the top of a dark section, fading into plain charcoal.
   The texture is blurred and darkened, so the 1280 cut holds up on wide screens too: one file at every width. */
.section-stone { background:
    linear-gradient(180deg, rgba(26, 24, 22, .5) 0, rgba(26, 24, 22, .66) 22vw, var(--charcoal) 38vw),
    url("../img/texture-porcelain-1280.webp") center top / 100% auto no-repeat,
    var(--charcoal); }
.section-stone .lead { color: rgba(243, 238, 230, .88); }
@media (max-width: 760px) {
  .section-stone { background:
      linear-gradient(180deg, rgba(26, 24, 22, .5) 0, rgba(26, 24, 22, .68) 260px, var(--charcoal) 440px),
      url("../img/texture-porcelain-1280.webp") 30% top / auto 440px no-repeat,
      var(--charcoal); }
}

/* Heroes */
.hero-full { position: relative; min-height: clamp(580px, 92vh, 920px); display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; background: var(--night); }
.hero-full .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 10, .88) 0%, rgba(12, 11, 10, .68) 46%, rgba(12, 11, 10, .14) 80%), linear-gradient(0deg, rgba(12, 11, 10, .78) 0%, rgba(12, 11, 10, 0) 55%); }
.hero-full .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(56px, 10vh, 112px); }
.hero-full .eyebrow { color: var(--on-dark-2); }
.hero-full h1 { color: var(--on-dark); font-size: clamp(2.8rem, 6.4vw, 5.6rem); max-width: 15ch; line-height: .98; margin-bottom: 28px; }
.hero-full h1 .h1-2 { display: block; font-style: italic; }
.hero-full .lead { color: var(--on-dark); max-width: 54ch; font-size: clamp(1.06rem, 1.45vw, 1.22rem); margin-bottom: 36px; }
.hero-full .lead::before { content: ""; display: block; width: 56px; height: 1px; background: var(--brass); margin-bottom: 26px; }
.hero-full .btn-outline { border-color: rgba(243, 238, 230, .6); color: var(--on-dark); }
.hero-full .btn-outline:hover { background: var(--on-dark); color: var(--ink); }
.hero-full .fine { color: var(--on-dark-2); margin-top: 22px; }
.hero-full.hero-short { min-height: clamp(460px, 64vh, 660px); }
.hero-short h1 { max-width: 20ch; font-size: clamp(2.5rem, 5vw, 4.2rem); }
.hero-caption { position: absolute; right: 24px; bottom: 20px; z-index: 1; font-size: .8rem; letter-spacing: .06em; color: var(--on-dark-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Home hero video: a muted loop over the photo, shown once it is actually playing. Its poster is a frame of the same loop and the caption names that job, so the caption stays. */
.hero-full .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.hero-full .hero-video.is-on { opacity: 1; }
.hero-vid-toggle { position: absolute; right: 24px; bottom: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(243, 238, 230, .55); border-radius: 0; background: rgba(14, 13, 12, .5); color: var(--on-dark); cursor: pointer; transition: background .2s, border-color .2s; }
.hero-vid-toggle:hover { background: rgba(14, 13, 12, .78); border-color: var(--brass); }
.hero-vid-toggle:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 3px; }
.hero-vid-toggle[hidden] { display: none; }
.hero-vid-toggle .i-play, .hero-vid-toggle[aria-pressed="true"] .i-pause { display: none; }
.hero-vid-toggle[aria-pressed="true"] .i-play { display: block; }
.hero-vid-toggle:not([hidden]) ~ .hero-caption { right: 80px; }
@media (prefers-reduced-motion: reduce) { .hero-full .hero-video { display: none; } }
/* Up to tablet width the hero text runs nearly edge to edge, so the wash runs bottom to top instead of left to right */
@media (max-width: 900px) {
  .hero-full::after { background: linear-gradient(0deg, rgba(12, 11, 10, .93) 0%, rgba(12, 11, 10, .66) 55%, rgba(12, 11, 10, .26) 100%); }
  /* Inner-page heroes fill with text, breadcrumbs included, so the wash stays deep to the top */
  .hero-short::after { background: linear-gradient(0deg, rgba(12, 11, 10, .94) 0%, rgba(12, 11, 10, .8) 55%, rgba(12, 11, 10, .66) 100%); }
}
@media (max-width: 700px) {
  .hero-full { min-height: 620px; }
  .hero-caption { display: none; }
}
/* Below 880px the fixed call bar covers the bottom of the screen, so the video toggle sits at the top of the hero. */
@media (max-width: 880px) {
  .hero-vid-toggle { right: 16px; top: 10px; bottom: auto; }
  .hero-vid-toggle:not([hidden]) ~ .hero-caption { right: 24px; }
}
.page-hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); background: var(--ivory); border-bottom: 1px solid var(--brass-line); }
/* The home hero photo settles in with one slow, even zoom that ends within 5 seconds and then holds still (WCAG 2.2.2).
   Only when there is no video loop over it. site.js adds .is-loaded once the photo has loaded; transform only, so nothing moves. */
@keyframes settle { from { transform: scale(1); } to { transform: scale(1.03); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-full .hero-zoom.is-loaded { animation: settle 4.5s ease-in-out both; }
}
.page-hero .lead { margin-bottom: 26px; }
.crumbs { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs-light, .crumbs-light a { color: var(--on-dark); }
.crumbs-light a:hover { color: var(--brass-soft); }

/* Trust strip: brass figures on near-black */
.trustbar { background: var(--night); color: var(--on-dark); border-top: 1px solid var(--line-dark); }
.trustbar ul { list-style: none; margin: 0; padding: 26px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; }
.trustbar li { display: flex; align-items: baseline; gap: 10px; font-size: .9rem; color: var(--on-dark-3); }
.trustbar strong { font: 500 1.7rem/1 var(--display); color: var(--brass); }
.trustbar .stars { color: var(--brass); letter-spacing: 2px; font-size: .78rem; }
.trustbar a { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: 10px; transition: color .2s; }
.trustbar a:hover { color: var(--on-dark); }
@media (max-width: 760px) {
  .trustbar ul { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 28px 0 30px; }
  .trustbar li:last-child { grid-column: 1 / -1; }
  .trustbar li, .trustbar a { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
  .trustbar a > span:not(.stars):not(.sr-only) { flex-basis: 100%; }
}
@media (min-width: 1280px) {
  .trustbar ul { justify-content: stretch; gap: 0; }
  .trustbar li { flex: 1 1 auto; justify-content: center; padding-inline: 18px; border-left: 1px solid var(--line-dark); }
  .trustbar li:first-child { border-left: 0; padding-left: 0; justify-content: flex-start; }
  .trustbar li:last-child { padding-right: 0; justify-content: flex-end; }
}

/* At-a-glance facts table */
.glance { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 1rem; }
.glance th, .glance td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--line); }
.glance th { width: 38%; font-weight: 500; color: var(--muted); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding-right: 20px; padding-top: 17px; }
.glance tr:first-child th, .glance tr:first-child td { border-top: 1px solid var(--brass-line); }
.byline { font-size: .88rem; color: var(--muted); margin-top: 18px; }
.byline strong { color: var(--ink-2); font-weight: 600; }

/* Prices */
.prices { border-top: 1px solid var(--brass-line); }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.price-row h3 { margin: 0 0 4px; }
.price-row p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.price { font: 500 1.55rem/1.2 var(--display); color: var(--ink); white-space: nowrap; }
.section-dark .prices { border-top-color: var(--brass); }
.section-dark .price-row { border-bottom-color: var(--line-dark); }
.section-dark .price { color: var(--brass); }
.section-dark .price-row p { color: var(--on-dark-3); }
@media (max-width: 560px) { .price-row { grid-template-columns: 1fr; gap: 6px; } }

/* Cards: grid items read as ruled columns, standalone cards as quiet panels */
.cards { display: grid; gap: 36px 32px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--ivory); padding: 32px; }
.section-alt .card { background: var(--bone); }
.cards > .card, .cards > a.card { background: none; padding: 22px 0 0; border-top: 1px solid var(--line); }
a.card { color: var(--ink); text-decoration: none; }
a.card:hover h3 { color: var(--brass-ink); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.section-dark .card { background: var(--charcoal-2); }
.section-dark .card p { color: var(--on-dark-2); }
.section-dark .cards > .card { background: none; border-top-color: var(--line-dark); }
@media (max-width: 900px) { .cards-2, .cards-3 { grid-template-columns: 1fr; } }

/* Lists: ruled, no icons */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; border-top: 1px solid var(--line); }
.checklist li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.section-dark .checklist, .section-dark .checklist li { border-color: var(--line-dark); }

/* Steps: brass numerals over a hairline */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 22px; }
.steps li::before { content: counter(step, decimal-leading-zero); font: italic 500 2.5rem/1 var(--display); color: var(--brass-ink); display: block; margin-bottom: 14px; }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.section-dark .steps li { border-top-color: var(--line-dark); }
.section-dark .steps li::before { color: var(--brass); }
.section-dark .steps p { color: var(--on-dark-2); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* How we work together (home and /process/, content/partials/how-we-work.html). Six steps: steps 1 to 5 are brass line
   drawings on an ivory drafting board that draw themselves in (process_drawings.py), with the old bathroom pinned to
   the step-1 plan and the 3D design fading in over the step-2 drawing; the final walkthrough opens onto a full-bleed
   photo of a finished room on a dark band. Without JavaScript the steps simply follow each other, fully drawn.
   site.js adds .hx-on (the rail of numbered stops, Pause / Play, one step at a time, 5 s a step) and .hx-live once about
   a third of the section is on screen (the drawings start then and are finished by about 2.5 s). Reduced motion:
   nothing draws, fades, wipes or moves on by itself. */
.hx-section { overflow-x: clip; }
.hx { position: relative; }
.hx-step { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 80px); align-items: center; }
.hx-step + .hx-step { margin-top: clamp(56px, 7vw, 96px); }
.hx-fig { margin: 0; }
.hx-fig figcaption { font-size: .88rem; color: var(--muted); padding-top: 12px; }
.hx-fig figcaption a { color: inherit; text-decoration-color: var(--brass-line); }
.hx-fig figcaption a:hover { color: var(--brass-ink); }
.hx-text { padding-block: 8px; }
.hx-text h3 { font: 500 clamp(2rem, 3.2vw, 2.8rem)/1.04 var(--display); font-variant-numeric: lining-nums; letter-spacing: -.008em; margin-bottom: 20px; }
.hx-n { display: block; font: italic 500 1.6rem/1 var(--display); font-variant-numeric: lining-nums; color: var(--brass-ink); margin-bottom: 14px; }
.hx-text > p { color: var(--ink-2); }
.hx-facts { margin: 26px 0 0; border-top: 1px solid var(--brass-line); }
.hx-facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hx-facts dt { font: 500 .74rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .3em; }
.hx-facts dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); }

/* The drafting board: an ivory sheet with a faint brass grid and an inset border */
.hx-board {
  position: relative; aspect-ratio: 4 / 3; background-color: var(--ivory);
  background-image: linear-gradient(rgba(191, 161, 115, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(191, 161, 115, .16) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 12px var(--ivory), inset 0 0 0 13px rgba(191, 161, 115, .55);
}
.hx-svg { display: block; position: absolute; inset: 3%; width: 94%; height: 94%; overflow: visible; }
.hx-svg .d { fill: none; stroke: var(--brass-ink); stroke-linecap: round; stroke-linejoin: round; }
.hx-svg .k { stroke-width: 1.7; }
.hx-svg .m { stroke-width: 1.15; }
.hx-svg .t { stroke-width: .85; stroke: #a8854f; }
.hx-svg .sig { stroke: var(--ink); }
.hx-svg .poche { opacity: .9; }
.hx-svg .tx { fill: var(--brass-ink); font: 500 10px/1 var(--body); letter-spacing: .14em; }
.hx-svg .tx-s { font-size: 8.5px; letter-spacing: .16em; }
.hx-svg .tx-l { font-size: 9.5px; letter-spacing: .26em; }
.hx-svg .tx-m { font: 500 17px/1 var(--body); letter-spacing: 0; fill: var(--ink); }
.hx-svg .tx-d { font: italic 500 21px/1 var(--display); letter-spacing: 0; fill: var(--ink); }
.hx-svg .stamp-o, .hx-svg .stamp-i { fill: rgba(122, 90, 40, .05); stroke: var(--brass-ink); }
.hx-svg .stamp-o { stroke-width: 2.4; }
.hx-svg .stamp-i { fill: none; stroke-width: 1; }
.hx-svg .stamp-t { fill: var(--brass-ink); font: 600 21px/1 var(--body); letter-spacing: .26em; }
.hx-svg .stamp-s { fill: var(--brass-ink); font: 500 8px/1 var(--body); letter-spacing: .34em; }
.hx-svg .hx-stamp { transform-box: fill-box; transform-origin: 50% 50%; }
/* Timing groups: every drawing is finished by about 2.5 s and stays up for the rest of the 5 s step */
.hx-svg .g1 { --gd: 0s; --dur: .8s; }
.hx-svg .g2 { --gd: .4s; --dur: .7s; }
.hx-svg .g3 { --gd: .8s; --dur: .6s; }
.hx-svg .g4 { --gd: 1.15s; --dur: .75s; }
.hx-svg .g4 .sig { --dur: .95s; }
/* Step 1: a photo of the old bathroom pinned beside the measured plan */
.hx-pin { position: absolute; right: 5%; top: 9%; width: 27%; padding: 5px 5px 16px; background: var(--white); box-shadow: 0 1px 2px rgba(22, 20, 18, .2), 0 10px 22px rgba(22, 20, 18, .12); transform: rotate(2.5deg); }
.hx-pin::before { content: ""; position: absolute; z-index: 1; top: -5px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--brass-ink); box-shadow: 0 1px 2px rgba(22, 20, 18, .35); }
.hx-pin img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* Step 2: the 3D design fades in over the drawing once it is drawn */
.hx-render { position: absolute; inset: 0; overflow: hidden; background: var(--ivory-2); }
.hx-render img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-tag, .design-tag { position: absolute; left: 14px; top: 14px; background: rgba(14, 13, 12, .8); color: var(--on-dark); font: 500 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; }

/* Step 6: the final walkthrough opens onto a full-bleed dark band, the photo running off the left edge */
.hx-step--photo { position: relative; isolation: isolate; align-items: stretch; }
.hx-step--photo::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--night); }
.hx-media { position: relative; margin: 0 0 0 calc(-1 * max(28px, (100vw - var(--wrap)) / 2 + 28px)); min-height: 440px; overflow: hidden; background: var(--charcoal); }
.hx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 45%; }
.hx-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(to top, rgba(14, 13, 12, .74), rgba(14, 13, 12, 0)); pointer-events: none; }
.hx-media figcaption { position: absolute; z-index: 1; left: max(28px, (100vw - var(--wrap)) / 2 + 28px); right: 24px; bottom: 20px; font-size: .9rem; line-height: 1.45; }
.hx-media figcaption a { color: var(--on-dark); text-decoration-color: var(--brass); }
.hx-media figcaption a:hover { color: var(--brass-soft); }
.hx-media figcaption a:focus-visible { outline-color: var(--brass-soft); }
.hx-step--photo .hx-text { padding-block: clamp(40px, 4.5vw, 64px); align-self: center; }
.hx-step--photo .hx-text h3 { color: var(--on-dark); }
.hx-step--photo .hx-n { color: var(--brass); }
.hx-step--photo .hx-text > p { color: var(--on-dark-2); }
.hx-step--photo .hx-facts { border-top-color: var(--brass); }
.hx-step--photo .hx-facts > div { border-bottom-color: var(--line-dark); }
.hx-step--photo .hx-facts dt { color: var(--on-dark-3); }
.hx-step--photo .hx-facts dd { color: var(--on-dark); }
.hx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(32px, 4vw, 44px); }
.hx-foot .btn-primary { transition: background .6s, color .6s, border-color .6s; }
/* When the steps reach the walkthrough, the next step for the reader lights up */
.hx.is-end .hx-foot .btn-primary { background: var(--brass); border-color: var(--brass); color: var(--night); }
.hx.is-end .hx-foot .btn-primary:hover { background: var(--night); border-color: var(--night); color: var(--on-dark); }

/* With JavaScript: the rail of numbered stops on a hairline that fills in brass as the steps play, and Pause / Play */
.hx-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px clamp(24px, 3vw, 44px); margin-bottom: clamp(26px, 3.4vw, 42px); }
.hx-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.hx-track { position: absolute; top: 0; left: 0; width: 0; height: 1px; background: var(--line); pointer-events: none; }
.hx-fill { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--brass-ink); transform: scaleX(0); transform-origin: 0 50%; }
.hx-stop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-height: 48px; padding: 24px 12px 6px 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.hx-dot { position: absolute; z-index: 1; left: 0; top: -5px; width: 11px; height: 11px; background: var(--bone); border: 1px solid #a69a8a; transition: background .3s, border-color .3s, transform .3s; }
.hx-tn { font: italic 500 1.7rem/1 var(--display); font-variant-numeric: lining-nums; }
.hx-tl { font: 500 .74rem/1.3 var(--body); letter-spacing: .15em; text-transform: uppercase; }
.hx-short, .hx-paren { display: none; }
.hx-stop:hover { color: var(--ink); }
.hx-stop.is-done .hx-tn, .hx-stop[aria-selected="true"] .hx-tn { color: var(--brass-ink); }
.hx-stop.is-done .hx-dot, .hx-stop[aria-selected="true"] .hx-dot { background: var(--brass-ink); border-color: var(--brass-ink); }
.hx-stop[aria-selected="true"] .hx-dot { transform: rotate(45deg) scale(1.2); }
.hx-stop[aria-selected="true"] { color: var(--ink); }
.hx-stop:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.hx-play { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 0 16px 0 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 .875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s; }
.hx-play:hover { border-color: var(--brass-ink); color: var(--brass-ink); }
.hx-play:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.hx-ico { position: relative; width: 10px; height: 12px; flex: none; }
.hx-ico::before, .hx-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.hx-ico::before { left: 0; }
.hx-ico::after { right: 0; }
.hx-play.is-paused .hx-ico::before { width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.hx-play.is-paused .hx-ico::after { display: none; }

/* One step at a time. The stage takes the height of the step on show (site.js), so a short step leaves no gap. */
.hx-on .hx-panels { position: relative; overflow-y: clip; transition: height .4s ease; }
.hx-on .hx-step { margin: 0; transition: opacity .5s ease, visibility 0s; scroll-margin-top: calc(var(--hdr-h) + 150px); }
.hx-on .hx-step:not(.is-on) { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease, visibility 0s .3s; }
.hx-on .hx-step .hx-text { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hx-on .hx-step:not(.is-on) .hx-text { transform: translateY(10px); }
.hx-step:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: -2px; }
.hx-step--photo:focus-visible { outline-color: var(--brass-soft); }

/* The drawings draw themselves in (pathLength=1 on every stroke; site.js sets --i to stagger the strokes in a group) */
.hx-on .hx-svg .d { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset 0s .35s; }
.hx-live .hx-step.is-on .hx-svg .d { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1s) cubic-bezier(.55, .08, .25, 1) calc(var(--gd, 0s) + var(--i, 0) * 28ms); }
.hx-on .hx-svg .f { opacity: 0; transition: opacity 0s .35s; }
.hx-live .hx-step.is-on .hx-svg .f { opacity: 1; transition: opacity .55s ease calc(var(--gd, .6s) + .25s); }
.hx-live .hx-step.is-on .hx-svg .poche { opacity: .9; }
.hx-on .hx-svg .hx-stamp { opacity: 0; transform: scale(1.45); transition: opacity 0s .35s, transform 0s .35s; }
.hx-live .hx-step.is-on .hx-svg .hx-stamp { opacity: 1; transform: none; transition: opacity .14s ease 1.8s, transform .4s cubic-bezier(.3, 1.45, .5, 1) 1.8s; }
.hx-on .hx-pin { opacity: 0; transform: rotate(2.5deg) translateY(-10px); transition: opacity 0s .35s, transform 0s .35s; }
.hx-live .hx-step.is-on .hx-pin { opacity: 1; transform: rotate(2.5deg); transition: opacity .45s ease 1.1s, transform .6s cubic-bezier(.2, .7, .2, 1) 1.1s; }
.hx-on .hx-render { opacity: 0; transition: opacity 0s .35s; }
.hx-live .hx-step.is-on .hx-render { opacity: 1; transition: opacity .95s ease 1.45s; }
/* The walkthrough photo wipes in left to right (done by 1.45 s), then pushes in slowly for 4.5 s and stops */
@keyframes hx-push { from { transform: scale(1); } to { transform: scale(1.06); } }
.hx-on .hx-step--photo .hx-media img { clip-path: inset(0 100% 0 0); transition: clip-path 0s .35s; }
.hx-live .hx-step--photo.is-on .hx-media img { clip-path: inset(0 0 0 0); transition: clip-path 1.25s cubic-bezier(.65, 0, .35, 1) .2s; animation: hx-push 4.5s cubic-bezier(.3, .5, .4, 1) 1.2s both; }
.hx-on .hx-step--photo figcaption { opacity: 0; transition: opacity 0s .35s; }
.hx-live .hx-step--photo.is-on figcaption { opacity: 1; transition: opacity .7s ease 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .hx-on .hx-panels, .hx-on .hx-step, .hx-on .hx-step:not(.is-on), .hx-on .hx-step .hx-text, .hx-dot, .hx-stop, .hx-foot .btn-primary { transition: none !important; }
  .hx-on .hx-step:not(.is-on) .hx-text { transform: none; }
  .hx-on .hx-svg .d, .hx-live .hx-step.is-on .hx-svg .d { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .hx-on .hx-svg .f, .hx-on .hx-svg .hx-stamp, .hx-on .hx-render, .hx-on .hx-step--photo figcaption { opacity: 1; transform: none; transition: none; }
  .hx-on .hx-pin { opacity: 1; transform: rotate(2.5deg); transition: none; }
  .hx-on .hx-step--photo .hx-media img { clip-path: none; transition: none; animation: none; }
}

/* Tablet and phone */
@media (max-width: 900px) {
  .hx-step { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; }
  .hx-media { margin: 0 -28px; min-height: 0; aspect-ratio: 3 / 2; }
  .hx-media figcaption { left: 28px; }
  .hx-step--photo .hx-text { padding-block: 4px 36px; }
}
@media (max-width: 640px) {
  .hx-top { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hx-play { justify-self: end; margin-top: 0; }
  /* Every step keeps a short name under its number; the full name stays in the tab's name for screen readers and
     voice control ("01 Visit (Consultation)"). */
  .hx-rail { grid-auto-columns: auto; justify-content: space-between; }
  .hx-stop { align-items: center; text-align: center; min-width: 36px; padding: 20px 0 4px; gap: 6px; }
  .hx-dot { left: 50%; margin-left: -5.5px; }
  .hx-tn { font-size: 1.35rem; }
  .hx-tl { font-size: .75rem; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
  .hx-short, .hx-paren { display: inline; }
  .hx-full, .hx-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hx-svg .k { stroke-width: 2.3; }
  .hx-svg .m { stroke-width: 1.6; }
  .hx-svg .t { stroke-width: 1.2; }
  /* Labels inside the drawings would be specks at this size: keep only the price line and the stamp */
  .hx-svg .tx:not(.tx-d):not(.tx-m), .hx-svg .stamp-s { display: none; }
  .hx-foot .btn { width: 100%; }
}
@media (max-width: 560px) {
  .hx-media { margin-inline: -18px; }
  .hx-media figcaption { left: 18px; bottom: 14px; }
  .hx-board { box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 8px var(--ivory), inset 0 0 0 9px rgba(191, 161, 115, .55); background-size: 18px 18px; }
  .hx-pin { padding: 3px 3px 10px; }
  .hx-tag { left: 10px; top: 10px; padding: 6px 8px; font-size: .68rem; }
  .hx-facts > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Reviews */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.quote { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 26px; }
.quote blockquote { margin: 0 0 22px; font: 500 1.3rem/1.5 var(--display); color: var(--ink); }
.quote figcaption { margin-top: auto; font-size: .9rem; color: var(--muted); }
.quote figcaption strong { color: var(--ink); font-weight: 500; }
@media (max-width: 980px) { .quotes { grid-template-columns: 1fr; } }
.reviews-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--line); }
.rv { padding: 22px 18px 22px 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
a.rv:hover .rv-src { color: var(--brass-ink); }
.rv-score { font: 500 2rem/1 var(--display); }
.rv-stars { color: #8a6a35; letter-spacing: 2px; font-size: .85rem; }
.rv-src { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 880px) { .reviews-strip { grid-template-columns: repeat(2, 1fr); } }

/* Photos */
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo.wide img { aspect-ratio: 16 / 10; }
.photo figcaption { font-size: .85rem; color: var(--muted); padding-top: 10px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery figcaption { font-size: .9rem; color: var(--ink-2); padding: 10px 0 0; }
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Prose */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }

/* FAQ */
.faqs { max-width: 880px; }
.faqs h2 { margin-bottom: 30px; }
.faq { border-bottom: 1px solid var(--line); }
.faqs .faq:first-of-type { border-top: 1px solid var(--brass-line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; font: 600 1.32rem/1.3 var(--display); position: relative; transition: color .2s; }
.faq summary:hover { color: var(--brass-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--brass-ink), var(--brass-ink)) center / 14px 1px no-repeat, linear-gradient(var(--brass-ink), var(--brass-ink)) center / 1px 14px no-repeat; transition: transform .2s; }
.faq[open] summary::after { background: linear-gradient(var(--brass-ink), var(--brass-ink)) center / 14px 1px no-repeat; }
.faq p { color: var(--ink-2); padding-bottom: 8px; max-width: 70ch; }

/* Areas */
.areas { columns: 4 190px; list-style: none; padding: 0; margin: 0; column-gap: 32px; }
.areas li { padding: 10px 0; break-inside: avoid; border-bottom: 1px solid var(--line); }
.area-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 1px solid var(--brass-line); }
.area-links a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 1.45rem/1.2 var(--display); }
.area-links a span { font: 400 .85rem/1 var(--body); color: var(--muted); }
.area-links a:hover { color: var(--brass-ink); }
@media (max-width: 880px) { .area-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .area-links { grid-template-columns: 1fr; } }

/* CTA band: the second Del Mar porcelain crop under a dark wash */
.cta-band { color: var(--on-dark); padding-block: clamp(72px, 9vw, 120px); background:
    linear-gradient(90deg, rgba(14, 13, 12, .86) 0%, rgba(14, 13, 12, .62) 60%, rgba(14, 13, 12, .5) 100%),
    url("../img/texture-porcelain-2-1280.webp") center / cover no-repeat,
    var(--night); border-top: 1px solid rgba(198, 164, 108, .3); }
.cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.cta-band h2 { color: var(--on-dark); margin-bottom: 14px; max-width: 20ch; }
.cta-band p { color: var(--on-dark-2); margin: 0; max-width: 56ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 880px) { .cta-inner { grid-template-columns: 1fr; } .cta-actions { justify-content: flex-start; } }

/* Form */
.lead-form { background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--brass-line); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.lead-form label { display: grid; gap: 7px; font-weight: 500; font-size: .92rem; }
.lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email], .lead-form textarea { width: 100%; font: 400 1rem var(--body); padding: 13px 14px; border: 1px solid #8f877b; border-radius: 0; background: var(--white); color: var(--ink); }
.lead-form input:focus, .lead-form textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); }
.lead-form input[type=checkbox]:focus-visible, .lead-form input[type=file]:focus-visible, .lead-form input[type=radio]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.lead-form fieldset { border: 0; padding: 0; margin: 0; }
.lead-form legend { font-weight: 500; font-size: .92rem; margin-bottom: 10px; }
.chks { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; border: 1px solid #8f877b; padding: 8px 14px; font-weight: 400 !important; cursor: pointer; }
.chk:has(input:checked) { border-color: var(--ink); background: var(--ivory); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
.preview-note { background: var(--ivory); padding: 8px 12px; }
.lead-section .lead { margin-bottom: 22px; }

/* Footer */
.site-footer { background: var(--night); color: var(--on-dark-3); padding-top: 84px; font-size: .95rem; border-top: 1px solid var(--line-dark); }
.site-footer a { color: var(--on-dark-2); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--brass-soft); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 60px; }
.footer-grid > * { min-width: 0; }
.footer-grid h2 { font: 500 .74rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 20px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-logo { height: 70px; width: auto; margin-bottom: 20px; }
.lic { color: var(--on-dark-3); font-size: .88rem; }
.footer-base { border-top: 1px solid var(--line-dark); padding-block: 22px 30px; font-size: .84rem; color: var(--on-dark-3); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 1180px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid a { overflow-wrap: anywhere; }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Mobile bottom bar */
.mobile-bar { display: none; }
@media (max-width: 880px) {
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--night); border-top: 1px solid rgba(198, 164, 108, .35); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid rgba(243, 238, 230, .45); color: var(--on-dark); font: 500 .875rem/1.2 var(--body); letter-spacing: .1em; text-align: center; padding: 4px 8px; text-transform: uppercase; text-decoration: none; }
  .mobile-bar a:hover { border-color: var(--brass); color: var(--brass-soft); }
  .mobile-bar .mb-primary { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
  .mobile-bar .mb-primary:hover { background: var(--brass); border-color: var(--brass); color: var(--night); }
  /* Room for the call bar under the footer (the footer's own dark color, not a strip of page color) */
  .site-footer { padding-bottom: 76px; }
}

/* Project mosaic */
.mosaic { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, 1fr)); gap: 14px; }
.mosaic .tile { position: relative; overflow: hidden; background: var(--night); color: var(--on-dark); text-decoration: none; min-height: 250px; }
.mosaic .tile:first-child { grid-row: span 2; }
.mosaic .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.mosaic .tile:hover img, .mosaic .tile:focus-visible img { transform: scale(1.03); }
.mosaic .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 13, 12, .92) 0%, rgba(14, 13, 12, .74) 30%, rgba(14, 13, 12, .2) 58%, rgba(14, 13, 12, 0) 72%); }
/* A brass hairline frame drawn inside the photo on hover */
.mosaic .tile::before, .svc3 a::before { content: ""; position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(220, 195, 148, 0); pointer-events: none; transition: border-color .4s ease; }
.mosaic .tile:hover::before, .mosaic .tile:focus-visible::before, .svc3 a:hover::before, .svc3 a:focus-visible::before { border-color: rgba(220, 195, 148, .75); }
.mosaic .tile-cap { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.mosaic .tile-cap strong { display: block; font: 500 1.45rem/1.15 var(--display); margin-bottom: 4px; }
.mosaic .tile-cap span { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
@media (max-width: 880px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .mosaic .tile:first-child { grid-column: span 2; grid-row: auto; min-height: 340px; } }
@media (max-width: 520px) { .mosaic { grid-template-columns: 1fr; } .mosaic .tile:first-child { grid-column: auto; } .mosaic .tile { min-height: 270px; } }

/* Main services: three large image panels */
.svc3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc3 a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: var(--on-dark); text-decoration: none; background: var(--night); }
.svc3 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.svc3 a:hover img, .svc3 a:focus-visible img { transform: scale(1.03); }
.svc3 a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 13, 12, .85) 0%, rgba(14, 13, 12, .05) 60%); }
.svc3 .svc3-body { position: absolute; left: 30px; right: 30px; bottom: 28px; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.svc3 .svc3-body::before { content: ""; display: block; width: 36px; height: 1px; background: var(--brass); margin-bottom: 18px; }
.svc3 h3 { color: var(--on-dark); font: 500 2.1rem/1.05 var(--display); margin-bottom: 10px; }
.svc3 p { color: var(--on-dark-2); margin: 0 0 14px; font-size: 1rem; }
.svc3 .from { font: 500 .76rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-soft); }
@media (max-width: 900px) { .svc3 { grid-template-columns: 1fr; } .svc3 a { aspect-ratio: 4 / 3; } .svc3 a::after { background: linear-gradient(0deg, rgba(14, 13, 12, .9) 0%, rgba(14, 13, 12, .72) 55%, rgba(14, 13, 12, .3) 100%); } }
.svc-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; margin-top: 48px; }
.svc-more a { display: block; padding: 22px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.svc-more a:hover { border-top-color: var(--brass-ink); }
.svc-more strong { display: block; font: 500 1.45rem/1.15 var(--display); margin-bottom: 6px; transition: color .2s; }
.svc-more span { font-size: .95rem; color: var(--ink-2); }
.svc-more a:hover strong { color: var(--brass-ink); }
@media (max-width: 900px) { .svc-more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .svc-more { grid-template-columns: 1fr; } }

/* Services grid (services page) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
.svc { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.svc img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.svc-img { display: block; overflow: hidden; }
.svc-img img { transition: transform .8s ease; }
.svc:hover .svc-img img, .svc:focus-visible .svc-img img { transform: scale(1.03); }
.svc-body { padding-top: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-body h3 { margin: 0; font: 500 1.65rem/1.15 var(--display); transition: color .2s; }
.svc-body p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.svc-price { margin-top: auto; padding-top: 10px; font: 500 .76rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.svc:hover h3 { color: var(--brass-ink); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* Facts row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(198, 164, 108, .55); margin-top: 64px; }
.stat { padding: 26px 24px 0 0; }
.stat strong { display: block; font: 500 clamp(2.2rem, 3.8vw, 3rem)/1 var(--display); color: var(--brass); margin-bottom: 10px; }
.stat span { font-size: .92rem; color: var(--on-dark-3); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 0; } }

/* Founder note */
.note { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.note blockquote { margin: 0; font: 500 clamp(1.4rem, 2.2vw, 1.85rem)/1.45 var(--display); color: var(--ink); }
.note blockquote p { margin-bottom: .8em; }
.note .sig { margin-top: 22px; font-size: .95rem; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--brass-line); max-width: 360px; }
.note .sig strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 500; }
/* The founder heading set on a panel of the Santaluz wet bar's quartzite backsplash, darkened */
.note-panel { display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: clamp(28px, 4vw, 48px); background: linear-gradient(180deg, rgba(14, 13, 12, .05) 0%, rgba(14, 13, 12, .3) 45%, rgba(14, 13, 12, .72) 100%), url("../img/texture-quartzite-2-640.webp") center / cover no-repeat, var(--charcoal); box-shadow: inset 0 0 0 1px rgba(198, 164, 108, .35); }
.note-panel h2 { color: var(--on-dark); margin: 0; }
.note-panel .eyebrow { color: var(--brass-soft); }
.note-panel .eyebrow::before { background: var(--brass); }
@media (max-width: 900px) { .note { grid-template-columns: 1fr; } .note-panel { min-height: 260px; } }

/* Before / after slider */
.ba { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night); --pos: 50%; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--on-dark); pointer-events: none; }
.ba .ba-line::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; background: var(--on-dark); color: var(--ink); display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 0 0 1px var(--brass), 0 4px 18px rgba(0, 0, 0, .35); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba .ba-tag { position: absolute; top: 14px; z-index: 1; background: rgba(14, 13, 12, .78); color: var(--on-dark); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; pointer-events: none; }
.ba .ba-tag.b { left: 14px; } .ba .ba-tag.a { right: 14px; }

/* Closing call to action: the photo shown as taken, beside a near-black text panel.
   The text column lines up with the page's .wrap; the photo runs to the right edge. */
.cta-photo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 46vw, 680px); color: var(--on-dark); background: var(--charcoal); }
/* Positioned in its grid area, so the tall photo fills the band instead of setting its height */
.cta-photo > img { position: absolute; grid-column: 2 / 3; grid-row: 1 / 2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.cta-photo .wrap { grid-column: 1; grid-row: 1; align-self: center; width: 100%; max-width: calc(var(--wrap) / 2); margin: 0 0 0 auto; padding-block: clamp(80px, 9vw, 128px); padding-right: clamp(28px, 5vw, 80px); }
.cta-photo h2 { color: var(--on-dark); font-size: clamp(2.4rem, 4.4vw, 3.6rem); max-width: 14ch; }
.cta-photo h2::after { content: ""; display: block; width: 56px; height: 1px; background: var(--brass); margin-top: 26px; }
.cta-photo p { color: var(--on-dark-2); max-width: 46ch; margin-bottom: 32px; }
@media (max-width: 900px) {
  .cta-photo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cta-photo > img { position: static; grid-column: 1; grid-row: 1; height: auto; aspect-ratio: 4 / 3; object-position: 50% 42%; }
  .cta-photo .wrap { grid-column: 1; grid-row: 2; max-width: none; margin: 0; padding-block: 56px 72px; padding-right: 28px; }
}
@media (max-width: 560px) { .cta-photo .wrap { padding-right: 18px; } }

/* Scroll reveal (only with JS; content is visible without it) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Project gallery */
.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.filters button { font: 500 .875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 16px 18px 15px; border: 0; background: none; color: var(--muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.filters button span { margin-left: 4px; font-weight: 400; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass-ink); }
.filters button:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: -2px; }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
.proj { display: flex; flex-direction: column; min-width: 0; }
.proj[hidden] { display: none; }
.proj button { padding: 0; border: 0; background: var(--night); cursor: zoom-in; display: block; overflow: hidden; }
.proj button:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.proj-main { position: relative; aspect-ratio: 4 / 3; width: 100%; }
.proj-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.proj-main:hover img, .proj-main:focus-visible img { transform: scale(1.03); }
.proj-thumbs { display: none; }
.proj-count { position: absolute; right: 12px; bottom: 12px; background: rgba(14, 13, 12, .8); color: var(--on-dark); font: 500 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; pointer-events: none; }
.proj-body { padding-top: 16px; }
.proj-place { font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.proj-body h3 { font: 500 1.6rem/1.15 var(--display); margin: 6px 0 6px; }
.proj-body p { margin: 0; color: var(--ink-2); font-size: .98rem; }
@media (max-width: 1100px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-thumb, .proj-shot { position: relative; }
.proj-tag { position: absolute; left: 12px; top: 12px; background: rgba(14, 13, 12, .8); color: var(--on-dark); font: 500 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; pointer-events: none; }
.proj-tag-live { background: var(--brass); color: var(--night); }
.proj-body .proj-go { margin-top: 14px; }
.proj-more { margin-top: 36px; }
.proj-links { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 36px 0 0; }
.proj.proj-gallery { display: block; columns: 3 240px; column-gap: 16px; }
.proj-gallery .proj-shot { width: 100%; margin: 0 0 16px; break-inside: avoid; }
.proj-gallery img { width: 100%; transition: transform .8s ease; }
.proj-shot:hover img { transform: scale(1.03); }
.section-dark .proj-place { color: var(--brass-soft); }
.section-dark .proj-body p { color: var(--on-dark-2); }
.section > .wrap + .wrap { margin-top: clamp(56px, 7vw, 96px); }
.section-dark .proj button:focus-visible { outline-color: var(--brass-soft); }
@media (prefers-reduced-motion: reduce) {
  .mosaic .tile img, .svc3 img, .proj-main img, .proj-gallery img, .svc-img img { transition: none; }
  .mosaic .tile:hover img, .mosaic .tile:focus-visible img, .svc3 a:hover img, .svc3 a:focus-visible img, .proj-main:hover img, .proj-main:focus-visible img, .proj-shot:hover img, .svc:hover .svc-img img, .svc:focus-visible .svc-img img { transform: none; }
  .mosaic .tile::before, .svc3 a::before, .btn, .text-link, .main-nav a { transition: none; }
}

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.lightbox::backdrop { background: rgba(10, 9, 8, .95); }
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.lightbox form { position: fixed; top: 0; right: 0; margin: 0; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 56px 8px 20px; min-width: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
.lightbox figcaption { color: rgba(243, 238, 230, .86); font-size: .95rem; padding-top: 12px; text-align: center; }
.lb-close { position: fixed; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(243, 238, 230, .3); background: none; color: var(--on-dark); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; }
.lb-nav { width: 52px; height: 52px; margin: 0 12px; border: 1px solid rgba(243, 238, 230, .3); background: none; color: var(--on-dark); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lb-close:hover, .lb-nav:hover { background: rgba(243, 238, 230, .1); border-color: var(--brass); }
.lb-nav[hidden] { visibility: hidden; display: block; }
@media (max-width: 640px) { .lb-nav { position: fixed; bottom: 18px; margin: 0; } .lb-prev { left: 18px; } .lb-next { right: 18px; } .lightbox[open] { grid-template-columns: 1fr; } .lightbox figure { padding-bottom: 84px; } }

/* Reviews on a dark section */
.section-dark .quote { border-top-color: var(--line-dark); }
.section-dark .quote blockquote { color: var(--on-dark); }
.section-dark .quote figcaption, .section-dark .quote figcaption strong { color: var(--on-dark-3); }
.section-dark .quote figcaption strong { color: var(--on-dark); }
@media (max-width: 1320px) { .hdr-fin { display: none; } }

/* Accessibility helpers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h2.h3 { font: 500 1.15rem/1.3 var(--body); letter-spacing: 0; }
.site-header :focus-visible, .site-footer :focus-visible, .section-dark :focus-visible, .hero-full :focus-visible, .note-panel :focus-visible,
.cta-band :focus-visible, .cta-photo :focus-visible, .trustbar :focus-visible, .mobile-bar :focus-visible, .lightbox :focus-visible { outline-color: var(--brass-soft); }
.hero-caption { color: rgba(243, 238, 230, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.lead-form .req { color: #9b2c2c; font-weight: 700; }
.lead-form .consent { font-size: .82rem; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* Before / after figures and the 3D-design comparison */
.ba.tall { aspect-ratio: 3 / 4; }
.ba.wide { aspect-ratio: 3 / 2; }
.ba img { transition: none; }
.ba-fig { margin: 0; }
.ba-fig figcaption { font-size: .92rem; color: var(--ink-2); padding-top: 14px; }
/* The range input is invisible, so keyboard focus outlines the whole slider (an outline survives forced-colors mode)
   and rings the divider as a second cue. */
.ba:has(input:focus-visible) { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.section-dark .ba:has(input:focus-visible) { outline-color: var(--brass-soft); }
.ba:focus-within .ba-line { box-shadow: 0 0 0 3px var(--brass); }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* Home: four tall sliders two by two, in a narrower column so each stays about 450px wide; one column on phones */
.wrap-ba { max-width: 980px; }
.ba-grid.ba-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
/* A tall slider on the left with two side-by-side pairs stacked on the right: the pairs together are about as tall as the slider. */
.ba-grid.ba-lead > .ba-fig:first-child { grid-row: span 2; }
/* A tall slider beside a single pair (some project pages): the call to action fills the space under the pair */
.ba-grid.ba-lead > .cta-wrap { grid-column: 2; align-self: end; padding: 0; }
@media (max-width: 880px) { .ba-grid { grid-template-columns: 1fr; } .ba-grid.ba-lead > .ba-fig:first-child { grid-row: auto; } .ba-grid.ba-lead > .cta-wrap { grid-column: auto; } .ba-grid.ba-four { gap: 32px 20px; } }
@media (max-width: 600px) { .ba-grid.ba-four { grid-template-columns: 1fr; } }
/* A slider with a 3D design (build.py c_ba fields 9-11). Without JavaScript the design is a small figure under the
   slider. site.js adds .ba-switch and a "Before / After | 3D design" switch; the design then takes the slider's frame
   while the slider is hidden (it keeps its position), and the label and note sit on the plain ceiling at the top. */
.ba-fig .ba-design { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; }
.ba-design img { width: 84px; flex: none; aspect-ratio: 3 / 4; object-fit: cover; }
.ba-fig .ba-design figcaption { padding: 0; font-size: .88rem; line-height: 1.5; }
.ba-dtag { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.section-dark .ba-dtag, .ba-switch .ba-dtag { color: var(--on-dark); }
.ba-switch { position: relative; }
.ba-fig .ba-switch .ba-design { position: absolute; inset: 0; z-index: 2; display: block; margin: 0; background: var(--night); }
.ba-fig .ba-switch:not(.is-design) .ba-design { display: none; }
.ba-switch.is-design .ba { visibility: hidden; }
.ba-switch .ba-design img { width: 100%; height: 100%; }
.ba-fig .ba-switch .ba-design figcaption { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px 13px; background: rgba(14, 13, 12, .84); color: var(--on-dark); font-size: .84rem; line-height: 1.45; }
.ba-views { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); display: flex; padding: 3px; background: rgba(14, 13, 12, .86); box-shadow: 0 0 0 1px rgba(198, 164, 108, .45); }
.ba-views button { min-height: 36px; padding: 0 12px; border: 0; background: none; color: var(--on-dark); font: 500 .875rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.ba-views button:hover { color: var(--brass-soft); }
.ba-views button[aria-pressed="true"] { background: var(--on-dark); color: var(--ink); cursor: default; }
.ba-views button:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: -5px; }
.ba-views button[aria-pressed="true"]:focus-visible { outline-color: var(--brass-ink); }
@media (forced-colors: active) { .ba-views button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
.design3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.design3 figure { margin: 0; }
.design3 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.design3 figcaption { font-size: .9rem; color: var(--ink-2); padding-top: 10px; }
.section-dark .design3 figcaption, .section-dark .ba-fig figcaption { color: var(--on-dark-2); }
.section-dark .design3 figcaption strong { color: var(--on-dark); }
@media (max-width: 700px) { .design3 { grid-template-columns: 1fr 1fr; } .design3 figure:first-child { grid-column: span 2; } .design3 figure:first-child img { aspect-ratio: 4 / 3; } }
.design2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.design2 figure { position: relative; margin: 0; }
.design2 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.design2.wide img { aspect-ratio: 3 / 2; }
.design2.one { grid-template-columns: 1fr; }
.design2 figcaption { font-size: .88rem; color: var(--muted); padding-top: 10px; }
@media (max-width: 560px) { .design2 { grid-template-columns: 1fr; } }

/* Cookie choices (shown only when tracking IDs are set) */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bone); color: var(--ink); border: 1px solid rgba(0, 0, 0, .12); border-top: 2px solid var(--brass-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: .95rem; }
.consent-bar[hidden] { display: none; }
.consent-bar p { margin: 0; flex: 1 1 320px; }
.consent-actions { display: flex; gap: 10px; }
@media (max-width: 899px) { .consent-bar { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }

/* License number card (links to the live CSLB record) */
.license-card { display: flex; flex-direction: column; gap: 6px; align-self: start; padding: 32px; border: 1px solid rgba(0, 0, 0, .12); border-top: 2px solid var(--brass-line); background: var(--ivory); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.license-card:hover { border-color: var(--brass-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.license-card:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
.license-card .lc-label { font: 500 .78rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.license-card .lc-num { font: 500 clamp(2.6rem, 6vw, 3.8rem)/1.05 var(--display, Georgia, serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.license-card .lc-class { color: var(--ink-2); }
.license-card .lc-link { margin-top: 10px; color: var(--brass-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Four Seasons dealer page */
.fs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fs-gallery.fs-gallery-4 { grid-template-columns: repeat(4, 1fr); }
.fs-gallery figure { margin: 0; }
.fs-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.fs-gallery figcaption { font-size: .88rem; color: var(--ink-2); padding-top: 10px; }
@media (max-width: 980px) { .fs-gallery, .fs-gallery.fs-gallery-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fs-gallery, .fs-gallery.fs-gallery-4 { grid-template-columns: 1fr; } }
.fs-dealer { align-self: center; padding: 32px; border: 1px solid rgba(0, 0, 0, .12); background: var(--white); }
.fs-dealer img { width: 100%; max-width: 420px; height: auto; display: block; }
.fs-dealer p { margin: 16px 0 0; color: var(--ink-2); font-size: .95rem; }
.fs-credit { margin-top: 28px; font-size: .92rem; color: var(--ink-2); max-width: 70ch; }
.form-error { margin-top: 14px; padding: 12px 14px; border: 1px solid #b3261e; color: #8c1d18; background: #fff4f2; font-weight: 600; }
/* Manufacturer photo credits stay visible on phones (other hero captions hide there). Below 880px the fixed
   call bar covers the bottom of the screen, so the credit moves to the top-left of the hero, where the wash is deepest. */
@media (max-width: 700px) { .hero-caption.mfr { display: block; font-size: .72rem; } }
@media (max-width: 880px) { .hero-caption.mfr { top: 12px; bottom: auto; left: 18px; right: auto; max-width: calc(100% - 36px); } }
/* Before and after side by side, for photos taken from different angles */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-pair > div { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.ba-pair.tall > div { aspect-ratio: 3 / 4; }
.ba-pair.wide > div { aspect-ratio: 3 / 2; }
@media (max-width: 560px) { .ba-pair.wide { grid-template-columns: 1fr; } }  /* two 3:2 photos side by side would be too small on a phone */
.ba-pair img { width: 100%; height: 100%; object-fit: cover; }
.ba-pair .ba-tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(14, 13, 12, .78); color: var(--on-dark); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; }
.areas a { color: var(--ink); text-underline-offset: 3px; }
.areas a:hover { color: var(--brass-ink); }
@media (max-width: 880px) { .mobile-nav ul { padding-bottom: 96px; } }
.quotes-1, .two-col .quotes { grid-template-columns: 1fr; }
@media (min-width: 981px) { .quotes-2 { grid-template-columns: repeat(2, 1fr); } }
/* A hyphenated word in a large heading stays on one line ("whole-home", "in-home") */
.nw { white-space: nowrap; }
/* In-page links (#equinox, #backyard) land below the sticky header */
[id] { scroll-margin-top: 100px; }
/* Stronger scrim on the home service cards on wide screens too */
@media (min-width: 901px) { .svc3 a::after { background: linear-gradient(0deg, rgba(14, 13, 12, .9) 0%, rgba(14, 13, 12, .6) 45%, rgba(14, 13, 12, .12) 78%); } }
/* Contact page: heading and details on the left, form on the right; on phones the form comes right after the heading */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head form" "more form"; gap: 0 64px; align-items: start; }
.contact-head { grid-area: head; } .contact-more { grid-area: more; } .contact-form-col { grid-area: form; }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; grid-template-areas: "head" "form" "more"; gap: 24px; } }
/* Form labels: the required star sits next to the label text, the field goes on its own line */
.lead-form label:not(.chk) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 7px; }
.lead-form label:not(.chk) > input, .lead-form label:not(.chk) > textarea, .lead-form label:not(.chk) > select { flex: 1 0 100%; }
.fs-gallery figcaption { font-size: .85rem; color: var(--muted); padding-top: 8px; }

/* ---------------------------------------------------------------- cinematic layer
   The page stays ivory; only the hero, the project chapters and the closing bands go dark. */

/* Cormorant's default figures are old-style ("2o2o"); every rule that sets the display font gets lining figures back */
.price, .quote blockquote, .note blockquote, .trustbar strong, .rv-score, .area-links a, .svc3 h3, .svc-more strong, .svc-body h3,
.stat strong, .mosaic .tile-cap strong, .proj-body h3, .license-card .lc-num, h1, h2, .faq summary, .chapter h2 { font-variant-numeric: lining-nums; }

.wrap-wide { max-width: 1680px; }

/* Home hero: fills the first screen under the header (the call bar on phones), the slogan set large on two lines
   over a deeper wash, with a soft vignette so the edges of the video fall away. */
.hero-home { min-height: max(600px, calc(100vh - var(--hdr-h) - 76px)); }
@supports (min-height: 100svh) { .hero-home { min-height: max(600px, calc(100svh - var(--hdr-h) - 76px)); } }
.hero-home::after { background:
  radial-gradient(120% 90% at 62% 38%, rgba(12, 11, 10, 0) 52%, rgba(12, 11, 10, .42) 100%),
  linear-gradient(90deg, rgba(12, 11, 10, .9) 0%, rgba(12, 11, 10, .78) 40%, rgba(12, 11, 10, .46) 62%, rgba(12, 11, 10, .14) 100%),
  linear-gradient(0deg, rgba(12, 11, 10, .88) 0%, rgba(12, 11, 10, .34) 38%, rgba(12, 11, 10, 0) 62%),
  linear-gradient(180deg, rgba(12, 11, 10, .5) 0%, rgba(12, 11, 10, 0) 22%); }
.hero-home .wrap { padding-block: 72px clamp(64px, 11vh, 120px); }
.hero-full.hero-home h1 { font-size: clamp(3.3rem, 8.2vw, 7.6rem); line-height: .9; letter-spacing: -.018em; max-width: none; margin-bottom: 34px; }
.hero-home h1 .h1-2 { color: var(--brass-soft); }
.hero-home .lead { max-width: 50ch; }
.hero-home .hero-caption { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 900px) {
  .hero-home::after { background:
    linear-gradient(0deg, rgba(12, 11, 10, .95) 0%, rgba(12, 11, 10, .8) 48%, rgba(12, 11, 10, .5) 78%, rgba(12, 11, 10, .42) 100%); }
}
@media (max-width: 560px) {
  .hero-full.hero-home h1 { margin-bottom: 24px; }
  .hero-home .lead { font-size: 1.02rem; margin-bottom: 30px; }
  .hero-home .lead::before { margin-bottom: 20px; }
}

/* Project chapters: one finished project per screen, its photos edge to edge (one, or two side by side), the headline
   and one short line along the bottom edge. The whole chapter is the link to the project page. */
.chapter { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(580px, 92vh); overflow: hidden; background: var(--night); color: var(--on-dark); }
@supports (min-height: 100svh) { .chapter { min-height: max(580px, 92svh); } }
.chapter-short { min-height: max(540px, 80vh); }
@supports (min-height: 100svh) { .chapter-short { min-height: max(540px, 80svh); } }
.chapter + .chapter { border-top: 4px solid var(--bone); }
/* Behind the text (z-index -1 inside the chapter), so the link below can stretch over the whole chapter */
.chapter-media { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bone); }
.chapter-media.single { grid-template-columns: 1fr; }
.chapter-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
/* The scrim sits over the photos only along the bottom, where the text is; stops are in pixels from the bottom edge
   because the text block is about the same height on every screen. */
.chapter-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(0deg, rgba(12, 11, 10, .84) 0, rgba(12, 11, 10, .66) 200px, rgba(12, 11, 10, .34) 330px, rgba(12, 11, 10, .08) 470px, rgba(12, 11, 10, 0) 560px),
  linear-gradient(180deg, rgba(12, 11, 10, .32) 0, rgba(12, 11, 10, 0) 140px); }
.chapter-text { width: 100%; padding-block: 120px clamp(56px, 9vh, 96px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 5vw, 96px); align-items: end; }
.chapter h2 { color: var(--on-dark); font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: .96; letter-spacing: -.01em; margin: 0; }
.chapter h2 em { font-style: italic; color: var(--brass-soft); }
.chapter-body::before { content: ""; display: block; width: 56px; height: 1px; background: var(--brass); margin-bottom: 22px; }
.chapter-body p { color: var(--on-dark); max-width: 44ch; font-size: 1.04rem; margin-bottom: 22px; }
.chapter .text-link { color: var(--on-dark); border-bottom-color: var(--brass); }
.chapter .text-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.chapter:hover .text-link { color: var(--brass-soft); }
.chapter:hover .chapter-media img { transform: scale(1.02); }
.chapter .text-link:focus-visible { outline-color: var(--brass-soft); }
@media (prefers-reduced-motion: reduce) { .chapter-media img { transition: none; } .chapter:hover .chapter-media img { transform: none; } }
.op-top { object-position: 50% 22%; }
.op-mid { object-position: 50% 45%; }
.op-low { object-position: 50% 72%; }
@media (max-width: 900px) {
  .chapter-text { grid-template-columns: 1fr; padding-bottom: 72px; }
  .chapter-body p { max-width: 52ch; }
  .chapter-media::after { background:
    linear-gradient(0deg, rgba(12, 11, 10, .9) 0, rgba(12, 11, 10, .78) 300px, rgba(12, 11, 10, .46) 440px, rgba(12, 11, 10, .12) 580px, rgba(12, 11, 10, .04) 680px),
    linear-gradient(180deg, rgba(12, 11, 10, .4) 0, rgba(12, 11, 10, 0) 120px); }
}
/* Phones show the first photo of a pair only; a hidden lazy image is never downloaded */
@media (max-width: 700px) {
  .chapter, .chapter-short { min-height: max(560px, 86svh); }
  .chapter-media { grid-template-columns: 1fr; }
  .chapter-media img + img { display: none; }
  .chapter h2 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}

/* Home services as near full-bleed panels */
.svc3.bleed { margin-inline: 4px; gap: 4px; }
.home-svc .svc-more { margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 901px) { .svc3.bleed a { aspect-ratio: 4 / 5; } }

/* Recent projects: the mosaic runs wider and taller */
.wrap-wide .mosaic { grid-template-rows: repeat(2, minmax(300px, 1fr)); gap: 4px; }
@media (min-width: 1500px) { .wrap-wide .mosaic { grid-template-rows: repeat(2, minmax(340px, 1fr)); } }
@media (max-width: 880px) { .wrap-wide .mosaic { grid-template-rows: none; } }
.section > .wrap + .wrap-wide, .section > .wrap-wide + .wrap { margin-top: 0; }

/* Project photos: larger frames and tighter gutters, so the pictures carry the page */
.proj-grid { gap: 52px 20px; }
.proj-main { aspect-ratio: 5 / 4; }
.proj-body h3 { font-size: 1.7rem; margin: 8px 0 8px; }
.proj-body p { font-size: .96rem; }
.proj.proj-gallery { columns: 2 300px; column-gap: 8px; }
.proj-gallery .proj-shot { margin-bottom: 8px; }
/* Seven or more photos go back to three columns on wide screens, so a long gallery doesn't push the form far down */
@media (min-width: 1100px) { .proj.proj-gallery:has(> .proj-shot:nth-child(7)) { columns: 3 300px; } }

/* ---------------------------------------------------------------- conversion layer
   Two-step lead form, trust row, a call to action after each before/after section and project story,
   project badges, the next-project card and the thank-you page booking spot. */

/* Lead form. site.js adds .lf-on and data-step; without JavaScript every field shows at once, as before. */
.lead-form [hidden] { display: none !important; }
.chk-grp { display: contents; }
.lf-hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.lead-form { position: relative; }
.lf-on[data-step="1"] .lf-2, .lf-on[data-step="2"] .lf-1 { display: none; }
.lf-head { display: none; }
.lf-on .lf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; min-height: 44px; border-bottom: 1px solid var(--line); }
.lf-on .lf-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--brass-ink); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.lf-on[data-step="2"] .lf-head::after { width: 100%; }
.lf-count { margin: 0; padding: 4px 0 12px; font: 500 .76rem/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.lf-back { min-height: 44px; margin: -4px 0 4px; padding: 0 0 0 16px; border: 0; background: none; font: 500 .875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.lf-back:hover { color: var(--ink); }
.lf-back::before { content: "‹ "; text-decoration: none; }
.lf-on .lf-1 legend { font: 500 clamp(1.6rem, 2.6vw, 2.05rem)/1.15 var(--display); color: var(--ink); margin-bottom: 18px; }
.lf-on .lf-1 .chks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lf-on .lf-1 .chk, .lf-tile { display: flex !important; align-items: center; gap: 12px !important; min-height: 64px; padding: 12px 16px; border: 1px solid #8f877b; background: var(--white); color: var(--ink); font: 500 1rem/1.25 var(--body) !important; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.lf-on .lf-1 .chk input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.lf-on .lf-1 .chk:hover, .lf-tile:hover { border-color: var(--ink); }
.lf-on .lf-1 .chk:has(input:checked), .lf-tile[aria-expanded="true"] { border-color: var(--ink); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--ink); }
.lf-tile { justify-content: space-between; width: 100%; }
.lf-tile::after { content: "+"; flex: none; width: 20px; text-align: center; font: 400 1.35rem/1 var(--body); color: var(--brass-ink); }
.lf-tile[aria-expanded="true"]::after { content: "−"; }
.lf-tile:focus-visible, .lf-on .lf-1 .chk:has(input:focus-visible) { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.lf-on .lf-1 .chk input:focus-visible { outline: none; }
.lf-on .chk-grp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 14px; background: var(--ivory); border-left: 2px solid var(--brass-ink); }
.lf-on .chk-grp .chk { background: var(--white); min-height: 44px; }
.lf-on .chk-grp .chk:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lf-add { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: 500 .98rem/1.3 var(--body); color: var(--brass-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.lf-add::before { content: "+ "; text-decoration: none; }
.lf-add:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lf-on .lf-head::after, .lf-on .lf-1 .chk, .lf-tile { transition: none; } }
@media (max-width: 480px) { .lf-on .lf-1 .chk, .lf-tile { gap: 10px !important; padding: 10px 12px; font-size: .95rem !important; } }
@media (max-width: 340px) { .lf-on .lf-1 .chks { grid-template-columns: 1fr; } }

/* Trust row beside a lead form: four across, or two by two where its column is narrow */
.trust { margin: 26px 0 28px; container-type: inline-size; }
.trust-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--line); }
.trust-row li { min-width: 0; }
.trust-row li + li { border-left: 1px solid var(--line); }
.trust-row a { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 16px 12px 14px; color: var(--ink); text-decoration: none; }
.trust-row li:first-child a { padding-left: 0; }
.trust-row strong { font: 500 1.75rem/1 var(--display); font-variant-numeric: lining-nums; color: var(--ink); }
.trust-row .stars { color: var(--brass-ink); letter-spacing: 2px; font-size: .74rem; line-height: 1; }
.trust-row .tr-src { font-size: .84rem; line-height: 1.35; color: var(--ink-2); }
.trust-row a:hover .tr-src { color: var(--brass-ink); }
.trust-note { margin: 14px 0 0; font-size: .98rem; color: var(--ink); }
.contact-form-col .trust { margin-top: 0; }
@container (max-width: 500px) {
  .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-row li:nth-child(3) { border-left: 0; }
  .trust-row li:nth-child(3) a { padding-left: 0; }
  .trust-row li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* One line and one button after a before/after section or a project story */
.cta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; margin-top: clamp(36px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--brass-line); }
.cta-line p { flex: 1 1 380px; margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 1.04rem; }
.cta-line strong { display: block; margin-bottom: 6px; font: 500 clamp(1.55rem, 2.4vw, 2.05rem)/1.15 var(--display); font-variant-numeric: lining-nums; color: var(--ink); }
.section > .wrap + .cta-wrap { margin-top: 0; }
.section-dark .cta-line { border-top-color: rgba(198, 164, 108, .5); }
.section-dark .cta-line strong { color: var(--on-dark); }
.section-dark .cta-line p { color: var(--on-dark-2); }
@media (max-width: 560px) { .cta-line .btn { width: 100%; } }

/* Project card badges beside the place: "Before & after" links to the project's before and after section */
.proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 30px; }
.proj-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 10px; border: 1px solid var(--brass-line); font: 500 .68rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s; }
a.proj-badge::before { content: ""; flex: none; width: 11px; height: 11px; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
a.proj-badge:hover { border-color: var(--brass-ink); color: var(--brass-ink); }
.section-dark .proj-badge { color: var(--on-dark); border-color: rgba(198, 164, 108, .6); }
.section-dark a.proj-badge:hover { color: var(--brass-soft); border-color: var(--brass-soft); }

/* Next project: one large photo card at the bottom of a project page, then the service and gallery links */
.next-section { padding-block: clamp(56px, 7vw, 96px); }
.next-proj { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 21 / 9; background: var(--night); color: var(--on-dark); text-decoration: none; }
.next-proj img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.next-proj::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 11, 10, .9) 0%, rgba(12, 11, 10, .62) 34%, rgba(12, 11, 10, .12) 68%, rgba(12, 11, 10, 0) 100%); }
.next-proj::before { content: ""; position: absolute; inset: 14px; z-index: 1; border: 1px solid rgba(220, 195, 148, 0); pointer-events: none; transition: border-color .4s ease; }
.next-proj:hover::before, .next-proj:focus-visible::before { border-color: rgba(220, 195, 148, .75); }
.next-proj:hover img { transform: scale(1.025); }
.next-proj .proj-tag { z-index: 1; }
.next-cap { position: absolute; left: clamp(24px, 4vw, 52px); right: clamp(24px, 4vw, 52px); bottom: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
/* Ivory, not brass-soft: the small label sits where the scrim is lighter, and brass-soft fell under 4.5:1 on bright photos */
.next-label { display: flex; align-items: center; gap: 14px; font: 500 .76rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark); }
.next-label::before { content: ""; width: 32px; height: 1px; background: var(--brass); }
.next-cap strong { font: 500 clamp(2.3rem, 5vw, 4.4rem)/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -.01em; color: var(--on-dark); }
.next-cap strong::after { content: " →"; font-family: var(--body); font-size: .5em; vertical-align: middle; color: var(--brass-soft); }
.next-place { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); }
.next-proj:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 4px; }
.next-section .proj-links { margin-top: 30px; }
@media (max-width: 760px) { .next-proj { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .next-proj img, .next-proj::before { transition: none; } .next-proj:hover img { transform: none; } }

/* Thank-you page: what happens next and the booking spot */
.booking { padding: clamp(26px, 3.4vw, 40px); background: var(--ivory); border-top: 2px solid var(--brass-line); }
.booking h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.booking-call { margin-bottom: 18px; font: 500 clamp(1.55rem, 2.5vw, 2.05rem)/1.25 var(--display); font-variant-numeric: lining-nums; color: var(--ink); }
.booking-call a { white-space: nowrap; }
.booking-later { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); }
.booking-later a { white-space: nowrap; }
.booking-embed { margin-bottom: 20px; }
.booking-embed .fine { margin: 10px 0 0; }
.booking-frame { display: block; width: 100%; height: 680px; border: 1px solid var(--line); background: var(--white); }
/* Step numerals in the display font read "01", not old-style "o1" */
.steps li::before { font-variant-numeric: lining-nums; }

/* ===== Final-round design fixes (10/2). One block so later edits stay easy to find. ===== */
/* Reading measure: 70ch is sized on the "0" glyph and ran ~100 characters a line in Jost. 34em is about 78. */
.prose > p, .prose > ul, .prose > ol { max-width: 34em; }
.faq p { max-width: 36em; }
/* Project pages: the story sits on the same 5/7 split as the "What we did" list under it. */
@media (min-width: 901px) {
  .prose.story { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(28px, 6vw, 96px); max-width: none; align-items: start; }
  .prose.story > h2 { grid-column: 1; grid-row: 1 / span 40; margin: 0; }
  .prose.story > :not(h2) { grid-column: 2; }
}
.scope-split { margin-top: clamp(64px, 8vw, 112px); }
/* Cost guide: the line under each price list reads as a note, smaller than the item descriptions. */
.prices + p { margin-top: 18px; font-size: .95rem; color: var(--ink-2); }
/* Lead form: a field the browser scrolls to on a failed submit lands below the sticky header, not under it. */
.lead-form :is(input, textarea, select) { scroll-margin-top: calc(var(--hdr-h) + 64px); }
/* Thank-you photo: square, set on the cabinets (a 4:5 crop of this landscape photo was mostly countertop). */
.photo.sq img { aspect-ratio: 1 / 1; object-position: 40% 30%; }
/* Home before/after: a caption's second sentence sits on its own line, outside the link. */
.ba-cap-note { display: block; margin-top: 4px; font-size: .86rem; color: var(--on-dark-3); }
.section:not(.section-dark):not(.section-stone) .ba-cap-note { color: var(--muted); }
/* Stone band: a stronger wash so the porcelain's white vein stays behind the heading. */
.section-stone { background:
    linear-gradient(180deg, rgba(26, 24, 22, .64) 0, rgba(26, 24, 22, .76) 22vw, var(--charcoal) 38vw),
    url("../img/texture-porcelain-1280.webp") center -80px / 100% auto no-repeat,
    var(--charcoal); }
@media (max-width: 760px) {
  .section-stone { background:
      linear-gradient(180deg, rgba(26, 24, 22, .64) 0, rgba(26, 24, 22, .76) 260px, var(--charcoal) 440px),
      url("../img/texture-porcelain-1280.webp") 30% top / auto 440px no-repeat,
      var(--charcoal); }
}
/* "Before / After | 3D design" switch: under the frame, above the caption (site.js puts it there). */
.ba-views { position: static; transform: none; display: inline-flex; margin: 12px 0 0; padding: 0; background: transparent; box-shadow: inset 0 0 0 1px rgba(198, 164, 108, .55); }
.ba-views button { min-height: 40px; }
.ba-views button[aria-pressed="false"] { color: inherit; }
.section-dark .ba-views button[aria-pressed="false"], .section-stone .ba-views button[aria-pressed="false"] { color: var(--on-dark); }
.ba-views button[aria-pressed="true"] { background: var(--on-dark); color: var(--ink); }
/* Lightbox: solid controls (3:1 over a bright photo), and on phones the caption gets its own row above the arrows. */
.lb-close, .lb-nav { background: rgba(14, 13, 12, .72); border-color: rgba(243, 238, 230, .45); }
@media (max-width: 640px) {
  .lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; height: 100vh; height: 100svh; padding: 72px 12px 86px; }
  .lightbox img { min-height: 0; max-height: 100%; max-width: 100%; width: auto; margin: auto; }
  .lightbox figcaption { font-size: .86rem; line-height: 1.45; padding-top: 10px; }
}
/* Project galleries: two columns on phones, so a gallery reads as a set, not a camera roll. */
@media (max-width: 560px) {
  .proj.proj-gallery { columns: 2; column-gap: 6px; }
  .proj-gallery .proj-shot { margin-bottom: 6px; }
}
/* Nav: "ADUs" keeps its lowercase s under the uppercase desktop nav; the phone menu reads in sentence case. */
.main-nav .lc { text-transform: none; }
.mobile-nav a { text-transform: none; }
.mobile-nav .sub a { letter-spacing: .01em; }
/* Phone bar without the Consultation button (thank-you and contact pages): Call and Text share the row. */
@media (max-width: 880px) { .mobile-bar.mb-two { grid-template-columns: 1fr 1fr; } }
/* Footer: four columns when "Service areas" sits under Company; the license link matches the lines around it. */
@media (min-width: 1181px) { .footer-grid.footer-4 { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.lic a { color: inherit; text-decoration: underline; text-decoration-color: rgba(198, 164, 108, .5); text-underline-offset: 3px; }
/* 404: recovery links as display-type rows, like the service-area list. */
.nf-links { list-style: none; padding: 0; margin: 0 0 1.4em; border-top: 1px solid var(--brass-line); max-width: 34em; }
.nf-links a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font: 500 1.45rem/1.2 var(--display); color: var(--ink); text-decoration: none; }
.nf-links a::after { content: "\2192"; font: 400 1rem var(--body); color: var(--brass-ink); }
.nf-links a:hover { color: var(--brass-ink); }
/* Kitchen and bathroom "At a glance": the call to action fills the column beside the facts table. */
.glance-actions { margin-top: 28px; }

/* ===== Trust review fixes (10/5): first screen, chapter wash, booking. ===== */
/* Button text is 14px everywhere (it was 12 to 13px); a label that runs to two lines keeps its line height. */
@media (max-width: 560px) { .btn { padding-inline: 22px; } }
/* Header: "Book a free consultation" stays on one line; on the narrowest tablet widths the phone number gives way to it
   (the call bar under 880px has Call and Text). */
.header-actions .btn { white-space: nowrap; }
@media (max-width: 680px) { .header-actions .phone { display: none; } }

/* Home, phones: the ratings and license bar sits in the first screen, right under the hero. The hero gives up the empty
   photo above the headline instead of the headline itself: it fills what is left of the screen after the header, the
   call bar (67px) and the bar (--tb-h), and never gets shorter than its own text. */
@media (max-width: 700px) {
  :root { --tb-h: 144px; }
  .hero-home { min-height: max(430px, calc(100vh - var(--hdr-h) - 67px - var(--tb-h))); }
  @supports (min-height: 100svh) { .hero-home { min-height: max(430px, calc(100svh - var(--hdr-h) - 67px - var(--tb-h))); } }
  .hero-home .wrap { padding-block: 36px 30px; }
  .hero-full.hero-home h1 { margin-bottom: 20px; }
  .hero-home .lead { margin-bottom: 24px; }
  .hero-home .lead::before { margin-bottom: 16px; }
  /* The shorter hero puts the headline higher in the wash, so the wash is measured from the bottom edge, where the text
     starts, and holds deeper up to the top of the headline (about 500px up on a 360px-wide phone): the brass second line
     keeps 3:1 over every frame of the video */
  .hero-home::after { background: linear-gradient(0deg, rgba(12, 11, 10, .95) 0, rgba(12, 11, 10, .82) 220px, rgba(12, 11, 10, .72) 380px, rgba(12, 11, 10, .66) 520px, rgba(12, 11, 10, .5) 100%); }
  /* The bar itself: two rows on a six-column grid, figure and stars on one line, the source under them (one line at
     390px wide). Without :has(): the page order, three across, then BBB and the license in the wider cell. */
  .trustbar ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 16px 0 18px; }
  .trustbar li { grid-column: span 2; font-size: .8rem; line-height: 1.3; }
  .trustbar li:last-child { grid-column: span 4; }
  .trustbar strong { font-size: 1.35rem; }
  .trustbar .stars { font-size: .62rem; letter-spacing: 1px; }
  /* The Google rating and the CSLB license take the first row, Houzz, Yelp and BBB the second: on a short phone screen
     (Safari with its toolbars, about 660px tall) the first row is the one that clears the call bar, so it carries the
     rating and the license. Matched by link, not by position, so it still holds if the list is reordered. */
  @supports selector(li:has(> a)) {
    .trustbar li, .trustbar li:last-child { grid-column: span 2; }
    .trustbar li:has(> a[href*="google."]) { order: -1; }
    .trustbar li:has(> a[href*="cslb."]) { order: -1; grid-column: span 4; }
  }
}
/* Short phone screens: the hero gives up a little padding so the first row of the bar clears the call bar. */
@media (max-width: 700px) and (max-height: 760px) {
  .hero-home .wrap { padding-block: 24px 22px; }
  .hero-full.hero-home h1 { margin-bottom: 16px; }
  .hero-home .lead::before { margin-bottom: 14px; }
  .hero-home .lead { margin-bottom: 22px; }
  .trustbar ul { padding-top: 14px; }
}

/* Project chapters, wide screens: a lighter wash over the photos. The deep part of the wash now follows the text block
   instead of a fixed 560px band: it starts dark at the bottom edge, still holds 62% at the top line of the text (AA for
   the body line even over a white wall; on very wide screens the old fixed band left that line near 3.5:1 over the Poway
   shower), and is gone 150px above the text. The photo above it is lighter than before, and the band at the top is lighter. */
@media (min-width: 901px) {
  .chapter-media::after { background: linear-gradient(180deg, rgba(12, 11, 10, .16) 0, rgba(12, 11, 10, 0) 110px); }
  /* Painted as the text block's own border image, pushed out 30px above it and to both screen edges (the chapter clips
     it): no positioned box, so the "See the project" link still stretches over the whole chapter. */
  .chapter-text { border-image:
    linear-gradient(0deg, rgba(12, 11, 10, .84) 0, rgba(12, 11, 10, .7) 160px, rgba(12, 11, 10, .62) calc(100% - 150px),
      rgba(12, 11, 10, .36) calc(100% - 90px), rgba(12, 11, 10, .12) calc(100% - 40px), rgba(12, 11, 10, 0) 100%)
    0 fill / 0 / 30px 100vw 0; }
}

/* Lead section (build.py c_lead): heading and trust row on the left, the form on the right; on phones the form comes
   straight after the heading and the trust row follows it. Row 2 takes the form's extra height, so the trust row stays
   right under the heading on wide screens. */
.lead-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head form" "more form"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 6vw, 88px); align-items: start; }
.lead-head { grid-area: head; } .lead-form-col { grid-area: form; } .lead-more { grid-area: more; }
.lead-split .lead-more > .trust:first-child { margin-top: 4px; }
@media (max-width: 900px) {
  .lead-split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "more"; grid-template-rows: none; }
  .lead-split .lead-more > .trust:first-child { margin-top: 34px; }
  /* Contact page: the form right after the heading, the trust row under it; less empty space above the heading,
     so step 1 of the form starts higher on the first screen */
  .contact-form-col { display: flex; flex-direction: column; }
  .contact-form-col > .trust { order: 1; margin: 30px 0 0; }
  .section:has(> .contact-split) { padding-top: 40px; }
  .contact-head .lead { margin-bottom: 0; }
}
.contact-split { grid-template-rows: auto 1fr; }
@media (max-width: 900px) { .contact-split { grid-template-rows: none; } }

/* Reviews (build.py): where and when a quote was posted, the Google score line ({{review_score}}), and the slim
   review bar on service pages ({{review_bar:...}}). On phones the bar stacks: heading and score, then the excerpts. */
.q-src { display: block; margin-top: 4px; font-size: .84rem; }
.q-src a { color: var(--brass-ink); }
.section-dark .q-src, .section-dark .q-src a { color: var(--brass-soft); }
.review-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 14px 0 0; }
.rs-google { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink); text-decoration: none; }
.rs-google strong { font: 500 2rem/1 var(--display); font-variant-numeric: lining-nums; }
.rs-google .stars { color: var(--brass-ink); letter-spacing: 2px; font-size: .8rem; }
.rs-src { font-size: .92rem; color: var(--ink-2); }
.rs-google:hover .rs-src { color: var(--brass-ink); }
.rs-all { font-size: .92rem; }
.review-bar { padding-block: clamp(40px, 5vw, 64px); }
.rb-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(28px, 4vw, 56px); border-top: 1px solid var(--brass-line); padding-top: clamp(28px, 3vw, 40px); }
.rb-head h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0; }
.rb-head .review-score { margin: 12px 0 22px; }
.rb-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.rb-quotes blockquote { margin: 0 0 14px; font: 500 1.18rem/1.45 var(--display); color: var(--ink); }
.rb-by { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.rb-by strong { color: var(--ink); font-weight: 500; }
.section-more { margin-top: clamp(64px, 8vw, 112px); }
@media (max-width: 980px) {
  .rb-inner { grid-template-columns: minmax(0, 1fr); }
  .rb-quotes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rb-quotes li + li { border-top: 1px solid var(--line); padding-top: 22px; }
}

/* ===== Launch round 2 (10/5): first screen, home prices, five quotes. ===== */
/* Home hero: what we do, in plain words, before the slogan. */
.hero-kicker { margin: 0 0 18px; font: 500 clamp(1.02rem, 1.4vw, 1.3rem)/1.3 var(--body); letter-spacing: .03em; color: var(--brass-soft); text-wrap: balance; }
@media (max-width: 700px) { .hero-kicker { margin-bottom: 12px; } }
@media (max-width: 700px) and (max-height: 760px) { .hero-kicker { margin-bottom: 8px; } }
/* Narrow phones: on a short screen the hero text starts level with the video's pause button (top right), so the line
   stays clear of it. */
@media (max-width: 400px) { .hero-kicker { font-size: .94rem; max-width: calc(100% - 52px); } }
/* Home prices: one row per kind of job, kitchens and bathrooms beside ADUs, additions and outdoor rooms. Each name
   links to its service page. */
.hp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); }
@media (max-width: 900px) { .hp-cols { grid-template-columns: minmax(0, 1fr); } .hp-cols .prices + .prices { border-top: 0; } }
.price-row h3 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 4px; }
.price-row h3 a:hover { color: var(--brass-ink); text-decoration-color: var(--brass-ink); }
.hp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 30px; }
.hp-foot .fine { margin: 0; max-width: 62ch; }
/* Five quotes (the bathroom page): three over two, so no column sits empty. */
@media (min-width: 981px) {
  .quotes-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .quotes-5 > * { grid-column: span 2; }
  .quotes-5 > :nth-child(n+4) { grid-column: span 3; }
}
/* Service cards (/services/): two starting prices, one per line. */
.svc-price > span { display: block; }
.svc-price > span + span { margin-top: 7px; }

/* ===== Handoff stage 1 (10/6): keyboard, tap targets, phone spacing and the project hero on phones. ===== */
/* Skip link: a brass-edged tab over the header when keyboard focus reaches it. */
.skip { z-index: 120; padding: 15px 18px; border: 1px solid var(--brass); font: 500 .875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { left: 12px; top: 12px; }
.skip:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 2px; }
/* Desktop Services menu: Escape hides it (site.js) until the mouse or the focus leaves and comes back. */
.main-nav .has-sub.sub-off .sub { display: none; }
/* Tap targets: the menu button and the header phone number reach 44px; breadcrumb links get a taller hit area
   (inline padding, so nothing moves). */
@media (max-width: 1140px) { .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 16px; } }
.phone { padding-block: 14px; }
.crumbs a { padding-block: 10px; }
/* Footer links on phones and tablets (lists, phone, email and social links): one comfortable row each, instead of
   22 to 26px lines. The CSLB link stays inline in the legal lines. */
@media (max-width: 880px) {
  .footer-grid li { margin-bottom: 0; }
  .footer-grid li a { display: inline-block; padding-block: 9px; }
  .footer-grid p:not(.lic) a { display: inline-block; padding-block: 11px; }
  .footer-base a { display: inline-block; padding-block: 12px; }
  .footer-base { align-items: baseline; }
}
/* A price line under the hero buttons (ADU, JADU, financing) keeps its distance from them. */
.page-hero .hero-actions + .fine { margin-top: 18px; }
/* Phones: the kitchen and bathroom "At a glance" buttons repeat the two buttons just above them in the hero
   (and the call bar), so they show on wide screens only, where they fill the column beside the facts. */
@media (max-width: 900px) { .glance-actions { display: none; } }
/* Phones: hero buttons run the full width, like the other calls to action on phones (.cta-line, .hx-foot). */
@media (max-width: 560px) { .hero-actions .btn { flex: 1 1 100%; } }
/* Phones: inner-page photo heroes no longer hold a fixed 540px of washed-out photo when their text is short
   (/projects/), so the filters and the first project come up sooner. Taller hero text still sets the height. */
@media (max-width: 700px) { .hero-full.hero-short { min-height: 420px; } }
/* Project pages on phones with a wide cover photo: the photo first, then the heading, summary and buttons. build.py
   leaves .proj-hero off a tall cover, which keeps its heading first so it still shows on a short phone screen. */
@media (max-width: 900px) {
  .proj-hero { padding-top: 24px; }
  .proj-hero .two-col > figure { order: -1; }
}
/* Intro paragraphs never end on one stranded word ("starts."); browsers without text-wrap: pretty wrap as before. */
.lead { text-wrap: pretty; }
/* "Written by Tomer Turjeman" links to the About page. */
.byline a { color: inherit; text-decoration-color: var(--brass-line); text-underline-offset: 3px; }
.byline a:hover strong { color: var(--brass-ink); }

/* ---------------------------------------------------------------- partner pages (/trade-partners/, /professional-partners/)
   Their forms look like the lead form but are separate (.partner-form, never .lead-form), so the homeowner form's
   two-step script and styles never touch them. site.js turns on the Send by email button; without JavaScript it stays
   disabled and the page gives the email address and phone number. */
.partner-form { position: relative; background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--brass-line); padding: clamp(22px, 3vw, 36px); display: grid; gap: 20px; }
.partner-form [hidden] { display: none !important; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-field { display: grid; gap: 7px; margin: 0; min-width: 0; }
.pf-field > label, .pf-field > legend { font-weight: 500; font-size: .92rem; line-height: 1.4; }
.partner-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.partner-form legend { padding: 0; margin-bottom: 10px; font-weight: 500; font-size: .92rem; }
.pf-set > legend { width: 100%; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 14px; }
.pf-stack { display: grid; gap: 20px; }
.partner-form input[type=text], .partner-form input[type=tel], .partner-form input[type=email], .partner-form select, .partner-form textarea { width: 100%; font: 400 1rem var(--body); padding: 13px 14px; border: 1px solid #8f877b; border-radius: 0; background: var(--white); color: var(--ink); }
.partner-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161412' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; }
.partner-form input:focus, .partner-form select:focus, .partner-form textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); }
.partner-form input[type=checkbox]:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; box-shadow: none; }
.partner-form textarea[readonly] { background: var(--bone); font-size: .9rem; }
.partner-form .req { color: #9b2c2c; font-weight: 700; }
.pf-opt { font-weight: 400; color: var(--muted); }
.pf-hint { margin: -2px 0 0; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.pf-chks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pf-chk { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid #8f877b; font-size: .95rem; line-height: 1.3; cursor: pointer; }
.pf-chk input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); }
.pf-chk:has(input:checked) { border-color: var(--ink); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--ink); }
.pf-ack .pf-chk { align-items: flex-start; border-color: var(--line); padding: 12px 14px; }
.pf-ack .pf-chk input { margin-top: 3px; }
.pf-fine { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.pf-note { background: var(--ivory); border-left: 2px solid var(--brass-line); padding: 14px 16px; font-size: .92rem; line-height: 1.55; }
.pf-note p { margin: 0; }
.pf-err { margin: 0; color: #8c1d18; font-weight: 600; font-size: .9rem; }
.pf-bad input[type=text], .pf-bad input[type=tel], .pf-bad input[type=email], .pf-bad select, .pf-bad textarea { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.pf-bad .pf-chk { border-color: #b3261e; }
.pf-summary { padding: 14px 16px; border: 1px solid #b3261e; border-left-width: 4px; background: #fff4f2; color: #8c1d18; }
.pf-summary:focus { outline: 2px solid #8c1d18; outline-offset: 2px; }
.pf-summary h3 { margin: 0 0 6px; color: #8c1d18; font-weight: 600; }
.pf-summary p { margin: 0; font-weight: 600; }
.pf-summary ul { margin: 0; padding-left: 1.1em; }
.pf-summary a { color: #8c1d18; font-weight: 600; }
.pf-hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.pf-nojs { margin: 0; padding: 12px 14px; background: var(--ivory); font-size: .95rem; }
.pf-result { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--ink); background: var(--bone); }
.pf-result:focus { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.pf-result h3 { margin: 0; font: 500 1.5rem/1.2 var(--display); }
.pf-result p { margin: 0; font-size: .95rem; }
.pf-result label { font-weight: 500; font-size: .92rem; }
.pf-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pf-copied { min-height: 1.2em; font-size: .9rem; color: var(--ink-2); }
.partner-form button[disabled] { opacity: .55; cursor: not-allowed; }
/* The design and the finished room side by side on /professional-partners/ (one above the other on phones) */
.pp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.pp-pair figure { margin: 0; }
.pp-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pp-pair figcaption { font-size: .85rem; color: var(--muted); padding-top: 8px; }
@media (max-width: 560px) { .pp-pair { grid-template-columns: 1fr; } }

/* ===== Handoff stage 4 (10/6): two service routes, price stages, roles, awards, projects by community. ===== */
/* Services menu in two groups (site_config.SERVICE_ROUTES), each under a brass italic label, with Design-build and
   All services on a row of their own. Same hover, focus and Escape behavior as before (site.js). */
.sub-groups ul { list-style: none; margin: 0; padding: 0; }
.main-nav .has-sub .sub-groups { min-width: 560px; grid-template-columns: 1fr 1fr; padding: 14px 0 8px; }
.main-nav .has-sub:hover .sub-groups, .main-nav .has-sub:focus-within .sub-groups { display: grid; }
.main-nav .has-sub.sub-off .sub.sub-groups { display: none; }
.sub-head { display: block; font: italic 500 1.12rem/1.2 var(--display); letter-spacing: 0; text-transform: none; color: var(--brass); }
.main-nav .sub-head { padding: 4px 18px 6px; }
.main-nav .sub-groups > .sub-row { grid-column: 1 / -1; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line-dark); }
.main-nav .sub-row ul { display: flex; flex-wrap: wrap; }
.mobile-nav .sub ul { padding: 0; }
.mobile-nav .sub-head { padding: 16px 18px 4px; color: var(--brass-soft); }
/* In-page links under a page heading (/services/, /client-care/) */
.svc-jump { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 26px 0 0; }
/* From a free visit to a fixed price (partial price-stages): the three steps, each with what it costs */
.stages p { margin: 0 0 10px; }
.stages p:last-child { margin-bottom: 0; }
.stages .stage-cost { font: 500 .78rem/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 12px; }
.fixed-terms { margin-top: clamp(48px, 6vw, 80px); }
.fixed-terms .prose h3:first-child { margin-top: 0; }
/* A real kitchen scope (/kitchen-remodel/) and the feasibility table (/addition-and-adu/) */
.scope-ex { margin-top: clamp(64px, 8vw, 112px); }
.scope-ex .lead { margin-bottom: 18px; }
.feasibility { margin-top: clamp(48px, 6vw, 72px); }
.feasibility > h3 { font: 500 clamp(1.7rem, 2.8vw, 2.4rem)/1.12 var(--display); margin: 0; }
.feasibility p { margin-top: 18px; max-width: 62ch; }
/* Who does what (partial who-does-what): role names are longer than the glance labels elsewhere */
.glance.roles th { width: 34%; }
.split .glance.roles + .proj-links { margin-top: 28px; }
/* Awards by category and year (/reviews/) */
.glance.awards td a { color: var(--ink); text-decoration-color: var(--brass-line); }
/* Projects by community (/service-areas/) */
.area-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 32px; }
.area-projects .ap { border-top: 1px solid var(--brass-line); padding-top: 16px; }
.area-projects h3 { font: 500 1.5rem/1.15 var(--display); margin: 0 0 8px; }
.area-projects ul { list-style: none; margin: 0; padding: 0; }
.area-projects li { padding: 7px 0; color: var(--muted); font-size: .98rem; }
.area-projects a { color: var(--ink); text-decoration-color: var(--brass-line); }
/* Project pages a related strip had no room for, as plain links under the cards */
.proj-also { margin: 30px 0 0; max-width: 90ch; color: var(--on-dark-2); font-size: .98rem; }
/* Home prices under the two route headings; the row names step down to h4 under them */
.hp-route-h { margin: 0 0 14px; font: italic 500 1.45rem/1.2 var(--display); }
.hp-route-h a { color: var(--ink); text-decoration: none; }
.hp-route-h a:hover { color: var(--brass-ink); }
@media (max-width: 900px) { .hp-route + .hp-route { margin-top: 36px; } }
.price-row h4 { margin: 0 0 4px; font: 500 1.12rem/1.35 var(--body); letter-spacing: .005em; color: var(--ink); }
.price-row h4 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 4px; }
.price-row h4 a:hover { color: var(--brass-ink); text-decoration-color: var(--brass-ink); }
/* Contact page: the after-job route for past clients */
.contact-care { margin-top: 28px; }
@media (max-width: 560px) {
  .area-projects { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 18px; }
  .area-projects h3 { font-size: 1.25rem; }
  .area-projects li { font-size: .92rem; }
}

/* Instagram consultation page (/instagram/, 10/7): a campaign landing page, noindex and out of the menu. Under the hero,
   how the free consultation works and two photos on the left, the trust row and the form on the right; on phones the
   same blocks one under the other, the form last (the hero button and the call bar jump to it). */
.hero-full.hero-short.ig-hero { min-height: clamp(440px, 62vh, 640px); }
.ig-section { padding-block: clamp(56px, 8vw, 112px); }
.ig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 88px); align-items: start; }
.ig-info h2, .ig-form-col h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.steps.ig-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 8px; }
.steps.ig-steps li::before { font-size: 2rem; margin-bottom: 10px; }
.ig-photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 40px; }
.ig-form-col { scroll-margin-top: calc(var(--hdr-h) + 12px); }
.ig-form-col .lead { margin-bottom: 0; }
.ig-form-col .trust { margin: 24px 0 26px; }
.lf-expect { margin: 0; font-size: .95rem; color: var(--ink); border-left: 2px solid var(--brass-line); padding-left: 12px; }
.lf-need-err { margin: 0; padding: 12px 14px; border: 1px solid #b3261e; color: #8c1d18; background: #fff4f2; font-weight: 600; }
.lead-form button[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) {
  .ig-split { grid-template-columns: minmax(0, 1fr); }
  .ig-form-col { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--brass-line); }
}
@media (max-width: 560px) { .ig-photos { gap: 10px; margin-top: 32px; } .ig-photos .photo figcaption { font-size: .8rem; } }
.ig-thanks .ig-urgent { color: var(--on-dark-2); margin: -16px 0 30px; }