/*
Theme Name: Lux Domus Builder
Theme URI: https://luxdomusbuilder.com/
Author: Lux Domus Builder
Description: Block theme for Lux Domus Builder, custom homes, remodeling and renovation in McKinney, Texas. Built from the approved Quiet Gallery mockups: brushed-brass skyline motifs, the LD frame for imagery, a film hero, an always-dark process band and placeholder panels ready for form and shop plugins. Seven palettes ship as style variations (Heritage Navy is the default) and recolor the whole site, the logo included. Two alternate homepage designs ship as patterns and page templates.
Version: 1.0.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lux-domus-builder
Tags: block-patterns, block-styles, full-site-editing, style-variations, custom-colors, editor-style, one-column, wide-blocks
*/

/* ==========================================================================
   How this stylesheet is organised
   0. Token bridge: theme.json presets (palette, custom) -> the mockups' variables
   1. Approved shared CSS (design/approved/_shell.html), ported rule for rule.
      Palette blocks and the review-only palette switcher are replaced by theme.json.
      Element selectors that became blocks read :is(li,.is-li), p:where(:not(.lx-np)) ...
   2. Pattern library extras (design/design-patterns.html), scoped to .lx-doc
   3. WordPress adapters: the same components on core block markup
   4. Page CSS from each approved page, scoped to its page wrapper (.pg-*)
   5. Page adapters, delay utilities, editor visibility
   ========================================================================== */

/* ==========================================================================
   0. Token bridge
   The mockups read colors from --bg, --ink, --brass ... set per palette on <html>.
   Here every one of them reads the active style variation's theme.json values:
   palette presets (--wp--preset--color--*) and custom tokens (--wp--custom--*).
   Switching the variation in Appearance > Editor > Styles recolors everything,
   the logo included (logo-ink and logo-accent).
   ========================================================================== */
:root, .editor-styles-wrapper {
  --bg: var(--wp--preset--color--base);
  --surface: var(--wp--preset--color--surface);
  --surface-2: var(--wp--preset--color--surface-2);
  --ink: var(--wp--preset--color--contrast);
  --text: var(--wp--preset--color--body-text);
  --muted: var(--wp--preset--color--muted);
  --taupe: var(--wp--custom--color--taupe);
  --line: var(--wp--preset--color--line);
  --line-strong: var(--wp--preset--color--line-strong);
  --primary: var(--wp--preset--color--primary);
  --on-primary: var(--wp--preset--color--on-primary);
  --brass: var(--wp--preset--color--accent);
  --brass-hi: var(--wp--custom--color--accent-hi);
  --brass-lo: var(--wp--custom--color--accent-lo);
  --brass-text: var(--wp--preset--color--accent-text);
  --focus: var(--wp--custom--color--focus);
  --btn-bg: var(--wp--custom--color--button-bg);
  --btn-fg: var(--wp--custom--color--button-fg);
  --btn-bg-h: var(--wp--custom--color--button-bg-hover);
  --btn-fg-h: var(--wp--custom--color--button-fg-hover);
  --band-bg: var(--wp--preset--color--band);
  --band-line: var(--wp--custom--color--band-line);
  --band-ink: var(--wp--preset--color--band-text);
  --band-muted: var(--wp--preset--color--band-muted);
  --band-brass: var(--wp--preset--color--band-accent);
  --band-focus: var(--wp--custom--color--band-focus);
  --band-btn-bg: var(--wp--custom--color--band-button-bg);
  --band-btn-fg: var(--wp--custom--color--band-button-fg);
  --band-btn-bg-h: var(--wp--custom--color--band-button-bg-hover);
  --band-btn-fg-h: var(--wp--custom--color--band-button-fg-hover);
  --specL-bg: var(--wp--custom--color--spec-light-bg);
  --specL-ink: var(--wp--custom--color--spec-light-ink);
  --specL-muted: var(--wp--custom--color--spec-light-muted);
  --specL-line: var(--wp--custom--color--spec-light-line);
  --error: var(--wp--preset--color--error);

  /* logo colors: the palette's logo set; the band and footer use the dark logo set */
  --L-logo-ink: var(--wp--preset--color--logo-ink);
  --L-logo-accent: var(--wp--preset--color--logo-accent);
  --D-logo-ink: var(--wp--preset--color--band-logo-ink);
  --D-logo-accent: var(--wp--preset--color--band-logo-accent);
  --logo-ink: var(--L-logo-ink);
  --logo-accent: var(--L-logo-accent);
  --band-logo-ink: var(--D-logo-ink);
  --band-logo-accent: var(--D-logo-accent);

  /* mode tokens (light for six palettes, dark for Midnight Navy), from theme.json custom.mode */
  color-scheme: var(--wp--custom--mode--scheme, light);
  --grain-opacity: var(--wp--custom--mode--grain-opacity, .06);
  --grain-blend: var(--wp--custom--mode--grain-blend, multiply);
  --img-filter: var(--wp--custom--mode--img-filter, saturate(.88) sepia(.05));
  --img-filter-h: var(--wp--custom--mode--img-filter-hover, saturate(.96) sepia(.02));
  --shadow: var(--wp--custom--mode--shadow, rgba(24, 26, 34, .22));
  --wf-light: var(--wp--custom--mode--wf-light, 1);
  --wf-dark: var(--wp--custom--mode--wf-dark, 0);

  --brushed: linear-gradient(100deg, var(--brass-lo) 0%, var(--brass) 26%, var(--brass-hi) 50%, var(--brass) 74%, var(--brass-lo) 100%);
}

/* ==========================================================================
   1. Approved shared CSS (design/approved/_shell.html), ported rule for rule.
   The seven palette blocks and the palette switcher of the review build are
   replaced by theme.json and its style variations (see the token bridge above).
   ========================================================================== */

/* ==========================================================================
   Lux Domus Builder / SHARED SITE CSS (approved pages, design/approved/)
   Identical, byte for byte, in every page. Never edit it inside a page:
   page-only rules go in the PAGE-SPECIFIC STYLES block that follows.
   Values: design/design-tokens.json. Components: design/design-patterns.html.
   Part 1. Tokens, seven palettes (light and dark), base, type, links, skyline,
           buttons, header, hero, image treatments, section head, cards,
           services index, dark band, forms, placeholder stages, footer,
           palette switcher, motion, responsive (as in the approved home layout)
   ========================================================================== */
:root {
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .61, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(16px, 6.5vw, 112px);
  --section: clamp(96px, 13vw, 184px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } /* clip: no sideways scroll, and sticky elements still work */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip;
}
/* Embellishment: limestone grain (CSS-only, inline SVG noise), fixed over the whole page */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--brass-hi); color: #1B1A18; }
code { font: .84em/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

.wrap { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }


/* ---------- Logo (live, recolorable inline SVG) ---------- */
.lx-logo { display: block; line-height: 0; }
.lx-logo svg, .lx-logo img { display: block; width: 100%; height: 100%; }
.lx-logo--mono { aspect-ratio: 1; }
.lx-logo--stack { aspect-ratio: 1412 / 1059; }

/* ---------- Type atoms ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(24px, 3vw, 40px);
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; flex: none; width: 36px; height: 1px; background: var(--brushed); }
.display {
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 1.2rem + 5.6vw, 6.6rem);
  line-height: .96; letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 1.4rem + 3.1vw, 4.2rem);
  line-height: 1.02; letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.h3 { margin: 0; font: 400 clamp(1.6rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); color: var(--ink); }
.display em, .h2 em, .h3 em, .band__lede em { font-style: italic; font-weight: 400; color: var(--brass-text); }
p:where(:not(.lx-np)) { text-wrap: pretty; }
.nw { white-space: nowrap; }
.lead {
  max-width: 33em;
  margin: 0 0 clamp(40px, 4.4vw, 60px);
  font-weight: 300;
  font-size: clamp(1.06rem, .98rem + .3vw, 1.2rem);
  line-height: 1.8;
  color: var(--text);
}
.prose { max-width: 34em; margin: 0; color: var(--muted); }
.prose--ink { color: var(--text); }

/* ---------- Links ---------- */
/* inline link: deep-metal text, 1px underline set low, rising on hover */
.lead a, .prose a {
  color: var(--brass-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .34em;
  text-decoration-color: var(--brass);
  text-decoration-color: color-mix(in srgb, var(--brass-text) 45%, transparent);
  transition: text-underline-offset .6s var(--ease), text-decoration-color .6s var(--ease);
}
.lead a:hover, .prose a:hover, .prose a.is-hover { text-underline-offset: .18em; text-decoration-color: currentColor; }
/* on the always-dark band and footer */
.band .prose a, .spec-pane--band .prose a, .site-foot .prose a { color: var(--band-brass); text-decoration-color: color-mix(in srgb, var(--band-brass) 45%, transparent); }
.band .prose, .spec-pane--band .prose, .site-foot .prose { color: var(--band-muted); }

/* text link: the secondary call to action (tracked capitals, brushed underline drawing out) */
.textlink {
  position: relative;
  display: inline-flex; align-items: center;
  padding: .7rem 0;
  color: var(--ink);
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none;
  transition: color .7s var(--ease);
}
button.textlink { appearance: none; border: 0; margin: 0; background: none; cursor: pointer; }
.textlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34%; height: 1px;
  background: var(--brushed);
  transition: width 1s var(--ease-io);
}
.textlink:hover, .textlink:focus-visible, .textlink.is-hover { color: var(--brass-text); }
.textlink:hover::after, .textlink:focus-visible::after, .textlink.is-hover::after { width: 100%; }
.textlink--on-dark { color: var(--band-ink); }
.textlink--on-dark:hover, .textlink--on-dark:focus-visible, .textlink--on-dark.is-hover { color: var(--band-brass); }

/* ---------- Skyline: stepped bars from inside the D, tallest first with a 45-degree peak ---------- */
.sky { display: inline-flex; align-items: flex-end; height: 20px; transform: translateY(-50%); pointer-events: none; }
.sky :is(i,.is-i) { display: block; height: var(--h); width: var(--w); margin-right: var(--g, 0); background: var(--brass); transform-origin: bottom; }
.sky :is(i,.is-i):nth-child(1) { --w: 4px; --h: 100%; --g: 3px; clip-path: polygon(0 0, 100% 4px, 100% 100%, 0 100%); }
.sky :is(i,.is-i):nth-child(2) { --w: 3px; --h: 78%; --g: 1.5px; clip-path: polygon(0 0, 100% 3px, 100% 100%, 0 100%); }
.sky :is(i,.is-i):nth-child(3) { --w: 4px; --h: 62%; --g: 2.5px; }
.sky :is(i,.is-i):nth-child(4) { --w: 2px; --h: 46%; }
/* larger standalone skyline (placeholder wells, stages, specimens) */
.sky--lg { height: 64px; transform: none; }
.sky--lg :is(i,.is-i):nth-child(1) { --w: 9px; --g: 7px; clip-path: polygon(0 0, 100% 9px, 100% 100%, 0 100%); }
.sky--lg :is(i,.is-i):nth-child(2) { --w: 7px; --h: calc(100% - 16px); --g: 3px; clip-path: polygon(0 0, 100% 7px, 100% 100%, 0 100%); }
.sky--lg :is(i,.is-i):nth-child(3) { --w: 9px; --h: 64%; --g: 5px; }
.sky--lg :is(i,.is-i):nth-child(4) { --w: 5px; --h: 47%; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 44px; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 18px;
  padding: 1.25rem 1.9rem 1.25rem 2.15rem;
  border: 0; border-radius: 1px; margin: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .8s var(--ease), color .8s var(--ease);
}
.btn::after { /* single brushed sheen pass on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 240, 212, .2) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 1.6s var(--ease);
}
.btn__line { flex: none; width: 22px; height: 1px; background: currentColor; transition: width .8s var(--ease); }
.btn:hover, .btn:focus-visible, .btn.is-hover { background: var(--btn-bg-h); color: var(--btn-fg-h); }
.btn:hover::after, .btn:focus-visible::after, .btn.is-hover::after { transform: translateX(120%); }
.btn:hover .btn__line, .btn:focus-visible .btn__line, .btn.is-hover .btn__line { width: 40px; }
.btn--on-dark { --btn-bg: var(--band-btn-bg); --btn-fg: var(--band-btn-fg); --btn-bg-h: var(--band-btn-bg-h); --btn-fg-h: var(--band-btn-fg-h); --focus: var(--band-focus); }
.btn--sm { gap: 14px; padding: .95rem 1.3rem .95rem 1.5rem; font-size: .68rem; letter-spacing: .2em; }
.btn--sm .btn__line { width: 16px; }
.btn--sm:hover .btn__line, .btn--sm:focus-visible .btn__line { width: 28px; }

/* ---------- Site header (brand bar: monogram, primary navigation, Book a Consultation) ---------- */
.site-head {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px clamp(20px, 2.6vw, 40px);
  padding: clamp(18px, 2.4vw, 30px) 0;
}
.site-head::after { /* hairline drawn left to right on load */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line); transform-origin: left;
}
.brand { display: block; line-height: 0; margin-right: auto; text-decoration: none; }
.brand .lx-logo { width: clamp(40px, 3.6vw, 50px); }
.site-nav :is(ul,.is-ul) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.2vw, 34px); }
.site-nav a {
  position: relative; display: inline-block; padding: .7rem 0;
  font: 500 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: color .7s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--brushed);
  transition: width 1s var(--ease-io);
}
.site-nav a[aria-current="page"] { color: var(--brass-text); }
.site-nav a[aria-current="page"]::after { width: 34%; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--brass-text); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; }
.menu-btn {
  display: none;
  appearance: none; margin: 0; cursor: pointer;
  align-items: center; gap: 10px;
  padding: .72rem .95rem;
  border: 1px solid var(--line-strong); border-radius: 1px;
  background: transparent; color: var(--ink);
  font: 500 .64rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.menu-btn__bars { display: grid; gap: 4px; width: 16px; }
.menu-btn__bars :is(i,.is-i) { display: block; height: 1px; background: currentColor; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-btn__bars :is(i,.is-i):nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars :is(i,.is-i):nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(48px, 7vw, 128px);
  align-items: end;
  padding: clamp(72px, 10vw, 152px) 0 clamp(40px, 5vw, 72px);
}
.hero__copy { max-width: 40rem; padding-bottom: clamp(0px, 2.4vw, 40px); }
.hero__where { flex-wrap: wrap; row-gap: 8px; }
.hero__where .dot-sep { padding: 0 .2em; }
.hero__media { margin: 0; justify-self: end; width: min(100%, 470px); padding: 0 0 0 24px; }
.hero__media :is(figcaption,.is-figcaption) { justify-content: space-between; margin-top: 44px; }
.vidctl {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: .45rem 0; margin: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  border-bottom: 1px solid var(--brass);
  transition: color .5s var(--ease);
}
.vidctl:hover { color: var(--brass-text); }

/* ---------- Image treatments ---------- */
/* the LD frame: the image takes the D's bowl as its one rounded corner */
.ld-frame { position: relative; --r: clamp(120px, 14vw, 196px); }
/* the mark's outer contour (L stem, foot, bowl) as an ink hairline, offset down-left (hero only) */
.ld-frame::before {
  content: ""; position: absolute; z-index: 0;
  top: 24px; right: 24px; bottom: -24px; left: -24px;
  border: 1px solid var(--ink); border-top: 0;
  border-bottom-right-radius: var(--r);
  opacity: .42;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
}
.ld, .frame { position: relative; z-index: 1; overflow: hidden; background: var(--surface-2); isolation: isolate; }
.ld { --r: clamp(84px, 10vw, 150px); border-radius: 0 0 var(--r) 0; }
.ld-frame .ld { --r: inherit; }
/* metallic keyline set inside, parallel to the edge, like the trim inside the L and D */
.ld::after, .keyline::after {
  content: ""; position: absolute; inset: 12px; z-index: 2;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.ld::after { border-radius: 0 0 calc(var(--r) - 12px) 0; }
/* the chamfered peak, used once per composition */
.cham { --c: clamp(30px, 3.4vw, 48px); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); }
.ld img, .ld video, .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}
.ld--hero { aspect-ratio: 4 / 5.15; }
.ld--hero video { object-position: 50% 50%; filter: saturate(.62) sepia(.12); }
/* caption: tracked capitals led by a short metal dash */
.cap, .hero__media :is(figcaption,.is-figcaption) {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  font: 500 .66rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
}
.cap::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--brass); }
.stock-note { margin: clamp(36px, 4vw, 56px) 0 0; font-size: .86rem; color: var(--muted); }

/* ---------- Section head ---------- */
.sec-head {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px;
  margin-bottom: clamp(44px, 6vw, 92px);
}
.sec-head .sky { margin-left: -18px; }
.sec-num { min-width: 1.6em; font: italic 400 1.55rem/1 var(--serif); color: var(--brass-text); }
.sec-head .eyebrow { margin: 0; }
.sec-head .eyebrow::before { display: none; }
.rule { display: block; height: 1px; background: var(--line); transform-origin: left; }
.sec-intro {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 32px clamp(40px, 6vw, 112px); align-items: end;
}

/* ---------- Cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(16px, 2.4vw, 36px); }
.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:focus-visible { outline-offset: 8px; }
.card__media { aspect-ratio: 4 / 5; }
.card__body { padding-top: 22px; }
.card__tag {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font: 500 .66rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
}
.card__tag::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--brass); }
.card__title { margin: 0 0 12px; font: 400 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.12 var(--serif); color: var(--ink); transition: color .7s var(--ease); }
.card__title em { font-style: italic; color: var(--brass-text); }
.card__text { margin: 0 0 14px; max-width: 26em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
.card__link:hover .card__title, .card__link:focus-visible .card__title { color: var(--brass-text); }
.card__link:hover .textlink, .card__link:focus-visible .textlink { color: var(--brass-text); }
.card__link:hover .textlink::after, .card__link:focus-visible .textlink::after { width: 100%; }
/* featured card: one per section, takes the quarter-round and the keyline */
.card--feature { margin-bottom: clamp(56px, 7vw, 104px); }
.card--feature .card__link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(32px, 5vw, 96px); align-items: center; }
.card--feature .card__media { aspect-ratio: 5 / 4; }
.card--feature .card__title { font-weight: 300; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1.04; margin-bottom: 18px; }
/* placeholder entries (Portfolio until real photography exists) */
.ph-cards { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.ph-card { position: relative; padding: 12px 12px 26px; background: var(--surface); border: 1px solid var(--line); }
.ph-card__well { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 22px; background: var(--surface-2); overflow: hidden; }
.ph-card__well .sky { opacity: .8; }
.ph-card__body { padding: 22px 12px 0; }
.ph-tag { display: inline-block; margin: 0 0 10px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.ph-card .card__title { font-size: 1.55rem; }
.ph-card .card__text { margin: 0; }

/* ---------- Services index rows ---------- */
.svc { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.svc a {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1.25fr) 64px;
  align-items: baseline; gap: 12px 28px;
  padding: clamp(24px, 2.6vw, 36px) 0;
  border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.svc a::before { /* metallic line draws across on hover */
  content: ""; position: absolute; left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--brushed);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease-io);
}
.svc__n { font: italic 300 1.5rem/1 var(--serif); color: var(--taupe); }
.svc__name { font: 400 clamp(1.65rem, 1.2rem + 1.3vw, 2.45rem)/1.1 var(--serif); color: var(--ink); transition: transform 1s var(--ease), color .7s var(--ease); }
.svc__desc { font-size: .98rem; line-height: 1.65; color: var(--muted); }
.svc__arrow {
  justify-self: end; align-self: center;
  position: relative; width: 28px; height: 1px;
  background: currentColor; color: var(--muted);
  transition: width .9s var(--ease), color .7s var(--ease);
}
.svc__arrow::after {
  content: ""; position: absolute; right: 0; top: -3.5px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.svc a:hover::before, .svc a:focus-visible::before { transform: scaleX(1); }
.svc a:hover .svc__name, .svc a:focus-visible .svc__name { transform: translateX(10px); }
.svc a:hover .svc__arrow, .svc a:focus-visible .svc__arrow { width: 52px; color: var(--brass-text); }
.svc a:focus-visible { outline-offset: -2px; }


/* ---------- Always-dark band (process + consultation CTA) ---------- */
.band {
  position: relative; overflow: hidden;
  background: var(--band-bg); color: var(--band-ink);
  padding: var(--section) 0 clamp(64px, 8vw, 112px);
  margin-bottom: var(--section);
  --logo-ink: var(--band-logo-ink); --logo-accent: var(--band-logo-accent);
  --focus: var(--band-focus);
}
.band::before, .site-foot::before { /* thin metallic keyline at the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--brushed); opacity: .7;
}
.steps-wrap { position: relative; margin-top: clamp(60px, 7vw, 108px); }
.band__sky { position: absolute; right: clamp(0px, 2vw, 28px); bottom: 100%; pointer-events: none; }
.band__sky-in {
  display: flex; align-items: flex-end; height: clamp(104px, 10.5vw, 152px); opacity: .62;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .12) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .12) 100%);
}
.band__sky-in :is(i,.is-i) { display: block; width: var(--w); height: var(--h); margin-right: var(--g, 0); background: var(--band-brass); }
.band__sky-in :is(i,.is-i):nth-child(1) { --w: 14px; --h: 100%; --g: 11px; clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 100%); }
.band__sky-in :is(i,.is-i):nth-child(2) { --w: 11px; --h: calc(100% - 25px); --g: 4px; clip-path: polygon(0 0, 100% 11px, 100% 100%, 0 100%); }
.band__sky-in :is(i,.is-i):nth-child(3) { --w: 14px; --h: 64%; --g: 7px; }
.band__sky-in :is(i,.is-i):nth-child(4) { --w: 7px; --h: 47%; }
.band .wrap { z-index: 1; }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 28px; margin-bottom: clamp(48px, 6vw, 88px); }
.band__logo { height: clamp(88px, 8.4vw, 116px); }
.band .eyebrow { margin: 0; color: var(--band-muted); }
.band .h2 { color: var(--band-ink); max-width: 9.6em; }
.band .h2 em, .band__lede em { color: var(--band-brass); }
.steps {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 52px);
}
.steps::before, .steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.steps::before { background: var(--band-line); }
.steps::after { background: var(--brushed); transform-origin: left; opacity: .85; }
.steps :is(li,.is-li) { position: relative; padding-top: clamp(30px, 3vw, 42px); }
.steps :is(li,.is-li)::before { /* a single chamfered bar standing on the line */
  content: ""; position: absolute; top: -11px; left: 0;
  width: 5px; height: 11px;
  background: var(--band-brass);
  clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%);
}
.step__n { display: block; font: italic 300 1.6rem/1 var(--serif); color: var(--band-brass); }
.steps h3, .steps h4 { margin: 16px 0 12px; font: 400 clamp(1.6rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); color: var(--band-ink); }
.steps p:where(:not(.lx-np)) { margin: 0; max-width: 22em; font-size: .97rem; line-height: 1.7; color: var(--band-muted); }
.band__cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 28px 48px;
  margin-top: clamp(80px, 9vw, 136px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--band-line);
}
.band__lede { margin: 0; font: 300 clamp(2rem, 1.3rem + 2.2vw, 3.2rem)/1.04 var(--serif); color: var(--band-ink); }
.band__contact { grid-column: 1 / -1; margin: 0; font-size: .9rem; line-height: 1.9; color: var(--band-muted); }
.band__contact .sep { margin: 0 .7em; color: var(--band-brass); }
.ph { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--band-brass); white-space: nowrap; }

/* ---------- Forms (placeholder styling for Book a Consultation and Contact) ---------- */
.form-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; }
.form-intro .prose { margin-bottom: 22px; }
.ph-flag { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 .62rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.ph-flag::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--brass); }
.form-panel {
  --r: clamp(64px, 7vw, 112px);
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 2.8vw, 36px);
  padding: clamp(28px, 4vw, 60px) clamp(24px, 4vw, 60px) clamp(40px, 5vw, 72px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r) 0;
}
.form-panel::before { /* metallic keyline set inside the panel */
  content: ""; position: absolute; inset: 8px;
  border: 1px solid var(--brass); opacity: .5;
  border-radius: 0 0 calc(var(--r) - 8px) 0;
  pointer-events: none;
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 2.8vw, 36px) clamp(20px, 2.4vw, 32px); }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.field__label { font: 500 .66rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); transition: color .5s var(--ease); }
.field__label .opt { margin-left: .6em; letter-spacing: .16em; color: var(--muted); }
.field__input {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; min-width: 0; margin: 0;
  padding: .7rem 0 .75rem;
  border: 0; border-bottom: 1px solid var(--muted); border-radius: 0;
  background: transparent; color: var(--text);
  font: 400 1.0625rem/1.5 var(--sans);
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.field__input::placeholder { color: var(--muted); opacity: 1; }
textarea.field__input { min-height: 8.5rem; resize: vertical; line-height: 1.65; }
.field__select { position: relative; }
.field__select .field__input { padding-right: 2rem; cursor: pointer; }
.field__select::after { /* chevron, as the switcher's */
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg); pointer-events: none;
}
.field__input:focus, .field__input.is-focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.field:focus-within .field__label, .field.is-focus .field__label { color: var(--brass-text); }
.field__hint { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.field__error { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; color: var(--error); }
.field__error b { font-weight: 500; }
.field.is-error .field__input { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; font-size: .94rem; line-height: 1.6; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-top: 6px; }
.form-status { margin: 0; font-size: .86rem; color: var(--muted); min-height: 1.5em; }
.field-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); }

/* ---------- Placeholder stages (3D configurator, cart, checkout) ---------- */
.stage {
  --r: clamp(84px, 10vw, 150px);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9; min-height: 520px;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 64px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r) 0;
  text-align: center;
}
.stage::before { /* metallic keyline set inside, following the bowl */
  content: ""; position: absolute; inset: 12px; z-index: 1;
  border: 1px solid var(--brass); opacity: .6;
  border-radius: 0 0 calc(var(--r) - 12px) 0;
  pointer-events: none;
}
.stage::after { /* a quiet ground plane: hairlines receding toward a horizon */
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -8%; height: 46%; z-index: -1;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px);
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 92%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 92%);
}
.stage__inner { position: relative; z-index: 2; display: grid; justify-items: center; max-width: 34rem; }
.stage__inner .sky { margin-bottom: 26px; }
.stage__inner .eyebrow { margin-bottom: 18px; }
.stage__inner .eyebrow::before { display: none; }
.stage__title { margin: 0 0 18px; font: 300 clamp(2.2rem, 1.4rem + 2.8vw, 3.8rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.stage__title em { font-style: italic; font-weight: 400; color: var(--brass-text); }
.stage__text { margin: 0 0 22px; font-size: 1rem; line-height: 1.75; color: var(--muted); }
.stage__spec { position: absolute; left: clamp(24px, 2.4vw, 32px); bottom: clamp(22px, 2.2vw, 30px); z-index: 2; font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: left; }
.ph-panels { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(16px, 2.4vw, 36px); }
.ph-panel { position: relative; padding: clamp(28px, 3.4vw, 48px); background: var(--surface); border: 1px solid var(--line); }
.ph-panel::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
.ph-panel .eyebrow { margin-bottom: 16px; }
.ph-panel .eyebrow::before { display: none; }
.ph-panel__title { margin: 0 0 10px; font: 300 clamp(2rem, 1.5rem + 1.4vw, 2.8rem)/1.04 var(--serif); color: var(--ink); }
.ph-panel__text { margin: 0 0 28px; font-size: .95rem; line-height: 1.7; color: var(--muted); }
.ph-table { display: grid; margin-bottom: 26px; border-top: 1px solid var(--line); }
.ph-row { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 5.5rem; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ph-row--head { padding: 12px 0; font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.ph-row--head span:not(:first-child) { text-align: right; }
.bar { display: block; height: 10px; width: var(--w, 100%); background: var(--surface-2); justify-self: start; }
.ph-row .bar:not(:first-child) { justify-self: end; }
.ph-checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px clamp(24px, 3vw, 40px); margin-bottom: 26px; }
.ph-fields { display: grid; gap: 22px; }
.ph-field { display: grid; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ph-field .bar:first-child { height: 7px; }
.ph-summary { display: grid; align-content: start; gap: 14px; padding: 18px; border: 1px solid var(--line); }
.ph-summary .spec-label { margin: 0 0 4px; }

/* ---------- Footer (always-dark band treatment) ---------- */
.site-foot {
  position: relative; overflow: hidden;
  background: var(--band-bg); color: var(--band-muted);
  padding: clamp(72px, 9vw, 128px) 0 clamp(28px, 3vw, 40px);
  --logo-ink: var(--band-logo-ink); --logo-accent: var(--band-logo-accent);
  --focus: var(--band-focus);
}
.foot__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end; padding-bottom: clamp(48px, 6vw, 88px); }
.foot__logo { height: clamp(88px, 8.4vw, 116px); }
.foot__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 24px 44px; }
.foot__cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 52px); padding: clamp(40px, 4vw, 56px) 0; border-top: 1px solid var(--band-line); }
.foot__cols p:where(:not(.lx-np)), .foot__cols :is(ul,.is-ul) { margin: 0; font-size: .92rem; line-height: 1.9; color: var(--band-muted); }
.foot__cols .foot__h { margin: 0 0 16px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--band-ink); }
.foot__cols :is(ul,.is-ul) { list-style: none; padding: 0; }
.foot__cols a { color: var(--band-muted); text-decoration: none; transition: color .6s var(--ease); }
.foot__cols a:hover, .foot__cols a:focus-visible { color: var(--band-brass); }
.foot__sky { position: absolute; right: 0; top: 0; transform: translateY(-100%); opacity: .7; pointer-events: none; }
.foot__sky .sky :is(i,.is-i) { background: var(--band-brass); }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 24px; border-top: 1px solid var(--band-line); }
.foot__base p:where(:not(.lx-np)) { margin: 0; font: 500 .62rem/1.9 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--band-muted); }
.foot__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot__legal a { font: 500 .62rem/1.9 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--band-muted); text-decoration: none; transition: color .6s var(--ease); }
.foot__legal a:hover, .foot__legal a:focus-visible { color: var(--band-brass); }


/* ---------- Motion (only when welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 1.6s var(--ease) both; animation-delay: var(--d, 0s); }
  .site-head::after { animation: draw 2s var(--ease-io) .1s both; }
  .ld-frame::before { animation: drawDown 2.6s var(--ease-io) .7s both; }
  .hero .ld-frame .ld::after { animation: fade 2s var(--ease) 1.9s both; }
  .ld--hero { animation: fade 2.2s var(--ease) .35s both; }
  .ld--hero video { animation: settle 6s var(--ease) .35s both; }
  .band__sky-in { animation: breathe 10s ease-in-out infinite; }


  .zoom img { transition: transform 2s var(--ease), filter 1.4s var(--ease); }
  .zoom:hover img, .card__link:hover .zoom img, .card__link:focus-visible .zoom img { transform: scale(1.045); filter: var(--img-filter-h); }

}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes breathe { 0%, 100% { opacity: .5; } 50% { opacity: .75; } }
@keyframes barRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .site-nav { display: none; order: 5; flex-basis: 100%; }
  .site-head[data-menu="true"] .site-nav { display: block; }
  .site-nav :is(ul,.is-ul) { flex-direction: column; gap: 0; padding: 8px 0 6px; }
  .site-nav :is(li,.is-li) { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: 1.05rem 0; }
  .menu-btn { display: inline-flex; }
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__media { justify-self: start; width: min(100%, 424px); }
  .sec-intro, .card--feature .card__link, .form-wrap, .ph-panels { grid-template-columns: minmax(0, 1fr); }
  .cards, .ph-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc a { grid-template-columns: 3.4rem minmax(0, 1fr) 56px; }
  .svc__desc { grid-column: 2 / 3; grid-row: 2; }
  .svc__arrow { grid-column: 3; grid-row: 1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 64px; }
  .steps::before, .steps::after, .band__sky { display: none; }
  .steps :is(li,.is-li) { border-top: 1px solid var(--band-line); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .foot__cta { justify-content: flex-start; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { aspect-ratio: auto; min-height: 480px; }
}
@media (max-width: 600px) {
  .site-head { gap: 10px; }
  .btn--sm { padding: .85rem 1rem; letter-spacing: .14em; }
  .btn--sm .btn__line { display: none; }
  .menu-btn { padding: .72rem .8rem; }
  .menu-btn__txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn:not(.btn--sm) { white-space: normal; text-align: left; line-height: 1.5; padding-top: 1.05rem; padding-bottom: 1.05rem; }
  .foot__sky { display: none; }
  .hero__where .dot-sep { display: none; }
  .hero__where .nw + .dot-sep + .nw { flex-basis: 100%; padding-left: 50px; }
  .cards, .ph-cards, .field-row, .ph-checkout, .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .svc a { grid-template-columns: 2.6rem minmax(0, 1fr) 40px; gap: 10px 14px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .band__cta { grid-template-columns: minmax(0, 1fr); }
  .band__cta .btn { justify-self: start; }
  .band__contact .sep { display: none; }
  .band__contact span.line { display: block; }
  .stage { min-height: 460px; padding-bottom: 72px; }
  .ph-row { grid-template-columns: minmax(0, 1fr) 3rem 4.5rem; gap: 12px; }
}

@media (max-width: 360px) {
  .btn--sm { padding: .8rem .75rem; font-size: .62rem; letter-spacing: .08em; }
}

/* ==========================================================================
   Part 2. Approved components restored from design-patterns.html
   (not needed by the home page, available to every inner page)
   ========================================================================== */
/* small tracked label: placeholder summaries, table heads, form group labels */
.spec-label { display: block; margin: 0 0 14px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* editorial image gallery: a tall lead (.ld), a wide frame, a portrait frame (often .cham) and a small square,
   on a 12-column grid (design-patterns names: g--stair, g--facade, g--bath, g--marble) */
.gallery {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 36px); row-gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.g { margin: 0; }
.g--lead  { grid-column: 1 / 6;  grid-row: 1 / 3; }
.g--lead .ld, .g--lead .frame { aspect-ratio: 3 / 4.5; }
.g--wide  { grid-column: 7 / 13; grid-row: 1; }
.g--wide .frame { aspect-ratio: 3 / 2; }
.g--tall  { grid-column: 7 / 10; grid-row: 2; }
.g--tall .frame { aspect-ratio: 3 / 4; }
.g--small { grid-column: 10 / 13; grid-row: 2; align-self: end; padding-left: clamp(0px, 2vw, 28px); }
.g--small .frame { aspect-ratio: 1; }

/* numbered notes: Roman numeral, tracked label, short muted text (4 per row; .anatomy--3 for three) */
.anatomy { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 2.4vw, 36px); counter-reset: a; }
.anatomy--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anatomy :is(li,.is-li) { padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.6; color: var(--muted); counter-increment: a; }
.anatomy :is(li,.is-li)::before { content: counter(a, upper-roman); display: block; margin-bottom: 8px; font: italic 400 1.2rem/1 var(--serif); color: var(--brass-text); }
.anatomy b { display: block; margin-bottom: 4px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }

/* the D's bowl on the deep ground, with its keyline: a small always-dark panel
   (testimonial placeholders, a single note); once per composition */
.bowl {
  --r: clamp(64px, 7vw, 112px);
  position: relative;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(40px, 5vw, 64px);
  background: var(--band-bg); color: var(--band-ink);
  border-radius: 0 0 var(--r) 0;
  --focus: var(--band-focus);
}
.bowl::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--band-brass); opacity: .75; border-radius: 0 0 calc(var(--r) - 10px) 0; pointer-events: none; }
.bowl .eyebrow { color: var(--band-muted); }
.bowl .h2, .bowl .h3 { color: var(--band-ink); }
.bowl .h2 em, .bowl .h3 em { color: var(--band-brass); }
.bowl .prose { color: var(--band-muted); }

/* a single chamfered bar standing on a brushed rule (a quiet divider) */
.step-bar { position: relative; width: 64px; height: 1px; background: var(--brushed); }
.step-bar::before { content: ""; position: absolute; bottom: 1px; left: 0; width: 5px; height: 11px; background: var(--brass); clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); }

@media (max-width: 1024px) {
  .anatomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anatomy--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .anatomy { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .g--lead  { grid-column: 1 / 6; grid-row: 1; }
  .g--wide  { grid-column: 1 / 7; grid-row: 2; }
  .g--tall  { grid-column: 1 / 5; grid-row: 3; }
  .g--small { grid-column: 5 / 7; grid-row: 3; }
  .g--small :is(figcaption,.is-figcaption) { display: none; }
}

/* ==========================================================================
   Part 3. Page-level utilities (skip link, screen-reader text, masthead,
   section rhythm, light-ground placeholder tag, contact line, reveal)
   ========================================================================== */
html { scroll-behavior: auto; }
[id] { scroll-margin-top: 24px; }
main { display: block; }
.skip {
  position: absolute; left: 16px; top: -120px; z-index: 120;
  padding: .9rem 1.2rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* masthead: the brand bar inside the 1360px column */
.masthead { position: relative; z-index: 30; }
.masthead .site-head .btn--sm { flex: none; }

/* sections on the ground */
.sec { padding-bottom: var(--section); }
.sec-head > .eyebrow { margin: 0; }
h2.eyebrow { font-weight: 500; }

/* placeholder tag on light grounds (the band uses .ph) */
.ph-l { font: 500 .66rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); white-space: nowrap; }

/* contact line on light grounds */
.contact-line { margin: 0; font-size: .92rem; line-height: 1.9; color: var(--muted); }
.contact-line .sep { margin: 0 .7em; color: var(--brass); }

.vidctl:focus-visible { outline-offset: 3px; }

/* the poster stays visible as a still when the film is paused or motion is reduced */
video.hero-video { background: var(--band-bg); }

/* reveal: the resting state is always visible; only content below the fold is held back,
   and only when motion is welcome and the observer is running */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity 1.5s var(--ease), transform 1.5s var(--ease); transition-delay: var(--d, 0s); }
  .reveal.is-pending { opacity: 0; transform: translateY(26px); }
  .reveal .rule, .reveal.steps::after, .reveal .draw, .reveal.draw { transition: transform 2s var(--ease-io) .35s; }
  .reveal.is-pending .rule, .reveal.is-pending.steps::after, .reveal.is-pending .draw, .reveal.is-pending.draw { transform: scaleX(0); }
  .reveal .sky :is(i,.is-i), .band__sky.reveal :is(i,.is-i) { transform-origin: bottom; transition: transform 1.4s var(--ease); }
  .reveal .sky :is(i,.is-i):nth-child(1), .band__sky.reveal :is(i,.is-i):nth-child(1) { transition-delay: 1.5s; }
  .reveal .sky :is(i,.is-i):nth-child(2), .band__sky.reveal :is(i,.is-i):nth-child(2) { transition-delay: 1.62s; }
  .reveal .sky :is(i,.is-i):nth-child(3), .band__sky.reveal :is(i,.is-i):nth-child(3) { transition-delay: 1.74s; }
  .reveal .sky :is(i,.is-i):nth-child(4), .band__sky.reveal :is(i,.is-i):nth-child(4) { transition-delay: 1.86s; }
  .reveal.is-pending .sky :is(i,.is-i), .band__sky.reveal.is-pending :is(i,.is-i) { transform: scaleY(0); }
}
@media print { .reveal.is-pending { opacity: 1 !important; transform: none !important; } .pal { display: none; } }

/* ==========================================================================
   Part 4. Site components from the approved home layout (Quiet Gallery),
   shared so every page can reuse them
   ========================================================================== */
/* statement: one sentence in a wide, airy measure, with a short foot note in the right half */
.statement {
  margin: 0; max-width: 24em;
  font: 300 clamp(1.95rem, 1.2rem + 2.35vw, 3.35rem)/1.2 var(--serif);
  letter-spacing: -.008em; color: var(--ink);
  text-indent: calc(2.48rem + 18px);
  text-wrap: pretty;
}
.statement em { font-style: italic; font-weight: 400; color: var(--brass-text); }
.statement__foot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px clamp(40px, 6vw, 112px);
  margin-top: clamp(56px, 7vw, 104px);
}
.statement__foot > div { grid-column: 2; }
.statement__foot .prose { margin-bottom: 18px; }

/* editorial list with image reveal: the services index rows (.svc) beside one .ld figure per row;
   on hover or focus the row's image shows (the first row's by default); inline on touch and narrow screens */
.gsvc {
  position: relative; margin-top: clamp(56px, 7vw, 104px);
  display: grid; grid-template-columns: minmax(0, 1fr) 36%; column-gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
.gsvc .svc { grid-column: 1; }
.gsvc .svc a { grid-template-columns: 4.5rem minmax(0, 1fr) 64px; padding: clamp(28px, 3vw, 42px) 0; row-gap: 10px; }
.gsvc .svc__name { grid-column: 2; grid-row: 1; }
.gsvc .svc__desc { grid-column: 2; grid-row: 2; max-width: 30em; }
.gsvc .svc__arrow { grid-column: 3; grid-row: 1 / 3; }
.gsvc__item { transition: opacity 1.5s var(--ease); transition-delay: var(--d, 0s); }
.gsvc.is-pending .gsvc__item { opacity: 0; }
.gsvc__fig {
  position: absolute; top: 0; right: 0; width: 36%; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 1s var(--ease);
}
.gsvc__fig .cap { opacity: 0; transition: opacity .6s var(--ease); }
.gsvc__fig .ld { aspect-ratio: 4 / 5; }
.gsvc__fig .cap { margin-top: 18px; }
.gsvc__fig img { transform: scale(1.045); transition: transform 2s var(--ease), filter 1.4s var(--ease); }
.gsvc__item:hover .gsvc__fig, .gsvc__item:focus-within .gsvc__fig, .gsvc:not(:has(.gsvc__item:hover, .gsvc__item:focus-within)) .gsvc__item:first-child .gsvc__fig {
  opacity: 1;
}
.gsvc__item:hover .gsvc__fig .cap, .gsvc__item:focus-within .gsvc__fig .cap, .gsvc:not(:has(.gsvc__item:hover, .gsvc__item:focus-within)) .gsvc__item:first-child .gsvc__fig .cap { opacity: 1; transition-delay: .3s; }
.gsvc__item:hover .gsvc__fig img, .gsvc__item:focus-within .gsvc__fig img, .gsvc:not(:has(.gsvc__item:hover, .gsvc__item:focus-within)) .gsvc__item:first-child .gsvc__fig img { transform: none; filter: var(--img-filter-h); }

/* the dark band: logo keeps its size; a band followed by the configurator teaser closes up to it */
.band .band__logo { flex: none; }
.band:has(+ .dyp-band) { margin-bottom: 0; }
.band + .dyp-band { border-top: 0; }

/* Design Your Project teaser band: copy beside a small placeholder stage, on the surface tone */
.dyp-band {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(80px, 10vw, 152px) 0;
  margin-bottom: var(--section);
}
.dyp-band__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px clamp(40px, 6vw, 112px); align-items: center; }
.dyp-band .sec-head { grid-template-columns: auto auto minmax(0, 1fr); margin-bottom: clamp(32px, 4vw, 56px); }
.dyp-band .h2 { margin: 0 0 clamp(24px, 2.6vw, 34px); }
.dyp-band .prose { margin-bottom: 24px; }
.dyp-band .ph-flag { margin-bottom: 28px; }
.stage.mini-stage { aspect-ratio: 5 / 4; min-height: 0; background: var(--bg); padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.mini-stage__t { margin: 0 0 12px; font: 300 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1.05 var(--serif); color: var(--ink); }
.mini-stage__t em { font-style: italic; font-weight: 400; color: var(--brass-text); }
.mini-stage .stage__text { margin: 0; max-width: 22em; font-size: .95rem; }
/* the live Design Your Project band: copy, three steps and a button beside the 3D house teaser */
.dyp-band--live .dyp-band__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.dyp-band--live .prose { margin-bottom: 28px; }
.dyp-steps { display: grid; gap: 12px; max-width: 30em; margin: 0 0 clamp(32px, 3.4vw, 44px); padding-left: 1.9em; color: var(--text); font-size: .98rem; line-height: 1.6; }
.dyp-steps li { padding-left: .5em; }
.dyp-steps li::marker { font: 400 1.15rem/1 var(--serif); font-style: italic; color: var(--brass-text); }
@media (max-width: 1024px) { .dyp-band--live .dyp-band__in { grid-template-columns: minmax(0, 1fr); } }

/* placeholder entries hung like a gallery wall (three, staggered) */
.ph-cards--hang { align-items: start; }
.ph-cards--hang :is(li,.is-li):nth-child(2) { margin-top: clamp(0px, 7vw, 112px); }
.ph-cards--hang :is(li,.is-li):nth-child(3) { margin-top: clamp(0px, 3.5vw, 56px); }
.ph-cards--hang .ph-card__well { aspect-ratio: 4 / 5; }

/* closing consultation call to action: centered skyline, eyebrow, display heading, actions, contact line */
.consult { padding-bottom: var(--section); text-align: center; }
.consult__in { display: grid; justify-items: center; max-width: 52rem; margin: 0 auto; }
.consult .sky--lg { margin-bottom: clamp(36px, 4vw, 56px); }
.consult .eyebrow { justify-content: center; }
.consult .eyebrow::after { content: ""; flex: none; width: 36px; height: 1px; background: var(--brushed); }
.consult .prose { margin: 0 auto clamp(40px, 4.4vw, 60px); max-width: 32em; }
.consult .actions { justify-content: center; }
.consult .contact-line { margin-top: clamp(40px, 5vw, 64px); }

/* footer columns: stacked paragraphs */
.foot__cols p:where(:not(.lx-np)) + p:where(:not(.lx-np)) { margin-top: 14px; }

@media (max-width: 1024px) {
  .statement__foot { grid-template-columns: minmax(0, 1fr); }
  .statement__foot > div { grid-column: 1; max-width: 34em; }
  .gsvc .svc a { grid-template-columns: 3.4rem minmax(0, 1fr) 56px; }
  .dyp-band__in { grid-template-columns: minmax(0, 1fr); }
  .stage.mini-stage { aspect-ratio: auto; min-height: 380px; min-width: 0; }
  .ph-cards--hang :is(li,.is-li):nth-child(n) { margin-top: 0; }
  .ph-cards--hang :is(li,.is-li):nth-child(3):last-child { grid-column: 1 / -1; }
  .ph-cards--hang :is(li,.is-li):nth-child(3):last-child .ph-card__well { aspect-ratio: 21 / 9; }
}
/* touch screens and narrow widths: each row shows its image inline */
@media (hover: none), (max-width: 1024px) {
  .gsvc { grid-template-columns: minmax(0, 1fr); }
  .gsvc__fig, .gsvc__item:hover .gsvc__fig, .gsvc__item:focus-within .gsvc__fig {
    position: static; width: auto; opacity: 1; pointer-events: auto;
    margin: 0 0 clamp(28px, 4vw, 44px) calc(3.4rem + 28px); transition: none;
  }
  .gsvc__fig img { transform: none; }
  .gsvc__fig .ld { aspect-ratio: 16 / 10; border-radius: 0; }
  .gsvc__fig .ld::after { border-radius: 0; }
  .gsvc__fig .cap { margin-top: 14px; opacity: 1; }
}
@media (hover: none) and (min-width: 1025px) {
  .gsvc .svc a { grid-template-columns: 4.5rem minmax(0, 1fr) 64px; }
  .gsvc__fig { margin-left: calc(4.5rem + 28px); max-width: 760px; }
}
@media (max-width: 600px) {
  .ph-cards--hang .ph-card__well { aspect-ratio: 4 / 3; }
  .statement { text-indent: 0; }
  .gsvc .svc a { grid-template-columns: 2.6rem minmax(0, 1fr) 40px; gap: 8px 14px; }
  .gsvc__fig, .gsvc__item:hover .gsvc__fig, .gsvc__item:focus-within .gsvc__fig { margin-left: 0; }
  .gsvc__fig .ld { aspect-ratio: 4 / 3; }
  .ph-cards--hang :is(li,.is-li):nth-child(3):last-child .ph-card__well { aspect-ratio: 4 / 3; }
  .consult { text-align: left; }
  .consult__in { justify-items: start; }
  .consult .eyebrow { justify-content: flex-start; }
  .consult .eyebrow::after { display: none; }
  .consult .actions { justify-content: flex-start; }
  .consult .prose { margin-left: 0; }
}

/* ==========================================================================
   Part 5. Site chrome: Services submenu, cart link, current-page states,
   footer address. Built from the header and floating-panel patterns.
   ========================================================================== */
/* Services: a small chevron after the label; the section stays marked on its five sub-pages */
.nav-chev {
  display: inline-block; width: 5px; height: 5px; margin-left: .8em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .5s var(--ease);
}
.site-nav a.is-section { color: var(--brass-text); }
.site-nav a.is-section::after { width: 34%; }

/* submenu links: serif titles with italic numerals, as the services index rows */
.site-nav .subnav { list-style: none; margin: 0; padding: 0; }
.site-nav .subnav :is(li,.is-li) { border: 0; }
.site-nav .subnav a {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline;
  padding: .55rem 0;
  font: 400 1.3rem/1.2 var(--serif); letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.site-nav .subnav a::after { display: none; }
.subnav__n { font: italic 400 1.15rem/1 var(--serif); color: var(--brass-text); }
.subnav__t { display: inline-block; transition: transform 1s var(--ease); }
.site-nav .subnav a:hover, .site-nav .subnav a:focus-visible, .site-nav .subnav a[aria-current="page"] { color: var(--brass-text); }
.site-nav .subnav a:hover .subnav__t, .site-nav .subnav a:focus-visible .subnav__t { transform: translateX(8px); }
.site-nav .subnav a:focus-visible { outline-offset: 2px; }

/* desktop: the submenu is a floating panel under the brand bar's hairline, opening on hover and on keyboard focus.
   Surface ground, 1px line, the floating keyline 4px inside, the panel quarter-round and the floating shadow. */
@media (min-width: 1180px) {
  .site-nav .nav-parent { z-index: 41; }
  .site-nav .subnav {
    --r: clamp(64px, 7vw, 112px);
    position: absolute; z-index: 40; top: 100%;
    display: grid; width: 304px; margin-left: -30px;
    padding: 22px 30px 36px;
    background: var(--surface);
    border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--r) 0;
    box-shadow: 0 28px 56px -30px var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s;
  }
  .site-nav .subnav::before { /* floating keyline, 4px inside, following the bowl */
    content: ""; position: absolute; inset: 4px;
    border: 1px solid var(--brass); opacity: .5;
    border-radius: 0 0 calc(var(--r) - 4px) 0;
    pointer-events: none;
  }
  .site-nav .subnav::after { /* hover bridge from the link down to the panel */
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px;
  }
  .site-nav .has-sub:hover > .subnav, .site-nav .has-sub:focus-within > .subnav {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .site-nav .has-sub:hover > a .nav-chev, .site-nav .has-sub:focus-within > a .nav-chev { transform: translateY(-1px) rotate(-135deg); }
  .site-nav .has-sub.is-closed > .subnav { opacity: 0; visibility: hidden; transform: translateY(8px); transition-delay: 0s; }
  .site-nav .has-sub.is-closed > a .nav-chev { transform: translateY(-3px) rotate(45deg); }
}

/* cart: a discreet bag icon with a visually hidden label */
.cart-link {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 -6px;
  color: var(--ink); text-decoration: none;
  transition: color .7s var(--ease);
}
.cart-link svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.15; overflow: visible; }
.cart-link::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 0; height: 1px; background: var(--brushed);
  transform: translateX(-50%); transition: width 1s var(--ease-io);
}
.cart-link:hover, .cart-link:focus-visible, .cart-link[aria-current="page"], .cart-link.is-section { color: var(--brass-text); }
.cart-link:hover::after, .cart-link:focus-visible::after { width: 20px; }
.cart-link[aria-current="page"]::after, .cart-link.is-section::after { width: 10px; }
.cart-link:focus-visible { outline-offset: 0; }

/* footer: the street address line, and the current page in the sitemap */
.foot__cols :is(address,.is-address) { margin: 0; font-style: normal; font-size: .92rem; line-height: 1.9; color: var(--band-muted); }
.foot__cols :is(address,.is-address) + p:where(:not(.lx-np)) { margin-top: 14px; }
.foot__cols a[aria-current="page"], .foot__legal a[aria-current="page"] { color: var(--band-brass); }
.foot__legal a { display: block; }

/* ==========================================================================
   Part 6. Inner pages: hero, breadcrumbs, split, long-form text, helpers
   ========================================================================== */
/* inner-page hero: eyebrow (or breadcrumbs), the page h1 at display size, a short lead,
   optional actions, and an optional image in the LD frame (quarter-round, keyline, offset contour).
   Shorter than the home film: natural height, content in the upper third, no video. */
.phero { padding: clamp(72px, 10vw, 152px) 0 var(--section); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px clamp(48px, 7vw, 128px); align-items: end; }
.phero__copy { max-width: 40rem; }
.phero .display { margin-bottom: clamp(24px, 2.8vw, 40px); }
.phero .lead { margin-bottom: 0; }
.phero .actions { margin-top: clamp(36px, 4vw, 56px); }
.phero__media { margin: 0; justify-self: end; width: min(100%, 520px); padding: 0 0 24px 24px; }
.phero__media .ld { aspect-ratio: 5 / 4; }
.phero__media .cap { margin-top: 44px; }
.phero--text .phero__grid { grid-template-columns: minmax(0, 1fr); }
.phero--text .phero__copy { max-width: 52rem; }
@media (prefers-reduced-motion: no-preference) {
  .phero .ld-frame .ld::after { animation: fade 2s var(--ease) 1.9s both; }
}

/* breadcrumbs in place of the eyebrow (service sub-pages): same type, links in ink */
.crumbs { margin: 0 0 clamp(24px, 3vw, 40px); }
.crumbs :is(ol,.is-ol) {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px;
  font: 500 .72rem/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}
.crumbs :is(ol,.is-ol)::before { content: ""; flex: none; width: 36px; height: 1px; margin-right: 14px; background: var(--brushed); }
.crumbs :is(li,.is-li) + :is(li,.is-li)::before { content: "/"; content: "/" / ""; margin: 0 .9em; color: var(--brass); }
.crumbs a { color: var(--ink); text-decoration: none; transition: color .6s var(--ease); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--brass-text); }

/* split: one image beside a text block (image left; .split--flip puts it right) */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 112px); align-items: center; }
.split--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.split--flip > .split__media { order: 2; }
.split__media { margin: 0; }
.split__media .ld, .split__media .frame { aspect-ratio: 5 / 4; }
.split__body .h2 { margin-bottom: clamp(24px, 2.6vw, 34px); }
.split__body .prose { margin-bottom: 22px; }

/* long-form text (privacy, terms, accessibility): a readable measure, serif section heads, tracked sub-heads */
.longform { max-width: 42rem; color: var(--text); }
.longform > :first-child { margin-top: 0; }
.longform h2 { margin: 2.4em 0 .7em; font: 400 clamp(1.6rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); color: var(--ink); text-wrap: balance; }
.longform h3 { margin: 2.2em 0 .8em; font: 500 .72rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.longform p:where(:not(.lx-np)), .longform :is(ul,.is-ul), .longform :is(ol,.is-ol) { margin: 0 0 1.15em; }
.longform :is(ul,.is-ul), .longform :is(ol,.is-ol) { padding-left: 1.25em; }
.longform :is(li,.is-li) { margin-bottom: .45em; padding-left: .2em; }
.longform :is(li,.is-li)::marker { color: var(--brass-text); }
.longform strong { font-weight: 500; color: var(--ink); }
.longform a {
  color: var(--brass-text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .34em;
  text-decoration-color: color-mix(in srgb, var(--brass-text) 45%, transparent);
  transition: text-underline-offset .6s var(--ease), text-decoration-color .6s var(--ease);
}
.longform a:hover { text-underline-offset: .18em; text-decoration-color: currentColor; }

/* helpers: a closing text link under a section, and under the dark band's steps */
.sec__more { margin: clamp(48px, 6vw, 80px) 0 0; }
.band__more { margin: clamp(56px, 6vw, 88px) 0 0; }

/* the brand bar folds behind the Menu button below 1180px (the pattern's 1024px fold, extended so the
   Services chevron and the cart link never push the button onto a second row); the Services list opens in full */
@media (max-width: 1179px) {
  .site-nav { display: none; order: 5; flex-basis: 100%; }
  .site-head[data-menu="true"] .site-nav { display: block; }
  .site-nav > :is(ul,.is-ul) { flex-direction: column; gap: 0; padding: 8px 0 6px; }
  .site-nav :is(li,.is-li) { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: 1.05rem 0; }
  .menu-btn { display: inline-flex; }
  .nav-chev { display: none; }
  .site-nav .subnav { display: grid; padding: 0 0 16px; }
  .site-nav .subnav a { padding: .6rem 0; font-size: 1.25rem; }
}
/* the smallest phones: the bar keeps one row */
@media (max-width: 359px) {
  .site-head { gap: 6px; }
  .cart-link { width: 34px; margin: 0 -4px; }
  .menu-btn { padding: .72rem .62rem; }
}
@media (max-width: 1024px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .phero__media { justify-self: start; width: min(100%, 560px); }
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); }
  .split--flip > .split__media { order: 0; }
}
@media (max-width: 600px) {
  .phero__media { padding-left: 16px; }
  .phero__media .ld-frame::before { top: 16px; right: 16px; bottom: -16px; left: -16px; }
}

/* ==========================================================================
   2. Pattern library extras (design/design-patterns.html): specimen panels,
   documentation layout and demo shapes that the pages do not use. Scoped to
   .lx-doc so they never meet the live components (the legacy .js .reveal
   variant is kept here, inert, for reference).
   ========================================================================== */
.lx-doc .doc-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(40px, 6vw, 112px); align-items: end; padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 7vw, 104px); }
.lx-doc .doc-intro__title { margin: 0; font: 300 clamp(2.3rem, 1.4rem + 3.1vw, 4.2rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.lx-doc .doc-intro__title em { font-style: italic; font-weight: 400; color: var(--brass-text); }
.lx-doc .doc-intro__note { margin: 0 0 22px; max-width: 30em; font-size: .95rem; line-height: 1.7; color: var(--muted); }
.lx-doc .toc { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); columns: 2; column-gap: 28px; }
.lx-doc .toc :is(li,.is-li) { break-inside: avoid; }
.lx-doc .toc a { display: inline-block; padding: .38rem 0; font: 500 .64rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .6s var(--ease); }
.lx-doc .toc a span { display: inline-block; min-width: 2.6em; font: italic 400 .95rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--brass-text); }
.lx-doc .toc a:hover, .lx-doc .toc a:focus-visible { color: var(--brass-text); }
.lx-doc .pat { padding-bottom: var(--section); }
.lx-doc .pat-note { max-width: 46em; margin: calc(-1 * clamp(14px, 2.4vw, 40px)) 0 clamp(36px, 4.4vw, 60px); font-size: .95rem; line-height: 1.75; color: var(--muted); }
.lx-doc .spec-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 44px; }
.lx-doc .spec-row > div { display: grid; justify-items: start; gap: 4px; }
.lx-doc .spec-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.lx-doc .spec-pane { position: relative; padding: clamp(28px, 3.4vw, 48px); border: 1px solid var(--line); }
.lx-doc .spec-pane--surface { background: var(--surface); }
.lx-doc .spec-pane--band { background: var(--band-bg); border-color: var(--band-line); color: var(--band-ink); --focus: var(--band-focus); }
.lx-doc .spec-pane--band .spec-label { color: var(--band-muted); }
.lx-doc .spec-pane + .spec-pane { margin-top: 0; }
.lx-doc .g--stair { grid-column: 1 / 6; grid-row: 1 / 3; }
.lx-doc .g--stair .ld { aspect-ratio: 3 / 4.5; }
.lx-doc .g--stair img { object-position: 38% 50%; }
.lx-doc .g--facade { grid-column: 7 / 13; grid-row: 1; }
.lx-doc .g--facade .frame { aspect-ratio: 3 / 2; }
.lx-doc .g--facade img { object-position: 50% 60%; }
.lx-doc .g--bath { grid-column: 7 / 10; grid-row: 2; }
.lx-doc .g--bath .frame { aspect-ratio: 3 / 4; }
.lx-doc .g--bath img { object-position: 54% 72%; }
.lx-doc .g--marble { grid-column: 10 / 13; grid-row: 2; align-self: end; padding-left: clamp(0px, 2vw, 28px); }
.lx-doc .g--marble .frame { aspect-ratio: 1; }
.lx-doc .emb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2.4vw, 36px); }
.lx-doc .emb__cell { margin: 0; }
.lx-doc .emb__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 28px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.lx-doc .emb__stage--ground { background: var(--bg); }
.lx-doc .emb__cell :is(figcaption,.is-figcaption) { margin-top: 16px; }
.lx-doc .emb__name { display: block; margin-bottom: 4px; font: 400 1.3rem/1.2 var(--serif); color: var(--ink); }
.lx-doc .emb__desc { display: block; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.lx-doc .demo-block { width: 62%; aspect-ratio: 4 / 3; }
.lx-doc .demo-contour { width: 44%; padding-left: 20px; }
.lx-doc .demo-contour .ld-frame { --r: 64px; }
.lx-doc .demo-contour .ld-frame::before { top: 14px; right: 14px; bottom: -14px; left: -14px; }
.lx-doc .demo-contour .ld { aspect-ratio: 4 / 5; }
.lx-doc .bowl { position: relative; width: 58%; aspect-ratio: 4 / 3; --r: 72px; background: var(--band-bg); border-radius: 0 0 var(--r) 0; }
.lx-doc .bowl::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--band-brass); opacity: .75; border-radius: 0 0 calc(var(--r) - 10px) 0; pointer-events: none; }
.lx-doc .demo-sky { position: relative; display: flex; align-items: flex-end; width: 70%; height: 60%; }
.lx-doc .demo-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brushed); }
.lx-doc .demo-sky .sky { position: absolute; right: 12%; bottom: 1px; }
.lx-doc .demo-cham { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; width: 76%; }
.lx-doc .demo-cham .frame { aspect-ratio: 1; }
.lx-doc .demo-brushed { display: grid; gap: 18px; width: 76%; }
.lx-doc .demo-brushed span { display: block; height: 1px; background: var(--brushed); }
.lx-doc .demo-brushed span:nth-child(1) { width: 36px; }
.lx-doc .demo-brushed span:nth-child(3) { height: 6px; }
.lx-doc .motion-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; }
.lx-doc .motion-demo { position: relative; padding: clamp(32px, 4vw, 56px); background: var(--surface); border: 1px solid var(--line); }
.lx-doc .motion-demo .eyebrow { margin-bottom: 18px; }
.lx-doc .motion-demo .h3 { margin-bottom: 30px; }
.lx-doc .motion-demo__line { position: relative; margin-bottom: 34px; }
.lx-doc .motion-demo__line .rule { width: 100%; }
.lx-doc .motion-demo__line .sky { position: absolute; right: 8%; bottom: 0; transform: none; }
.lx-doc .motion-spec { margin: 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.lx-doc .motion-spec :is(dt,.is-dt), .lx-doc .motion-spec :is(dd,.is-dd) { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lx-doc .motion-spec :is(dt,.is-dt) { font: 500 .62rem/1.9 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.lx-doc .motion-spec :is(dd,.is-dd) { font-size: .92rem; line-height: 1.6; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .lx-doc .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.5s var(--ease), transform 1.5s var(--ease); transition-delay: var(--d, 0s); }
  .lx-doc .js .reveal.in { opacity: 1; transform: none; }
  .lx-doc .js .reveal .rule, .lx-doc .js .reveal.steps::after { transform: scaleX(0); transition: transform 2s var(--ease-io) .35s; }
  .lx-doc .js .reveal.in .rule, .lx-doc .js .reveal.in.steps::after { transform: scaleX(1); }
  .lx-doc .js .reveal .sky :is(i,.is-i), .lx-doc .js .band__sky.reveal :is(i,.is-i) { transform: scaleY(0); transform-origin: bottom; transition: transform 1.4s var(--ease); }
  .lx-doc .js .reveal .sky :is(i,.is-i):nth-child(1), .lx-doc .js .band__sky.reveal :is(i,.is-i):nth-child(1) { transition-delay: 1.5s; }
  .lx-doc .js .reveal .sky :is(i,.is-i):nth-child(2), .lx-doc .js .band__sky.reveal :is(i,.is-i):nth-child(2) { transition-delay: 1.62s; }
  .lx-doc .js .reveal .sky :is(i,.is-i):nth-child(3), .lx-doc .js .band__sky.reveal :is(i,.is-i):nth-child(3) { transition-delay: 1.74s; }
  .lx-doc .js .reveal .sky :is(i,.is-i):nth-child(4), .lx-doc .js .band__sky.reveal :is(i,.is-i):nth-child(4) { transition-delay: 1.86s; }
  .lx-doc .js .reveal.in .sky :is(i,.is-i), .lx-doc .js .band__sky.reveal.in :is(i,.is-i) { transform: none; }
  .lx-doc .motion-demo.play .m-rise { animation: rise 1.6s var(--ease) both; animation-delay: var(--d, 0s); }
  .lx-doc .motion-demo.play .rule { animation: draw 2s var(--ease-io) .5s both; }
  .lx-doc .motion-demo.play .sky :is(i,.is-i) { animation: barRise 1.4s var(--ease) both; }
  .lx-doc .motion-demo.play .sky :is(i,.is-i):nth-child(1) { animation-delay: 1.5s; }
  .lx-doc .motion-demo.play .sky :is(i,.is-i):nth-child(2) { animation-delay: 1.62s; }
  .lx-doc .motion-demo.play .sky :is(i,.is-i):nth-child(3) { animation-delay: 1.74s; }
  .lx-doc .motion-demo.play .sky :is(i,.is-i):nth-child(4) { animation-delay: 1.86s; }
}
@media (max-width: 1024px) {
  .lx-doc .doc-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lx-doc .sec-intro, .lx-doc .card--feature .card__link, .lx-doc .form-wrap, .lx-doc .motion-grid, .lx-doc .ph-panels { grid-template-columns: minmax(0, 1fr); }
  .lx-doc .cards, .lx-doc .ph-cards, .lx-doc .emb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lx-doc .toc { columns: 1; }
  .lx-doc .spec-split, .lx-doc .cards, .lx-doc .ph-cards, .lx-doc .emb, .lx-doc .anatomy, .lx-doc .field-row, .lx-doc .field-states, .lx-doc .ph-checkout, .lx-doc .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .lx-doc .g--stair { grid-column: 1 / 6; grid-row: 1; }
  .lx-doc .g--facade { grid-column: 1 / 7; grid-row: 2; }
  .lx-doc .g--bath { grid-column: 1 / 5; grid-row: 3; }
  .lx-doc .g--marble { grid-column: 5 / 7; grid-row: 3; }
  .lx-doc .g--marble :is(figcaption,.is-figcaption) { display: none; }
  .lx-doc .motion-spec { grid-template-columns: minmax(0, 1fr); }
  .lx-doc .motion-spec :is(dt,.is-dt) { padding-bottom: 0; border-bottom: 0; }
}

/* ==========================================================================
   3. WordPress adapters
   The approved components, re-attached to core block markup:
   groups for divs, paragraphs for spans and links (marked .lx-np), spacers
   for the decorative bars and rules, image blocks for the framed photographs,
   button blocks for .btn and .textlink, and core Navigation in the brand bar.
   ========================================================================== */

/* ---------- 3.1 Base: block wrappers add no space of their own ---------- */
.wp-site-blocks > *, .wp-block-template-part { margin-block: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }
.site-main { display: block; }
:where(p.lx-np) { margin: 0; }
.wp-block-image, .wp-block-video { margin: 0; }
.wp-block-image:is(.ld, .frame) img { height: 100%; }
.wp-block-video video { display: block; }
.wp-block-quote { margin: 0; padding: 0; border: 0; }
.wp-block-quote > p { margin: 0; font: inherit; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-buttons.actions { gap: 24px 44px; }

/* skip link (WordPress prints it for block themes): styled as the mockups' .skip */
.skip-link.screen-reader-text:focus {
  left: 16px; top: 16px; z-index: 120;
  clip: auto; clip-path: none; width: auto; height: auto;
  padding: .9rem 1.2rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  box-shadow: none; border-radius: 0;
}

/* ---------- 3.2 Logo: two CSS masks per logo, colored by the palette's logo tokens ---------- */
.lx-logo { position: relative; }
.lx-logo::before, .lx-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lx-logo::before { background: var(--logo-ink); }
.lx-logo::after { background: var(--logo-accent); }
.lx-logo--mono::before { -webkit-mask-image: url(assets/logo/monogram-ink.svg); mask-image: url(assets/logo/monogram-ink.svg); }
.lx-logo--mono::after { -webkit-mask-image: url(assets/logo/monogram-gold.svg); mask-image: url(assets/logo/monogram-gold.svg); }
.lx-logo--stack::before { -webkit-mask-image: url(assets/logo/logo-ink.svg); mask-image: url(assets/logo/logo-ink.svg); }
.lx-logo--stack::after { -webkit-mask-image: url(assets/logo/logo-gold.svg); mask-image: url(assets/logo/logo-gold.svg); }
p.lx-logo { margin: 0; }

/* header monogram: the Site Title block, its text kept for assistive technology */
.brand.lx-logo { flex: none; width: clamp(40px, 3.6vw, 50px); margin: 0 auto 0 0; }
.brand.lx-logo a {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; color: transparent; font-size: 0; line-height: 0; text-decoration: none;
}
.brand.lx-logo a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------- 3.3 Skyline bars, rules and other decorative spacers ---------- */
.wp-block-spacer.sky {
  --c: var(--sky-c, var(--brass));
  flex: none; width: 20px;
  background:
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 0 bottom 100% / 4px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 4px calc(100% - 4px) no-repeat,
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 7px bottom calc(78% - .66px) / 3px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) left 7px bottom 0 / 3px calc(78% - 3px) no-repeat,
    linear-gradient(var(--c), var(--c)) left 11.5px bottom 0 / 4px 62% no-repeat,
    linear-gradient(var(--c), var(--c)) left 18px bottom 0 / 2px 46% no-repeat;
}
.wp-block-spacer.sky.sky--lg {
  width: 45px;
  background:
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 0 bottom 100% / 9px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 9px calc(100% - 9px) no-repeat,
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 16px bottom calc(100% - 16px) / 7px 7px no-repeat,
    linear-gradient(var(--c), var(--c)) left 16px bottom 0 / 7px calc(100% - 23px) no-repeat,
    linear-gradient(var(--c), var(--c)) left 26px bottom 0 / 9px 64% no-repeat,
    linear-gradient(var(--c), var(--c)) left 40px bottom 0 / 5px 47% no-repeat;
}
.wp-block-spacer.band__sky-in {
  --c: var(--band-brass);
  flex: none; width: 68px;
  background:
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 0 bottom 100% / 14px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 14px calc(100% - 14px) no-repeat,
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 25px bottom calc(100% - 25px) / 11px 11px no-repeat,
    linear-gradient(var(--c), var(--c)) left 25px bottom 0 / 11px calc(100% - 36px) no-repeat,
    linear-gradient(var(--c), var(--c)) left 40px bottom 0 / 14px 64% no-repeat,
    linear-gradient(var(--c), var(--c)) left 61px bottom 0 / 7px 47% no-repeat;
}
.foot__sky { --sky-c: var(--band-brass); }
@media (prefers-reduced-motion: no-preference) {
  .reveal .wp-block-spacer.sky, .band__sky.reveal .wp-block-spacer.band__sky-in {
    transform-origin: 50% 100%;
    transition: scale 1.7s var(--ease) 1.5s;
  }
  .reveal.is-pending .wp-block-spacer.sky, .band__sky.reveal.is-pending .wp-block-spacer.band__sky-in { scale: 1 0; }
}

/* ---------- 3.4 Buttons: .btn and .textlink on core Button blocks ---------- */
/* the component class sits on the block wrapper; the wrapper itself stays neutral */
.wp-block-button.btn, .wp-block-button.btn:hover, .wp-block-button.btn:focus-visible, .wp-block-button.btn:focus-within,
.wp-block-button.pf-chip, .wp-block-button.pf-chip:hover,
.wp-block-button.rail-btn, .wp-block-button.rail-btn:hover, .wp-block-button.rail-btn:focus-visible {
  padding: 0; border: 0; background: none; color: inherit; overflow: visible; isolation: auto;
  gap: 0; width: auto; height: auto; transition: none; white-space: normal; box-shadow: none;
}
.wp-block-button.btn::after, .wp-block-button.btn:hover::after { content: none; }
.wp-block-buttons > .wp-block-button.btn { display: inline-flex; }
.wp-block-button.btn > .wp-block-button__link {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 18px;
  height: auto; padding: 1.25rem 1.9rem 1.25rem 2.15rem;
  border: 0; border-radius: 1px; margin: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .24em; text-transform: uppercase;
  text-align: left; text-decoration: none; white-space: nowrap; word-break: normal;
  transition: background-color .8s var(--ease), color .8s var(--ease);
}
.wp-block-button.btn > .wp-block-button__link::after { /* single brushed sheen pass on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 240, 212, .2) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 1.6s var(--ease);
}
.wp-block-button.btn > .wp-block-button__link::before { /* the .btn__line, after the label */
  content: ""; order: 2; flex: none; width: 22px; height: 1px; background: currentColor; transition: width .8s var(--ease);
}
.wp-block-button.btn > .wp-block-button__link:hover,
.wp-block-button.btn > .wp-block-button__link:focus-visible { background: var(--btn-bg-h); color: var(--btn-fg-h); }
.wp-block-button.btn > .wp-block-button__link:hover::after,
.wp-block-button.btn > .wp-block-button__link:focus-visible::after { transform: translateX(120%); }
.wp-block-button.btn > .wp-block-button__link:hover::before,
.wp-block-button.btn > .wp-block-button__link:focus-visible::before { width: 40px; }
.wp-block-button.btn--sm > .wp-block-button__link { gap: 14px; padding: .95rem 1.3rem .95rem 1.5rem; font-size: .68rem; letter-spacing: .2em; }
.wp-block-button.btn--sm > .wp-block-button__link::before { width: 16px; }
.wp-block-button.btn--sm > .wp-block-button__link:hover::before,
.wp-block-button.btn--sm > .wp-block-button__link:focus-visible::before { width: 28px; }
button.wp-block-button__link { font-family: var(--sans); }

/* text links: the class sits on the wrapper (a paragraph or a Button block), the link inherits */
.wp-block-buttons > .wp-block-button.textlink { display: inline-flex; }
.textlink > a, .wp-block-button.textlink > .wp-block-button__link {
  display: inline; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit;
  text-align: left; text-decoration: none; word-break: normal;
}
.wp-block-button.textlink > .wp-block-button__link:hover,
.wp-block-button.textlink > .wp-block-button__link:focus { background: none; color: inherit; }
.textlink:has(:focus-visible) { color: var(--brass-text); }
.textlink:has(:focus-visible)::after { width: 100%; }
.textlink--on-dark:has(:focus-visible) { color: var(--band-brass); }
.textlink.is-disabled { cursor: not-allowed; }

@media (max-width: 600px) {
  .wp-block-button.btn--sm > .wp-block-button__link { padding: .85rem 1rem; letter-spacing: .14em; }
  .wp-block-button.btn--sm > .wp-block-button__link::before { display: none; }
  .wp-block-button.btn:not(.btn--sm) > .wp-block-button__link { white-space: normal; text-align: left; line-height: 1.5; padding-top: 1.05rem; padding-bottom: 1.05rem; }
}
@media (max-width: 360px) {
  .wp-block-button.btn--sm > .wp-block-button__link { padding: .8rem .75rem; font-size: .62rem; letter-spacing: .08em; }
}

/* ---------- 3.5 Services index rows: the arrow, drawn after each row's link ---------- */
.svc a::after {
  content: ""; justify-self: end; align-self: center;
  width: 28px; height: 12px;
  color: var(--muted); background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) 0 50% / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M.5.5 6 6 .5 11.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") 100% 50% / 7px 12px no-repeat;
          mask: linear-gradient(#000 0 0) 0 50% / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M.5.5 6 6 .5 11.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") 100% 50% / 7px 12px no-repeat;
  transition: width .9s var(--ease), color .7s var(--ease);
}
.svc a:hover::after, .svc a:focus-visible::after { width: 52px; color: var(--brass-text); }
.svc a { text-decoration: none; }
.gsvc .svc a::after { grid-column: 3; grid-row: 1 / 3; }
.gsvc__item > p.lx-np { margin: 0; }
@media (max-width: 1024px) {
  .svc a::after { grid-column: 3; grid-row: 1; }
}

/* ---------- 3.6 Cards: the whole card is the link (the inner text link carries the URL) ---------- */
.card__link { position: relative; cursor: pointer; }
.card__link:has(:focus-visible) .card__title,
.card__link:has(:focus-visible) .textlink { color: var(--brass-text); }
.card__link:has(:focus-visible) .textlink::after { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .card__link:has(:focus-visible) .zoom img { transform: scale(1.045); filter: var(--img-filter-h); }
}

/* ---------- 3.7 Placeholder forms: labeled fields drawn without inputs ---------- */
.field__input.is-empty { height: calc(1.0625rem * 1.5 + 1.45rem + 1px); }
.field__input.is-placeholder { color: var(--muted); }
.field__textarea { min-height: 8.5rem; line-height: 1.65; }
.field__textarea.rows-5 { min-height: calc(5 * 1.65 * 1.0625rem + 1.45rem + 1px); }
.field__textarea.rows-6 { min-height: calc(6 * 1.65 * 1.0625rem + 1.45rem + 1px); }
.field__textarea.is-empty { height: auto; }
.check::before {
  content: ""; width: 18px; height: 18px; margin: 3px 0 0;
  border: 1px solid var(--muted); border-radius: 2px; background: var(--surface);
}
.check.is-radio::before { border-radius: 50%; }
.form-status:empty { min-height: 1.5em; }

/* ---------- 3.8 The axonometric drawing (configurator placeholders) ----------
   Two layers: a light drawing multiplied onto light grounds and a dark one
   screened onto dark grounds; the active palette's mode sets which one shows. */
.wf-art { position: relative; z-index: auto; }
.wf-art::before, .wf-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(assets/drawings/wf-light.svg) center / contain no-repeat;
  mix-blend-mode: multiply; opacity: calc(var(--wf-light) * var(--wf-op, 1));
}
.wf-art::after { background-image: url(assets/drawings/wf-dark.svg); mix-blend-mode: screen; opacity: calc(var(--wf-dark) * var(--wf-op, 1)); }

/* ---------- 3.9 Header: brand bar with core Navigation ---------- */
.cart-link-wrap { display: flex; flex: none; margin: 0; line-height: 0; }
.cart-link::before {
  content: ""; display: block; width: 21px; height: 21px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.15'%3E%3Cpath d='M4.5 8.5h15l-1.2 12.5H5.7Z'/%3E%3Cpath d='M8.75 8.5V7a3.25 3.25 0 0 1 6.5 0v1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.15'%3E%3Cpath d='M4.5 8.5h15l-1.2 12.5H5.7Z'/%3E%3Cpath d='M8.75 8.5V7a3.25 3.25 0 0 1 6.5 0v1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.head-cta { flex: none; }
.masthead .site-head .head-cta .btn--sm { flex: none; }
/* phones: the bar keeps one row (monogram, cart, Book, Menu); screen readers still hear the full label */
.head-cta .cta-short { display: none; }
@media (max-width: 600px) {
  .head-cta .cta-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head-cta .cta-short { display: inline; }
}

#top nav.lx-nav { flex: 0 1 auto; color: var(--ink); }
#top nav.lx-nav .wp-block-navigation__container { gap: 6px clamp(18px, 2.2vw, 34px); flex-wrap: wrap; }
#top nav.lx-nav .wp-block-navigation-item { position: relative; }
#top nav.lx-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  position: relative; display: inline-block; padding: .7rem 0;
  font: 500 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: color .7s var(--ease);
}
#top nav.lx-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--brushed);
  transition: width 1s var(--ease-io);
}
#top nav.lx-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
#top nav.lx-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
#top nav.lx-nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
#top nav.lx-nav .nav-parent.is-section > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--brass-text); }
#top nav.lx-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
#top nav.lx-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after { width: 100%; }
#top nav.lx-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after,
#top nav.lx-nav .wp-block-navigation__container > .nav-parent.is-section > .wp-block-navigation-item__content::after { width: 34%; }

/* the Services chevron (the submenu toggle) */
/* Design Your Project in the menu carries a small "3D" tag (decorative: the link names the page) */
#top nav.lx-nav .nav-3d .wp-block-navigation-item__label::after {
  content: "3D" / ""; display: inline-block; margin-left: .5em; padding: .22em .38em .18em;
  border: 1px solid var(--brass); border-radius: 1px; color: var(--brass-text);
  font-size: .8em; line-height: 1; letter-spacing: .08em; vertical-align: .08em;
}
#top nav.lx-nav .wp-block-navigation__submenu-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5px; height: 2.06rem; margin: 0 0 0 .528rem; padding: 0; overflow: visible;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
#top nav.lx-nav .wp-block-navigation__submenu-icon svg { display: none; }
#top nav.lx-nav .wp-block-navigation__submenu-icon::before {
  content: ""; display: block; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .5s var(--ease);
}
#top nav.lx-nav .has-child:hover > .wp-block-navigation__submenu-icon::before,
#top nav.lx-nav .has-child:focus-within > .wp-block-navigation__submenu-icon::before,
#top nav.lx-nav .wp-block-navigation__submenu-icon[aria-expanded="true"]::before { transform: translateY(-1px) rotate(-135deg); }
#top nav.lx-nav .has-child.is-closed > .wp-block-navigation__submenu-icon::before { transform: translateY(-3px) rotate(45deg); }

/* desktop: the submenu is a floating panel under the hairline */
@media (min-width: 1180px) {
  /* as in the mockups, the panel hangs from the brand bar's hairline: the bar is its containing block */
  #top nav.lx-nav, #top nav.lx-nav .wp-block-navigation__responsive-container,
  #top nav.lx-nav .wp-block-navigation__responsive-close, #top nav.lx-nav .wp-block-navigation__responsive-dialog,
  #top nav.lx-nav .wp-block-navigation__responsive-container-content, #top nav.lx-nav .wp-block-navigation__container,
  #top nav.lx-nav .wp-block-navigation__container > .has-child { position: static; }
  #top nav.lx-nav .has-child > .wp-block-navigation-item__content { z-index: 41; }
  #top nav.lx-nav .has-child > .wp-block-navigation__submenu-container {
    --r: clamp(64px, 7vw, 112px);
    left: auto; top: 100%; z-index: 40;
    display: grid; width: 304px; min-width: 304px; height: auto; overflow: visible;
    margin: 0 0 0 -30px; padding: 22px 30px 36px; gap: 6px 0;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--r) 0;
    box-shadow: 0 28px 56px -30px var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s;
    counter-reset: lxsub;
  }
  #top nav.lx-nav .has-child > .wp-block-navigation__submenu-container::before { /* floating keyline, 4px inside */
    content: ""; position: absolute; inset: 4px;
    border: 1px solid var(--brass); opacity: .5;
    border-radius: 0 0 calc(var(--r) - 4px) 0;
    pointer-events: none;
  }
  #top nav.lx-nav .has-child > .wp-block-navigation__submenu-container::after { /* hover bridge */
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px;
  }
  #top nav.lx-nav .has-child:hover > .wp-block-navigation__submenu-container,
  #top nav.lx-nav .has-child:focus-within > .wp-block-navigation__submenu-container,
  #top nav.lx-nav .wp-block-navigation__submenu-icon[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    width: 304px; min-width: 304px; height: auto;
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  #top nav.lx-nav .has-child.is-closed > .wp-block-navigation__submenu-container { opacity: 0; visibility: hidden; transform: translateY(8px); transition-delay: 0s; }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { counter-increment: lxsub; display: block; }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline;
    width: 100%; padding: .55rem 0;
    font: 400 1.3rem/1.2 var(--serif); letter-spacing: 0; text-transform: none;
    color: var(--ink);
  }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    content: counter(lxsub, decimal-leading-zero); font: italic 400 1.15rem/1 var(--serif); color: var(--brass-text);
  }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label { display: inline-block; transition: transform 1s var(--ease); }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] { color: var(--brass-text); }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label { transform: translateX(8px); }
  #top nav.lx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { outline-offset: 2px; }
}

/* below 1180px the bar folds behind the Menu button (the mockups' fold), opening the overlay */
#top nav.lx-nav .wp-block-navigation__responsive-container-open,
#top nav.lx-nav .wp-block-navigation__responsive-container-close {
  appearance: none; margin: 0; cursor: pointer;
  align-items: center; gap: 10px;
  padding: .72rem .95rem;
  border: 1px solid var(--line-strong); border-radius: 1px;
  background: transparent; color: var(--ink);
  font: 500 .64rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
#top nav.lx-nav .wp-block-navigation__responsive-container-open svg,
#top nav.lx-nav .wp-block-navigation__responsive-container-close svg { display: none; }
#top nav.lx-nav .wp-block-navigation__responsive-container-open::before {
  content: ""; width: 16px; height: 6px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
#top nav.lx-nav .wp-block-navigation__responsive-container-close::before {
  content: ""; width: 16px; height: 16px;
  background: linear-gradient(45deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px)),
              linear-gradient(-45deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px));
}
#top nav.lx-nav .wp-block-navigation__responsive-container-open::after,
#top nav.lx-nav .wp-block-navigation__responsive-container-close::after { content: "Menu"; }
#top nav.lx-nav .wp-block-navigation__responsive-container-close { position: absolute; top: clamp(18px, 2.4vw, 30px); right: var(--gutter); }
#top nav.lx-nav .is-menu-open .wp-block-navigation__responsive-container-close { display: inline-flex; }

@media (max-width: 1179px) {
  .site-head > nav.lx-nav { order: 10; }
  #top nav.lx-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
  #top nav.lx-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
#top nav.lx-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(18px, 2.4vw, 30px) var(--gutter) 48px;
  background: var(--overlay-bg, var(--bg)); color: var(--ink);
}
#top nav.lx-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 76px; align-items: stretch; }
#top nav.lx-nav .is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 8px 0 6px; }
#top nav.lx-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  display: block; width: 100%; border-top: 1px solid var(--line);
}
#top nav.lx-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { display: block; padding: 1.05rem 0; }
#top nav.lx-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
#top nav.lx-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container {
  position: static; display: grid; width: auto; min-width: 0; height: auto;
  margin: 0; padding: 0 0 16px; gap: 0;
  border: 0; background: transparent; color: inherit;
  opacity: 1; visibility: visible; transform: none; overflow: visible;
  counter-reset: lxsub;
}
#top nav.lx-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; border: 0; counter-increment: lxsub; }
#top nav.lx-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline;
  padding: .6rem 0;
  font: 400 1.25rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink);
}
#top nav.lx-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: counter(lxsub, decimal-leading-zero); font: italic 400 1.15rem/1 var(--serif); color: var(--brass-text);
}
#top nav.lx-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
#top nav.lx-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] { color: var(--brass-text); }
@media (max-width: 600px) {
  #top nav.lx-nav .wp-block-navigation__responsive-container-open,
  #top nav.lx-nav .wp-block-navigation__responsive-container-close { padding: .72rem .8rem; }
  #top nav.lx-nav .wp-block-navigation__responsive-container-open::after,
  #top nav.lx-nav .wp-block-navigation__responsive-container-close::after { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  #top nav.lx-nav .wp-block-navigation__responsive-container-open { padding: .72rem .62rem; }
}

/* ---------- 3.10 Footer: sitemap and legal links on core Navigation ---------- */
.site-foot nav.wp-block-navigation { color: var(--band-muted); font-size: .92rem; line-height: 1.9; }
.site-foot .foot-nav .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.site-foot .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  padding: 0; color: var(--band-muted); text-decoration: none; transition: color .6s var(--ease);
}
.site-foot .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.site-foot .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.site-foot .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] { color: var(--band-brass); }
.site-foot nav.foot__legal .wp-block-navigation__container { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.site-foot nav.foot__legal .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: block; font: 500 .62rem/1.9 var(--sans); letter-spacing: .22em; text-transform: uppercase;
}
.site-foot .foot__col > .wp-block-list { margin: 0; }

/* ---------- 3.11 Film heroes on the Cover block ---------- */
.wp-block-cover.hero-film { padding: 0; }
.wp-block-cover.hero-film > video.wp-block-cover__video-background { object-position: 50% 50%; filter: saturate(.62) sepia(.12); background: var(--band-bg); }
.wp-block-cover.film { align-items: stretch; justify-content: flex-end; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.wp-block-cover.film > .wp-block-cover__inner-container { width: 100%; }
.wp-block-cover.hero-film > .wp-block-cover__background.has-background-dim.has-background-dim-0 { opacity: 1; background-color: transparent; pointer-events: none; }
.wp-block-cover.film > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--band-bg) 80%, transparent) 0, color-mix(in srgb, var(--band-bg) 74%, transparent) 86px, transparent 240px),
    linear-gradient(to top, color-mix(in srgb, var(--band-bg) 94%, transparent) 0%, color-mix(in srgb, var(--band-bg) 85%, transparent) 33%, color-mix(in srgb, var(--band-bg) 50%, transparent) 58%, transparent 84%),
    linear-gradient(to right, color-mix(in srgb, var(--band-bg) 52%, transparent) 0%, transparent 64%);
}
.wp-block-cover.cine > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
  background:
    linear-gradient(to right, color-mix(in srgb, var(--band-bg) 86%, transparent) 0%, color-mix(in srgb, var(--band-bg) 76%, transparent) 42%, color-mix(in srgb, var(--band-bg) 34%, transparent) 74%, transparent 100%),
    linear-gradient(to top, color-mix(in srgb, var(--band-bg) 40%, transparent), transparent 45%);
}
.wp-block-cover.cine > .wp-block-cover__inner-container { position: static; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .wp-block-cover.hero-film > video.wp-block-cover__video-background { animation: settle 6s var(--ease) .2s both; }
}
@media (max-width: 600px) {
  .wp-block-cover.cine > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--band-bg) 84%, transparent) 0%, color-mix(in srgb, var(--band-bg) 78%, transparent) 70%, color-mix(in srgb, var(--band-bg) 60%, transparent) 100%);
  }
}
/* the pause / play control the script adds to every hero film */
.vidctl[data-lux-vidctl] { white-space: nowrap; }
.hero-film-ctl {
  position: absolute; z-index: 4; right: var(--gutter); bottom: clamp(18px, 2.4vw, 32px);
  display: flex; align-items: center; gap: 14px;
  padding: .55rem .9rem .55rem 1rem;
  background: var(--band-bg); border: 1px solid var(--band-line); color: var(--band-muted);
  font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.hero-film-ctl .vidctl { color: var(--band-ink); border-bottom-color: var(--band-brass); }

/* ---------- 3.12 Journal, archive and search templates (not in the mockups; built from the same atoms) ---------- */
.post-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 72px); max-width: 52rem; }
.post-list__item { padding-top: 22px; border-top: 1px solid var(--line); }
.post-list__item .card__title a { color: inherit; text-decoration: none; transition: color .7s var(--ease); }
.post-list__item .card__title a:hover, .post-list__item .card__title a:focus-visible { color: var(--brass-text); }
.post-list__item .card__text p { margin: 0; }
.post-list__pagination { margin-top: clamp(48px, 6vw, 80px); gap: 24px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.post-list__pagination a { color: var(--ink); text-decoration: none; }
.lx-search { margin-top: clamp(28px, 3vw, 40px); max-width: 34rem; }
.lx-search .wp-block-search__input { padding: .7rem 0 .75rem; border: 0; border-bottom: 1px solid var(--muted); border-radius: 0; background: transparent; color: var(--text); font: 400 1.0625rem/1.5 var(--sans); }
.lx-search .wp-block-search__input:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.single .longform > .wp-block-post-content > :first-child { margin-top: 0; }

/* ---------- 3.13 Editor: the page title field in the theme's serif ---------- */
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .editor-post-title.wp-block-post-title {
  max-width: 1360px; margin: 32px auto 0; padding: 0 var(--gutter);
  font: 300 clamp(2.3rem, 1.4rem + 3.1vw, 4.2rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink);
}

/* ==========================================================================
   4. Page CSS from each approved page, scoped to the page wrapper with
   :where(.pg-*) so specificity matches the mockups and nothing can clash.
   ========================================================================== */

/* ---------- Home: Quiet Gallery (home.html) ---------- scope .pg-home */

/* ==========================================================================
   Home only (Quiet Gallery): the brand bar floats over a full-viewport film.
   ========================================================================== */
/* the page's own colors, kept so the submenu panel can read on its surface while the bar re-tints itself */
:where(body:has(.pg-home)) { --pg-ink: var(--ink); --pg-text: var(--text); --pg-muted: var(--muted); --pg-brass-text: var(--brass-text); --pg-line: var(--line); --pg-focus: var(--focus); }

/* masthead over the film (band tokens, so it reads on the scrim) */
:where(body:has(.pg-home)) .masthead {
  position: absolute; top: 0; left: 0; right: 0;
  --ink: var(--band-ink); --brass-text: var(--band-brass); --muted: var(--band-muted);
  --line: color-mix(in srgb, var(--band-ink) 24%, transparent);
  --line-strong: color-mix(in srgb, var(--band-ink) 55%, transparent);
  --focus: var(--band-focus);
  --logo-ink: var(--band-logo-ink); --logo-accent: var(--band-logo-accent);
  --btn-bg: var(--band-btn-bg); --btn-fg: var(--band-btn-fg); --btn-bg-h: var(--band-btn-bg-h); --btn-fg-h: var(--band-btn-fg-h);
  transition: background-color .6s var(--ease);
}
:where(body:has(.pg-home)) .masthead:has(.site-head[data-menu="true"]) { background: var(--band-bg); }
@media (min-width: 1180px) {
  :where(body:has(.pg-home)) .masthead .subnav { --ink: var(--pg-ink); --text: var(--pg-text); --muted: var(--pg-muted); --brass-text: var(--pg-brass-text); --line: var(--pg-line); --focus: var(--pg-focus); }
}

/* film hero */
:where(.pg-home) .film {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;
  background: var(--band-bg); color: var(--band-ink);
  --ink: var(--band-ink); --text: var(--band-ink); --muted: var(--band-muted);
  --brass-text: var(--band-brass); --focus: var(--band-focus);
}
:where(.pg-home) .film__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
:where(.pg-home) .film__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.62) sepia(.12); }
:where(.pg-home) .film__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--band-bg) 80%, transparent) 0, color-mix(in srgb, var(--band-bg) 74%, transparent) 86px, transparent 240px),
    linear-gradient(to top, color-mix(in srgb, var(--band-bg) 94%, transparent) 0%, color-mix(in srgb, var(--band-bg) 85%, transparent) 33%, color-mix(in srgb, var(--band-bg) 50%, transparent) 58%, transparent 84%),
    linear-gradient(to right, color-mix(in srgb, var(--band-bg) 52%, transparent) 0%, transparent 64%);
}
:where(.pg-home) .film__in {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px;
  padding-top: 200px; padding-bottom: clamp(40px, 6vw, 88px);
}
:where(.pg-home) .film__copy { position: relative; max-width: 48rem; }
:where(.pg-home) .film__copy::before { /* a soft scrim anchored to the copy, so the text holds AA over any frame of the film */
  content: ""; position: absolute; z-index: -1; inset: -62% -46% -56% -62%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--band-bg) 74%, transparent) 0%, color-mix(in srgb, var(--band-bg) 66%, transparent) 50%, color-mix(in srgb, var(--band-bg) 30%, transparent) 78%, transparent 100%);
}
:where(.pg-home) .film .eyebrow { color: var(--band-ink); }
:where(.pg-home) .film .display { margin-bottom: clamp(22px, 2.6vw, 34px); }
:where(.pg-home) .film__lead { max-width: 31em; margin: 0 0 clamp(32px, 3.6vw, 48px); font-weight: 300; font-size: clamp(1.06rem, .98rem + .3vw, 1.2rem); line-height: 1.8; color: var(--band-ink); }
:where(.pg-home) .film__cap { display: flex; align-items: center; gap: 14px; margin: 0; font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--band-ink); white-space: nowrap; }
:where(.pg-home) .film__cap::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--band-brass); }
:where(.pg-home) .film .vidctl { color: var(--band-ink); border-bottom-color: var(--band-brass); }
:where(.pg-home) .film .vidctl:hover { color: var(--band-brass); }
@media (prefers-reduced-motion: no-preference) {
  :where(.pg-home) .film__media video { animation: settle 6s var(--ease) .2s both; }
}

/* I. Approach follows the film, so it opens with a section gap */
:where(.pg-home) .intro { padding-top: var(--section); }

@media (max-width: 1024px) {
  :where(.pg-home) .film__in { grid-template-columns: minmax(0, 1fr); padding-top: 168px; }
}
@media (max-width: 699px) { :where(.pg-home) .film__in { padding-bottom: 88px; } }
@media (max-width: 600px) {
  :where(.pg-home) .film__in { padding-top: 150px; }
  :where(.pg-home) .film .actions { gap: 18px 32px; }
}

/* ---------- Services overview (services.html) ---------- scope .pg-services */

/* short tick list: hairline rows led by a metal dash */
:where(.pg-services) .svp-ticks { list-style: none; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--line); }
:where(.pg-services) .svp-ticks :is(li,.is-li) { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); font-size: .97rem; line-height: 1.6; color: var(--text); }
:where(.pg-services) .svp-ticks :is(li,.is-li)::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 14px; height: 1px; background: var(--brass); }

/* column on a hairline with a short brushed dash (fit guide, remodeling/renovation contrast) */
:where(.pg-services) .svp-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 28px; border-top: 1px solid var(--line); }
:where(.pg-services) .svp-col::before { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 1px; background: var(--brushed); }
:where(.pg-services) .svp-col .card__tag { margin-bottom: 16px; }
:where(.pg-services) .svp-col__t { margin: 0 0 18px; font: 300 clamp(2rem, 1.5rem + 1.4vw, 2.8rem)/1.04 var(--serif); letter-spacing: -.008em; color: var(--ink); }
:where(.pg-services) .svp-col__d { margin: 0 0 24px; max-width: 30em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-services) .svp-col > :is(dl,.is-dl), :where(.pg-services) .svp-col > :is(ul,.is-ul) { align-self: stretch; }
:where(.pg-services) .svp-fit:not(.svp-fit--focus) .svp-col .textlink { margin-top: auto; }
:where(.pg-services) .svp-col :is(dl,.is-dl) { margin: 0 0 26px; }
:where(.pg-services) .svp-col :is(dt,.is-dt) { margin: 0; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
:where(.pg-services) .svp-col :is(dd,.is-dd) { margin: 8px 0 20px; max-width: 30em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-services) .svp-col .spec-label { margin: 0 0 12px; color: var(--ink); }

/* the simple test, on the dark bowl panel */
:where(.pg-services) .svp-test { align-self: stretch; }
:where(.pg-services) .svp-test .eyebrow { margin-bottom: 22px; }
:where(.pg-services) .svp-test .h3 { margin: 0 0 20px; font-size: 1.55rem; line-height: 1.24; }
:where(.pg-services) .svp-test .prose { font-size: .95rem; }

@media (max-width: 1024px) {
  :where(.pg-services) .svp-test { max-width: 40rem; }
}

/* ==========================================================================
   Services overview only (prefix svp-). Composition on the shared components.
   ========================================================================== */
/* II. five editorial blocks: image beside text, alternating sides */
:where(.pg-services) .svp-blocks { display: grid; gap: clamp(96px, 11vw, 168px); margin-top: clamp(56px, 7vw, 104px); }
:where(.pg-services) .svp-block { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 112px); align-items: center; }
:where(.pg-services) .svp-block--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
:where(.pg-services) .svp-block--flip > .svp-block__media { order: 2; }
:where(.pg-services) .svp-block__media { margin: 0; }
:where(.pg-services) .svp-block__media .ld { aspect-ratio: 5 / 4; }
:where(.pg-services) .svp-block__body { max-width: 34rem; }
:where(.pg-services) .svp-block__head { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
:where(.pg-services) .svp-block__head .card__tag { margin: 0; }
:where(.pg-services) .svp-block__n { font: italic 300 1.5rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-services) .svp-block__t { margin: 0 0 22px; font: 300 clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
:where(.pg-services) .svp-block__body .prose { margin-bottom: 26px; }

/* III. the fit guide: three scales of work, then the two focused scopes beside the simple test */
:where(.pg-services) .svp-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(16px, 2.4vw, 36px); margin-top: clamp(56px, 7vw, 104px); align-items: stretch; }
:where(.pg-services) .svp-fit__label { display: flex; align-items: center; gap: 14px; margin: clamp(72px, 8vw, 120px) 0 0; }
:where(.pg-services) .svp-fit__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
:where(.pg-services) .svp-fit--focus { margin-top: clamp(32px, 4vw, 52px); }
:where(.pg-services) .svp-fit--focus .svp-col__t { font-size: clamp(1.8rem, 1.4rem + 1.1vw, 2.4rem); }

/* IV. standards: a closing line under the numbered notes */
:where(.pg-services) .svp-standards .anatomy :is(li,.is-li) { font-size: .95rem; }

@media (max-width: 1024px) {
  :where(.pg-services) .svp-block, :where(.pg-services) .svp-block--flip { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-services) .svp-block--flip > .svp-block__media { order: 0; }
  :where(.pg-services) .svp-block__body { max-width: 40rem; }
  :where(.pg-services) .svp-fit { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  :where(.pg-services) .svp-col { max-width: 40rem; }
}
@media (max-width: 600px) {
  :where(.pg-services) .svp-block__media .ld { aspect-ratio: 4 / 3; }
}

/* ---------- Service pages: Custom Homes, Remodeling, Renovation, Kitchens & Baths, Outdoor Living ---------- scope .pg-svc */

/* short tick list: hairline rows led by a metal dash */
:where(.pg-svc) .svp-ticks { list-style: none; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--line); }
:where(.pg-svc) .svp-ticks :is(li,.is-li) { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); font-size: .97rem; line-height: 1.6; color: var(--text); }
:where(.pg-svc) .svp-ticks :is(li,.is-li)::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 14px; height: 1px; background: var(--brass); }

/* column on a hairline with a short brushed dash (fit guide, remodeling/renovation contrast) */
:where(.pg-svc) .svp-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 28px; border-top: 1px solid var(--line); }
:where(.pg-svc) .svp-col::before { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 1px; background: var(--brushed); }
:where(.pg-svc) .svp-col .card__tag { margin-bottom: 16px; }
:where(.pg-svc) .svp-col__t { margin: 0 0 18px; font: 300 clamp(2rem, 1.5rem + 1.4vw, 2.8rem)/1.04 var(--serif); letter-spacing: -.008em; color: var(--ink); }
:where(.pg-svc) .svp-col__d { margin: 0 0 24px; max-width: 30em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-svc) .svp-col > :is(dl,.is-dl), :where(.pg-svc) .svp-col > :is(ul,.is-ul) { align-self: stretch; }
:where(.pg-svc) .svp-fit:not(.svp-fit--focus) .svp-col .textlink { margin-top: auto; }
:where(.pg-svc) .svp-col :is(dl,.is-dl) { margin: 0 0 26px; }
:where(.pg-svc) .svp-col :is(dt,.is-dt) { margin: 0; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
:where(.pg-svc) .svp-col :is(dd,.is-dd) { margin: 8px 0 20px; max-width: 30em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-svc) .svp-col .spec-label { margin: 0 0 12px; color: var(--ink); }

/* the simple test, on the dark bowl panel */
:where(.pg-svc) .svp-test { align-self: stretch; }
:where(.pg-svc) .svp-test .eyebrow { margin-bottom: 22px; }
:where(.pg-svc) .svp-test .h3 { margin: 0 0 20px; font-size: 1.55rem; line-height: 1.24; }
:where(.pg-svc) .svp-test .prose { font-size: .95rem; }

@media (max-width: 1024px) {
  :where(.pg-svc) .svp-test { max-width: 40rem; }
}

/* ==========================================================================
   Service pages (one family: Custom Homes, Remodeling, Renovation,
   Kitchens & Baths, Outdoor Living). Prefix svp-; composition only.
   ========================================================================== */
:where(.pg-svc) .phero__media :is(figcaption,.is-figcaption).cap { margin-top: 44px; }

/* II. what the work includes: numbered items on hairlines, three per row */
:where(.pg-svc) .svp-scope { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(16px, 2.4vw, 36px); counter-reset: scope; }
:where(.pg-svc) .svp-scope :is(li,.is-li) { position: relative; padding-top: 24px; border-top: 1px solid var(--line); counter-increment: scope; }
:where(.pg-svc) .svp-scope :is(li,.is-li)::after { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 1px; background: var(--brushed); }
:where(.pg-svc) .svp-scope :is(li,.is-li)::before { content: counter(scope, decimal-leading-zero); display: block; margin-bottom: 18px; font: italic 300 1.5rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-svc) .svp-scope h3 { margin: 0 0 10px; font: 400 clamp(1.45rem, 1.25rem + .5vw, 1.7rem)/1.15 var(--serif); color: var(--ink); }
:where(.pg-svc) .svp-scope p:where(:not(.lx-np)) { margin: 0; max-width: 26em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-svc) .svp-note { margin: clamp(48px, 6vw, 80px) 0 0; font-size: .9rem; color: var(--muted); }

/* III. on the band: a quiet placeholder line under the steps */
:where(.pg-svc) .svp-band-note { margin: clamp(40px, 5vw, 64px) 0 0; font-size: .9rem; color: var(--band-muted); }
:where(.pg-svc) .svp-band-note + .band__more { margin-top: clamp(28px, 3vw, 40px); }

/* IV. materials: a lead close-up and a small square beside a list of materials */
:where(.pg-svc) .svp-mat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px clamp(40px, 6vw, 112px); align-items: center; }
:where(.pg-svc) .svp-mat__figs { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); align-items: end; }
:where(.pg-svc) .svp-mat__figs :is(figure,.is-figure) { margin: 0; }
:where(.pg-svc) .svp-mat__figs .ld { aspect-ratio: 4 / 5; }
:where(.pg-svc) .svp-mat__figs .frame { aspect-ratio: 1; }
:where(.pg-svc) .svp-mat__body .h2 { margin-bottom: clamp(24px, 2.6vw, 34px); }
:where(.pg-svc) .svp-mat__body .prose { margin-bottom: clamp(32px, 3.6vw, 48px); }
:where(.pg-svc) .svp-mat__list { margin: 0; border-bottom: 1px solid var(--line); }
:where(.pg-svc) .svp-mat__list > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6px 28px; padding: 20px 0; border-top: 1px solid var(--line); }
:where(.pg-svc) .svp-mat__list :is(dt,.is-dt) { font: 400 1.35rem/1.25 var(--serif); color: var(--ink); }
:where(.pg-svc) .svp-mat__list :is(dd,.is-dd) { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--muted); }

/* V. the image strip: four captioned frames, gently staggered */
:where(.pg-svc) .svp-strip { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(16px, 2.4vw, 36px); align-items: start; }
:where(.pg-svc) .svp-strip :is(li,.is-li):nth-child(even) { margin-top: clamp(0px, 5vw, 80px); }
:where(.pg-svc) .svp-strip :is(figure,.is-figure) { margin: 0; }
:where(.pg-svc) .svp-strip .frame { aspect-ratio: 3 / 4; }

/* VI. before we meet: a surface panel with the bowl corner and an inset keyline */
:where(.pg-svc) .svp-prep {
  --r: clamp(64px, 7vw, 112px);
  position: relative;
  margin-top: clamp(56px, 7vw, 104px);
  padding: clamp(32px, 4.4vw, 64px) clamp(24px, 4.4vw, 64px) clamp(48px, 6vw, 88px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r) 0;
}
:where(.pg-svc) .svp-prep::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--brass); opacity: .5; border-radius: 0 0 calc(var(--r) - 8px) 0; pointer-events: none; }
:where(.pg-svc) .svp-prep .spec-label { margin-bottom: 18px; }
:where(.pg-svc) .svp-prep :is(ol,.is-ol) { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 88px); counter-reset: prep; }
:where(.pg-svc) .svp-prep :is(li,.is-li) { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 6px 14px; padding: 22px 0; border-top: 1px solid var(--line); counter-increment: prep; }
:where(.pg-svc) .svp-prep :is(li,.is-li)::before { content: counter(prep, upper-roman); grid-row: 1 / 3; font: italic 400 1.2rem/1.45 var(--serif); color: var(--brass-text); }
:where(.pg-svc) .svp-prep h3 { margin: 0; font: 400 1.4rem/1.25 var(--serif); color: var(--ink); }
:where(.pg-svc) .svp-prep :is(li,.is-li) p:where(:not(.lx-np)) { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--muted); }
:where(.pg-svc) .svp-prep__foot { margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }

/* VII. related services: the remodeling/renovation contrast, a featured card, then index rows */
:where(.pg-svc) .svp-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(16px, 2.4vw, 36px); margin-top: clamp(56px, 7vw, 104px); align-items: stretch; }
:where(.pg-svc) .svp-related .card--feature { margin-top: clamp(56px, 7vw, 104px); }
:where(.pg-svc) .svp-related .spec-label { margin-bottom: 0; padding-bottom: 18px; }

@media (max-width: 1024px) {
  :where(.pg-svc) .svp-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-svc) .svp-mat { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-svc) .svp-mat__figs { max-width: 640px; }
  :where(.pg-svc) .svp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-svc) .svp-diff { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  :where(.pg-svc) .svp-col { max-width: 40rem; }
}
@media (max-width: 600px) {
  :where(.pg-svc) .svp-scope, :where(.pg-svc) .svp-strip, :where(.pg-svc) .svp-prep :is(ol,.is-ol) { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-svc) .svp-strip :is(li,.is-li):nth-child(even) { margin-top: 0; }
  :where(.pg-svc) .svp-strip .frame { aspect-ratio: 4 / 3; }
  :where(.pg-svc) .svp-mat__list > div { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-svc) .svp-prep :is(li,.is-li) { grid-template-columns: 2rem minmax(0, 1fr); }
  :where(.pg-svc) .svp-mat__figs { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  :where(.pg-svc) .svp-mat__figs .ld { aspect-ratio: 4 / 3; }
  :where(.pg-svc) .svp-mat__figs :is(figure,.is-figure) + :is(figure,.is-figure) { width: 62%; justify-self: end; }
}

/* ---------- Design Your Project (design-your-project.html) ---------- scope .pg-dyp */

/* ==========================================================================
   Design Your Project: a compact hero, then a full-width app area for the
   future 3D configurator: the stage (#configurator-root, about 70vh), an
   options panel with the five steps as disabled controls, and a summary
   panel with the estimate placeholder and actions. Page classes: .dyp-*
   ========================================================================== */

/* ---------- Compact hero: heading left, lead right ---------- */
:where(.pg-dyp) .dyp-hero { padding: clamp(56px, 7vw, 112px) 0 clamp(40px, 5vw, 72px); }
:where(.pg-dyp) .dyp-hero .phero__copy { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(40px, 6vw, 112px); align-items: end; }
:where(.pg-dyp) .dyp-hero .eyebrow { grid-column: 1 / -1; }
:where(.pg-dyp) .dyp-hero .display { margin-bottom: 0; }
:where(.pg-dyp) .dyp-hero__aside .lead { margin-bottom: 18px; }

/* ---------- App area: wider than the text column, so the stage reads as full width ---------- */
:where(.pg-dyp) .dyp-app { padding-bottom: var(--section); }
:where(.pg-dyp) .dyp-app__in { max-width: 1680px; margin: 0 auto; padding: 0 clamp(16px, 2.4vw, 40px); }

/* axonometric line drawing (placeholder for the model); maps --wf-* to palette tokens */
:where(.pg-dyp) .wf { display: block; width: 100%; height: 100%; overflow: visible;
  --wf-line: var(--ink); --wf-top: var(--surface); --wf-left: var(--surface-2);
  --wf-right: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
  --wf-glass: color-mix(in srgb, var(--primary) 9%, var(--surface)); --wf-acc: var(--brass); --wf-grid: var(--line); }
:where(.pg-dyp) .wf polygon, :where(.pg-dyp) .wf line { vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-width: 1; }
:where(.pg-dyp) .wf .wf-t { fill: var(--wf-top); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-dyp) .wf .wf-l { fill: var(--wf-left); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-dyp) .wf .wf-r { fill: var(--wf-right); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-dyp) .wf .wf-g { fill: var(--wf-glass); stroke: var(--wf-line); stroke-opacity: .32; }
:where(.pg-dyp) .wf .wf-m { stroke: var(--wf-line); stroke-opacity: .26; }
:where(.pg-dyp) .wf .wf-grid { stroke: var(--wf-grid); }
:where(.pg-dyp) .wf .wf-pad { fill: none; stroke: var(--wf-line); stroke-opacity: .28; stroke-dasharray: 4 4; }
:where(.pg-dyp) .wf .wf-pool { fill: color-mix(in srgb, var(--wf-acc) 12%, transparent); stroke: var(--wf-line); stroke-opacity: .35; }
:where(.pg-dyp) .wf .wf-k { fill: none; stroke: var(--wf-acc); }

/* the stage: the shared placeholder stage, held at about 70vh, copy beside a ghosted model */
:where(.pg-dyp) .stage.dyp-stage {
  aspect-ratio: auto; height: 70vh; min-height: 540px; max-height: 900px;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); place-items: center stretch;
  gap: 32px clamp(32px, 5vw, 96px);
  padding: clamp(40px, 5vw, 88px) clamp(28px, 5.4vw, 104px) clamp(64px, 6vw, 96px);
  text-align: left;
}
:where(.pg-dyp) .dyp-stage .stage__inner { justify-items: start; max-width: 40rem; }
:where(.pg-dyp) .dyp-stage .stage__title { font-size: clamp(2rem, 1.2rem + 2.3vw, 3.4rem); line-height: 1.04; text-wrap: balance; }
:where(.pg-dyp) .dyp-stage .stage__text { max-width: 30em; }
:where(.pg-dyp) .dyp-stage__art { position: relative; z-index: 2; width: 100%; max-width: 640px; aspect-ratio: 524 / 452; justify-self: center; opacity: .9; }
:where(.pg-dyp) .dyp-stage__flag { position: absolute; top: clamp(26px, 2.6vw, 34px); right: clamp(28px, 2.8vw, 38px); z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: .45rem .8rem; border: 1px solid var(--brass); font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); background: var(--surface); }

/* panels under the stage: options (the five steps) beside the summary */
:where(.pg-dyp) .dyp-panels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(16px, 2.4vw, 36px); align-items: start; }
:where(.pg-dyp) .dyp-panel { position: relative; padding: clamp(26px, 3.2vw, 48px); background: var(--surface); border: 1px solid var(--line); }
:where(.pg-dyp) .dyp-panel::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-dyp) .dyp-panel .eyebrow { margin-bottom: 14px; }
:where(.pg-dyp) .dyp-panel .eyebrow::before { display: none; }
:where(.pg-dyp) .dyp-panel__title { margin: 0; font: 300 clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.008em; color: var(--ink); }
:where(.pg-dyp) .dyp-panel__title em { font-style: italic; font-weight: 400; color: var(--brass-text); }
:where(.pg-dyp) .dyp-panel__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 32px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }

:where(.pg-dyp) .dyp-steps { list-style: none; margin: 0; padding: 0; }
:where(.pg-dyp) .dyp-step { display: grid; grid-template-columns: 2.6rem minmax(0, .85fr) minmax(0, 1.35fr); gap: 12px clamp(16px, 2vw, 28px); align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
:where(.pg-dyp) .dyp-step:last-child { border-bottom: 0; padding-bottom: 0; }
:where(.pg-dyp) .dyp-step__n { padding-top: 3px; font: italic 300 1.5rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-dyp) .dyp-step__t { margin: 0 0 6px; font: 400 1.55rem/1.1 var(--serif); color: var(--ink); }
:where(.pg-dyp) .dyp-step__d { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
:where(.pg-dyp) .dyp-opts { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:where(.pg-dyp) .dyp-opts[disabled] { cursor: not-allowed; }
/* disabled options: dashed outlines say "not yet" without hiding what is coming */
:where(.pg-dyp) .dyp-opt { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: .66rem .9rem .62rem; border: 1px dashed var(--line-strong); font: 500 .62rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); cursor: not-allowed; }
:where(.pg-dyp) .dyp-opt input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
:where(.pg-dyp) .dyp-sw { flex: none; width: 14px; height: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); }
:where(.pg-dyp) .dyp-sw--stone { background: repeating-linear-gradient(0deg, var(--line-strong) 0 1px, var(--surface-2) 1px 4px); }
:where(.pg-dyp) .dyp-sw--brick { background: repeating-linear-gradient(0deg, var(--line-strong) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--line-strong) 0 1px, var(--surface-2) 1px 6px); }
:where(.pg-dyp) .dyp-sw--render { background: var(--bg); }
:where(.pg-dyp) .dyp-sw--timber { background: repeating-linear-gradient(90deg, var(--brass) 0 1px, color-mix(in srgb, var(--brass) 22%, var(--surface)) 1px 3px); }
:where(.pg-dyp) .dyp-field { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; width: 100%; }
:where(.pg-dyp) .dyp-field__l { font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
:where(.pg-dyp) .dyp-range { flex: 1 1 160px; min-width: 0; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: not-allowed; }
:where(.pg-dyp) .dyp-range::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
:where(.pg-dyp) .dyp-range::-moz-range-track { height: 1px; background: var(--line-strong); }
:where(.pg-dyp) .dyp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -6px; background: var(--surface); border: 1px solid var(--line-strong); }
:where(.pg-dyp) .dyp-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 0; background: var(--surface); border: 1px solid var(--line-strong); }
:where(.pg-dyp) .dyp-field output { font: italic 400 1rem/1.3 var(--serif); color: var(--muted); }
:where(.pg-dyp) .dyp-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px dashed var(--line-strong); }
:where(.pg-dyp) .dyp-stepper button { appearance: none; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); font: 400 1rem/1 var(--sans); cursor: not-allowed; }
:where(.pg-dyp) .dyp-stepper output { min-width: 2.2em; text-align: center; font: italic 400 1.05rem/1 var(--serif); color: var(--muted); }

/* summary */
:where(.pg-dyp) .dyp-summary { --r: clamp(64px, 7vw, 112px); position: sticky; top: 24px; border-radius: 0 0 var(--r) 0; padding-bottom: clamp(48px, 5vw, 76px); }
:where(.pg-dyp) .dyp-summary::before { border-radius: 0 0 calc(var(--r) - 6px) 0; }
:where(.pg-dyp) .dyp-sum { margin: 22px 0 0; border-top: 1px solid var(--line); }
:where(.pg-dyp) .dyp-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
:where(.pg-dyp) .dyp-sum :is(dt,.is-dt) { font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
:where(.pg-dyp) .dyp-sum :is(dd,.is-dd) { margin: 0; text-align: right; font: italic 400 1.02rem/1.4 var(--serif); color: var(--muted); }
:where(.pg-dyp) .dyp-est { margin-top: 28px; }
:where(.pg-dyp) .dyp-est .spec-label { margin-bottom: 8px; }
:where(.pg-dyp) .dyp-est__v { margin: 0 0 8px; font: 300 clamp(1.6rem, 1.3rem + .8vw, 2.1rem)/1.1 var(--serif); color: var(--brass-text); }
:where(.pg-dyp) .dyp-est__note { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
:where(.pg-dyp) .dyp-actions { display: grid; justify-items: start; gap: 4px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
:where(.pg-dyp) .dyp-actions .btn { margin-bottom: 14px; }
:where(.pg-dyp) .dyp-actions__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
:where(.pg-dyp) .dyp-actions__note { margin: 6px 0 0; min-height: 1.6em; font-size: .86rem; line-height: 1.6; color: var(--muted); }

/* ---------- I. How it will work ---------- */
:where(.pg-dyp) .dyp-how .ph-flag { margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 1180px) {
  :where(.pg-dyp) .dyp-panels { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-dyp) .dyp-summary { position: relative; top: auto; }
}
@media (max-width: 1024px) {
  :where(.pg-dyp) .dyp-hero .phero__copy { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-dyp) .dyp-hero .display { margin-bottom: clamp(24px, 2.8vw, 40px); }
  :where(.pg-dyp) .stage.dyp-stage { height: auto; min-height: 72vh; max-height: none; grid-template-columns: minmax(0, 1fr); place-items: center; align-content: center; text-align: center; padding-top: clamp(72px, 9vw, 96px); }
  :where(.pg-dyp) .dyp-stage .stage__inner { justify-items: center; }
  :where(.pg-dyp) .dyp-stage__art { order: -1; max-width: 420px; }
}
@media (max-width: 760px) {
  :where(.pg-dyp) .dyp-step { grid-template-columns: 2.2rem minmax(0, 1fr); }
  :where(.pg-dyp) .dyp-opts { grid-column: 2; }
  :where(.pg-dyp) .dyp-panel__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :where(.pg-dyp) .stage.dyp-stage { min-height: 74vh; padding: 64px 22px 72px; }
  :where(.pg-dyp) .dyp-stage__art { max-width: 240px; }
  :where(.pg-dyp) .dyp-stage .stage__inner .sky { display: none; }
  :where(.pg-dyp) .dyp-stage__flag { top: 22px; right: 22px; }
  :where(.pg-dyp) .dyp-step { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-dyp) .dyp-opts { grid-column: 1; }
  :where(.pg-dyp) .dyp-step__n { padding-top: 0; }
}

/* ---------- Portfolio (portfolio.html) ---------- scope .pg-portfolio */

/* ==========================================================================
   Portfolio: text-only hero, a note on photography, service filter chips
   (aria-pressed) and placeholder entries drawn in CSS from the brand motifs:
   the LD contour with its keyline, skyline bars, a plan sheet and an
   elevation with the chamfer. No photographs. Page classes: .pf-*
   ========================================================================== */

/* ---------- Filter bar ---------- */
:where(.pg-portfolio) .pf-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 40px;
  margin-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
}
:where(.pg-portfolio) .pf-bar__lbl { display: block; margin: 0 0 14px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-portfolio) .pf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
:where(.pg-portfolio) .pf-chip {
  appearance: none; margin: 0; cursor: pointer;
  padding: .82rem 1.15rem .8rem;
  border: 1px solid var(--muted); border-radius: 1px;
  background: transparent; color: var(--ink);
  font: 500 .64rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
:where(.pg-portfolio) .pf-chip:hover { border-color: var(--ink); color: var(--brass-text); }
:where(.pg-portfolio) .pf-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
:where(.pg-portfolio) .pf-chip:focus-visible { outline-offset: 3px; }
:where(.pg-portfolio) .pf-status { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- Placeholder entries ---------- */
:where(.pg-portfolio) .pf-grid { margin-top: clamp(40px, 5vw, 64px); }
:where(.pg-portfolio) .pf-grid > :is(li,.is-li)[hidden] { display: none; }
:where(.pg-portfolio) .pf-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; }
:where(.pg-portfolio) .pf-meta .card__tag { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  :where(.pg-portfolio) .pf-grid > :is(li,.is-li).pf-in { animation: fade .9s var(--ease) both; }
}

/* the art sits in the shared .ph-card__well (surface-2, 4:3); everything is decorative */
:where(.pg-portfolio) .pf-art { position: absolute; inset: 0; pointer-events: none; }

/* 1. the LD contour: stem, foot and bowl in ink, the gold keyline traced inside, skyline bars within */
:where(.pg-portfolio) .pf-mono { position: absolute; left: 50%; top: 50%; height: 66%; aspect-ratio: 360 / 573; transform: translate(-50%, -50%); }
:where(.pg-portfolio) .pf-mono::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-top: 0; border-bottom-right-radius: 75% 47%; opacity: .36; }
:where(.pg-portfolio) .pf-mono::after { content: ""; position: absolute; top: 0; left: 19%; right: 11%; bottom: 11%; border: 1px solid var(--brass); border-top: 0; border-bottom-right-radius: 72% 45%; }
:where(.pg-portfolio) .pf-mono .sky { position: absolute; left: 32%; bottom: 19%; height: 70%; transform: none; }
:where(.pg-portfolio) .pf-mono .sky :is(i,.is-i) { opacity: .9; }

/* 2. skyline on a horizon: the bars standing on a brushed rule above a receding ground plane */
:where(.pg-portfolio) .pf-art--sky::before {
  content: ""; position: absolute; left: -30%; right: -30%; bottom: -10%; height: 46%;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 34px);
  transform: perspective(300px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .95), transparent 92%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, .95), transparent 92%);
}
:where(.pg-portfolio) .pf-horizon { position: absolute; left: 16%; right: 16%; bottom: 38%; height: 1px; background: var(--brushed); }
:where(.pg-portfolio) .pf-art--sky .sky { position: absolute; left: 50%; bottom: 38%; height: 64px; transform: translateX(-50%) scale(1.5); transform-origin: 50% 100%; }

/* 3. a plan sheet: a fine grid, room partitions, the quarter-round corner and its keyline */
:where(.pg-portfolio) .pf-plan {
  position: absolute; left: 15%; right: 15%; top: 14%; bottom: 14%;
  border: 1px solid color-mix(in srgb, var(--ink) 36%, transparent);
  border-radius: 0 0 34% 0 / 0 0 46% 0;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 16px);
}
:where(.pg-portfolio) .pf-plan::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--brass); border-radius: 0 0 30% 0 / 0 0 42% 0; opacity: .85; }
:where(.pg-portfolio) .pf-plan :is(i,.is-i) { position: absolute; display: block; background: color-mix(in srgb, var(--ink) 42%, transparent); }
:where(.pg-portfolio) .pf-plan :is(i,.is-i):nth-child(1) { left: 42%; top: 0; width: 1px; height: 58%; }
:where(.pg-portfolio) .pf-plan :is(i,.is-i):nth-child(2) { left: 0; top: 58%; width: 66%; height: 1px; }
:where(.pg-portfolio) .pf-plan :is(i,.is-i):nth-child(3) { left: 66%; top: 34%; width: 1px; height: 24%; }
:where(.pg-portfolio) .pf-plan :is(i,.is-i):nth-child(4) { left: 42%; top: 34%; width: 34%; height: 1px; }

/* 4. an elevation: stone coursing under a 45-degree chamfered peak, one opening keylined in gold */
:where(.pg-portfolio) .pf-elev {
  --c: 22%;
  position: absolute; left: 24%; right: 24%; top: 16%; bottom: 22%;
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent), color-mix(in srgb, var(--ink) 9%, transparent)),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 1px, transparent 1px 11px);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
:where(.pg-portfolio) .pf-elev::after { content: ""; position: absolute; left: 18%; bottom: 0; width: 22%; height: 52%; border: 1px solid var(--brass); border-bottom: 0; background: var(--surface-2); }
:where(.pg-portfolio) .pf-ground { position: absolute; left: 12%; right: 12%; bottom: 22%; height: 1px; background: var(--brushed); }
:where(.pg-portfolio) .pf-art--elev .sky { position: absolute; right: 13%; bottom: 22%; transform: none; }

@media (max-width: 600px) {
  :where(.pg-portfolio) .pf-bar { align-items: flex-start; }
  :where(.pg-portfolio) .pf-chip { padding: .78rem .95rem .76rem; letter-spacing: .16em; }
}

/* ---------- Process (process.html) ---------- scope .pg-process */

/* ==========================================================================
   Process: the four steps as a rising skyline (overview), then each step in
   depth with a small stepped meter, communication principles on the band,
   and after handover. Page classes: .pr-*
   ========================================================================== */

/* ---------- I. The sequence: stepped skyline bars rising toward the keys ---------- */
:where(.pg-process) .pr-climb-wrap { position: relative; margin-top: clamp(64px, 8vw, 120px); padding-top: 16px; }
:where(.pg-process) .pr-climb {
  --rise: clamp(44px, 5.6vw, 92px);
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 52px);
  align-items: end;
}
:where(.pg-process) .pr-climb :is(li,.is-li) { position: relative; padding: 0 0 calc(var(--s) * var(--rise) + 28px) 28px; }
:where(.pg-process) .pr-climb :is(li,.is-li)::after { /* the tread: a hairline at each step's head */
  content: ""; position: absolute; left: 0; right: calc(-1 * clamp(20px, 3vw, 52px)); top: -16px; height: 1px; background: var(--line);
}
:where(.pg-process) .pr-climb :is(li,.is-li):last-child::after { right: 0; }
:where(.pg-process) .pr-climb__bar { /* a chamfered skyline bar from the tread to the baseline */
  position: absolute; left: 0; top: -16px; bottom: 0; width: 6px;
  background: var(--brass);
  clip-path: polygon(0 0, 100% 6px, 100% 100%, 0 100%);
  transform-origin: bottom;
}
:where(.pg-process) .pr-climb :is(li,.is-li):last-child .pr-climb__bar { width: 9px; clip-path: polygon(0 0, 100% 9px, 100% 100%, 0 100%); }
:where(.pg-process) .pr-climb__n { display: block; font: italic 300 1.6rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-process) .pr-climb__name { margin: 14px 0 10px; font: 400 clamp(1.6rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); }
:where(.pg-process) .pr-climb__name a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brass), var(--brass)) 0 100% / 0 1px no-repeat; transition: color .7s var(--ease), background-size 1s var(--ease-io); }
:where(.pg-process) .pr-climb__name a:hover, :where(.pg-process) .pr-climb__name a:focus-visible { color: var(--brass-text); background-size: 100% 1px; }
:where(.pg-process) .pr-climb p:where(:not(.lx-np)):not(.pr-climb__name) { margin: 0; max-width: 20em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-process) .pr-climb__base { display: block; height: 1px; background: var(--brushed); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  :where(.pg-process) .pr-climb-wrap.reveal .pr-climb__bar { transition: transform 1.4s var(--ease); transition-delay: calc(1.1s + var(--s) * .12s); }
  :where(.pg-process) .pr-climb-wrap.reveal.is-pending .pr-climb__bar { transform: scaleY(0); }
}

/* ---------- II. Each step in depth ---------- */
:where(.pg-process) .pr-stages { margin-top: clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
:where(.pg-process) .pr-stage {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 36px); row-gap: 36px;
  padding: clamp(48px, 6vw, 88px) 0;
  border-top: 1px solid var(--line);
}
:where(.pg-process) .pr-stage__line { position: absolute; left: 0; top: -1px; width: clamp(64px, 9vw, 132px); height: 1px; background: var(--brushed); transform-origin: left; }
:where(.pg-process) .pr-stage__head { grid-column: 1 / 6; align-self: start; position: sticky; top: 32px; }
:where(.pg-process) .pr-stage__n { display: block; font: italic 300 clamp(3rem, 2.2rem + 2.4vw, 4.8rem)/.9 var(--serif); color: var(--brass-text); }
/* stepped meter: four rising bars, lit up to the current step */
:where(.pg-process) .pr-meter { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin: 24px 0 22px; }
:where(.pg-process) .pr-meter :is(i,.is-i) { display: block; width: 6px; background: var(--line); clip-path: polygon(0 0, 100% 6px, 100% 100%, 0 100%); }
:where(.pg-process) .pr-meter :is(i,.is-i):nth-child(1) { height: 40%; }
:where(.pg-process) .pr-meter :is(i,.is-i):nth-child(2) { height: 60%; }
:where(.pg-process) .pr-meter :is(i,.is-i):nth-child(3) { height: 80%; }
:where(.pg-process) .pr-meter :is(i,.is-i):nth-child(4) { height: 100%; width: 8px; clip-path: polygon(0 0, 100% 8px, 100% 100%, 0 100%); }
:where(.pg-process) .pr-meter :is(i,.is-i).on { background: var(--brass); }
:where(.pg-process) .pr-stage__title { margin: 0 0 18px; font: 300 clamp(2.1rem, 1.4rem + 2vw, 3.2rem)/1.04 var(--serif); letter-spacing: -.01em; color: var(--ink); }
:where(.pg-process) .pr-stage__head .prose { max-width: 24em; }
:where(.pg-process) .pr-facts { grid-column: 7 / 13; margin: 0; padding-top: clamp(6px, 1.4vw, 20px); }
:where(.pg-process) .pr-facts > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 10px 28px; padding: 24px 0 26px; border-top: 1px solid var(--line); }
:where(.pg-process) .pr-facts > div:first-child { border-top: 0; padding-top: 0; }
:where(.pg-process) .pr-facts :is(dt,.is-dt) { display: flex; align-items: baseline; gap: 12px; padding-top: .45em; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
:where(.pg-process) .pr-facts :is(dt,.is-dt)::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--brass); transform: translateY(-.3em); }
:where(.pg-process) .pr-facts :is(dd,.is-dd) { margin: 0; max-width: 34em; color: var(--muted); }
:where(.pg-process) .pr-note { margin: clamp(32px, 4vw, 48px) 0 0; font-size: .92rem; color: var(--muted); }

/* ---------- III. Communication principles on the band ---------- */
:where(.pg-process) .pr-band .sec-intro .prose { color: var(--band-muted); }
:where(.pg-process) .pr-principles {
  list-style: none; margin: clamp(60px, 7vw, 108px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px clamp(24px, 3vw, 52px);
}
:where(.pg-process) .pr-principles :is(li,.is-li) { position: relative; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--band-line); }
:where(.pg-process) .pr-principles :is(li,.is-li)::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--band-brass); }
:where(.pg-process) .pr-principles h3 { margin: 0 0 12px; font: 400 clamp(1.45rem, 1.2rem + .7vw, 1.85rem)/1.12 var(--serif); color: var(--band-ink); }
:where(.pg-process) .pr-principles p:where(:not(.lx-np)) { margin: 0; max-width: 22em; font-size: .97rem; line-height: 1.7; color: var(--band-muted); }

/* ---------- IV. After handover ---------- */
:where(.pg-process) .pr-warranty {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 112px); align-items: end;
  margin-top: clamp(48px, 6vw, 88px);
}
:where(.pg-process) .pr-warranty .ph-panel__title { margin-bottom: 0; }
:where(.pg-process) .pr-warranty .ph-panel__text { margin: 0 0 18px; max-width: 32em; }

@media (max-width: 1024px) {
  :where(.pg-process) .pr-climb { --rise: 0px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; align-items: start; }
  :where(.pg-process) .pr-climb :is(li,.is-li) { padding-bottom: 0; }
  :where(.pg-process) .pr-climb :is(li,.is-li)::after { right: 0; }
  :where(.pg-process) .pr-climb__bar { top: -16px; bottom: auto; height: calc(48px + var(--s) * 18px); }
  :where(.pg-process) .pr-climb__base { display: none; }
  :where(.pg-process) .pr-stage__head, :where(.pg-process) .pr-facts { grid-column: 1 / -1; }
  :where(.pg-process) .pr-stage__head { position: static; }
  :where(.pg-process) .pr-facts { padding-top: 0; }
  :where(.pg-process) .pr-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-process) .pr-warranty { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :where(.pg-process) .pr-climb { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  :where(.pg-process) .pr-facts > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  :where(.pg-process) .pr-facts :is(dt,.is-dt) { padding-top: 0; }
  :where(.pg-process) .pr-principles { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* ---------- About (about.html) ---------- scope .pg-about */

/* ==========================================================================
   About: the name as a brand specimen and a two-word lexicon, the approach,
   where Lux Domus builds, and clearly marked placeholders for the team,
   licensing and client words. Page classes: .ab-*
   ========================================================================== */

/* ---------- I. The name: a light specimen panel beside a two-word lexicon ---------- */
:where(.pg-about) .ab-name {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px clamp(40px, 6vw, 112px); align-items: start;
}
:where(.pg-about) .ab-spec { margin: 0; }
:where(.pg-about) .ab-spec__panel {
  --r: clamp(84px, 10vw, 150px);
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3.4; padding: clamp(32px, 5vw, 72px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 var(--r) 0;
}
:where(.pg-about) .ab-spec__panel::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--brass); opacity: .6; border-radius: 0 0 calc(var(--r) - 12px) 0; pointer-events: none; }
:where(.pg-about) .ab-spec .lx-logo { height: clamp(112px, 11vw, 168px); }
:where(.pg-about) .ab-spec .cap { max-width: 34em; align-items: baseline; line-height: 1.7; }
:where(.pg-about) .ab-spec .cap::before { transform: translateY(-.3em); }
:where(.pg-about) .ab-lex .h2 { margin-bottom: clamp(36px, 4vw, 56px); }
:where(.pg-about) .ab-lex :is(dl,.is-dl) { margin: 0; border-bottom: 1px solid var(--line); }
:where(.pg-about) .ab-lex__entry { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px clamp(24px, 3vw, 44px); align-items: baseline; padding: clamp(24px, 2.8vw, 36px) 0; border-top: 1px solid var(--line); }
:where(.pg-about) .ab-lex :is(dt,.is-dt) { display: grid; gap: 6px; }
:where(.pg-about) .ab-lex__word { font: 300 clamp(3rem, 2rem + 3.2vw, 5.2rem)/.9 var(--serif); letter-spacing: -.015em; color: var(--ink); }
:where(.pg-about) .ab-lex__gram { font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-about) .ab-lex :is(dd,.is-dd) { margin: 0; color: var(--muted); }
:where(.pg-about) .ab-lex__gloss { display: block; margin-bottom: 6px; font: italic 400 clamp(1.45rem, 1.2rem + .7vw, 1.85rem)/1.15 var(--serif); color: var(--brass-text); }
:where(.pg-about) .ab-name + .statement { margin-top: clamp(72px, 9vw, 136px); }

/* ---------- II. Approach: one image beside four principles ---------- */
:where(.pg-about) .ab-approach {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 56px clamp(40px, 6vw, 112px); align-items: start;
  margin-top: clamp(56px, 7vw, 104px);
}
:where(.pg-about) .ab-approach__fig { margin: 0; position: sticky; top: 32px; }
:where(.pg-about) .ab-approach__fig .frame { aspect-ratio: 4 / 5; }
:where(.pg-about) .ab-approach__fig img { object-position: 38% 50%; }
:where(.pg-about) .ab-princ { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
:where(.pg-about) .ab-princ :is(li,.is-li) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px clamp(24px, 3vw, 44px); padding: clamp(28px, 3.2vw, 44px) 0; border-top: 1px solid var(--line); }
:where(.pg-about) .ab-princ__k { display: flex; align-items: baseline; gap: 12px; margin: 0; padding-top: .7rem; font: 500 .62rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-about) .ab-princ__k::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--brass); transform: translateY(-.3em); }
:where(.pg-about) .ab-princ h3 { margin: 0 0 12px; font: 300 clamp(2rem, 1.4rem + 1.6vw, 2.9rem)/1.04 var(--serif); letter-spacing: -.01em; color: var(--ink); }
:where(.pg-about) .ab-princ__body .prose { max-width: 26em; }

/* ---------- III. Where Lux Domus builds: copy beside a typographic index of the service area ---------- */
:where(.pg-about) .ab-where { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px clamp(40px, 6vw, 112px); align-items: start; }
:where(.pg-about) .ab-where__copy .h2 { margin-bottom: clamp(24px, 2.6vw, 34px); }
:where(.pg-about) .ab-where__copy .prose { margin-bottom: 28px; }
:where(.pg-about) .ab-addr { margin: 0 0 22px; font-style: normal; font-size: .95rem; line-height: 1.9; color: var(--text); }
:where(.pg-about) .ab-cities { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
:where(.pg-about) .ab-cities :is(li,.is-li) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; padding: clamp(16px, 1.8vw, 24px) 0; border-top: 1px solid var(--line); }
:where(.pg-about) .ab-cities__name { font: 300 clamp(1.9rem, 1.3rem + 1.8vw, 3rem)/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
:where(.pg-about) .ab-cities :is(li,.is-li).is-wide .ab-cities__name { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); font-style: italic; color: var(--muted); }
:where(.pg-about) .ab-cities__tag { display: inline-flex; align-items: flex-end; gap: 12px; margin-left: auto; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-text); }
:where(.pg-about) .ab-cities__tag .sky { transform: none; height: 18px; }

/* ---------- IV. Team: a founder placeholder with CSS portrait art ---------- */
:where(.pg-about) .ab-founder {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 48px clamp(40px, 6vw, 112px); align-items: center;
  margin-top: clamp(56px, 7vw, 104px);
}
:where(.pg-about) .ab-portrait {
  --r: clamp(84px, 10vw, 150px);
  position: relative; overflow: hidden; margin: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  aspect-ratio: 4 / 5; padding: clamp(24px, 3vw, 40px);
  background: var(--surface-2);
  border-radius: 0 0 var(--r) 0;
}
:where(.pg-about) .ab-portrait::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--brass); opacity: .7; border-radius: 0 0 calc(var(--r) - 12px) 0; pointer-events: none; }
/* the LD contour drawn in CSS: stem, foot and bowl in ink, the gold keyline traced inside, skyline bars within */
:where(.pg-about) .ab-mono { position: absolute; left: 50%; top: 46%; height: 52%; aspect-ratio: 360 / 573; transform: translate(-50%, -50%); }
:where(.pg-about) .ab-mono::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-top: 0; border-bottom-right-radius: 75% 47%; opacity: .32; }
:where(.pg-about) .ab-mono::after { content: ""; position: absolute; top: 0; left: 19%; right: 11%; bottom: 11%; border: 1px solid var(--brass); border-top: 0; border-bottom-right-radius: 72% 45%; }
:where(.pg-about) .ab-mono .sky { position: absolute; left: 32%; bottom: 19%; height: 70%; transform: none; }
:where(.pg-about) .ab-portrait .ph-l { position: relative; z-index: 1; padding-bottom: 4px; white-space: normal; text-align: right; }
:where(.pg-about) .ab-founder__body .h3 { margin-bottom: 20px; font-weight: 300; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.06; }
:where(.pg-about) .ab-founder__body .prose { margin-bottom: 26px; }

/* ---------- V. Credentials and client words ---------- */
:where(.pg-about) .ab-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(56px, 7vw, 104px); align-items: stretch; }
:where(.pg-about) .ab-trust .ph-panel { display: flex; flex-direction: column; }
:where(.pg-about) .ab-trust .ph-panel .ph-panel__text { margin-bottom: 0; }
:where(.pg-about) .ab-trust .ph-panel .ph-flag { margin-top: auto; padding-top: 28px; }
:where(.pg-about) .ab-trust .bowl { margin: 0; display: flex; flex-direction: column; }
:where(.pg-about) .ab-trust .bowl blockquote { margin: 0 0 28px; font-weight: 300; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; }
:where(.pg-about) .ab-trust .bowl :is(figcaption,.is-figcaption) .ph { white-space: normal; }
:where(.pg-about) .ab-trust .bowl :is(figcaption,.is-figcaption) { margin-top: auto; font: 500 .62rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--band-muted); }

@media (max-width: 1024px) {
  :where(.pg-about) .ab-name, :where(.pg-about) .ab-approach, :where(.pg-about) .ab-where, :where(.pg-about) .ab-founder { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-about) .ab-spec { max-width: 560px; }
  :where(.pg-about) .ab-approach__fig { position: static; max-width: 560px; }
  :where(.pg-about) .ab-approach__fig .frame { aspect-ratio: 4 / 3; }
  :where(.pg-about) .ab-portrait { max-width: 440px; }
  :where(.pg-about) .ab-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :where(.pg-about) .ab-lex__entry, :where(.pg-about) .ab-princ :is(li,.is-li) { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-about) .ab-princ__k { padding-top: 0; }
  :where(.pg-about) .ab-cities__tag { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Book a Consultation (book-a-consultation.html) ---------- scope .pg-book */

/* ==========================================================================
   Book a Consultation only (scoped with .bk-). The page is the form, so it
   ends with the alternative contact details instead of the closing CTA.
   ========================================================================== */
/* hero: the sculptural stair stands in a portrait LD frame */
:where(.pg-book) .bk-hero .phero__media { width: min(100%, 440px); }
:where(.pg-book) .bk-hero .phero__media .ld { aspect-ratio: 4 / 5; }
:where(.pg-book) .bk-hero .phero__media img { object-position: 50% 60%; }

/* I. what to bring: a short heading beside four hairline notes */
:where(.pg-book) .bk-bring { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px clamp(40px, 6vw, 112px); align-items: start; margin-top: clamp(72px, 9vw, 136px); }
:where(.pg-book) .bk-bring .h3 { max-width: 12em; text-wrap: balance; }
:where(.pg-book) .bk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); }
:where(.pg-book) .bk-list :is(li,.is-li) { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); font-size: .97rem; line-height: 1.6; color: var(--muted); }
:where(.pg-book) .bk-list :is(li,.is-li)::before { content: ""; width: 20px; height: 1px; margin-top: .8em; background: var(--brass); }

/* placeholder notice: a quiet surface strip with the inset keyline and a small skyline */
:where(.pg-book) .bk-notice {
  position: relative;
  display: flex; align-items: center; gap: 16px clamp(20px, 2.4vw, 32px);
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
}
:where(.pg-book) .bk-notice::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-book) .bk-notice .sky { flex: none; height: 30px; transform: none; }
:where(.pg-book) .bk-notice p:where(:not(.lx-np)) { margin: 0; max-width: 48em; font-size: 1rem; line-height: 1.6; color: var(--text); }
:where(.pg-book) .bk-notice strong { display: block; margin-bottom: 6px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }

/* II. choice groups (timing, contact method): the approved check pattern, set in quiet hairline tiles */
:where(.pg-book) .bk-group { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.pg-book) .bk-group :is(legend,.is-legend) { float: left; width: 100%; margin: 0 0 14px; padding: 0; }
:where(.pg-book) .bk-group :is(legend,.is-legend) + * { clear: both; }
:where(.pg-book) .bk-group:focus-within :is(legend,.is-legend) { color: var(--brass-text); }
:where(.pg-book) .bk-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(10px, 1.4vw, 16px); }
:where(.pg-book) .bk-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.pg-book) .bk-choice { padding: 13px 16px; border: 1px solid var(--line); transition: border-color .6s var(--ease), background-color .6s var(--ease); }
:where(.pg-book) .bk-choice:hover { border-color: var(--muted); }
:where(.pg-book) .bk-choice:has(input:checked) { border-color: var(--brass-text); background: var(--bg); }

/* the intro stays in view beside the longer form on desktop */
@media (min-width: 1025px) { :where(.pg-book) .bk-request .form-intro { position: sticky; top: 32px; } }

/* placeholder contact details: three columns on hairlines (one column below 1024px) */
:where(.pg-book) .bk-alt { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(16px, 2.4vw, 36px); }
:where(.pg-book) .bk-alt :is(li,.is-li) { min-width: 0; padding-top: 22px; border-top: 1px solid var(--line); }
:where(.pg-book) .bk-alt .spec-label { margin-bottom: 12px; }
:where(.pg-book) .bk-alt__v { margin: 0 0 10px; font: 400 clamp(1.35rem, 1.15rem + .6vw, 1.7rem)/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
:where(.pg-book) .bk-alt__note { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 1024px) { :where(.pg-book) .bk-alt { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

@media (max-width: 1024px) {
  :where(.pg-book) .bk-bring { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :where(.pg-book) .bk-list, :where(.pg-book) .bk-choices, :where(.pg-book) .bk-choices--3 { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-book) .bk-notice { align-items: flex-start; }
}

/* ---------- Contact (contact.html) ---------- scope .pg-contact */

/* ==========================================================================
   Contact only (scoped with .ct-): headquarters details, the service area,
   a map placeholder stage and a short placeholder form.
   ========================================================================== */
:where(.pg-contact) .ct-hero .phero__media img { object-position: 68% 50%; }

/* I. headquarters: heading and note beside a hairline list of details */
:where(.pg-contact) .ct-hq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
:where(.pg-contact) .ct-hq .h2 { margin-bottom: clamp(24px, 2.6vw, 34px); }
:where(.pg-contact) .ct-details { margin: 0; border-top: 1px solid var(--line); }
:where(.pg-contact) .ct-details > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--line); }
:where(.pg-contact) .ct-details :is(dt,.is-dt) { font: 500 .66rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-contact) .ct-details :is(dd,.is-dd) { margin: 0; min-width: 0; font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.35 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
:where(.pg-contact) .ct-details :is(dd,.is-dd) .ph-l { margin-left: .4em; }

/* II. service area: six places on hairlines (3, then 2, then 1 per row) */
:where(.pg-contact) .ct-area { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); counter-reset: ct; }
:where(.pg-contact) .ct-area :is(li,.is-li) { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-content: start; padding: clamp(22px, 2.4vw, 32px) 0; border-top: 1px solid var(--line); counter-increment: ct; }
:where(.pg-contact) .ct-area :is(li,.is-li)::before { content: counter(ct, decimal-leading-zero); grid-row: 1 / span 2; font: italic 300 1.5rem/1.2 var(--serif); color: var(--taupe); }
:where(.pg-contact) .ct-area__name { font: 400 clamp(1.5rem, 1.2rem + .9vw, 2.1rem)/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
:where(.pg-contact) .ct-area__tag { margin-top: 10px; font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }

/* the map placeholder: the approved stage, a little wider than tall on desktop; no embed */
:where(.pg-contact) .ct-map { margin-top: clamp(56px, 7vw, 104px); }
@media (min-width: 1025px) { :where(.pg-contact) .stage.ct-map { aspect-ratio: 21 / 9; min-height: 480px; } }

/* placeholder notice: a quiet surface strip with the inset keyline and a small skyline */
:where(.pg-contact) .ct-notice {
  position: relative;
  display: flex; align-items: center; gap: 16px clamp(20px, 2.4vw, 32px);
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
}
:where(.pg-contact) .ct-notice::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-contact) .ct-notice .sky { flex: none; height: 30px; transform: none; }
:where(.pg-contact) .ct-notice p:where(:not(.lx-np)) { margin: 0; max-width: 48em; font-size: 1rem; line-height: 1.6; color: var(--text); }
:where(.pg-contact) .ct-notice strong { display: block; margin-bottom: 6px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }

@media (max-width: 1024px) {
  :where(.pg-contact) .ct-hq { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-contact) .ct-area { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :where(.pg-contact) .ct-details > div { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-contact) .ct-area { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-contact) .ct-notice { align-items: flex-start; }
}

/* ---------- Cart (cart.html) ---------- scope .pg-cart */

/* ==========================================================================
   Cart only (scoped with .cart-): a placeholder until the cart is connected.
   Empty state on the approved stage, a labeled layout preview of one line
   item (controls disabled), and a summary panel with bracketed placeholders.
   ========================================================================== */
/* placeholder notice: a quiet surface strip with the inset keyline and a small skyline */
:where(.pg-cart) .cart-notice {
  position: relative;
  display: flex; align-items: center; gap: 16px clamp(20px, 2.4vw, 32px);
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
}
:where(.pg-cart) .cart-notice::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-cart) .cart-notice .sky { flex: none; height: 30px; transform: none; }
:where(.pg-cart) .cart-notice p:where(:not(.lx-np)) { margin: 0; max-width: 48em; font-size: 1rem; line-height: 1.6; color: var(--text); }
:where(.pg-cart) .cart-notice strong { display: block; margin-bottom: 6px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }

:where(.pg-cart) .cart-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(16px, 2.4vw, 36px); align-items: start; }
:where(.pg-cart) .cart-main { display: grid; gap: clamp(16px, 2.4vw, 36px); min-width: 0; }

/* empty state: the placeholder stage, shorter than the configurator's */
:where(.pg-cart) .stage.cart-empty { aspect-ratio: auto; min-height: 440px; }
:where(.pg-cart) .cart-empty .stage__title { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); }

/* layout preview: one example line item, clearly labeled; nothing in it is real or active */
:where(.pg-cart) .cart-preview { position: relative; padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); }
:where(.pg-cart) .cart-preview::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-cart) .cart-preview__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
:where(.pg-cart) .cart-preview__head .spec-label { margin: 0; color: var(--ink); }
:where(.pg-cart) .cart-lines { list-style: none; margin: 0; padding: 0; }
/* the line: thumbnail, name and controls on the left; the price set right */
:where(.pg-cart) .cart-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-areas: "thumb info cost" "thumb ctrl cost";
  align-items: start; gap: 18px clamp(18px, 2.4vw, 32px);
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
:where(.pg-cart) .cart-line__thumb { grid-area: thumb; display: flex; align-items: flex-end; aspect-ratio: 1; padding: 10px; background: var(--surface-2); }
:where(.pg-cart) .cart-line__info { grid-area: info; min-width: 0; }
:where(.pg-cart) .cart-line__ctrl { grid-area: ctrl; }
:where(.pg-cart) .cart-line__cost { grid-area: cost; justify-items: end; text-align: right; }
:where(.pg-cart) .cart-line__thumb .sky { height: 26px; transform: none; opacity: .8; }
:where(.pg-cart) .cart-line__name { margin: 0 0 6px; font: 400 clamp(1.3rem, 1.1rem + .5vw, 1.6rem)/1.2 var(--serif); color: var(--ink); }
:where(.pg-cart) .cart-line__meta { margin: 0; font-size: .9rem; color: var(--muted); }
:where(.pg-cart) .cart-line__ctrl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(20px, 2.4vw, 32px); }
:where(.pg-cart) .cart-cell { display: grid; gap: 8px; }
:where(.pg-cart) .cart-cell__l { font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
:where(.pg-cart) .cart-qty { display: inline-grid; grid-template-columns: 36px 46px 36px; height: 42px; border: 1px solid var(--line-strong); }
:where(.pg-cart) .cart-qty button, :where(.pg-cart) .cart-qty input {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1;
  font: 400 1rem/1 var(--sans); text-align: center;
}
:where(.pg-cart) .cart-qty input { border-left: 1px solid var(--line); border-right: 1px solid var(--line); -moz-appearance: textfield; }
:where(.pg-cart) .cart-qty input::-webkit-outer-spin-button, :where(.pg-cart) .cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(.pg-cart) .cart-qty .is-disabled { cursor: not-allowed; }
:where(.pg-cart) .cart-line__price { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--muted); white-space: nowrap; }
:where(.pg-cart) .textlink.cart-line__remove.is-disabled, :where(.pg-cart) .textlink.cart-line__remove.is-disabled:hover { color: var(--muted); cursor: not-allowed; }
:where(.pg-cart) .textlink.cart-line__remove.is-disabled::after, :where(.pg-cart) .textlink.cart-line__remove.is-disabled:hover::after { width: 34%; }
:where(.pg-cart) .cart-preview__note { margin: 18px 0 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }

/* summary panel: surface, hairline, the inset keyline; it stays in view beside the main column on desktop */
:where(.pg-cart) .cart-summary { position: relative; min-width: 0; padding: clamp(28px, 3.4vw, 44px); background: var(--surface); border: 1px solid var(--line); }
:where(.pg-cart) .cart-summary::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-cart) .cart-summary .eyebrow { margin-bottom: 24px; }
@media (min-width: 1025px) { :where(.pg-cart) .cart-summary { position: sticky; top: 32px; } }
/* summary rows: tracked labels, bracketed placeholder values, the total in the serif */
:where(.pg-cart) .cart-totals { margin: 0 0 24px; border-top: 1px solid var(--line); }
:where(.pg-cart) .cart-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
:where(.pg-cart) .cart-totals :is(dt,.is-dt) { font: 500 .62rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
:where(.pg-cart) .cart-totals :is(dd,.is-dd) { margin: 0; font-size: 1rem; color: var(--muted); white-space: nowrap; }
:where(.pg-cart) .cart-totals .is-total { padding-top: 20px; border-bottom: 0; }
:where(.pg-cart) .cart-totals .is-total :is(dt,.is-dt) { color: var(--ink); }
:where(.pg-cart) .cart-totals .is-total :is(dd,.is-dd) { font: 400 1.6rem/1 var(--serif); color: var(--ink); }
:where(.pg-cart) .cart-summary__note { margin: 0 0 28px; font-size: .86rem; line-height: 1.6; color: var(--muted); }
:where(.pg-cart) .cart-summary__actions { display: grid; justify-items: start; gap: 14px; }
:where(.pg-cart) .cart-summary .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.5; }

@media (max-width: 1024px) {
  :where(.pg-cart) .cart-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :where(.pg-cart) .cart-line { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb info" "cost cost" "ctrl ctrl"; row-gap: 20px; }
  :where(.pg-cart) .cart-line__cost { justify-items: start; text-align: left; }
}
@media (max-width: 600px) {
  :where(.pg-cart) .cart-notice { align-items: flex-start; }
}

/* ---------- Checkout (checkout.html) ---------- scope .pg-checkout */

/* ==========================================================================
   Checkout only (scoped with .co-): a placeholder until checkout is connected.
   Step indicator, labeled contact and billing fields, a review recap, a
   payment placeholder box (no card fields are drawn) and an order summary.
   ========================================================================== */
/* placeholder notice: a quiet surface strip with the inset keyline and a small skyline */
:where(.pg-checkout) .co-notice {
  position: relative;
  display: flex; align-items: center; gap: 16px clamp(20px, 2.4vw, 32px);
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
}
:where(.pg-checkout) .co-notice::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-checkout) .co-notice .sky { flex: none; height: 30px; transform: none; }
:where(.pg-checkout) .co-notice p:where(:not(.lx-np)) { margin: 0; max-width: 48em; font-size: 1rem; line-height: 1.6; color: var(--text); }
:where(.pg-checkout) .co-notice strong { display: block; margin-bottom: 6px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }

/* step indicator: four steps on a hairline; the current one carries the chamfered bar and a brushed rule */
:where(.pg-checkout) .co-steps { list-style: none; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(16px, 2.4vw, 36px); }
:where(.pg-checkout) .co-steps :is(li,.is-li) { position: relative; display: flex; align-items: baseline; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
:where(.pg-checkout) .co-step__n { font: italic 300 1.5rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--taupe); }
:where(.pg-checkout) .co-steps :is(li,.is-li).is-current { color: var(--ink); }
:where(.pg-checkout) .co-steps :is(li,.is-li).is-current .co-step__n { color: var(--brass-text); }
:where(.pg-checkout) .co-steps :is(li,.is-li).is-current::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--brushed); }
:where(.pg-checkout) .co-steps :is(li,.is-li).is-current::after { content: ""; position: absolute; left: 0; top: -12px; width: 5px; height: 11px; background: var(--brass); clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); }

:where(.pg-checkout) .co-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(16px, 2.4vw, 36px); align-items: start; }

/* the form: four numbered groups on the approved form panel */
:where(.pg-checkout) .co-form { gap: 0; }
:where(.pg-checkout) .co-set { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.pg-checkout) .co-set + .co-set { margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--line); }
:where(.pg-checkout) .co-set__title { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; margin: 0 0 clamp(24px, 2.6vw, 32px); padding: 0; font: 400 clamp(1.5rem, 1.25rem + .7vw, 1.9rem)/1.1 var(--serif); color: var(--ink); }
:where(.pg-checkout) .co-set__n { font: italic 300 1.3rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-checkout) .co-set__body { clear: both; display: grid; gap: clamp(26px, 2.8vw, 36px); }
:where(.pg-checkout) .co-set:focus-within .co-set__title { color: var(--brass-text); }
:where(.pg-checkout) .co-form .form-actions { margin-top: clamp(40px, 4.4vw, 56px); }

/* review recap: placeholder rows (shares the summary row style; set after it below) */

/* payment: a clearly labeled placeholder box on the ground tone; the provider supplies the real fields later */
:where(.pg-checkout) .co-pay { position: relative; display: grid; justify-items: center; padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px); background: var(--bg); border: 1px solid var(--line); text-align: center; }
:where(.pg-checkout) .co-pay::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-checkout) .co-pay .sky { margin-bottom: 22px; }
:where(.pg-checkout) .co-pay__label { margin: 0 0 12px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-checkout) .co-pay__text { margin: 0 0 18px; max-width: 20em; font: 300 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.25 var(--serif); color: var(--ink); text-wrap: balance; }

/* summary panel: surface, hairline, the inset keyline; it stays in view beside the main column on desktop */
:where(.pg-checkout) .co-summary { position: relative; min-width: 0; padding: clamp(28px, 3.4vw, 44px); background: var(--surface); border: 1px solid var(--line); }
:where(.pg-checkout) .co-summary::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-checkout) .co-summary .eyebrow { margin-bottom: 24px; }
@media (min-width: 1025px) { :where(.pg-checkout) .co-summary { position: sticky; top: 32px; } }
/* summary rows: tracked labels, bracketed placeholder values, the total in the serif */
:where(.pg-checkout) .co-totals { margin: 0 0 24px; border-top: 1px solid var(--line); }
:where(.pg-checkout) .co-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
:where(.pg-checkout) .co-totals :is(dt,.is-dt) { font: 500 .62rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
:where(.pg-checkout) .co-totals :is(dd,.is-dd) { margin: 0; font-size: 1rem; color: var(--muted); white-space: nowrap; }
:where(.pg-checkout) .co-totals .is-total { padding-top: 20px; border-bottom: 0; }
:where(.pg-checkout) .co-totals .is-total :is(dt,.is-dt) { color: var(--ink); }
:where(.pg-checkout) .co-totals .is-total :is(dd,.is-dd) { font: 400 1.6rem/1 var(--serif); color: var(--ink); }
:where(.pg-checkout) .co-set .co-recap { margin: 0; }
:where(.pg-checkout) .co-set .co-recap > div:last-child { border-bottom: 0; }
:where(.pg-checkout) .co-items { list-style: none; margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
:where(.pg-checkout) .co-items :is(li,.is-li) { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; }
:where(.pg-checkout) .co-items__thumb { display: flex; align-items: flex-end; aspect-ratio: 1; padding: 8px; background: var(--surface-2); }
:where(.pg-checkout) .co-items__thumb .sky { height: 18px; transform: none; opacity: .8; }
:where(.pg-checkout) .co-items__info { display: grid; gap: 4px; min-width: 0; }
:where(.pg-checkout) .co-items__name { font: 400 1.25rem/1.2 var(--serif); color: var(--ink); }
:where(.pg-checkout) .co-items__meta { font-size: .86rem; line-height: 1.5; color: var(--muted); }

:where(.pg-checkout) .co-help { margin-top: clamp(48px, 6vw, 80px); }

@media (max-width: 1024px) {
  :where(.pg-checkout) .co-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  :where(.pg-checkout) .co-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :where(.pg-checkout) .co-steps { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  :where(.pg-checkout) .co-notice { align-items: flex-start; }
  :where(.pg-checkout) .co-help .sep { display: none; }
  :where(.pg-checkout) .co-help .nw { display: block; }
}

/* ---------- Legal pages: Privacy Policy, Terms, Accessibility ---------- scope .pg-legal */

/* ==========================================================================
   Legal pages only (privacy, terms, accessibility; scoped with .lg-).
   A placeholder notice in the hero, then a contents list beside the
   long-form outline; every section awaits counsel's text.
   ========================================================================== */
:where(.pg-legal) .lg-updated { margin: clamp(28px, 3vw, 40px) 0 0; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* placeholder notice: a quiet surface strip with the inset keyline and a small skyline */
:where(.pg-legal) .lg-notice {
  position: relative;
  display: flex; align-items: center; gap: 16px clamp(20px, 2.4vw, 32px);
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
}
:where(.pg-legal) .lg-notice::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); opacity: .35; pointer-events: none; }
:where(.pg-legal) .lg-notice .sky { flex: none; height: 30px; transform: none; }
:where(.pg-legal) .lg-notice p:where(:not(.lx-np)) { margin: 0; max-width: 48em; font-size: 1rem; line-height: 1.6; color: var(--text); }
:where(.pg-legal) .lg-notice strong { display: block; margin-bottom: 6px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }
:where(.pg-legal) .lg-hero .lg-notice { margin: clamp(32px, 3.6vw, 48px) 0 0; }

/* contents list beside the text; it stays in view on desktop */
:where(.pg-legal) .lg-layout { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 48px clamp(48px, 7vw, 128px); align-items: start; }
:where(.pg-legal) .lg-toc { position: sticky; top: 32px; }
:where(.pg-legal) .lg-toc .spec-label { margin-bottom: 16px; }
:where(.pg-legal) .lg-toc :is(ol,.is-ol) { list-style: none; margin: 0; padding: 0; counter-reset: lg; border-top: 1px solid var(--line); }
:where(.pg-legal) .lg-toc :is(li,.is-li) { counter-increment: lg; border-bottom: 1px solid var(--line); }
:where(.pg-legal) .lg-toc a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline; padding: .68rem 0; font-size: .9rem; line-height: 1.45; color: var(--muted); text-decoration: none; transition: color .6s var(--ease); }
:where(.pg-legal) .lg-toc a::before { content: counter(lg, decimal-leading-zero); font: italic 400 1rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-legal) .lg-toc a:hover, :where(.pg-legal) .lg-toc a:focus-visible { color: var(--ink); }
:where(.pg-legal) .lg-toc a:focus-visible { outline-offset: 2px; }

/* the outline: numbered serif headings, each followed by its bracketed placeholder */
:where(.pg-legal) .lg-layout .longform h2 { display: flex; align-items: baseline; gap: .6em; }
:where(.pg-legal) .lg-n { flex: none; min-width: 1.6em; font-style: italic; font-weight: 300; color: var(--brass-text); }
:where(.pg-legal) .lg-ph { color: var(--muted); }

/* placeholder contact details: three columns on hairlines (one column below 1024px) */
:where(.pg-legal) .lg-alt { list-style: none; margin: clamp(56px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(16px, 2.4vw, 36px); }
:where(.pg-legal) .lg-alt :is(li,.is-li) { min-width: 0; padding-top: 22px; border-top: 1px solid var(--line); }
:where(.pg-legal) .lg-alt .spec-label { margin-bottom: 12px; }
:where(.pg-legal) .lg-alt__v { margin: 0 0 10px; font: 400 clamp(1.35rem, 1.15rem + .6vw, 1.7rem)/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
:where(.pg-legal) .lg-alt__note { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 1024px) { :where(.pg-legal) .lg-alt { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

@media (max-width: 1024px) {
  :where(.pg-legal) .lg-layout { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-legal) .lg-toc { position: static; max-width: 34rem; }
}
@media (max-width: 600px) {
  :where(.pg-legal) .lg-notice { align-items: flex-start; }
}

/* ---------- Alternate homepage: Architect's Split (pattern) ---------- scope .pg-home-architects-split */

/* ==========================================================================
   Home theme option: Architect's Split (from design/pages/v1-layout2.html).
   Only the layout rules the shell lacks: the film plate, the axonometric line
   drawing, and the layout itself. The hero grid is renamed .asplit so it never
   meets the shell's .split (image beside text) component.
   ========================================================================== */
/* film plate: caption + pause control set on a surface chip inside a frame */
:where(.pg-home-architects-split) .plate {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: .55rem .9rem .55rem 1rem;
  background: var(--surface); color: var(--muted);
  font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
:where(.pg-home-architects-split) .plate .vidctl { color: var(--ink); }

/* axonometric line drawing (configurator placeholders); each context maps --wf-* to palette tokens */
:where(.pg-home-architects-split) .wf { display: block; width: 100%; height: 100%; overflow: visible;
  --wf-line: var(--ink); --wf-top: var(--surface); --wf-left: var(--surface-2);
  --wf-right: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
  --wf-glass: color-mix(in srgb, var(--primary) 9%, var(--surface)); --wf-acc: var(--brass); --wf-grid: var(--line); }
:where(.pg-home-architects-split) .wf polygon, :where(.pg-home-architects-split) .wf line { vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-width: 1; }
:where(.pg-home-architects-split) .wf .wf-t { fill: var(--wf-top); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-home-architects-split) .wf .wf-l { fill: var(--wf-left); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-home-architects-split) .wf .wf-r { fill: var(--wf-right); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-home-architects-split) .wf .wf-g { fill: var(--wf-glass); stroke: var(--wf-line); stroke-opacity: .32; }
:where(.pg-home-architects-split) .wf .wf-m { stroke: var(--wf-line); stroke-opacity: .26; }
:where(.pg-home-architects-split) .wf .wf-grid { stroke: var(--wf-grid); }
:where(.pg-home-architects-split) .wf .wf-pad { fill: none; stroke: var(--wf-line); stroke-opacity: .28; stroke-dasharray: 4 4; }
:where(.pg-home-architects-split) .wf .wf-pool { fill: color-mix(in srgb, var(--wf-acc) 12%, transparent); stroke: var(--wf-line); stroke-opacity: .35; }
:where(.pg-home-architects-split) .wf .wf-k { fill: none; stroke: var(--wf-acc); }

/* ==========================================================================
   Layout 2 / Architect's Split: split-screen hero with a title block, services
   in alternating rows, a materials strip, the process drawn as stepped
   skyline bars, a configurator panel, a placeholder portfolio grid and a
   full-width consultation band that runs into the footer.
   ========================================================================== */

/* ---------- Split hero: copy on the ground, film to the right edge ---------- */
:where(.pg-home-architects-split) .asplit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 0 clamp(40px, 5vw, 96px);
  padding-left: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter)));
  margin-bottom: calc(var(--section) + 24px);
}
:where(.pg-home-architects-split) .asplit__copy { grid-column: 1; grid-row: 1; max-width: 38rem; padding: clamp(64px, 8.4vw, 136px) 0 0; }
:where(.pg-home-architects-split) .asplit > .tblock { grid-column: 1; grid-row: 2; align-self: end; max-width: 38rem; }
:where(.pg-home-architects-split) .asplit__copy .lead { margin-bottom: clamp(36px, 4vw, 52px); }
:where(.pg-home-architects-split) .asplit__media { grid-column: 2; grid-row: 1 / 3; position: relative; margin: 0; padding: clamp(28px, 3.4vw, 48px) 0 0 24px; min-width: 0; }
:where(.pg-home-architects-split) .asplit__media .ld-frame { height: 100%; }
:where(.pg-home-architects-split) .ld.ld--split { aspect-ratio: auto; height: 100%; min-height: min(80vh, 780px); }
/* the source film carries a few black rows top and bottom: overscan them */
:where(.pg-home-architects-split) .ld.ld--split video { width: 100%; height: calc(100% + 18px); margin-top: -9px; object-fit: cover; object-position: 50% 50%; filter: saturate(.62) sepia(.12); }
:where(.pg-home-architects-split) .asplit .plate { top: calc(clamp(28px, 3.4vw, 48px) + 30px); left: calc(24px + 30px); }
@media (prefers-reduced-motion: no-preference) {
  :where(.pg-home-architects-split) .asplit .ld::after { animation: fade 2s var(--ease) 1.9s both; }
}
/* the drawing's title block: four plain facts in hairline cells */
:where(.pg-home-architects-split) .tblock {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(48px, 5.4vw, 80px) 0 clamp(8px, 2vw, 32px);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
:where(.pg-home-architects-split) .tblock > div { padding: 14px 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:where(.pg-home-architects-split) .tblock :is(dt,.is-dt) { margin: 0 0 6px; font: 500 .6rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-home-architects-split) .tblock :is(dd,.is-dd) { margin: 0; font: 400 1.14rem/1.3 var(--serif); color: var(--ink); }

/* ---------- I. Services: alternating image / text rows ---------- */
:where(.pg-home-architects-split) .alt { display: grid; gap: clamp(88px, 11vw, 168px); margin-top: clamp(64px, 8vw, 120px); }
:where(.pg-home-architects-split) .alt__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); align-items: center; }
:where(.pg-home-architects-split) .alt__media { grid-column: 1 / 8; grid-row: 1; position: relative; margin: 0; }
:where(.pg-home-architects-split) .alt__body { grid-column: 9 / 13; grid-row: 1; }
:where(.pg-home-architects-split) .alt__row:nth-child(even) .alt__media { grid-column: 6 / 13; }
:where(.pg-home-architects-split) .alt__row:nth-child(even) .alt__body { grid-column: 1 / 5; }
:where(.pg-home-architects-split) .alt__media .ld, :where(.pg-home-architects-split) .alt__media .frame { aspect-ratio: 4 / 3; }
:where(.pg-home-architects-split) .alt__n { display: block; margin-bottom: 18px; font: italic 300 1.6rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-home-architects-split) .alt__title { margin: 0 0 20px; font: 300 clamp(2.1rem, 1.4rem + 2vw, 3.2rem)/1.04 var(--serif); letter-spacing: -.01em; color: var(--ink); }
:where(.pg-home-architects-split) .alt__body .prose { margin-bottom: 26px; }
:where(.pg-home-architects-split) .alt__list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--line); }
:where(.pg-home-architects-split) .alt__list :is(li,.is-li) { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font: 500 .66rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
:where(.pg-home-architects-split) .alt__list :is(li,.is-li)::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--brass); }
/* one inset photograph overlapping the Kitchens & Baths frame */
:where(.pg-home-architects-split) .alt__inset { position: absolute; left: clamp(-36px, -2.4vw, -16px); bottom: clamp(-64px, -5vw, -32px); width: 34%; margin: 0; padding: 8px; background: var(--bg); z-index: 3; }
:where(.pg-home-architects-split) .alt__inset .frame { aspect-ratio: 4 / 5; }
:where(.pg-home-architects-split) .alt__row--inset .alt__media > .cap { padding-left: 36%; }

/* ---------- II. Materials strip on a surface band ---------- */
:where(.pg-home-architects-split) .mat-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(80px, 10vw, 148px) 0; margin-bottom: var(--section); }
:where(.pg-home-architects-split) .mat { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(16px, 2.4vw, 36px); }
:where(.pg-home-architects-split) .mat :is(figure,.is-figure) { margin: 0; }
:where(.pg-home-architects-split) .mat .frame { aspect-ratio: 3 / 4; }
:where(.pg-home-architects-split) .mat :is(figcaption,.is-figcaption) { margin-top: 20px; }
:where(.pg-home-architects-split) .mat__k { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
:where(.pg-home-architects-split) .mat__k::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--brass); }
:where(.pg-home-architects-split) .mat__d { display: block; font: 400 1.3rem/1.25 var(--serif); color: var(--ink); }
:where(.pg-home-architects-split) .mat-band .stock-note { margin: clamp(40px, 5vw, 64px) 0 0; font-size: .86rem; color: var(--muted); }

/* ---------- III. Process drawn as stepped skyline bars ---------- */
:where(.pg-home-architects-split) .climb-wrap { position: relative; margin-top: clamp(64px, 8vw, 120px); padding-top: 16px; }
:where(.pg-home-architects-split) .climb {
  --rise: clamp(44px, 5.6vw, 92px);
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 52px);
  align-items: end;
}
:where(.pg-home-architects-split) .climb :is(li,.is-li) { position: relative; padding: 0 0 calc(var(--s) * var(--rise) + 28px) 28px; }
:where(.pg-home-architects-split) .climb :is(li,.is-li)::after { /* the tread: a hairline at each step's head */
  content: ""; position: absolute; left: 0; right: calc(-1 * clamp(20px, 3vw, 52px)); top: -16px; height: 1px; background: var(--line);
}
:where(.pg-home-architects-split) .climb :is(li,.is-li):last-child::after { right: 0; }
:where(.pg-home-architects-split) .climb__bar { /* a chamfered skyline bar from the tread to the baseline */
  position: absolute; left: 0; top: -16px; bottom: 0; width: 6px;
  background: var(--brass);
  clip-path: polygon(0 0, 100% 6px, 100% 100%, 0 100%);
  transform-origin: bottom;
}
:where(.pg-home-architects-split) .climb :is(li,.is-li):last-child .climb__bar { width: 9px; clip-path: polygon(0 0, 100% 9px, 100% 100%, 0 100%); }
:where(.pg-home-architects-split) .climb__n { display: block; font: italic 300 1.6rem/1 var(--serif); color: var(--brass-text); }
:where(.pg-home-architects-split) .climb h3 { margin: 14px 0 10px; font: 400 clamp(1.6rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); color: var(--ink); }
:where(.pg-home-architects-split) .climb p:where(:not(.lx-np)) { margin: 0; max-width: 20em; font-size: .97rem; line-height: 1.7; color: var(--muted); }
:where(.pg-home-architects-split) .climb__base { display: block; height: 1px; background: var(--brushed); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  :where(.pg-home-architects-split) .climb-wrap.reveal .climb__bar { transition: transform 1.4s var(--ease); transition-delay: calc(1.1s + var(--s) * .12s); }
  :where(.pg-home-architects-split) .climb-wrap.reveal.is-pending .climb__bar { transform: scaleY(0); }
}

/* ---------- IV. Design Your Project panel ---------- */
:where(.pg-home-architects-split) .dyp {
  --r: clamp(64px, 7vw, 112px);
  position: relative;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center;
  gap: 40px clamp(32px, 5vw, 88px);
  padding: clamp(28px, 4.6vw, 72px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 var(--r) 0;
}
:where(.pg-home-architects-split) .dyp::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--brass); opacity: .6; border-radius: 0 0 calc(var(--r) - 10px) 0; pointer-events: none; }
:where(.pg-home-architects-split) .dyp .eyebrow { margin-bottom: 22px; }
:where(.pg-home-architects-split) .dyp .h2 { margin-bottom: 24px; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem); }
:where(.pg-home-architects-split) .dyp .prose { margin-bottom: 22px; }
:where(.pg-home-architects-split) .dyp .ph-flag { margin-bottom: 30px; }
:where(.pg-home-architects-split) .dyp__stage { position: relative; aspect-ratio: 5 / 4; padding: 28px 28px 56px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
:where(.pg-home-architects-split) .dyp__label { position: absolute; left: 22px; bottom: 18px; font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* ---------- V. Portfolio placeholders, four across ---------- */
:where(.pg-home-architects-split) .ph-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:where(.pg-home-architects-split) .ph-cards--4 .card__title { font-size: 1.45rem; }

/* ---------- VI. Consultation band, full width, running into the footer ---------- */
:where(.pg-home-architects-split) .band--cta { margin-bottom: 0; padding-bottom: clamp(96px, 12vw, 168px); }
:where(.pg-home-architects-split) .cta2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px clamp(40px, 6vw, 112px); align-items: end; }
:where(.pg-home-architects-split) .band--cta .eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }
:where(.pg-home-architects-split) .band--cta .h2 { max-width: 9em; margin-bottom: 26px; }
:where(.pg-home-architects-split) .band--cta .prose { max-width: 30em; }
:where(.pg-home-architects-split) .cta2__act { display: grid; justify-items: start; gap: 32px; }
:where(.pg-home-architects-split) .cta2__act .band__contact { line-height: 2; }
:where(.pg-home-architects-split) .cta2__act .band__contact .line { display: block; }
:where(.pg-home-architects-split) .cta-sky { position: absolute; right: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); bottom: 0; pointer-events: none; }
:where(.pg-home-architects-split) .cta-sky .band__sky-in { height: clamp(120px, 14vw, 210px); }
:where(.pg-home-architects-split) .band--cta + .site-foot { padding-top: clamp(64px, 8vw, 112px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :where(.pg-home-architects-split) .asplit { grid-template-columns: minmax(0, 1fr); padding-left: 0; margin-bottom: var(--section); }
  :where(.pg-home-architects-split) .asplit__copy { max-width: none; padding: clamp(48px, 8vw, 80px) var(--gutter) clamp(40px, 6vw, 64px); }
  :where(.pg-home-architects-split) .asplit__copy > * { max-width: 40rem; }
  :where(.pg-home-architects-split) .asplit__media { grid-column: 1; grid-row: 2; }
  :where(.pg-home-architects-split) .asplit > .tblock { grid-column: 1; grid-row: 3; max-width: none; margin: clamp(48px, 8vw, 72px) var(--gutter) 0; }
  :where(.pg-home-architects-split) .asplit__media { padding: 0 var(--gutter) 0 calc(var(--gutter) + 24px); }
  :where(.pg-home-architects-split) .ld.ld--split { height: auto; min-height: 0; aspect-ratio: 4 / 3.3; }
  :where(.pg-home-architects-split) .asplit .plate { top: 30px; left: calc(var(--gutter) + 24px + 30px); }
  :where(.pg-home-architects-split) .alt__row, :where(.pg-home-architects-split) .alt__row:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  :where(.pg-home-architects-split) .alt__media, :where(.pg-home-architects-split) .alt__row:nth-child(even) .alt__media { grid-column: 1; grid-row: 1; }
  :where(.pg-home-architects-split) .alt__body, :where(.pg-home-architects-split) .alt__row:nth-child(even) .alt__body { grid-column: 1; grid-row: 2; max-width: 36rem; }
  :where(.pg-home-architects-split) .alt__row--inset .alt__body { padding-top: 40px; }
  :where(.pg-home-architects-split) .mat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-home-architects-split) .climb { --rise: 0px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; align-items: start; }
  :where(.pg-home-architects-split) .climb :is(li,.is-li) { padding-bottom: 0; }
  :where(.pg-home-architects-split) .climb :is(li,.is-li)::after { right: 0; }
  :where(.pg-home-architects-split) .climb__bar { top: -16px; bottom: auto; height: calc(48px + var(--s) * 18px); }
  :where(.pg-home-architects-split) .climb__base { display: none; }
  :where(.pg-home-architects-split) .dyp { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-architects-split) .ph-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-home-architects-split) .cta2 { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-architects-split) .cta-sky { display: none; }
}
@media (max-width: 600px) {
  :where(.pg-home-architects-split) .tblock { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-architects-split) .asplit .plate { left: calc(var(--gutter) + 24px + 20px); top: 20px; padding: .45rem .75rem; }
  :where(.pg-home-architects-split) .asplit .plate > span { display: none; }
  :where(.pg-home-architects-split) .alt__inset { width: 42%; left: -8px; bottom: -40px; padding: 6px; }
  :where(.pg-home-architects-split) .alt__row--inset .alt__media > .cap { padding-left: 44%; }
  :where(.pg-home-architects-split) .mat { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-architects-split) .mat .frame { aspect-ratio: 3 / 2; }
  :where(.pg-home-architects-split) .climb { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  :where(.pg-home-architects-split) .ph-cards--4 { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-architects-split) .dyp__stage { aspect-ratio: 1 / 1; padding: 12px 12px 48px; }
}


/* ---------- Alternate homepage: Editorial Scroll (pattern) ---------- scope .pg-home-editorial-scroll */

/* ==========================================================================
   Home theme option: Editorial Scroll (from design/pages/v1-layout3.html).
   Only the layout rules the shell lacks: the film plate, the axonometric line
   drawing, and the layout itself. The services rail script sits at the end of
   the content slot.
   ========================================================================== */
/* film plate: caption + pause control set on a surface chip inside a frame */
:where(.pg-home-editorial-scroll) .plate {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: .55rem .9rem .55rem 1rem;
  background: var(--surface); color: var(--muted);
  font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
:where(.pg-home-editorial-scroll) .plate .vidctl { color: var(--ink); }

/* axonometric line drawing (configurator placeholders); each context maps --wf-* to palette tokens */
:where(.pg-home-editorial-scroll) .wf { display: block; width: 100%; height: 100%; overflow: visible;
  --wf-line: var(--ink); --wf-top: var(--surface); --wf-left: var(--surface-2);
  --wf-right: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
  --wf-glass: color-mix(in srgb, var(--primary) 9%, var(--surface)); --wf-acc: var(--brass); --wf-grid: var(--line); }
:where(.pg-home-editorial-scroll) .wf polygon, :where(.pg-home-editorial-scroll) .wf line { vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-width: 1; }
:where(.pg-home-editorial-scroll) .wf .wf-t { fill: var(--wf-top); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-home-editorial-scroll) .wf .wf-l { fill: var(--wf-left); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-home-editorial-scroll) .wf .wf-r { fill: var(--wf-right); stroke: var(--wf-line); stroke-opacity: .5; }
:where(.pg-home-editorial-scroll) .wf .wf-g { fill: var(--wf-glass); stroke: var(--wf-line); stroke-opacity: .32; }
:where(.pg-home-editorial-scroll) .wf .wf-m { stroke: var(--wf-line); stroke-opacity: .26; }
:where(.pg-home-editorial-scroll) .wf .wf-grid { stroke: var(--wf-grid); }
:where(.pg-home-editorial-scroll) .wf .wf-pad { fill: none; stroke: var(--wf-line); stroke-opacity: .28; stroke-dasharray: 4 4; }
:where(.pg-home-editorial-scroll) .wf .wf-pool { fill: color-mix(in srgb, var(--wf-acc) 12%, transparent); stroke: var(--wf-line); stroke-opacity: .35; }
:where(.pg-home-editorial-scroll) .wf .wf-k { fill: none; stroke: var(--wf-acc); }

/* ==========================================================================
   Layout 3 / Editorial Scroll: a cinematic 21:9 film band carrying the
   stacked logo, a large serif manifesto, services on a horizontal rail of
   keyline cards, a materials and craft mosaic, the process in a 2x2 grid,
   the configurator as a full-width navy stage, and a consultation form
   preview.
   ========================================================================== */

/* ---------- Cinematic film band with the stacked logo ---------- */
:where(.pg-home-editorial-scroll) .cine {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  aspect-ratio: 21 / 9; min-height: 460px; max-height: 86vh;
  background: var(--band-bg); color: var(--band-ink);
  --ink: var(--band-ink); --muted: var(--band-muted); --brass-text: var(--band-brass); --focus: var(--band-focus);
  --logo-ink: var(--band-logo-ink); --logo-accent: var(--band-logo-accent);
}
:where(.pg-home-editorial-scroll) .cine video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.62) sepia(.12); }
:where(.pg-home-editorial-scroll) .cine__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--band-bg) 86%, transparent) 0%, color-mix(in srgb, var(--band-bg) 76%, transparent) 42%, color-mix(in srgb, var(--band-bg) 34%, transparent) 74%, transparent 100%),
    linear-gradient(to top, color-mix(in srgb, var(--band-bg) 40%, transparent), transparent 45%);
}
:where(.pg-home-editorial-scroll) .cine__in { width: 100%; display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); }
:where(.pg-home-editorial-scroll) .cine__logo { flex: none; height: clamp(120px, 14vw, 212px); }
:where(.pg-home-editorial-scroll) .cine__rule { flex: none; align-self: stretch; width: 1px; background: var(--brushed); opacity: .8; transform-origin: top; }
:where(.pg-home-editorial-scroll) .cine__txt { position: relative; max-width: 34rem; }
:where(.pg-home-editorial-scroll) .cine__txt::before { /* a soft scrim anchored to the words, so they hold AA over any frame of the film */
  content: ""; position: absolute; z-index: -1; inset: -95% -42% -95% -40%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--band-bg) 74%, transparent) 0%, color-mix(in srgb, var(--band-bg) 66%, transparent) 50%, color-mix(in srgb, var(--band-bg) 30%, transparent) 78%, transparent 100%);
}
:where(.pg-home-editorial-scroll) .cine__txt .eyebrow { margin-bottom: 18px; color: var(--band-ink); }
:where(.pg-home-editorial-scroll) .cine__line { margin: 0; text-wrap: balance; font: italic 300 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.2 var(--serif); color: var(--band-ink); }
:where(.pg-home-editorial-scroll) .cine__line em { font-weight: 400; color: var(--band-brass); }
:where(.pg-home-editorial-scroll) .cine .plate { background: var(--band-bg); border: 1px solid var(--band-line); color: var(--band-muted); }
:where(.pg-home-editorial-scroll) .cine .plate .vidctl { color: var(--band-ink); border-bottom-color: var(--band-brass); }
:where(.pg-home-editorial-scroll) .cine .plate .vidctl:hover { color: var(--band-brass); }
:where(.pg-home-editorial-scroll) .cine .plate { right: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); bottom: clamp(18px, 2.4vw, 32px); }
@media (prefers-reduced-motion: no-preference) {
  :where(.pg-home-editorial-scroll) .cine video { animation: settle 6s var(--ease) .2s both; }
  :where(.pg-home-editorial-scroll) .cine__rule { animation: drawDown 2s var(--ease-io) .5s both; }
}

/* ---------- I. Manifesto ---------- */
:where(.pg-home-editorial-scroll) .manifesto { padding-top: var(--section); }
:where(.pg-home-editorial-scroll) .mf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); }
:where(.pg-home-editorial-scroll) .mf .display { grid-column: 1 / 10; margin-bottom: clamp(48px, 6vw, 96px); }
:where(.pg-home-editorial-scroll) .mf__aside { grid-column: 1 / 4; padding-top: .9rem; }
:where(.pg-home-editorial-scroll) .mf__aside .eyebrow { margin-bottom: 14px; }
:where(.pg-home-editorial-scroll) .mf__aside p:where(:not(.lx-np)):not(.eyebrow) { margin: 0; font-size: .92rem; line-height: 1.75; color: var(--muted); }
:where(.pg-home-editorial-scroll) .mf__body { grid-column: 5 / 13; }
:where(.pg-home-editorial-scroll) .mf__text {
  margin: 0 0 clamp(40px, 4.4vw, 60px);
  font: 300 clamp(1.7rem, 1.15rem + 1.9vw, 2.8rem)/1.26 var(--serif);
  letter-spacing: -.006em; color: var(--ink); text-wrap: pretty;
}
:where(.pg-home-editorial-scroll) .mf__text em { font-style: italic; font-weight: 400; color: var(--brass-text); }
:where(.pg-home-editorial-scroll) .mf__text::first-letter { float: left; margin: .02em .1em 0 0; font-size: 3.2em; line-height: .78; font-weight: 300; color: var(--brass-text); }

/* ---------- II. Services rail ---------- */
:where(.pg-home-editorial-scroll) .rail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px; }
:where(.pg-home-editorial-scroll) .rail-head .h2 { max-width: 12em; }
:where(.pg-home-editorial-scroll) .rail-head .prose { margin-top: 26px; }
:where(.pg-home-editorial-scroll) .rail-ctl { display: flex; align-items: center; gap: 12px; }
:where(.pg-home-editorial-scroll) .rail-ctl__count { margin-right: 14px; font: 500 .66rem/1 var(--sans); letter-spacing: .24em; color: var(--muted); }
:where(.pg-home-editorial-scroll) .rail-ctl__count b { font: italic 400 1.5rem/1 var(--serif); letter-spacing: 0; color: var(--brass-text); }
:where(.pg-home-editorial-scroll) .rail-btn {
  appearance: none; margin: 0; cursor: pointer;
  display: grid; place-items: center; width: 54px; height: 54px;
  border: 1px solid var(--muted); border-radius: 1px; background: transparent; color: var(--ink);
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
:where(.pg-home-editorial-scroll) .rail-btn:hover, :where(.pg-home-editorial-scroll) .rail-btn:focus-visible { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
:where(.pg-home-editorial-scroll) .rail-btn[aria-disabled="true"] { opacity: .38; cursor: default; background: transparent; color: var(--ink); border-color: var(--muted); }
:where(.pg-home-editorial-scroll) .rail-btn__arrow { position: relative; width: 20px; height: 1px; background: currentColor; }
:where(.pg-home-editorial-scroll) .rail-btn__arrow::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
:where(.pg-home-editorial-scroll) .rail-btn__arrow--l { transform: scaleX(-1); }
:where(.pg-home-editorial-scroll) .rail {
  --pad: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter)));
  position: relative;
  margin-top: clamp(48px, 6vw, 88px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  overscroll-behavior-x: contain;
  padding: 10px var(--pad) 12px;
  scrollbar-width: none;
}
:where(.pg-home-editorial-scroll) .rail::-webkit-scrollbar { display: none; }
:where(.pg-home-editorial-scroll) .rail:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
:where(.pg-home-editorial-scroll) .rail__track { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 2.4vw, 36px); width: max-content; }
:where(.pg-home-editorial-scroll) .rail__item { flex: none; width: clamp(272px, 27vw, 388px); scroll-snap-align: start; }
:where(.pg-home-editorial-scroll) .kcard .card__media { aspect-ratio: 4 / 5; }
:where(.pg-home-editorial-scroll) .kcard .card__body { padding-top: 24px; }
:where(.pg-home-editorial-scroll) .kcard .card__title { font-size: clamp(1.45rem, 1.2rem + .7vw, 1.85rem); }
:where(.pg-home-editorial-scroll) .kcard--end { height: 100%; }
:where(.pg-home-editorial-scroll) .kcard--end .kcard__panel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; padding: clamp(24px, 2.6vw, 36px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 clamp(64px, 7vw, 112px) 0;
}
:where(.pg-home-editorial-scroll) .kcard--end .kcard__panel::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--brass); opacity: .6; border-radius: 0 0 calc(clamp(64px, 7vw, 112px) - 10px) 0; pointer-events: none; }
:where(.pg-home-editorial-scroll) .kcard--end .sky--lg { margin-bottom: auto; }
:where(.pg-home-editorial-scroll) .kcard--end .card__title { margin-bottom: 14px; }
:where(.pg-home-editorial-scroll) .rail-foot { display: flex; align-items: center; gap: 28px; margin-top: clamp(28px, 3vw, 40px); }
:where(.pg-home-editorial-scroll) .rail__progress { position: relative; flex: 1 1 auto; height: 1px; background: var(--line); }
:where(.pg-home-editorial-scroll) .rail__progress :is(i,.is-i) { position: absolute; left: 0; top: -1px; height: 3px; width: 30%; background: var(--brushed); transition: left .3s linear; }
:where(.pg-home-editorial-scroll) .rail__hint { flex: none; margin: 0; font-size: .86rem; color: var(--muted); }

/* ---------- III. Materials and craft mosaic ---------- */
:where(.pg-home-editorial-scroll) .mosaic {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(84px, 9.4vw, 140px);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(56px, 7vw, 104px);
}
:where(.pg-home-editorial-scroll) .mo { position: relative; margin: 0; min-width: 0; }
:where(.pg-home-editorial-scroll) .mo > .frame, :where(.pg-home-editorial-scroll) .mo > .ld { height: 100%; }
:where(.pg-home-editorial-scroll) .mo--1 { grid-column: 1 / 5;  grid-row: 1 / 6; }
:where(.pg-home-editorial-scroll) .mo--2 { grid-column: 5 / 10; grid-row: 1 / 4; }
:where(.pg-home-editorial-scroll) .mo--3 { grid-column: 10 / 13; grid-row: 1 / 3; }
:where(.pg-home-editorial-scroll) .mo--4 { grid-column: 10 / 13; grid-row: 3 / 6; }
:where(.pg-home-editorial-scroll) .mo--5 { grid-column: 5 / 8;  grid-row: 4 / 8; }
:where(.pg-home-editorial-scroll) .mo--6 { grid-column: 8 / 10; grid-row: 4 / 6; }
:where(.pg-home-editorial-scroll) .mo--7 { grid-column: 1 / 5;  grid-row: 6 / 8; }
:where(.pg-home-editorial-scroll) .mo--8 { grid-column: 8 / 13; grid-row: 6 / 8; }
:where(.pg-home-editorial-scroll) .mo--1 img { object-position: 42% 50%; }
:where(.pg-home-editorial-scroll) .mo--6 img { object-position: 46% 30%; }
:where(.pg-home-editorial-scroll) .mo__cap {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: .55rem .9rem .5rem 0;
  background: var(--bg);
  font: 500 .6rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
:where(.pg-home-editorial-scroll) .mo__cap::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--brass); }
:where(.pg-home-editorial-scroll) .craft .stock-note { margin: clamp(36px, 4vw, 56px) 0 0; font-size: .86rem; color: var(--muted); }

/* ---------- IV. Process in a 2x2 grid on a surface band ---------- */
:where(.pg-home-editorial-scroll) .quad-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(80px, 10vw, 152px) 0; }
:where(.pg-home-editorial-scroll) .quad-wrap { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
:where(.pg-home-editorial-scroll) .quad-intro .h2 { margin-bottom: 26px; }
:where(.pg-home-editorial-scroll) .quad-intro .prose { margin-bottom: 26px; }
:where(.pg-home-editorial-scroll) .quad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
:where(.pg-home-editorial-scroll) .quad :is(li,.is-li) { position: relative; padding: clamp(28px, 3.4vw, 48px) clamp(20px, 3vw, 44px) clamp(32px, 3.6vw, 52px); border-bottom: 1px solid var(--line); }
:where(.pg-home-editorial-scroll) .quad :is(li,.is-li):nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; }
:where(.pg-home-editorial-scroll) .quad :is(li,.is-li)::before { content: ""; position: absolute; top: -11px; left: clamp(20px, 3vw, 44px); width: 5px; height: 11px; background: var(--brass); clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); }
:where(.pg-home-editorial-scroll) .quad :is(li,.is-li):nth-child(odd)::before { left: 0; }
:where(.pg-home-editorial-scroll) .quad__n { display: block; font: italic 300 clamp(3rem, 2.2rem + 2.4vw, 4.8rem)/.9 var(--serif); color: var(--brass-text); }
:where(.pg-home-editorial-scroll) .quad h3 { margin: 18px 0 10px; font: 400 clamp(1.6rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); color: var(--ink); }
:where(.pg-home-editorial-scroll) .quad p:where(:not(.lx-np)) { margin: 0; max-width: 22em; font-size: .97rem; line-height: 1.7; color: var(--muted); }

/* ---------- V. Configurator: full-width navy stage ---------- */
:where(.pg-home-editorial-scroll) .stage.stage--navy {
  --surface: var(--band-bg); --line: var(--band-line); --ink: var(--band-ink); --text: var(--band-ink);
  --muted: var(--band-muted); --brass-text: var(--band-brass); --brass: var(--band-brass); --focus: var(--band-focus);
  display: block; aspect-ratio: auto; min-height: 0;
  padding: clamp(64px, 8vw, 128px) 0 clamp(88px, 9vw, 136px);
  border: 0; border-top: 1px solid var(--band-line);
  background: var(--band-bg); color: var(--band-ink); text-align: left;
  --r: clamp(120px, 14vw, 196px);
}
:where(.pg-home-editorial-scroll) .stage--navy::after { display: none; }
:where(.pg-home-editorial-scroll) .stage--navy::before { inset: 14px; opacity: .55; }
:where(.pg-home-editorial-scroll) .stage3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: center; }
:where(.pg-home-editorial-scroll) .stage3__copy .eyebrow { margin-bottom: 26px; }
:where(.pg-home-editorial-scroll) .stage3__copy .eyebrow::before { display: block; }
:where(.pg-home-editorial-scroll) .stage3__flag { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: .45rem .8rem; border: 1px solid var(--band-brass); font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--band-brass); }
:where(.pg-home-editorial-scroll) .stage--navy .stage__title { margin-bottom: 22px; color: var(--band-ink); }
:where(.pg-home-editorial-scroll) .stage--navy .stage__title em { color: var(--band-brass); }
:where(.pg-home-editorial-scroll) .stage--navy .stage__text { max-width: 30em; margin-bottom: 30px; color: var(--band-muted); }
:where(.pg-home-editorial-scroll) .stage3__art { aspect-ratio: 5 / 4; }
:where(.pg-home-editorial-scroll) .stage3__art .wf {
  --wf-line: var(--band-ink);
  --wf-top: color-mix(in srgb, var(--band-ink) 9%, var(--band-bg));
  --wf-left: color-mix(in srgb, var(--band-ink) 4%, var(--band-bg));
  --wf-right: color-mix(in srgb, var(--band-ink) 6%, var(--band-bg));
  --wf-glass: color-mix(in srgb, var(--band-brass) 16%, var(--band-bg));
  --wf-acc: var(--band-brass); --wf-grid: var(--band-line);
}
:where(.pg-home-editorial-scroll) .stage--navy .stage__spec { left: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); bottom: clamp(28px, 3vw, 40px); color: var(--band-muted); }

/* ---------- VI. Consultation form preview ---------- */
:where(.pg-home-editorial-scroll) .consult3 { padding-top: var(--section); }
:where(.pg-home-editorial-scroll) .form-intro .h2 { margin-bottom: 22px; }
:where(.pg-home-editorial-scroll) .form-intro .ph-flag { margin-bottom: 36px; }
:where(.pg-home-editorial-scroll) .form-fig { margin: 0 0 28px; }
:where(.pg-home-editorial-scroll) .form-fig .frame { aspect-ratio: 4 / 3; }
:where(.pg-home-editorial-scroll) .form-intro .contact-line .line { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :where(.pg-home-editorial-scroll) .cine { aspect-ratio: auto; min-height: 520px; max-height: none; padding: 64px 0 96px; }
  :where(.pg-home-editorial-scroll) .mf .display { grid-column: 1 / -1; }
  :where(.pg-home-editorial-scroll) .mf__aside { grid-column: 1 / -1; grid-row: 3; padding-top: clamp(40px, 6vw, 64px); max-width: 30rem; }
  :where(.pg-home-editorial-scroll) .mf__body { grid-column: 1 / -1; }
  :where(.pg-home-editorial-scroll) .rail-head { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-editorial-scroll) .quad-wrap { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-editorial-scroll) .stage3 { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-editorial-scroll) .stage3__art { max-width: 560px; }
}
@media (max-width: 600px) {
  :where(.pg-home-editorial-scroll) .cine__in { flex-direction: column; align-items: flex-start; gap: 26px; }
  :where(.pg-home-editorial-scroll) .cine__rule { align-self: auto; width: 64px; height: 1px; transform-origin: left; }
  :where(.pg-home-editorial-scroll) .cine__logo { height: 118px; }
  :where(.pg-home-editorial-scroll) .cine__scrim { background: linear-gradient(to bottom, color-mix(in srgb, var(--band-bg) 84%, transparent) 0%, color-mix(in srgb, var(--band-bg) 78%, transparent) 70%, color-mix(in srgb, var(--band-bg) 60%, transparent) 100%); }
  :where(.pg-home-editorial-scroll) .cine .plate { left: var(--gutter); right: auto; }
  @media (prefers-reduced-motion: no-preference) { :where(.pg-home-editorial-scroll) .cine__rule { animation: draw 2s var(--ease-io) .5s both; } }
  :where(.pg-home-editorial-scroll) .mf__text::first-letter { font-size: 2.6em; }
  :where(.pg-home-editorial-scroll) .rail-ctl__count { display: none; }
  :where(.pg-home-editorial-scroll) .rail__item { width: min(80vw, 320px); }
  :where(.pg-home-editorial-scroll) .rail-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  :where(.pg-home-editorial-scroll) .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(72px, 23vw, 104px); gap: 10px; }
  :where(.pg-home-editorial-scroll) .mo--1 { grid-column: 1 / 4; grid-row: 1 / 5; }
  :where(.pg-home-editorial-scroll) .mo--2 { grid-column: 4 / 7; grid-row: 1 / 3; }
  :where(.pg-home-editorial-scroll) .mo--3 { grid-column: 4 / 7; grid-row: 3 / 5; }
  :where(.pg-home-editorial-scroll) .mo--4 { grid-column: 1 / 4; grid-row: 5 / 7; }
  :where(.pg-home-editorial-scroll) .mo--5 { grid-column: 4 / 7; grid-row: 5 / 9; }
  :where(.pg-home-editorial-scroll) .mo--6 { grid-column: 1 / 4; grid-row: 7 / 9; }
  :where(.pg-home-editorial-scroll) .mo--7 { grid-column: 1 / 4; grid-row: 9 / 11; }
  :where(.pg-home-editorial-scroll) .mo--8 { grid-column: 4 / 7; grid-row: 9 / 11; }
  :where(.pg-home-editorial-scroll) .mo__cap { padding: .4rem .6rem .35rem 0; letter-spacing: .16em; }
  :where(.pg-home-editorial-scroll) .quad { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-home-editorial-scroll) .quad :is(li,.is-li), :where(.pg-home-editorial-scroll) .quad :is(li,.is-li):nth-child(odd) { border-right: 0; padding-left: 0; padding-right: 0; }
  :where(.pg-home-editorial-scroll) .quad :is(li,.is-li)::before, :where(.pg-home-editorial-scroll) .quad :is(li,.is-li):nth-child(odd)::before { left: 0; }
  :where(.pg-home-editorial-scroll) .stage--navy .stage__spec { right: var(--gutter); }
}


/* ==========================================================================
   5. Page adapters: page components re-attached to block markup
   ========================================================================== */

/* ---------- Home (Quiet Gallery): the bar over the film ---------- */
:where(body:has(.pg-home)) .masthead { --overlay-bg: var(--band-bg); }
:where(body:has(.pg-home)) .masthead:has(.is-menu-open) { background: var(--band-bg); }
@media (min-width: 1180px) {
  :where(body:has(.pg-home)) .masthead .wp-block-navigation__submenu-container { --ink: var(--pg-ink); --text: var(--pg-text); --muted: var(--pg-muted); --brass-text: var(--pg-brass-text); --line: var(--pg-line); --focus: var(--pg-focus); }
}
body.admin-bar:has(.pg-home) .masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar:has(.pg-home) .masthead { top: 46px; } }

/* ---------- Design Your Project: disabled controls drawn without inputs ---------- */
/* the drawing blends with the stage: no stacking context of its own, the .9 opacity moves onto the layers */
:where(.pg-dyp) .wf-art.dyp-stage__art { z-index: auto; opacity: 1; --wf-op: .9; }
:where(.pg-dyp) .dyp-range {
  position: relative; display: block;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat;
}
:where(.pg-dyp) .dyp-range::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--surface); border: 1px solid var(--line-strong);
}
:where(.pg-dyp) .dyp-field .dyp-output { font: italic 400 1rem/1.3 var(--serif); color: var(--muted); }
:where(.pg-dyp) .dyp-stepper .dyp-output { min-width: 2.2em; text-align: center; font: italic 400 1.05rem/1 var(--serif); color: var(--muted); }
:where(.pg-dyp) .dyp-stepper__b { display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); font: 400 1rem/1 var(--sans); cursor: not-allowed; }
:where(.pg-dyp) .dyp-opt { margin: 0; }
:where(.pg-dyp) .dyp-actions > .wp-block-buttons { margin: 0; }
:where(.pg-dyp) .dyp-actions__row > .wp-block-buttons { gap: 4px 12px; }

/* ---------- Portfolio: service filter chips on Button blocks; placeholder art ---------- */
:where(.pg-portfolio) .wp-block-buttons.pf-chips { gap: 10px; }
:where(.pg-portfolio) .pf-chip > .wp-block-button__link {
  appearance: none; margin: 0; cursor: pointer;
  padding: .82rem 1.15rem .8rem;
  border: 1px solid var(--muted); border-radius: 1px;
  background: transparent; color: var(--ink);
  font: 500 .64rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
:where(.pg-portfolio) .pf-chip > .wp-block-button__link:hover { border-color: var(--ink); color: var(--brass-text); background: transparent; }
:where(.pg-portfolio) .pf-chip > .wp-block-button__link[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
:where(.pg-portfolio) .pf-chip > .wp-block-button__link:focus-visible { outline-offset: 3px; }
:where(.pg-portfolio) .pf-mono .sky { opacity: .9; }
@media (max-width: 600px) {
  :where(.pg-portfolio) .pf-chip > .wp-block-button__link { padding: .78rem .95rem .76rem; letter-spacing: .16em; }
}

/* ---------- About: the skyline beside "Headquarters" ---------- */
:where(.pg-about) .ab-cities__tag::before {
  --c: var(--brass);
  content: ""; flex: none; width: 20px; height: 18px;
  background:
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 0 bottom 100% / 4px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 4px calc(100% - 4px) no-repeat,
    linear-gradient(to top right, var(--c) 50%, transparent 50%) left 7px bottom calc(78% - .66px) / 3px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) left 7px bottom 0 / 3px calc(78% - 3px) no-repeat,
    linear-gradient(var(--c), var(--c)) left 11.5px bottom 0 / 4px 62% no-repeat,
    linear-gradient(var(--c), var(--c)) left 18px bottom 0 / 2px 46% no-repeat;
}
:where(.pg-about) .ab-portrait > .ph-l { margin: 0; }

/* ---------- Cart: quantity and price placeholders, the full-width checkout button ---------- */
:where(.pg-cart) .cart-qty__b, :where(.pg-cart) .cart-qty__v { display: grid; place-items: center; color: var(--muted); font: 400 1rem/1 var(--sans); cursor: not-allowed; }
:where(.pg-cart) .cart-qty__v { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
:where(.pg-cart) .cart-summary__actions > .wp-block-buttons { width: 100%; }
:where(.pg-cart) .cart-summary .wp-block-button.btn { width: 100%; }
:where(.pg-cart) .cart-summary .wp-block-button.btn > .wp-block-button__link { width: 100%; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.5; }

/* ---------- Architect's Split: the drawing sits inside the stage padding ---------- */
:where(.pg-home-architects-split) .dyp__stage.wf-art::before,
:where(.pg-home-architects-split) .dyp__stage.wf-art::after { inset: 28px 28px 56px; }
:where(.pg-home-architects-split) .dyp__stage > .dyp__label { margin: 0; }
@media (max-width: 600px) {
  :where(.pg-home-architects-split) .dyp__stage.wf-art::before,
  :where(.pg-home-architects-split) .dyp__stage.wf-art::after { inset: 12px 12px 48px; }
}

/* ---------- Editorial Scroll: rail arrows on Button blocks; the drawing on the navy stage ---------- */
:where(.pg-home-editorial-scroll) .rail-ctl > .wp-block-buttons { gap: 12px; flex-wrap: nowrap; }
:where(.pg-home-editorial-scroll) .rail-btn > .wp-block-button__link {
  appearance: none; margin: 0; cursor: pointer;
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0;
  border: 1px solid var(--muted); border-radius: 1px; background: transparent; color: var(--ink);
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
:where(.pg-home-editorial-scroll) .rail-btn > .wp-block-button__link:hover,
:where(.pg-home-editorial-scroll) .rail-btn > .wp-block-button__link:focus-visible { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
:where(.pg-home-editorial-scroll) .rail-btn > .wp-block-button__link[aria-disabled="true"] { opacity: .38; cursor: default; background: transparent; color: var(--ink); border-color: var(--muted); }
:where(.pg-home-editorial-scroll) .stage3__art.wf-art { --wf-light: 0; --wf-dark: 1; }
:where(.pg-home-editorial-scroll) .rail-ctl__count { margin: 0 14px 0 0; }

/* ---------- Motion delays and step indices (were inline --d / --s in the mockups) ---------- */
.d-08 { --d: .08s; }
.d-10 { --d: .1s; }
.d-12 { --d: .12s; }
.d-15 { --d: .15s; }
.d-16 { --d: .16s; }
.d-20 { --d: .2s; }
.d-24 { --d: .24s; }
.d-30 { --d: .3s; }
.d-32 { --d: .32s; }
.d-35 { --d: .35s; }
.d-36 { --d: .36s; }
.d-40 { --d: .4s; }
.d-45 { --d: .45s; }
.d-60 { --d: .6s; }
.d-72 { --d: .72s; }
.d-85 { --d: .85s; }
.d-100 { --d: 1s; }
.d-105 { --d: 1.05s; }
.s-0 { --s: 0; }
.s-1 { --s: 1; }
.s-2 { --s: 2; }
.s-3 { --s: 3; }

/* ---------- Editor: animated content stays visible while editing ---------- */
.editor-styles-wrapper .rise,
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .reveal.is-pending,
.editor-styles-wrapper .gsvc__item {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.editor-styles-wrapper .reveal .wp-block-spacer.sky,
.editor-styles-wrapper .band__sky .wp-block-spacer.band__sky-in { scale: none !important; }
.editor-styles-wrapper .gsvc__fig { position: static; width: auto; opacity: 1; pointer-events: auto; margin: 0 0 28px calc(4.5rem + 28px); }
.editor-styles-wrapper .gsvc__fig .cap { opacity: 1; }
.editor-styles-wrapper .wp-block-spacer.sky,
.editor-styles-wrapper .wp-block-spacer.rule { min-height: 1px; }