/* Emergency accent — the one warm colour on the site, used only
   for the 24/7 callout so it means something when it appears. */
:root {
  --amber: #f0b429;
  --amber-bright: #ffc94a;
}

/* =============================================================
   GPS — component layer for the multi-page draft.

   style.css stays as the original single-page demo theme. This
   file adds only what the new pages need, reusing the same tokens
   so the two stay in step. Load order: style.css, then this.
   ============================================================= */

/* -------------------------------------------------------------
   Draft mode

   Every page is a discussion draft. Anything we have inferred,
   guessed or lifted as a placeholder is wrapped in .check so it
   is impossible to mistake a best guess for a confirmed fact.
   The banner button toggles the highlighting off for anyone who
   wants to read the site as a visitor would see it.
   ------------------------------------------------------------- */
.draft-banner {
  background: #241c02;
  color: #ffe9a8;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 233, 168, 0.24);
}

.draft-banner .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.draft-banner strong {
  color: #ffc93c;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.draft-banner p {
  margin: 0;
  flex: 1 1 340px;
  color: rgba(255, 233, 168, 0.84);
}

.draft-toggle {
  background: rgba(255, 201, 60, 0.14);
  border: 1px solid rgba(255, 201, 60, 0.4);
  color: #ffc93c;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.draft-toggle:hover {
  background: rgba(255, 201, 60, 0.24);
}

.check {
  background: rgba(255, 193, 7, 0.2);
  border-bottom: 1px dashed rgba(146, 100, 0, 0.7);
  padding: 0 2px;
  border-radius: 3px;
  cursor: help;
}

body.checks-off .check {
  background: none;
  border-bottom: 0;
  padding: 0;
  cursor: auto;
}

/* .check is for inline text — it sets background and padding, which
   wrecks any card it is put on (and the checks-off rule outranks the
   card's own styles, so the card loses its background entirely).
   Block-level elements use this instead: an outline sits outside the
   box, so nothing about the layout moves. */
.check-block {
  outline: 2px dashed rgba(146, 100, 0, 0.55);
  outline-offset: 3px;
  cursor: help;
}

body.checks-off .check-block {
  outline: none;
  cursor: auto;
}

/* A block-level note to Karen, sitting in the page flow. Never
   survives to the live site — every one of these is a question. */
.note {
  background: #fffaf0;
  border: 1px solid #f0d9a8;
  border-left: 5px solid #f0b429;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 26px 0 0;
  font-size: 0.95rem;
  color: #6b4e00;
}

.note strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: #92640a;
  margin-bottom: 6px;
}

.note p {
  margin: 0 0 8px;
}

.note p:last-child {
  margin-bottom: 0;
}

body.checks-off .note {
  display: none;
}

/* -------------------------------------------------------------
   Header — layout

   The header bar gets more width than the content containers do,
   because six nav items plus a long brand lockup will not fit in
   1180px and the nav wraps onto a second line. Everything else on
   the page stays at the original width.
   ------------------------------------------------------------- */
.site-header .container {
  width: min(100%, 1360px);
}

.bar {
  align-items: center;
  gap: 16px;
}

.brand-kicker {
  font-size: 0.9rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.main-nav {
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.main-nav > a,
.nav-trigger {
  white-space: nowrap;
  padding: 11px 10px;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   Header — dropdown navigation

   Click to open, not hover. A hover menu that sits below its
   trigger closes the moment the cursor crosses the gap between
   them, which makes the items effectively unclickable.
   ------------------------------------------------------------- */
.nav-item {
  position: relative;
  display: inline-flex;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  border-radius: 14px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-trigger:hover,
.nav-trigger:focus-visible,
.nav-item.open .nav-trigger {
  color: var(--brand);
  background: rgba(0, 86, 214, 0.07);
}

.nav-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 86, 214, 0.35);
}

.nav-trigger svg {
  width: 11px;
  height: 11px;
  flex: none;
  transition: transform 0.2s ease;
}

.nav-item.open .nav-trigger svg {
  transform: rotate(180deg);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 272px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13, 39, 70, 0.18);
  padding: 8px;
  display: none;
  z-index: 40;
}

.nav-item.open .nav-menu {
  display: grid;
}

.nav-menu a {
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* The underline sweep on .main-nav a is aimed at the top-level
   links; inside an open panel it just looks like noise. */
.nav-menu a::after {
  display: none;
}

.main-nav a[aria-current="page"],
.nav-item.current .nav-trigger {
  color: var(--brand);
  background: rgba(0, 86, 214, 0.08);
}

/* Anchored to the sticky header rather than the viewport, so it
   stays put whether or not the draft banner is above it. */
.mobile-menu {
  position: absolute;
  inset: auto 20px auto 20px;
  top: calc(100% + 8px);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.mobile-menu .menu-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 14px 4px;
}

/* -------------------------------------------------------------
   Interior page hero
   ------------------------------------------------------------- */
.page-hero {
  background: var(--surface);
  border-bottom: 1px solid rgba(13, 39, 70, 0.08);
  padding: 34px 0 40px;
}

.page-hero.on-dark {
  background: var(--text);
  color: white;
  border-bottom: 0;
}

.page-hero.on-dark .lead {
  color: rgba(255, 255, 255, 0.8);
}

.page-hero.on-dark .eyebrow {
  color: #b7d4ff;
}

/* Karen asked for text blocks to line up with the elements below them
   rather than stopping short. The hero text was capped at 860px, and
   .lead inside it at 680px by style.css, so a page hero ended a long
   way before the content underneath. Both now run the full measure.
   .wide is kept as a no-op so the About markup still works. */
.page-hero-inner,
.page-hero-inner.wide {
  display: grid;
  gap: 20px;
  max-width: 1100px;
}

.page-hero-inner .lead {
  max-width: none;
}

.page-hero h1 {
  margin: 0;
  line-height: 1.08;
  font-size: clamp(2.05rem, 3.6vw, 3.1rem);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 14px 0 0;
  margin: 0;
  list-style: none;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--brand);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.5;
}

/* -------------------------------------------------------------
   Proof strip — the four numbers under the hero
   ------------------------------------------------------------- */
.stat-strip {
  background: var(--text);
  color: white;
  padding: 22px 0;
}

/* Five stats need more room than the 1180px content column gives.
   The strip is a full-bleed band anyway, so it can use the wider
   measure the header already uses without looking out of place. */
.stat-strip .container {
  width: min(100%, 1360px);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* the About and broker strips still run four across */
.stat-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  display: grid;
  gap: 2px;
  padding-left: 16px;
  border-left: 2px solid rgba(183, 212, 255, 0.4);
}

.stat b {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.stat span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* -------------------------------------------------------------
   Audience cards — the four doors
   ------------------------------------------------------------- */
.audience-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.audience-card {
  display: grid;
  align-content: start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.audience-card h3 {
  margin: 0;
  font-size: 1.12rem;
}

.audience-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.audience-card .more {
  color: var(--brand);
  font-weight: 700;
  font-size: 0.92rem;
}

/* -------------------------------------------------------------
   Link cards — claim types, related pages
   ------------------------------------------------------------- */
.link-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.link-card {
  display: grid;
  align-content: start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(0, 86, 214, 0.2);
}

/* Same card, no destination. The claim-type detail pages exist but
   are not linked from the homepage yet, so these read as badges —
   nothing should imply they can be clicked. */
.link-card.static,
.link-card.static:hover {
  cursor: default;
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.link-card h3 {
  margin: 0;
  font-size: 1.08rem;
}

.link-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* -------------------------------------------------------------
   Prose + lists
   ------------------------------------------------------------- */
.prose {
  max-width: 760px;
}

.prose h3 {
  margin: 32px 0 10px;
  font-size: 1.25rem;
}

.prose h4 {
  margin: 24px 0 8px;
  font-size: 1.05rem;
}

.prose p {
  color: var(--muted);
  margin: 0 0 14px;
}

.prose ul,
.prose ol {
  color: var(--muted);
  margin: 0 0 16px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

.prose strong {
  color: var(--text);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
  gap: 46px;
  align-items: start;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.checklist li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 2px solid var(--brand);
}

.checklist strong {
  color: var(--text);
}

/* -------------------------------------------------------------
   Sidebar card
   ------------------------------------------------------------- */
.side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 1px 2px rgba(13, 39, 70, 0.04);
  position: sticky;
  top: 100px;
  display: grid;
  gap: 14px;
  /* A sticky card taller than the viewport pins its top and pushes its
     own bottom off screen — the button underneath then becomes
     permanently unreachable. Capping it means it always scrolls to
     the end. */
  max-height: calc(100vh - 124px);
  overflow-y: auto;
}

@media (max-width: 980px) {
  /* Not sticky on mobile, so no cap needed — it just sits in the flow. */
  .side-card {
    max-height: none;
    overflow-y: visible;
  }
}

.side-card.dark {
  background: var(--text);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}

.side-card.dark p {
  color: rgba(255, 255, 255, 0.78);
}

.side-card h3 {
  margin: 0;
  font-size: 1.15rem;
}

.side-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.side-card .btn {
  width: 100%;
}

/* -------------------------------------------------------------
   Numbered steps (vertical)
   ------------------------------------------------------------- */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.steps li {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 22px 78px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 22px;
  top: 22px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
}

.steps h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

.steps p {
  margin: 0;
  color: var(--muted);
}

.steps .timing {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 3px 12px;
}

/* -------------------------------------------------------------
   Trust — logo wall, accreditations, testimonial
   ------------------------------------------------------------- */
/* One column per partner — bump this if a slot is added or removed, since
   leftover empty columns read as a broken row. The max-width holds each tile
   near 230px: the logos are capped by height, so letting four tiles stretch
   the full container just pads them with dead space. Centred instead. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin-inline: auto;
}

.logo-slot {
  display: grid;
  place-items: center;
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  padding: 14px;
}

/* Drop a file into images/logos/ and it replaces the text automatically;
   until then the company name stands in, so nothing looks broken. */
.logo-slot img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
}

/* Approval not yet in writing — dashed, so it is obvious at a glance
   which marks we are not yet allowed to publish. */
.logo-slot.pending {
  border-style: dashed;
  border-color: rgba(146, 100, 0, 0.45);
}

.logo-note {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92640a;
}

.badge-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.badge-mark {
  width: 96px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 14px;
  color: var(--brand);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  overflow: hidden;
}

/* No tint behind a supplied logo — these are other organisations'
   marks and the card is already the container. The box stays a fixed
   square so marks of different proportions still line up. */
.badge-mark img {
  max-width: 96px;
  max-height: 96px;
  width: auto;
  object-fit: contain;
}

/* Optical balance. A tall shield at full height towers over a wide
   wordmark at full width, so each is trimmed to sit at a similar
   visual weight rather than a similar measured size. */
.badge-mark img[src*="nzcb"] {
  max-height: 88px;
}

.badge-mark img[src*="ema"] {
  max-height: 52px;
  max-width: 92px;
}

.badge-mark img[src*="sitesafe"] {
  max-height: 82px;
  max-width: 82px;
}

/* Only the text fallback needs a tile — it has nothing else to sit on. */
.badge-mark:not(:has(img)) {
  background: var(--brand-soft);
  padding: 6px;
}

/* For any logo that arrives with its background baked into the file
   rather than transparent — matching the tile to the artwork makes it
   look deliberate instead of like a mistake. Not needed for Site Safe
   any more (the favicon gave us a transparent mark), but kept for the
   next supplier logo that turns up flattened. */
/* The official SiteWise Gold badge is a wide banner with its own
   gold/navy background, so it needs room and no tile behind it. */
.badge-mark.wide {
  width: 190px;
  height: auto;
  background: none;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

.badge-mark.wide img {
  max-height: none;
  max-width: 100%;
  width: 100%;
  display: block;
}

.badge-mark.ink {
  background: #16202e;
  color: #ffffff;
  padding: 0;
}

.badge-mark.ink img {
  max-height: 84px;
  max-width: 84px;
}

.badge-card h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.badge-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  padding: 26px;
  margin: 0;
}

.quote p {
  margin: 0 0 14px;
  font-size: 1.06rem;
  line-height: 1.65;
}

.quote footer {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

/* -------------------------------------------------------------
   FAQ
   ------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 10px;
  max-width: none;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 22px;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 16px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--brand);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details > p,
.faq details > ul {
  margin: 0 0 18px;
  color: var(--muted);
}

.faq details > ul {
  padding-left: 20px;
}

/* -------------------------------------------------------------
   Call-to-action band
   ------------------------------------------------------------- */
.cta-band {
  background: var(--brand);
  color: white;
  padding: 44px 0;
}

.cta-band.ink {
  background: var(--text);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.cta-inner h2 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.cta-inner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
}

.cta-inner .btn-primary {
  background: white;
  color: var(--brand);
}

.cta-inner .btn-primary:hover {
  background: #eef5ff;
}

.cta-inner .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.35);
}

/* -------------------------------------------------------------
   Case studies
   ------------------------------------------------------------- */
.case-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
}

.case-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
}

.case-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.case-tag {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
}

.case-body {
  padding: 24px;
  display: grid;
  gap: 16px;
}

.case-body h4 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-body p {
  margin: 0;
  color: var(--muted);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.case-meta span {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

/* -------------------------------------------------------------
   Contact form (draft — not wired to anything yet)
   ------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 700;
  font-size: 0.92rem;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.14);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field-hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.field input[type="file"] {
  padding: 10px 12px;
  background: var(--surface-alt);
  cursor: pointer;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* -------------------------------------------------------------
   Coverage list
   ------------------------------------------------------------- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pill-row li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.92rem;
  font-weight: 600;
}

/* -------------------------------------------------------------
   Expanded footer
   ------------------------------------------------------------- */
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-cols h4 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b7d4ff;
}

.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-cols a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.94rem;
}

.footer-cols a:hover {
  color: white;
}

.footer-about p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
  font-size: 0.94rem;
  max-width: 340px;
}

.site-footer {
  padding-top: 44px;
}

/* -------------------------------------------------------------
   Utilities
   ------------------------------------------------------------- */
.section-tight {
  padding: 34px 0;
}

/* Karen asked for the section headings and their intro text to run the
   full width of the cards below, rather than stopping short. Headings
   now span the container; the paragraphs stay a little narrower because
   past roughly 90 characters a line gets noticeably harder to read. */
.section-heading {
  max-width: none;
}

.section-heading .lead {
  max-width: none;
}

.section-heading.center .lead {
  margin-left: auto;
  margin-right: auto;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

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

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */

/* The nav has to collapse to the hamburger well before it runs out
   of room, otherwise nowrap pushes it into the phone button. Six
   items plus the brand lockup need roughly 1300px to sit on one
   line comfortably, so that is where it switches — much earlier
   than the 980px breakpoint style.css uses for everything else. */
@media (max-width: 1300px) {
  .bar {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 1180px) {
  .stat-grid,
  .stat-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }
}

@media (max-width: 980px) {
  .stat-grid,
  .stat-grid:has(> :nth-child(4):last-child),
  .audience-grid,
  .link-grid,
  .logo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .side-card {
    position: static;
  }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .stat-grid,
  .audience-grid,
  .link-grid,
  .field-row {
    grid-template-columns: 1fr;
  }

  .logo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .logo-slot {
    min-height: 76px;
    padding: 10px;
  }

  .stat {
    padding-left: 16px;
  }

  .cta-inner .btn {
    width: 100%;
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .badge-card {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
   Workmanship guarantee

   Karen asked whether the guarantee line should appear on other
   pages linking back to the full wording on About. It should —
   none of the competitors publish a guarantee at all, so it is
   the cheapest differentiator on the site.
   ------------------------------------------------------------- */
.guarantee-band {
  background: var(--brand-soft);
  border-top: 1px solid rgba(0, 86, 214, 0.16);
  border-bottom: 1px solid rgba(0, 86, 214, 0.16);
  padding: 20px 0;
}

.guarantee-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  text-align: center;
}

.guarantee-band p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--brand-dark);
}

.guarantee-band strong {
  color: var(--text);
}

.guarantee-band a {
  color: var(--brand);
  font-weight: 700;
  white-space: nowrap;
}

.guarantee-shield {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--brand);
}

.guarantee-lead {
  font-size: 1.15rem;
  color: var(--text) !important;
}

.guarantee-badge {
  display: grid;
  place-items: center;
  gap: 2px;
  background: var(--brand);
  color: white;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 4px;
}

.guarantee-badge b {
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.guarantee-badge span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Emergency guidance needs to read as an instruction, not decoration —
   people scanning a contact page in a crisis miss ordinary paragraphs. */
/* Amber is the site's emergency colour, so the "phone, don't email"
   warning uses it too — one visual language for urgency rather than
   red here and amber there. */
.urgent-note {
  background: #fff8e8;
  border: 1px solid #f2dca6;
  border-left: 5px solid var(--amber);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 4px 0 0;
  color: #6b4e00;
}

.urgent-note strong {
  color: #8a5f00;
}

.after-hours {
  background: rgba(183, 212, 255, 0.14);
  border-left: 3px solid #b7d4ff;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.94rem;
}

.after-hours strong {
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

/* -------------------------------------------------------------
   Team — laid out like real business cards

   Karen asked for these to feel like cards you would actually be
   handed: a photo, a name, a title, and the details underneath a
   rule. Photo slot falls back to initials until she supplies them.
   ------------------------------------------------------------- */
.team-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.business-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: 0 10px 30px rgba(13, 39, 70, 0.07);
  display: grid;
  gap: 14px;
  align-content: start;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}

/* the coloured edge a printed card would have */
.business-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
}

.business-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(13, 39, 70, 0.13);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-photo {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-name {
  display: grid;
  gap: 2px;
}

.card-name h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}

.card-role {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.business-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.card-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2px 0 0;
}

.card-contact {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.card-contact a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.card-logo {
  position: absolute;
  right: 20px;
  bottom: 18px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(13, 39, 70, 0.16);
}

@media (max-width: 980px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
   Contact page column order

   Karen wants the contact details at the top. On a phone that is
   literal — the card comes first, above a long form. On desktop
   the form still reads first with the card beside it, so the
   source order is card-then-form and the columns are reordered.
   ------------------------------------------------------------- */
.contact-split > aside {
  order: 2;
}

.contact-split > div {
  order: 1;
}

@media (max-width: 980px) {
  /* single column: card first, so the phone number is the first
     thing on screen rather than sitting under the whole form */
  .contact-split > aside {
    order: 0;
  }
}

/* -------------------------------------------------------------
   Mobile refinements

   Most visitors to a site like this arrive on a phone, often in a
   hurry and often outdoors. Tap targets, the phone button and the
   emergency wording all matter more than they do on desktop.
   ------------------------------------------------------------- */
@media (max-width: 720px) {
  .guarantee-band .container {
    flex-direction: column;
    gap: 8px;
  }

  .guarantee-band p {
    font-size: 0.98rem;
  }

  .badge-mark.wide {
    width: 100%;
    max-width: 260px;
  }

  .business-card {
    padding: 22px 20px 20px;
  }

  .page-hero h1,
  .hero h1 {
    overflow-wrap: break-word;
  }

  /* the long audience label is the widest heading on the site */
  .audience-card h3 {
    font-size: 1.05rem;
  }

  .quote {
    padding: 20px;
  }

  .steps li {
    padding: 20px 20px 20px 68px;
  }

  .steps li::before {
    left: 16px;
    top: 20px;
  }
}

@media (max-width: 520px) {
  .logo-wall {
    grid-template-columns: 1fr 1fr;
  }

  .guarantee-badge b {
    font-size: 2.2rem;
  }

  .card-photo {
    width: 58px;
    height: 58px;
    font-size: 1.1rem;
  }
}

/* -------------------------------------------------------------
   Brand lockup at narrow widths

   "GRAYBURN PROPERTY SERVICES" is about 250px of unbreakable text.
   Once the viewport drops below roughly 640px it collides with the
   phone and menu buttons, so it steps down and then goes entirely —
   the logo already reads GPS, and the link keeps its aria-label, so
   nothing is lost for screen readers.
   ------------------------------------------------------------- */
.brand {
  min-width: 0;
}

@media (max-width: 820px) {
  .brand-kicker {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }

  .brand-logo {
    max-height: 50px;
  }
}

@media (max-width: 640px) {
  /* logo only from here down */
  .brand-copy {
    display: none;
  }

  .brand-logo {
    max-height: 46px;
  }

  .bar {
    gap: 10px;
  }
}

/* On the narrowest phones the hamburger stands alone — the word costs
   about 55px, which is the difference between fitting and not on a
   320px screen. aria-label on the button keeps it announced. */
@media (max-width: 400px) {
  .menu-word {
    display: none;
  }

  .menu-toggle {
    padding: 10px 12px;
  }
}

/* -------------------------------------------------------------
   Holding page

   A placeholder while the real projects content is gathered. Kept in
   the site's own shape rather than copying the gps1.co.nz standalone
   cover — that page has no header, so its logo and company name earn
   their place. Here they would repeat what is directly above.
   ------------------------------------------------------------- */
.holding-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 38px 34px;
  text-align: center;
}

.holding-card h2 {
  margin: 0 0 12px;
  font-size: 1.45rem;
}

.holding-card p {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--muted);
}

.holding-card .hero-actions {
  justify-content: center;
  margin-top: 26px;
}

@media (max-width: 520px) {
  .holding-card {
    padding: 28px 22px;
  }
}

/* -------------------------------------------------------------
   Report sample cards
   ------------------------------------------------------------- */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.report-card {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.report-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.report-thumb {
  display: grid;
  place-items: center;
  height: 120px;
  background: linear-gradient(160deg, var(--brand-soft), #dbe9ff);
  color: var(--brand);
  border-bottom: 1px solid var(--border);
}

.report-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 64px;
}

.report-bars i {
  display: block;
  width: 13px;
  background: currentColor;
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
}

.report-line svg {
  width: 130px;
  height: 64px;
}

.report-dial {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(currentColor 0 82%, rgba(255, 255, 255, 0.7) 82% 100%);
}

.report-dial b {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}

.report-body {
  display: grid;
  gap: 6px;
  padding: 18px 20px 20px;
}

.report-body strong {
  font-size: 1.02rem;
}

.report-body span {
  color: var(--muted);
  font-size: 0.92rem;
}

.report-cta {
  color: var(--brand) !important;
  font-weight: 700;
  font-size: 0.86rem !important;
}

/* -------------------------------------------------------------
   Emergency callout band

   Karen: this has to be impossible to miss, and on every page.
   Competitors offer the same service and promote it poorly, so it
   is treated as a headline rather than a footnote.
   ------------------------------------------------------------- */
.emergency-band {
  /* Deeper than --text so it reads as the darkest block on the page.
     Impact comes from contrast and placement, not from a colour that
     fights the rest of the palette — a red band on a navy-and-blue
     site draws the eye by clashing, which is not the same thing as
     drawing it by standing out. Amber appears only where it carries
     meaning — the kicker, the promise line and the call button — so
     the field stays in palette while still reading as urgent. */
  background: #071120;
  background-image:
    radial-gradient(120% 140% at 50% 0%, #12294a 0%, #071120 62%);
  color: #fff;
  padding: 46px 0;
  /* No gold rule across the top. The band already announces itself by
     being the darkest block on the page, and the amber is better spent
     on the kicker, the promise line and the button — things that carry
     meaning — than on decorating an edge. The tone change from the pale
     section above is a hard enough boundary on its own. */
}

.emergency-inner {
  display: grid;
  gap: 22px;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.emergency-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

/* the quiet pulse is the only motion on the page — enough to catch
   the eye in peripheral vision without being a flashing banner */
.emergency-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(240, 180, 41, 0.65);
  animation: emergency-pulse 2.4s ease-out infinite;
}

@keyframes emergency-pulse {
  70% { box-shadow: 0 0 0 11px rgba(240, 180, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .emergency-kicker::before { animation: none; }
}

.emergency-band h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.emergency-band p {
  margin: 0 auto;
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.88);
}

.emergency-strap {
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.88rem;
  color: var(--amber) !important;
  padding-top: 4px;
}

.emergency-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
  background: var(--amber);
  color: #10233d;
  border-radius: 999px;
  padding: 15px 32px;
  font-size: 1.22rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(240, 180, 41, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.emergency-call:hover {
  background: var(--amber-bright);
  box-shadow: 0 16px 38px rgba(240, 180, 41, 0.38);
}

.emergency-call:hover {
  transform: translateY(-2px);
}

.emergency-call svg {
  width: 22px;
  height: 22px;
}

/* Compact strip for the interior pages */
.emergency-band.slim {
  padding: 26px 0;
}

.emergency-band.slim .emergency-inner {
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
  gap: 16px 28px;
  max-width: none;
}

.emergency-band.slim h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.emergency-band.slim .emergency-call {
  font-size: 1.05rem;
  padding: 13px 24px;
}

@media (max-width: 820px) {
  .report-grid {
    grid-template-columns: 1fr;
  }

  .emergency-band.slim .emergency-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .emergency-band.slim .emergency-call {
    justify-self: center;
  }
}

/* -------------------------------------------------------------
   Storm response figures
   ------------------------------------------------------------- */
.response-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.95rem;
}

.response-table th,
.response-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.response-table th {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.response-table td:nth-child(2),
.response-table td:nth-child(3) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.response-table tbody tr:last-child td {
  border-bottom: 0;
}

.response-table strong {
  color: var(--text);
}

.table-scroll {
  overflow-x: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   Audience tiles — headings and a link only

   Karen asked for the blurbs to come off so the four read as a
   clean row of doors. The link is pushed to the bottom of the card
   so all four sit on the same line whatever the heading length.
   ------------------------------------------------------------- */
.audience-card {
  grid-template-rows: 1fr auto;
  min-height: 152px;
}

.audience-card .more {
  align-self: end;
}

/* -------------------------------------------------------------
   What We Restore & Maintain — icon, heading, expandable blurb
   ------------------------------------------------------------- */
.restore-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.restore-card {
  display: grid;
  align-content: start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.restore-card:hover {
  box-shadow: var(--shadow);
  border-color: rgba(0, 86, 214, 0.2);
}

.restore-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.restore-icon svg {
  width: 25px;
  height: 25px;
}

.restore-card h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.3;
}

.restore-card details > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Shared "Show more" control for the restore tiles and Why GPS */
.restore-card summary,
.steps.collapsible summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--brand);
}

.restore-card summary::-webkit-details-marker,
.steps.collapsible summary::-webkit-details-marker {
  display: none;
}

.restore-card summary::after,
.steps.collapsible summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.restore-card details[open] summary::after,
.steps.collapsible details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.restore-card details[open] summary,
.steps.collapsible details[open] summary {
  color: var(--brand-dark);
}

/* -------------------------------------------------------------
   Why GPS — heading visible, body behind a Show more
   ------------------------------------------------------------- */
.steps.collapsible li {
  padding: 20px 24px 20px 78px;
}

.steps.collapsible summary {
  font-size: 1rem;
  color: var(--text);
}

.steps.collapsible summary h3 {
  display: inline;
  margin: 0;
  font-size: 1.08rem;
}

.steps.collapsible summary::after {
  color: var(--brand);
  margin-left: 4px;
}

.steps.collapsible details > p {
  margin: 12px 0 0;
}

.steps.collapsible details > p:first-of-type {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .restore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .restore-grid {
    grid-template-columns: 1fr;
  }

  .audience-card {
    min-height: 0;
  }
}

/* The hero lost its "Who we work with" box, so it is one column now.
   Karen asked for the headline and blurb to run the same width as the
   About introduction, so both use the 1100px measure. */
.hero-shell {
  grid-template-columns: minmax(0, 1fr);
}

.hero-content {
  max-width: 1100px;
}

.hero-content .hero-copy {
  max-width: none;
}