/*
Theme Name: Coco Concepts — Premium Restyle (lux)
Template: homus-atelier
Author: Homus
Description: Draft-lux premium restyle child theme for Coco Concepts (cococoncepts.co).
  Built off specs/cococoncepts.draft-lux.json and the four split comps
  (Prism, 2026-09-03/04), token-for-token where a token exists, ported directly
  from the comp's own <style> block where a token doesn't (spacing scale, the
  asymmetric project grid, card/review/hero component CSS). Six palette slugs
  and the two font-family slugs are set in theme.json per the fleet contract;
  everything else here is site-specific structural CSS, same convention
  site-cococoncepts already uses for its own second-accent overrides.
Version: 0.1.0-preview
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: site-cococoncepts-lux

ACTIVATED live 2026-09-04 on Charlotte's explicit go-ahead. Fonts (Bodoni Moda,
Jost) and the two real photo slots (ph11 hero, ph04 industrial) were the
system-font/placeholder fast-follow — both landed the same day, also on
Charlotte's explicit go-ahead, once she'd seen the structural build live.
See fleet.json reskinBuild/fontsPhotosFastFollow for status.
*/

/* ── palette aliases — read through the theme.json slugs, so theme.json stays
   the single source of truth for the six values (fleet contract: children
   override values, never slugs) while this file's component CSS can use the
   comp's own short names verbatim. ------------------------------------- */
:root {
  --base:     var(--wp--preset--color--base);
  --surface:  var(--wp--preset--color--surface);
  --line:     var(--wp--preset--color--line);
  --contrast: var(--wp--preset--color--contrast);
  --accent:   var(--wp--preset--color--accent);
  --muted:    var(--wp--preset--color--muted);

  /* derived tones — each one slug moved on the OKLCH L axis only, literal hex
     so it stays measurable. Ported from the comp unchanged. */
  --brass:      #C69E58;   /* accent, lifted — dark-ground only, 7.19:1 on contrast */
  --muted-lift: #ADA39A;   /* muted, lifted — dark-ground only, 7.23:1 on contrast */
  --ink-2:      #312620;   /* contrast, lifted — a card separating from the ink band */
  --ink-line:   #463A34;   /* contrast, lifted — hairline on the ink band */
  --scrim: color-mix(in oklab, var(--contrast) 78%, transparent);

  /* six-step fluid type scale, cqi-based so it resolves inside a container
     query rather than the page viewport. Mirrors theme.json's fontSizes. */
  --fs-sm:      clamp(0.75rem,   0.7262rem + 0.1015cqi, 0.8125rem);
  --fs-base:    clamp(1rem,      0.9762rem + 0.1015cqi, 1.0625rem);
  --fs-lg:      clamp(1.1875rem, 1.1161rem + 0.3046cqi, 1.375rem);
  --fs-xl:      clamp(1.625rem,  1.3871rem + 1.0152cqi, 2.25rem);
  --fs-xxl:     clamp(2.25rem,   1.7741rem + 2.0305cqi, 3.5rem);
  --fs-display: clamp(2.75rem,   1.7982rem + 4.0609cqi, 5.25rem);

  --lh-body: 1.72;
  --lh-head: 1.06;

  /* Self-hosted Bodoni Moda / Jost, added 2026-09-04 fast-follow, on
     Charlotte's explicit go-ahead after seeing the site live. Fallback
     tails kept exactly as before — same chain the system-font pass used,
     now behind the real faces rather than standing in for them. */
  --ff-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --ff-body: Jost, 'Avenir Next', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;

  --ls-display: 0.06em;
  --ls-label:   0.22em;
  --ls-nav:     0.14em;

  /* spacing scale — base 1rem, ratio 1.5, 7 steps */
  --sp-20: 0.44rem;
  --sp-30: 0.67rem;
  --sp-40: 1rem;
  --sp-50: 1.5rem;
  --sp-60: 2.25rem;
  --sp-70: 3.375rem;
  --sp-80: 5.0625rem;

  --content: 720px;
  --wide: 1360px;
  --radius: 0px;
  --hairline: 1px;
}

/* ── the page container — every responsive rule below is a @container rule,
   so the page behaves correctly at any embed width, not just the viewport.
   Declared on body directly (not a wrapper div) so no extra markup is
   required in any template — every page this theme renders gets it.
   background/color are the comp's own `.page` rule, ported onto body since
   there is no wrapper div here — caught by visual preview: without this,
   body has no explicit background and several browsers render the default
   canvas dark, which reads as the whole site being color-inverted. */
body {
  container: page / inline-size;
  margin: 0;
  background: var(--base);
  color: var(--contrast);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 clamp(20px, 4.5cqi, 64px); }
.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

/* ── type primitives ───────────────────────────────────────────────────── */
.dsp {
  font-family: var(--ff-display);
  /* Bodoni Moda's optical-size axis thins the hairlines as size grows —
     exactly the "spindly at large sizes" failure the design brief banned.
     Pinned off per specs/cococoncepts.draft-lux.json's build notes. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 11, 'wght' 500;
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.dsp--lc { text-transform: none; letter-spacing: 0.005em; }

h1.dsp { font-size: var(--fs-display); }
h2.dsp { font-size: var(--fs-xxl); }
h3.dsp { font-size: var(--fs-xl); }

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-40);
  display: block;
}
.eyebrow--onink { color: var(--brass); }

.lede { font-size: var(--fs-lg); line-height: 1.55; font-weight: 300; margin: 0; }
.wrap p, .rail p, .hero p, .g2 p, .g3 p, .g4 p { margin: 0 0 var(--sp-40); }
.wrap p:last-child, .rail p:last-child, .hero p:last-child { margin-bottom: 0; }

.small {
  font-size: var(--fs-sm); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: 500; color: var(--muted);
}

.gold { color: var(--accent); }
.gold--onink { color: var(--brass); }

/* ── sections and bands ────────────────────────────────────────────────── */
.section { padding-block: var(--sp-80); }
.section--tight { padding-block: var(--sp-70); }
.band-surface { background: var(--surface); }
.band-ink { background: var(--contrast); color: var(--base); }
.band-ink .dsp { color: var(--base); }
.band-ink p { color: var(--base); }
.hair { border: 0; border-top: var(--hairline) solid var(--line); margin: 0; }

.rail { display: grid; grid-template-columns: minmax(250px, 29%) 1fr; gap: var(--sp-70); align-items: start; }
.rail__head h2.dsp { font-size: clamp(1.875rem, 1.4464rem + 1.8283cqi, 3rem); }
.rail__head { position: sticky; top: var(--sp-50); }
@container page (max-width: 900px) {
  .rail { grid-template-columns: 1fr; gap: var(--sp-50); }
  .rail__head { position: static; }
}

/* ── CTA / link ────────────────────────────────────────────────────────── */
.cta {
  display: inline-flex; align-items: center; gap: 0.9em;
  background: var(--contrast); color: var(--base);
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 1.15em 1.9em; border: var(--hairline) solid var(--contrast);
  text-decoration: none; border-radius: 0; line-height: 1; white-space: nowrap;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.cta::after { content: "\2192"; font-size: 1.15em; transform: translateY(-0.02em); transition: transform .35s ease; }
.cta:hover { background: transparent; color: var(--contrast); border-color: var(--accent); transform: translateY(-1px); }
.cta:hover::after { transform: translate(3px, -0.02em); }
.cta--onink { background: var(--brass); color: var(--contrast); border-color: var(--brass); }
.cta--onink:hover { background: transparent; color: var(--brass); border-color: var(--brass); }
.cta--ghost { background: transparent; color: var(--contrast); border-color: var(--line); }
.cta--ghost:hover { background: var(--contrast); color: var(--base); border-color: var(--contrast); }

.link {
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: var(--hairline) solid var(--line);
  padding-bottom: 0.35em;
  transition: border-color .3s ease;
}
.link:hover { border-color: var(--accent); }
.link--onink { color: var(--brass); border-bottom-color: var(--ink-line); }
.link--onink:hover { border-color: var(--brass); }

/* ── masthead / nav ────────────────────────────────────────────────────── */
.mast { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-50); padding-top: var(--sp-50); padding-bottom: var(--sp-50); }
.mark { text-decoration: none; color: var(--contrast); display: block; }
.mark__name {
  font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; line-height: 1;
  display: block;
}
.mark__sub {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  margin-top: 0.72em; display: block; padding-left: 0.16em;
}
.band-ink .mark__sub { color: var(--muted-lift); }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.9cqi, 30px); }
.nav a {
  font-size: var(--fs-sm); font-weight: 400; letter-spacing: var(--ls-nav);
  text-transform: uppercase; color: var(--contrast); text-decoration: none;
  padding-bottom: 3px; border-bottom: var(--hairline) solid transparent;
  transition: border-color .3s ease, color .3s ease;
}
.nav a:hover { border-color: var(--accent); color: var(--accent); }
.nav a[aria-current] { border-color: var(--accent); }
.nav a.cta { color: var(--base); border: var(--hairline) solid var(--contrast); padding-bottom: 1.15em; }
.nav a.cta:hover { color: var(--contrast); border-color: var(--accent); }

.nav__burger { display: none; }
/* 2026-09-04 mobile nav fix — the CTA now lives inside the disclosure panel
   (.nav__links) instead of sitting as a third element in the collapsed
   mobile row. At 375px, wordmark + burger + separate CTA button summed to
   more than the available inline space; with nothing left able to shrink
   (nowrap wordmark, fixed-content burger and CTA), flexbox's
   justify-content:space-between rendered that shortfall as a negative gap —
   the burger visually overlapping the wordmark's last letters. Folding the
   CTA into the panel drops the collapsed row to two items (wordmark,
   burger), which comfortably fits at any phone width. Panel open/close is
   driven by the inline script in parts/header.html toggling `.is-open`. */
/* 2026-09-06 nav fit fix -- raised from 900px. The 7th nav link ("For
   designers") pushed the full desktop row's natural no-wrap width to
   ~1299-1300px (measured live: 1298px wraps, 1300px doesn't), leaving a
   broken 900-1300px band where neither the full nav nor the burger
   correctly applied. 1320px adds a 20px safety margin above the measured
   edge and stays well clear of 1366/1440. Nothing below 900px changed --
   this only widens the range that gets the same already-verified
   disclosure/burger behavior. Keep parts/header.html's matchMedia in sync
   with this number.
   2026-09-07 -- lowered from 1320px. "For designers" removed (designer
   channel dropped, page 29 trashed). With six nav items the natural
   no-wrap edge is ~1096-1097px (measured live: 1096px wraps, 1097px
   doesn't). 1120px keeps a 23px safety margin above that edge -- back well
   inside the 1160-1320px band that would otherwise wrongly show the
   burger with room to spare. Keep parts/header.html's matchMedia in sync
   with this number. */
@container page (max-width: 1120px) {
  .nav { position: relative; }
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: calc(100% + var(--sp-30));
    right: 0;
    min-width: 240px;
    background: var(--base);
    border: var(--hairline) solid var(--line);
    box-shadow: 0 16px 40px color-mix(in oklab, var(--contrast) 24%, transparent);
    z-index: 30;
  }
  .nav__links.is-open a {
    padding: 0.95em var(--sp-50);
    border-bottom: var(--hairline) solid var(--line);
  }
  .nav__links.is-open a:last-child { border-bottom: 0; }
  .nav__links.is-open a.cta {
    justify-content: center;
    margin: var(--sp-30);
  }
  .nav__burger {
    display: inline-flex; gap: 4px; flex-direction: column; justify-content: center;
    width: 26px; height: 18px; background: none; border: 0; padding: 0; margin: 0;
    cursor: pointer; flex: 0 0 auto; -webkit-tap-highlight-color: transparent;
  }
  .nav__burger i { display: block; height: 1px; background: var(--contrast); transition: transform .25s ease, opacity .25s ease; }
  .nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav__burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .mast { padding-top: var(--sp-40); padding-bottom: var(--sp-40); }
}
@container page (max-width: 620px) {
  .mast { gap: 10px; }
  .mark { flex: 1 1 auto; min-width: 0; }
  .nav { flex: 0 0 auto; gap: 10px; }
  .mark__name { letter-spacing: 0.16em; white-space: nowrap; }
  .mark__sub { letter-spacing: 0.08em; font-size: 8.5px; }
  .nav a.cta { padding: 0.95em 1em; letter-spacing: 0.1em; font-size: 10.5px; }
}

/* ── image slots — real photo, ported from the comp unchanged ───────────── */
.shot {
  position: relative; display: block; overflow: hidden;
  background: var(--surface) center/cover no-repeat;
  aspect-ratio: 3 / 2;
}
.shot--por  { aspect-ratio: 4 / 5; }
.shot--fill { aspect-ratio: auto; height: 100%; }

/* ── image slots — PENDING. Today's honest placeholder for the two real
   photo slots (ph11 hero, ph04 industrial), matching the same visual
   language as the empty reviews and empty projects grid: a hairline
   boundary, muted uppercase label, no broken-image icon, no stock filler.
   Replace with the real photograph directly (drop the .shot--pending
   modifier and set background-image) once it's uploaded — the geometry
   does not change. ------------------------------------------------------ */
.shot--pending {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--surface);
  border: var(--hairline) dashed var(--line);
}
.shot--pending .shot__pending-label {
  padding: var(--sp-50);
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted);
  max-width: 24ch;
}
.shot--pending .shot__pending-label b {
  display: block; color: var(--contrast); margin-bottom: 0.6em; font-weight: 600;
}
.band-ink .shot--pending { background: var(--ink-2); border-color: var(--ink-line); }
.band-ink .shot--pending .shot__pending-label { color: var(--muted-lift); }
.band-ink .shot--pending .shot__pending-label b { color: var(--base); }

/* ── project card — ready for real content; nothing renders it today since
   zero homus_project posts are published (see .filters-empty below). ---- */
.card { position: relative; display: block; text-decoration: none; color: inherit; }
.card__frame { position: relative; overflow: hidden; }
.card__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
      color-mix(in oklab, var(--contrast) 92%, transparent) 0%,
      color-mix(in oklab, var(--contrast) 78%, transparent) 18%,
      color-mix(in oklab, var(--contrast) 44%, transparent) 40%,
      color-mix(in oklab, var(--contrast) 12%, transparent) 62%,
      transparent 82%);
}
.card .shot { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.card:hover .shot { transform: scale(1.035); }
.chip {
  position: absolute; top: var(--sp-40); left: var(--sp-40); z-index: 4;
  background: var(--base); color: var(--contrast);
  font-family: var(--ff-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.62em 0.95em; line-height: 1;
}
.card__foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: var(--sp-50) var(--sp-40) var(--sp-40);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-40);
}
.card__name {
  font-family: var(--ff-display);
  font-size: clamp(0.9375rem, 0.86rem + 0.33cqi, 1.1875rem);
  letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.25;
  color: var(--base); margin: 0; max-width: 22ch;
}
.card__sqft {
  font-family: var(--ff-body); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
  white-space: nowrap; padding-bottom: 0.25em;
}
.card__meta {
  display: flex; flex-wrap: wrap; gap: 0.55em 1.1em; align-items: baseline;
  margin-top: var(--sp-30);
  font-size: 11px; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.card__meta .st { color: var(--accent); }
.card__desc { margin-top: var(--sp-30); font-size: var(--fs-base); color: var(--muted); line-height: 1.62; max-width: 44ch; }

/* ── filter rail ──────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
/* 2026-09-04: chips are real <button>s (were <span>s -- mouse-only, no
   keyboard path, same defect class as the nav burger). aria-pressed drives
   both the active-state style and the toggle logic in each template's
   inline script, so the type row (radio-style) and the size row
   (individually toggleable) read identically despite behaving differently. */
.filters button.filters__btn {
  font: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; line-height: 1;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  padding: 0.72em 1.15em; border: var(--hairline) solid var(--line); color: var(--muted);
  cursor: pointer; background: none;
}
.filters button.filters__btn[aria-pressed="true"] { background: var(--contrast); border-color: var(--contrast); color: var(--base); }
.filters button.filters__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the honest empty state for the project grid — same copy pattern as the
   already-live approved site's project-empty-state, in draft-lux's voice. */
.filters-empty {
  grid-column: 1 / -1;
  border: var(--hairline) dashed var(--line);
  padding: var(--sp-70) var(--sp-60);
  color: var(--muted); font-size: var(--fs-base); line-height: 1.62;
  max-width: 62ch;
}

/* ── reviews ──────────────────────────────────────────────────────────── */
.rev {
  background: var(--base); border: var(--hairline) solid var(--line);
  padding: var(--sp-60) var(--sp-50);
  display: flex; flex-direction: column; gap: var(--sp-40);
}
.rev__stars { display: flex; gap: 5px; }
.rev__stars i {
  width: 15px; height: 15px; display: block;
  background: var(--line);
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 38.2% 35%);
}
.rev__stars i.is-filled { background: var(--accent); }
/* real content — plain text, not the comp-review dashed placeholder box */
.rev__slot--name {
  font-family: var(--ff-display); font-size: var(--fs-lg); text-transform: none;
  letter-spacing: 0.01em; color: var(--contrast); border: 0; padding: 0;
}
.rev__slot--quote {
  font-family: var(--ff-body); font-size: var(--fs-base); color: var(--muted);
  letter-spacing: 0; line-height: 1.62; border: 0; padding: 0; min-height: 0;
}
.rev__slot--housing { font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); border: 0; padding: 0; }
.rev__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-40); margin-top: auto; padding-top: var(--sp-40); border-top: var(--hairline) solid var(--line); }
.rev__g { display: flex; align-items: center; gap: 0.6em; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rev__g svg { width: 14px; height: 14px; display: block; }
.rev__g a { color: inherit; text-decoration: none; border-bottom: var(--hairline) solid var(--line); }
.rev__g a:hover { border-color: var(--accent); color: var(--accent); }

.rev-empty {
  border: var(--hairline) dashed var(--line);
  padding: var(--sp-70) var(--sp-60);
  grid-column: 1 / -1;
}
.rev-empty h3 { font-family: var(--ff-display); font-size: var(--fs-lg); text-transform: none; letter-spacing: 0.01em; margin: 0 0 var(--sp-40); }
.rev-empty p { color: var(--muted); font-size: var(--fs-base); line-height: 1.62; max-width: 62ch; }
.rev-empty ul { list-style: none; margin: var(--sp-40) 0 0; padding: 0; display: grid; gap: 0.6em; color: var(--muted); font-size: var(--fs-base); }

/* ── figures / commercial model ───────────────────────────────────────── */
.fig { font-family: var(--ff-display); font-optical-sizing: none; font-variation-settings: 'opsz' 11, 'wght' 500; font-size: var(--fs-xxl); line-height: 1; color: var(--brass); }

/* ── numbered stages ──────────────────────────────────────────────────── */
.stage { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-50); padding: var(--sp-50) 0; border-top: var(--hairline) solid var(--line); }
.stage__n { font-family: var(--ff-display); font-optical-sizing: none; font-variation-settings: 'opsz' 11, 'wght' 400; font-size: var(--fs-xl); color: var(--accent); line-height: 1; letter-spacing: 0.04em; }

/* ── grids ────────────────────────────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-60); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-60); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-50); }
@container page (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@container page (max-width: 720px)  { .g4, .g3, .g2 { grid-template-columns: 1fr; gap: var(--sp-50); } }

.pgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-50) var(--sp-50); }
.pgrid > * { grid-column: span 4; }
.pgrid > .w5 { grid-column: span 5; }
.pgrid > .w6 { grid-column: span 6; }
.pgrid > .w7 { grid-column: span 7; }
.pgrid > .w8 { grid-column: span 8; }
@container page (max-width: 1000px) { .pgrid > * { grid-column: span 6 !important; } }
@container page (max-width: 720px)  { .pgrid > * { grid-column: span 12 !important; } }

/* ── hero — split, ink panel + photograph ────────────────────────────── */
.hero { display: grid; grid-template-columns: 43% 57%; background: var(--contrast); color: var(--base); }
.hero h1.dsp { font-size: clamp(1.875rem, 1.4931rem + 1.6294cqi, 2.875rem); letter-spacing: 0.045em; }
.hero__panel { padding: var(--sp-80) clamp(24px, 4cqi, 72px) var(--sp-70); display: flex; flex-direction: column; justify-content: center; }
.hero__art { position: relative; min-height: 68cqi; }
.hero__art .shot { height: 100%; }
.hero__scroll { margin-top: var(--sp-70); display: flex; align-items: center; gap: 0.8em; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-lift); }
.hero__scroll::before { content: ""; width: 46px; height: 1px; background: var(--ink-line); }
@container page (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__art { min-height: 0; aspect-ratio: 4 / 5; order: -1; }
  .hero__panel { padding: var(--sp-60) 20px var(--sp-60); }
  .hero__scroll { margin-top: var(--sp-50); }
}

/* ── enquiry form — real, wired to POST /wp-json/homus/v1/enquiry ──────── */
.enq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-50) var(--sp-40); }
.enq .field { min-width: 0; }
.enq .field--full { grid-column: 1 / -1; }
.enq label {
  display: block; font-family: var(--ff-body); font-size: var(--fs-sm);
  font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.6em;
}
.enq input, .enq select, .enq textarea {
  width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  background: var(--base); color: var(--contrast);
  font-family: var(--ff-body); font-size: var(--fs-base);
  border: var(--hairline) solid var(--line); border-radius: 0;
  padding: 0.85em 1em; line-height: 1.3;
  min-height: 3em; /* sane tap target -- was borderline on compact selects */
}
/* 2026-09-04 mobile form fix -- box-sizing defaults to content-box, so
   width:100% was only the *content* width; padding (2 x 1em) and the
   hairline border were added on top, making every field render ~34px
   wider than its grid cell at ANY width. That is what was pushing
   "Phone or email" and the sqft field flush to the screen edge with no
   right gutter -- not just the missing single-column collapse below.
   border-box makes width:100% mean the full box, padding and border
   included, like the rest of this stylesheet already assumes. */
.enq .file { box-sizing: border-box; }
.enq textarea { resize: vertical; }
.enq select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                     linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.3em) 1.35em, calc(100% - 0.9em) 1.35em;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.enq input:focus, .enq select:focus, .enq textarea:focus { outline: none; border-color: var(--accent); }
.enq .file {
  display: flex; align-items: center; justify-content: space-between;
  border: var(--hairline) dashed var(--line); padding: 0.85em 1em;
  font-size: var(--fs-sm); color: var(--muted); position: relative;
}
.enq .file input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.enq .file span:last-child {
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent);
}
.enq .submit { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-40); flex-wrap: wrap; }
.enq .note { font-size: var(--fs-sm); color: var(--muted); }
.enq .homus-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq .homus-form__status { grid-column: 1 / -1; font-size: var(--fs-sm); padding: 0.85em 1em; border: var(--hairline) solid var(--line); }
.enq .homus-form__status--ok { border-color: var(--accent); color: var(--contrast); }
.enq .homus-form__status--error { border-color: #7A1F0C; color: #7A1F0C; }

/* 2026-09-04 mobile form-grid fix — this collapse rule used to live in the
   grids section above the .g2/.g3/.g4 breakpoints, textually BEFORE the
   unconditional ".enq{grid-template-columns:1fr 1fr}" rule. With equal
   specificity, source order decides the winner, so the later unconditional
   rule was silently clobbering it at every width — the form never actually
   collapsed to one column on a phone. Moved here, after the rule it needs
   to beat, and paired with minmax(0,1fr) tracks + min-width:0 on .field
   above so fields also can't blow out of their column at in-between
   widths (a plain 1fr track's minimum is content-based, not zero). */
@container page (max-width: 520px) {
  .enq { grid-template-columns: 1fr; }
}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { background: var(--contrast); color: var(--base); padding: var(--sp-80) 0 var(--sp-60); }
.foot a { color: var(--base); text-decoration: none; border-bottom: var(--hairline) solid var(--ink-line); }
.foot a:hover { border-color: var(--brass); color: var(--brass); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-60); }
@container page (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@container page (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; gap: var(--sp-50); } }
.foot h4 { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin: 0 0 var(--sp-40); font-weight: 500; }
.foot p, .foot li { color: var(--base); font-size: var(--fs-base); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; }
.foot__legal { margin-top: var(--sp-70); padding-top: var(--sp-50); border-top: var(--hairline) solid var(--ink-line); display: flex; flex-wrap: wrap; gap: var(--sp-40) var(--sp-60); font-size: 12.5px; color: var(--muted-lift); letter-spacing: 0.06em; }
/* 2026-09-07 footer-year size fix -- the copyright year is a dynamic
   homus/current-year paragraph block (parts/footer.html), forced inline via
   style attribute. ".foot p, .foot li" above sets font-size on ANY <p>
   inside .foot (needed for the address/hours paragraphs elsewhere in the
   footer), which was also catching this one and overriding the 12.5px it
   should inherit from .foot__legal with --fs-base (~16-17px) instead --
   same font/weight, so it read as the year being ~28% larger than the
   sentence around it. Scoped two-class override (specificity beats ".foot
   p" regardless of source order) so only the legal strip's own paragraph
   is affected -- does not touch ".foot p" itself or any other paragraph on
   the site. */
.foot__legal .wp-block-paragraph { font-size: inherit; line-height: inherit; }

/* ── WhatsApp floating contact button ────────────────────────────────────
   Sitewide via parts/footer.html (shared template part, rendered on every
   page). Built in the site's own palette per Charlotte's explicit request
   (relayed via Atlas, 2026-09-07) rather than the stock WhatsApp green --
   espresso circle (--contrast), bone glyph (--base), brass hairline on
   hover (--brass). Fixed bottom-right, safe inset from both edges via
   cqi so it scales with the page container like everything else in this
   file. Minimum 56px square tap target at every width the fleet tests
   (430/390/375) -- 60px above that. z-index 999 keeps it above the mobile
   nav disclosure panel (z-index 30) and any other in-flow content; hover
   motion is already covered by the blanket prefers-reduced-motion rule
   directly below this block. */
.wa-float {
  position: fixed;
  right: clamp(16px, 4.5cqi, 28px);
  bottom: clamp(16px, 4.5cqi, 28px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--contrast);
  border: var(--hairline) solid var(--ink-line);
  box-shadow: 0 10px 28px color-mix(in oklab, var(--contrast) 34%, transparent);
  z-index: 999;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wa-float svg { width: 28px; height: 28px; display: block; }
.wa-float svg path { fill: var(--base); }
.wa-float:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: 0 14px 34px color-mix(in oklab, var(--contrast) 40%, transparent);
}
.wa-float:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@container page (max-width: 560px) {
  .wa-float { width: 56px; height: 56px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }