/* =========================================================
   TROPICAL LANDSCAPE CONSULTANT
   Gallery-light editorial system — redesigned 2026-07-03.
   Ivory paper · ink · deep botanical green · quiet bronze.
   The restraint of Raymond Jungles / Fernando Wong: white
   space, photography, hairlines, one confident serif voice.
   ========================================================= */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.webp-picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
[hidden] { display: none !important; } /* the hidden attribute must win over class-set display (e.g. .btn) */

/* ---- Design tokens ---- */
/* BRAND PASS 2026-08-05 — values now come from the official brand guide.
   Legacy token NAMES are deliberately kept (noir/bone/gold/paper aliases) so
   the ~400 existing references across five stylesheets, inline styles and
   scripts keep resolving. Only the VALUES changed.

   ---------------------------------------------------------------------
   THE ONE RULE THAT MATTERS: Melon is a SURFACE, never body text.
   Melon on Ivory measures 1.67:1 — far below the 4.5:1 needed to read.
   The brand guide uses Melon exactly this way: as a full-bleed panel
   behind green line art, never as type on a light ground.
   So the old bronze TEXT accent maps to OLIVE (5.30:1, passes AA),
   and Melon lives in --melon / --melon-* for fills, rules and badges.
   ---------------------------------------------------------------------

   Verified contrast on Ivory #F3F1E8:
     Grass  #353D2E  9.99:1  AAA  → body text
     Dark   #624A41  7.21:1  AAA  → warm secondary text
     Green  #1C5D48  6.85:1  AA   → headings, links
     Olive  #626643  5.30:1  AA   → eyebrows, meta, the accent voice
     Melon  #EFACA5  1.67:1  FAIL → surfaces only
*/
:root {
  /* ---- The six brand colours, verbatim from the guide ---- */
  --ivory:  #F3F1E8;
  --melon:  #EFACA5;
  --green:  #1C5D48;
  --olive:  #626643;
  --grass:  #353D2E;
  --dark:   #624A41;

  /* Paper — Ivory is the wall now, not white */
  --paper:       #F3F1E8;   /* page background — brand Ivory */
  --paper-2:     #EAE7DA;   /* alternate section surface, deeper ivory */
  --card:        #F8F7F1;   /* raised card surface, lifted off the wall */
  --cream:       #F3F1E8;   /* legacy alias */
  --shell:       #EEEBDF;   /* legacy alias */

  /* Ink — Grass is the primary text colour (9.99:1, the strongest pair) */
  --ink:         #353D2E;   /* primary text — brand Grass */
  --ink-soft:    #4A5142;   /* Grass lifted toward Olive */
  --ink-mute:    #636859;   /* muted meta — clears AA on ivory (5.08),
                              card (5.35) AND paper-2 (4.64) */

  /* Botanical green — the primary brand colour */
  --deep-green:  #1C5D48;   /* brand Green */
  --rich-green:  #24543F;   /* Green shaded toward Grass */
  --frond-green: #1C5D48;
  --frond-light: #1C5D48;   /* legacy alias — success text must stay legible */
  --moss:        #626643;   /* brand Olive */

  /* Accent voice — was bronze, now Olive.
     This carries every eyebrow, price, link and bullet in portal/crew. */
  --bronze:      #626643;   /* brand Olive */
  --gold:        #626643;   /* legacy alias — now Olive */
  --gold-bright: #6E7350;   /* legacy alias — Olive lifted for hover */
  --gold-deep:   #4E5236;   /* legacy alias — Olive deepened */

  /* Melon — fills, rules, badges, large display accents. NOT text on light. */
  --melon-soft:  #F6D2CE;   /* Melon at ~50% over ivory, for tints */
  --melon-line:  #E4B7B1;   /* Melon hairline, visible on ivory */
  --melon-deep:  #D98F87;   /* Melon deepened, for hover on melon fills */
  --on-melon:    #353D2E;   /* the ONLY safe text colour on Melon — 5.98:1 */

  /* Hairlines — warm now, derived from Dark rather than neutral grey */
  --line:        #DDD9C9;
  --line-soft:   #E7E4D6;
  --noir-line:   #DDD9C9;             /* legacy alias */
  --noir-line-2: #E7E4D6;             /* legacy alias */

  /* Legacy dark-surface aliases — remapped to the ivory surfaces */
  --noir:        #F3F1E8;
  --noir-2:      #F8F7F1;
  --noir-3:      #EAE7DA;

  /* Legacy "bone" text aliases — remapped to the ink ramp */
  --bone:        #353D2E;
  --bone-mute:   #4A5142;
  --bone-faint:  #636859;   /* keep in step with --ink-mute */

  /* Deep surfaces — for inverted sections. Grass reads richer than Green
     at full-bleed and holds Ivory text at 9.99:1. */
  --surface-deep:     #353D2E;   /* brand Grass */
  --surface-deep-2:   #1C5D48;   /* brand Green */
  --on-deep:          #F3F1E8;   /* Ivory on either — 9.99 / 6.85 */
  --on-deep-mute:     #CFCDC2;   /* 7.08 on Grass, 4.86 on Green — both AA */
  /* The accent voice on deep surfaces. Raw Melon only reaches 4.10 on Green
     (large text only) so eyebrows would fail; Melon lifted toward ivory
     keeps the blush and reaches 5.55. This is what replaces the old
     gold-on-forest accent. */
  --accent-on-deep:   #F6D2CE;

  /* Bloom — rare deep accent (storm + alerts). Pulled toward brand Dark
     so it reads as family rather than as a foreign red. */
  --bloom:         #8A3A34;
  --hibiscus:      #8A3A34;  /* legacy alias */
  --hibiscus-deep: #6F2E29;

  /* ---- Type — per brand guide §04 ----
     Licensed faces load from site/fonts/ via brand-fonts.css. Each stack
     falls back to the closest available face so the site is correct today
     and upgrades silently when the licensed files are dropped in. */
  --display: "TLC Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script:  "TLC Script", "Cormorant Garamond", Georgia, serif;
  --label:   "TLC Label", "Courier Prime", ui-monospace, Menlo, Consolas, monospace;

  --serif: var(--display);  /* legacy alias — 67 references */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout */
  --max-w: 1320px;
  --gutter: clamp(22px, 5vw, 72px);
  --section-y: clamp(110px, 15vw, 220px);

  /* Effects — shadows tinted with Grass so they sit warm on ivory
     instead of the cool grey cast that reads wrong on a cream ground */
  --shadow-sm: 0 2px 12px rgba(53, 61, 46, 0.07);
  --shadow-md: 0 16px 44px rgba(53, 61, 46, 0.10);
  --shadow-lg: 0 30px 80px rgba(53, 61, 46, 0.13);
  --radius: 0px;  /* square corners throughout */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tracking helper */
.u-track { letter-spacing: 0.28em; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* body.noir is retired — pages are light. Alias kept so a stale cache can't go dark. */
body.noir { background: var(--paper); color: var(--ink); }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  color: var(--ink);
  letter-spacing: 0.002em;
}
body.noir h1, body.noir h2, body.noir h3, body.noir h4, body.noir h5 { color: var(--ink); }

h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 3.9vw, 3.3rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2.15rem); font-weight: 400; }
h4 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; }
h5 { font-size: 0.95rem; font-family: var(--sans); font-weight: 600; }
p  { color: var(--ink-soft); }
body.noir p { color: var(--ink-soft); }

.lead {
  font-size: clamp(1.12rem, 1.55vw, 1.42rem);
  line-height: 1.66;
  font-weight: 300;
  color: var(--ink);
}
body.noir .lead { color: var(--ink); }
.serif-accent { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Large quiet statement — one confident line, lots of air */
.statement {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.24;
  letter-spacing: 0; color: var(--ink); max-width: 24ch;
}
.section--paper .statement, body:not(.noir) .statement { color: var(--ink); }
body:not(.noir) .section--forest .statement, .section--forest .statement { color: var(--on-deep); }
.statement--wide { max-width: 32ch; }
.statement em { font-style: italic; color: var(--deep-green); }
.section--forest .statement em { color: var(--accent-on-deep); }

/* Quiet editorial line */
.quiet-line { font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--ink-mute); line-height: 1.6; }
.section--paper .quiet-line { color: var(--ink-soft); }
.section--forest .quiet-line { color: rgba(244, 241, 232, 0.75); }

/* Eyebrow / kicker — LV pass: monochrome ink, wider tracking; green is reserved
   for interaction states so the page reads black-on-white like a maison. */
/* The eyebrow is the brand's most repeated texture — the guide sets every
   section label in widely-tracked Courier caps ("01. MAIN LOGO"). Moving this
   from Inter to the label face is the single biggest lever for making the
   site read as this identity rather than a recoloured version of the old one. */
.eyebrow {
  display: inline-block;
  font-family: var(--label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
}
body.noir .eyebrow { color: var(--ink); }
.eyebrow--gold { color: var(--olive); }   /* accent voice — Olive, 5.30:1 */
.eyebrow--melon { color: var(--olive); }  /* Melon is never type on ivory */
.section--forest .eyebrow { color: var(--accent-on-deep); }
.section--paper .eyebrow { color: var(--ink); }

/* Rule */
.divider {
  width: 56px; height: 1px; margin: 26px 0;
  background: var(--ink);
  opacity: 0.28;
}
.divider--center { margin-left: auto; margin-right: auto; }
.hairline { height: 1px; background: var(--line); border: 0; }

/* ---- Layout primitives ---- */
.container {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.container--narrow { max-width: 860px; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: clamp(54px, 7vw, 92px); padding-bottom: clamp(54px, 7vw, 92px); }

/* Section surfaces — legacy names kept; all light except the rare green band. */
.section--noir   { background: var(--paper); color: var(--ink); }
.section--noir2  { background: var(--paper-2); color: var(--ink); }
.section--paper  { background: var(--paper); color: var(--ink); }
.section--forest {
  background: var(--surface-deep); color: var(--on-deep);
  background-image: radial-gradient(130% 130% at 82% -12%, rgba(70, 110, 86, 0.4), transparent 62%);
}
.section--noir h1, .section--noir h2, .section--noir h3,
.section--noir2 h1, .section--noir2 h2, .section--noir2 h3 { color: var(--ink); }
.section--noir p, .section--noir2 p { color: var(--ink-soft); }
.section--forest h2, .section--forest h3 { color: var(--on-deep); }
.section--forest p { color: rgba(244, 241, 232, 0.78); }
.section--paper h1, .section--paper h2, .section--paper h3, .section--paper h4 { color: var(--ink); }
.section--paper p { color: var(--ink-soft); }
body.noir .section--paper h1, body.noir .section--paper h2,
body.noir .section--paper h3, body.noir .section--paper h4,
body.noir .section--paper .statement { color: var(--ink); }
body.noir .section--paper p, body.noir .section--paper li { color: var(--ink-soft); }
body.noir .section--paper .quiet-line { color: var(--ink-soft); }

.center { text-align: center; }
.section-head { max-width: 680px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 6px; }

/* ---- Buttons ---- */
/* Buttons — LV pass: square, quiet, no lift. Hover inverts or deepens; motion is reserved
   for the arrow alone. */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 16px 34px;
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  border-radius: 0;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), opacity .35s var(--ease);
}
.btn--primary { background: var(--ink); color: var(--on-deep); }
.btn--primary:hover { background: var(--deep-green); }
.btn--solid-green { background: var(--deep-green); color: var(--on-deep); }
.btn--solid-green:hover { background: var(--rich-green); }
.btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn--ghost-dark { background: transparent; color: var(--ink); border: 1px solid rgba(25, 25, 26, 0.4); }
.btn--ghost-dark:hover { border-color: var(--ink); background: var(--ink); color: var(--on-deep); }
.btn--light { background: var(--card); color: var(--ink); }
.btn--light:hover { background: var(--paper-2); }
.btn-arrow::after { content: "\2192"; transition: transform .3s var(--ease); }
.btn-arrow:hover::after { transform: translateX(5px); }
.btn-group { display: flex; flex-wrap: wrap; gap: 16px; }

/* Text link with underline reveal */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep-green);
  padding-bottom: 4px; position: relative;
}
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--deep-green); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.tlink:hover::after { transform: scaleX(1); }
.tlink .arr { transition: transform .3s var(--ease); }
.tlink:hover .arr { transform: translateX(4px); }
.section--paper .tlink, .tlink--dark { color: var(--deep-green); }
.section--paper .tlink::after { background: var(--deep-green); }

/* ============ NAVIGATION ============ */
/* Transparent over the hero (white text), ivory veil once scrolled. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease), color .4s var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--on-deep);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-w); margin: 0 auto;
  padding: 26px var(--gutter);
  transition: padding .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.nav.is-scrolled .nav__inner { padding-top: 14px; padding-bottom: 14px; }

/* Brand — LV pass: a tracked serif wordmark rather than a title-case logotype. */
.nav__brand { display: flex; flex-direction: column; line-height: 1.15; }
.nav__brand b {
  font-family: var(--display); font-weight: 400; font-size: 1.12rem;
  color: inherit; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}
/* "Landscape" set in the script face, per the guide's lockup. Sits on the
   same baseline as the roman caps and is size-matched so the swash reads
   without overpowering. Falls back to an italic serif until Sloop lands. */
.nav__brand-script {
  font-family: var(--script); font-style: italic;
  text-transform: none; letter-spacing: 0.01em;
  font-size: 1.18em; line-height: 1;
}
.nav__brand span {
  /* Courier, widely tracked — the guide's signature label texture */
  font-family: var(--label); font-size: 8px; font-weight: 700;
  letter-spacing: 0.4em; text-transform: uppercase; color: inherit; opacity: 0.7;
  margin-top: 6px;
}
.nav.is-scrolled .nav__brand span { opacity: 0.6; }
.nav__menu { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__menu a:not(.btn) {
  font-family: var(--label); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: inherit; opacity: 0.85;
  position: relative; transition: opacity .3s var(--ease), color .3s var(--ease);
  padding: 4px 0; white-space: nowrap;
}
.nav__menu a:not(.btn):hover { opacity: 1; }
.nav__menu a.is-active { opacity: 1; }
.nav__menu a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__menu a:not(.btn):hover::after, .nav__menu a.is-active:not(.btn)::after { transform: scaleX(1); }
.nav__menu .btn { padding: 12px 20px; white-space: nowrap; }
.nav .btn--primary { background: rgba(255, 255, 255, 0.96); color: var(--ink); }
.nav .btn--primary:hover { background: var(--card); color: var(--deep-green); }
.nav.is-scrolled .btn--primary { background: var(--ink); color: var(--on-deep); }
.nav.is-scrolled .btn--primary:hover { background: var(--deep-green); }

.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 999px;
  background: rgba(18, 28, 21, 0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: inherit;
  opacity: 1;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav__dropdown-toggle:hover,
.nav__dropdown-toggle:focus-visible,
.nav__dropdown.is-open .nav__dropdown-toggle {
  background: rgba(18, 28, 21, 0.22); border-color: rgba(255, 255, 255, 0.46);
}
.nav.is-scrolled .nav__dropdown-toggle {
  background: rgba(38, 80, 58, 0.035); border-color: rgba(25, 25, 26, 0.14);
}
.nav.is-scrolled .nav__dropdown-toggle:hover,
.nav.is-scrolled .nav__dropdown-toggle:focus-visible,
.nav.is-scrolled .nav__dropdown.is-open .nav__dropdown-toggle {
  background: rgba(38, 80, 58, 0.075); border-color: rgba(38, 80, 58, 0.22);
}
.nav__chevron {
  width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  opacity: 0.72; transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease);
}
.nav__dropdown.is-open .nav__chevron { transform: translateY(1px) rotate(225deg); }
.nav__dropdown-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  display: grid; gap: 0; min-width: 224px;
  padding: 8px; border: 1px solid rgba(25, 25, 26, 0.1); border-radius: 12px;
  background: rgba(250, 249, 246, 0.985); color: var(--ink);
  -webkit-backdrop-filter: saturate(120%) blur(16px); backdrop-filter: saturate(120%) blur(16px);
  box-shadow: 0 18px 46px rgba(18, 22, 19, 0.14), 0 2px 8px rgba(18, 22, 19, 0.06);
  opacity: 0; pointer-events: none; transform: translateY(5px) scale(0.985); transform-origin: top right;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.nav.is-scrolled .nav__dropdown-panel {
  border-color: rgba(25, 25, 26, 0.1); background: rgba(250, 249, 246, 0.985); color: var(--ink);
}
.nav__dropdown.is-open .nav__dropdown-panel {
  opacity: 1; pointer-events: auto; transform: none;
}
.nav__dropdown-panel a:not(.btn) {
  display: block; padding: 12px 13px; border-radius: 7px;
  color: var(--ink); font-size: 9.5px; letter-spacing: 0.17em; opacity: 0.72;
  transition: background .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease);
}
.nav__dropdown-panel a:not(.btn)::after { display: none; }
.nav__dropdown-panel a:not(.btn):hover,
.nav__dropdown-panel a.is-active:not(.btn) {
  background: rgba(38, 80, 58, 0.065); color: var(--deep-green); opacity: 1;
}
.nav.is-scrolled .nav__dropdown-panel a:not(.btn):hover,
.nav.is-scrolled .nav__dropdown-panel a.is-active:not(.btn) {
  background: rgba(38, 80, 58, 0.065);
}

.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; }
.nav__toggle span { width: 26px; height: 1.5px; background: currentColor; transition: .3s var(--ease); }
.nav__mobile-actions { display: none; align-items: center; gap: 10px; }
.nav__cta { padding: 10px 16px; font-size: 9.5px; }

/* ============ HERO ============ */
.hero {
  position: relative; min-height: 96svh; display: flex; align-items: flex-end;
  color: var(--on-deep); overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  transform: scale(1.06); animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.hero__picture { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 22, 19, 0.38) 0%, rgba(18, 22, 19, 0.06) 34%, rgba(18, 22, 19, 0.42) 82%, rgba(18, 22, 19, 0.6) 100%);
}
.phero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero__video, .phero__video { display: none; } }
.hero__content { position: relative; z-index: 2; padding-bottom: clamp(72px, 12vh, 150px); padding-top: 140px; max-width: 940px; }
.hero h1 { color: var(--on-deep); text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3); }
.hero .lead { color: rgba(255, 255, 255, 0.9); max-width: 640px; margin-top: 26px; }
.hero__ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero__note { margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.hero__note a { color: var(--on-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

/* ============ HOME PAGE — editorial campaign gateway ============ */
.home-campaign { align-items: flex-end; min-height: 100svh; }
.home-campaign .hero__scrim {
  background:
    linear-gradient(180deg, rgba(18, 22, 19, 0.24) 0%, rgba(18, 22, 19, 0.08) 30%, rgba(18, 22, 19, 0.48) 70%, rgba(18, 22, 19, 0.72) 100%);
}
.hero__content--home {
  max-width: var(--max-w);
  padding-bottom: clamp(68px, 10vh, 118px);
  text-align: center;
}
.hero__content--home h1 {
  max-width: 18ch; margin: 16px auto 0;
  color: var(--on-deep); font-size: clamp(3rem, 5.8vw, 5.5rem); font-weight: 300;
  letter-spacing: -0.005em; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.3);
}
.home-kicker {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.36em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.home-note .home-kicker, .home-note__inner .home-kicker { color: var(--deep-green); }
.home-promise {
  margin-top: 20px; color: var(--on-deep);
  font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-style: italic; font-weight: 400;
}
.home-hero-lead {
  max-width: 680px; margin: 14px auto 0; color: rgba(255, 255, 255, 0.88);
  font-size: clamp(14px, 1.35vw, 17px); line-height: 1.65;
}
.home-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
  margin-top: 34px;
}
.home-actions a {
  position: relative; color: var(--on-deep);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  padding-bottom: 6px;
}
.home-actions a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: center;
  transition: transform .35s var(--ease);
}
.home-actions a:hover::after { transform: scaleX(0.72); }
.home-actions--dark a { color: var(--ink); }
.home-scroll {
  display: inline-block; margin-top: clamp(42px, 8vh, 78px);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
}

.home-proof { background: var(--paper); border-bottom: 1px solid var(--line); }
.home-proof__inner {
  min-height: 88px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 20px;
}
.home-proof__inner span {
  color: var(--ink-soft); text-align: center; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.13em; line-height: 1.5; text-transform: uppercase;
}
.home-proof__inner span + span { border-left: 1px solid var(--line); }

.home-doors {
  display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 2px; background: var(--paper); border-top: 2px solid var(--paper);
}
.home-door {
  position: relative; min-height: 50svh; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; color: var(--on-deep); isolation: isolate;
}
.home-door--large { grid-row: span 2; min-height: 100svh; }
.home-door__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transform: scale(1.01); transition: transform 1.2s var(--ease), filter .6s var(--ease);
}
.home-door::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18, 22, 19, 0.02) 0%, rgba(18, 22, 19, 0.12) 48%, rgba(18, 22, 19, 0.62) 100%);
}
.home-door:hover .home-door__img { transform: scale(1.06); filter: saturate(1.06); }
.home-door__body {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: clamp(32px, 5vw, 70px) var(--gutter); text-align: center;
}
.home-door__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.home-door__title {
  margin-top: 12px; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.1rem, 4.8vw, 4.8rem); line-height: 1.04; color: var(--on-deep);
}
.home-door__desc {
  max-width: 48ch; margin-top: 15px; color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px; line-height: 1.6;
}
.home-door:not(.home-door--large) .home-door__desc { max-width: 38ch; font-size: 12.5px; }
.home-door:not(.home-door--large) .home-door__title { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.home-door__cue {
  margin-top: 22px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--on-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.68); padding-bottom: 5px;
}

.home-note {
  background: var(--paper); color: var(--ink);
  padding: clamp(88px, 13vw, 170px) 0;
}
.home-note__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.home-note h2 {
  max-width: 14ch; margin: 18px auto 0;
  color: var(--ink); font-size: clamp(2.4rem, 5.2vw, 4.8rem); font-weight: 300;
  letter-spacing: 0;
}
.home-note__assessment {
  max-width: 760px; margin: 28px auto 0; padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 14px; line-height: 1.7;
}

/* Page hero (interior, shorter) */
.phero { position: relative; display: flex; align-items: flex-end; min-height: 62vh; color: var(--on-deep); overflow: hidden; }
.phero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); animation: heroZoom 16s ease-out forwards; }
.phero__picture { position: absolute; inset: 0; z-index: 0; display: block; transform: scale(1.05); animation: heroZoom 16s ease-out forwards; }
.phero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.phero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 19, 0.36) 0%, rgba(18, 22, 19, 0.1) 42%, rgba(18, 22, 19, 0.58) 100%); }
.phero__content { position: relative; z-index: 2; padding: 150px var(--gutter) clamp(54px, 8vh, 92px); max-width: 880px; }
.phero h1 { color: var(--on-deep); }
.phero .lead { color: rgba(255, 255, 255, 0.88); margin-top: 20px; max-width: 620px; }
.phero .eyebrow { color: rgba(255, 255, 255, 0.85); }
.phero__note { margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); max-width: 680px; }

/* ============ EDITORIAL SPLIT ============ */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 110px); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media {
  position: relative; aspect-ratio: 4 / 5; background-size: cover; background-position: center;
  border-radius: var(--radius);
}
.split__media--wide { aspect-ratio: 3 / 2.2; }
.split__media::after {
  content: ""; position: absolute; inset: 0; border: 1px solid rgba(29, 34, 30, 0.08);
  border-radius: var(--radius); pointer-events: none;
}
.split__body .divider { margin-top: 22px; }

/* Framed image accent — a hairline mat, like a print in a frame */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.55);
  z-index: 2; pointer-events: none;
}

/* ============ MOMENT CARDS ============ */
.moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.moment {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 3 / 2.3; color: var(--on-deep); isolation: isolate;
}
.moment--tall { aspect-ratio: auto; grid-row: span 2; }
.moment__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform 1.1s var(--ease);
}
.moment::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18, 22, 19, 0.02) 0%, rgba(18, 22, 19, 0.16) 45%, rgba(18, 22, 19, 0.78) 100%);
  transition: background .5s var(--ease);
}
.moment:hover .moment__img { transform: scale(1.08); }
.moment:hover::after { background: linear-gradient(180deg, rgba(18, 22, 19, 0.06) 0%, rgba(18, 22, 19, 0.3) 45%, rgba(18, 22, 19, 0.86) 100%); }
.moment__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 40px); }
.moment__num { font-family: var(--serif); font-size: 1rem; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.2em; margin-bottom: auto; }
.moment__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--on-deep); }
.moment__desc { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 46ch;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); }
.moment:hover .moment__desc { max-height: 200px; opacity: 1; }
.moment__cue { margin-top: 16px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-deep); }

/* Split media used as a moment — number treatment on paper */
.split .moment__num { color: var(--deep-green); margin-bottom: 0; }

/* ============ GARDEN MOMENTS PAGE ============ */
.garden-moments-page .section {
  padding-top: clamp(84px, 10vw, 150px);
  padding-bottom: clamp(84px, 10vw, 150px);
}
.garden-moments-page #collection,
.garden-moments-page #the-room,
.garden-moments-page #assessment {
  scroll-margin-top: calc(var(--storm-ribbon-h, 0px) + 96px);
}
.phero--garden-moments { min-height: 74vh; }
.phero--garden-moments .phero__content { max-width: 980px; padding-left: var(--gutter); padding-right: var(--gutter); }
.phero--garden-moments h1 { max-width: 16ch; font-size: clamp(2.8rem, 6.1vw, 5.35rem); }
.phero--garden-moments .lead { max-width: 680px; }
.phero--garden-moments .btn--ghost { color: var(--on-deep); border-color: rgba(255, 255, 255, 0.7); }
.phero--garden-moments .btn--ghost:hover { color: var(--on-deep); border-color: var(--on-deep); }

.gm-intro {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 6vw, 96px); align-items: start;
}
.section--garden-intro .facts { margin-top: clamp(42px, 6vw, 76px); }
.facts--garden .fact__v { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.facts--garden { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .facts--garden { grid-template-columns: 1fr 1fr; } }

.moments--selling { grid-template-columns: repeat(2, 1fr); }
.moments--selling .moment {
  min-height: clamp(320px, 34vw, 420px);
  aspect-ratio: auto;
}
.moments--selling .moment--wide {
  grid-column: 1 / -1;
  min-height: clamp(340px, 36vw, 460px);
}
.moments--selling .moment::after {
  background: linear-gradient(180deg, rgba(18, 22, 19, 0.12) 0%, rgba(18, 22, 19, 0.34) 38%, rgba(18, 22, 19, 0.9) 100%);
}
.moments--selling .moment:hover::after {
  background: linear-gradient(180deg, rgba(18, 22, 19, 0.16) 0%, rgba(18, 22, 19, 0.42) 38%, rgba(18, 22, 19, 0.92) 100%);
}
.moments--selling .moment__body { justify-content: flex-end; }
.moments--selling .moment__desc {
  max-height: 240px; opacity: 1; margin-top: 12px;
}
.moments--selling .moment__cue {
  color: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  padding-top: 14px;
}
.gm-collection-note {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
/* was var(--muted) — never defined in this stylesheet, so this text silently
   fell back to inherited colour. Pointed at the real token. */
.gm-collection-note p { max-width: 680px; margin: 0; color: var(--ink-mute); }

.gm-investment { max-width: 900px; }

/* ============ GARDEN PLATES (theme gardens + layout patterns) ============ */
/* Line-drawn plan illustrations presented like plates from a design folio. */
.plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
.plates--3 { grid-template-columns: repeat(3, 1fr); }
.plate {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.plate:hover, .plate:hover { border-color: rgba(34, 66, 47, 0.4); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plate__img { aspect-ratio: 4 / 3; background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.plate__img img { width: 100%; height: 100%; object-fit: cover; }
.plate__body { padding: 18px 20px 22px; }
.plate__num { font-family: var(--serif); font-size: 0.92rem; color: var(--gold-deep); letter-spacing: 0.18em; }
.plate__name { font-family: var(--serif); font-weight: 500; font-size: 1.32rem; color: var(--ink); line-height: 1.15; margin-top: 4px; }
.plate__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 7px; }

/* ============ TIER CARDS (Stewardship) ============ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); align-items: stretch; }
.tier {
  display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 36px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tier:hover { border-color: rgba(34, 66, 47, 0.45); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier--featured { border-color: rgba(34, 66, 47, 0.5); box-shadow: var(--shadow-sm); }
.tier--featured .tier__badge { display: inline-block; }
.tier__badge { display: none; align-self: flex-start; font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--on-deep); background: var(--deep-green); padding: 5px 12px; border-radius: 100px; margin-bottom: 18px; }
.tier__name { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); }
.tier__price { margin: 14px 0 4px; font-family: var(--serif); font-size: 2.4rem; color: var(--deep-green); }
.tier__price small { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-mute); }
.tier__tag { font-size: 13px; color: var(--ink-soft); min-height: 40px; }
.tier__list { margin: 24px 0 28px; display: flex; flex-direction: column; gap: 12px; }
.tier__list li { font-size: 14.5px; color: var(--ink-soft); padding-left: 24px; position: relative; line-height: 1.5; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 11px; height: 1px; background: var(--deep-green); }
.tier .btn { margin-top: auto; justify-content: center; }
.tier .btn--ghost { color: var(--ink); border-color: rgba(29, 34, 30, 0.3); }
.tier .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--on-deep); }

/* ============ PROCESS STEPS ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 54px); }
.step { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.section--paper .step { border-top-color: var(--line); }
.step__num { font-family: var(--serif); font-size: 1rem; color: var(--gold-deep); letter-spacing: 0.2em; }
body.noir .step__num { color: var(--gold-deep); }
.step h3 { margin: 14px 0 12px; font-size: 1.5rem; }
.step p { font-size: 15px; }

/* ============ FEATURE LIST ============ */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px); }
.features--4 { grid-template-columns: repeat(4, 1fr); }
.feature__num { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-deep); letter-spacing: 0.18em; margin-bottom: 14px; }
.feature h3 { color: var(--ink); margin-bottom: 10px; }
.section--paper .feature h3 { color: var(--ink); }
.feature p { font-size: 14.5px; }

/* ============ STAT BAND ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat__n { font-family: var(--serif); font-size: clamp(2.6rem, 4vw, 3.6rem); color: var(--deep-green); line-height: 1; font-weight: 300; }
.stat__l { margin-top: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.section--paper .stat__l { color: var(--ink-mute); }

/* ============ QUOTE / TESTIMONIAL ============ */
.pull { max-width: 920px; margin: 0 auto; text-align: center; }
.pull__mark { font-family: var(--serif); font-size: 4rem; line-height: 0; color: var(--deep-green); opacity: .4; display: block; height: 28px; }
.pull blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.3; color: var(--ink); font-style: italic; }
.section--paper .pull blockquote { color: var(--ink); }
.pull cite { display: block; margin-top: 26px; font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--deep-green); }

/* ============ PORTFOLIO GRID ============ */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.pcell { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; display: block; }
.pcell--wide { grid-column: span 2; aspect-ratio: 2; }
.pcell--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.pcell__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1s var(--ease); }
.pcell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18, 22, 19, 0.7)); opacity: 0; transition: opacity .4s var(--ease); }
.pcell:hover .pcell__img { transform: scale(1.06); }
.pcell:hover::after { opacity: 1; }
.pcell__cap { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 22px; color: var(--on-deep);
  font-family: var(--serif); font-size: 1.2rem; opacity: 0; transform: translateY(8px); transition: .4s var(--ease); }
.pcell:hover .pcell__cap { opacity: 1; transform: translateY(0); }

/* Gallery uses semantic picture/img media while retaining the established grid treatment. */
.gallery-page .pcell { margin: 0; }
.gallery-page .phero__media {
  position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden;
  transform: scale(1.05); animation: heroZoom 16s ease-out forwards;
}
.gallery-page .phero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gallery-page .pcell__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.gallery-page .pcell__img {
  position: static; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}
@media (hover: none), (pointer: coarse) {
  .gallery-page .pcell::after { opacity: 1; }
  .gallery-page .pcell__cap { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-page .phero__media { animation: none; transform: none; }
}

/* ============ FIELD NOTES / JOURNAL ============ */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.note { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.note:hover { border-color: rgba(34, 66, 47, 0.4); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.note__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; }
.note__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.note__meta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep-green); margin-bottom: 14px; }
.note__body h3 { font-size: 1.35rem; color: var(--ink); }
.note__body p { font-size: 14.5px; margin: 12px 0 18px; }
.note__read { margin-top: auto; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep-green); }
.section--paper .note { background: var(--card); border-color: var(--line); }
.section--paper .note__body h3 { color: var(--ink); }

/* ============ INLINE CARDS (two-up offers) ============ */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 30px); }
.offer { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 460px; display: flex; align-items: flex-end; color: var(--on-deep); }
.offer__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.1s var(--ease); }
.offer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 19, 0.04), rgba(18, 22, 19, 0.76)); }
.offer:hover .offer__img { transform: scale(1.05); }
.offer__body { position: relative; z-index: 2; padding: clamp(30px, 4vw, 52px); }
.offer__body .eyebrow { color: rgba(255, 255, 255, 0.85); }
.offer__body h3 { color: var(--on-deep); font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin: 10px 0 14px; }
.offer__body p { color: rgba(255, 255, 255, 0.88); max-width: 42ch; margin-bottom: 22px; }

/* Full-width entrance into an interior page */
.offer--feature { min-height: clamp(500px, 82vh, 760px); align-items: center; text-align: center; }
.offer--feature::after { background: linear-gradient(180deg, rgba(18, 22, 19, 0.26) 0%, rgba(18, 22, 19, 0.22) 45%, rgba(18, 22, 19, 0.52) 100%); }
.offer--feature .offer__body { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.offer--feature .offer__body h3 { font-size: clamp(2.3rem, 5vw, 4rem); margin: 12px 0 16px; }
.offer--feature .offer__body p { margin: 0 auto 24px; }
.offer__cue { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.55); padding-bottom: 5px; transition: letter-spacing .4s var(--ease); }
.offer:hover .offer__cue { letter-spacing: 0.28em; }

/* ============ CTA STRIP ============ */
.cta {
  position: relative; border-radius: var(--radius); overflow: hidden; text-align: center;
  padding: clamp(60px, 9vw, 120px) var(--gutter); color: var(--on-deep);
}
.cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 19, 0.55), rgba(18, 22, 19, 0.66)); }
.cta > * { position: relative; z-index: 2; }
.cta .eyebrow { color: rgba(255, 255, 255, 0.85); }
.cta h2 { color: var(--on-deep); max-width: 18ch; margin: 16px auto 0; }
.cta p { color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin: 20px auto 0; }
.cta .btn-group { justify-content: center; margin-top: 36px; }
.cta .btn--primary { background: var(--on-deep); color: var(--ink); }
.cta .btn--primary:hover { background: var(--card); }
.cta .btn--ghost { color: var(--on-deep); border-color: rgba(255, 255, 255, 0.6); }
.cta .btn--ghost:hover { border-color: var(--on-deep); color: var(--on-deep); }

/* ============ NOTICE BANNER ============ */
.dry-banner {
  position: relative; z-index: 90;
  background: var(--deep-green); color: var(--on-deep);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  padding: 11px var(--gutter); font-size: 13px; text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.dry-banner strong { color: var(--on-deep); }
.dry-banner__icon { font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--accent-on-deep); }
.dry-banner a { color: var(--on-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

/* ============ FORMS (light) ============ */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--deep-green); box-shadow: 0 0 0 3px rgba(34, 66, 47, 0.1); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }

/* ============ CASE-STUDY FACTS STRIP ============ */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 30px 0;
}
.section--paper .facts { border-color: var(--line); }
.fact__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep-green); margin-bottom: 9px; }
.section--paper .fact__k { color: var(--deep-green); }
.fact__v { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); line-height: 1.2; }
.section--paper .fact__v { color: var(--ink); }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ============ PRICE LIST (services page) ============ */
.pricelist { display: grid; gap: 0; }
.price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.section--paper .price-row { border-bottom-color: var(--line); }
.price-row__name { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--ink); }
.section--paper .price-row__name { color: var(--ink); }
.price-row__name small { display: block; font-family: var(--sans); font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin-top: 6px; max-width: 56ch; line-height: 1.55; }
.section--paper .price-row__name small { color: var(--ink-soft); }
.price-row__fig { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.01em; color: var(--deep-green); white-space: nowrap; }
.section--paper .price-row__fig { color: var(--deep-green); }

/* ============ ARTICLE / JOURNAL POST ============ */
.post-hero { padding: 170px var(--gutter) clamp(30px, 5vw, 52px); max-width: 880px; margin: 0 auto; }
.post-hero__crumb { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--deep-green); margin-bottom: 22px; }
.post-hero__crumb a { color: var(--deep-green); }
.post-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: var(--ink); line-height: 1.08; }
.post-hero__meta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-mute); }
.post-hero__meta a { color: inherit; border-bottom: 1px solid rgba(86, 84, 77, 0.4); }
.tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-deep); background: var(--deep-green); padding: 4px 11px; border-radius: 100px; }
.post-feature-img { display: block; width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: center; border-radius: var(--radius); border: 1px solid var(--line); }

.post-body { max-width: 720px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 96px); }
.post-body > .lead { color: var(--ink); font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-bottom: 14px; }
.post-body p { color: var(--ink-soft); margin: 20px 0; font-size: 17px; line-height: 1.85; }
.post-body h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 48px 0 8px; }
.post-body h2::after { content: ""; display: block; width: 48px; height: 1px; background: var(--deep-green); opacity: 0.5; margin-top: 14px; }
.post-body h3 { color: var(--ink); margin: 36px 0 10px; }
.post-body a { color: var(--deep-green); border-bottom: 1px solid rgba(34, 66, 47, 0.3); }
.post-body strong { color: var(--ink); }
.post-body em { color: var(--ink); }
.post-body ul, .post-body ol { margin: 20px 0; padding-left: 4px; display: flex; flex-direction: column; gap: 12px; }
.post-body ul li, .post-body ol li { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; padding-left: 26px; position: relative; }
.post-body ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--deep-green); }
.post-body ol { counter-reset: li; }
.post-body ol li { counter-increment: li; }
.post-body ol li::before { content: counter(li); position: absolute; left: 0; top: 0; color: var(--deep-green); font-family: var(--serif); font-size: 1rem; }
.post-callout { background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--deep-green); border-radius: var(--radius); padding: 24px 28px; margin: 32px 0; }
.post-callout .post-callout__title { color: var(--deep-green); margin: 0 0 10px; font-size: 1rem; line-height: 1.4; font-weight: 700; }
.post-callout p { margin: 0; font-size: 15px; }
.post-divider { border: 0; height: 1px; background: var(--line); margin: 48px 0; }
.post-related { margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--line); }
.post-related h2 { margin-bottom: 18px; color: var(--ink); font-size: clamp(1.5rem, 3vw, 2rem); }
.post-related__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.post-related__link { display: flex; min-height: 100%; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.post-related__link:hover { border-color: var(--deep-green); transform: translateY(-2px); }
.post-related__link strong { font-family: var(--serif); font-size: 1.16rem; font-weight: 500; line-height: 1.2; }
.post-related__link span { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
@media (max-width: 760px) {
  .post-related__links { grid-template-columns: 1fr; }
}
.post-cta { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(32px, 5vw, 52px); }
.post-cta h3 { color: var(--ink); margin-bottom: 14px; }
.post-cta p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 26px; }
.post-cta .btn-group { justify-content: center; }

/* ============ FOOTER ============ */
.footer { background: var(--paper); color: var(--ink); padding-top: clamp(60px, 8vw, 96px); border-top: 1px solid var(--line); }
.footer__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(32px, 4vw, 60px);
}
.footer__brand b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); display: block; }
.footer__brand span { font-family: var(--label); font-size: 8.5px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-mute); }
.footer__brand p { color: var(--ink-soft); font-size: 14px; margin-top: 18px; max-width: 34ch; }
/* Brand tagline. Olive (5.30:1) — never Melon, which fails on ivory. */
.footer__tagline {
  font-family: var(--label); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--olive) !important; margin-top: 20px !important;
  padding-top: 16px; border-top: 1px solid var(--melon-line);
  max-width: 30ch;
}
.footer__heading { font-family: var(--label); color: var(--ink); font-size: 9.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 20px; }
.footer ul { display: flex; flex-direction: column; gap: 12px; }
.footer ul a { color: var(--ink-soft); font-size: 14.5px; transition: color .3s var(--ease); }
.footer ul a:hover { color: var(--deep-green); }
.footer__bottom {
  border-top: 1px solid var(--line); max-width: var(--max-w); margin: 0 auto;
  padding: 24px var(--gutter); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.04em;
}

/* ============ UTILITIES ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 44px; }
.maxw-60 { max-width: 60ch; } .maxw-50 { max-width: 50ch; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .features--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .home-doors { grid-template-columns: 1fr; }
  .home-door, .home-door--large { grid-row: auto; min-height: 72svh; }
  .home-proof__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-proof__inner span + span { border-left: 0; }
  .plates { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__mobile-actions { display: flex; }
  .nav__menu {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 30px;
    background: rgba(247, 245, 239, 0.985); backdrop-filter: blur(8px);
    transform: translateX(100%); transition: transform .5s var(--ease);
    color: var(--ink);
  }
  .nav__menu.is-open { transform: none; }
  .nav__menu a:not(.btn) { font-size: 16px; opacity: 1; }
  .nav__dropdown { display: grid; justify-items: center; gap: 18px; }
  .nav__dropdown-toggle { display: none; }
  .nav__dropdown-panel {
    position: static; display: grid; justify-items: center; gap: 24px;
    min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
    color: inherit; opacity: 1; pointer-events: auto; transform: none;
  }
  .nav__dropdown-panel a:not(.btn) { padding: 0; }
  .nav__dropdown-panel a:not(.btn):hover,
  .nav__dropdown-panel a.is-active:not(.btn),
  .nav.is-scrolled .nav__dropdown-panel a:not(.btn):hover,
  .nav.is-scrolled .nav__dropdown-panel a.is-active:not(.btn) { background: transparent; }
  .nav.is-open { color: var(--ink); }
  .nav.is-open .nav__toggle span { background: var(--ink); }
  .nav__menu .btn--primary { background: var(--ink); color: var(--on-deep); }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: 0; }
  .split__media { aspect-ratio: 3 / 2.2; }
  .gm-intro { grid-template-columns: 1fr; }
  .moments { grid-template-columns: 1fr; }
  .moment, .moment--tall { aspect-ratio: 3 / 2.2; grid-row: auto; }
  .moments--selling .moment, .moments--selling .moment--wide { grid-column: auto; min-height: 360px; }
  .gm-collection-note { display: block; }
  .gm-collection-note .tlink { display: inline-block; margin-top: 18px; }
  .moment__desc { max-height: 220px; opacity: 1; margin-top: 12px; }
  .tiers { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .features, .features--4 { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pcell--wide { grid-column: span 2; }
  .plates, .plates--3 { grid-template-columns: repeat(2, 1fr); }
  .home-campaign { min-height: 92svh; }
  .hero__content--home { padding-top: 170px; }
}
@media (max-width: 640px) {
  .nav__inner { padding-left: 22px; padding-right: 22px; }
  .nav__brand b { font-size: 0.78rem; letter-spacing: 0.12em; }
  .nav__brand span { font-size: 7px; letter-spacing: 0.28em; }
  .home-actions { gap: 18px 26px; }
  .home-door, .home-door--large { min-height: 68svh; }
  .home-proof__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .nav__cta { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
  .pcell--wide, .pcell--tall { grid-column: auto; grid-row: auto; aspect-ratio: 3/2; }
  .plates, .plates--3 { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero__ctas .btn { width: auto; }
  .hero__content--home { padding-top: 150px; padding-bottom: 44px; }
  .hero__content--home h1 { font-size: clamp(2.6rem, 13vw, 3.5rem); }
  .home-promise { font-size: 1.25rem; }
  .home-hero-lead { max-width: 34ch; font-size: 13.5px; }
  .home-actions { flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }
  .home-actions a { width: auto; }
  .home-scroll { margin-top: 34px; }
  .home-door, .home-door--large { min-height: 62svh; }
  .home-door__body { padding-bottom: 44px; }
  .home-note { padding: 76px 0 88px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero__bg, .phero__bg, .phero__picture { transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   INQUIRY FORM (quote.html) — light gallery surface
   ========================================================= */
.page-head { padding: 150px var(--gutter) clamp(32px, 5vw, 52px); max-width: var(--max-w); margin: 0 auto; }
.page-head h1 { color: var(--ink); }

.quote-layout {
  display: grid; grid-template-columns: 1fr 380px;
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.quote-form { min-width: 0; }

.quote-step { padding: clamp(28px, 4vw, 40px) 0; border-top: 1px solid var(--line); }
.quote-step:first-child { border-top: 0; padding-top: 0; }
.quote-step[hidden] { display: none; }
.quote-step__head { margin-bottom: 22px; }
.quote-step__head h2 { color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin-top: 4px; }
.quote-step__head p, .quote-step__sub { color: var(--ink-soft); font-size: 15px; margin-top: 8px; }

/* Radio choice cards */
.quote-choices { display: grid; gap: 14px; }
.quote-choices--two { grid-template-columns: 1fr 1fr; }
.quote-choices--stack { grid-template-columns: 1fr; }
.quote-choice {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.quote-choice:hover { border-color: rgba(34, 66, 47, 0.45); }
.quote-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.quote-choice__dot { flex: none; width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--ink-mute); border-radius: 50%; transition: .2s var(--ease); }
.quote-choice__dot--sq { border-radius: 4px; }
.quote-choice:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); background: var(--paper-2); }
.quote-choice:has(input:checked) .quote-choice__dot { border-color: var(--deep-green); background: var(--deep-green); box-shadow: inset 0 0 0 3px var(--card); }
.quote-choice__title { display: block; font-weight: 600; color: var(--ink); }
.quote-choice__desc { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; }

/* Service checkbox cards */
.quote-services { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quote-service-card {
  position: relative; display: block; padding: 18px 46px 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.quote-service-card:hover { border-color: rgba(34, 66, 47, 0.45); }
.quote-service-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.quote-service-card::after {
  content: ""; position: absolute; top: 18px; right: 18px; width: 19px; height: 19px;
  border: 1.5px solid var(--ink-mute); border-radius: 4px; transition: .2s var(--ease);
}
.quote-service-card:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); background: var(--paper-2); }
.quote-service-card:has(input:checked)::after {
  background: var(--deep-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--deep-green);
}
.quote-service-card--design { border-color: rgba(34, 66, 47, 0.35); }
.quote-service-card__title { display: block; font-weight: 600; color: var(--ink); }
.quote-service-card__desc { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; line-height: 1.45; }
.quote-service-card__tag { display: inline-block; margin-top: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep-green); }

/* Fields */
.quote-field { display: flex; flex-direction: column; gap: 7px; margin: 16px 0; }
.quote-field__label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.quote-field__hint { font-size: 12.5px; color: var(--ink-mute); }
.quote-input, .quote-textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink); width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.quote-input:focus, .quote-textarea:focus { outline: none; border-color: var(--deep-green); box-shadow: 0 0 0 3px rgba(34, 66, 47, 0.1); }
.quote-textarea { min-height: 120px; resize: vertical; }

/* Off-area notice */
.quote-offarea { background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--hibiscus); border-radius: var(--radius); padding: 22px 24px; }
.quote-offarea h3 { color: var(--ink); font-size: 1.3rem; }
.quote-offarea p { color: var(--ink-soft); font-size: 14.5px; margin-top: 8px; }

/* Two paths */
.quote-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-path { padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.quote-path--primary { border-color: rgba(34, 66, 47, 0.55); box-shadow: var(--shadow-sm); }
.quote-path__tag { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deep-green); }
.quote-path__tag--alt { color: var(--ink-mute); }
.quote-path__title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 8px 0 10px; }
.quote-path__desc { font-size: 14px; color: var(--ink-soft); }
.quote-path__steps { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.quote-path__steps strong { color: var(--deep-green); display: block; margin-bottom: 8px; }
.quote-path__steps ol { padding-left: 18px; list-style: decimal; display: flex; flex-direction: column; gap: 6px; }

/* Auto note */
.quote-auto { font-size: 12.5px; color: var(--ink-mute); font-style: italic; margin-top: 8px; }
.quote-reveal { display: none; }
.quote-reveal.is-open { display: block; }
.quote-reveal[hidden] { display: none; }

/* Sticky estimate summary (legacy layout) — deep green card retained */
.quote-summary {
  position: sticky; top: 100px; background: var(--deep-green); color: var(--on-deep);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-md);
}
.quote-summary__head { border-bottom: 1px solid rgba(244, 241, 232, 0.18); padding-bottom: 16px; margin-bottom: 16px; }
.quote-summary__head .eyebrow { color: var(--accent-on-deep); }
.quote-summary__head h3 { color: var(--on-deep); font-size: 1.5rem; margin-top: 4px; }
.quote-summary__empty, .quote-summary__hint { font-size: 14px; color: rgba(244, 241, 232, 0.72); line-height: 1.55; }
.quote-summary__hint { margin-top: 14px; }
#summaryBody { color: var(--on-deep); font-size: 14.5px; }
#summaryBody strong { color: var(--on-deep); }
#summaryBody .price, #summaryBody b { color: var(--accent-on-deep); }
.quote-caveat { margin-top: 18px; background: rgba(0, 0, 0, 0.16); border: 1px solid rgba(244, 241, 232, 0.14); border-radius: var(--radius); padding: 14px 16px; }
.quote-caveat__title { font-weight: 600; color: var(--accent-on-deep); font-size: 13px; margin-bottom: 6px; }
.quote-caveat p { font-size: 12.5px; color: rgba(244, 241, 232, 0.75); }
.quote-summary__actions { margin-top: 18px; }
.quote-summary__cta { width: 100%; justify-content: center; }
.quote-summary__cta-hint { font-size: 12px; color: rgba(244, 241, 232, 0.65); text-align: center; margin-top: 8px; line-height: 1.4; }
.quote-summary__alt-cta {
  width: 100%; margin-top: 12px; padding: 14px 16px; background: transparent;
  border: 1px solid rgba(244, 241, 232, 0.5); color: var(--on-deep); border-radius: var(--radius);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.quote-summary__alt-cta:hover { background: var(--on-deep); color: var(--deep-green); }
.quote-summary__email-link { display: block; width: 100%; margin-top: 14px; background: none; color: var(--accent-on-deep); font-size: 13px; text-decoration: underline; }
.quote-summary__email-sent { color: var(--accent-on-deep); font-size: 13px; margin-top: 10px; text-align: center; }

/* Email-me block (left column, light) */
.quote-emailme { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.quote-emailme__lede { font-size: 14px; color: var(--ink-soft); }
.quote-emailme__link { display: inline-block; margin-top: 8px; background: none; color: var(--deep-green); font-size: 14px; font-weight: 600; text-decoration: underline; }
.quote-emailme__sent { color: var(--frond-green); font-size: 13.5px; margin-top: 10px; }

@media (max-width: 860px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-summary { position: static; order: -1; }
  .quote-choices--two, .quote-services, .quote-paths { grid-template-columns: 1fr; }
}

/* ============================================================
   INQUIRY WIZARD — guided flow
   ============================================================ */

/* Hero contact line */
.phero--inquiry .phero__content { max-width: 760px; }
.phero__contact { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.phero__contact a { color: var(--on-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.phero__contact a:hover { color: var(--on-deep); }

/* One step at a time */
.quote-form .quote-step { border-top: 0; padding: 0; }
.quote-step.is-active { animation: quoteStepIn .42s var(--ease) both; }
@keyframes quoteStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quote-step.is-active { animation: none; } }

/* Progress bar (legacy) */
.quote-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.quote-progress__track { flex: 1 1 auto; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.quote-progress__fill { height: 100%; width: 0; border-radius: 999px; background: var(--deep-green); transition: width .45s var(--ease); }
.quote-progress__label { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }

/* Intent picker cards (legacy light grid) */
.intent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.intent-card {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 26px 28px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.intent-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--deep-green); opacity: 0; transition: opacity .25s var(--ease); }
.intent-card:hover { border-color: rgba(34, 66, 47, 0.45); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.intent-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.intent-card__check { position: absolute; top: 24px; right: 24px; width: 22px; height: 22px;
  border: 1.5px solid var(--ink-mute); border-radius: 50%; transition: .2s var(--ease); }
.intent-card:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); }
.intent-card:has(input:checked)::before { opacity: 1; }
.intent-card:has(input:checked) .intent-card__check {
  border-color: var(--deep-green);
  background: var(--deep-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.intent-card__tag { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep-green); }
.intent-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); line-height: 1.15; margin-top: 4px; }
.intent-card__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 7px; padding-right: 22px; }
.intent-card__desc a { color: var(--hibiscus); font-weight: 600; }
.intent-card--hero { grid-column: 1 / -1; }
.intent-card--hero .intent-card__title { font-size: 1.85rem; }
.intent-card--storm { grid-column: 1 / -1; border-color: rgba(143, 45, 68, 0.38); }
.intent-card--storm::before { background: var(--bloom); }
.intent-card--storm .intent-card__tag { color: var(--bloom); }
.intent-card--storm:hover { border-color: var(--bloom); }
.intent-card--storm:has(input:checked) { border-color: var(--bloom); box-shadow: inset 0 0 0 1px var(--bloom); }
.intent-card--storm:has(input:checked) .intent-card__check { background-color: var(--bloom); border-color: var(--bloom); }

/* Wizard navigation */
.quote-nav { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.quote-nav__row { display: flex; align-items: center; gap: 18px; }
.quote-nav__next { min-width: 210px; justify-content: center; }
.quote-nav__back { background: none; border: 0; color: var(--ink-soft); font-family: var(--sans);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 4px; transition: color .2s var(--ease); }
.quote-nav__back:hover { color: var(--deep-green); }
.quote-nav__err { color: var(--hibiscus-deep); font-size: 13.5px; margin: 0 0 14px; }

@media (max-width: 640px) {
  .intent-grid { grid-template-columns: 1fr; }
  .intent-card--hero .intent-card__title { font-size: 1.6rem; }
  .quote-nav__row { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .quote-nav__next { width: 100%; }
}

/* ============================================================
   STORM-SEASON RIBBON — injected site-wide by script.js.
   ============================================================ */
.storm-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130;
  background: linear-gradient(90deg, var(--hibiscus-deep) 0%, var(--bloom) 100%);
  color: var(--on-deep); font-family: var(--sans);
  box-shadow: 0 2px 12px rgba(29, 34, 30, 0.18);
}
.storm-ribbon__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 9px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.storm-ribbon__txt { font-size: 13.5px; letter-spacing: 0.01em; color: var(--on-deep); }
.storm-ribbon__txt strong { font-weight: 700; }
.storm-ribbon__cta {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 2px; white-space: nowrap;
}
.storm-ribbon__cta:hover { color: var(--on-deep); border-color: var(--on-deep); }
.storm-ribbon__tel { font-size: 13px; font-weight: 700; color: var(--on-deep); white-space: nowrap; }
.storm-ribbon__tel:hover { color: var(--on-deep); text-decoration: underline; }
.storm-ribbon__x {
  background: transparent; border: 0; color: rgba(255, 255, 255, 0.82);
  font-size: 21px; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 2px;
}
.storm-ribbon__x:hover { color: var(--on-deep); }

body.has-storm-ribbon { padding-top: var(--storm-ribbon-h, 0px); }
body.has-storm-ribbon .nav { top: var(--storm-ribbon-h, 0px); }

@media (max-width: 640px) {
  .storm-ribbon__inner { gap: 6px 14px; padding: 8px 16px; }
  .storm-ribbon__txt { font-size: 12.5px; width: 100%; text-align: center; }
}

/* ============================================================
   INQUIRY — GALLERY EDITION (2026-07-03)
   Light form: named step rail + main column + sticky estimate
   dock. Scoped under .qx / body.qx-page.
   ============================================================ */
body.qx-page { background: var(--paper); color: var(--ink); }
.qx-section { padding-top: clamp(40px, 6vw, 76px); padding-bottom: 32px; }

.qx { display: block; max-width: 720px; margin: 0 auto; }

/* ---- Progress bar (restored 2026-07-04, replaces the chapter rail) ---- */
.quote-progress { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(26px, 3.2vw, 42px); }
.quote-progress__track { flex: 1 1 auto; height: 2px; background: var(--line); border-radius: 0; overflow: hidden; }
.quote-progress__fill { height: 100%; width: 0; border-radius: 0;
  background: var(--ink); transition: width .45s var(--ease); }
.quote-progress__label { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }

/* ---- Quick Landscape Assessment shortcut ---- */
.qx-quick { margin: -14px 0 clamp(28px, 3.5vw, 44px); border: 1px solid rgba(34, 66, 47, 0.28); border-radius: var(--radius); background: rgba(255, 253, 249, 0.72); }
.qx-quick__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; }
.qx-quick__bar .eyebrow { display: block; color: var(--deep-green); font-size: 9.5px; }
.qx-quick__prompt { margin-top: 3px; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; line-height: 1.15; }
.qx-quick__toggle { flex: none; display: inline-flex; align-items: center; gap: 9px; background: var(--deep-green); color: var(--on-deep); border: 1px solid var(--deep-green); border-radius: var(--radius); padding: 11px 14px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.qx-quick__toggle:hover { background: transparent; color: var(--deep-green); }
.qx-quick__panel { border-top: 1px solid rgba(34, 66, 47, 0.18); padding: 24px 22px 20px; }
.qx-quick__panel[hidden] { display: none; }
.qx-quick__panel > .eyebrow { color: var(--deep-green); }
.qx-quick__panel h2 { color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin-top: 4px; }
.qx-quick__lede { max-width: 62ch; margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.qx-quick__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 14px; }
.qx-quick__address { grid-column: 1 / -1; }
.qx-quick__actions { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.qx-quick__actions .btn { min-width: 250px; justify-content: center; }
.qx-quick__close { background: none; border: 0; color: var(--ink-soft); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.qx-quick__close:hover { color: var(--deep-green); }
.qx-quick__note { margin-top: 14px; color: var(--ink-mute); font-size: 12px; line-height: 1.5; }
.qx-quick__panel .quote-nav__err { margin-top: 14px; margin-bottom: 0; }
.qx-quick__panel .quote-nav__err a { color: var(--hibiscus); font-weight: 600; }

@media (max-width: 640px) {
  .qx-quick__bar { align-items: flex-start; flex-direction: column; }
  .qx-quick__toggle { width: 100%; justify-content: center; }
  .qx-quick__fields { grid-template-columns: 1fr; }
  .qx-quick__address { grid-column: auto; }
  .qx-quick__actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .qx-quick__actions .btn { width: 100%; }
}

/* ---- Step rail ---- */
.qx-rail { position: sticky; top: 104px; align-self: start; }
.qx-rail__eyebrow { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 20px; }
.qx-rail__list { display: flex; flex-direction: column; }
.qx-rail__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; position: relative; }
.qx-rail__item::before { content: ""; position: absolute; left: 15px; top: -50%; height: 50%; width: 1px; background: var(--line); }
.qx-rail__item:first-child::before { display: none; }
.qx-rail__num { flex: none; width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 13px;
  color: var(--ink-mute); background: var(--paper); transition: .25s var(--ease); z-index: 1; }
.qx-rail__label { font-family: var(--serif); font-size: 1.28rem; color: var(--ink-mute); transition: color .25s var(--ease); }
.qx-rail__item.is-done .qx-rail__num { border-color: var(--deep-green); color: var(--deep-green); }
.qx-rail__item.is-done .qx-rail__label { color: var(--ink-soft); }
.qx-rail__item.is-active .qx-rail__num { background: var(--deep-green); border-color: var(--deep-green); color: var(--on-deep); }
.qx-rail__item.is-active .qx-rail__label { color: var(--ink); }
.qx-rail__item.is-na { opacity: 0.38; }
.qx-rail__item.is-clickable { cursor: pointer; }
.qx-rail__item.is-clickable:hover .qx-rail__label { color: var(--deep-green); }
.qx-rail__help { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.qx-rail__help a { color: var(--deep-green); border-bottom: 1px solid rgba(34, 66, 47, 0.3); white-space: nowrap; }

/* ---- Main column ---- */
.qx-main { min-width: 0; padding-bottom: 28px; }
.qx .quote-step { border-top: 0; padding: 0; }
.qx .quote-step__head h2 { color: var(--ink); }
.qx .quote-step__head p, .qx .quote-step__sub p { color: var(--ink-soft); }
.qx .quote-step__sub h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--deep-green); }
.qx .eyebrow { color: var(--ink); }

/* fields + inputs */
.qx .quote-field__label { color: var(--ink-soft); }
.qx .quote-field__hint { color: var(--ink-mute); }
/* LV pass — fields are hairline underlines, not boxes */
.qx .quote-input, .qx .quote-textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding-left: 0; padding-right: 0; color: var(--ink); }
.qx .quote-input::placeholder, .qx .quote-textarea::placeholder { color: var(--ink-mute); }
.qx .quote-input:focus, .qx .quote-textarea:focus { border-bottom-color: var(--ink); background: transparent; box-shadow: none; outline: none; }
.qx .quote-textarea { border: 1px solid var(--line); padding: 14px 16px; }
.qx .quote-textarea:focus { border-color: var(--ink); }

/* dropdowns */
.qx .quote-select {
  font-family: var(--sans); font-size: 16px; color: var(--ink); width: 100%; cursor: pointer;
  background-color: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 13px 42px 13px 0; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319191a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qx .quote-select:focus { outline: none; border-bottom-color: var(--ink); box-shadow: none; }
.qx .quote-select:invalid { color: var(--ink-mute); }

/* radio/checkbox choices */
.qx .quote-choice { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.qx .quote-choice:hover { border-color: rgba(34, 66, 47, 0.45); }
.qx .quote-choice__dot { border-color: var(--ink-mute); }
.qx .quote-choice__title { color: var(--ink); }
.qx .quote-choice__desc { color: var(--ink-mute); }
.qx .quote-choice:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); background: var(--paper-2); }
.qx .quote-choice:has(input:checked) .quote-choice__dot { border-color: var(--deep-green); background: var(--deep-green); box-shadow: inset 0 0 0 3px var(--card); }

/* service multi-select cards */
.qx .quote-service-card { background: var(--card); border-color: var(--line); }
.qx .quote-service-card:hover { border-color: rgba(34, 66, 47, 0.45); }
.qx .quote-service-card__title { color: var(--ink); }
.qx .quote-service-card__desc { color: var(--ink-mute); }
.qx .quote-service-card::after { border-color: var(--ink-mute); }
.qx .quote-service-card:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); background: var(--paper-2); }
.qx .quote-service-card:has(input:checked)::after { border-color: var(--deep-green);
  background: var(--deep-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; }
.qx .quote-service-card--design { border-color: rgba(34, 66, 47, 0.3); }

/* note callout */
.qx .note { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; border-radius: var(--radius); color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.qx .note:hover { transform: none; box-shadow: none; }
.qx .note strong { color: var(--deep-green); }

/* ---- Intent picker tiles ---- */
.qx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qx-tile { position: relative; display: flex; flex-direction: column; padding: 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.qx-tile:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.qx-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.qx-tile__check { position: absolute; top: 20px; right: 20px; width: 22px; height: 22px; border: 1.5px solid var(--ink-mute); border-radius: 50%; transition: .2s var(--ease); }
.qx-tile:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); background: var(--paper-2); }
.qx-tile:has(input:checked) .qx-tile__check { border-color: var(--deep-green);
  background: var(--deep-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; }
.qx-tile__tag { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep-green); }
.qx-tile__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); line-height: 1.12; margin-top: 5px; }
.qx-tile__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; padding-right: 26px; }
.qx-tile__desc a { color: var(--deep-green); font-weight: 600; }
.qx-tile--hero { grid-column: 1 / -1; }
.qx-tile--hero .qx-tile__title { font-size: 1.85rem; }
.qx-tile--storm { grid-column: 1 / -1; border-color: rgba(143, 45, 68, 0.4); }
.qx-tile--storm .qx-tile__tag { color: var(--bloom); }
.qx-tile--storm:hover { border-color: var(--bloom); }
.qx-tile--storm:has(input:checked) { border-color: var(--bloom); box-shadow: inset 0 0 0 1px var(--bloom); background: var(--melon-soft); }
.qx-tile--storm:has(input:checked) .qx-tile__check { border-color: var(--bloom); background-color: var(--bloom); }

/* ---- Garden plate pickers (guided design walkthrough) ---- */
.qx-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qx-plate {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.qx-plate:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.qx-plate input { position: absolute; opacity: 0; width: 0; height: 0; }
.qx-plate__img { aspect-ratio: 16 / 10; background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.qx-plate__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qx-plate__body { padding: 14px 46px 16px 18px; position: relative; }
.qx-plate__title { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.22rem; color: var(--ink); line-height: 1.15; }
.qx-plate__desc { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; line-height: 1.45; }
.qx-plate__check { position: absolute; top: 16px; right: 14px; width: 20px; height: 20px;
  border: 1.5px solid var(--ink-mute); border-radius: 50%; transition: .2s var(--ease); }
.qx-plate--check .qx-plate__check { border-radius: 5px; }
.qx-plate:has(input:checked) { border-color: var(--deep-green); box-shadow: inset 0 0 0 1px var(--deep-green); background: var(--paper-2); }
.qx-plate:has(input:checked) .qx-plate__check { border-color: var(--deep-green);
  background: var(--deep-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 640px) { .qx-plates { grid-template-columns: 1fr; } }

/* ---- Address autocomplete dropdown (light) ---- */
.qx-addr { position: relative; }
.qx-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px;
  list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); max-height: 290px; overflow-y: auto; }
.qx-suggest[hidden] { display: none; }
.qx-suggest__item { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; }
.qx-suggest__item:hover, .qx-suggest__item.is-active { background: rgba(34, 66, 47, 0.07); }
.qx-suggest__main { color: var(--ink); font-size: 14px; line-height: 1.3; }
.qx-suggest__sec { color: var(--ink-mute); font-size: 12px; line-height: 1.3; }

/* ---- Service-area chip + manual override ---- */
.qx-area { margin-top: 12px; font-size: 13.5px; line-height: 1.5; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--line); }
.qx-area--yes { color: var(--frond-green); border-color: rgba(28, 93, 72, 0.35); background: rgba(28, 93, 72, 0.07); }
.qx-area--no { color: var(--bloom); border-color: rgba(143, 45, 68, 0.3); background: rgba(143, 45, 68, 0.06); }
.qx-area strong { color: inherit; }
.qx-manual { margin-top: 12px; }
.qx-manual > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.02em; }
.qx-manual > summary:hover { color: var(--deep-green); }

/* off-area panel */
.qx .quote-offarea { background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--bloom); }
.qx .quote-offarea h3 { color: var(--ink); }
.qx .quote-offarea p { color: var(--ink-soft); }
.qx .btn--ghost-dark { color: var(--ink); border: 1px solid rgba(29, 34, 30, 0.35); }
.qx .btn--ghost-dark:hover { background: var(--ink); color: var(--on-deep); border-color: var(--ink); }

/* review-step paths */
.qx .quote-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qx .quote-path { background: var(--card); border: 1px solid var(--line); }
.qx .quote-path--primary { border-color: rgba(34, 66, 47, 0.55); box-shadow: var(--shadow-sm); background: var(--paper-2); }
.qx .quote-path__title { color: var(--ink); }
.qx .quote-path__desc, .qx .quote-path__steps { color: var(--ink-soft); }
.qx .quote-path__steps strong { color: var(--deep-green); }
.qx .quote-path__tag--alt { color: var(--ink-mute); }
.qx .quote-emailme { border-top: 1px solid var(--line); }
.qx .quote-emailme__lede { color: var(--ink-soft); }
.qx .quote-emailme__link { color: var(--deep-green); }

/* ---- In-flow estimate dock ---- */
.qx-dock { position: static; margin-top: 18px; max-width: 720px; margin-inline: auto; }
.qx-dock[data-current-step="you"] .qx-dock__est { display: none; }
.qx-dock[data-current-step="you"] .qx-dock__drawer { display: none; }
.qx-dock[data-current-step="you"] .qx-dock__bar { justify-content: flex-end; }
.qx-dock__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(255, 253, 249, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px 14px 20px; box-shadow: 0 -10px 34px rgba(29, 34, 30, 0.1); }
.qx-dock__est { display: flex; align-items: center; gap: 14px; background: transparent; text-align: left; padding: 4px 0; }
.qx-dock__est-text { display: flex; flex-direction: column; gap: 1px; }
.qx-dock__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.qx-dock__val { font-family: var(--serif); font-size: 1.65rem; line-height: 1; color: var(--deep-green); }
.qx-dock__val:empty { display: none; }
.qx-dock__hint { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-mute); }
.qx-dock__chev { color: var(--deep-green); font-size: 13px; transition: transform .25s var(--ease); }
.qx-dock[data-open="1"] .qx-dock__chev { transform: rotate(180deg); }
.qx-dock__nav { display: flex; align-items: center; gap: 16px; flex: none; }
.qx-dock__nav .quote-nav__next { min-width: 180px; justify-content: center; }
.qx-dock__nav .quote-nav__back { background: none; border: 0; color: var(--ink-soft); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 4px; }
.qx-dock__nav .quote-nav__back:hover { color: var(--deep-green); }

/* breakdown drawer */
.qx-dock__drawer { background: var(--card); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; padding: 20px 22px; margin-bottom: -1px;
  max-height: 52vh; overflow-y: auto; box-shadow: 0 -10px 34px rgba(29, 34, 30, 0.08); }
.qx-dock__drawer[hidden] { display: none; }
.qx-drawer__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; margin-bottom: 12px; }
.qx-drawer__head .eyebrow { color: var(--deep-green); }
.qx-drawer__close { background: none; border: 0; color: var(--ink-mute); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.qx-drawer__close:hover { color: var(--ink); }

/* estimate line-items */
.quote-section-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deep-green); margin: 16px 0 8px; }
.quote-section-label--warn { color: var(--gold-deep); }
.quote-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.quote-line__title { color: var(--ink); font-weight: 500; font-size: 14px; align-self: center; }
.quote-line__price { text-align: right; color: var(--deep-green); font-family: var(--serif); font-size: 1.2rem; white-space: nowrap; }
.quote-line__price small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.quote-line__price--text { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.quote-line__sub { grid-column: 1 / -1; color: var(--ink-mute); font-size: 12px; line-height: 1.5; }
.quote-totals { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--deep-green); }
.quote-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.quote-total-row__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.quote-total-row__value { font-family: var(--serif); font-size: 1.5rem; color: var(--deep-green); }
.quote-total-row__value small { font-family: var(--sans); font-size: 12px; color: var(--ink-mute); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .qx { grid-template-columns: 1fr; gap: 24px; }
  .qx-rail { position: static; }
  .qx-rail__eyebrow { display: none; }
  .qx-rail__list { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
  .qx-rail__item { padding: 4px 0; }
  .qx-rail__item::before { display: none; }
  .qx-rail__num { width: 25px; height: 25px; font-size: 11px; }
  .qx-rail__label { font-size: 0.9rem; }
  .qx-rail__help { display: none; }
  .qx-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qx-dock__bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .qx-dock__nav { justify-content: space-between; }
  .qx-dock__nav .quote-nav__next { flex: 1; }
  .qx-dock { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .qx-dock__bar { border-radius: 0; border-left: 0; border-right: 0; }
}

/* =========================================================
   DREAM STUDIO — garden-moments.html (2026-07-11)
   Price-free ideation palette + sticky dream-board dock.
   Swatches are pure CSS (layered gradients) so the palette
   ships with zero image weight and stays art-directed.
   ========================================================= */
.dstudio { display: grid; gap: clamp(56px, 7vw, 96px); }
.dcat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 22px; }
.dcat__head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--ink); }
.dcat__head h3 span { color: var(--bronze); font-style: italic; font-weight: 300; }
.dcat__head p { font-size: 14px; color: var(--ink-mute); max-width: 52ch; }
.dcat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.dream-card {
  position: relative; display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 16px 44px 16px 16px; cursor: pointer; user-select: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dream-card:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.dream-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.dream-card__body { min-width: 0; }
.dream-card__name { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.18rem; color: var(--ink); line-height: 1.2; }
.dream-card__desc { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; }
.dream-card__check {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%;
  transition: all 0.2s ease;
}
.dream-card input:checked ~ .dream-card__check { background: var(--deep-green); border-color: var(--deep-green); }
.dream-card input:checked ~ .dream-card__check::after {
  content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
  border: solid var(--on-deep); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dream-card input:checked ~ .sw { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--bronze); }
.dream-card:has(input:checked) { border-color: var(--deep-green); box-shadow: var(--shadow-sm); }
.dream-card input:focus-visible ~ .dream-card__check { outline: 2px solid var(--frond-green); outline-offset: 2px; }

/* ---- Material swatches (CSS-painted) ---- */
.sw { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(29,34,30,0.12); transition: box-shadow 0.2s ease; background: var(--paper-2); }
/* mulch */
.sw--pine-bark   { background: radial-gradient(circle at 30% 30%, var(--dark) 0 22%, transparent 23%), radial-gradient(circle at 72% 40%, var(--ink-soft) 0 26%, transparent 27%), radial-gradient(circle at 45% 75%, var(--dark) 0 24%, transparent 25%), var(--ink-soft); }
.sw--mini-pine   { background: radial-gradient(circle at 25% 30%, var(--dark) 0 12%, transparent 13%), radial-gradient(circle at 60% 22%, var(--dark) 0 11%, transparent 12%), radial-gradient(circle at 80% 55%, var(--dark) 0 12%, transparent 13%), radial-gradient(circle at 38% 62%, var(--dark) 0 13%, transparent 14%), radial-gradient(circle at 66% 80%, var(--dark) 0 12%, transparent 13%), var(--ink-soft); }
.sw--pine-straw  { background: repeating-linear-gradient(72deg, #b98d4f 0 2px, #a3763a 2px 4px, var(--accent-on-deep) 4px 5px, #8f6a34 5px 7px); }
.sw--eucalyptus  { background: repeating-linear-gradient(100deg, var(--dark) 0 3px, var(--dark) 3px 5px, var(--ink-mute) 5px 7px, var(--dark) 7px 10px); }
.sw--melaleuca   { background: repeating-linear-gradient(85deg, var(--accent-on-deep) 0 2px, var(--ink-mute) 2px 4px, var(--accent-on-deep) 4px 6px, var(--accent-on-deep) 6px 8px); }
.sw--shell       { background: radial-gradient(circle at 30% 35%, var(--card) 0 14%, transparent 15%), radial-gradient(circle at 65% 28%, var(--on-deep) 0 12%, transparent 13%), radial-gradient(circle at 48% 66%, var(--paper-2) 0 13%, transparent 14%), radial-gradient(circle at 78% 70%, var(--paper-2) 0 11%, transparent 12%), var(--line); }
/* stone & gravel */
.sw--river-rock   { background: radial-gradient(circle at 30% 32%, var(--line) 0 20%, transparent 21%), radial-gradient(circle at 70% 38%, var(--ink-mute) 0 22%, transparent 23%), radial-gradient(circle at 45% 74%, var(--ink-mute) 0 21%, transparent 22%), var(--ink-mute); }
.sw--beach-pebble { background: radial-gradient(circle at 32% 34%, var(--ink-soft) 0 24%, transparent 25%), radial-gradient(circle at 72% 42%, var(--ink-soft) 0 26%, transparent 27%), radial-gradient(circle at 48% 76%, var(--ink-soft) 0 23%, transparent 24%), var(--ink); }
.sw--marble-chip  { background: radial-gradient(circle at 28% 30%, #ffffff 0 13%, transparent 14%), radial-gradient(circle at 62% 24%, var(--paper-2) 0 12%, transparent 13%), radial-gradient(circle at 44% 62%, var(--paper-2) 0 13%, transparent 14%), radial-gradient(circle at 76% 68%, var(--paper-2) 0 12%, transparent 13%), var(--line); }
.sw--crushed-shell{ background: radial-gradient(circle at 30% 35%, var(--paper-2) 0 12%, transparent 13%), radial-gradient(circle at 64% 30%, var(--paper-2) 0 11%, transparent 12%), radial-gradient(circle at 46% 68%, var(--paper-2) 0 12%, transparent 13%), var(--line); }
.sw--lava         { background: radial-gradient(circle at 32% 34%, var(--dark) 0 18%, transparent 19%), radial-gradient(circle at 68% 44%, var(--dark) 0 20%, transparent 21%), radial-gradient(circle at 46% 74%, var(--dark) 0 19%, transparent 20%), var(--dark); }
.sw--granite      { background: radial-gradient(circle at 28% 32%, var(--line) 0 10%, transparent 11%), radial-gradient(circle at 60% 26%, var(--melon-line) 0 10%, transparent 11%), radial-gradient(circle at 44% 60%, var(--melon-line) 0 10%, transparent 11%), radial-gradient(circle at 74% 66%, var(--ink-mute) 0 10%, transparent 11%), var(--melon-line); }
/* pavers & brick */
.sw--travertine     { background: repeating-linear-gradient(0deg, var(--paper-2) 0 6px, var(--line) 6px 9px, var(--paper-2) 9px 15px, var(--line) 15px 18px); }
.sw--clay-brick     { background: repeating-linear-gradient(0deg, #9c4a37 0 10px, var(--paper-2) 10px 12px), repeating-linear-gradient(90deg, transparent 0 16px, var(--paper-2) 16px 18px); background-color: #9c4a37; }
.sw--concrete-paver { background: linear-gradient(0deg, transparent 0 46%, var(--line) 46% 54%, transparent 54%), linear-gradient(90deg, transparent 0 46%, var(--line) 46% 54%, transparent 54%), var(--ink-mute); }
.sw--flagstone      { background: radial-gradient(circle at 30% 30%, var(--ink-mute) 0 30%, transparent 31%), radial-gradient(circle at 72% 62%, var(--ink-mute) 0 32%, transparent 33%), radial-gradient(circle at 40% 78%, var(--ink-mute) 0 24%, transparent 25%), var(--ink-soft); }
.sw--shellstone     { background: radial-gradient(circle at 30% 35%, var(--line) 0 8%, transparent 9%), radial-gradient(circle at 58% 26%, var(--line) 0 7%, transparent 8%), radial-gradient(circle at 46% 62%, var(--line) 0 8%, transparent 9%), radial-gradient(circle at 74% 70%, var(--line) 0 7%, transparent 8%), var(--paper-2); }
.sw--stepping       { background: radial-gradient(circle at 35% 35%, var(--ink-mute) 0 22%, transparent 23%), radial-gradient(circle at 70% 68%, var(--ink-mute) 0 20%, transparent 21%), var(--deep-green); }
/* walls & edges */
.sw--retaining  { background: repeating-linear-gradient(0deg, var(--ink-mute) 0 8px, var(--ink-mute) 8px 9px, var(--ink-mute) 9px 17px, var(--ink-mute) 17px 18px); }
.sw--brick-wall { background: repeating-linear-gradient(0deg, #954634 0 9px, var(--paper-2) 9px 11px), repeating-linear-gradient(90deg, transparent 0 14px, var(--paper-2) 14px 16px); background-color: #954634; }
.sw--seat-wall  { background: linear-gradient(180deg, var(--line) 0 26%, var(--ink-mute) 26% 30%, var(--ink-mute) 30% 100%); }
.sw--edging     { background: linear-gradient(180deg, var(--deep-green) 0 52%, transparent 52%), radial-gradient(circle at 20% 72%, var(--ink-mute) 0 16%, transparent 17%), radial-gradient(circle at 50% 74%, var(--ink-mute) 0 16%, transparent 17%), radial-gradient(circle at 80% 72%, var(--ink-mute) 0 16%, transparent 17%), var(--ink-mute); }
/* water */
.sw--fountain { background: radial-gradient(circle at 50% 50%, var(--paper-2) 0 12%, var(--on-deep-mute) 13% 26%, var(--moss) 27% 42%, var(--deep-green) 43% 62%, var(--deep-green) 63% 100%); }
.sw--urns     { background: radial-gradient(circle at 38% 32%, var(--accent-on-deep) 0 20%, transparent 21%), radial-gradient(circle at 55% 55%, var(--dark) 0 46%, transparent 47%), var(--deep-green); }
.sw--pond     { background: radial-gradient(circle at 68% 34%, #e08a3c 0 12%, transparent 13%), radial-gradient(circle at 36% 62%, var(--accent-on-deep) 0 9%, transparent 10%), radial-gradient(circle at 50% 50%, var(--deep-green) 0 70%, var(--deep-green) 71% 100%); }
.sw--rill     { background: linear-gradient(90deg, var(--ink-mute) 0 26%, var(--paper-2) 26% 42%, var(--accent-on-deep) 42% 58%, var(--paper-2) 58% 74%, var(--ink-mute) 74% 100%); }
/* fire */
.sw--firepit   { background: radial-gradient(circle at 50% 46%, #f6d06a 0 14%, #e8923c 15% 30%, #b34e26 31% 46%, var(--ink-soft) 47% 66%, var(--ink-mute) 67% 100%); }
.sw--firebowl  { background: linear-gradient(180deg, transparent 0 34%, var(--ink-soft) 34% 100%), radial-gradient(circle at 50% 30%, #f6d06a 0 16%, #e8923c 17% 32%, transparent 33%); background-color: var(--ink); }
.sw--fireplace { background: linear-gradient(0deg, var(--dark) 0 100%), radial-gradient(circle at 50% 62%, #f2a94e 0 22%, #8a4526 23% 38%, transparent 39%); background-blend-mode: multiply, normal; background-color: var(--ink-soft); }
/* patios & walkways */
.sw--patio     { background: repeating-linear-gradient(45deg, var(--accent-on-deep) 0 8px, var(--accent-on-deep) 8px 16px), linear-gradient(45deg, transparent 0 48%, var(--paper-2) 48% 52%, transparent 52%); background-color: var(--accent-on-deep); }
.sw--walkway   { background: linear-gradient(115deg, var(--deep-green) 0 30%, var(--line) 30% 48%, var(--line) 48% 66%, var(--deep-green) 66% 100%); }
.sw--courtyard { background: linear-gradient(0deg, var(--deep-green) 0 16%, transparent 16% 84%, var(--deep-green) 84%), linear-gradient(90deg, var(--deep-green) 0 16%, transparent 16% 84%, var(--deep-green) 84%), var(--line); }
.sw--poolside  { background: radial-gradient(circle at 50% 120%, #7fd4d0 0 46%, #4db3b3 47% 58%, var(--paper-2) 59% 100%); }
/* pergolas & shade */
.sw--pergola { background: repeating-linear-gradient(90deg, var(--dark) 0 6px, transparent 6px 14px), linear-gradient(180deg, var(--paper-2) 0 100%); }
.sw--arbor   { background: radial-gradient(circle at 50% 100%, transparent 0 52%, var(--dark) 53% 68%, transparent 69%), linear-gradient(180deg, var(--paper-2) 0 100%); }
.sw--trellis { background: repeating-linear-gradient(45deg, var(--moss) 0 3px, transparent 3px 12px), repeating-linear-gradient(-45deg, var(--moss) 0 3px, transparent 3px 12px), var(--paper-2); }
/* planters & containers */
.sw--raised     { background: linear-gradient(180deg, var(--deep-green) 0 38%, var(--dark) 38% 100%); }
.sw--containers { background: radial-gradient(circle at 34% 62%, var(--dark) 0 26%, transparent 27%), radial-gradient(circle at 68% 56%, var(--moss) 0 22%, transparent 23%), radial-gradient(circle at 52% 30%, var(--deep-green) 0 20%, transparent 21%), var(--paper-2); }
.sw--plantwall  { background: radial-gradient(circle at 25% 25%, var(--moss) 0 16%, transparent 17%), radial-gradient(circle at 60% 20%, var(--deep-green) 0 15%, transparent 16%), radial-gradient(circle at 40% 55%, var(--moss) 0 16%, transparent 17%), radial-gradient(circle at 75% 60%, var(--deep-green) 0 15%, transparent 16%), radial-gradient(circle at 30% 85%, var(--deep-green) 0 15%, transparent 16%), radial-gradient(circle at 68% 88%, var(--moss) 0 14%, transparent 15%), var(--deep-green); }

/* ---- Material swatches — stock photography (added 2026-07-23) ---- */
.sw--pine-bark    { background-image: url('images/dream/dream-pine-bark.jpg'); background-image: image-set(url('images/dream/dream-pine-bark.webp') type('image/webp'), url('images/dream/dream-pine-bark.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--mini-pine    { background-image: url('images/dream/dream-mini-pine.jpg'); background-image: image-set(url('images/dream/dream-mini-pine.webp') type('image/webp'), url('images/dream/dream-mini-pine.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--pine-straw   { background-image: url('images/dream/dream-pine-straw.jpg'); background-image: image-set(url('images/dream/dream-pine-straw.webp') type('image/webp'), url('images/dream/dream-pine-straw.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--eucalyptus   { background-image: url('images/dream/dream-eucalyptus.jpg'); background-image: image-set(url('images/dream/dream-eucalyptus.webp') type('image/webp'), url('images/dream/dream-eucalyptus.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--melaleuca    { background-image: url('images/dream/dream-melaleuca.jpg'); background-image: image-set(url('images/dream/dream-melaleuca.webp') type('image/webp'), url('images/dream/dream-melaleuca.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--shell        { background-image: url('images/dream/dream-shell.jpg'); background-image: image-set(url('images/dream/dream-shell.webp') type('image/webp'), url('images/dream/dream-shell.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--river-rock   { background-image: url('images/dream/dream-river-rock.jpg'); background-image: image-set(url('images/dream/dream-river-rock.webp') type('image/webp'), url('images/dream/dream-river-rock.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--beach-pebble { background-image: url('images/dream/dream-beach-pebble.jpg'); background-image: image-set(url('images/dream/dream-beach-pebble.webp') type('image/webp'), url('images/dream/dream-beach-pebble.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--marble-chip  { background-image: url('images/dream/dream-marble-chip.jpg'); background-image: image-set(url('images/dream/dream-marble-chip.webp') type('image/webp'), url('images/dream/dream-marble-chip.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--crushed-shell{ background-image: url('images/dream/dream-crushed-shell.jpg'); background-image: image-set(url('images/dream/dream-crushed-shell.webp') type('image/webp'), url('images/dream/dream-crushed-shell.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--lava         { background-image: url('images/dream/dream-lava.jpg'); background-image: image-set(url('images/dream/dream-lava.webp') type('image/webp'), url('images/dream/dream-lava.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--granite      { background-image: url('images/dream/dream-granite.jpg'); background-image: image-set(url('images/dream/dream-granite.webp') type('image/webp'), url('images/dream/dream-granite.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--travertine     { background-image: url('images/dream/dream-travertine.jpg'); background-image: image-set(url('images/dream/dream-travertine.webp') type('image/webp'), url('images/dream/dream-travertine.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--clay-brick     { background-image: url('images/dream/dream-clay-brick.jpg'); background-image: image-set(url('images/dream/dream-clay-brick.webp') type('image/webp'), url('images/dream/dream-clay-brick.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--concrete-paver { background-image: url('images/dream/dream-concrete-paver.jpg'); background-image: image-set(url('images/dream/dream-concrete-paver.webp') type('image/webp'), url('images/dream/dream-concrete-paver.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--flagstone      { background-image: url('images/dream/dream-flagstone.jpg'); background-image: image-set(url('images/dream/dream-flagstone.webp') type('image/webp'), url('images/dream/dream-flagstone.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--shellstone     { background-image: url('images/dream/dream-shellstone.jpg'); background-image: image-set(url('images/dream/dream-shellstone.webp') type('image/webp'), url('images/dream/dream-shellstone.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--stepping       { background-image: url('images/dream/dream-stepping.jpg'); background-image: image-set(url('images/dream/dream-stepping.webp') type('image/webp'), url('images/dream/dream-stepping.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--retaining  { background-image: url('images/dream/dream-retaining.jpg'); background-image: image-set(url('images/dream/dream-retaining.webp') type('image/webp'), url('images/dream/dream-retaining.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--brick-wall { background-image: url('images/dream/dream-brick-wall.jpg'); background-image: image-set(url('images/dream/dream-brick-wall.webp') type('image/webp'), url('images/dream/dream-brick-wall.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--seat-wall  { background-image: url('images/dream/dream-seat-wall.jpg'); background-image: image-set(url('images/dream/dream-seat-wall.webp') type('image/webp'), url('images/dream/dream-seat-wall.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--edging     { background-image: url('images/dream/dream-edging.jpg'); background-image: image-set(url('images/dream/dream-edging.webp') type('image/webp'), url('images/dream/dream-edging.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--fountain { background-image: url('images/dream/dream-fountain.jpg'); background-image: image-set(url('images/dream/dream-fountain.webp') type('image/webp'), url('images/dream/dream-fountain.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--urns     { background-image: url('images/dream/dream-urns.jpg'); background-image: image-set(url('images/dream/dream-urns.webp') type('image/webp'), url('images/dream/dream-urns.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--pond     { background-image: url('images/dream/dream-pond.jpg'); background-image: image-set(url('images/dream/dream-pond.webp') type('image/webp'), url('images/dream/dream-pond.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--rill     { background-image: url('images/dream/dream-rill.jpg'); background-image: image-set(url('images/dream/dream-rill.webp') type('image/webp'), url('images/dream/dream-rill.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--firepit   { background-image: url('images/dream/dream-firepit.jpg'); background-image: image-set(url('images/dream/dream-firepit.webp') type('image/webp'), url('images/dream/dream-firepit.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--firebowl  { background-image: url('images/dream/dream-firebowl.jpg'); background-image: image-set(url('images/dream/dream-firebowl.webp') type('image/webp'), url('images/dream/dream-firebowl.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--fireplace { background-image: url('images/dream/dream-fireplace.jpg'); background-image: image-set(url('images/dream/dream-fireplace.webp') type('image/webp'), url('images/dream/dream-fireplace.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--patio     { background-image: url('images/dream/dream-patio.jpg'); background-image: image-set(url('images/dream/dream-patio.webp') type('image/webp'), url('images/dream/dream-patio.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--walkway   { background-image: url('images/dream/dream-walkway.jpg'); background-image: image-set(url('images/dream/dream-walkway.webp') type('image/webp'), url('images/dream/dream-walkway.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--courtyard { background-image: url('images/dream/dream-courtyard.jpg'); background-image: image-set(url('images/dream/dream-courtyard.webp') type('image/webp'), url('images/dream/dream-courtyard.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--poolside  { background-image: url('images/dream/dream-poolside.jpg'); background-image: image-set(url('images/dream/dream-poolside.webp') type('image/webp'), url('images/dream/dream-poolside.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--pergola { background-image: url('images/dream/dream-pergola.jpg'); background-image: image-set(url('images/dream/dream-pergola.webp') type('image/webp'), url('images/dream/dream-pergola.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--arbor   { background-image: url('images/dream/dream-arbor.jpg'); background-image: image-set(url('images/dream/dream-arbor.webp') type('image/webp'), url('images/dream/dream-arbor.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--trellis { background-image: url('images/dream/dream-trellis.jpg'); background-image: image-set(url('images/dream/dream-trellis.webp') type('image/webp'), url('images/dream/dream-trellis.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--raised     { background-image: url('images/dream/dream-raised.jpg'); background-image: image-set(url('images/dream/dream-raised.webp') type('image/webp'), url('images/dream/dream-raised.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--containers { background-image: url('images/dream/dream-containers.jpg'); background-image: image-set(url('images/dream/dream-containers.webp') type('image/webp'), url('images/dream/dream-containers.jpg') type('image/jpeg')); background-size: cover; background-position: center; }
.sw--plantwall  { background-image: url('images/dream/dream-plantwall.jpg'); background-image: image-set(url('images/dream/dream-plantwall.webp') type('image/webp'), url('images/dream/dream-plantwall.jpg') type('image/jpeg')); background-size: cover; background-position: center; }

/* ---- Dream-board dock ---- */
.dream-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.dream-dock__inner {
  pointer-events: auto;
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 3px; box-shadow: var(--shadow-md);
  padding: 12px 14px 12px 8px;
}
.dream-dock__clear {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  color: var(--ink-mute); font-size: 20px; line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}
.dream-dock__clear:hover { color: var(--bloom); background: rgba(143, 45, 68, 0.07); }
.dream-dock__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dream-dock__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.dream-dock__count { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.dream-dock__go { white-space: nowrap; }
body.has-dream-dock { padding-bottom: 96px; }
.dream-dock__email-toggle {
  align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none;
  font-size: 12px; color: var(--ink-mute); text-decoration: underline; text-decoration-color: var(--line);
  cursor: pointer; transition: color 0.2s ease;
}
.dream-dock__email-toggle:hover { color: var(--bronze); }

/* ---- Dream-board email panel (send without a quote) ---- */
.dream-email {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 var(--gutter) calc(112px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.dream-email__inner {
  pointer-events: auto; position: relative;
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 3px; box-shadow: var(--shadow-md);
  padding: 20px;
}
.dream-email__close { position: absolute; top: 6px; right: 6px; }
.dream-email__intro { font-size: 13px; color: var(--ink-mute); margin: 0 0 14px; padding-right: 24px; }
.dream-email__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
.dream-email__actions { display: flex; gap: 10px; margin-top: 6px; }
.dream-email__status { font-size: 12.5px; color: var(--ink-mute); margin: 10px 0 0; min-height: 1em; }

@media (max-width: 640px) {
  .dream-email { padding-left: 12px; padding-right: 12px; }
  .dream-email__inner { max-width: none; }
}

@media (max-width: 900px) {
  .dcat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dcat__grid { grid-template-columns: 1fr; }
  .dream-dock { padding-left: 12px; padding-right: 12px; }
  .dream-dock__inner { gap: 10px; }
  .dream-dock__count { font-size: 1rem; }
  .dream-dock__go { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================
   MAISON COMPONENTS — LV pass (2026-07-11)
   Full-bleed media, campaign tiles, portrait film reels.
   ========================================================= */

/* Campaign tiles — image + tiny caption + Discover link (the LV grid) */
.mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.mtiles--2 { grid-template-columns: repeat(2, 1fr); }
.mtile { display: block; }
.mtile__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.mtile__media--wide { aspect-ratio: 16 / 10; }
.mtile__media img, .mtile__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.mtile:hover .mtile__media img, .mtile:hover .mtile__media video { transform: scale(1.045); }
.mtile__caption { padding: 16px 2px 0; }
.mtile__kicker { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-mute); }
.mtile__title { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--ink); margin-top: 6px; line-height: 1.2; }
.mtile__link { display: inline-block; margin-top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.mtile:hover .mtile__link { color: var(--deep-green); border-color: var(--deep-green); }

/* Portrait film reels — three quiet loops in a row */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.reel { position: relative; overflow: hidden; aspect-ratio: 9 / 16; background: var(--paper-2); }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__tag {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--on-deep);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(18, 20, 18, 0.38) 100%); }

/* Full-bleed strip — one wide image between sections */
.strip { position: relative; height: clamp(340px, 62vh, 640px); overflow: hidden; }
.strip__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.04); }
.strip__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px var(--gutter);
  color: var(--on-deep); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  background: linear-gradient(180deg, transparent, rgba(18, 20, 18, 0.42));
}

/* Maison marquee — the tracked wordline (used as a quiet section divider) */
.wordline {
  display: block; text-align: center;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--ink); padding: clamp(40px, 6vw, 72px) var(--gutter);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.wordline span { color: var(--ink-mute); }

@media (max-width: 900px) {
  .mtiles, .reels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mtiles, .mtiles--2 { grid-template-columns: 1fr; }
  .reels { grid-template-columns: 1fr; }
  .reel { aspect-ratio: 3 / 4; }
  .wordline { letter-spacing: 0.32em; }
}

/* =========================================================
   THE PROCESS — process.html (2026-07-11)
   Ten numbered phases, hairline timeline table, practice list.
   ========================================================= */
.phases { display: grid; gap: 0; border-top: 1px solid var(--line); }
.phase { display: grid; grid-template-columns: 110px 1fr; gap: clamp(18px, 3vw, 48px); padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.phase__num { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); color: var(--ink); line-height: 1; }
.phase__num small { display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; }
.phase__body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.85rem); color: var(--ink); }
.phase__time { display: inline-block; margin-left: 14px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line); padding: 5px 10px; vertical-align: middle; }
.phase__body > p { margin-top: 12px; max-width: 62ch; }
.phase__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 34px); margin-top: 18px; }
.phase__col h4 { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.phase__col ul { display: grid; gap: 7px; }
.phase__col li { font-size: 14px; color: var(--ink-soft); line-height: 1.55; padding-left: 16px; position: relative; }
.phase__col li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 1px; background: var(--ink); }
.ttable { width: 100%; border-collapse: collapse; }
.ttable th, .ttable td { text-align: left; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.ttable th { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); }
.ttable td:first-child { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.ttable td:last-child { color: var(--ink-soft); }
.practice { border-top: 1px solid var(--line); padding: clamp(22px, 3vw, 34px) 0; display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: clamp(16px, 3vw, 44px); }
.practice:last-child { border-bottom: 1px solid var(--line); }
.practice h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--ink); }
.practice p { max-width: 66ch; font-size: 15px; }
@media (max-width: 760px) {
  .phase { grid-template-columns: 1fr; gap: 12px; }
  .phase__cols { grid-template-columns: 1fr; }
  .practice { grid-template-columns: 1fr; }
}

/* =========================================================
   SITE ASSESSMENT — assessment.html (2026-07-11)
   Internal field form for the on-site consultation. Reuses
   the inquiry components; adds photo grid + inventory rows.
   ========================================================= */
.af { max-width: 900px; margin: 0 auto; }
.af .quote-input, .af .quote-select, .af .quote-textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 12px 2px; color: var(--ink); width: 100%; font-family: var(--sans); font-size: 16px;
}
.af .quote-textarea { border: 1px solid var(--line); padding: 12px 14px; }
.af .quote-input:focus, .af .quote-select:focus, .af .quote-textarea:focus { outline: none; border-color: var(--ink); }
.af-section { border-top: 1px solid var(--line); padding: clamp(26px, 4vw, 40px) 0; }
.af-section > h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.af-section > h2 small { display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.af-grid--3 { grid-template-columns: repeat(3, 1fr); }
.af-check { display: flex; align-items: center; gap: 10px; padding: 9px 2px; cursor: pointer; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px dashed var(--line-soft); }
.af-check input { width: 16px; height: 16px; accent-color: var(--deep-green); flex: none; }
.af-inline { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.af-inline .af-check { border-bottom: 0; }
.af-sub { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); margin: 18px 0 6px; }
.af-row { display: grid; grid-template-columns: 2fr 1.2fr auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.af-row .quote-input { padding: 8px 2px; font-size: 14.5px; }
.af-row select { padding: 8px 2px; font-size: 14.5px; }
.af-addrow { margin-top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.af-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.af-photo { position: relative; border: 1px solid var(--line); }
.af-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.af-photo select { width: 100%; border: 0; border-top: 1px solid var(--line); padding: 8px; font-size: 12.5px; background: var(--card); color: var(--ink); }
.af-photo__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; background: rgba(25,25,26,0.82); color: var(--on-deep); font-size: 15px; line-height: 1; border-radius: 0; }
.af-drop {
  border: 1px dashed var(--ink-mute); padding: 26px; text-align: center; cursor: pointer;
  font-size: 13.5px; color: var(--ink-soft); transition: border-color .25s var(--ease);
}
.af-drop:hover { border-color: var(--ink); }
.af-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.af-status { font-size: 13px; color: var(--ink-mute); }
.af-saved { color: var(--frond-green); }
@media (max-width: 720px) {
  .af-grid, .af-grid--3 { grid-template-columns: 1fr; }
  .af-row { grid-template-columns: 1fr 1fr; }
  .af-photos { grid-template-columns: 1fr 1fr; }
}
@media print {
  .nav, .footer, .af-actions, .af-drop, .af-addrow, .af-photo__x, .phero__scrim { display: none !important; }
  .phero { min-height: auto !important; }
  .phero__bg, .phero__picture { display: none; }
  .phero__content h1, .phero__content .eyebrow { color: #000 !important; text-shadow: none; }
  body { background: var(--card); }
  .af-section { break-inside: avoid; }
  .af-photos { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   BRAND SURFACES — added with the 2026-08-05 brand pass.
   Melon lives here and only here: as a surface, a rule, or a
   badge fill. It is never type on a light ground (1.67:1).
   ========================================================= */

/* Melon panel. The guide's "02. Full Logo" plate is exactly this:
   a full-bleed melon field carrying green line art. */
.section--melon {
  background: var(--melon);
  color: var(--on-melon);            /* Grass — 5.98:1, the only safe text here */
}
.section--melon h1, .section--melon h2, .section--melon h3,
.section--melon .statement { color: var(--on-melon); }
.section--melon .eyebrow  { color: var(--surface-deep-2); }  /* Green, 4.10 — display sizes only */
.section--melon .btn--primary { background: var(--surface-deep); color: var(--on-deep); }
.section--melon .btn--ghost   { border-color: var(--on-melon); color: var(--on-melon); }

/* Softer melon wash, for cards and callouts that need warmth
   without the full saturation. Body text stays fully legible. */
.section--melon-soft { background: var(--melon-soft); color: var(--ink); }
.callout--melon {
  background: var(--melon-soft);
  border-left: 3px solid var(--melon);
  padding: 18px 22px;
  color: var(--ink);
}

/* Melon hairline — the accent as punctuation between sections. */
.rule--melon { height: 1px; border: 0; background: var(--melon-line); }
.rule--melon-thick { height: 3px; border: 0; background: var(--melon); }

/* Badge / tag on ivory. Melon fill, Grass type. */
.badge--melon {
  display: inline-block;
  background: var(--melon);
  color: var(--on-melon);
  font-family: var(--label);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 11px;
}

/* Tagline, per guide: GOOD VIBES / GREAT LANDSCAPES */
.tagline {
  font-family: var(--label);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--olive);
}
.tagline--on-deep { color: var(--accent-on-deep); }

/* Numbered section label — "01. MAIN LOGO" treatment from the guide. */
.eyebrow--numbered::before {
  content: attr(data-num) ".";
  margin-right: 0.7em;
  opacity: 0.55;
}