/* ==========================================================================
   LushLandscapes.nz — styles.css
   Version : 1.3.1
   Build   : 2026-07-30
   Notes   : Single stylesheet. Mobile-first. No frameworks, no build step.
             Edit the tokens in :root to reskin the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Greens. Carried over from the original LushLandscapes.nz palette:
          warmer and more olive than a cold blue-green, which is what makes
          the moss photography sit naturally against them. ---- */
  --ink:          #08110b;
  --forest-900:   #0d1f0f;   /* --forest  */
  --forest-800:   #162b18;   /* --canopy  */
  --forest-700:   #1e3d22;   /* --moss    */
  --forest-600:   #2a5430;   /* --fern    */
  --moss-500:     #3d6b43;
  --sage-400:     #a8b8a2;   /* --mist    */

  /* ---- Gold ---- */
  --gold-600:     #a88a35;
  --gold-500:     #c9a84c;
  --gold-400:     #dcc06d;
  --gold-300:     #e8d08a;

  /* ---- Amber. The rust in the beech leaves on the moss photograph.
          Used sparingly: it is the one warm note that stops the palette
          reading as a single green wash. ---- */
  --amber:        #b5631a;
  --amber-soft:   #d08243;

  /* ---- Earthy neutrals ---- */
  --clay:         #b0805c;
  --bone:         #faf6ee;   /* --cream     */
  --bone-dim:     #f0e9d6;   /* --parchment */
  --paper:        #faf6ee;
  --stone:        #8c8779;

  /* ---- Semantic ---- */
  --bg:           var(--forest-900);
  --bg-alt:       var(--forest-800);
  --text:         #f0e9d6;                    /* warm parchment, not grey */
  --text-dim:     rgba(240, 233, 214, 0.72);
  --text-faint:   rgba(240, 233, 214, 0.48);
  --rule:         rgba(201, 168, 76, 0.22);
  --rule-soft:    rgba(240, 233, 214, 0.13);

  --ok:           #7FBF95;
  --warn:         #E3B455;
  --err:          #E58B7B;

  /* ---- Type ----
     Jost is a geometric sans in the Futura lineage. It reads as a design
     studio rather than a software interface, which a neutral UI face like
     Inter does not. Cormorant Garamond carries the headings. ---- */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Hoefler Text", "Times New Roman", serif;
  --font-body:    "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.80vw, 2.05rem);
  --step-3:  clamp(1.90rem, 1.60rem + 1.50vw, 2.95rem);
  --step-4:  clamp(2.40rem, 1.85rem + 2.75vw, 4.20rem);
  --step-5:  clamp(2.90rem, 2.00rem + 4.50vw, 5.60rem);

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;
  --sp-8: 7rem;

  --wrap:      min(1200px, 100% - 2.5rem);
  --wrap-slim: min(760px, 100% - 2.5rem);

  --radius:    2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.75);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.45s;

  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 300;          /* Jost reads best light; it has generous counters */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
  color: var(--bone);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: 0; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-400); text-decoration-color: rgba(216, 188, 128, 0.35); text-underline-offset: 3px; }
a:hover { color: var(--gold-300); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.15rem; }
li { margin-bottom: 0.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-5) 0;
}

::selection { background: var(--gold-500); color: var(--forest-900); }

/* Focus — always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 999;
  background: var(--gold-400);
  color: var(--forest-900);
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: var(--forest-900); }

/* THE [hidden] GUARD — do not remove.

   The browser's own stylesheet says [hidden] { display: none }, but that is a
   user-agent rule, so ANY rule of ours that sets `display` beats it. .btn is
   display:inline-flex, so `button.hidden = true` in JavaScript set the
   attribute and the button stayed on screen anyway. That is exactly what made
   the quiz's "Next" button sit there on the final question doing nothing —
   it had been hidden, but only in the DOM, not to the eye.

   This one rule makes hidden actually mean hidden for every element on the
   site. It needs !important because several component rules match with the
   same specificity and would otherwise win on source order.

   If you ever need an element that is [hidden] but still laid out, give it a
   class and toggle that instead — do not weaken this. */
[hidden] { display: none !important; }

.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;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap      { width: var(--wrap); margin-inline: auto; }
.wrap-slim { width: var(--wrap-slim); margin-inline: auto; }

.section        { padding-block: var(--sp-7); position: relative; }
.section--tight { padding-block: var(--sp-6); }
.section--flush-top { padding-top: 0; }

.section--alt   { background: var(--forest-800); }
.section--deep  { background: var(--ink); }
.section--teal  { background: linear-gradient(160deg, var(--forest-700), var(--forest-900) 70%); }
.section--paper { background: var(--paper); color: var(--forest-800); }

.section--paper h1, .section--paper h2, .section--paper h3, .section--paper h4 { color: var(--forest-800); }
.section--paper a { color: var(--gold-600); }
.section--paper .eyebrow { color: var(--gold-600); }
.section--paper .lede { color: rgba(16, 36, 26, 0.75); }

@media (min-width: 800px) {
  .section        { padding-block: var(--sp-8); }
  .section--tight { padding-block: var(--sp-7); }
}

.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .split--wide-left  { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
}

.stack > * + * { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold-500);
  vertical-align: middle;
  margin-right: 0.8em;
  opacity: 0.8;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-dim);
  font-weight: 300;
  max-width: 60ch;
}

.muted  { color: var(--text-dim); }
.faint  { color: var(--text-faint); }
.gold   { color: var(--gold-400); }
.serif  { font-family: var(--font-display); }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }
.center .eyebrow::before { display: none; }

.measure { max-width: 62ch; }

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  font-style: italic;
  color: var(--bone);
  border-left: 2px solid var(--gold-500);
  padding-left: var(--sp-4);
  margin: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;           /* touch target */
  padding: 0.9rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: var(--gold-500);
  color: var(--forest-900);
  border-color: var(--gold-500);
}
.btn--gold:hover { background: var(--gold-300); border-color: var(--gold-300); color: var(--forest-900); }

.btn--outline {
  background: transparent;
  color: var(--bone);
  border-color: rgba(233, 228, 216, 0.35);
}
.btn--outline:hover { border-color: var(--gold-400); color: var(--gold-300); }

.btn--dark {
  background: var(--forest-700);
  color: var(--bone);
  border-color: var(--forest-600);
}
.btn--dark:hover { background: var(--forest-600); color: var(--gold-300); }

.btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
  letter-spacing: 0.08em;
  padding-inline: 1rem;
}
.btn--ghost:hover { color: var(--gold-300); }

/* 44px is the minimum comfortable touch target. Most of this site's traffic
   arrives by phone from a QR code or business card, so even the "small"
   button stays thumb-sized. */
.btn--sm { min-height: 44px; padding: 0.6rem 1.2rem; font-size: 0.76rem; }
.btn--lg { min-height: 60px; padding: 1.1rem 2.4rem; }
.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--forest-900);
  animation: spin 0.7s linear infinite;
}
.btn--outline.is-busy::after, .btn--dark.is-busy::after { color: var(--bone); }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 27, 20, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-scrolled { background: rgba(8, 17, 13, 0.96); border-bottom-color: var(--rule); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

/* ---- Logo lockup ----
   The real LushLandscapes.nz mark (gold roots-and-branches) sits above the
   wordmark. The mark is a transparent PNG keyed from the original artwork,
   so it works on any background. The name is set in Cormorant with
   "Landscapes" italic and ".nz" in gold — the .nz is part of the business
   name, not a stray web address. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--bone);
  padding: 0.4rem 0;
}
.brand__logo {
  width: 46px;
  height: auto;
  flex: none;
  /* The artwork is wider than it is tall; a little optical lift centres it
     against the cap height of the wordmark. */
  margin-top: -2px;
}
@media (min-width: 980px) { .brand__logo { width: 54px; } }

/* Stacked version — used large, e.g. in the footer. */
.brand--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.brand--stack .brand__logo { width: 78px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--gold-500);
  white-space: nowrap;
  line-height: 1;
}
.brand__name em { font-style: italic; }
.brand__name .tld { color: var(--gold-500); opacity: 0.72; }

@media (min-width: 980px) {
  .brand__name { font-size: 1.6rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  color: var(--bone);
  min-height: 44px;
  padding: 0 0.9rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-toggle__bars { display: block; width: 17px; }
.nav-toggle__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  margin: 4px 0;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- Narrow phones ----
   The header row needs about 380px to lay out: the logo, the wordmark
   (which must not wrap — "LushLandscapes.nz" is the business name, not a
   phrase), and the menu button. Anything narrower than that and the button
   was pushed past the right edge of the screen, which also made the whole
   page scroll sideways. 360px Android handsets and the iPhone SE both hit
   this.

   So below 430px: tighten the lockup, and hide the word "Menu" rather than
   the button. The bars alone read as a menu, and .visually-hidden keeps the
   text for screen readers, so the button still announces itself as
   "Menu" / "Close" — display:none would have stripped that. */
@media (max-width: 430px) {
  .brand { gap: 0.5rem; }
  .brand__logo { width: 36px; }
  .brand__name { font-size: 1.2rem; letter-spacing: 0.03em; }

  /* 17px of bars + 0.9rem padding each side keeps the tap target at ~46px,
     comfortably over the 44px minimum. */
  .nav-toggle { padding: 0 0.9rem; gap: 0; }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Mobile drawer */
.nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--forest-900);
  padding: var(--sp-4) 1.25rem var(--sp-6);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* WHY THIS EXISTS — do not delete the backdrop-filter overrides below.

   .site-header uses backdrop-filter for the frosted effect. A backdrop-filter
   (like transform and filter) makes an element a CONTAINING BLOCK for any
   position:fixed descendant. .nav is fixed and lives inside the header, so its
   `inset: var(--header-h) 0 0 0` was being measured against the 68px-tall
   header rather than the viewport — collapsing the drawer to almost no height.
   The menu opened, but you had to scroll inside a sliver to find the links.

   Dropping the filter while the menu is open hands the drawer back to the
   viewport, where it belongs. Nothing is lost visually: the drawer is opaque
   and covers everything below the header anyway, so there is no longer any
   page content behind the header to blur. The solid background replaces what
   the translucent one was doing.

   body.is-locked is already toggled by initNav in scripts.js, so this needs
   no extra JavaScript. */
body.is-locked .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--forest-900);
}

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.nav__list > li:last-child { border-bottom: 0; }

.nav__list a:not(.btn) {
  display: block;
  padding: 1.05rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.nav__list a:not(.btn):hover { color: var(--gold-400); padding-left: 0.6rem; }
.nav__list a[aria-current="page"] { color: var(--gold-400); }

.nav__cta { padding-top: var(--sp-4); }
.nav__cta .btn { width: 100%; }

@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    overflow: visible;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__list { display: flex; align-items: center; gap: 0.35rem; }
  .nav__list > li { border-bottom: 0; }
  .nav__list a:not(.btn) {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0.55rem 0.85rem;
    position: relative;
  }
  .nav__list a:not(.btn):hover { color: var(--bone); padding-left: 0.85rem; }
  .nav__list a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0.85rem; right: 0.85rem; bottom: 0.25rem;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .nav__list a:not(.btn):hover::after,
  .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
  .nav__cta { padding-top: 0; margin-left: 0.6rem; }
  .nav__cta .btn { width: auto; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--sp-7) var(--sp-6);
  background: var(--forest-900);
  overflow: hidden;
}

/* ---- Full-bleed photographic hero ----
   The moss photograph carries the whole opening. Two overlays sit on top:
   a vertical gradient so the text always has something dark beneath it,
   and a slight green wash so the image belongs to the palette rather than
   fighting it. Text legibility never depends on which part of the photo
   happens to be behind it. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* The photograph is atmosphere, not the subject. Held well back so the
     headline never has to fight it — moss is high-frequency detail and
     serif type sitting directly on it becomes unreadable very quickly. */
  filter: saturate(1.02) brightness(0.72) contrast(1.02);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Legibility comes from the horizontal gradient, not from flattening the
     whole photograph. The left third is held dark enough for white serif
     type; the right side is left alone so the moss can actually be seen. */
  background:
    linear-gradient(90deg, rgba(13,31,15,0.94) 0%, rgba(13,31,15,0.88) 28%,
                           rgba(13,31,15,0.45) 55%, rgba(13,31,15,0.10) 80%,
                           transparent 100%),
    linear-gradient(180deg, rgba(13,31,15,0.75) 0%, rgba(13,31,15,0.10) 24%,
                            rgba(13,31,15,0.20) 70%, rgba(13,31,15,0.72) 100%);
}

/* Headline gets its own soft shadow as a final safety net, so legibility
   survives swapping in a different (possibly lighter) photograph later. */
.hero__title,
.hero .lede { text-shadow: 0 2px 24px rgba(8, 17, 11, 0.7); }

.hero__inner { position: relative; z-index: 2; }

/* Scroll cue — small, unobtrusive, hidden once the visitor has moved. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: opacity 0.4s var(--ease);
}
.hero__cue i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold-500), transparent);
}
.is-scrolled ~ main .hero__cue { opacity: 0; }

@media (max-width: 700px) {
  .hero__cue { display: none; }
  .hero__media img { object-position: center 58%; }
}

.hero__title {
  font-size: var(--step-5);
  margin-bottom: var(--sp-4);
  max-width: 16ch;
}
.hero__title em {
  font-style: italic;
  color: var(--gold-400);
}
.hero .lede { max-width: 52ch; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero--page {
  min-height: 0;
  align-items: center;
  padding-block: var(--sp-6) var(--sp-6);
}
.hero--page .hero__title { font-size: var(--step-4); max-width: 20ch; }

/* --------------------------------------------------------------------------
   8. MEDIA PLACEHOLDERS
   Replace a .media block with a real <img> — see HTML comments.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, var(--forest-700), var(--forest-700) 55%, var(--forest-800));
  border: 1px solid var(--rule-soft);
  color: var(--text-faint);
}
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(233,228,216,0.03) 0 1px, transparent 1px 12px);
}
.media > img { width: 100%; height: 100%; object-fit: cover; }

.media__label {
  position: relative;
  z-index: 1;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
  border: 1px dashed rgba(233, 228, 216, 0.22);
  border-radius: var(--radius);
  line-height: 1.6;
}

.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 2 / 3; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--forest-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card:hover { border-color: var(--rule); transform: translateY(-3px); }

.card__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold-500);
  line-height: 1;
  margin-bottom: var(--sp-3);
  display: block;
}
.card__title { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card__body  { color: var(--text-dim); font-size: 0.95rem; margin: 0; }
.card__link  {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
}
.card__link::after { content: " →"; }

.card--icon .card__icon {
  width: 36px; height: 36px;
  color: var(--gold-500);
  margin-bottom: var(--sp-3);
}

/* Service / price cards */
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--forest-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.price-card:hover { transform: translateY(-4px); border-color: var(--rule); }

.price-card--featured {
  background: linear-gradient(170deg, var(--forest-700), var(--forest-800) 70%);
  border-color: var(--gold-600);
  box-shadow: var(--shadow-md);
}
/* No scale() here. The featured card is the FIRST card in the grid, so
   scaling it would push it past the grid's left edge and break the page's
   left margin. The gold border, dark fill and flag mark it out well enough. */

.price-card__flag {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold-500);
  color: var(--forest-900);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.42rem 1rem;
  white-space: nowrap;
  border-radius: var(--radius);
}

.price-card__name { font-size: var(--step-2); margin-bottom: var(--sp-1); }
.price-card__for  {
  font-size: var(--step--1);
  color: var(--gold-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.price-card__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--bone);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.price-card__price sup { font-size: 0.42em; top: -1.1em; position: relative; color: var(--text-faint); }
.price-card__gst { font-size: 0.78rem; color: var(--text-faint); margin-bottom: var(--sp-4); }

.price-card__desc {
  color: var(--text-dim);
  font-size: 0.95rem;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule-soft);
}

.tick-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--gold-500);
  border-bottom: 1.5px solid var(--gold-500);
  transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; }

/* Add-ons */
.addon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.addon:last-child { border-bottom: 0; }
.addon__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--bone); }
.addon__desc { flex: 1 1 100%; color: var(--text-dim); font-size: 0.9rem; order: 3; margin: 0; }
.addon__price { color: var(--gold-400); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

/* --------------------------------------------------------------------------
   10. PROCESS
   -------------------------------------------------------------------------- */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process__item {
  position: relative;
  padding-left: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-left: 1px solid var(--rule);
  margin: 0;
}
.process__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.process__item::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 0.25rem 0;
  line-height: 1;
}
.section--alt .process__item::before { background: var(--forest-800); }
.process__title { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.process__body { color: var(--text-dim); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   11. PORTFOLIO
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  color: var(--text-dim);
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-btn:hover { color: var(--bone); border-color: var(--rule); }
.filter-btn[aria-pressed="true"] {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--forest-900);
}

.project-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--forest-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.project-card:hover { border-color: var(--rule); transform: translateY(-4px); }
.project-card:hover .media { filter: brightness(1.12); }
.project-card .media { transition: filter var(--dur) var(--ease); border: 0; border-radius: 0; }

/* Real photographs in project cards. A fixed 4:3 crop keeps a mixed set of
   photos, plan scans and renders sitting on a tidy grid. */
.project-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--forest-700);
  transition: transform 0.6s var(--ease), filter var(--dur) var(--ease);
}
.project-card:hover > img { transform: scale(1.035); filter: brightness(1.06); }

.project-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 0.5rem; }
.project-card__cat {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.project-card__title { font-size: var(--step-1); margin: 0; }
.project-card__meta { font-size: 0.86rem; color: var(--text-faint); margin: 0; }
.project-card__desc { font-size: 0.93rem; color: var(--text-dim); margin: 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.tag {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--rule-soft);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
}

.privacy-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--forest-800);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold-500);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: 0.92rem;
  color: var(--text-dim);
}
.privacy-note svg { width: 22px; height: 22px; color: var(--gold-500); flex: none; margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--forest-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
}
.testimonial__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--gold-600);
  opacity: 0.6;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--bone);
  margin: 0;
}
.testimonial__cite {
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: auto;
}
.testimonial--placeholder { border-style: dashed; }

/* --------------------------------------------------------------------------
   13. CTA BANDS
   -------------------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(46, 29, 51, 0.55), transparent 60%),
    linear-gradient(155deg, var(--forest-700), var(--forest-900));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cta-band__inner {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr auto; gap: var(--sp-6); }
}
.cta-band h2 { margin-bottom: var(--sp-2); }

.quiz-cta {
  border: 1px solid var(--gold-600);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(194,161,90,0.10), transparent 60%), var(--forest-800);
  padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 800px) { .quiz-cta { padding: var(--sp-6); } }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form { margin: 0; }

.fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) 0 0;
}
.fieldset:first-of-type { border-top: 0; padding-top: 0; }
.fieldset > legend {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--bone);
  padding: 0 0 var(--sp-1);
  margin-bottom: var(--sp-3);
  width: 100%;
}
.fieldset__hint {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: -0.4rem 0 var(--sp-4);
  max-width: 62ch;
}

.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.field > label,
.field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.55rem;
}
.req { color: var(--gold-400); margin-left: 0.15em; }
.opt {
  color: var(--text-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 0.4em;
  font-size: 0.85em;
}

.field__hint {
  display: block;
  font-size: 0.84rem;
  color: var(--text-faint);
  margin: -0.25rem 0 0.55rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--forest-900);
  border: 1px solid rgba(233, 228, 216, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;   /* 16px min — stops iOS zoom-on-focus */
  line-height: 1.5;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 150px; resize: vertical; }

.input::placeholder, .textarea::placeholder { color: rgba(233, 228, 216, 0.32); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(233, 228, 216, 0.3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold-400);
  background: var(--ink);
  outline: 2px solid var(--gold-400);
  outline-offset: 1px;
}

.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23D8BC80' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.75rem;
  cursor: pointer;
}
.select option { background: var(--forest-800); color: var(--text); }

/* Error state — never colour alone: icon + text + border + aria */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--err); }
.field.has-error .input:focus,
.field.has-error .textarea:focus { outline-color: var(--err); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--err);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0.5rem 0 0;
  font-weight: 500;
}
.field__error::before {
  content: "!";
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.field__error[hidden] { display: none; }

/* Checkbox / radio rows */
.check-grid { display: grid; gap: var(--sp-2); }
@media (min-width: 620px) { .check-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--forest-900);
  border: 1px solid rgba(233, 228, 216, 0.16);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 56px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.check:hover { border-color: rgba(216, 188, 128, 0.45); }

.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.check__box {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid rgba(233, 228, 216, 0.4);
  border-radius: var(--radius);
  position: relative;
  transition: all 0.2s var(--ease);
}
.check input[type="radio"] ~ .check__box { border-radius: 50%; }

.check__box::after {
  content: "";
  position: absolute;
  left: 6px; top: 3px;
  width: 7px; height: 12px;
  border-right: 2px solid var(--forest-900);
  border-bottom: 2px solid var(--forest-900);
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: all 0.2s var(--ease);
}
.check input:checked ~ .check__box { background: var(--gold-500); border-color: var(--gold-500); }
.check input:checked ~ .check__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.check input:checked ~ .check__text { color: var(--bone); }
.check:has(input:checked) { border-color: var(--gold-500); background: rgba(194, 161, 90, 0.07); }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--gold-400); outline-offset: 3px; }

.check__text { display: flex; flex-direction: column; gap: 0.2rem; color: var(--text-dim); }
.check__name { font-weight: 600; font-size: 0.96rem; color: var(--text); }
.check__meta { font-size: 0.84rem; color: var(--text-faint); }

/* Honeypot — must stay invisible to humans, reachable to bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Form status banner */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: var(--sp-4);
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-status[hidden] { display: none; }
.form-status::before {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.form-status--ok  { border-color: var(--ok);  background: rgba(127, 191, 149, 0.10); color: var(--ok); }
.form-status--ok::before  { content: "✓"; }
.form-status--err { border-color: var(--err); background: rgba(229, 139, 123, 0.10); color: var(--err); }
.form-status--err::before { content: "!"; }
.form-status--busy { border-color: var(--warn); background: rgba(227, 180, 85, 0.10); color: var(--warn); }
.form-status--busy::before { content: "…"; line-height: 15px; }
.form-status strong { display: block; color: inherit; }
.form-status span { color: var(--text-dim); display: block; }

.form-card {
  background: var(--forest-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
@media (min-width: 800px) { .form-card { padding: var(--sp-6); } }

/* --------------------------------------------------------------------------
   15. QUIZ
   -------------------------------------------------------------------------- */
.quiz { position: relative; }

.quiz__progress {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(12, 27, 20, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule-soft);
}
.quiz__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}
.quiz__progress-meta strong { color: var(--gold-400); font-weight: 600; }

.progress-track {
  height: 2px;
  background: rgba(233, 228, 216, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transition: width 0.45s var(--ease);
}

/* Each step is a <fieldset>, so the browser's default border, padding and
   legend positioning all have to be cleared. The <legend> itself stays in
   the markup — it is what gives the radio/checkbox group its accessible
   name — but is hidden visually, because the <h2> beside it already shows
   the same question on screen. */
.quiz-step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.quiz-step > legend {
  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;
}
.quiz-step.is-active { display: block; animation: fade-up 0.45s var(--ease) both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.quiz-step__head { margin-bottom: var(--sp-4); }
.quiz-step__q { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.quiz-step__help { color: var(--text-dim); font-size: 0.95rem; margin: 0; }

/* Image picker */
.pick-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .pick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pick-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.pick-grid--2up { grid-template-columns: 1fr; }
@media (min-width: 620px) { .pick-grid--2up { grid-template-columns: repeat(2, 1fr); } }

.pick {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid rgba(233, 228, 216, 0.16);
  border-radius: var(--radius);
  background: var(--forest-800);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pick:hover { border-color: rgba(216, 188, 128, 0.5); transform: translateY(-2px); }

.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.pick__art {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--forest-700), var(--forest-700) 60%, var(--forest-800));
  color: var(--sage-400);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.pick__art svg { width: 52%; height: 52%; }
.pick__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pick__label {
  display: block;
  padding: 0.85rem 0.9rem;
  border-top: 1px solid var(--rule-soft);
}
.pick__name { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.pick__desc { display: block; font-size: 0.8rem; color: var(--text-faint); margin-top: 0.25rem; line-height: 1.45; }

.pick__tick {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 228, 216, 0.45);
  background: rgba(8, 17, 13, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease);
}
.pick__tick::after {
  content: "";
  width: 6px; height: 11px;
  border-right: 2px solid var(--forest-900);
  border-bottom: 2px solid var(--forest-900);
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  margin-top: -3px;
  transition: all 0.25s var(--ease);
}

.pick:has(input:checked) { border-color: var(--gold-500); }
.pick:has(input:checked) .pick__art { color: var(--gold-400); background: linear-gradient(150deg, var(--forest-600), var(--forest-700) 60%, var(--forest-700)); }
.pick:has(input:checked) .pick__tick { background: var(--gold-500); border-color: var(--gold-500); }
.pick:has(input:checked) .pick__tick::after { opacity: 1; transform: rotate(45deg) scale(1); }
.pick:has(input:checked) .pick__name { color: var(--bone); }

.pick input:focus-visible ~ .pick__art { outline: 2px solid var(--gold-400); outline-offset: -3px; }

.quiz__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
}
.quiz__nav .btn--gold { margin-left: auto; }
@media (max-width: 560px) {
  .quiz__nav { flex-wrap: wrap; }
  .quiz__nav .btn { flex: 1 1 100%; }
  .quiz__nav .btn--gold { order: -1; margin-left: 0; }
}

.quiz__error {
  color: var(--err);
  font-size: 0.9rem;
  font-weight: 500;
  margin: var(--sp-3) 0 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.quiz__error[hidden] { display: none; }
.quiz__error::before {
  content: "!";
  flex: none;
  width: 17px; height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Quiz result */
.quiz-result { display: none; }
.quiz-result.is-active { display: block; animation: fade-up 0.5s var(--ease) both; }

.result-hero {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(194,161,90,0.12), transparent 55%), var(--forest-800);
  margin-bottom: var(--sp-5);
}
@media (min-width: 800px) { .result-hero { padding: var(--sp-6); } }
.result-hero__label {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--sp-3);
}
.result-hero__name { font-size: var(--step-4); margin-bottom: var(--sp-2); }
.result-hero__price { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold-400); margin-bottom: var(--sp-3); }
.result-hero__why { color: var(--text-dim); max-width: 56ch; margin-inline: auto; }

.score-row { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
@media (min-width: 700px) { .score-row { grid-template-columns: repeat(3, 1fr); } }
.score {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: var(--forest-900);
}
.score.is-top { border-color: var(--gold-500); }
.score__name { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5rem; }
.score__val { font-family: var(--font-display); font-size: var(--step-2); color: var(--bone); line-height: 1; }
.score.is-top .score__val { color: var(--gold-400); }
.score__track { height: 3px; background: rgba(233,228,216,0.14); margin-top: 0.7rem; border-radius: 2px; overflow: hidden; }
.score__fill { height: 100%; width: 0; background: var(--gold-500); transition: width 0.8s var(--ease); }

.answer-review { border-top: 1px solid var(--rule); padding-top: var(--sp-4); margin-top: var(--sp-5); }
.answer-review dl { display: grid; gap: var(--sp-3); margin: 0; }
@media (min-width: 700px) { .answer-review dl { grid-template-columns: 1fr 1.4fr; } }
.answer-review dt {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.2rem;
}
.answer-review dd { margin: 0 0 var(--sp-2); color: var(--text); }
@media (min-width: 700px) { .answer-review dd { margin-bottom: 0; } }

/* --------------------------------------------------------------------------
   16. UPLOAD ZONES
   -------------------------------------------------------------------------- */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  border: 1.5px dashed rgba(233, 228, 216, 0.28);
  border-radius: var(--radius-lg);
  background: var(--forest-900);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dropzone:hover { border-color: var(--gold-500); background: rgba(194, 161, 90, 0.05); }
.dropzone.is-dragover {
  border-color: var(--gold-400);
  border-style: solid;
  background: rgba(194, 161, 90, 0.12);
  transform: scale(1.008);
}
.dropzone:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.dropzone input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.dropzone__icon { width: 34px; height: 34px; color: var(--gold-500); }
.dropzone__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--bone); margin: 0; }
.dropzone__hint  { font-size: 0.86rem; color: var(--text-faint); margin: 0; max-width: 44ch; }
.dropzone__browse {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.file-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.file-list:empty { margin: 0; }

.file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.65rem 0.75rem;
  background: var(--forest-800);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin: 0;
  animation: fade-up 0.3s var(--ease) both;
}
.file-item.is-invalid { border-color: var(--err); background: rgba(229, 139, 123, 0.08); }

.file-item__thumb {
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--forest-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow: hidden;
}
.file-item__thumb svg { width: 20px; height: 20px; }

.file-item__meta { flex: 1 1 auto; min-width: 0; }
.file-item__name {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item__sub { display: block; font-size: 0.78rem; color: var(--text-faint); }
.file-item.is-invalid .file-item__sub { color: var(--err); }

.file-item__remove {
  flex: none;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.file-item__remove:hover { border-color: var(--err); color: var(--err); }

.upload-progress { margin-top: var(--sp-3); }
.upload-progress[hidden] { display: none; }
.upload-progress__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-6) var(--sp-4);
  font-size: 0.92rem;
}
.footer__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-6); } }

.footer__title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
/* Plain items (e.g. "New Zealand wide") must sit at the same weight as the
   links beside them, or they read as emphasised for no reason. */
.footer__list li { margin-bottom: 0.6rem; color: var(--text-dim); }
.footer__list a { color: var(--text-dim); text-decoration: none; transition: color 0.25s var(--ease); }
.footer__list a:hover { color: var(--gold-300); }

.footer__brand .brand { margin-bottom: var(--sp-3); }
.footer__blurb { color: var(--text-dim); max-width: 38ch; margin: 0; font-size: 0.92rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8rem;
  color: var(--text-faint);
}
.footer__bottom p { margin: 0; }

/* The build stamp used to be printed here for visitors to see. It is now an
   HTML comment in each page instead — developer metadata does not belong on
   a client-facing footer. This rule is kept in case you ever want it back:
   restore <p class="footer__version">Site v… · …</p> in the footer. */
.footer__version { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; opacity: 0.75; }

/* --------------------------------------------------------------------------
   18. THANK YOU PAGE
   -------------------------------------------------------------------------- */
.thanks {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: var(--sp-7);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(15, 61, 58, 0.5), transparent 65%),
    var(--forest-900);
}
.thanks__seal {
  width: 78px; height: 78px;
  margin: 0 auto var(--sp-4);
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}
.thanks__seal svg { width: 34px; height: 34px; }

.next-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; text-align: left; display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .next-steps { grid-template-columns: repeat(3, 1fr); } }
.next-steps li {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin: 0;
  background: var(--forest-800);
}
.next-steps strong { display: block; color: var(--gold-400); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; }
.next-steps span { color: var(--text-dim); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   19. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* If JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. NO-JS FALLBACKS
   -------------------------------------------------------------------------- */
.no-js .js-only { display: none !important; }
.nojs-note {
  display: none;
  background: rgba(227, 180, 85, 0.12);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--sp-3);
  color: var(--warn);
  font-size: 0.9rem;
  margin-bottom: var(--sp-4);
}
.no-js .nojs-note { display: block; }
.no-js .quiz-step { display: block; }        /* show all questions as a plain form */
.no-js .quiz__progress { display: none; }

/* A hairline used in place of a section heading — gives a section its top
   edge without adding words. Short and centred so it reads as ornament. */
.section-rule {
  width: 120px;
  height: 1px;
  margin: 0 auto var(--sp-6);
  background: linear-gradient(to right, transparent, var(--gold-600), transparent);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   GARDEN STYLE CARD  —  the fun half of the quiz result.
   Sits above the package recommendation on purpose. Kept quieter than the
   gold-bordered result hero below it, so the eye still lands on the
   recommendation second rather than competing with it.
   -------------------------------------------------------------------------- */
.style-card {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(201,168,76,0.07), transparent 70%);
}
.style-card__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 var(--sp-2);
}
.style-card__name {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.05;
  margin: 0 0 var(--sp-3);
  color: var(--bone);
}
.style-card__blurb {
  max-width: 54ch;
  margin: 0 auto;
  color: var(--text-dim);
  line-height: 1.7;
}

/* The name arrives a beat after the card, which is the whole moment of the
   thing. Anyone who has asked for reduced motion just gets it immediately. */
.quiz-result.is-revealed .style-card__name {
  animation: style-pop 0.55s var(--ease) both;
}
@keyframes style-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-result.is-revealed .style-card__name { animation: none; }
}

/* --------------------------------------------------------------------------
   21. TERMS PAGE
   A numbered clause list. The numbers come from a CSS counter, so inserting
   or removing a clause renumbers the rest on its own — never type clause
   numbers into terms.html by hand.
   -------------------------------------------------------------------------- */
.terms {
  counter-reset: clause;
  list-style: none;
  margin: 0;
  padding: 0;
}
.terms > li {
  counter-increment: clause;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: var(--sp-5);
}
.terms > li::before {
  content: counter(clause);
  position: absolute;
  left: 0;
  top: 0.08em;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-600);
  opacity: 0.7;
}
.terms > li h2 {
  font-size: var(--step-1);
  margin: 0 0 var(--sp-2);
}
.terms > li p {
  max-width: 62ch;
  margin-bottom: 0.9rem;
}
.terms > li p:last-child,
.terms > li ul:last-child { margin-bottom: 0; }

/* .tick-list carries a big bottom margin for the pricing cards. Inside a
   clause it just leaves a hole, so match the paragraph rhythm instead. */
.terms > li .tick-list { margin-bottom: 0.9rem; }

@media (max-width: 560px) {
  .terms > li { padding-left: 2.4rem; }
}

/* .tick-list is coloured for dark panels (--text-dim is near-white). On the
   paper background that is all but invisible, so restore a readable ink. */
.section--paper .tick-list li { color: rgba(16, 36, 26, 0.78); }

/* Crosses instead of ticks, for "what we don't do". Built from two gradients
   so it needs no icon font and inherits the gold like the tick does. */
.tick-list--cross li::before {
  width: 11px;
  height: 11px;
  top: 0.45em;
  border: 0;
  transform: none;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--gold-600) 44%, var(--gold-600) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--gold-600) 44%, var(--gold-600) 56%, transparent 56%);
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .btn, .quiz__nav, .filters { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3, h4 { color: #111; }
}