/*
Theme Name: One Park Lane Apartments
Theme URI: https://oneparklaneapartments.com.au
Description: Buyer enquiry site for One Park Lane, Southport, on the shared Datum/HTW pattern. Run by NextKey, which promotes the project; sales are by the appointed selling agent. Availability, prices and areas on the front page are dated and come from the developer's partner price list. Change the date whenever the table changes.
Author: NextKey
Version: 1.2.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: All rights reserved
Text Domain: one-park-lane
*/

/* ============================================================
   One Park Lane Apartments — brand tokens

   The tower is dark sculptural glass against a pale sky, and the
   developer's own price list is set in champagne on white. So the
   ground here is a near-black charcoal and the single accent is
   that champagne, which only ever appears on the dark.
   ============================================================ */
:root {
  --deep:        #0F1215;
  --deep-2:      #181D22;
  --volt:        #CFAE82;
  --volt-deep:   #B9966A;
  --volt-dim:    rgba(207,174,130,.14);
  --volt-edge:   rgba(207,174,130,.5);
  --on-volt:     #14171A;

  --paper:       #FAF9F6;
  --sheet:       #FFFFFF;
  --band:        #F1EEE8;
  --ink:         #16191C;
  --ink-2:       #4A5056;
  --ink-3:       #7F858B;
  --line:        #E3DFD7;
  --line-2:      #BDB6A9;

  --accent:      #7A5C33;   /* champagne darkened until it passes on white */
  --accent-deep: #5E4525;
  --accent-wash: #F4EEE4;

  --brass:       #7A5C33;
  --brass-lite:  #CFAE82;
  --brass-wash:  #F4EEE4;
  --brass-dim:   rgba(207,174,130,.14);
  --brass-edge:  rgba(207,174,130,.26);
  --brass-edge-2:rgba(207,174,130,.5);

  --on-dark:     #F1EEE8;
  --on-dark-2:   #B4B0A8;
  --on-hero:     #E6E2DA;

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    Manrope, "Helvetica Neue", "Segoe UI", -apple-system, Arial, sans-serif;
  --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono:    Manrope, "Helvetica Neue", "Segoe UI", -apple-system, Arial, sans-serif;

  --display-weight: 500;
  --display-weight-2: 500;
  --display-track: -.012em;
  --display-track-2: -.008em;
  --btn-radius: 0;

  --hero-grade: saturate(.92) contrast(1.04) brightness(.9);
  --hero-scrim:
    linear-gradient(96deg, rgba(15,18,21,.9) 0%, rgba(15,18,21,.72) 20%,
                           rgba(15,18,21,.34) 40%, rgba(15,18,21,.06) 60%, rgba(15,18,21,0) 100%),
    linear-gradient(to bottom, rgba(15,18,21,.45) 0%, rgba(15,18,21,0) 20%,
                               rgba(15,18,21,0) 72%, rgba(15,18,21,.6) 100%);
}

/* ============================================================
   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. */
.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; }

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

/* ============================================================
   One Park Lane — what this site adds to the shared system
   ============================================================ */

/* A serif display face wants more size and less tightness than the
   grotesques the system was drawn for. */
h1 { line-height: 1.0; }
.hero h1 { max-width: 13ch; }
.pull p { font-size: 1.36rem; line-height: 1.4; }
.route h3, .note-card h3, .tier { font-size: 1.5rem; }
.bench span, .btn, .navlinks a, .utility .tel, .herokicker, .heronote { font-weight: 600; }

.mark .name { font-size: 1.62rem; letter-spacing: .01em; }
.mark .sub2 { letter-spacing: .24em; }

/* The tower fills the frame top to bottom, so the hero is tall and
   anchored on the upper part of the picture. */
.hero .bg img { object-position: 62% 30%; }
.heroinner { padding-block: 132px 150px; min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.imgnote {
  position: absolute; right: 18px; bottom: 74px; z-index: 4; margin: 0;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* Picture beside words. */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.split.flip > figure { order: -1; }
.split figure { margin: 0; position: relative; }
.split figure img { display: block; width: 100%; height: auto; }
.split figcaption, .small {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin-top: 10px;
}
section.dark .small, section.dark .split figcaption { color: var(--on-dark-2); opacity: .85; }
.small { margin-top: 22px; max-width: 84ch; }

/* Availability ledger. */
table.ledger td.lvl { white-space: nowrap; color: var(--ink-2); font-size: 15px; }
table.ledger .price { font-family: var(--display); font-size: 1.7rem; letter-spacing: 0; white-space: nowrap; }
.asat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 22px 0 0; }

/* Level list. */
.levels { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.22); }
.levels li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: baseline; }
.levels .lv { font-family: var(--display); font-size: 1.7rem; color: var(--volt); line-height: 1; }
.levels .am { color: var(--on-dark); font-size: 16px; }

/* Enquiry form (Contact Form 7). */
.enquire { background: var(--deep); color: var(--on-dark); padding: 96px 0; }
.enquire h2 { color: #fff; }
.enquire p { color: var(--on-dark-2); }
.enquire a { color: var(--volt); }
.enquiregrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; }
.formcard { background: var(--deep-2); border: 1px solid rgba(255,255,255,.1); border-top: 2px solid var(--volt); padding: 34px 32px 30px; }
.formcard label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 600; margin-bottom: 18px; }
.formcard input[type=text], .formcard input[type=email], .formcard input[type=tel], .formcard select, .formcard textarea {
  display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border-radius: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.22); color: #fff;
  font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-transform: none;
}
.formcard select option { color: #16191C; }
.formcard textarea { min-height: 110px; resize: vertical; }
.formcard input:focus, .formcard select:focus, .formcard textarea:focus { outline: 2px solid var(--volt); outline-offset: 1px; border-color: var(--volt); }
.formcard input[type=submit] {
  appearance: none; cursor: pointer; border-radius: 0; width: 100%;
  background: var(--volt); color: var(--on-volt); border: 1px solid var(--volt);
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 22px; margin-top: 4px;
}
.formcard input[type=submit]:hover { background: var(--volt-deep); border-color: var(--volt-deep); }
.formcard .wpcf7-not-valid-tip { color: #F3B4A6; font-size: 13px; letter-spacing: 0; text-transform: none; margin-top: 6px; display: block; }
.formcard .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px 14px !important; border: 1px solid var(--volt-edge) !important; color: var(--on-dark); font-size: 14.5px; }
.formcard .wpcf7-spinner { display: block; margin: 10px auto 0; }
.formcard .consent { font-size: 12.5px; line-height: 1.6; color: var(--on-dark-2); margin: 16px 0 0; }
.contactlines { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.contactlines li { font-size: 15.5px; color: var(--on-dark); }
.contactlines b { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--volt); font-weight: 600; margin-bottom: 3px; }

.legal h4 { color: var(--on-dark); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; font-weight: 600; }

@media (max-width: 1000px) {
  .split, .enquiregrid { grid-template-columns: 1fr; gap: 34px; }
  .split.flip > figure { order: 0; }
  .heroinner { min-height: 0; padding-block: 96px 120px; }
}
@media (max-width: 620px) {
  .levels li { grid-template-columns: 96px 1fr; }
  .formcard { padding: 26px 20px 24px; }
  .imgnote { bottom: 14px; right: 12px; }
  .hero .bg img { object-position: 58% 20%; }
}

/* The nav is sticky, so a section reached by an anchor link stops below it. */
[id] { scroll-margin-top: 84px; }

/* Tables inside a page's own writing, such as the full price list. */
.prose .tablescroll { margin: 28px 0; }
.prose .tablescroll table { margin: 0; min-width: 720px; }
.prose .tablescroll th, .prose .tablescroll td { white-space: nowrap; padding: 12px 16px; }
.prose.wide { max-width: 100ch; }
.prose .herobtns { margin-top: 30px; }
.prose .btn { color: #fff; }

/* Update cards on the front page link through to the post. */
.note-card h3 a { color: inherit; text-decoration: none; }
.note-card h3 a:hover { color: var(--accent); }
.postcard .more { color: var(--accent); }