/* Charles Vivian — Digital Five amend pack.
   Additive overrides layered on top of the migrated theme (charles-vivian-theme). Loaded AFTER
   the theme stylesheets in app/layout.tsx so these rules win the cascade without touching the
   opaque compiled source. */

/* ============================================================
   1. Palette — accent stays brass for links/underlines; the primary CTA is charcoal #505050 as
   requested. Sage-green is retired.
   ============================================================ */
:root {
  --color-sage: #505050;                            /* was sage green — retired */
  --primary: #505050;                               /* CTA fill (client-picked) */
  --primary-foreground: #ffffff;
  --ring: oklch(0.62 0.09 75);                      /* brass focus ring */
  --accent: oklch(0.68 0.08 75);                    /* brass accent for underlines/labels */
  --accent-foreground: var(--color-ink);
}
[style*="oklch(0.55 0.06 145)"],
[style*="rgb(107, 132, 92)"],
[style*="#6b845c"] {
  color: #505050 !important;
}

/* Kill every compiled sage utility — the theme's index.css hardcodes the raw oklch(0.55 0.06 145)
   value instead of reading --color-sage, so overriding the token isn't enough. Force each utility
   to the brass/charcoal replacement so no green survives (mobile menu current-page link, form
   asterisks, hover borders etc.). */
.text-sage,
[class*="text-sage"] { color: #505050 !important; }
.bg-sage,
.bg-sage\/10,
.bg-sage\/20,
.bg-sage\/30,
[class*="bg-sage"] { background-color: color-mix(in oklab, #505050 12%, transparent) !important; }
.border-sage,
.border-sage\/30,
.border-sage\/50,
[class*="border-sage"] { border-color: color-mix(in oklab, #505050 30%, transparent) !important; }
.hover\:text-sage:hover,
[class*="hover:text-sage"]:hover { color: #505050 !important; }
.focus\:border-sage:focus,
[class*="focus:border-sage"]:focus { border-color: #505050 !important; }
.focus\:ring-sage\/20:focus,
[class*="focus:ring-sage"]:focus { --tw-ring-color: rgb(80 80 80 / 0.2) !important; }
/* Mobile menu current-page link — Home was rendering green even after the palette swap because
   `text-sage` was compiled with the raw oklch. Force accent brass for wayfinding instead. */
#mobile-menu a.text-sage,
#mobile-menu a[class*="text-sage"] {
  color: oklch(0.62 0.09 75) !important;   /* brass — reads as "active" without being green */
}

/* ============================================================
   2. Typography — refined display face + gentler weights.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.font-serif, [class*="font-serif"],
.font-display, [class*="font-display"] {
  font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}
h1 { font-weight: 400 !important; letter-spacing: -0.015em; }
h2 { font-weight: 400 !important; }
h1.font-bold, h2.font-bold, h3.font-bold,
h1.font-semibold, h2.font-semibold, h3.font-semibold,
.text-4xl.font-bold, .text-5xl.font-bold, .text-6xl.font-bold,
[class*="font-serif"].font-bold { font-weight: 400 !important; }
.label-text {
  font-weight: 500 !important;
  letter-spacing: 0.18em;
}

/* Force the "Beautiful Craftsmanship to Elegant Design" heading onto ONE LINE at desktop widths.
   The JSON tags it with `lg:whitespace-nowrap` — mirrored here so it wins the cascade. */
@media (min-width: 1024px) {
  .whitespace-nowrap, .lg\:whitespace-nowrap { white-space: nowrap !important; }
}

/* ============================================================
   3. Top bar — sticky, FIXED height so the sticky header sits flush against it with no gap
   at any scroll position. Icons hidden (client asked for clean text only in the top bar).
   ============================================================ */
:root {
  --top-bar-h: 2.5rem;
}
/* On mobile the top-bar stays hidden (it was `hidden lg:block` in the migrated markup) — override
   only kicks in from lg:. Prevents the coverage line from squeezing into a phone-width header. */
@media (min-width: 1024px) {
  #top-bar {
    height: var(--top-bar-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    transition: background-color .3s ease, color .3s ease;
  }
  #top-bar > .container {
    height: 100%;
    align-items: center !important;
  }
}
@media (max-width: 1023px) {
  #top-bar { display: none !important; }
}
.bg-stone .container > div.text-foreground\/60 {
  display: flex;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
/* Top bar — keep phone + email icons (they read as helpful glyphs), but drop the map-pin icon
   that used to sit before the location text (client asked for a cleaner coverage line). The
   map-pin sits in the SECOND flex group (`.text-foreground/60`), while phone and email sit in
   the FIRST flex group (`.gap-6`). */
#top-bar .container > div.text-foreground\/60 svg { display: none !important; }
/* Keep spacing tidy in the coverage-line group after the icon is hidden. */
#top-bar .container > div.text-foreground\/60 { gap: 0 !important; }
#top-bar.top-bar-hidden {
  background: color-mix(in oklab, var(--color-stone) 80%, white) !important;
}

/* ============================================================
   4. Logo — the client wants it PROMINENT. Shrinks a bit when the header enters scrolled state.
   ============================================================ */
#site-header img,
header img[alt*="Charles Vivian" i],
header img[src*="cv_logo_text"] {
  height: 6.5rem !important;           /* 104px desktop */
  max-height: 6.5rem !important;
  width: auto !important;
  transition: height 0.3s ease, max-height 0.3s ease !important;
}
@media (min-width: 1280px) {
  #site-header img,
  header img[src*="cv_logo_text"] {
    height: 7.5rem !important;         /* 120px on wide desktop */
    max-height: 7.5rem !important;
  }
}
@media (max-width: 1024px) {
  #site-header img,
  header img[src*="cv_logo_text"] {
    height: 4.25rem !important;        /* 68px mobile */
    max-height: 4.25rem !important;
  }
}
#site-header .container {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  transition: padding .3s ease;
}

/* When main.js adds .header-scrolled: recolour + shadow, and SHRINK the whole header — both the
   container padding AND the logo's real height (not a transform: a transform scales the pixels but
   leaves the layout box full-size, so the header stayed tall and only the logo looked smaller —
   that was the "logo shrinks but the header doesn't" bug). Reducing real height/padding reflows the
   box, so the header genuinely gets shorter.
   This deliberately changes height/padding, which the earlier port avoided because a SINGLE scroll
   threshold flip-flopped once the shrink moved scrollY (scroll-anchoring on a sticky, in-flow
   header — the old "header glitch"). That is now handled in main.js by a HYSTERESIS band (enter at
   120px, leave under 20px) whose gap (~100px) is wider than the total shrink (~60px), so the toggle
   cannot oscillate. Keep the two in sync: grow the shrink here → widen the band there.
   Both animate via the transitions already on `.container` (padding) and the logo (height) above. */
#site-header.header-scrolled {
  box-shadow: 0 4px 20px -10px rgba(0,0,0,0.15);
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(253,252,250,0.94) !important;
}
#site-header.header-scrolled .container {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
#site-header.header-scrolled img[src*="cv_logo_text"] {
  height: 4.5rem !important;        /* desktop 6.5rem → 4.5rem */
  max-height: 4.5rem !important;
}
@media (min-width: 1280px) {
  #site-header.header-scrolled img[src*="cv_logo_text"] {
    height: 5rem !important;        /* wide desktop 7.5rem → 5rem */
    max-height: 5rem !important;
  }
}
@media (max-width: 1024px) {
  #site-header.header-scrolled img[src*="cv_logo_text"] {
    height: 3.25rem !important;     /* mobile 4.25rem → 3.25rem */
    max-height: 3.25rem !important;
  }
}

/* ============================================================
   5. CTA buttons — the client picked #505050. Filled buttons use it as the background; outlined
   buttons use it for border+text. Hover states invert.
   ============================================================ */
.btn-heritage-filled,
[class*="btn-heritage-filled"],
button.bg-primary,
a.bg-primary,
.bg-primary {
  background-color: #505050 !important;
  color: #ffffff !important;
  border: 1px solid #505050 !important;
  transition: background-color .25s, color .25s, transform .2s !important;
}
.btn-heritage-filled:hover,
[class*="btn-heritage-filled"]:hover {
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
}

.btn-heritage {
  border-color: #505050 !important;
  color: #505050 !important;
  transition: background-color .25s, color .25s !important;
}
.btn-heritage:hover {
  background-color: #505050 !important;
  color: #ffffff !important;
}

/* CTA on dark-image sections — the charcoal fill has no contrast against the dark scrim.
   Detect: the section has `.text-white` on a parent, so we switch to a white-fill variant. */
.text-white .btn-heritage-filled,
[class*="bg-ink"] .btn-heritage-filled,
[class*="bg-black"] .btn-heritage-filled,
section.relative:has(> img.absolute.inset-0) .btn-heritage-filled {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #ffffff !important;
}
.text-white .btn-heritage-filled:hover,
[class*="bg-ink"] .btn-heritage-filled:hover,
[class*="bg-black"] .btn-heritage-filled:hover,
section.relative:has(> img.absolute.inset-0) .btn-heritage-filled:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Outlined btn-heritage on dark backgrounds — already uses `!border-white !text-white` in the
   migrated markup; our brass override might tint it. Force white when on a dark scrim. */
.text-white .btn-heritage,
[class*="bg-ink"] .btn-heritage,
section.relative:has(> img.absolute.inset-0) .btn-heritage {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.text-white .btn-heritage:hover,
[class*="bg-ink"] .btn-heritage:hover,
section.relative:has(> img.absolute.inset-0) .btn-heritage:hover {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* ============================================================
   6. Card rows — equal height + bottom-aligned CTAs.
   ONLY applied to .scroll-reveal blocks that ACTUALLY contain a card (an <a class="group">
   or <div class="group">). About-teaser and other content-heavy .scroll-reveal blocks are left
   as normal block-flow — otherwise their inner <a class="btn-heritage"> stretches to full width
   under flex layout ("Our Story" button ballooning bug).
   ============================================================ */
section .grid > .scroll-reveal:has(> a.group),
section .grid > .scroll-reveal:has(> .group.block),
section .grid > .scroll-reveal:has(> .group) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
section .grid > .scroll-reveal > a.group.block,
section .grid > .scroll-reveal > .group.block,
section .grid > .scroll-reveal > .group {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
}
section .grid > .scroll-reveal > a.group.block > span.inline-flex {
  margin-top: auto !important;
}
/* Only give <p> flex growth inside actual cards. */
section .grid > .scroll-reveal:has(> a.group) p,
section .grid > .scroll-reveal:has(> .group) p {
  flex: 1 1 auto;
}

/* ============================================================
   7. Cookie banner (d5cmp) — the banner is a Shadow-DOM web component: `<d5cmp-banner>` and its
   siblings `<d5cmp-prefs>` / `<d5cmp-toast>` / `<d5cmp-reopen>` / `<d5cmp-embed>` each attach a
   shadow root and paint a single card from `background: var(--d5cmp-bg)` etc.

   Two consequences dictate this whole block:
   1) Selectors from THIS stylesheet cannot reach inside the shadow root — the old rules that tried
      to skin `[class*="d5cmp"] p / a / button[data-action*="accept"]` matched nothing, so the
      accept button kept the component's built-in default (a BLUE `--d5cmp-primary`). That was the
      "wrong colours" bug.
   2) The one old rule that DID land — `background/border/box-shadow` on the `d5cmp-banner` host —
      painted the transparent positioning wrapper, stacking a second warm-white bordered box behind
      the real shadow card. That was the "double background" bug.

   The ONLY supported skin surface is the component's own CSS custom properties, which DO inherit
   across the shadow boundary. So we set the theme variables on the hosts (never a background on the
   host itself) and let the component paint its single card, buttons, links and text in-brand.
   `!important` so we win over the component's built-in `:host(:not([theme]))` defaults (and any
   inline theme the loader applies). Inert on localhost with no tenant provisioned.
   (The durable home for this palette is the d5cmp tenant theme config — see AGENTS.md; this CSS is
   the site-side override until that is set.)
   ============================================================ */
d5cmp-banner,
d5cmp-prefs,
d5cmp-toast,
d5cmp-reopen,
d5cmp-embed {
  --d5cmp-bg: #fdfcfa !important;                                    /* warm-white surface */
  --d5cmp-text: #1a1a1a !important;                                  /* ink body copy */
  --d5cmp-text-muted: #6b6b6b !important;                            /* muted charcoal */
  --d5cmp-border: rgba(80, 80, 80, 0.14) !important;                 /* hairline */
  --d5cmp-border-strong: rgba(80, 80, 80, 0.30) !important;
  --d5cmp-primary: #505050 !important;                               /* charcoal CTA (client-picked) */
  --d5cmp-primary-fg: #ffffff !important;                            /* CTA label */
  --d5cmp-surface-hover: color-mix(in oklab, #505050 8%, transparent) !important;
  --d5cmp-focus-ring: 2px solid #505050 !important;
  --d5cmp-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.25) !important;  /* soft single lift */
  --d5cmp-radius: 4px !important;                                    /* squared-off brand corner */
  --d5cmp-font: 'DM Sans', system-ui, sans-serif !important;
}

/* ============================================================
   8. Contact form — premium input styling + charcoal focus ring.
   ============================================================ */
form[data-placeholder="contact-form"] input,
form[data-placeholder="contact-form"] textarea,
form[data-placeholder="contact-form"] select {
  background: rgb(255 255 255 / 0.6) !important;
  border-radius: 2px !important;
  transition: border-color .2s, background-color .2s !important;
}
form[data-placeholder="contact-form"] input:focus,
form[data-placeholder="contact-form"] textarea:focus,
form[data-placeholder="contact-form"] select:focus {
  background: #fff !important;
  border-color: #505050 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgb(80 80 80 / 0.15) !important;
}
form[data-placeholder="contact-form"] button[type="submit"] {
  min-width: 240px;
  padding: 0.95rem 2rem !important;
  letter-spacing: 0.14em;
  font-size: 0.7rem !important;
}
form[data-placeholder="contact-form"] .text-sage { color: oklch(0.62 0.09 75) !important; }

/* ============================================================
   9. Google Map iframe — inherit size from parent (contact page wraps in .aspect-[21/9]).
   The old min-height rule broke the aspect-ratio wrapper; scoped it out.
   ============================================================ */
iframe[src*="google.com/maps"] {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}
/* Only fall back to a minimum height when the map's iframe has NO aspect-ratio parent. */
.map-embed-wrap iframe[src*="google.com/maps"] { min-height: 460px !important; }

/* ============================================================
   10. Hero video — fill the container edge-to-edge, and hide the tiny artefacts that come from
   upscaling a 1080p portrait source into a landscape hero.
   ============================================================ */
section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Nudge browsers toward the sharper scaler where they support it. */
  image-rendering: -webkit-optimize-contrast;
  /* Compositing hint — smooths GPU scaling on some drivers. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Slightly stronger gradient overlay softens the compression artefacts on the hero video. */
section > .absolute.inset-0[style*="linear-gradient"] {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.85) 100%
  ) !important;
}

/* ============================================================
   11. /inspiration — editorial index (unchanged from round 2).
   ============================================================ */
.inspiration-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .inspiration-featured {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
  }
}
.inspiration-featured figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 4px;
}
.inspiration-featured figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.inspiration-featured a:hover figure img { transform: scale(1.03); }
.inspiration-featured h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 3rem 2.5rem;
}
.inspiration-card figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}
.inspiration-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.inspiration-card a:hover figure img { transform: scale(1.04); }
.inspiration-card h3 { font-size: 1.55rem; line-height: 1.2; margin-bottom: 0.75rem; }
.inspiration-card p { color: color-mix(in oklab, var(--color-ink) 65%, transparent); font-size: 0.95rem; line-height: 1.6; }
.inspiration-card .read-on {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-ink);
}
.inspiration-card .read-on::after { content: ''; width: 24px; height: 1px; background: currentColor; transition: width .3s ease; }
.inspiration-card a:hover .read-on::after { width: 40px; }

/* ============================================================
   12. Blog post body — two-column layout with a sticky sidebar card.
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 5rem;
  }
}
.prose-cv {
  font-family: var(--font-sans, 'DM Sans'), sans-serif;
  color: var(--foreground);
  line-height: 1.8;
  font-size: 1.05rem;
  max-width: 68ch;
}
.prose-cv p { margin: 0 0 1.35rem; }
.prose-cv strong { font-weight: 600; color: var(--foreground); }
.prose-cv em { font-style: italic; }
.prose-cv h2, .prose-cv h3, .prose-cv h4 {
  font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
  font-weight: 400;
  color: var(--foreground);
  margin: 3rem 0 1rem;
  line-height: 1.2;
}
.prose-cv h2 { font-size: 2.25rem; }
.prose-cv h3 { font-size: 1.65rem; }
.prose-cv h4 { font-size: 1.3rem; }
.prose-cv ul, .prose-cv ol { padding-left: 1.5rem; margin: 0 0 1.35rem; }
.prose-cv li { margin: 0.25rem 0; }
.prose-cv a { color: oklch(0.55 0.09 75); text-decoration: underline; text-underline-offset: 3px; }
.prose-cv br[role="presentation"] { display: none; }

.prose-cv figure {
  margin: 2.5rem auto;
  max-width: 100%;
}
.prose-cv figure > div,
.prose-cv figure > div > div,
.prose-cv figure > div > div > div {
  position: static !important;
  height: auto !important;
  padding: 0 !important;
}
.prose-cv wow-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.prose-cv wow-image img,
.prose-cv figure img {
  position: static !important;
  width: 100% !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto !important;
  max-height: 420px !important;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
/* In-article photos (2026-09-23). A .cv-figure fills the text column; a .cv-figure-pair sets two
   portrait photos side by side. Both carry a small caption. Overrides the Wix-era 420px crop above. */
.prose-cv figure.cv-figure,
.prose-cv figure.cv-figure-pair { margin: 2.75rem 0; max-width: none; }
.prose-cv figure.cv-figure-pair > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.prose-cv figure.cv-figure img,
.prose-cv figure.cv-figure-pair img {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 4px;
}
.prose-cv figure.cv-figure img { aspect-ratio: 3 / 2; }
.prose-cv figure.cv-figure-pair img { aspect-ratio: 3 / 4; }
.prose-cv figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: center;
}
.prose-cv figure button[aria-label="Expand image"],
.prose-cv figure > div > button { display: none !important; }

/* Sticky sidebar */
.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 960px) {
  .post-sidebar {
    position: sticky;
    top: 6rem;
    align-self: start;
    max-height: calc(100vh - 8rem);
    overflow: auto;
    padding-right: 0.25rem;
  }
}
.post-cta-card {
  background: color-mix(in oklab, var(--color-stone) 60%, white);
  padding: 2rem;
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, #505050 12%, transparent);
}
.post-cta-card .btn-heritage-filled { width: 100%; }
.post-cta-card .btn-heritage { width: 100%; }
.post-related {
  padding: 1.5rem 0 0;
  border-top: 1px solid color-mix(in oklab, #505050 12%, transparent);
}

/* ============================================================
   13. Scroll-reveal animation — the migrated markup tags sections with `.scroll-reveal`, main.js
   adds `.revealed` when its IntersectionObserver fires.
   IMPORTANT: only hide the element when `html.js-ready` is set (main.js confirms it's active).
   If JS fails to load, animation is skipped and content stays visible — never invisible.
   ============================================================ */
html.js-ready .scroll-reveal:not(.revealed) {
  opacity: 0;
  transform: translateY(28px);
}
.scroll-reveal {
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}
.scroll-reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-ready .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

.grid > .scroll-reveal:nth-child(2) { transition-delay: 0.08s; }
.grid > .scroll-reveal:nth-child(3) { transition-delay: 0.16s; }
.grid > .scroll-reveal:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   14. Footer grid — the ported markup uses `md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8` which
   feels sparse. Tighten to a 4-column with consistent spacing at desktop and 2-column at tablet.
   ============================================================ */
footer.bg-ink .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  gap: 3rem 2.5rem !important;
}
@media (min-width: 1024px) {
  footer.bg-ink .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 4rem !important;
  }
}
footer.bg-ink h4 { margin-bottom: 1.25rem !important; }
footer.bg-ink ul.space-y-3 { gap: 0.5rem; }
footer.bg-ink { padding-bottom: 0 !important; }

/* ============================================================
   15. Mobile menu overlay — the ported markup has `class="hidden"` initial state and main.js
   toggles that class. Support the open state visually.
   ============================================================ */
#mobile-menu.hidden { display: none !important; }
#mobile-menu {
  display: flex !important;
  animation: cv-fadein 0.25s ease-out;
}
@keyframes cv-fadein { from { opacity: 0 } to { opacity: 1 } }

/* Ensure the top-bar and header stack correctly (top-bar above header, no gap). Uses the
   --top-bar-h variable set on :root above so both sides always agree on the offset.

   z-index policy — sticky chrome must always sit ABOVE page content, and the header
   (with the primary navigation) must sit ABOVE the top-bar so hover states + hamburger
   button reads cleanly on scroll. */
#top-bar { position: sticky; top: 0; z-index: 60 !important; }
#site-header {
  top: 0;
  z-index: 70 !important;  /* was 50 in the migrated markup — bumped so the header always wins */
  isolation: isolate;      /* new stacking context — prevents transform tricks from popping content over it */
}
@media (min-width: 1024px) {
  #site-header { top: var(--top-bar-h); }
}

/* Mobile menu overlay must sit ABOVE everything (header + top-bar) once open. */
#mobile-menu:not(.hidden) { z-index: 200 !important; }

/* ============================================================
   16. Areas chip cloud — rounded pill tags for the /contact "Towns & villages we serve".
   ============================================================ */
.areas-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.15rem;
  font-size: 0.86rem;
  border: 1px solid color-mix(in oklab, var(--color-ink) 15%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-stone) 30%, white);
  color: var(--color-ink);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.01em;
  transition: background-color .25s, border-color .25s;
}
.areas-chip:hover {
  background: color-mix(in oklab, var(--color-stone) 60%, white);
  border-color: color-mix(in oklab, var(--color-ink) 30%, transparent);
}

/* ============================================================
   17. Contact page — tighten the vertical rhythm between the Areas section and the socials
   "Say hello on social" block. Both are `.section-padding` which was too generous stacked.
   ============================================================ */
[id*="d5-amend"] + section.section-padding,
section:has(.areas-chip) + section.section-padding {
  padding-top: 3rem !important;
}
/* When two .section-padding sections stack (Areas → Say hello on social), collapse the seam. */
section.section-padding:has(.areas-chip) { padding-bottom: 3rem !important; }
section.section-padding:has(.areas-chip) + section.section-padding { padding-top: 2rem !important; }

/* ============================================================
   18. Background-image banner sections — MOBILE de-crop.
   The home "Art of Making" + "Visit Our Showroom" banners (and any banner built the same way) size
   the section from a full-height in-flow <img> and lay the COPY over it in an `.absolute.inset-0.flex`
   overlay. Absolute copy can't push the section taller, so on a phone — where the copy reflows to many
   lines — it overflows the fixed `h-[Xvh]` and `overflow-hidden` CLIPS it.
   Fix (mobile only): let the section grow to its content. The image drops to an absolute full-bleed
   layer; the copy overlay returns to normal flow and the section (now a flex box) centres it, so all
   the copy shows and nothing is cropped. Desktop keeps the fixed-height banners exactly as designed.
   The double `:has()` is deliberate — it matches ONLY this pattern (a DIRECT in-flow image PLUS an
   absolute flex copy overlay). The video hero (media nested in a <div>, no direct <img>) and the
   page-hero banners (copy already `relative z-10`, not absolute) are both excluded. */
@media (max-width: 1023px) {
  section.overflow-hidden:has(> img.object-cover):has(> .absolute.inset-0.flex) {
    height: auto !important;
    min-height: 60vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  section.overflow-hidden:has(> img.object-cover):has(> .absolute.inset-0.flex) > img.object-cover {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  section.overflow-hidden:has(> img.object-cover):has(> .absolute.inset-0.flex) > .absolute.inset-0.flex {
    position: relative !important;
    width: 100%;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ============================================================
   19. Mobile menu — make the header's existing X usable. The open overlay (#mobile-menu) sits at
   z-index 200 (§15), above the header's z-70 — so the hamburger, which main.js morphs into an X,
   was buried under the overlay and couldn't be tapped to close. main.js sets `cv-menu-open` on
   <body> while the menu is open; that lifts the whole header (with its X) above the overlay, so the
   one close control the design already has is tappable again. No separate/floating close button.
   The header is opaque warm-white, so it reads as a normal persistent bar over the menu. =========== */
body.cv-menu-open #site-header {
  z-index: 210 !important;
}

/* ============================================================
   20. d5cmp confirmation toast ("Preferences saved …") — the platform default renders tight on a
   phone. The toast is a shadow-DOM element, so only its host box is reachable from here; give it room
   and let its text size to content. Best-effort: the internal padding lives in the component's shadow
   root and cannot be reached from site CSS, so if it still reads cramped on staging it is a d5cmp
   platform-side tweak, not a site fix. ======================================================= */
@media (max-width: 640px) {
  d5cmp-toast {
    max-width: 92vw !important;
    inline-size: max-content !important;
  }
}

/* ============================================================
   Workshop film strip — /our-process ("From timber to finish").
   Source clips are 480x848 client phone footage, so the frame is fixed 9:16 and capped in width:
   blown up full-bleed they read as soft. Self-contained (no reliance on theme utility classes that
   may or may not survive the compiled bundle) beyond the shared section/container/label primitives.
   ============================================================ */
.cv-films__intro {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.cv-films__heading {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin: 0.75rem 0 0;
}
.cv-films__intro .diamond-divider { margin: 1.5rem auto; }
.cv-films__lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: color-mix(in oklab, var(--color-ink, #1a1a1a) 72%, transparent);
  margin: 0;
}
.cv-films__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 1.75rem;
  max-width: 62rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .cv-films__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cv-films__grid { grid-template-columns: repeat(3, 1fr); } }

.cv-film { margin: 0; }
.cv-film__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--color-ink, #1a1a1a);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.35);
}
.cv-film__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cv-film__fallback { color: #fff; padding: 1rem; font-size: 0.9rem; }
.cv-film__fallback a { color: #fff; text-decoration: underline; }

.cv-film__caption { padding-top: 1.25rem; }
.cv-film__title {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}
.cv-film__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: color-mix(in oklab, var(--color-ink, #1a1a1a) 70%, transparent);
  margin: 0 0 0.5rem;
}
.cv-film__meta {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-ink, #1a1a1a) 50%, transparent);
  margin: 0;
}

/* Honour reduced-motion by never letting a poster animate in; playback stays user-initiated
   (preload="none", no autoplay) for everyone, which also keeps the 34 MB off first paint. */
@media (prefers-reduced-motion: reduce) {
  .cv-film__frame { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
}

/* ────────────────────────────────────────────────────────────────────────────
   Background video loops (2026-09-23) — hero loops sit over a poster <img>.
   Under reduced motion, hide the video so only the still poster shows.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  video.cv-loop { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Project carousel (2026-09-23) — /kitchens project cards. Native horizontal
   scroll with snap (swipe / trackpad); prev/next buttons wired in main.js.
   ──────────────────────────────────────────────────────────────────────────── */
.cv-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.cv-carousel-nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cv-carousel-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--foreground);
  border-radius: 9999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.cv-carousel-btn:hover:not(:disabled) { background: var(--foreground); color: var(--background, #fff); }
.cv-carousel-btn:disabled { opacity: .3; cursor: default; }
.cv-carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;            /* hidden: swipe, trackpad and the arrow buttons scroll it */
}
.cv-carousel-track::-webkit-scrollbar { display: none; }
.cv-carousel-track:focus-visible { outline: 2px solid var(--foreground); outline-offset: 4px; }
.cv-carousel-item { flex: 0 0 85%; scroll-snap-align: start; }
@media (min-width: 768px)  { .cv-carousel-item { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .cv-carousel-item { flex-basis: calc((100% - 3rem) / 3); } }
@media (prefers-reduced-motion: reduce) { .cv-carousel-track { scroll-behavior: auto; } }

/* ────────────────────────────────────────────────────────────────────────────
   Tablet-landscape / small-laptop header (2026-09-25). The migrated markup swaps
   to the desktop header at lg (1024px), but between 1024 and 1279px the seven nav
   links + CTA don't fit: "Fine Furniture" / "Our Process" and the CTA wrap and the
   header grows to 130–170px. In that band, keep the phone header instead —
   hamburger left, centred logo, no nav/CTA, no top bar — exactly as below 1024px.
   Appended last so it wins over the min-width:1024px rules above (same specificity).
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #top-bar { display: none !important; }
  #site-header { top: 0 !important; }
  #site-header [class~="lg:hidden"] { display: block !important; }   /* hamburger + logo spacer */
  #site-header nav[class~="lg:flex"],
  #site-header [class~="lg:inline-block"] { display: none !important; } /* desktop nav + CTA */
  #site-header a[class~="lg:static"] {                                  /* logo back to centre */
    position: absolute !important;
    left: 50% !important;
    translate: -50% 0 !important;
  }
  #site-header img[src*="cv_logo_text"] { height: 4.25rem !important; max-height: 4.25rem !important; }
  #site-header.header-scrolled img[src*="cv_logo_text"] { height: 3.25rem !important; max-height: 3.25rem !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Project video feature (2026-09-28) — /bedrooms, its own section below the carousel. A 4:5
   client video shown full-frame (no crop) beside its caption. The poster <img>
   underneath is what shows under prefers-reduced-motion (video.cv-loop above).
   ──────────────────────────────────────────────────────────────────────────── */
.cv-feature-video {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.cv-feature-video__media {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  justify-self: center;
}
.cv-feature-video__media img,
.cv-feature-video__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-feature-video__text { max-width: 32rem; text-align: center; justify-self: center; }
@media (min-width: 900px) {
  /* Fixed-size first column: an `auto` track can't resolve the media's percentage width (it collapsed to 0). */
  .cv-feature-video { grid-template-columns: minmax(16rem, 26rem) minmax(0, 30rem); gap: 3.5rem; justify-content: center; }
  .cv-feature-video__media { justify-self: stretch; width: 100%; }
  .cv-feature-video__text { text-align: left; justify-self: start; }
}

/* Red Barn landing pages (2026-10-01): /{area}/ hubs and /{area}/{service}/ pages, components/LandingPage.tsx */
.cv-lp-hero { position: relative; overflow: hidden; color: #fff; padding: 7rem 0 4.5rem; min-height: 26rem; display: flex; align-items: flex-end; }
.cv-lp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-lp-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,18,.35) 0%, rgba(20,20,18,.72) 100%); }
.cv-lp-hero .container { position: relative; z-index: 1; width: 100%; }
.cv-lp-hero h1 { max-width: 18ch; text-wrap: balance; }
.cv-lp-highlights { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) { .cv-lp-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.cv-lp-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.cv-lp-ticks li { position: relative; padding-left: 1.6rem; color: var(--muted-foreground); line-height: 1.5; }
.cv-lp-ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .38rem; border-left: 1.5px solid oklch(0.62 0.09 75); border-bottom: 1.5px solid oklch(0.62 0.09 75); transform: rotate(-45deg); }
.cv-lp-faq { display: grid; gap: .75rem; }
.cv-lp-faq details { background: #fff; border: 1px solid var(--border); border-radius: 2px; padding: 1.1rem 1.35rem; }
.cv-lp-faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.cv-lp-faq summary::-webkit-details-marker { display: none; }
.cv-lp-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: oklch(0.62 0.09 75); }
.cv-lp-faq details[open] summary::after { content: "–"; }
.cv-lp-faq details p { margin: .85rem 0 0; color: var(--muted-foreground); line-height: 1.7; }
.cv-lp-links { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 900px) { .cv-lp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.cv-lp-links ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem 1.5rem; }
.cv-lp-links a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: oklch(0.62 0.09 75 / .5); }
.cv-lp-links a:hover { text-decoration-color: currentColor; }
.cv-lp-hub { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .cv-lp-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cv-lp-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* "View all our services by area" directory on /contact (lib/area-directory.ts) */
.cv-area-dir summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .6rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.cv-area-dir summary::-webkit-details-marker { display: none; }
.cv-area-dir summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid oklch(0.62 0.09 75); border-bottom: 1.5px solid oklch(0.62 0.09 75); transform: translateY(-.15rem) rotate(45deg); transition: transform .2s; }
.cv-area-dir[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.cv-area-dir summary:focus-visible { outline: 2px solid oklch(0.62 0.09 75); outline-offset: 4px; }
.cv-area-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 2.25rem 2rem; margin-top: 2.5rem; }
.cv-area-dir h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; margin: 0 0 .6rem; }
.cv-area-dir h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cv-area-dir ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.cv-area-dir li a { position: relative; padding-left: 1rem; font-size: .92rem; color: var(--muted-foreground); }
.cv-area-dir li a::before { content: "›"; position: absolute; left: 0; color: oklch(0.62 0.09 75); }
.cv-area-dir li a:hover { color: var(--foreground); }
/* Landing page v2 (2026-10-01): photo + text sections like the service pages */
.cv-lp-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
  .cv-lp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .cv-lp-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cv-lp-split--flip .cv-lp-split__media { order: 2; }
}
/* The photo sits centred beside the copy and never outgrows it: capped height, cropped to fill.
   (No sticky: with copy shorter than the photo it slid down onto the next section.) */
.cv-lp-split__media { position: relative; margin-bottom: 1rem; }
.cv-lp-split__media img { aspect-ratio: 4 / 5; max-height: 34rem; }
@media (max-width: 1023.98px) { .cv-lp-split__media img { aspect-ratio: 4 / 3; max-height: 26rem; } }
/* Short sections: equal columns and a landscape photo about as tall as the copy. */
@media (min-width: 1024px) {
  .cv-lp-split--compact, .cv-lp-split--compact.cv-lp-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; }
  .cv-lp-split--compact .cv-lp-split__media img { aspect-ratio: 3 / 2; max-height: 22rem; }
}
.cv-lp-split__text { max-width: 40rem; }
.cv-lp-copy { color: var(--muted-foreground); line-height: 1.8; }
.cv-lp-copy p { margin: 0 0 1.2rem; }
.cv-lp-copy strong, .cv-lp-copy b { color: var(--foreground); font-weight: 600; }
.cv-lp-copy h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; color: var(--foreground); margin: 2rem 0 .8rem; line-height: 1.25; }
.cv-lp-copy a { color: oklch(0.55 0.09 75); text-decoration: underline; text-underline-offset: 3px; }
.cv-lp-copy ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .55rem 1.5rem; }
.cv-lp-copy ul li { position: relative; padding-left: 1.4rem; }
.cv-lp-copy ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: oklch(0.62 0.09 75); }
.cv-lp-copy ol { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 1rem; }
.cv-lp-copy ol li { counter-increment: step; position: relative; padding: .2rem 0 0 3.4rem; min-height: 2.6rem; }
.cv-lp-copy ol li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid oklch(0.62 0.09 75 / .45); color: oklch(0.55 0.09 75); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; }
.cv-lp-ticks--center { justify-items: center; }
.cv-lp-ticks--center li { text-align: left; }

/* /reviews (2026-10-01) */
.cv-stars { display: inline-flex; gap: 2px; color: oklch(0.86 0.02 80); }
.cv-stars svg { fill: currentColor; }
.cv-stars svg.on { color: oklch(0.72 0.12 78); }
.cv-review-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 4rem; }
.cv-review-summary a { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.cv-review-summary strong { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.6rem; }
.cv-review-summary span:last-child { font-size: .85rem; color: var(--muted-foreground); }
.cv-review-summary a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.cv-review-grid { columns: 1; column-gap: 1.75rem; }
@media (min-width: 720px) { .cv-review-grid { columns: 2; } }
@media (min-width: 1100px) { .cv-review-grid { columns: 3; } }
.cv-review { break-inside: avoid; margin: 0 0 1.75rem; background: #fff; border: 1px solid var(--border); border-radius: 2px; padding: 1.6rem 1.7rem; display: grid; gap: .9rem; }
.cv-review blockquote { margin: 0; color: var(--foreground); line-height: 1.7; white-space: pre-line; }
.cv-review__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; line-height: 1.25; margin: 0; }
.cv-review figcaption { display: grid; gap: .1rem; font-size: .85rem; }
.cv-review figcaption span { color: var(--muted-foreground); }

/* Two staggered photos in one image slot (Fine Furniture "Designed Around You", 2026-10-07) */
.cv-photo-pair { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.cv-photo-pair > div { aspect-ratio: 4 / 5; }
/* the right photo sits lower and overlaps the left one, framed in the page colour so the edge reads */
.cv-photo-pair > div:last-child { position: relative; z-index: 1; margin-top: 3rem; transform: translateX(-1.75rem); outline: 6px solid var(--background, #fdfcfa); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35); }
@media (min-width: 1024px) { .cv-photo-pair > div:last-child { margin-top: 4.5rem; transform: translateX(-3rem); outline-width: 8px; } }

/* Landing pages: the town-specific "… in {town} and Nearby" section (2026-10-07) */
.cv-lp-local { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .cv-lp-local { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; } }
.cv-lp-facts { margin: 0; background: var(--warm-white, #fdfcfa); border: 1px solid var(--border); padding: 1.75rem 2rem; display: grid; gap: 1.25rem; }
.cv-lp-facts > div { display: grid; gap: .25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.cv-lp-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-lp-facts dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }
.cv-lp-facts dd { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; line-height: 1.35; color: var(--foreground); }
.cv-lp-facts a { text-decoration: underline; text-underline-offset: 4px; }

/* Platform enquiry form on /contact-us (components/LeadForm.tsx, 2026-10-16) — skinned to match the old
   theme form it replaced: uppercase labels, square bordered inputs, the heritage button. */
.cv-leadform { display: grid; gap: 1.25rem; }
.cv-leadform .d5cf-field { display: grid; gap: .5rem; }
.cv-leadform .d5cf-field label { font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.cv-leadform .d5cf-required { color: oklch(0.62 0.09 75); margin-left: .2rem; }
.cv-leadform input, .cv-leadform select, .cv-leadform textarea { width: 100%; padding: .75rem 1rem; border: 1px solid var(--border); background: transparent; font: inherit; font-size: .875rem; color: var(--foreground); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; }
.cv-leadform textarea { resize: vertical; min-height: 8rem; }
.cv-leadform input:focus, .cv-leadform select:focus, .cv-leadform textarea:focus { border-color: oklch(0.62 0.09 75); box-shadow: 0 0 0 1px oklch(0.62 0.09 75 / .2); }
.cv-leadform .d5cf-consent { font-size: .8rem; color: var(--muted-foreground); line-height: 1.5; }
.cv-leadform .d5cf-consent a { text-decoration: underline; text-underline-offset: 3px; }
.cv-leadform .d5cf-consent input { width: auto; margin-right: .5rem; }
.cv-leadform .d5cf-submit { justify-self: start; display: inline-flex; align-items: center; justify-content: center; padding: .9rem 2.25rem; border-radius: 999px; background: var(--foreground); color: var(--background); border: 1px solid var(--foreground); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: opacity .2s; }
.cv-leadform .d5cf-submit:hover { opacity: .85; }
.cv-leadform .d5cf-submit:disabled { opacity: .5; cursor: wait; }
.cv-leadform .d5cf-status { font-size: .85rem; color: var(--muted-foreground); }
.d5cf-success { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; line-height: 1.4; }
@media (max-width: 639.98px) { .cv-leadform .d5cf-submit { justify-self: stretch; } }