/* =====================================================================
   THE WAVE COLLECTION — Design System
   Fashion-house / editorial aesthetic. Didot-style display + Montserrat.
   Palette: ink · charcoal · slate · sand · cream · brass-gold
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Wave Development Partners — brand palette (sampled hex from brand guide) */
  --ink:      #0d0d0d;   /* Ink Black — primary, logo, headlines */
  --charcoal: #2b3036;   /* Deep Navy — secondary dark backgrounds */
  --slate:    #4d5a66;   /* Slate Blue — accent, secondary elements */
  --slate-lt: #8b95a1;   /* lightened slate for dark-bg body text */
  --sand:     #b29e8d;   /* Taupe — neutral accent, borders */
  --cream:    #e8e2dd;   /* Warm Cream — primary light background */
  --cream-dk: #dcd4ca;
  --white:    #ffffff;
  --gold:     #b08a50;   /* Antique Gold — CTAs, dividers (sparing) */
  --gold-dk:  #8a6a37;   /* darker gold for text legibility on cream */

  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shadow: 0 24px 60px -28px rgba(20, 22, 26, 0.45);
  --hairline: rgba(20, 22, 26, 0.14);
  --hairline-light: rgba(255, 255, 255, 0.22);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ===== TYPE SCALE — exactly FOUR sizes, used everywhere =====
     --fs-xl  Display : the home hero headline only
     --fs-lg  Large   : all section + card/pillar headings, pull quotes (display font)
     --fs-md  Medium  : all body copy, leads
     --fs-sm  Small   : eyebrows, nav, buttons, labels, numerals, captions, legal small print
     (The WAVE / DEVELOPMENT PARTNERS logo lockup is a fixed brand mark, exempt.) */
  --fs-xl: clamp(2.7rem, 6.5vw, 5rem);   /* hero headline only */
  --fs-lg: clamp(1.7rem, 3vw, 2.5rem);
  --fs-md: 1.0625rem;
  --fs-sm: 0.72rem;

  /* ===== SPACING — one vertical rhythm used everywhere ===== */
  --space:   clamp(2.75rem, 5vw, 4.25rem);  /* section padding */
  --space-sm: clamp(1.75rem, 3vw, 2.75rem); /* tight section padding */
  --gap:     1.5rem;                          /* grid / stack gap */
  --gap-eyebrow: 0.9rem;                      /* eyebrow → heading */
  --gap-lead: 1rem;                           /* heading → lead */
  --gap-actions: 1.75rem;                     /* copy → buttons */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; }
p { margin: 0 0 1.15em; }
::selection { background: var(--gold); color: var(--white); }

/* ---------- Utility layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1360px; }
.container--narrow { max-width: 820px; }
.section { padding-block: var(--space); }
.section--tight { padding-block: var(--space-sm); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.25rem; }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin: 0 0 0.9rem;
  display: inline-block;
}
.eyebrow--light { color: var(--sand); }

/* Display headings */
.display-xl, .display-lg, .display-md { font-size: var(--fs-lg); letter-spacing: 0.01em; line-height: 1.1; }
.display-sm { font-size: var(--fs-md); line-height: 1.22; }
/* Balanced line-wrapping for headings (graceful fallback where unsupported) */
.display-xl, .display-lg, .display-md, .hero__title, .page-hero__title, .pull, .card__title, .pillar-row__title { text-wrap: balance; }
/* Compact card titles (e.g. How We Engage) — one size down */
.cards--compact .card__title { font-size: var(--fs-md); line-height: 1.25; margin: 0.4rem 0 0.5rem; }
.italic { font-style: italic; }
.lead { font-size: var(--fs-md); font-weight: 300; color: var(--charcoal); line-height: 1.6; }
.muted { color: var(--slate); }

.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.hairline--gold { border-top: 1px solid rgba(184,150,90,0.5); width: 64px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--white); }
.btn--gold:hover { background: transparent; color: var(--gold-dk); border-color: var(--gold-dk); }
.btn--light { background: transparent; border-color: var(--cream); color: var(--cream); }
.btn--light:hover { background: var(--cream); color: var(--ink); }
.btn--block { display: block; width: 100%; text-align: center; }

.textlink {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dk);
  border-bottom: 1px solid rgba(184,150,90,0.4); padding-bottom: 3px;
  transition: border-color .3s var(--ease);
}
.textlink:hover { border-color: var(--gold-dk); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,241,234,0.9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--hairline);
  transition: background .4s var(--ease);
}
.site-header--over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.site-header--over .nav__link,
.site-header--over .brand-mark { color: var(--cream); }
.site-header--over .brand-mark .brand-sub { color: var(--sand); }
.site-header--over.is-scrolled { background: rgba(20,22,26,0.92); border-bottom-color: rgba(255,255,255,0.1); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 84px;
}
.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal);
  position: relative; padding: 4px 0; transition: color .3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link:hover { color: var(--gold-dk); }
.site-header--over .nav__link:hover { color: var(--white); }
.nav__cta { margin-left: 0.5rem; }
.nav__cta.btn { padding: 0.75rem 1.6rem; }
.nav__cta::after { display: none !important; }  /* button = colour change only, no underline */

/* Brand wordmark — WAVE (large Didot) over DEVELOPMENT PARTNERS (tracked small caps) */
.brand-mark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--ink); }
.brand-mark .brand-name { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.2em; font-weight: 500; padding-left: 0.2em; }
.brand-mark .brand-sub { font-family: var(--font-body); font-size: 0.42rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; margin-top: 6px; color: var(--slate); }
.site-header--over .brand-mark .brand-sub { color: var(--sand); }

/* Mobile nav toggle */
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.site-header--over .nav__toggle { color: var(--cream); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  padding-block: clamp(5rem, 8vw, 7rem);
  color: var(--cream); overflow: hidden;
  background: linear-gradient(160deg, #0d0d0d 0%, #2b3036 48%, #4d5a66 100%);
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(184,150,90,0.18), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,0.35) 0%, rgba(10,12,16,0.15) 40%, rgba(10,12,16,0.65) 100%);
}
.hero__media::after {
  /* elegant horizon / ocean band */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, rgba(31,54,66,0.55) 68%, rgba(12,20,26,0.9) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { font-size: var(--fs-xl); letter-spacing: 0.005em; line-height: 1.06; margin-bottom: var(--gap-lead); }
.hero__title .italic { color: var(--sand); }
.hero__sub { max-width: 560px; font-size: var(--fs-md); color: rgba(245,241,234,0.86); font-weight: 300; }
.hero__actions { margin-top: var(--gap-actions); display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sand); opacity: 0.8; font-size: var(--fs-sm); }

/* Decorative wave crest */
.wave-motif { display: block; width: 72px; height: auto; margin: 0 auto 1.5rem; }
.wave-motif path { stroke: var(--gold); }

/* ---------- Sections / editorial blocks ---------- */
.section--dark { background: var(--ink); color: var(--cream); }
.section--charcoal { background: var(--charcoal); color: var(--cream); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--sand { background: var(--cream-dk); }
.section--dark .eyebrow, .section--charcoal .eyebrow { color: var(--sand); }
.section--dark .muted, .section--charcoal .muted { color: var(--slate-lt); }
.section--dark .hairline, .section--charcoal .hairline { border-top-color: rgba(255,255,255,0.14); }
/* Body/lead text must go light on dark sections (default .lead is dark) */
.section--dark .lead, .section--charcoal .lead, .band .lead { color: rgba(232,226,221,0.88); }

/* Slate-blue section — third dark tone so the palette isn't just cream/gold */
.section--slate { background: #38454f; color: var(--cream); }
.section--slate .eyebrow { color: var(--sand); }
.section--slate .muted { color: rgba(232,226,221,0.72); }
.section--slate .lead { color: rgba(232,226,221,0.9); }
.section--slate h2, .section--slate h3, .section--slate h4, .section--slate .card__title { color: var(--cream); }
.section--slate .hairline { border-top-color: rgba(255,255,255,0.16); }
.section--slate .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.section--slate .card__body { color: rgba(232,226,221,0.8); }
.section--slate .pillar__items { color: var(--sand); }
.section--slate .pillar-row { border-top-color: rgba(255,255,255,0.16); }
.section--slate .pillar-row__lead { color: rgba(232,226,221,0.72); }
.section--slate .subitem h5 { color: var(--cream); }
.section--slate .subitem p { color: rgba(232,226,221,0.7); }
.section--slate .textlink { color: var(--sand); border-color: rgba(178,158,141,0.5); }

.grid { display: grid; gap: clamp(1.1rem, 2vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }

/* Feature / tenant cards */
.card {
  background: var(--white); border: 1px solid var(--hairline);
  padding: clamp(1.4rem, 2.4vw, 2rem); height: 100%;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__num { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--gold-dk); letter-spacing: 0.24em; }
.card__title { font-size: var(--fs-lg); line-height: 1.12; margin: 0.5rem 0 0.55rem; }
.card__body { font-size: var(--fs-md); color: var(--slate); margin: 0; line-height: 1.55; }
.section--dark .card, .section--charcoal .card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
.section--dark .card__body, .section--charcoal .card__body { color: var(--slate-lt); }
.section--dark .card__title, .section--charcoal .card__title { color: var(--cream); }

/* Pillar sub-items (Strategy / Demand / Conversion) */
.pillar__items { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dk); margin: 1rem 0 0; line-height: 1.9; }
.section--dark .pillar__items, .section--charcoal .pillar__items, .band .pillar__items { color: var(--sand); }

/* Big numbered pillar blocks (The Model page) */
.pillars { display: grid; gap: 0; }
.pillar-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem,4vw,3.5rem); padding-block: clamp(2.25rem,4vw,3.25rem); border-top: 1px solid var(--hairline); align-items: start; }
.pillar-row:first-child { border-top: 0; }
.pillar-row__label { display: flex; gap: 1.1rem; align-items: baseline; }
.pillar-row__num { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--gold-dk); line-height: 1; }
.pillar-row__title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.05; }
.pillar-row__lead { color: var(--slate); font-size: var(--fs-md); margin: 0.6rem 0 0; max-width: 34ch; }
.subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.subitem h5 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.3rem; color: var(--ink); }
.subitem p { font-size: var(--fs-sm); color: var(--slate); margin: 0; line-height: 1.55; }
@media (max-width: 860px) { .pillar-row { grid-template-columns: 1fr; } .subgrid { grid-template-columns: 1fr; } }

/* Numbered process list */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 1.3rem 0 1.3rem 4.5rem; border-top: 1px solid var(--hairline); counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-dk);
}
.steps h4 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.steps p { color: var(--slate); font-size: 0.95rem; margin: 0; }

/* Stat row */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--gold); line-height: 1; }
.stat__label { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate-lt); margin-top: 0.75rem; }

/* Portfolio tiles */
.tile {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: linear-gradient(160deg, #1b2530, #2a3742);
  display: flex; align-items: flex-end; color: var(--cream);
  border: 1px solid rgba(20,22,26,0.08);
}
.tile[data-tone="a"] { background: linear-gradient(160deg,#20303a,#38505c); }
.tile[data-tone="b"] { background: linear-gradient(160deg,#2b2a2e,#4a4038); }
.tile[data-tone="c"] { background: linear-gradient(160deg,#1a2b2a,#2f4a44); }
.tile[data-tone="d"] { background: linear-gradient(160deg,#2a2530,#463a4a); }
.tile[data-tone="e"] { background: linear-gradient(160deg,#2c2622,#4f4034); }
.tile[data-tone="f"] { background: linear-gradient(160deg,#1e2732,#39424f); }
.tile__inner { position: relative; z-index: 2; padding: 1.75rem; width: 100%;
  background: linear-gradient(180deg, transparent, rgba(12,16,20,0.75)); }
.tile__eyebrow { font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: 0.28em; text-transform: uppercase; color: var(--sand); }
.tile__name { font-family: var(--font-display); font-size: var(--fs-md); margin-top: 0.35rem; }
.tile__note { font-size: var(--fs-sm); color: rgba(245,241,234,0.72); margin-top: 0.25rem; }
.tile__ph { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  font-family: var(--font-body); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,241,234,0.5); border: 1px solid rgba(245,241,234,0.25); padding: 3px 8px; }

/* Quote / pull */
.pull { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.15; font-style: italic; }
.pull__cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dk); margin-top: 1.5rem; }

/* CTA band */
.cta-band { background: var(--ink); color: var(--cream); text-align: center; }
.cta-band .display-lg { margin-bottom: 1.25rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); }
.field .req { color: var(--gold-dk); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 300; color: var(--ink);
  padding: 0.95rem 1rem; border: 1px solid var(--hairline); background: var(--white);
  border-radius: 0; transition: border-color .3s var(--ease); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { min-height: 120px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* Consent block (A2P) */
.consent { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.25rem;
  border: 1px solid var(--hairline); background: var(--cream); }
.consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--gold-dk); cursor: pointer; }
.consent label { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55; color: var(--charcoal); text-transform: none; letter-spacing: 0; font-weight: 300; }
.consent a { color: var(--gold-dk); border-bottom: 1px solid rgba(184,150,90,0.4); }
.form__fineprint { font-size: var(--fs-sm); color: var(--slate); line-height: 1.6; }
.form__status { font-size: var(--fs-sm); padding: 0.85rem 1rem; display: none; }
.form__status.is-error { display: block; background: #fbeaea; color: #8a2b2b; border: 1px solid #e6b8b8; }
.form__status.is-success { display: block; background: #e9f2ea; color: #2c5a34; border: 1px solid #b8d6bd; }
.field__error { color: #a33; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; display: none; }
.field.is-invalid input, .field.is-invalid select { border-color: #c46; }
.field.is-invalid .field__error { display: block; }

/* Honeypot */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* ---------- Legal / prose ---------- */
.prose { max-width: 800px; }
.prose h2 { font-size: var(--fs-md); font-weight: 600; margin: 2.25rem 0 0.75rem; }
.prose h3 { font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin: 1.5rem 0 0.5rem; }
.prose p, .prose li { font-size: var(--fs-md); color: var(--charcoal); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--gold-dk); border-bottom: 1px solid rgba(184,150,90,0.4); }
.prose strong { font-weight: 600; }
.legal-meta { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--slate); letter-spacing: 0.04em; }
.callout { background: var(--cream-dk); border-left: 3px solid var(--gold); padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-size: var(--fs-md); }
.toc { border: 1px solid var(--hairline); padding: 1.5rem; background: var(--white); margin-bottom: 2.5rem; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; }
.toc li { margin-bottom: 0.5rem; }
.toc a { font-size: var(--fs-sm); color: var(--charcoal); }
.toc a:hover { color: var(--gold-dk); }

/* Page hero (interior) */
.page-hero { position: relative; overflow: hidden; background: var(--charcoal); color: var(--cream); padding-block: clamp(5.25rem, 8vw, 6.75rem) clamp(2.25rem,4vw,3.25rem); }
/* Tighter hero for legal pages (solid header, so no big top gap needed) */
.page-hero--tight { padding-block: clamp(2.25rem, 3.5vw, 3.25rem) clamp(1.75rem, 3vw, 2.5rem); }
.page-hero .eyebrow { color: var(--sand); }
.page-hero__title { font-size: var(--fs-lg); line-height: 1.1; }
.page-hero__sub { max-width: 620px; color: rgba(245,241,234,0.82); margin-top: var(--gap-lead); font-size: var(--fs-md); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; border-top: 1px solid rgba(232,226,221,0.16); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer__brand .brand-mark { align-items: flex-start; color: var(--cream); }
.footer__brand .brand-mark .brand-sub { color: var(--sand); }
.footer__tag { color: var(--slate-lt); font-size: var(--fs-sm); max-width: 300px; margin-top: 1.25rem; }
.footer__col h5 { font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); margin: 0 0 1.1rem; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 0.65rem; }
.footer__col a { font-size: var(--fs-sm); color: rgba(245,241,234,0.78); transition: color .3s var(--ease); }
.footer__col a:hover { color: var(--gold); }
.footer__col li span { font-size: var(--fs-sm); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-sm); color: var(--slate-lt); letter-spacing: 0.04em; }
.footer__legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__legal-links a { color: var(--slate-lt); }
.footer__legal-links a:hover { color: var(--gold); }
.footer__disclaimer { font-size: var(--fs-sm); color: rgba(154,162,172,0.7); line-height: 1.7; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.1); max-width: none; }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  max-width: 760px; margin: 0 auto; background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline); box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem; display: none; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
}
.cookie.is-visible { display: grid; }
.cookie__text { font-size: var(--fs-sm); color: var(--charcoal); line-height: 1.6; }
.cookie__text a { color: var(--gold-dk); border-bottom: 1px solid rgba(184,150,90,0.4); }
.cookie__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie__actions .btn { padding: 0.7rem 1.4rem; font-size: var(--fs-sm); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   PHOTO LAYERS  ·  SWAPPABLE
   Every photo is layered OVER a brand gradient, so if an image URL ever
   fails to load, an elegant gradient shows instead of a broken image.
   To use your own photography: replace the url(...) values below. That's
   the only place image sources live.
   ===================================================================== */
:root {
  /* Self-hosted photos. Drop the matching .jpg files into /assets/img/.
     Until a file is present, the elegant brand gradient shows in its place.
     See PHOTOS.md for the exact download list. */
  --img-hero:     url("/assets/img/hero.jpg");      /* home hero            (used) */
  --img-arch:     url("/assets/img/arch.jpg");       /* Our Process hero     (used) */
  --img-interior: url("/assets/img/interior.jpg");   /* home "Wave Standard" (used) */
  --img-villa:    url("/assets/img/villa.jpg");      /* "Problem We Solve"   (used) */
  --img-ocean:    url("/assets/img/ocean.jpg");      /* optional / portfolio */
  --img-coast:    url("/assets/img/coast.jpg");      /* optional / portfolio */
  --img-pool:     url("/assets/img/pool.jpg");       /* optional / portfolio */
  --img-aerial:   url("/assets/img/aerial.jpg");     /* optional / portfolio */
}

/* Hero (home) — photo under the existing overlay gradients */
.hero--photo .hero__media {
  background-image:
    linear-gradient(180deg, rgba(5,6,9,0.9) 0%, rgba(5,6,9,0.82) 40%, rgba(3,4,7,0.98) 100%),
    var(--img-hero);
  background-size: cover; background-position: center;
}

/* Interior page-hero with photo */
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
}
.page-hero__bg::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(9,11,15,0.88) 0%, rgba(9,11,15,0.93) 100%); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero--model .page-hero__bg { background-image: var(--img-arch); }
.page-hero--work  .page-hero__bg { background-image: var(--img-aerial); }
.page-hero--standard .page-hero__bg { background-image: var(--img-interior); }
.page-hero--contact .page-hero__bg { background-image: var(--img-coast); }

/* Reusable photo block (split panels, bands) */
.photo { background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--charcoal); }
.photo--ocean    { background-image: linear-gradient(180deg, rgba(18,24,30,0.15), rgba(12,18,24,0.35)), var(--img-ocean); }
.photo--coast    { background-image: linear-gradient(180deg, rgba(18,24,30,0.15), rgba(12,18,24,0.35)), var(--img-coast); }
.photo--villa    { background-image: linear-gradient(180deg, rgba(18,24,30,0.12), rgba(12,18,24,0.3)), var(--img-villa); }
.photo--interior { background-image: linear-gradient(180deg, rgba(18,24,30,0.12), rgba(12,18,24,0.3)), var(--img-interior); }
.photo--pool     { background-image: linear-gradient(180deg, rgba(18,24,30,0.12), rgba(12,18,24,0.3)), var(--img-pool); }
.photo--arch     { background-image: linear-gradient(180deg, rgba(18,24,30,0.12), rgba(12,18,24,0.3)), var(--img-arch); }

/* Split image panel */
.split__img { min-height: clamp(230px, 30vw, 360px); align-self: stretch; border: 1px solid var(--hairline); }

/* Full-width photo band with centred text (dark overlay) */
.band {
  position: relative; color: var(--cream); background-size: cover; background-position: center;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}
.band::before { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,10,14,0.82), rgba(8,10,14,0.9)); }
.band > .container { position: relative; z-index: 1; }
.band--ocean { background-image: var(--img-ocean); }
.band--coast { background-image: var(--img-coast); }
.band--pool  { background-image: var(--img-pool); }
.band--villa { background-image: var(--img-villa); }
.band--arch  { background-image: var(--img-arch); }

/* Tiles with photos (Our Work) */
.tile--photo { background-size: cover; background-position: center; background-color: #22303a; }
.tile--villa    { background-image: var(--img-villa); }
.tile--interior { background-image: var(--img-interior); }
.tile--pool     { background-image: var(--img-pool); }
.tile--coast    { background-image: var(--img-coast); }
.tile--arch     { background-image: var(--img-arch); }
.tile--aerial   { background-image: var(--img-aerial); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; gap: 2.5rem; }
  .toc ul { columns: 1; }
}
@media (max-width: 720px) {
  .nav__links {
    position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 0; background: var(--ink); padding: 1rem var(--gutter) 2rem;
    /* Shift up by full height + the 84px top offset so it always clears the
       viewport (a flat -120% left the gold CTA peeking at the top on phones). */
    transform: translateY(calc(-100% - 96px)); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav__links.is-open { transform: translateY(0); visibility: visible; transition: transform .45s var(--ease); }
  .nav__links li { width: 100%; }
  .nav__link { display: block; width: 100%; padding: 1rem 0; color: var(--cream); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; }
  .nav__cta.btn { margin: 1rem 0 0; }
  .nav__toggle { display: block; z-index: 61; }
  .site-header--over .nav__links { top: 84px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .cookie { grid-template-columns: 1fr; }
}

/* ===== Phone refinements (≤560px) ===== */
@media (max-width: 560px) {
  /* CTAs: full-width, evenly stacked — no more uneven wrapped button widths */
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .hero__actions .btn { width: 100%; }
  .mt-actions .btn { display: block; width: 100%; }
  /* Tighter tracking + padding so long uppercase labels sit comfortably full-width */
  .btn { padding: 1.05rem 1.4rem; letter-spacing: 0.16em; }
  .nav__cta.btn { width: 100%; }

  /* Softer stacked-card gap, and a bit more top air below the fixed header */
  .grid { gap: 1rem; }
  .split { gap: 1.75rem; }
  .split__img { min-height: 220px; }

  /* Cookie banner: give the buttons full width so they're easy to tap */
  .cookie { left: 0.9rem; right: 0.9rem; bottom: 0.9rem; padding: 1.25rem 1.25rem; }
  .cookie__actions { flex-direction: column; }
  .cookie__actions .btn { width: 100%; }

  /* Legal prose: comfortable indent for nested lists on narrow screens */
  .prose ul, .prose ol { padding-left: 1rem; }
  .toc { padding: 1.25rem 1.25rem; }
}

/* ===== Uniform spacing utilities ===== */
.mt-lead { margin-top: var(--gap-lead); }
.mt-actions { margin-top: var(--gap-actions); }
.mb-head { margin-bottom: var(--gap-actions); }
.measure { max-width: 600px; margin-inline: auto; }
.measure-wide { max-width: 660px; margin-inline: auto; }

/* ===== Quiet link (no underline; colour change only) ===== */
.link-quiet { color: var(--gold-dk); transition: color .3s var(--ease); }
.link-quiet:hover { color: var(--ink); }
.section--dark .link-quiet, .section--charcoal .link-quiet { color: var(--sand); }
.section--dark .link-quiet:hover, .section--charcoal .link-quiet:hover { color: var(--gold); }

/* ===== Inquire form on dark ===== */
.split--form { grid-template-columns: 0.82fr 1.18fr; align-items: start; }
@media (max-width: 900px){ .split--form { grid-template-columns: 1fr; } }

.form-panel--dark { background: var(--charcoal); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--gold); padding: clamp(1.75rem, 3.5vw, 3rem); }
/* Put the form first on mobile (lead capture), keep it right on desktop */
@media (max-width: 900px){ .split--form .inquire-form { order: -1; } }
.form-panel--dark .eyebrow { color: var(--sand); }
.form-panel--dark .field label { color: rgba(232,226,221,0.85); }
.form-panel--dark .field input,
.form-panel--dark .field select,
.form-panel--dark .field textarea {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: var(--cream);
}
.form-panel--dark .field input::placeholder,
.form-panel--dark .field textarea::placeholder { color: rgba(232,226,221,0.42); }
.form-panel--dark .field input:focus,
.form-panel--dark .field select:focus,
.form-panel--dark .field textarea:focus { border-color: var(--gold); }
.form-panel--dark select option { color: #14161a; }
.form-panel--dark .consent { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); }
.form-panel--dark .consent label { color: rgba(232,226,221,0.86); }
.form-panel--dark .consent a { color: var(--sand); }
.form-panel--dark .form__fineprint { color: rgba(232,226,221,0.6); }
.form-panel--dark .form__fineprint a { color: var(--sand) !important; }

/* Callout on dark sections */
.section--charcoal .callout, .section--dark .callout, .section--slate .callout {
  background: rgba(255,255,255,0.05); border-left-color: var(--gold); color: rgba(232,226,221,0.85); }

/* ===== Headings on LIGHT backgrounds get more weight (thin didone is hard to read) ===== */
.section--cream :is(h1,h2,h3,h4),
.section--white :is(h1,h2,h3,h4),
.section--sand  :is(h1,h2,h3,h4),
.prose h1, .prose h2 { font-weight: 600; }
.section--cream .display-lg .italic,
.section--white .display-lg .italic,
.section--sand  .display-lg .italic { font-weight: 600; }

/* ===== Inquire form as a light, elevated card ===== */
.form-panel--light { background: var(--white); border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold); box-shadow: var(--shadow); padding: clamp(1.75rem, 3.5vw, 3rem); }
.form-panel--light .field input,
.form-panel--light .field select,
.form-panel--light .field textarea { background: #faf8f4; border-color: rgba(20,22,26,0.18); }
.form-panel--light .field input:focus,
.form-panel--light .field select:focus,
.form-panel--light .field textarea:focus { border-color: var(--gold); background: var(--white); }
.form-panel--light .consent { background: var(--cream); }

/* ===== Legal / prose polish ===== */
.page-hero .legal-meta { color: rgba(232,226,221,0.72); margin-top: 0.75rem; }
.prose { max-width: 720px; }
.prose h2 { margin: 2.4rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.prose h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 0.5rem; }
.prose h3 { color: var(--gold-dk); }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li { margin-bottom: 0.55rem; }
.prose li::marker { color: var(--sand); }
.toc { border: 1px solid var(--hairline); background: var(--white); padding: 1.5rem 1.75rem; border-left: 3px solid var(--gold); }
.legal-return { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }