/* ============================================================
   Luxury Pool Renovations Melbourne — global.css
   Clamp-first fluid design system. Custom CSS only. No Tailwind.

   Brand direction: "matches their Rolex" — deep marine ink,
   champagne gold, serif display type (Cormorant Garamond),
   quiet letterspaced sans chrome (Jost), generous whitespace.

   The six brand colours live in :root and nowhere else —
   every tint/alpha variant is a color-mix() off a token.

   Header + mobile-menu system is the battle-tested production
   pattern — read the comments before "simplifying" anything;
   several rules exist to prevent specific visual glitches.
   ============================================================ */

/* ---- Fonts ------------------------------------------------- */
/* Display serif for headings + large statements; geometric sans
   for body and letterspaced UI chrome. Swap families here only. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

/* ---- Design tokens ----------------------------------------- */
:root {
  color-scheme: light;

  /* Brand colours — the only hex values in the file */
  --brand:     #14333e;   /* deep marine ink (structure, dark tints) */
  --brand-dark:#0d242d;   /* hover/darkened brand */
  --brand-2:   #8f7434;   /* dark gold — focus rings, small accents on light */
  --accent:    #b08c3e;   /* champagne gold — CTAs, rules, markers */
  --accent-2:  #d8bc7e;   /* pale gold — accents on dark backgrounds */
  --bg:        #f7f4ed;   /* warm ivory page background (never pure #fff) */
  --surface:   #ffffff;   /* cards, header pill */
  --ink:       #101d26;   /* near-black text, tinted toward the marine hue */
  --ink-2:     #0a141b;   /* darkest marine — dark sections + footer */
  --muted:     #4e5c64;   /* secondary text */

  /* Derived — do not add new hex values below this line */
  --line:      color-mix(in srgb, var(--brand) 14%, transparent);
  --line-gold: color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-ink: color-mix(in srgb, var(--brand) 70%, black);
  --shadow:    0 24px 80px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  --shadow-s:  0 6px 24px color-mix(in srgb, var(--shadow-ink) 10%, transparent);

  /* Unified photo grade — every content photo (hero video, banner, parallax
     bands, inline shots) shares this exact filter so the site reads as one
     consistent, intentional look rather than raw, mismatched source images. */
  --photo-filter: saturate(0.87) contrast(1.05) brightness(1.02) sepia(0.07);

  /* Layout — tight radii read as precision, not friendliness */
  --radius:    4px;
  --radius-l:  10px;
  --max:       1200px;
  --header-h:  76px;      /* approximate; used for scroll-padding */

  /* Motion — one signature spring everywhere keeps the site feeling
     coherent. Long durations + this curve = smooth, never sluggish. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — fluid 375px -> 1440px, expressive feel
     (generated by clamp.mjs — rerun it, never hand-edit) */
  --step--1: clamp(0.8125rem, 0.7685rem + 0.188vw, 0.9375rem); /* 13->15px  Caption / small text */
  --step-0: clamp(1rem, 0.934rem + 0.282vw, 1.1875rem); /* 16->19px  Body text */
  --step-1: clamp(1.125rem, 1.015rem + 0.469vw, 1.4375rem); /* 18->23px  Lead paragraph / h4 */
  --step-2: clamp(1.3125rem, 1.1144rem + 0.845vw, 1.875rem); /* 21->30px  H3 / card heading */
  --step-3: clamp(1.6875rem, 1.3134rem + 1.596vw, 2.75rem); /* 27->44px  H2 / section heading */
  --step-4: clamp(2.125rem, 1.4648rem + 2.817vw, 4rem); /* 34->64px  H1 */
  --step-5: clamp(2.625rem, 1.6567rem + 4.131vw, 5.375rem); /* 42->86px  Hero headline */

  /* Spacing scale — fluid 375px -> 1440px, generous maxes
     (generated by clamp.mjs) */
  --space-3xs: clamp(0.25rem, 0.206rem + 0.188vw, 0.375rem); /* 4->6px */
  --space-2xs: clamp(0.5rem, 0.412rem + 0.376vw, 0.75rem); /* 8->12px */
  --space-xs: clamp(0.75rem, 0.662rem + 0.376vw, 1rem); /* 12->16px */
  --space-s: clamp(1rem, 0.868rem + 0.563vw, 1.375rem); /* 16->22px */
  --space-m: clamp(1.5rem, 1.2359rem + 1.127vw, 2.25rem); /* 24->36px */
  --space-l: clamp(2rem, 1.6479rem + 1.502vw, 3rem); /* 32->48px */
  --space-xl: clamp(3rem, 2.4718rem + 2.254vw, 4.5rem); /* 48->72px */
  --space-2xl: clamp(4rem, 3.1197rem + 3.756vw, 6.5rem); /* 64->104px */
  --space-3xl: clamp(6rem, 4.5915rem + 6.009vw, 10rem); /* 96->160px */

  font-family: var(--font-ui);
}

/* ---- Resets ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Fixed header: without this, in-page anchors scroll underneath it */
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  min-width: 320px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---- Accessibility ----------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Keyboard focus ring — visible, on-brand, never on mouse clicks */
:focus-visible {
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Kill decorative motion for users who ask; layout stays identical */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Typography -------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); line-height: 1.3; }

p {
  font-size: var(--step-0);
  line-height: 1.75;
  margin: 0 0 1em;
  color: var(--muted);
  overflow-wrap: break-word;
}
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--step-1); line-height: 1.65; font-weight: 300; }

strong { color: var(--ink); font-weight: 500; }
small { font-size: var(--step--1); }

em { font-style: italic; }

/* ---- Layout helpers ---------------------------------------- */
/* width: min(...) instead of padding-inline keeps gutters out of the
   box entirely — full-bleed children don't need negative margins */
.container {
  width: min(var(--max), calc(100% - clamp(1.5rem, 5vw, 4rem) * 2));
  margin-inline: auto;
}
/* margin-inline: auto is needed here too, not just on .container — the
   Stone section nests this on its own div (so its pullquote can break out
   to the full .container width below), and without its own auto margins
   it sits flush left instead of centering itself. */
.container--narrow { max-width: 820px; margin-inline: auto; }

.section { padding-block: var(--space-3xl); }

.section--alt { background: var(--surface); }

/* Dark marine sections — headings ivory, gold accents */
.section--dark { background: var(--ink-2); }
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: color-mix(in srgb, white 96%, transparent); }
.section--dark p  { color: color-mix(in srgb, white 68%, transparent); }
.section--dark strong { color: color-mix(in srgb, white 92%, transparent); }
.section--dark .section-tag { color: var(--accent-2); }
.section--dark .section-tag::before,
.section--dark .section-tag::after { background: var(--line-gold); }
.section--dark .stat-row { border-color: color-mix(in srgb, white 16%, transparent); }
.section--dark .stat-num { color: color-mix(in srgb, white 96%, transparent); }
.section--dark .stat-label { color: color-mix(in srgb, white 60%, transparent); }
.section--dark .btn-ghost {
  color: color-mix(in srgb, white 92%, transparent);
  border-color: var(--accent-2);
}
.section--dark .btn-ghost:hover { background: var(--accent-2); color: var(--ink-2); }

/* Gold-shine text — reserved for a few key words inside headings on dark
   backgrounds; the metallic gradient needs a dark surface behind it to read. */
.text-gold-shine {
  background: linear-gradient(rgb(179, 142, 44) 0%, rgb(179, 142, 44) 45%, rgb(212, 175, 55) 55%, rgb(248, 230, 148) 60%, rgb(212, 175, 55) 65%, rgb(179, 142, 44) 75%, rgb(179, 142, 44) 100%) text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: rgba(240, 214, 140, 0.2) 0px 2px 6px;
}

/* Centered gold hairline — the signature divider detail */
.rule-gold {
  width: 64px;
  height: 1px;
  background: var(--accent);
  border: none;
  margin: var(--space-m) auto;
}

/* ---- Buttons ------------------------------------------------ */
/* Letterspaced uppercase, near-square corners — precision, not bounce */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: clamp(0.85rem, 1.8vw, 1.05rem) clamp(1.7rem, 3.4vw, 2.5rem);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform 450ms var(--ease-spring), box-shadow 450ms var(--ease-spring), background 450ms ease, color 450ms ease;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--ink-2);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 82%, white);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}

.btn-secondary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--brand) 22%, transparent);
}
.btn-secondary:hover {
  background: var(--brand-dark);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--brand) 32%, transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--accent);
}
.btn-ghost:hover { background: var(--accent); color: var(--ink-2); }

.btn-ghost-white {
  background: transparent;
  color: #fff;
  border: 1px solid color-mix(in srgb, white 70%, transparent);
}
.btn-ghost-white:hover {
  background: color-mix(in srgb, white 14%, transparent);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* ============================================================
   HEADER — floating glass pill, fixed and centered
   ============================================================ */
.site-header {
  position: fixed;
  z-index: 50;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), var(--max));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  padding: 0.65rem clamp(1rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, white 80%, transparent);
  border-radius: var(--radius-l);
  box-shadow: 0 14px 50px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: top 180ms ease, box-shadow 180ms ease;
}
/* JS adds .scrolled past ~30px — the pill tucks up and deepens its shadow */
.site-header.scrolled {
  top: 8px;
  box-shadow: 0 12px 42px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.site-brand img { height: clamp(40px, 6vw, 52px); width: auto; }
.site-brand-word {
  font-family: var(--font-ui);
  font-size: clamp(0.68rem, 0.85vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.site-brand-word span { display: block; color: var(--brand-2); font-weight: 400; letter-spacing: 0.3em; }
@media (max-width: 420px) { .site-brand-word { display: none; } }

/* ---- Desktop nav ------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 1vw, 0.3rem);
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.55rem clamp(0.6rem, 1.2vw, 0.95rem);
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.85vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: var(--radius);
  transition: background 280ms ease, color 280ms ease;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link[aria-current] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--brand-2);
}

/* Header CTA */
.header-cta { flex-shrink: 0; }
.header-cta .btn { padding: 0.75rem 1.4rem; }

/* ---- Hamburger (JS toggles .open) --------------------------- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 120ms;
}
.hamburger:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hamburger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 250ms, opacity 250ms;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE MENU — full-screen overlay, JS-driven open/close.
   Never a checkbox hack: JS owns aria-expanded/aria-hidden,
   the body scroll lock, `inert` on the page behind, focus
   return, and the animated close. See menu.js.

   display toggling is load-bearing: going display:none ->
   rendered restarts the link entrance animations on every open,
   for free. The .closing class keeps the panel rendered while
   the exit animation plays; JS removes it on animationend.
   ============================================================ */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;              /* under the header pill so the X stays visible */
  flex-direction: column;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 55%, var(--ink-2)) 0%,
    var(--ink-2) 100%
  );
  padding:
    clamp(6.5rem, 16vw, 8rem)
    clamp(1.5rem, 5vw, 3rem)
    max(2rem, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.mobile-menu.open,
.mobile-menu.closing { display: flex; }
.mobile-menu.open    { animation: menu-in 320ms var(--ease-spring) both; }
.mobile-menu.closing { animation: menu-out 280ms ease both; }

@keyframes menu-in  { from { opacity: 0; } }
/* Panel lifts away as it fades — a plain quick fade reads as a blink */
@keyframes menu-out { to   { opacity: 0; transform: translateY(-2.5%); } }

/* Links stagger in; set --i per link in the markup (0, 1, 2, ...)
   Large serif — the menu itself is a luxury moment */
.mobile-menu a {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  font-weight: 500;
  padding: 0.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
  opacity: 0;
  transform: translateX(-20px);
  animation: menu-link 250ms forwards;
  animation-delay: calc(120ms + var(--i, 0) * 45ms);
}
.mobile-menu a:hover { color: var(--accent-2); }

@keyframes menu-link {
  to { opacity: 1; transform: translateX(0); }
}

/* Menu foot pinned to the bottom — CTA button on the left, contact
   notes stacked on the right. Wraps at very narrow widths. */
.mobile-menu-foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.mobile-menu-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, white 55%, transparent);
  text-align: right;
}
.mobile-menu-contact strong {
  color: var(--accent-2);
  font-weight: 500;
}

/* `.mobile-menu a` outspecifies `.btn` — restore button appearance.
   (Real specificity collision found in production; keep this.) */
.mobile-menu .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  border-bottom: none;
}
.mobile-menu .btn-primary,
.mobile-menu .btn-primary:hover { color: var(--ink-2); }

/* ---- Hero — full-screen looping video ----------------------- */
.hero {
  position: relative;
  /* 100vh first as a fallback for browsers without svh support, then
     100svh — always the true visible viewport, never short of full-bleed. */
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Unify the stock aerial footage with the rest of the site's photography
     grade — slightly desaturated, warmed, lifted — instead of raw footage
     color. transform is owned by JS (parallax drift); scale(1.16) here is
     the resting state: a touch of extra zoom so the frame reads full-bleed
     with no letterboxing, and gives the more pronounced drift room to move
     without ever revealing an edge. */
  filter: var(--photo-filter);
  transform: scale(1.16);
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--ink-2) 76%, transparent) 0%,
    color-mix(in srgb, var(--ink-2) 48%, transparent) 55%,
    color-mix(in srgb, var(--ink-2) 80%, transparent) 100%
  );
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(1rem, 4vw, 2rem);
  max-width: 980px;
  color: #fff;
}
/* Eyebrow: hairline-framed small caps — quieter and more expensive
   than a filled pill */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  color: var(--accent-2);
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1.1vw, 0.82rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: clamp(24px, 4vw, 48px);
  height: 1px;
  background: var(--line-gold);
}
.hero h1 {
  color: #fff;
  font-size: var(--step-5);
  line-height: 1.05;
  font-weight: 500;
  /* pure-black text-shadow is deliberate — legibility over video */
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}
.hero-sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, white 88%, transparent);
  line-height: 1.7;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.hero-sub .sep { color: var(--accent-2); padding-inline: 0.5em; }
.hero-actions {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 60%, transparent);
}

/* Entrance choreography — plays once on load, pure CSS (no JS, no FOUC
   since global.css is render-blocking). Each hero element rises in on its
   own beat rather than the whole hero appearing at once. Reduced-motion
   users get the global override (0.01ms), landing instantly at end state. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow, .hero h1, .hero-sub, .hero-actions, .hero-note {
  opacity: 0;
  animation: hero-rise 900ms var(--ease-spring) both;
}
.hero-eyebrow { animation-delay: 150ms; }
.hero h1      { animation-delay: 300ms; }
.hero-sub     { animation-delay: 520ms; }
.hero-actions { animation-delay: 680ms; }
.hero-note    { animation-delay: 820ms; }

/* ---- Section header ------------------------------------------ */
.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* Gold small-caps tag framed by hairlines */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1vw, 0.78rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--brand-2);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem);
}
.section-tag::before,
.section-tag::after {
  content: "";
  width: clamp(20px, 3vw, 40px);
  height: 1px;
  background: var(--line-gold);
}
.section-header h2 { margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem); }
.section-header p { max-width: 58ch; margin-inline: auto; }

/* ---- Stat row — the positioning numbers ---------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-l) var(--space-m);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-l);
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums; /* steady digit width while counting up */
}
.stat-num sup { font-size: 0.5em; color: var(--accent); }
.stat-label {
  margin-top: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Gold-marked list ----------------------------------------- */
.list-gold { display: flex; flex-direction: column; gap: var(--space-xs); }
.list-gold li {
  position: relative;
  padding-left: 2em;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--muted);
}
.list-gold li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.section--dark .list-gold li { color: color-mix(in srgb, white 72%, transparent); }
.section--dark .list-gold li::before { color: var(--accent-2); }

/* ---- Pull quote ------------------------------------------------ */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.pullquote cite {
  display: block;
  margin-top: var(--space-s);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: clamp(0.7rem, 1vw, 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.section--dark .pullquote { color: color-mix(in srgb, white 92%, transparent); }
.section--dark .pullquote cite { color: var(--accent-2); }

/* ---- Full-bleed image banner ----------------------------------- */
.banner {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3xl);
}
.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  /* Resting state for the JS scroll parallax (menu.js) — scaled up so the
     drift never reveals an edge outside the frame. */
  transform: scale(1.14);
  will-change: transform;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  /* A touch of gold in the overlay ties this full-bleed moment to the
     same warm grade as the rest of the photography, not just a flat
     dark tint. */
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ink-2) 78%, transparent) 0%,
    color-mix(in srgb, var(--ink-2) 68%, transparent) 55%,
    color-mix(in srgb, var(--accent) 22%, var(--ink-2) 78%) 100%
  );
}
.banner .container { position: relative; z-index: 1; }
.banner .pullquote { color: color-mix(in srgb, white 94%, transparent); font-size: var(--step-3); }
.banner .pullquote cite { color: var(--accent-2); }
.banner .banner-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-l);
}

/* ---- Craft trio — numbered editorial columns -------------------- */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30vw, 300px), 1fr));
  gap: var(--space-xl) var(--space-l);
}
.craft-item {
  border-top: 1px solid var(--line-gold);
  padding-top: var(--space-m);
}
.craft-num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}
.craft-item h3 { margin-bottom: var(--space-xs); }
.craft-item p { font-size: clamp(0.9rem, 1.1vw, 1rem); }

/* ---- Parallax band — full-bleed photography, no card, no frame -----
   The site's main pacing device: a full-width photograph on its own,
   immediately followed by a text section (see .prose below). Deliberately
   NOT paired side-by-side with text — the whole point is that a viewer
   slows down for one uninterrupted photograph, then reads. Shares the
   hero/banner's scroll-linked drift (menu.js queries this selector) and
   the same unified grade filter as every other photo on the site. */
.parallax-band {
  position: relative;
  height: clamp(360px, 55vw, 640px);
  overflow: hidden;
}
.parallax-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transform: scale(1.14); /* resting state for the JS parallax drift */
  will-change: transform;
}

/* ---- Inline framed photo — a supporting shot inside a text section,
   deliberately NOT full-bleed/parallax (an overhead, symmetrical shot
   like the stone coping detail reads oddly when it drifts). Static,
   framed, same unified photo grade as every other image on the site. */
.inline-photo {
  position: relative;
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.inline-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--photo-filter);
}
/* A real element, not ::before — .frame-corners already owns ::before/::after
   on this same figure for its gold corner brackets. */
.inline-photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ink-2) 22%, transparent) 0%,
    color-mix(in srgb, var(--ink-2) 4%, transparent) 60%,
    color-mix(in srgb, var(--accent) 16%, var(--ink-2) 12%) 100%
  );
}

/* ---- Photo block — a regular (non-parallax, non-full-bleed) photo with
   a caption underneath, sitting inline within a prose column. Same
   unified photo grade and tint as every other image on the site. */
.photo-block {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
/* The tint overlay must be scoped to just the image — .photo-block-media is
   its own positioned box sized to the image only. Previously the overlay
   was inset:0 on the whole <figure> (image + caption combined, since only
   the image was out of flow); a position:absolute sibling paints AFTER
   in-flow content in the same stacking context regardless of DOM order, so
   it sat on top of the figcaption too, washing out its text to near-
   unreadable contrast. */
.photo-block-media { position: relative; }
.photo-block img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--photo-filter);
}
.photo-block-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ink-2) 20%, transparent) 0%,
    color-mix(in srgb, var(--ink-2) 2%, transparent) 60%,
    color-mix(in srgb, var(--accent) 14%, var(--ink-2) 10%) 100%
  );
}
/* Always a dark bar with light text, regardless of the section's own
   background — a caption needs to read the same everywhere. */
.photo-block figcaption {
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.6;
  color: color-mix(in srgb, white 82%, transparent);
  background: var(--ink-2);
  text-align: left;
}

/* ---- Prose — centered heading, left-aligned reading column ----------
   The original site's biggest legibility mistake was centering full
   paragraphs at a wide measure. Tag + h2 stay centered (matches
   .section-header elsewhere); body copy, lists and any CTA left-align
   within the same narrow centered column instead. */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 680px;
  margin-inline: auto;
  margin-top: var(--space-m);
  text-align: left;
}
.prose .list-gold { margin-top: var(--space-2xs); }
.prose .btn { align-self: flex-start; margin-top: var(--space-xs); }

/* Signature motif — inset gold corner brackets. Reserved now for framed
   moments that aren't full-bleed (the banner quote) — inset so it never
   collides with overflow:hidden clipping. */
.frame-corners { position: relative; }
.frame-corners::before,
.frame-corners::after {
  content: "";
  position: absolute;
  width: clamp(28px, 4vw, 44px);
  height: clamp(28px, 4vw, 44px);
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}
.frame-corners::before {
  top: 14px;
  left: 14px;
  border-top: 1.5px solid var(--accent-2);
  border-left: 1.5px solid var(--accent-2);
}
.frame-corners::after {
  bottom: 14px;
  right: 14px;
  border-bottom: 1.5px solid var(--accent-2);
  border-right: 1.5px solid var(--accent-2);
}

/* ---- Suburb cloud ------------------------------------------------ */
.suburbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em 0;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.suburbs li {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.suburbs li::after {
  content: "\00B7";           /* interpunct */
  color: var(--accent);
  padding-inline: 0.55em;
  font-weight: 400;
}
.suburbs li:last-child::after { display: none; }
.suburbs-note {
  text-align: center;
  margin-top: var(--space-m);
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Enquiry: qualifying panel + form ---------------------------- */
.enquiry-grid {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .enquiry-grid { grid-template-columns: 1fr; } }

.notice-panel {
  background: var(--ink-2);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.notice-panel h3 {
  color: color-mix(in srgb, white 96%, transparent);
  margin-bottom: var(--space-s);
}
.notice-panel > p { color: color-mix(in srgb, white 68%, transparent); font-size: clamp(0.9rem, 1.1vw, 1rem); }
.notice-panel .list-gold { margin-top: var(--space-s); }
.notice-panel .list-gold li {
  color: color-mix(in srgb, white 72%, transparent);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}
.notice-panel .list-gold li::before { color: var(--accent-2); }
.notice-panel .notice-foot {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid color-mix(in srgb, white 10%, transparent);
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* ---- Forms ---------------------------------------------------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1rem);
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--space-s); }
.form-group label {
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: clamp(0.7rem, 1.3vw, 0.9rem) clamp(0.85rem, 1.5vw, 1.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: clamp(0.9rem, 1vw, 1rem);
  color: var(--ink);
  background: var(--surface);
  transition: border-color 120ms, box-shadow 120ms;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-hint {
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Callout replacing the old file-upload field — mailto can't carry
   attachments, so we invite the sender to attach photos themselves once
   their email app opens. */
.form-note {
  padding: var(--space-s) var(--space-m);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.6;
  color: var(--muted);
  margin-block: var(--space-s) var(--space-m);
}
.form-note strong { color: var(--ink); font-weight: 500; }

/* Acknowledgement checkboxes */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  cursor: pointer;
}
.check-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-item span {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.55;
  color: var(--muted);
}

/* Submit feedback — JS toggles these */
.form-status { display: none; margin-top: var(--space-s); font-weight: 500; }
.form-status.show { display: block; }
.form-status--ok    { color: var(--brand-2); }
.form-status--error { color: color-mix(in srgb, var(--accent) 40%, var(--ink)); }

/* ---- Footer ------------------------------------------------- */
.site-footer {
  background: var(--ink-2);
  color: color-mix(in srgb, white 85%, transparent);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.footer-logo { height: 72px; width: auto; margin-bottom: 1rem; }
.footer-tagline {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.7;
  color: color-mix(in srgb, white 55%, transparent);
  margin: 0;
  max-width: 34ch;
}
.footer-heading {
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1vw, 0.8rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-2);
  margin-bottom: 0.9rem;
}
.footer-links { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-links a,
.footer-links li {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: color-mix(in srgb, white 65%, transparent);
  transition: color 350ms ease;
}
.footer-links a:hover { color: var(--accent-2); }

.footer-bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, white 10%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: color-mix(in srgb, white 40%, transparent);
}
.footer-bottom a { color: color-mix(in srgb, white 55%, transparent); transition: color 350ms ease; }
.footer-bottom a:hover { color: var(--accent-2); }

/* ---- Scroll reveal (JS adds .visible via IntersectionObserver) -- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms var(--ease-spring), transform 700ms var(--ease-spring);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---- Layout breakpoints ------------------------------------------
   Media queries are for LAYOUT TOPOLOGY only (column collapse, nav
   swap) — never for resizing type or spacing; clamp() owns sizing. */
@media (max-width: 900px) {
  .site-nav, .header-cta { display: none; }
  .hamburger { display: flex; }
}

/* ---- Custom cursor --------------------------------------------
   Desktop, fine-pointer only (see menu.js — gated on `(hover: hover)
   and (pointer: fine)` and !prefers-reduced-motion). A plain OS cursor
   is left untouched everywhere else, including all form fields, so
   typing never fights the custom dot. */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width 260ms var(--ease-spring), height 260ms var(--ease-spring),
              background 260ms ease, border-color 260ms ease, opacity 200ms ease;
}
.cursor-dot.active { opacity: 1; }
.cursor-dot.hover {
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1.5px solid var(--accent-2);
}
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .hamburger { cursor: none; }
body.has-custom-cursor input,
body.has-custom-cursor textarea { cursor: text; }

/* ---- Utilities ----------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--space-2xs); }
.mt-2 { margin-top: var(--space-s); }
.mt-3 { margin-top: var(--space-m); }
.mb-0 { margin-bottom: 0; }