/* ==========================================================================
   Signature Finish Group — Fine Painting & Finishes, Camberwell
   site.css — one stylesheet, no build step, no framework.

   01. Design tokens        07. Motion system
   02. Reset & base         08. Components
   03. Typography           09. Forms
   04. Layout primitives    10. Footer
   05. Buttons & links      11. Utilities
   06. Header & navigation  12. Reduced motion & print
   ========================================================================== */

/* 01. Design tokens ------------------------------------------------------ */
:root {
  /* Surfaces — near-black, warm-shifted so gold sits naturally on it */
  --ink-900: #060505;
  --ink-800: #0c0a09;   /* page canvas */
  --ink-700: #131010;   /* alternating band */
  --ink-600: #1c1917;   /* card / raised surface */
  --ink-500: #262220;   /* hover surface */
  --line:    #2a2422;   /* hairline */
  --line-2:  #3b322c;   /* hairline, emphasised */

  /* Ink on dark. Two ratios are given: against the page canvas (--ink-800) and
     against the lightest surface text lands on (--ink-600 cards). The second is
     the one that binds — a token safe only on the canvas will fail the moment
     the same text is put inside a card. */
  --paper:   #fafaf9;   /* headings            19.0:1 / 16.4:1 */
  --paper-2: #e7e5e4;   /* body copy           15.7:1 / 13.6:1 */
  --muted:   #a8a29e;   /* secondary copy       7.8:1 /  6.9:1 */
  --muted-2: #8f8882;   /* tertiary / captions  5.7:1 /  5.0:1 */

  /* Accent — gold. --gold carries text and hairlines (8.4:1 on canvas).
     --gold-deep is fill-only and never carries small text. */
  --gold:      #c9a45b;
  --gold-2:    #e4c88e;
  --gold-deep: #a16207;

  --danger: #f7a5a0;
  --ok:     #86e0b6;

  /* Type */
  /* Playfair Display for the voice, Instrument Sans for the work. Instrument
     ships 400-700 only — nothing in the body face may ask for 300. */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --t-display: clamp(2.9rem, 7.4vw, 6.25rem);
  --t-h1:      clamp(2.3rem, 5.2vw, 4.1rem);
  --t-h2:      clamp(1.9rem, 3.6vw, 3rem);
  --t-h3:      clamp(1.3rem, 1.9vw, 1.7rem);
  --t-lead:    clamp(1.0625rem, 1.5vw, 1.3rem);
  --t-body:    1.0625rem;   /* 17px — never below 16px on mobile */
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-eyebrow: 0.75rem;

  /* Spacing — 4pt rhythm */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --container: 1240px;
  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --header-h: 68px;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);      /* decelerate — arriving */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);   /* accelerate — leaving */
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  /* Layering. The header outranks the overlay on purpose: the menu's own close
     button lives in the header, so an overlay painted on top of it would leave
     the menu with no visible way out. */
  --z-sticky: 40; --z-overlay: 70; --z-header: 80; --z-toast: 100;

  color-scheme: dark;
}

@media (min-width: 900px) { :root { --header-h: 84px; } }

/* 02. Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets and keyboard focus clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  background: var(--ink-800);
  color: var(--paper-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--ink-700); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 1px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold-deep); color: #fff; }
hr { border: 0; border-top: 1px solid var(--line); }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: var(--z-toast);
  transform: translateY(-120%);
  background: var(--gold);
  color: var(--ink-900);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.85rem 1.25rem;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* 03. Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--paper);
  text-wrap: balance;
}

.display { font-size: var(--t-display); font-weight: 300; line-height: 0.98; letter-spacing: -0.028em; }
h1, .h1 { font-size: var(--t-h1); font-weight: 300; }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-weight: 500; }

p { text-wrap: pretty; overflow-wrap: anywhere; }
p + p { margin-top: 1.1em; }

/* 400, not 300: Instrument Sans has no light. Softness comes from --muted and
   the wider line-height instead of a weight the face cannot render. */
.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--muted); font-weight: 400; max-width: 58ch; }
.measure { max-width: var(--measure); }
.muted { color: var(--muted); }
.dim { color: var(--muted-2); }

/* Eyebrow — small gold label with a leading rule.
   Also used on real <h2>s where a section needs a heading in the outline but
   only an eyebrow visually, so it restates family and line-height. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  line-height: 1.4;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-5);
}
.eyebrow::before { content: ''; width: 2.25rem; height: 1px; background: currentColor; opacity: 0.7; flex: none; }

.italic-accent { font-style: italic; color: var(--gold); font-weight: 300; }

.prose > * + * { margin-top: 1.15em; }
.prose h3 { margin-top: 2em; }
.prose ul { padding-left: 1.15rem; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--gold); }

/* 04. Layout primitives -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1560px; }
.container-narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.band { background: var(--ink-700); }
.band-deep { background: var(--ink-900); }
.rule-top { border-top: 1px solid var(--line); }

.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Asymmetric editorial split: label column + content column */
.split { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split-narrow { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split-sticky > :first-child { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.is-centred { margin-inline: auto; text-align: center; }
.section-head.is-centred .eyebrow { justify-content: center; }

/* 05. Buttons & links ---------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.btn:hover { --btn-bg: var(--gold-2); --btn-bd: var(--gold-2); }
.btn:active { transform: translateY(1px); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--line-2); }
.btn-ghost:hover { --btn-bg: transparent; --btn-fg: var(--gold); --btn-bd: var(--gold); }

.btn-block { width: 100%; }
.btn[aria-disabled='true'], .btn:disabled { opacity: 0.45; pointer-events: none; }
.btn .btn-icon { transition: transform var(--dur) var(--ease); }
.btn:hover .btn-icon { transform: translateX(4px); }

/* Text link with an underline that draws in from the left */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 0.6rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 calc(100% - 0.55rem);
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--gold-2); }
.link .btn-icon { transition: transform var(--dur) var(--ease); }
.link:hover .btn-icon { transform: translateX(4px); }

.inline-link { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.inline-link:hover { color: var(--gold-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* 06. Header & navigation ------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.header.is-solid {
  background: rgba(12, 10, 9, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* Retreats on scroll-down, returns on scroll-up — never while a menu is open */
.header.is-hidden { transform: translateY(-100%); }

.header-inner {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  padding-block: 0.45rem;   /* lifts the wordmark's target past 24px */
}
.brand .brand-mark { color: var(--gold); font-style: italic; }
.brand .brand-sub {
  display: none;
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (min-width: 1100px) { .brand .brand-sub { display: inline; } }

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); } }

.nav a {
  position: relative;
  color: var(--paper-2);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding-block: 0.75rem;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.35rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--gold); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--gold); }
.nav a[aria-current='page']::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--s-4); }
.header-phone {
  display: none;
  color: var(--paper-2);
  text-decoration: none;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.header-phone:hover { color: var(--gold); }
@media (min-width: 1200px) { .header-phone { display: inline-flex; align-items: center; gap: 0.5rem; } }
.header .btn { display: none; }
@media (min-width: 1000px) { .header .btn { display: inline-flex; min-height: 46px; padding-inline: 1.35rem; } }

/* Menu toggle — 48×48 target, two rules that cross into an X */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-right: -12px;
  color: var(--paper);
  touch-action: manipulation;
}
@media (min-width: 1000px) { .menu-toggle { display: none; } }
.menu-toggle span { position: relative; display: block; width: 24px; height: 1.5px; background: currentColor; transition: background var(--dur-fast) var(--ease); }
.menu-toggle span::before, .menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-toggle[aria-expanded='true'] span { background: transparent; }
.menu-toggle[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink-900);
  padding: calc(var(--header-h) + 2rem) var(--gutter) max(2rem, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); }
.menu.is-open .menu-list li {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: calc(60ms * var(--i, 0) + 90ms);
}
.menu-list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.9rem, 2.6vw, 1.35rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  font-weight: 300;
  color: var(--paper);
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.menu-list a .idx { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--gold); opacity: 0.8; }
.menu-list a:hover, .menu-list a[aria-current='page'] { color: var(--gold); padding-left: 0.75rem; }
.menu-foot { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.menu-foot .btn { width: 100%; }

/* Mobile action bar — a phone-only decision, not a shrunk desktop element.
   On desktop the quote CTA lives in the header; on a phone that header CTA is
   hidden, so the same job is done by a thumb-height bar that arrives once the
   visitor has committed to reading. Two targets, both full-width, both reachable
   one-handed. */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(6, 5, 5, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.action-bar.is-shown { transform: none; }
.action-bar .btn { min-height: 48px; padding-inline: 0.75rem; font-size: 0.6875rem; letter-spacing: 0.1em; }
/* The full-screen menu carries its own CTAs — two competing bars is clutter. */
body.is-locked .action-bar { transform: translateY(110%); }
@media (min-width: 1000px) { .action-bar { display: none; } }

/* Reserve the bar's height up front so its arrival never covers the footer or
   shifts layout, and keep keyboard focus clear of it. */
@media (max-width: 999px) {
  body { padding-bottom: 84px; }
  html { scroll-padding-bottom: 96px; }
}

/* 07. Motion system ------------------------------------------------------ */
/* Reveals are opt-in: hidden only once JS confirms it can reveal them again.
   Without JS, or if the observer never fires, everything stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(70ms * var(--i, 0));
  /* Deliberately no will-change: a page can hold 40+ of these, and pre-promoting
     every one costs more on a low-end phone than the composite it saves. */
}
.js .reveal-left  { transform: translateX(-26px) translateY(0); }
.js .reveal-scale { transform: scale(0.965); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* The eyebrow's rule draws itself out from the left as the section arrives.
   A small thing, but it is what stops every section from being the same
   fade-up: the label builds, then the heading lands. */
.js .eyebrow.reveal::before,
.js .reveal .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--ease) 180ms;
}
.js .eyebrow.reveal.is-in::before,
.js .is-in .eyebrow::before { transform: scaleX(1); }

/* Line-by-line mask reveal for headlines */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; }
.js .line-mask > span {
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: calc(90ms * var(--i, 0));
}
.js .line-mask.is-in > span, .js .is-in .line-mask > span { transform: none; }

/* Image plate: the picture eases up out of a clipped frame */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plate > img { width: 100%; height: 100%; object-fit: cover; }
.js .plate > img { transform: scale(1.08); transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); opacity: 0; }
.js .plate.is-in > img { transform: scale(1); opacity: 1; }
.plate-4x3 { aspect-ratio: 4 / 3; }
.plate-3x2 { aspect-ratio: 3 / 2; }
.plate-1x1 { aspect-ratio: 1 / 1; }
.plate-4x5 { aspect-ratio: 4 / 5; }
.plate-tall { aspect-ratio: 3 / 4; }

/* Hero — pure CSS entrance, runs once on load */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 92svh;
  min-height: 92vh;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: -8% 0 -8% 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--ink-800) 2%, rgba(12,10,9,0.72) 38%, rgba(12,10,9,0.34) 70%, rgba(12,10,9,0.6) 100%),
    linear-gradient(to right, rgba(12,10,9,0.86) 0%, rgba(12,10,9,0.32) 58%, rgba(12,10,9,0.1) 100%);
}
.hero-inner { width: 100%; position: relative; }
.hero-title { max-width: 15ch; }
.hero-lead { margin-top: var(--s-6); max-width: 46ch; }
.hero-actions { margin-top: clamp(2rem, 4vw, 2.75rem); }

.js .hero-anim { opacity: 0; transform: translateY(22px); }
.js .hero-ready .hero-anim {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(110ms * var(--i, 0) + 180ms);
}
.js .hero-ready .line-mask > span { transform: none; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  right: 0; bottom: 0.35rem;
  display: none;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (min-width: 900px) { .scroll-cue { display: flex; } }
.scroll-cue i { display: block; width: 1px; height: 56px; background: linear-gradient(var(--gold), transparent); }
.scroll-cue i::after { content: ''; display: block; width: 1px; height: 16px; background: var(--gold-2); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(56px); opacity: 0; } }

/* Marquee — CSS only, duplicated track, pauses on hover/focus */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1.1rem, 2.4vw, 1.6rem); }
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: clamp(1.75rem, 4vw, 3.25rem); padding-right: clamp(1.75rem, 4vw, 3.25rem); }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 300;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 08. Components --------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--ink-500); transform: translateY(-4px); }
.card .icon { color: var(--gold); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }  /* whole card is the target */
.card:hover h3 { color: var(--gold); }
.card h3 { transition: color var(--dur) var(--ease); }
.card p { color: var(--muted); font-size: var(--t-sm); }
.card-index {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  opacity: 0.85;
}

/* Numbered feature row */
.numbered { display: grid; gap: var(--s-5); }
.numbered-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.numbered-item:last-child { border-bottom: 1px solid var(--line); }
.numbered-item .num {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  min-width: 2.5rem;
}
.numbered-item p { color: var(--muted); margin-top: var(--s-3); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;   /* no width jitter while counting */
}
.stat-value .suffix { color: var(--gold); font-size: 0.5em; }
.stat-label { margin-top: var(--s-3); font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); }

/* Pull quote */
.quote { border-left: 1px solid var(--gold); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.quote figcaption { margin-top: var(--s-5); font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); }
.quote figcaption strong { color: var(--gold); font-weight: 500; }

/* Accordion (native details/summary — keyboard and SR support for free) */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 56px;
  padding-block: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--paper);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gold); }
.accordion summary .chev { flex: none; color: var(--gold); transition: transform var(--dur) var(--ease); }
.accordion details[open] summary .chev { transform: rotate(45deg); }
.accordion .answer { padding-bottom: 1.5rem; color: var(--muted); max-width: 68ch; }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  touch-action: manipulation;
}
.chip:hover { color: var(--paper); border-color: var(--muted-2); }
.chip[aria-pressed='true'] { color: var(--ink-900); background: var(--gold); border-color: var(--gold); }

/* Project tiles */
.tile { position: relative; display: block; text-decoration: none; color: inherit; }
.tile .plate { transition: border-color var(--dur) var(--ease); }
.tile:hover .plate { border-color: var(--gold); }
.tile .plate > img { transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); }
.tile:hover .plate > img { transform: scale(1.05); }
.tile-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); }
.tile-meta h3 { font-size: 1.15rem; font-weight: 500; transition: color var(--dur) var(--ease); }
.tile:hover .tile-meta h3 { color: var(--gold); }
.tile-tag { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.tile p { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-2); }
.tile[hidden] { display: none; }
/* Held back behind "show all". display:none also stops the lazy image
   downloading, so a 40-tile gallery costs nothing until it is asked for. */
.tile.is-clipped { display: none; }
.tile:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 6px; }

/* Suburb list */
.suburbs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; }
.suburbs li { font-size: var(--t-sm); color: var(--muted); display: inline-flex; align-items: center; gap: var(--s-4); }
.suburbs li:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-deep); }

/* Contact detail rows */
.detail-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.detail-row:first-child { border-top: 1px solid var(--line); }
.detail-row .icon { color: var(--gold); margin-top: 0.2rem; }
.detail-row dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.detail-row dd { margin: 0.35rem 0 0; }
.detail-row a { color: var(--paper); text-decoration: none; transition: color var(--dur) var(--ease); }
.detail-row a:hover { color: var(--gold); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--ink-900); border-top: 1px solid var(--line); }
.cta-band::before {
  content: '';
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: radial-gradient(ellipse at 50% 100%, rgba(161, 98, 7, 0.16), transparent 62%);
  pointer-events: none;
}
.cta-band .container { position: relative; }

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  color: var(--muted);
}
.badge .icon { color: var(--gold); flex: none; }

.icon { flex: none; }

/* 09. Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.field .req { color: var(--gold); }
.field .hint { font-size: var(--t-xs); color: var(--muted-2); }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;                 /* ≥44px touch target */
  padding: 0.85rem 1rem;
  background: var(--ink-600);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--paper);
  font-size: 1rem;                  /* ≥16px stops iOS zoom-on-focus */
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 3rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: var(--ink-500); }

.field .error { display: none; align-items: center; gap: 0.5rem; font-size: var(--t-xs); color: var(--danger); }
.field.is-invalid .error { display: flex; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }

.error-summary {
  display: none;
  padding: var(--s-5);
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(247, 165, 160, 0.06);
}
.error-summary.is-shown { display: block; }
.error-summary h2 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 600; color: var(--danger); }
.error-summary ul { margin: var(--s-3) 0 0; padding-left: 1.15rem; font-size: var(--t-sm); }
.error-summary a { color: var(--danger); }

.form-status { display: none; padding: var(--s-5); border: 1px solid var(--ok); border-left-width: 3px; border-radius: var(--radius); background: rgba(134, 224, 182, 0.06); color: var(--paper); }
.form-status.is-shown { display: block; }
.form-status strong { color: var(--ok); }
.form-status.is-error { border-color: var(--danger); background: rgba(247, 165, 160, 0.06); }
.form-status.is-error strong { color: var(--danger); }

fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0 0 var(--s-4); font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }

.consent { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.consent input { width: 22px; height: 22px; min-height: 0; margin-top: 0.2rem; accent-color: var(--gold); flex: none; }

/* 10. Footer ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--ink-900); padding-block: clamp(3.5rem, 7vw, 6rem) var(--s-6); }
.footer-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.4fr; } }
.footer h3 { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--s-4); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer a { color: var(--paper-2); text-decoration: none; font-size: var(--t-sm); transition: color var(--dur) var(--ease); }
/* Footer links sit at ~19px of line box; the padding lifts them past the 24px
   pointer-target minimum without disturbing the column rhythm. */
.footer ul a, .footer-bottom a { display: inline-block; padding-block: 3px; }
.footer a:hover { color: var(--gold); }
.footer .brand { font-size: 1.6rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--muted-2);
}
.footer-bottom a { font-size: var(--t-xs); color: var(--muted-2); }
.social { display: flex; gap: var(--s-2); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social a:hover { color: var(--gold); border-color: var(--gold); }

/* 11. Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-centre { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.no-wrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--t-xs); color: var(--muted-2); list-style: none; padding: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--line-2); }

/* Page header (interior pages) */
.page-head { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem)); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* 12. Reduced motion & print --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .hero-anim { opacity: 1 !important; transform: none !important; }
  .js .line-mask > span { transform: none !important; }
  .js .plate > img { opacity: 1 !important; transform: none !important; }
  .js .eyebrow::before { transform: none !important; }
  .action-bar { transition: none; }
  .marquee-track { animation: none; }
  .scroll-cue i::after { animation: none; }
}

@media print {
  .header, .menu, .scroll-cue, .marquee, .cta-band, .social { display: none !important; }
  body { background: #fff; color: #111; }
  a { color: #111; }
}

/* --- Pointer-target top-ups (WCAG 2.2 SC 2.5.8, 24x24 minimum) ------------
   These sit at the end deliberately: each is a small correction measured on
   the built pages rather than a value guessed at design time. */
.crumbs a { display: inline-block; padding-block: 4px; }
.detail-row a { display: inline-block; padding-block: 2px; }
.consent input { width: 24px; height: 24px; }

/* --- Reviews -------------------------------------------------------------
   Not a card grid. Cards with five gold stars apiece is the house style of
   every review widget on the internet, and it reads as bolted on.
   Instead this reuses the page's own signature layout: the sticky label column
   from the intro and process sections, with the reviews stacked beside it and
   separated by hairlines — the same treatment as .numbered-item. The rating is
   stated once in the label column using the existing .stat-value component,
   rather than repeating a star row above every quote. */
.reviews { border-top: 1px solid var(--line); }

.review {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.review blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--paper);
  text-wrap: pretty;
}
/* Opening quote mark hung into the margin, so the first line of text still
   aligns to the column edge. */
.review blockquote::before {
  content: '\201C';
  float: left;
  margin-left: -0.42em;
  color: var(--gold);
  opacity: 0.75;
}
@media (max-width: 599px) {
  .review blockquote::before { float: none; margin-left: 0; }
}

.review figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-top: var(--s-5);
}
.review figcaption strong {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.review figcaption .when {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}

/* The rating, stated once. Sits in the label column beside the reviews. */
.rating { display: flex; align-items: baseline; gap: 0.75rem; }
.rating .stars { display: flex; gap: 3px; color: var(--gold); }
.rating .stars svg { width: 16px; height: 16px; flex: none; }

.reviews-source { font-size: var(--t-xs); color: var(--muted-2); letter-spacing: 0.06em; }

/* Compact proof line beside the quote form. Deliberately understated — it is
   reassurance at the moment of commitment, not a second headline. */
.quote-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-sm);
  color: var(--muted);
}
.quote-proof .stars { display: flex; gap: 2px; color: var(--gold); }
.quote-proof .stars svg { width: 14px; height: 14px; flex: none; }
.quote-proof strong { color: var(--paper); font-weight: 600; }