/*
Theme Name: NextKey Property Strategists
Theme URI: https://nextkey.com.au
Description: The NextKey site rebuilt on the Datum/HTW pattern — dark full-bleed video hero, utility nav, credentials strip and hard dark/light section rhythm. Brand navy and gold carried over from the existing site; wording carried over verbatim.
Author: NextKey
Version: 1.0.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: nextkey-strategists
*/

/* ============================================================
   NextKey Property Strategists — brand tokens

   The existing site's two colours are the whole identity: the
   navy #1B1F44 it sets every heading and outline in, and the
   gold #DA9845 it uses on the numbered markers. Here the navy
   becomes the ground the page alternates onto and the gold
   becomes the single high-voltage accent that only ever appears
   on it — which is what stops a two-colour brand reading flat
   at this scale.
   ============================================================ */
:root {
  --deep:        #062A44;   /* the ground, darkened from the brand navy */
  --deep-2:      #0A3D62;   /* the brand navy, straight off the logo */
  --volt:        #E8890B;   /* the logo orange, lifted to read on the navy */
  --volt-deep:   #C9760A;
  --volt-dim:    rgba(232,137,11,.16);
  --volt-edge:   rgba(232,137,11,.45);
  --on-volt:     #10222E;

  --paper:       #FAFAF8;
  --sheet:       #FFFFFF;
  --band:        #EFF3F6;
  --ink:         #10222E;
  --ink-2:       #45596B;
  --ink-3:       #7A8B99;
  --line:        #DFE5EA;
  --line-2:      #B7C3CC;

  --accent:      #0A3D62;   /* on light, the action colour is the brand navy */
  --accent-deep: #062A44;
  --accent-wash: #E7EEF4;

  --brass:       #0D6E6E;   /* the logo teal, used where a second voice is needed */
  --brass-lite:  #7ACDCD;
  --brass-wash:  #E4F2F2;
  --brass-dim:   rgba(122,205,205,.16);
  --brass-edge:  rgba(122,205,205,.28);
  --brass-edge-2:rgba(122,205,205,.45);

  --on-dark:     #EAF1F6;
  --on-dark-2:   #A3B6C4;
  --on-hero:     #D5E2EB;

  --display: Archivo, "Helvetica Neue", "Segoe UI", -apple-system, Arial, sans-serif;
  --sans:    Archivo, "Helvetica Neue", "Segoe UI", -apple-system, Arial, sans-serif;
  --serif:   "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --display-weight: 800;
  --display-weight-2: 700;
  --display-track: -.033em;
  --display-track-2: -.026em;
  --btn-radius: 999px;

  --hero-grade: saturate(.95) contrast(1.05) brightness(.88);
  --hero-scrim:
    linear-gradient(96deg, rgba(6,42,68,.92) 0%, rgba(6,42,68,.78) 18%,
                           rgba(6,42,68,.46) 40%, rgba(6,42,68,.16) 64%, rgba(6,42,68,.04) 100%),
    linear-gradient(to bottom, rgba(6,42,68,.55) 0%, rgba(6,42,68,0) 22%,
                               rgba(6,42,68,0) 74%, rgba(6,42,68,.52) 100%);

  --creds-cols: 5;
  --routes-cols: 3;
  --stats-cols: 4;
}

/* The hues are the brand's in either scheme; only their jobs swap. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1020; --sheet: #151932; --band: #12162B;
    --ink: #E8EBF4; --ink-2: #AEB6CC; --ink-3: #7C8398;
    --line: #262B47; --line-2: #3A4162;
    --accent: #6FA8CC; --accent-deep: #9AC6E4; --accent-wash: #102A3C;
    --deep: #04202F; --deep-2: #0A3D62;
  }
}
:root[data-theme="dark"] {
  --paper: #0D1020; --sheet: #151932; --band: #12162B;
  --ink: #E8EBF4; --ink-2: #AEB6CC; --ink-3: #7C8398;
  --line: #262B47; --line-2: #3A4162;
  --accent: #6FA8CC; --accent-deep: #9AC6E4; --accent-wash: #102A3C;
  --deep: #04202F; --deep-2: #0A3D62;
}
/* ============================================================
   Shared site system — ported from the Datum Valuations build.

   Structure and rhythm are borrowed from the national firms
   (HTW et al): sticky dark nav with a utility cluster, an alert
   band, a dark full-bleed hero carrying video, a credentials
   strip straddling the hero's bottom edge, then hard alternation
   between dark and light sections, closing on a dark CTA.

   Every colour and typeface here is a token. A brand supplies the
   :root block above this file and changes nothing below it, which
   is what keeps three sites recognisably one family while staying
   unmistakably themselves.
   ============================================================ */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: 32px; }
.measure { max-width: 62ch; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--volt);
  color: var(--deep); padding: 10px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

section { padding: 92px 0; border-bottom: 1px solid var(--line); }
section.band { background: var(--band); }

/* Full-bleed dark sections. The contrast rhythm — not the hue — is
   what gives the majors their punch, so the page alternates hard. */
section.dark { background: var(--deep); color: var(--on-dark); border-bottom-color: rgba(255,255,255,.08); }
section.dark h2 { color: #fff; }
section.dark .sub, section.dark p { color: var(--on-dark-2); }
section.dark .bench span { color: var(--volt); }
section.dark .bench::after { background: rgba(255,255,255,.14); }
section.dark .route { background: var(--deep-2); border-color: rgba(255,255,255,.1); }
section.dark .route:hover { border-color: var(--volt); }
section.dark .route h3 { color: #fff; }
section.dark .route p { color: var(--on-dark-2); }
section.dark .route .tagline, section.dark .route a.more { color: var(--volt); }
section.dark .never article { background: var(--deep-2); border-color: rgba(255,255,255,.1); border-left-color: var(--volt); }
section.dark .never h3 { color: #fff; }
section.dark .never p { color: var(--on-dark-2); }
section.dark .checklist li { color: var(--on-dark-2); }
section.dark .checklist li b { color: #fff; }
section.dark .checklist li::before { border-color: var(--volt); }
section.dark .steps { border-top-color: rgba(255,255,255,.22); }
section.dark .steps li { border-bottom-color: rgba(255,255,255,.1); }
section.dark .steps li h3 { color: #fff; }
section.dark .steps li p { color: var(--on-dark-2); }
section.dark .steps li::before { color: var(--volt); }
section.dark .pull { background: rgba(255,255,255,.05); border-left-color: var(--volt); }
section.dark .pull p { color: var(--on-dark); }
section.dark .faq { border-top-color: rgba(255,255,255,.22); }
section.dark .faq details { border-bottom-color: rgba(255,255,255,.1); }
section.dark .faq summary { color: #fff; }
section.dark .faq summary::after { color: var(--volt); }
section.dark .faq .a { color: var(--on-dark-2); }

/* Display type. Weight and tracking are tokens because one of these
   brands speaks in a serif and the others in a heavy grotesque. */
h1 {
  font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: clamp(3rem, 6.6vw, 5.6rem); line-height: .97; margin: 0 0 26px;
}
h2 {
  font-family: var(--display); font-weight: var(--display-weight-2); letter-spacing: var(--display-track-2);
  font-size: clamp(1.9rem, 3.7vw, 2.9rem); line-height: 1.09; margin: 0 0 16px;
}
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; margin: 0 0 8px; letter-spacing: -.008em; }
p { margin: 0 0 16px; }
.lede { font-size: 1.24rem; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.sub { color: var(--ink-2); }
a { color: var(--accent); }

/* eyebrow rule */
.bench { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.bench::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.bench span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* Uppercase letterspaced action labels with a chevron: a convention
   all the majors use and none of them owns. */
.btn {
  display: inline-flex; align-items: center; gap: 10px; border-radius: var(--btn-radius);
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 14px 22px; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn::after { content: "\203A"; font-size: 16px; line-height: 1; margin-top: -2px; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent-wash); }
.btn.ondark { background: var(--volt); color: var(--on-volt); border-color: var(--volt); font-weight: 600; }
.btn.ondark:hover { background: var(--volt-deep); border-color: var(--volt-deep); }
.btn.ondark.ghost { background: transparent; color: var(--volt); border-color: var(--volt-edge); }
.btn.ondark.ghost:hover { border-color: var(--volt); background: var(--volt-dim); }

/* ---------- nav with the majors' utility cluster ---------- */
nav.sitenav { background: var(--deep); position: sticky; top: 0; z-index: 30; }
.navrow { display: flex; align-items: center; gap: 22px; padding-block: 14px; flex-wrap: wrap; }
.mark { display: flex; align-items: center; gap: .78rem; color: var(--on-dark); text-decoration: none; }
.mark svg { color: var(--volt); flex: none; }
.mark .name {
  font-family: var(--display); font-weight: var(--display-weight); font-size: 1.4rem;
  letter-spacing: var(--display-track); display: block; line-height: 1.02;
}
.mark .sub2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .21em;
  text-transform: uppercase; color: var(--volt); display: block; margin-top: 4px; opacity: .85;
}
/* Takes the space left between the wordmark and the utility cluster and
   wraps its own list inside it. Shrinking here is what keeps the phone
   number and the button on the first row instead of pushing them to a
   second one — and wrapping is what stops the list printing over them. */
/* ---------- real brand artwork ----------
   Where a brand has an actual logo file it is used, reversed for the dark
   ground. Height is the only dimension set, so the artwork's own proportions
   survive; width:auto plus the intrinsic attributes avoid a layout shift. */
.mark .logo { display: block; height: 44px; width: auto; }
.mark .suffix {
  font-family: var(--display); font-weight: var(--display-weight); font-size: 1.32rem;
  letter-spacing: var(--display-track); color: var(--on-dark); line-height: 1;
  padding-left: .78rem; margin-left: .2rem; border-left: 1px solid rgba(255,255,255,.28);
}
footer.sitefoot .mark .logo { height: 40px; }
@media (max-width: 520px) { .mark .logo { height: 34px; } .mark .suffix { font-size: 1.05rem; } }

.navlinks { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-left: 6px; flex: 1 1 240px; min-width: 0; }
.navlinks a, .navlinks li > a {
  white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-2); text-decoration: none;
}
.navlinks a:hover, .navlinks .current-menu-item > a { color: var(--volt); }
.navlinks ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.utility { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; flex: none; }
.utility .tel {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-2); text-decoration: none;
}
.utility .tel:hover { color: var(--on-dark); }

/* Mobile menu, CSS-only. A hidden checkbox drives it, so the nav still
   opens if the theme's script is blocked or fails to load. */
/* Off entirely on desktop: the burger is not rendered there, and a focusable
   control that does nothing visible is worse than no control. It comes back as
   visually-hidden — never display:none, which cannot take focus — at the width
   where the burger actually appears. */
.navtoggle { display: none; }
.navburger {
  display: none; margin-left: auto; cursor: pointer; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.22); color: var(--on-dark);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- alert band ---------- */
.alert { background: var(--deep-2); border-top: 1px solid var(--brass-edge); }
.alertrow { display: flex; align-items: center; gap: 22px; padding-block: 15px; flex-wrap: wrap; }
.alert .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--brass-lite); border: 1px solid var(--brass-edge-2); padding: 4px 10px; white-space: nowrap;
}
.alert p { margin: 0; color: var(--on-dark); font-size: 15px; flex: 1 1 340px; }
.alert a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass-lite); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--brass-edge-2); padding-bottom: 2px;
}
.alert a:hover { color: var(--volt); border-color: var(--volt); }

/* ---------- dark full-bleed hero ---------- */
.hero { position: relative; background: var(--deep); color: var(--on-dark); overflow: hidden; border: none; padding: 0; }
.hero .bg { position: absolute; inset: 0; }
/* Stacking order is explicit. Both layers are absolutely positioned, so
   without this the poster — being later in the DOM — paints ON TOP of
   the video and a perfectly good loop plays invisibly underneath. */
.hero .bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: 1; z-index: 1;
  filter: var(--hero-grade);
  animation: heroDrift 19s ease-in-out infinite; will-change: transform;
}
/* If playback is refused — a locked-down browser, a backgrounded tab —
   the hero still moves, on CSS alone, with no script and no permission. */
@keyframes heroDrift {
  0%   { transform: scale(1.02) translate3d(1.2%, 0.6%, 0); }
  50%  { transform: scale(1.16) translate3d(-2.2%, -1.6%, 0); }
  100% { transform: scale(1.02) translate3d(1.2%, 0.6%, 0); }
}
/* The video is the upgrade, not the baseline: it stays invisible until
   it is genuinely presenting frames, so a video parked on frame one can
   never sit on top of the moving still and read as broken. */
.hero .bg .herovid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 2; filter: var(--hero-grade);
  opacity: 0; transition: opacity .8s ease;
}
.hero.playing .bg .herovid { opacity: 1; }
.hero.playing .bg img { animation: none; }
/* Legibility comes from a directional gradient, so the footage stays
   visible on the right instead of the whole frame dimming to nothing. */
.hero .scrim { position: absolute; inset: 0; z-index: 3; background: var(--hero-scrim); }
.heroinner { position: relative; z-index: 4; padding-block: 112px 96px; }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 34px rgba(0,0,0,.72); }
.hero h1 .hl { color: var(--volt); }
.hero .lede { color: var(--on-hero); font-size: 1.26rem; max-width: 50ch; text-shadow: 0 1px 20px rgba(0,0,0,.78); }
.herobtns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.heronote {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--volt); margin: 30px 0 0;
}
.herokicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--volt); margin: 0 0 20px;
}

/* credentials strip, riding the join between dark and light */
.credswrap { position: relative; margin-top: -58px; z-index: 5; }
.creds {
  display: grid; grid-template-columns: repeat(var(--creds-cols, 5), minmax(0, 1fr));
  background: var(--sheet); border: 1px solid var(--line); margin: 0;
  box-shadow: 0 1px 0 rgba(10,21,18,.06);
}
.creds > div { padding: 22px 22px 24px; border-right: 1px solid var(--line); }
.creds > div:last-child { border-right: none; }
.creds dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.creds dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }

/* ---------- proof numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--stats-cols, 4), minmax(0, 1fr)); margin-top: 40px; border-top: 2px solid var(--line-2); }
.stats > div { padding: 26px 24px 24px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: none; }
.stats .n {
  font-family: var(--display); font-weight: var(--display-weight); letter-spacing: -.03em;
  font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block;
}
.stats .l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 12px; display: block; line-height: 1.6;
}
section.dark .stats { border-top-color: rgba(255,255,255,.24); }
section.dark .stats > div { border-right-color: rgba(255,255,255,.1); }
section.dark .stats .n { color: var(--volt); }
section.dark .stats .l { color: var(--on-dark-2); }
.hero .stats { border-top-color: rgba(255,255,255,.28); margin-top: 46px; }
.hero .stats > div { border-right-color: rgba(255,255,255,.14); padding-left: 24px; }
.hero .stats > div:first-child { padding-left: 0; }
.hero .stats .n { color: var(--volt); }
.hero .stats .l { color: var(--on-hero); }

/* ---------- sector cards ---------- */
.routes { display: grid; grid-template-columns: repeat(var(--routes-cols, 3), minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.route {
  background: var(--sheet); border: 1px solid var(--line); padding: 30px 28px 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .16s ease, transform .16s ease;
}
.route:hover { border-color: var(--line-2); transform: translateY(-2px); }
.route .tagline {
  font-family: var(--mono); font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.route h3 { font-family: var(--display); font-size: 1.32rem; font-weight: var(--display-weight-2); letter-spacing: -.018em; line-height: 1.15; }
.route p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.route a.more {
  margin-top: auto; padding-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.route a.more::after { content: "\203A"; font-size: 15px; }
.route a.more:hover { color: var(--accent-deep); text-decoration: underline; }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.checklist li b { color: var(--ink); font-weight: 600; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border: 1px solid var(--accent); transform: rotate(45deg);
}

/* the serif survives only here, where the page speaks in its own voice */
.pull { border-left: 3px solid var(--accent); background: var(--accent-wash); padding: 24px 28px; margin-top: 38px; }
.pull p { margin: 0; font-family: var(--serif); font-size: 1.18rem; line-height: 1.48; color: var(--ink); }

.steps { list-style: none; counter-reset: s; margin: 34px 0 0; padding: 0; border-top: 2px solid var(--line-2); }
.steps li {
  counter-increment: s; display: grid; grid-template-columns: 62px 1fr;
  gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.steps li p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.steps li .when {
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-top: 8px;
}

.never { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.never article { border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 24px 26px; background: var(--sheet); }
.never p { margin: 0; font-size: 15.5px; color: var(--ink-2); }

.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.face { background: var(--sheet); border: 1px solid var(--line); display: flex; flex-direction: column; }
.face figure { margin: 0; position: relative; }
.face img { display: block; width: 100%; height: 232px; object-fit: cover; }
.face figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; background: linear-gradient(to top, rgba(6,12,10,.86), rgba(6,12,10,0));
  padding: 22px 14px 8px;
}
.face .body { padding: 22px 24px 26px; }
.face h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; }
.face p { margin: 0; font-size: 15px; color: var(--ink-2); }

.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.note-card { border-top: 2px solid var(--line-2); padding-top: 18px; }
.note-card .kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.note-card h3 { font-family: var(--display); font-size: 1.16rem; font-weight: var(--display-weight-2); line-height: 1.24; letter-spacing: -.015em; }
.note-card p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* ---------- comparison ledger ---------- */
.tablescroll { overflow-x: auto; border: 1px solid var(--line); background: var(--sheet); margin-top: 34px; }
table.ledger { width: 100%; border-collapse: collapse; min-width: 640px; }
table.ledger th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  padding: 16px 22px; border-bottom: 2px solid var(--line-2);
}
table.ledger th.n, table.ledger td.n { text-align: right; }
table.ledger td { padding: 24px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ledger tr:last-child td { border-bottom: none; }
.tier { font-family: var(--display); font-weight: var(--display-weight-2); font-size: 1.18rem; letter-spacing: -.018em; margin-bottom: 5px; }
.what { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.price {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block; letter-spacing: -.02em;
}
.gst { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }

.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; border: 1px solid var(--line); }
.contrast > div { padding: 26px 28px; background: var(--sheet); }
.contrast > div:first-child { border-right: 1px solid var(--line); background: var(--band); }
.contrast h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px; font-weight: 400;
}
.contrast p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.contrast .yes { color: var(--ink); }

.faq { border-top: 2px solid var(--line-2); margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 22px 40px 22px 0; font-weight: 600; font-size: 17px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 19px; font-family: var(--mono); font-size: 18px; color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 44px 24px 0; color: var(--ink-2); font-size: 15.5px; max-width: 74ch; }

.ph {
  background: var(--brass-wash); color: var(--brass); border-bottom: 1px dotted var(--brass);
  font-family: var(--mono); font-size: .88em; padding: 1px 4px;
}

/* ---------- voices ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.quote { background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 28px 26px 24px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.quote .who {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 18px; display: block;
}
section.dark .quote { background: var(--deep-2); border-color: rgba(255,255,255,.1); border-top-color: var(--volt); }
section.dark .quote blockquote { color: var(--on-dark); }
section.dark .quote .who { color: var(--on-dark-2); }

/* ---------- closing CTA ---------- */
.cta { background: var(--deep); color: var(--on-dark); padding: 104px 0; border: none; }
.cta h2 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.cta p { color: var(--on-dark-2); max-width: 54ch; font-size: 1.1rem; }
.cta .herobtns { margin-top: 28px; }
.cta .heronote { color: var(--volt); }

/* ---------- footer ---------- */
footer.sitefoot { background: var(--deep-2); color: var(--on-dark-2); padding: 64px 0 44px; }
.footgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
footer.sitefoot .mark { margin-bottom: 16px; }
footer.sitefoot .mark svg { color: var(--volt); }
footer.sitefoot .blurb { font-size: 14.5px; max-width: 34ch; line-height: 1.6; }
footer.sitefoot h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark); margin: 0 0 14px; font-weight: 400;
}
footer.sitefoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer.sitefoot a { color: var(--on-dark-2); text-decoration: none; font-size: 14.5px; }
footer.sitefoot a:hover { color: var(--on-dark); }
footer.sitefoot li { font-size: 14.5px; }
.legal { margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(238,243,240,.14); }
.legal p { font-size: 12.5px; line-height: 1.62; color: var(--on-dark-2); max-width: 94ch; }
.legal .ph { background: var(--brass-dim); color: var(--brass-lite); border-color: var(--brass-lite); }

/* ---------- inner pages and posts ----------
   Everything WordPress renders through page.php / single.php lands here.
   The point is that an editor adding a page in the admin gets a page that
   already belongs to the design, without touching a template. */
.pagehead { background: var(--deep); color: var(--on-dark); padding: 84px 0 76px; }
.pagehead h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 20ch; margin-bottom: 18px; }
.pagehead .bench span { color: var(--volt); }
.pagehead .bench::after { background: rgba(255,255,255,.14); }
.pagehead .lede { color: var(--on-hero); }
.pagehead .meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-2); margin-top: 14px;
}

/* ---------- masthead carrying a page's own hero image ----------
   Pages built under the previous theme each open with their own hero image and
   wording. Those are lifted into this masthead (see inc/inline-hero.php) so an
   inner page gets the same treatment as the front page instead of a flat band. */
.pagehead { position: relative; overflow: hidden; }
.pagehead.has-media { padding: 104px 0 96px; }
.pagehead .bg { position: absolute; inset: 0; z-index: 1; }
.pagehead .bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--hero-grade); }
.pagehead .scrim { position: absolute; inset: 0; z-index: 2; background: var(--hero-scrim); }
.pagehead > .wrap { position: relative; z-index: 3; }
.pagehead.has-media h1 { text-shadow: 0 2px 34px rgba(0,0,0,.72); }
.pagehead.has-media .lede { text-shadow: 0 1px 20px rgba(0,0,0,.78); }
.pagehead .herobtns { margin-top: 26px; }

/* A second hero further down a page is left in place rather than hoisted, so it
   still needs styling — as does the old theme's button class, which appears in
   body copy on its own. */
.prose .nk-hero {
  position: relative; overflow: hidden; margin: 40px 0; padding: 54px 38px;
  background: var(--deep) center/cover no-repeat;
}
.prose .nk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%);
}
.prose .nk-hero .nk-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; z-index: 0;
}
.prose .nk-hero > *, .prose .nk-hero .nk-hero__in, .prose .nk-hero .nk-hero-inner { position: relative; z-index: 2; }
.prose .nk-hero h1, .prose .nk-hero h2, .prose .nk-hero p { color: #fff; }
.prose .nk-hero h1 { margin-bottom: 14px; }

.nk-btn {
  display: inline-flex; align-items: center; gap: 10px; border-radius: var(--btn-radius);
  background: var(--volt); color: var(--on-volt); border: 1px solid var(--volt);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 14px 22px; text-decoration: none;
}
.nk-btn::after { content: "ƒA"; font-size: 16px; line-height: 1; margin-top: -2px; }
.nk-btn:hover { background: var(--volt-deep); border-color: var(--volt-deep); }

@media (max-width: 620px) {
  .pagehead.has-media { padding: 76px 0 68px; }
  .prose .nk-hero { padding: 38px 24px; }
}

.prose { max-width: 74ch; padding: 74px 0 90px; font-size: 17px; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 52px 0 16px; }
.prose h3 { font-size: 1.24rem; margin: 38px 0 10px; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.68; }
.prose li { margin-bottom: 8px; }
.prose strong, .prose b { color: var(--ink); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose img, .prose figure { margin: 32px 0; }
.prose figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); margin-top: 8px; }
.prose blockquote {
  margin: 32px 0; padding: 22px 26px; border-left: 3px solid var(--accent);
  background: var(--accent-wash); font-family: var(--serif); font-size: 1.14rem; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 44px 0; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--band); padding: 2px 6px; }

/* Content that brings its own layout is not squeezed into the prose measure. */
.prose--full { max-width: none; padding-top: 54px; }
.prose--full > style:first-child + * { margin-top: 0; }

.cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.postcard { background: var(--sheet); border: 1px solid var(--line); display: flex; flex-direction: column; }
.postcard img { display: block; width: 100%; height: 190px; object-fit: cover; }
.postcard .body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.postcard .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.postcard h3 { font-family: var(--display); font-size: 1.2rem; font-weight: var(--display-weight-2); line-height: 1.22; letter-spacing: -.015em; margin: 0; }
.postcard h3 a { color: var(--ink); text-decoration: none; }
.postcard h3 a:hover { color: var(--accent); }
.postcard p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.postcard .more { margin-top: auto; padding-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); text-decoration: none; }

.pager { display: flex; gap: 12px; margin-top: 48px; flex-wrap: wrap; }
.pager a, .pager span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid var(--line-2); color: var(--ink-2); text-decoration: none;
}
.pager .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .navrow { flex-wrap: wrap; }
  .navlinks { gap: 15px; }
  .navlinks ul { gap: 15px; }
}
@media (max-width: 1100px) {
  /* Row one keeps the wordmark, the call to action and the burger together;
     the links become the drawer underneath. Letting the utility cluster take a
     row of its own instead left the main button stranded under the logo. */
  .navburger { display: inline-block; order: 3; margin-left: 12px; }
  .navtoggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .navtoggle:focus-visible + .navburger { outline: 2px solid var(--volt); outline-offset: 2px; }
  .utility { margin-left: auto; order: 2; width: auto; gap: 12px; }
  .navlinks {
    display: none; order: 4; width: 100%; flex-direction: column; align-items: flex-start;
    gap: 0; margin: 8px 0 6px; border-top: 1px solid rgba(255,255,255,.12); flex-basis: 100%;
  }
  .navlinks ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  /* The padding belongs to the link so the whole row is the tap target, and
     to the link ONLY — setting it on the item as well stacked two lots of
     padding and made every row twice as tall as it needed to be. */
  .navlinks li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .navlinks li a { display: block; width: 100%; padding: 13px 0; }
  .navlinks > a { display: block; width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .navtoggle:checked ~ .navlinks { display: flex; }
  .navrow .mark { margin-right: 0; }
}
@media (max-width: 520px) {
  /* Everything actionable stays on one row at phone width: on these sites the
     phone number is the highest-intent tap there is, so it is compacted rather
     than pushed onto a line of its own. */
  .utility { gap: 10px; }
  .utility .tel { font-size: 10.5px; letter-spacing: .04em; }
  .utility .btn { padding: 12px 15px; font-size: 10.5px; letter-spacing: .09em; gap: 7px; }
  .navburger { margin-left: 8px; padding: 9px 10px; font-size: 9.5px; letter-spacing: .14em; }
  .mark .name { font-size: 1.18rem; }
}
@media (max-width: 1000px) {
  .faces, .quotes, .cardgrid { grid-template-columns: 1fr; }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds > div { border-bottom: 1px solid var(--line); }
  .creds > div:nth-child(2n) { border-right: none; }
  .routes, .notes { grid-template-columns: 1fr; }
  .cols, .never, .contrast { grid-template-columns: 1fr; }
  .contrast > div:first-child { border-right: none; border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(2n) { border-right: none; }
  .hero .stats > div { padding-left: 0; }
  .hero .stats > div:nth-child(2n) { padding-left: 24px; }
  .footgrid { grid-template-columns: 1fr 1fr; }
  .heroinner { padding-block: 84px 72px; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 20px; }
  .creds { grid-template-columns: 1fr; }
  .creds > div { border-right: none; }
  .stats { grid-template-columns: 1fr; }
  .stats > div { border-right: none; border-bottom: 1px solid var(--line); }
  .hero .stats > div:nth-child(2n) { padding-left: 0; }
  .footgrid { grid-template-columns: 1fr; }
  section { padding: 66px 0; }
  .heroinner { padding-block: 62px 54px; }
  .cta { padding: 76px 0; }
  .prose { padding: 52px 0 66px; }
}