/* ==========================================================================
   Positive Singles New Zealand — design system
   PositiveSingles Blue × Aotearoa Freshness × Privacy × Human Connection
   ========================================================================== */

:root {
  --positive-blue: #2F98E5;
  --tasman-blue: #167FC2;
  --trust-navy: #173A59;
  --pacific-sky: #76C8F2;
  --alpine-mist: #EAF6FC;
  --snow-white: #F8FBFD;
  --pure-white: #FFFFFF;
  --cool-slate: #526978;
  --border-blue: #D6E8F2;
  --pounamu-teal: #2F9C93;

  --grad-primary: linear-gradient(135deg, #167FC2 0%, #2F98E5 55%, #76C8F2 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #EAF6FC 100%);

  --font-heading: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;

  --content-width: 1200px;
  --hero-width: 1280px;
  --prose-width: 720px;

  --radius-card: 18px;
  --radius-btn: 12px;

  --shadow-card: 0 1px 2px rgba(23, 58, 89, .05), 0 8px 24px rgba(23, 58, 89, .06);
  --shadow-card-hover: 0 2px 4px rgba(23, 58, 89, .06), 0 14px 32px rgba(23, 58, 89, .10);

  --space-section: clamp(56px, 8vw, 112px);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--trust-navy);
  background: var(--pure-white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tasman-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--positive-blue); }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--trust-navy);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(34px, 4.6vw, 52px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(21px, 2.2vw, 25px); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--positive-blue); }
strong { font-weight: 600; }
:focus-visible {
  outline: 3px solid var(--pacific-sky);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Utilities ---------- */
.container { max-width: var(--content-width); margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); }
.container--wide { max-width: var(--hero-width); }
.section { padding-block: var(--space-section); }
.section--mist { background: var(--alpine-mist); }
.section--snow { background: var(--snow-white); }
.section--gradient { background: var(--grad-surface); }
.prose { max-width: var(--prose-width); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tasman-blue);
  margin-bottom: 14px;
}
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head p { color: var(--cool-slate); font-size: 18px; }
.text-slate { color: var(--cool-slate); }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--trust-navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 28px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg { flex: none; }
.btn--primary { background: var(--positive-blue); color: #fff; }
.btn--primary:hover { background: var(--tasman-blue); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,127,194,.28); }
.btn--primary:active { transform: translateY(0); }
.btn--secondary { background: var(--pure-white); color: var(--tasman-blue); border-color: var(--border-blue); }
.btn--secondary:hover { border-color: var(--positive-blue); color: var(--tasman-blue); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--tasman-blue); }
.btn--white:hover { background: var(--alpine-mist); color: var(--tasman-blue); transform: translateY(-2px); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { border-color: #fff; color: #fff; }
.btn[disabled], .btn--disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border-blue); box-shadow: 0 4px 18px rgba(23,58,89,.06); }
.header-inner {
  max-width: var(--hero-width);
  margin-inline: auto;
  padding: 12px clamp(20px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  background: var(--grad-primary);
  display: grid; place-items: center;
  color: #fff;
}
.brand-text { line-height: 1; }
.brand-name {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--trust-navy);
  letter-spacing: -.035em;
}
.brand-name > span {
  display: inline-block;
  margin-left: .2em;
  padding: .16em .42em;
  border-radius: 999px;
  background: var(--alpine-mist);
  color: var(--tasman-blue);
  font-size: .72em;
  letter-spacing: .02em;
  vertical-align: .08em;
}
.brand-tag { display: none; }
button.nav-link { border: 0; background: none; cursor: pointer; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 9px;
  font-size: 14px; font-weight: 600;
  font-family: var(--font-heading);
  color: var(--trust-navy);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  min-height: 44px;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--tasman-blue); background: var(--alpine-mist); }
.nav-link .chev { transition: transform .18s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  box-shadow: var(--shadow-card-hover);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  color: var(--trust-navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.nav-dropdown a:hover { background: var(--alpine-mist); color: var(--tasman-blue); }
.nav-dropdown a span { display: block; font-size: 12.5px; color: var(--cool-slate); font-weight: 400; }
.header-cta { flex: none; }
.header-cta .btn { min-height: 44px; padding: 10px 18px; white-space: nowrap; font-size: 14px; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle svg { color: var(--trust-navy); }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #fff;
  overflow-y: auto;
  padding: 18px 20px 40px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-nav__close {
  width: 46px; height: 46px;
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--border-blue); }
.mobile-nav a.mnav-link, .mnav-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 6px;
  font-family: var(--font-heading);
  font-size: 17px; font-weight: 600;
  color: var(--trust-navy);
  text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left;
  min-height: 48px;
}
.mnav-toggle .chev { transition: transform .18s var(--ease); }
.mnav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mnav-sub { display: none; padding: 0 0 12px 14px; }
.mnav-sub.is-open { display: block; }
.mnav-sub a { display: block; padding: 11px 6px; color: var(--cool-slate); text-decoration: none; font-size: 16px; min-height: 44px; }
.mnav-sub a:hover { color: var(--tasman-blue); }
.mobile-nav .btn { width: 100%; margin-top: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(680px, calc(100svh - 76px), 900px);
  overflow: hidden;
  background: var(--trust-navy);
  isolation: isolate;
}
.hero-inner {
  max-width: var(--hero-width);
  min-height: inherit;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 32px);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; width: min(610px, 51%); }
.hero .eyebrow { color: #aee8ff; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.hero h1 { color: #fff; font-size: clamp(42px, 5.3vw, 68px); margin-bottom: 24px; text-shadow: 0 3px 24px rgba(0,0,0,.22); }
.hero-title { max-width: 620px; letter-spacing: -.045em; }
.hero-title__intro,
.hero-title__place { display: block; }
.hero-title__intro { font-size: .72em; letter-spacing: -.025em; margin-bottom: .08em; }
.hero-title__brand {
  position: relative;
  display: inline-block;
  color: #72d5ff;
  isolation: isolate;
}
.hero-title__brand::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em;
  right: -.06em;
  bottom: .06em;
  height: .22em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(51,170,230,.28), rgba(82,221,210,.52));
  transform: rotate(-1deg);
}
.hero-title__place { color: #fff; }
.hero-lead { font-size: clamp(17px, 1.6vw, 19px); color: rgba(255,255,255,.9); max-width: 560px; margin-bottom: 30px; text-shadow: 0 2px 16px rgba(0,0,0,.24); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0; }
.hero .btn--primary { box-shadow: 0 14px 34px rgba(0,116,190,.32); }
.hero-media {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
.hero-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,37,63,.94) 0%, rgba(8,37,63,.83) 35%, rgba(8,37,63,.35) 62%, rgba(8,37,63,.08) 100%),
    linear-gradient(180deg, rgba(8,37,63,.08), rgba(8,37,63,.28));
  pointer-events: none;
}
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Page hero (internal pages) ---------- */
.page-hero { background: var(--grad-surface); padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 72px); }
.page-hero h1 { font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 16px; }
.page-hero .lead { font-size: 18px; color: var(--cool-slate); max-width: 700px; margin-bottom: 0; }
.page-hero .eyebrow { margin-bottom: 10px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: 18px 0 0; font-size: 14px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--cool-slate); }
.breadcrumbs li + li::before { content: "/"; color: var(--border-blue); }
.breadcrumbs a { color: var(--cool-slate); text-decoration: none; }
.breadcrumbs a:hover { color: var(--tasman-blue); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--trust-navy); font-weight: 600; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
a.card-link:hover .card, .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card h3 { margin-bottom: 10px; }
.card h3 a { color: inherit; text-decoration: none; }
.card p { color: var(--cool-slate); font-size: 15.5px; margin-bottom: 0; }
.card .icon-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--alpine-mist);
  display: grid; place-items: center;
  color: var(--tasman-blue);
  margin-bottom: 18px;
}
.card .more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-weight: 600; font-size: 15px;
  color: var(--tasman-blue);
}
.card--flat { box-shadow: none; }

/* Photo cards (cities) */
.photo-card { padding: 0; overflow: hidden; }
.photo-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s var(--ease); }
a.card-link:hover .photo-card img { transform: scale(1.03); }
.photo-card .photo-card__body { padding: 22px 24px 26px; }
.photo-card .photo-card__body h3 { margin-bottom: 6px; }
.photo-card .photo-card__body p { font-size: 15px; }

/* ---------- Bento (explore by experience) ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bento__item {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--border-blue);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  display: block;
}
.bento__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.bento__item:focus-visible { outline: 3px solid var(--pacific-sky); outline-offset: 4px; }
.bento__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,58,89,0) 30%, rgba(23,58,89,.78) 100%);
}
.bento__label {
  position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2;
  color: #fff;
}
.bento__label h3 { color: #fff; font-size: 24px; margin-bottom: 4px; }
.bento__label p { color: rgba(255,255,255,.92); font-size: 15px; margin: 0; }
.bento__action {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(10,35,58,.16);
  color: var(--trust-navy);
  font-size: 14px;
  font-weight: 700;
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.bento__item:hover .bento__action,
.bento__item:focus-visible .bento__action {
  transform: translateX(3px);
  background: var(--tasman-blue);
  color: #fff;
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 800;
  color: var(--positive-blue);
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.step::after {
  content: "";
  position: absolute; top: 14px; left: 44px; right: -12px;
  height: 2px;
  background: var(--border-blue);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { color: var(--cool-slate); font-size: 15.5px; margin: 0; }

/* ---------- Navy trust section ---------- */
.navy-section { background: var(--trust-navy); color: #fff; }
.navy-section h2, .navy-section h3 { color: #fff; }
.navy-section .eyebrow { color: var(--pacific-sky); }
.navy-section p { color: rgba(255,255,255,.82); }
.navy-section .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.navy-section .card h3 { color: #fff; font-size: 19px; }
.navy-section .card p { color: rgba(255,255,255,.78); font-size: 15px; }
.navy-section .card .icon-tile { background: rgba(118,200,242,.16); color: var(--pacific-sky); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad-primary); border-radius: 26px; padding: clamp(40px, 6vw, 72px); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 28px; font-size: 17px; }
.cta-band .disclosure { font-size: 13px; color: rgba(255,255,255,.75); margin: 18px auto 0; max-width: 520px; }
.cta-band--full { border-radius: 0; }
.cta-section { padding: 0; margin: 0; }
/* Every page ends with the same CTA structure. Flatten its section and
   container so the colour band reaches both viewport edges like the home CTA. */
.section:has(> .container > .cta-band) {
  padding: 0;
  margin: 0;
}
.section:has(> .container > .cta-band) > .container {
  width: 100%;
  max-width: none;
  padding: 0;
}
.section:has(> .container > .cta-band) .cta-band { border-radius: 0; }

/* ---------- FAQ accordion ---------- */
.faq-list { border-top: 1px solid var(--border-blue); }
.faq-item { border-bottom: 1px solid var(--border-blue); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700;
  color: var(--trust-navy);
  text-align: left;
  min-height: 52px;
}
.faq-q:hover { color: var(--tasman-blue); }
.faq-q .chev { flex: none; color: var(--tasman-blue); transition: transform .2s var(--ease); }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 4px 24px; max-width: 760px; }
.faq-a.is-open { display: block; }
.faq-a p { color: var(--cool-slate); margin-bottom: .8em; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- Resource cards ---------- */
.resources-section {
  background:
    radial-gradient(circle at 88% 10%, rgba(118,200,242,.20), transparent 28%),
    var(--snow-white);
}
.resources-section .section-head { max-width: 760px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.resource-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
  min-height: 220px;
  padding: 24px;
  border-color: rgba(22,127,194,.14);
  box-shadow: 0 10px 30px rgba(23,58,89,.07);
}
.resources-section .resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.resource-card > div:last-child { display: flex; flex-direction: column; min-width: 0; min-height: 170px; }
.resource-card .icon-tile {
  width: 48px;
  height: 48px;
  flex: none;
  margin-bottom: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 8px 18px rgba(22,127,194,.20);
}
.resource-card h3 { font-size: 18px; margin-bottom: 8px; }
.resource-card p { line-height: 1.6; }
.resource-card .ext {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  margin-top: auto;
  padding-top: 16px;
  text-decoration: none;
}
.notice {
  background: var(--alpine-mist);
  border: 1px solid var(--border-blue);
  border-left: 4px solid var(--tasman-blue);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 15px;
  color: var(--trust-navy);
  margin: 28px 0;
}
.notice p { margin: 0; }

/* ---------- Article/prose ---------- */
.article-body h2 { margin-top: 1.6em; font-size: clamp(26px, 3vw, 33px); }
.article-body h3 { margin-top: 1.4em; }
.article-body img { border-radius: var(--radius-card); margin: 28px 0; }
.article-body .pull {
  border-left: 4px solid var(--pacific-sky);
  padding: 6px 0 6px 22px;
  font-size: 19px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--trust-navy);
  margin: 28px 0;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
@media (min-width: 901px) {
  .split--media-balanced { align-items: stretch; }
  .split--media-balanced .split-media { min-height: clamp(440px, 36vw, 540px); }
  .split--media-balanced .split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- Link lists ---------- */
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  color: var(--trust-navy);
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
  min-height: 52px;
}
.link-list a:hover { border-color: var(--positive-blue); transform: translateY(-2px); box-shadow: var(--shadow-card); color: var(--tasman-blue); }
.link-list svg { flex: none; color: var(--positive-blue); }

/* ---------- Disclosure strip ---------- */
.disclosure-strip {
  background: var(--snow-white);
  border-top: 1px solid var(--border-blue);
  font-size: 13.5px;
  color: var(--cool-slate);
  padding: 16px 0;
}
.disclosure-strip p { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--trust-navy); color: rgba(255,255,255,.8); }
.footer-inner { max-width: var(--content-width); margin-inline: auto; padding: 64px clamp(20px,4vw,32px) 28px; }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; align-items: start; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-name > span { color: #fff; background: rgba(118,200,242,.18); }
.footer-brand p { font-size: 14px; line-height: 1.65; margin-top: 20px; max-width: 280px; }
.footer-col h2, .footer-col h3 {
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; margin-bottom: 20px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-col li { margin: 0; line-height: 1.45; }
.footer-col a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 14.5px; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.7); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .28s var(--ease), transform .28s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- City page accent themes ---------- */
.theme-auckland { --city-accent: #167FC2; }
.theme-wellington { --city-accent: #14547e; }
.theme-christchurch { --city-accent: #4fa3d8; }
.theme-hamilton { --city-accent: #2F9C93; }
.city-hero-ribbon { height: 6px; background: var(--grad-primary); border-radius: 3px; width: 72px; margin-bottom: 18px; }

/* ---------- Tables (membership) ---------- */
.compare { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border-blue); border-radius: var(--radius-card); overflow: hidden; font-size: 15.5px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border-blue); }
.compare thead th { background: var(--trust-navy); color: #fff; font-family: var(--font-heading); font-size: 15px; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 600; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-card); }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: clamp(72px, 12vw, 140px) 0; }
.error-page .code { font-family: var(--font-heading); font-size: clamp(72px, 12vw, 120px); font-weight: 800; color: var(--pacific-sky); line-height: 1; margin-bottom: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1160px) {
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 900px) {
  .hero { min-height: max(700px, calc(100svh - 70px)); }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(7,32,55,.24) 0%, rgba(7,32,55,.54) 42%, rgba(7,32,55,.94) 76%, rgba(7,32,55,.98) 100%),
      linear-gradient(90deg, rgba(7,32,55,.45), rgba(7,32,55,.08));
  }
  .hero-inner { align-items: flex-end; padding-top: clamp(220px, 38vh, 320px); padding-bottom: 52px; }
  .hero-copy { width: min(100%, 620px); }
  .hero-media img { object-position: 68% center; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { padding-left: 56px; padding-top: 0; }
  .step::before {
    position: absolute; left: 0; top: 2px;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--alpine-mist);
    border-radius: 12px;
    margin: 0;
  }
  .step::after { left: 19px; top: 48px; bottom: -22px; right: auto; width: 2px; height: auto; }
  .step:last-child::after { display: none; }
  .split { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero-inner { padding-top: 150px; padding-bottom: 32px; }
  .hero-copy { text-align: center; }
  .hero-title { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-actions .btn {
    width: auto;
    min-width: 248px;
    max-width: calc(100% - 40px);
    margin-inline: auto;
    padding-inline: 28px;
    white-space: nowrap;
  }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 0; }
  .resource-card > div:last-child { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-inner { padding-top: 48px; }
  .cta-band { border-radius: 18px; padding: 36px 22px; }
}

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

/* ==========================================================================
   Condition guides — imagery & UI components
   Everything below is additive. No rule above this line is modified, because
   19 other pages depend on them.
   ========================================================================== */

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  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;
}

/* `.reveal` starts at opacity:0, and site.js can only add the is-visible
   fallback when it actually runs. With scripting unavailable the content
   would stay invisible forever, so cover that case in CSS. Older browsers
   ignore this media query and behave exactly as before. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* Article bodies that open with an h2 should not carry the 1.6em top margin */
.article-body > h2:first-child { margin-top: 0; }

/* FAQ wrapper headings — replaces the per-page inline style="margin:0" and
   covers faq.html's <h2> variant too. Margin only: the inline styles on the
   other 8 pages pin margin but not font-size, so declaring a size here would
   visibly shrink their FAQ headings. */
.faq-item > h2,
.faq-item > h3,
.faq-h { margin: 0; }

/* ---------- Media page hero (internal article pages) ---------- */
.page-hero--media { padding-bottom: clamp(48px, 6vw, 88px); }
.page-hero--media .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  font-size: 14.5px;
  color: var(--cool-slate);
}
.trust-row li { display: flex; align-items: center; gap: 8px; margin: 0; }
.trust-row svg { flex: none; color: var(--pounamu-teal); }
.page-hero__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-blue);
  background: var(--alpine-mist);
  box-shadow: var(--shadow-card);
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* ---------- Key-point tiles ---------- */
.fact-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.fact-row > li { margin: 0; }
.fact {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-top: 3px solid var(--positive-blue);
  border-radius: var(--radius-card);
  padding: 24px 26px 22px;
  box-shadow: var(--shadow-card);
}
.fact--accent { border-top-color: var(--pounamu-teal); }
.fact__label {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--trust-navy);
  margin: 0 0 8px;
}
.fact p { color: var(--cool-slate); font-size: 15.5px; margin: 0 0 16px; }
/* Two classes so this outranks `.fact p` above and can push itself to the
   bottom of the flex column. */
.fact .fact__source {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-blue);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Icon checklist (replaces bare <ul> in advice lists) ---------- */
.check-list {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
  display: grid;
  gap: 16px;
}
.check-list > li { position: relative; margin: 0; padding-left: 38px; }
.check-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(47, 152, 229, .12);
  box-shadow: inset 0 0 0 1px rgba(47, 152, 229, .24);
}
.check-list > li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(.1em + 8px);
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--tasman-blue);
  border-bottom: 2px solid var(--tasman-blue);
  transform: rotate(-45deg);
}

/* ---------- Callout (distinct from .notice: an icon tile plus a heading) ---------- */
.callout {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: linear-gradient(135deg, var(--alpine-mist) 0%, #FFFFFF 60%);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  margin: 32px 0;
  box-shadow: var(--shadow-card);
}
.callout__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad-primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(22, 127, 194, .20);
}
.callout h3 { font-size: 19px; margin: 0 0 6px; }
.callout p { color: var(--cool-slate); font-size: 15.5px; margin: 0 0 .6em; }
.callout p:last-child { margin-bottom: 0; }
.callout--teal { border-left: 4px solid var(--pounamu-teal); }
.callout--teal .callout__icon {
  background: linear-gradient(135deg, var(--pounamu-teal), var(--pacific-sky));
}

/* ---------- Reverse split (image on the left; desktop only, so the mobile
   stack order stays text-then-image everywhere) ---------- */
@media (min-width: 901px) {
  .split--reverse > :last-child { order: -1; }
}

/* ---------- Sibling-condition strip ---------- */
.sibling-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sibling {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.sibling:hover {
  border-color: var(--positive-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  color: inherit;
}
/* Counters the base :focus-visible rule, which would square off the corners */
.sibling:focus-visible { border-radius: 16px; }
.sibling img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.sibling h3 { font-size: 17px; margin: 0 0 3px; }
.sibling p { font-size: 13.5px; line-height: 1.5; color: var(--cool-slate); margin: 0; }
.sibling__chev { flex: none; color: var(--positive-blue); transition: transform .16s var(--ease); }
.sibling:hover .sibling__chev { transform: translateX(3px); }

@media (max-width: 900px) {
  .page-hero--media .container { grid-template-columns: 1fr; }
  .page-hero--media .page-hero__media { max-width: 560px; }
  .fact-row { grid-template-columns: 1fr; gap: 16px; }
  .sibling-strip { grid-template-columns: 1fr; }
  .check-list > li { padding-left: 34px; }
}
@media (max-width: 600px) {
  .page-hero--media .page-hero__media { max-width: none; }
  .callout { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .callout__icon { width: 46px; height: 46px; border-radius: 12px; }
  .sibling { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .sibling img { width: 56px; height: 56px; }
}

/* ---------- Key points panel (replaces the boxed .fact cards) ---------- */
.keypoints {
  background: linear-gradient(158deg, #F1F9FE 0%, #FFFFFF 58%);
  border: 1px solid var(--border-blue);
  border-radius: 24px;
  padding: clamp(30px, 3.6vw, 48px);
  box-shadow: 0 22px 48px -30px rgba(23, 58, 89, .34);
}
.keypoints__head { margin-bottom: clamp(26px, 3vw, 38px); }
.keypoints__head .eyebrow { display: block; margin-bottom: 8px; }
.keypoints__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); }
.keypoints__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keypoints__item { padding: 0 clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--border-blue); }
.keypoints__item:first-child { padding-left: 0; border-left: 0; }
.keypoints__item:last-child { padding-right: 0; }
.keypoints__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-primary); color: #fff; margin-bottom: 18px;
  box-shadow: 0 12px 22px -10px rgba(22, 127, 194, .55);
}
.keypoints__item:nth-child(2) .keypoints__icon {
  background: linear-gradient(135deg, var(--pounamu-teal), var(--pacific-sky));
  box-shadow: 0 12px 22px -10px rgba(47, 156, 147, .55);
}
.keypoints h3 { font-size: 18px; margin: 0 0 9px; }
.keypoints__item p { color: var(--cool-slate); font-size: 15.5px; line-height: 1.62; margin: 0; }
.keypoints__foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin: clamp(26px, 3vw, 36px) 0 0; padding-top: 20px;
  border-top: 1px solid var(--border-blue);
  font-size: 13.5px; line-height: 1.55; color: var(--cool-slate);
}
.keypoints__foot svg { flex: none; margin-top: 1px; color: var(--tasman-blue); }
.keypoints__foot a { font-weight: 600; }

/* ---------- Two-column section + numbered rules panel ---------- */
.section-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(32px, 4vw, 60px); align-items: start;
}
.side-panel {
  background: #fff; border: 1px solid var(--border-blue); border-radius: 22px;
  padding: clamp(26px, 2.6vw, 34px);
  box-shadow: 0 20px 44px -32px rgba(23, 58, 89, .40);
}
.side-panel__title {
  font-size: 17px; margin: 0 0 22px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border-blue);
}
.rule-list { list-style: none; counter-reset: rule; margin: 0; padding: 0; display: grid; gap: 20px; }
.rule-list > li {
  counter-increment: rule; position: relative; padding-left: 46px; margin: 0;
  color: var(--cool-slate); font-size: 15.5px; line-height: 1.6;
}
.rule-list > li::before {
  content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: -1px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--alpine-mist); color: var(--tasman-blue);
  font-family: var(--font-heading); font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
}

/* ---------- Resource cards (replaces the flat .link-list) ---------- */
.reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.reading-card {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 26px 28px; background: #fff; border: 1px solid var(--border-blue);
  border-radius: 20px; text-decoration: none; color: inherit;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.reading-card:hover {
  border-color: var(--positive-blue); transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover); color: inherit;
}
/* Counters the base :focus-visible rule, which would square off the corners */
.reading-card:focus-visible { border-radius: 20px; }
.reading-card__icon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--alpine-mist); color: var(--tasman-blue);
}
.reading-card h3 { font-size: 17.5px; margin: 0 0 6px; }
.reading-card p { font-size: 14.5px; line-height: 1.55; color: var(--cool-slate); margin: 0; }
.reading-card__chev { flex: none; color: var(--positive-blue); transition: transform .16s var(--ease); }
.reading-card:hover .reading-card__chev { transform: translateX(3px); }

/* ---------- Centred FAQ block ---------- */
.prose--center { margin-inline: auto; max-width: 820px; }
.prose--center .faq-a { max-width: none; }

@media (max-width: 900px) {
  .keypoints__grid { grid-template-columns: 1fr; gap: 0; }
  .keypoints__item { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--border-blue); }
  .keypoints__item:first-child { border-top: 0; padding-top: 0; }
  .section-split { grid-template-columns: 1fr; }
  .reading-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .keypoints { border-radius: 20px; }
  .reading-card { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; padding: 20px; }
  .reading-card__icon { width: 46px; height: 46px; border-radius: 13px; }
}

/* ============================================================
   Guide lead: section heading + on-page nav rail
   ============================================================ */

.guide-lead {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 60px);
  align-items: start;
}
.guide-lead__rail h2 {
  margin: 0 0 30px;
  font-size: clamp(26px, 2.9vw, 33px);
  line-height: 1.18;
}
.rail-nav__title {
  margin: 0 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--border-blue);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cool-slate);
}
.rail-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail-nav__list > li { margin: 0; }
.rail-nav__list a {
  display: flex; align-items: baseline; gap: 11px;
  padding: 9px 0;
  font-size: 15.5px; font-weight: 600; line-height: 1.4;
  color: var(--trust-navy); text-decoration: none;
  transition: color .16s var(--ease);
}
.rail-nav__list a::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pacific-sky); transform: translateY(-3px);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.rail-nav__list a:hover { color: var(--tasman-blue); }
.rail-nav__list a:hover::before {
  background: var(--positive-blue); transform: translateY(-3px) scale(1.25);
}

/* In-page jump targets are <section>s, so the section's own --space-section top
   padding would otherwise push the heading up to 112px down the viewport.
   Subtracting it lands the heading a constant 96px from the top, clear of the
   71-77px sticky header, at every width. */
.toc-target { scroll-margin-top: calc(96px - var(--space-section)); }

@media (max-width: 1100px) {
  .guide-lead { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .guide-lead { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .guide-lead__rail h2 { margin-bottom: 20px; }
  .rail-nav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
}
@media (max-width: 600px) {
  .rail-nav__list a { padding: 8px 0; font-size: 14.5px; }
}

/* ============================================================
   Attributed source line inside a callout
   ============================================================ */

/* Scoped by .callout so it outranks the existing .callout p rule. */
.callout .callout__source {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-blue);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cool-slate);
}
.callout--teal .callout__source { border-top-color: rgba(47, 156, 147, .3); }

/* ============================================================
   Related-guides grid with an odd number of cards
   ============================================================ */

/* .reading-grid is a fixed two-column grid, so an odd card count
   leaves an empty cell beside the last card. Let that card span the
   full row instead. Scoped to exactly three cards: grids of two or
   four are unaffected, so other pages using this component keep
   their existing layout. */
.reading-grid:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; }

/* ============================================================
   Directory section heads and comparison-table note
   ============================================================ */

/* Replaces the inline style="margin-bottom:28px" that the directory
   category headings used to carry, so the markup holds no
   presentational styles. */
.cat-head { margin-bottom: 28px; }
.cat-head h2 { margin: 0 0 10px; }
.cat-head p { margin: 0; max-width: 64ch; line-height: 1.6; color: var(--cool-slate); }

/* Replaces the inline style="font-size:14px;color:#526978" under the
   membership comparison table. */
.table-note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--cool-slate); }

/* ============================================================
   Full-width prose and two-column check lists
   ============================================================ */

/* .prose caps at --prose-width, which is right for running text but
   leaves the right half of a 1136px container empty when the section's
   content is a list. Sections that hold a list span the container
   instead; paragraphs keep the narrower measure. */
.prose--wide { max-width: none; }

/* Two-column variant of .check-list. The base rule is already a grid
   whose tick marks are positioned against each <li>, so widening it to
   two tracks needs no other change. */
.check-list--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 56px);
}

@media (max-width: 900px) {
  .check-list--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Directory page: jump bar, continuous directory, inline link row
   ============================================================ */

/* Chip row of in-page category jumps, sitting in the hero under the lead.
   Wraps freely, so it needs no breakpoint of its own. */
.jump-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.jump-bar a {
  display: inline-flex; align-items: center;
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid var(--border-blue); background: #fff;
  color: var(--trust-navy); font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.jump-bar a:hover { border-color: var(--positive-blue); color: var(--tasman-blue); transform: translateY(-1px); }
/* The emergency entry is the one chip that should not read as a peer of the
   others: it is tinted and outlined so it is findable without being alarming. */
.jump-bar a.jump-bar__urgent {
  border-color: var(--tasman-blue); background: var(--alpine-mist); color: var(--tasman-blue);
}

/* A .toc-target inside .dir-list has no section padding above it, so the
   negative offset the condition pages rely on would scroll past the heading. */
.dir-block.toc-target { scroll-margin-top: 96px; }

/* The directory proper: category blocks stacked in one container separated by
   hairlines, rather than one full-height section each. Seven sections of
   112px padding around one or two entries read as mostly empty page.

   Each block is a label column plus an entries column, the way a printed
   directory sets a heading against its listing. This also means a category
   with a single entry fills its row instead of leaving half a grid empty. */
.dir-list > .dir-block + .dir-block {
  margin-top: 44px; padding-top: 44px;
  border-top: 1px solid var(--border-blue);
}
.dir-block {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 52px);
  align-items: start;
}
/* The category name is a label here, not a page-level heading, so it sits
   below the global h2 scale. */
.dir-block .cat-head h2 { font-size: clamp(19px, 1.7vw, 23px); margin: 0 0 8px; }
.dir-block .cat-head { margin-bottom: 0; }

@media (max-width: 900px) {
  .dir-block { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Compact inline row of cross-links: lighter than the thumbnail card strips
   the condition pages use, which is the point — this page is an index. */
.link-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 0; padding: 0; list-style: none;
}
.link-row a {
  display: block; padding: 15px 18px;
  border-radius: 14px; border: 1px solid var(--border-blue); background: #fff;
  color: var(--trust-navy); font-size: 15.5px; font-weight: 600;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-row a:hover { border-color: var(--positive-blue); color: var(--tasman-blue); }

@media (max-width: 900px) {
  .link-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .link-row { grid-template-columns: minmax(0, 1fr); }
}

/* .resource-card's external-link line has no colour of its own — it inherits
   the body link colour, which is too dark to read on the navy band. */
.navy-section .resource-card .ext { color: var(--pacific-sky); }

/* A category holding a single entry would otherwise leave a hole where the
   second card would sit, which reads as a missing item rather than a short
   list. Two of the six directory categories have one entry each.
   The two min-heights exist to level a *pair* of cards; with only one there is
   nothing to level against, and they just open ~100px of dead space between
   the description and the external link. */
.dir-block .grid--2 > .resource-card:only-child { grid-column: 1 / -1; min-height: auto; }
.dir-block .grid--2 > .resource-card:only-child > div:last-child { min-height: auto; }

/* The external-link icon in a resource card was a shrinkable flex item, so a
   long label squeezed it instead of overflowing -- and because it shrank rather
   than overflowed, neither a document-level overflow probe nor an element-level
   clip probe reports anything. On index.html the icons already render at
   10-15px instead of 18px at tablet widths; on the directory page, where the
   link text is the URL itself and cannot wrap, the icon vanished entirely.
   An affordance icon should never shrink. */
.resource-card .ext svg { flex: none; }

/* With the icon fixed, the directory's URL labels need room to sit beside it.
   .grid--2 only collapses at 600px, which leaves ~144px for a 131px URL plus
   the icon -- so the two-up grid goes single-column earlier here. */
@media (max-width: 768px) {
  .dir-block .grid--2 { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the cards are no longer paired either, so the levelling height
     would just open dead space under every description. */
  .dir-block .resource-card { min-height: auto; }
  .dir-block .resource-card > div:last-child { min-height: auto; }
}

/* ==========================================================================
   City guides — banner hero, city identity, editorial rhythm
   Additive, like everything below the boundary above. The .theme-* accents and
   .city-hero-ribbon were declared for exactly this and never consumed. Nothing
   outside the four city pages carries a .theme-* class or a .city-page
   wrapper, so none of this can reach the other 19 pages.
   ========================================================================== */

/* ---------- Banner hero: image first on mobile, full-bleed on desktop ---------- */
/* Mobile keeps the calmer image-then-copy reading order. On desktop the same
   city photography becomes a full-width background, with a directional
   overlay protecting the copy while leaving the place itself visible. */
.city-page { position: relative; }

@media (min-width: 901px) {
  main:has(> .city-page) { position: relative; }
  main > .breadcrumbs:has(+ .city-page) {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    padding: 18px 0 28px;
    background: linear-gradient(180deg, rgba(5, 29, 50, .48), transparent);
  }
  main > .breadcrumbs:has(+ .city-page) li,
  main > .breadcrumbs:has(+ .city-page) a {
    color: rgba(255, 255, 255, .76);
  }
  main > .breadcrumbs:has(+ .city-page) li + li::before {
    color: rgba(255, 255, 255, .38);
  }
  main > .breadcrumbs:has(+ .city-page) [aria-current] {
    color: #fff;
    font-weight: 700;
  }
  main > .breadcrumbs:has(+ .city-page) a:hover { color: #fff; }
}

.page-hero--banner { padding: 0 0 clamp(36px, 4.6vw, 64px); }
.page-hero--banner .page-hero__band { padding-top: clamp(14px, 1.8vw, 26px); }
.page-hero--banner .page-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-blue);
  background: var(--alpine-mist);
  box-shadow: var(--shadow-card);
}
/* The base img rule is height:auto, which would render the photo at its own
   1.786:1 inside the 16:9 box. overflow:hidden hides that, so it fails
   silently -- the crop simply is not the one specified here. */
.page-hero--banner .page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.page-hero--banner .page-hero__copy { margin-top: clamp(24px, 3vw, 38px); }
.page-hero--banner .jump-bar { margin-top: 26px; }

@media (min-width: 901px) {
  .page-hero--banner {
    position: relative;
    min-height: clamp(520px, 48vw, 650px);
    padding: 0;
    overflow: hidden;
    background: var(--trust-navy);
  }
  .page-hero--banner .page-hero__band {
    position: absolute;
    inset: 0;
    padding: 0;
  }
  .page-hero--banner .page-hero__band > .container {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
  }
  .page-hero--banner .page-hero__media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .page-hero--banner .page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(7, 34, 58, .9) 0%, rgba(7, 34, 58, .72) 42%, rgba(7, 34, 58, .18) 76%),
      linear-gradient(180deg, rgba(7, 34, 58, .06) 38%, rgba(7, 34, 58, .58) 100%);
  }
  .page-hero--banner .page-hero__media img {
    object-position: center 46%;
  }
  .page-hero--banner > .container {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    padding-top: clamp(64px, 7vw, 92px);
    padding-bottom: clamp(44px, 5vw, 64px);
  }
  .page-hero--banner .page-hero__copy {
    width: min(760px, 68%);
    margin-top: 0;
    color: #fff;
  }
  .page-hero--banner .city-hero-ribbon {
    background: var(--city-accent, var(--pacific-sky));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  }
  .page-hero--banner .eyebrow { color: #8edcff; }
  .page-hero--banner h1 { color: #fff; text-wrap: balance; }
  .page-hero--banner .lead { color: rgba(255, 255, 255, .88); }
  .page-hero--banner .jump-bar { gap: 9px; }
  .page-hero--banner .jump-bar a {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(8, 36, 61, .46);
    color: #fff;
    box-shadow: 0 8px 22px rgba(4, 25, 44, .12);
    backdrop-filter: blur(8px);
  }
  .page-hero--banner .jump-bar a:hover {
    border-color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .16);
    color: #fff;
  }
}

@media (max-width: 600px) {
  .page-hero--banner .page-hero__media { aspect-ratio: 3 / 2; }
  .page-hero--banner .jump-bar { margin-top: 20px; }
}

/* ---------- City identity ---------- */
/* --city-accent is a saturated brand tint, and on --snow-white it scores
   auckland 4.17:1, christchurch 2.67:1, hamilton 3.21:1 -- all short of the
   4.5:1 a 14px bold uppercase .eyebrow needs (wellington's 7.78:1 is the only
   one that passes). So the accent is used for fills, rules and dots only, and
   all city text goes through --city-ink below, which clears 5.6:1 on every
   surface these pages put type on. */
.theme-auckland     { --city-ink: #0F6394; }
.theme-wellington   { --city-ink: #14547e; }
.theme-christchurch { --city-ink: #256A99; }
.theme-hamilton     { --city-ink: #1C6B65; }

/* The ribbon hook at the top of this file sets height, width, radius and
   margin but NOT display, so on a <span> all four are ignored and it renders
   as an invisible zero-height element -- which is why nothing ever used it. */
.city-hero-ribbon {
  display: block;
  background: var(--city-accent, var(--grad-primary));
}
.city-page .eyebrow { color: var(--city-ink, var(--tasman-blue)); }

/* ---------- Editorial rhythm ---------- */
/* Eleven sections at --space-section would stack 2 x 112px of empty page
   between every pair at desktop. This is not cosmetic: without it the page
   grows by roughly 1800px of nothing. */
.section--tight { --tight-pad: clamp(40px, 5vw, 72px); padding-block: var(--tight-pad); }
/* .toc-target assumes the section's top padding IS --space-section. With a
   tighter pad that subtraction is wrong and every jump-bar chip lands its
   heading 56px down -- underneath the 71-77px sticky header. */
.section--tight.toc-target { scroll-margin-top: calc(96px - var(--tight-pad)); }

/* .grid--2 only collapses at 600px, which at 640px viewport means two ~270px
   columns holding 300-character paragraphs. */
@media (max-width: 900px) {
  .city-page .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Local-area chips ---------- */
.place-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.place-row > li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-blue);
  font-size: 15.5px; font-weight: 600;
  color: var(--trust-navy);
}
.place-row > li::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--city-accent, var(--positive-blue));
}

/* #privacy on the city pages keeps every word of its copy but loses its
   position and its emphasis background: it now sits after #community instead of
   leading the page. --space-section (56-112px) around a two-paragraph section
   was most of what made it read as a headline block, so it gets a pad of its
   own. As with --tight-pad above, .toc-target's subtraction assumes the top
   padding is --space-section; a jump-bar chip landing on #privacy would
   otherwise park its heading under the sticky header. The jump bar still lists
   it, so the offset has to be re-derived, not dropped. */
.city-page .section--snug { --snug-pad: clamp(28px, 3.4vw, 48px); padding-block: var(--snug-pad); }
.city-page .section--snug.toc-target { scroll-margin-top: calc(96px - var(--snug-pad)); }
/* #community on the city pages carries six paragraphs now: the two originals
   stay in the split, and the reassurance copy sits in its own 2x2 block below.
   The split is align-items:center with 1fr/1fr, so prose and image have to stay
   roughly the same height -- see the comment in build_cities.py.

   The two resource links then sit side by side rather than as a single
   1136px-wide stack: .link-list is already a grid, so this is one declaration.
   Both collapse with .grid--2 at 600px. */
.city-page .community-warm { margin-top: clamp(30px, 3.6vw, 52px); }
.city-page .community-links {
  margin-top: clamp(24px, 2.8vw, 36px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .city-page .community-links { grid-template-columns: 1fr; }
}

/* ============================================================
   Editorial support pages
   ============================================================ */
.page-hero--editorial {
  padding: clamp(42px, 5.2vw, 74px) 0;
  background:
    radial-gradient(circle at 8% 14%, rgba(79, 163, 216, .13), transparent 31%),
    linear-gradient(135deg, #f7fbfe 0%, #edf7fc 100%);
}
.page-hero--editorial > .container {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
  gap: clamp(38px, 5vw, 72px);
  align-items: center;
}
.page-hero--editorial .page-hero__copy { min-width: 0; }
.page-hero--editorial h1 {
  max-width: 760px;
  font-size: clamp(38px, 4.25vw, 58px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.page-hero--editorial .lead { max-width: 650px; line-height: 1.65; }
.page-hero--editorial .page-hero__media {
  aspect-ratio: 4 / 3;
  border-radius: 28px 28px 28px 8px;
  border: 0;
  box-shadow: 0 26px 62px rgba(22, 72, 108, .17);
}
.page-hero--editorial .page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(15, 77, 116, .12);
  border-radius: inherit;
  pointer-events: none;
}
.page-hero--editorial .page-hero__media img { object-position: center; }
.reading-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  color: var(--tasman-blue);
  font-size: 14.5px;
  font-weight: 700;
}
.reading-note::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--pounamu-teal);
}

.guide-content { background: #f5fafe; }
.guide-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 800px);
  justify-content: center;
  gap: clamp(38px, 5vw, 72px);
  align-items: start;
}
.guide-index {
  position: sticky;
  top: 104px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--positive-blue);
}
.guide-index > p {
  margin: 0 0 14px;
  color: var(--trust-navy);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
}
.guide-index nav { display: grid; gap: 4px; }
.guide-index a {
  padding: 7px 0;
  color: var(--cool-slate);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.guide-index a:hover { color: var(--tasman-blue); }
.guide-article {
  max-width: none;
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid var(--border-blue);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(25, 74, 110, .09);
}
.guide-article h2 {
  scroll-margin-top: 110px;
  padding-top: .15em;
}
.guide-article h2:not(:first-child) {
  margin-top: 1.9em;
  padding-top: 1.35em;
  border-top: 1px solid var(--border-blue);
}
.guide-article .pull {
  padding: 24px 26px;
  border-left: 4px solid var(--pounamu-teal);
  border-radius: 0 14px 14px 0;
  background: var(--alpine-mist);
}

.conversation-article { counter-reset: conversation-step; }
.conversation-article h2[id] {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  counter-increment: conversation-step;
}
.conversation-article h2[id]::before {
  content: counter(conversation-step);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--trust-navy);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.conversation-article .pull {
  position: relative;
  margin-block: 28px;
  padding: 30px 32px 30px 58px;
  border-left: 0;
  border-radius: 18px;
  background: #eaf7f5;
  color: var(--trust-navy);
}
.conversation-article .pull::before {
  content: "“";
  position: absolute;
  top: 17px;
  left: 20px;
  color: var(--pounamu-teal);
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 1;
}

.support-content { background: #f6fbfd; }
.support-intro {
  display: grid;
  grid-template-columns: 110px minmax(0, 760px);
  justify-content: center;
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  margin-bottom: clamp(42px, 5vw, 70px);
}
.support-intro__mark {
  color: var(--pacific-sky);
  font-family: Georgia, serif;
  font-size: 132px;
  line-height: .75;
}
.support-intro h2 { margin-bottom: 16px; font-size: clamp(30px, 3.2vw, 42px); }
.support-intro p { margin: 0; color: var(--cool-slate); font-size: 18px; line-height: 1.75; }
.support-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.support-panel {
  grid-column: span 5;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--border-blue);
  border-radius: 20px;
  background: #fff;
}
.support-panel--wide { grid-column: span 7; }
.support-panel--accent {
  grid-column: span 7;
  background: var(--trust-navy);
  border-color: var(--trust-navy);
  color: #fff;
}
.support-panel--etiquette { grid-column: 1 / -1; }
.support-panel h2 { margin-bottom: 14px; font-size: clamp(23px, 2.3vw, 31px); }
.support-panel p { margin: 0; color: var(--cool-slate); line-height: 1.72; }
.support-panel--accent h2 { color: #fff; }
.support-panel--accent p { color: rgba(255, 255, 255, .82); }
.support-panel--accent a { color: var(--pacific-sky); }
.respect-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.respect-list li {
  position: relative;
  margin: 0;
  padding: 15px 0 15px 28px;
  border-top: 1px solid var(--border-blue);
  color: var(--cool-slate);
}
.respect-list li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pounamu-teal);
}

.page-hero--resources > .container { align-items: stretch; }
.page-hero--resources .page-hero__media { aspect-ratio: auto; min-height: 360px; }
.page-hero--resources .page-hero__media img { object-position: center 48%; }
.page-hero--resources .resource-jump-bar {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: clamp(26px, 3.5vw, 44px);
  border-top: 1px solid rgba(15, 77, 116, .14);
}
.page-hero--resources .resource-jump-bar a { background: rgba(255, 255, 255, .82); }

@media (max-width: 900px) {
  .page-hero--editorial > .container { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .page-hero--editorial .page-hero__media { aspect-ratio: 3 / 2; border-radius: 22px 22px 22px 7px; }
  .page-hero--editorial .page-hero__copy { max-width: 720px; }
  .page-hero--resources .page-hero__media { min-height: 0; }
  .page-hero--resources .resource-jump-bar { grid-column: auto; }
  .guide-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .guide-index {
    position: static;
    padding: 0 0 20px;
    border-left: 0;
    border-bottom: 1px solid var(--border-blue);
  }
  .guide-index nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .guide-index a {
    padding: 8px 13px;
    border: 1px solid var(--border-blue);
    border-radius: 999px;
    background: #fff;
  }
}

@media (max-width: 700px) {
  .page-hero--editorial { padding-block: 34px 42px; }
  .page-hero--editorial h1 { font-size: clamp(34px, 10vw, 46px); }
  .page-hero--editorial .page-hero__media { order: -1; }
  .reading-note { align-items: flex-start; }
  .guide-content { padding-top: 42px; }
  .guide-article { padding: 26px 22px; border-radius: 18px; }
  .conversation-article h2[id] { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; }
  .conversation-article h2[id]::before { width: 36px; height: 36px; font-size: 15px; }
  .conversation-article .pull { padding: 26px 22px 26px 50px; }
  .support-intro { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .support-intro__mark { font-size: 72px; }
  .support-intro p { font-size: 17px; }
  .support-grid { grid-template-columns: minmax(0, 1fr); }
  .support-panel,
  .support-panel--wide,
  .support-panel--accent,
  .support-panel--etiquette { grid-column: auto; }
  .respect-list { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================
   How-it-works: the numbered walkthrough rail
   ============================================================ */

/* This page's own skeleton. It is the only page on the site whose subject has
   a real order to it -- sign up, set privacy, browse, talk -- so it is the only
   one built as a single timeline instead of stacked sections. Each stage is a
   numbered marker in a fixed left column with a rule running down to the next
   one, and that stage's content beside it.

   Deliberately not .steps: that component runs its own 01-04 counter, and a
   second set of step numbers inside a stage already numbered 03 reads as a
   contradiction. At <=900px .steps also turns into a vertical timeline, which
   would draw a connector running parallel to this one. */
.walk { display: grid; }
.walk__stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  padding-bottom: clamp(44px, 5vw, 72px);
  /* A stage carries an id for the jump bar but has no section padding above
     it, so .toc-target's negative offset would scroll its heading under the
     header. Same fix, same reason, as .dir-block.toc-target. */
  scroll-margin-top: 96px;
}
.walk__stage:last-child { padding-bottom: 0; }

/* Runs from just under the marker to the foot of the stage, so the next
   stage's marker picks it up. 31px centres it in the 64px column: the 48px
   marker sits at 8px, so its centre is 32. */
.walk__stage::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: var(--border-blue);
}
.walk__stage:last-child::before { display: none; }

.walk__marker > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-blue);
  background: var(--alpine-mist);
  color: var(--tasman-blue);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
}

.walk__body { min-width: 0; }
.walk__body > h2 { margin: 4px 0 18px; font-size: clamp(24px, 2.6vw, 30px); }

/* The four account steps. Columns with a rule over each, rather than list
   items, so the group reads as one component -- the original was a bare <ol>
   and the sequence it describes was invisible. */
.walk__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin-top: 30px;
  max-width: var(--prose-width);
}
.walk__col { border-top: 2px solid var(--border-blue); padding-top: 16px; }
.walk__col h3 { margin: 0 0 8px; font-size: 17px; }
.walk__col p { margin: 0; font-size: 15.5px; color: var(--cool-slate); }

/* The interface stand-ins and the trust notice sit under their stage's prose
   at the same measure, so the rail stays the only thing in the left column. */
.walk-media { margin-top: 30px; max-width: var(--prose-width); }
.walk-media img {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-blue);
  box-shadow: var(--shadow-card);
}
.walk__body > .notice { margin: 30px 0 0; max-width: var(--prose-width); }

@media (max-width: 600px) {
  .walk__stage { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .walk__marker > span { width: 36px; height: 36px; font-size: 13px; }
  .walk__stage::before { left: 19px; top: 44px; }
  .walk__cols { grid-template-columns: 1fr; gap: 20px; }
  .walk__col h3 { font-size: 16.5px; }
}


/* ============================================================
   membership.html + community-support.html
   Page-scoped components for the two-page redesign. Nothing here is
   used by any other page -- every class name was checked against
   site.css and all 23 pages before being introduced.
   ============================================================ */

/* --- shared: illustrative interface images ----------------------- */
.content-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-card);
  background: var(--alpine-mist);
  box-shadow: var(--shadow-card);
}
.content-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.content-visual figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 34, 58, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  backdrop-filter: blur(6px);
}

/* --- shared: two-column bands -------------------------------------
   .grid--2 does not collapse until 600px, which at a 640px viewport
   means two ~270px columns holding 300-character paragraphs. These
   collapse at 900px instead. */
.band { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }
.band--8-4 { grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); }
.band--7-5 { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }

/* --- membership: the two tier cards -------------------------------
   The cards are the page's centrepiece, so they carry its only boxed
   weight. */
.tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 28px); }
.tier {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--border-blue);
  border-top: 4px solid var(--border-blue);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.tier--premium { border-top-color: var(--pounamu-teal); }
.tier__label {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px;
  background: var(--alpine-mist); color: var(--tasman-blue);
  font-family: var(--font-heading); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.tier h3 { margin: 16px 0 10px; font-size: clamp(21px, 2.2vw, 26px); }
.tier > p { margin: 0; color: var(--cool-slate); font-size: 15.5px; line-height: 1.65; }
/* Neutral dots, not ticks. A tick reads as "included", which would
   overstate what this page can promise about someone else's service. */
.tier__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.tier__list li { position: relative; margin: 0; padding-left: 26px; color: var(--cool-slate); font-size: 15.5px; line-height: 1.6; }
.tier__list li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--positive-blue);
}
.tier--premium .tier__list li::before { background: var(--pounamu-teal); }
/* The honest caveat is what distinguishes the two cards, so it sits on
   the card's floor rather than as fine print under the table. */
.tier__note {
  margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--border-blue);
  font-size: 13.5px; line-height: 1.55; color: var(--cool-slate);
}

/* --- membership: the comparison table -----------------------------
   Fixed layout plus declared widths is the only deterministic fix.
   Left to auto, the browser hands ~400px to a column holding "Yes". */
.compare--member { table-layout: fixed; }
.compare--member th:first-child, .compare--member td:first-child { width: 40%; }
.compare--member th:not(:first-child), .compare--member td:not(:first-child) { width: 30%; }
.compare-note {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--border-blue); border-radius: 20px;
  background: linear-gradient(135deg, var(--alpine-mist) 0%, #fff 65%);
}
.compare-note h3 { margin: 0 0 10px; font-size: 17px; }
.compare-note p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--cool-slate); }

/* --- membership: the pre-payment questions ------------------------
   Numbered rather than ticked: these are worked through in order, and
   the counter is already the site's numbered-sequence device. */
.ask-list { list-style: none; counter-reset: ask; margin: 0; padding: 0; display: grid; gap: 20px; }
.ask-list > li { counter-increment: ask; position: relative; margin: 0; padding-left: 54px; font-size: 17px; line-height: 1.6; color: var(--trust-navy); }
.ask-list > li::before {
  content: counter(ask, decimal-leading-zero); position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--alpine-mist); color: var(--tasman-blue);
  font-family: var(--font-heading); font-size: 13px; font-weight: 800;
}

/* --- community-support: the hero photo it was cropping -------------
   The source is 1.79:1 and .page-hero--editorial's 4/3 crops 25% of
   its width -- enough to take the two outer people out of a photograph
   whose alt text promises a group. */
.page-hero--community .page-hero__media { aspect-ratio: 16 / 10; }

/* --- community-support: the quote block ---------------------------
   Centred inside the container, this block's paragraph started ~270px
   right of the panel grid below it, and its glyph a further 164px left
   of that -- three left edges 100px apart in the first screen. Anchor
   everything to the container edge and let the glyph lead in above. */
.support-intro { grid-template-columns: minmax(0, 1fr); justify-content: start; }
.support-intro > div { max-width: var(--prose-width); }
.support-intro__mark { font-size: 76px; line-height: .55; margin-bottom: 2px; }

/* Every panel stretches to its row's tallest sibling, so whichever
   panel is shorter collects its slack at the bottom as dead space.
   Pin the last line to the floor instead: the slack becomes one
   predictable margin, and each panel ends on a link. */
.support-panel { display: flex; flex-direction: column; }
.support-panel__foot { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--border-blue); font-size: 15px; font-weight: 600; }
.support-panel__foot a { text-decoration: none; }
.support-panel__foot a:hover { text-decoration: underline; }
.support-panel--accent .support-panel__foot { border-top-color: rgba(255, 255, 255, .22); }
.support-panel--accent .support-panel__foot a { color: var(--pacific-sky); }

/* Row 2 used to run 5|7 where row 1 ran 7|5, so the vertical seam
   between the panels jogged ~190px between the rows. Make the accent
   panel the narrow one and the seam runs straight down the page.
   Scoped to min-width so it cannot fight the single-column collapse
   at 600px, which sets grid-column:auto on every panel variant. */
@media (min-width: 601px) {
  .support-panel--accent { grid-column: span 5; }
}

/* --- community-support: the closing photograph -------------------- */
.photo-band { border-radius: 24px; overflow: hidden; border: 1px solid var(--border-blue); box-shadow: var(--shadow-card); }
.photo-band img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 42%; }

@media (max-width: 900px) {
  .band--8-4, .band--7-5 { grid-template-columns: minmax(0, 1fr); }
  .photo-band img { aspect-ratio: 16 / 9; }
  /* The band collapses here, so the table gets the full container back
     and the original complaint returns at exactly tablet width. */
  .compare--member { min-width: 520px; }
}
@media (max-width: 600px) {
  .content-visual { border-radius: 18px; }
  .content-visual figcaption { right: 9px; bottom: 9px; }
  .tier-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tier { padding: 22px 20px; }
  .ask-list > li { padding-left: 46px; font-size: 16px; }
  .ask-list > li::before { width: 32px; height: 32px; font-size: 12px; }
  .compare--member th, .compare--member td { padding: 12px 14px; font-size: 14.5px; }
  .photo-band { border-radius: 18px; }
  .photo-band img { aspect-ratio: 4 / 3; }
  /* Supersedes the two-column 46px rule further up the file. */
  .support-intro { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .support-intro__mark { font-size: 56px; }
}

/* ============================================================
   Follow-ups to the membership + community-support redesign
   Two gaps the first block could not close.
   ============================================================ */

/* .support-panel p { margin: 0 } zeroes the gap between every paragraph in
   a panel, so the closing paragraph added to each one would butt straight
   against the original above it. */
.support-panel > p + p { margin-top: 14px; }
.support-panel > ul + p { margin-top: 18px; }

/* ============================================================
   Blog index and long-form articles
   ============================================================ */
.blog-hero {
  padding-block: clamp(64px, 8vw, 104px);
  background: linear-gradient(135deg, #edf8fd 0%, #fff 58%, #e7f4f7 100%);
  border-bottom: 1px solid var(--border-blue);
}
.blog-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
}
.blog-hero h1 { max-width: 760px; font-size: clamp(42px, 5vw, 68px); }
.blog-hero__intro { max-width: 620px; color: var(--cool-slate); font-size: clamp(18px, 2vw, 21px); }
.editor-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-left: 4px solid var(--pounamu-teal);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-card);
}
.editor-card img { width: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.editor-card h2 { margin: 0 0 4px; font-size: 20px; }
.editor-card p { margin: 0; color: var(--cool-slate); font-size: 14px; line-height: 1.55; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 40px); }
.story-card { overflow: hidden; border: 1px solid var(--border-blue); border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.story-card__image { display: block; overflow: hidden; }
.story-card__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s var(--ease); }
.story-card:hover .story-card__image img { transform: scale(1.02); }
.story-card__body { padding: clamp(24px, 3vw, 34px); }
.story-card__meta, .article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--cool-slate); font-size: 13px; }
.story-card__body h2 { margin: 14px 0 12px; font-size: clamp(25px, 2.5vw, 33px); }
.story-card__body h2 a { color: var(--trust-navy); text-decoration: none; }
.story-card__body h2 a:hover { color: var(--tasman-blue); }
.story-card__body > p { color: var(--cool-slate); }
.story-card__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; text-decoration: none; }
.topic-chip { padding: 4px 10px; border-radius: 999px; background: var(--alpine-mist); color: var(--tasman-blue); font-weight: 700; }
.blog-guide-intro { display: grid; gap: 30px; }
.blog-guide-copy { max-width: 820px; }
.blog-guide-copy p { color: var(--cool-slate); font-size: 17px; line-height: 1.75; }
.blog-topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.blog-topic-card { display: flex; min-height: 210px; flex-direction: column; padding: 24px; border: 1px solid var(--border-blue); border-radius: 18px; background: var(--snow-white); color: var(--trust-navy); text-decoration: none; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.blog-topic-card:hover { transform: translateY(-3px); border-color: #9fd4ee; box-shadow: var(--shadow-card); }
.blog-topic-card span { margin-bottom: 16px; color: var(--tasman-blue); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.blog-topic-card strong { font-family: var(--font-heading); font-size: 18px; line-height: 1.45; }
.blog-topic-card em { margin-top: auto; padding-top: 20px; color: var(--tasman-blue); font-style: normal; font-weight: 700; }

.article-hero { padding-block: clamp(42px, 6vw, 78px); background: var(--snow-white); }
.article-hero__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.article-hero h1 { margin: 18px auto; max-width: 880px; font-size: clamp(38px, 5vw, 64px); }
.article-hero .lead { max-width: 720px; margin: 0 auto 24px; color: var(--cool-slate); font-size: clamp(18px, 2vw, 21px); }
.article-meta { justify-content: center; }
.article-meta__author { display: inline-flex; align-items: center; gap: 10px; color: var(--trust-navy); font-weight: 600; }
.article-meta__author img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.article-cover { margin: 0; background: var(--snow-white); }
.article-cover img { width: 100%; max-height: 680px; aspect-ratio: 21 / 9; object-fit: cover; }
.blog-article-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px) 220px;
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
  justify-content: center;
}
.blog-toc { position: sticky; top: 104px; padding-top: 6px; }
.blog-toc > p { margin: 0 0 12px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; }
.blog-toc nav { display: grid; gap: 7px; }
.blog-toc a { color: var(--cool-slate); font-size: 13px; line-height: 1.4; text-decoration: none; }
.blog-toc a:hover { color: var(--tasman-blue); }
.blog-article { max-width: 720px; }
.blog-article > p:first-child { font-size: 20px; line-height: 1.65; color: var(--trust-navy); }
.blog-article h2 { scroll-margin-top: 110px; margin-top: 2em; }
.blog-article h3 { scroll-margin-top: 110px; }
.blog-article p, .blog-article li { color: #334f64; }
.blog-article blockquote {
  margin: 34px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--pounamu-teal);
  background: var(--alpine-mist);
  font-size: 19px;
}
.blog-article blockquote p { margin: 0; color: var(--trust-navy); }
.blog-note { margin: 30px 0; padding: 22px 24px; border: 1px solid var(--border-blue); border-radius: 16px; background: var(--snow-white); }
.blog-note strong { display: block; margin-bottom: 6px; color: var(--trust-navy); }
.blog-note p { margin: 0; font-size: 15px; }
.author-bio { position: sticky; top: 104px; text-align: center; }
.author-bio img { width: 96px; aspect-ratio: 1; margin: 0 auto 14px; object-fit: cover; border-radius: 50%; }
.author-bio h2 { margin: 0 0 4px; font-size: 17px; }
.author-bio p { color: var(--cool-slate); font-size: 13px; line-height: 1.55; }
.article-sources { padding-top: 22px; border-top: 1px solid var(--border-blue); }
.article-sources h2 { font-size: 23px; }
.article-sources li { font-size: 14px; }
.related-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.related-stories a { display: block; padding: 22px; border: 1px solid var(--border-blue); border-radius: 16px; color: var(--trust-navy); font-family: var(--font-heading); font-weight: 700; text-decoration: none; }
.related-stories a:hover { border-color: var(--positive-blue); color: var(--tasman-blue); }

@media (max-width: 1050px) {
  .blog-article-shell { grid-template-columns: 190px minmax(0, 720px); }
  .author-bio { display: none; }
}
@media (max-width: 820px) {
  .blog-hero__inner, .blog-grid, .blog-article-shell { grid-template-columns: minmax(0, 1fr); }
  .blog-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-hero__inner { align-items: start; }
  .blog-toc { position: static; padding: 18px; border: 1px solid var(--border-blue); border-radius: 16px; background: var(--snow-white); }
  .blog-toc nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .blog-toc a { padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border-blue); }
  .article-cover img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .blog-hero { padding-block: 44px 52px; }
  .blog-hero h1, .article-hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .editor-card { grid-template-columns: 70px 1fr; padding: 18px; }
  .editor-card img { width: 70px; }
  .story-card { border-radius: 18px; }
  .article-cover img { aspect-ratio: 4 / 3; }
  .blog-topic-grid { grid-template-columns: 1fr; }
  .blog-topic-card { min-height: 0; }
  .related-stories { grid-template-columns: minmax(0, 1fr); }
}

/* <figure> carries a UA margin of 1em 40px. The band is already full width,
   so it only needs its own top offset. */
.photo-band { margin: clamp(32px, 4vw, 52px) 0 0; }

/* ============================================================
   Third pass: two floor-pinning rules that were silently losing,
   and the quote glyph's leading.
   ============================================================ */

/* Both footer rules were written as (0,1,0) and both lost to a shorthand
   `margin` above them:
     .tier > p                (0,1,1)  beat  .tier__note        (0,1,0)
     .support-panel > p + p   (0,1,2)  beat  .support-panel__foot (0,1,0)
   so `margin: auto 0 0` never applied, and a card whose content was
   shorter than its row collected the slack *below* the footer instead of
   above it -- which is the exact defect the rule was added to fix, and it
   was invisible because the tallest card in each row has no slack to show.
   Naming the element and its class together is what makes these win;
   matching the earlier specificity is not enough. */
.tier p.tier__note,
.support-panel p.support-panel__foot { margin: auto 0 0; }

/* The intro is a single column now, so its inherited 56px row gap -- sized
   for two side-by-side columns -- opened directly under the quote glyph,
   and the glyph overflows its own .55 line box besides, so the visible
   space before the heading was ~85px. Close the row gap and tuck the
   glyph against the heading it is leading into. */
.support-intro { row-gap: 0; }
.support-intro__mark { margin-bottom: -8px; }

/* ============================================================
   Fourth pass: the support panel grid at tablet width.
   ============================================================ */

/* .support-grid holds its 12-column spans all the way down to 600px, so in
   the 600-900 range a 7|5 pair becomes a 386px card beside a 270px one --
   a 218px measure at 768px, which is the narrowest body text anywhere on
   the site, and two cards of visibly different weight. Six columns each
   makes the pairs equal. The 600px rule further up the file then collapses
   them to a single column, and the etiquette panel keeps its full-width
   span because :not() excludes it rather than out-specifying it. */
@media (max-width: 900px) {
  .support-panel:not(.support-panel--etiquette) { grid-column: span 6; }
}

/* ============================================================
   Fifth pass: the tier cards at narrow widths.
   ============================================================ */

/* .tier-grid kept two columns down to 600px, which at 620px left 206px of
   text per card -- about 26 characters, in cards 753px tall. A pair of
   cards only reads as a comparison while both are legible, and they stop
   being legible below roughly a 300px measure, which at this padding is a
   760px viewport. Below that they stack. No gap is set here so the rule
   already further up the file still owns it. */
@media (max-width: 760px) {
  .tier-grid { grid-template-columns: minmax(0, 1fr); }
}