/* ---------------------------------------------------------------------------
   Prime — bond origination & home finance (172). STRUCTURAL MOVE: the four
   oversized terracotta figures are welded into a full-bleed slate band clamped
   between the two mirrored 50/50 splits, so the about run reads photograph /
   numbers / photograph and that band is the ONLY thing on the page that leaves
   the container. Slate carries the two-tier bar at the top and the dusk closing
   band at the foot; everything between them is one unbroken sheet of bone paper.
   Terracotta appears three times only: the button fills, those figures, and the
   48px rule under every heading. The utility strip is drawn on .ws-nav::before
   because the section model has no slot for it, and its padding is calculated so
   the strip bleeds while its type lands on the same left edge as the wordmark.
   The shared renderer has no scroll-state hook, so the bar is solid slate from
   the first pixel rather than fading in over the stage.
   The zebra tint in the base sheet is (0,4,0), so the two painted bands are set
   at body.t-prime.ws-body .ws-section.<class> to outrank it.
   --------------------------------------------------------------------------- */
body.t-prime.ws-body { --bg: #f7f4ef; --fg: #5a6169; --heading: #16202a; --text: #5a6169; --muted: #8d949c;
  --pr-slate: #1f2a33; --pr-clay: #b4552f; --pr-line: rgba(22,32,42,0.13); }
body.t-prime { background: #f7f4ef; color: #16202a; }
body.t-prime.ws-body .ws-section, body.t-prime.ws-body .ws-section:nth-child(even) { background: #f7f4ef; padding: 100px 0; }

/* two tiers: a full-bleed hairline strip over the real bar, wordmark hard left */
body.t-prime .ws-nav { background: var(--pr-slate); backdrop-filter: none; border-bottom: 0; }
body.t-prime .ws-nav::before { content: 'Mon–Fri 08:00–17:00 · Saturday by appointment · 021 914 3080'; display: block; padding: 8px max(22px, calc((100% - 1120px) / 2 + 22px)); border-bottom: 1px solid rgba(247,244,239,0.16); color: rgba(247,244,239,0.6); font-size: 10px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
body.t-prime .ws-brand { color: #f7f4ef; font-size: 14px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
body.t-prime .ws-nav-links a { color: rgba(247,244,239,0.76); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 1; }
body.t-prime .ws-nav-links a:hover, body.t-prime .ws-nav-links a.on { color: #f7f4ef; border-bottom-color: var(--pr-clay); }

/* the stage: full viewport, copy centred, three hairline dashes for three slides */
body.t-prime .ws-hero { min-height: 100vh; --hero-a: rgba(16,22,28,0.34); --hero-b: rgba(16,22,28,0.66); }
body.t-prime.ws-body .ws-hero h1 { font-size: clamp(38px, 6.4vw, 82px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; max-width: 16ch; text-shadow: none; }
body.t-prime .ws-hero-slides::after { content: ''; position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: 84px; height: 2px; background: repeating-linear-gradient(to right, rgba(247,244,239,0.85) 0 20px, transparent 20px 32px); }
body.t-prime.ws-body .btn.brand { background: var(--pr-clay); color: #f7f4ef; border-radius: 0; padding: 17px 32px; font-size: 11px; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; box-shadow: none; }
body.t-prime.ws-body .btn.brand:hover { background: #97431f; }

/* every heading stands on a 48px clay rule — centred on the contained blocks,
   ranged left on the two splits so the pair reads as a matched spread */
body.t-prime .ws-h2, body.t-prime .ws-story-copy h2 { color: var(--heading); font-size: clamp(23px, 3vw, 33px); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 26px; padding-bottom: 20px; position: relative; }
body.t-prime .ws-h2::after, body.t-prime .ws-story-copy h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 48px; height: 3px; background: var(--pr-clay); }
body.t-prime .ws-h2::after { left: 50%; margin-left: -24px; }

/* four icons, contained and gapped — the reference's four service tabs flattened */
body.t-prime .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
body.t-prime .ws-feature { text-align: left; padding: 0; }
body.t-prime .ws-feature-icon { color: var(--heading); margin-bottom: 18px; }
body.t-prime .ws-feature h3 { color: var(--heading); font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.55; margin: 0 0 12px; }
body.t-prime .ws-feature p, body.t-prime .ws-story-copy p, body.t-prime .ws-sub { color: var(--text); font-size: 15px; line-height: 1.75; }
body.t-prime .ws-story-media img { border-radius: 0; aspect-ratio: 5 / 4; }

/* THE HINGE — the only band on the page that leaves the container */
body.t-prime.ws-body .ws-section.ws-columns { background: var(--pr-slate); padding: 84px 0; }
body.t-prime .ws-col { text-align: left; border-left: 1px solid rgba(247,244,239,0.16); padding-left: 24px; }
body.t-prime .ws-col-h { color: var(--pr-clay); font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 0 0 14px; }
body.t-prime .ws-col p { color: rgba(247,244,239,0.66); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.75; text-transform: uppercase; margin: 0; }

/* the hoisted form: bare underlines, submit flush left under the last field */
body.t-prime .ws-form { max-width: 460px; gap: 26px; }
body.t-prime .ws-field label { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
body.t-prime .ws-field input, body.t-prime .ws-field textarea, body.t-prime .ws-field select { background: none; border: 0; border-bottom: 1px solid var(--pr-line); border-radius: 0; padding: 12px 0; color: var(--heading); }
body.t-prime .ws-form .btn.brand { align-self: flex-start; }

/* six quotes, three across and two down, on rules instead of cards */
body.t-prime .ws-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 34px; }
body.t-prime .ws-quote { background: none; border: 0; border-top: 1px solid var(--pr-line); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
body.t-prime .ws-quote blockquote { color: var(--heading); font-size: 15px; line-height: 1.7; }
body.t-prime .ws-quote blockquote::before { content: none; }

/* the close: dusk slate, one line, and the phone number set as the second slab */
body.t-prime.ws-body .ws-section.ws-cta { background-image: linear-gradient(rgba(31,42,51,0.90), rgba(31,42,51,0.94)), url("/media/samples/prm_cta_street.jpg"); background-size: cover; background-position: center; padding: 118px 0; }
body.t-prime .ws-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; max-width: 800px; }
body.t-prime .ws-cta-inner h2 { flex: 1 0 100%; margin: 0 0 14px; font-size: clamp(24px, 3.2vw, 36px); }
body.t-prime .ws-cta-inner p { order: 2; margin: 0; background: rgba(247,244,239,0.12); color: #f7f4ef; padding: 17px 32px; font-size: 11px; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; opacity: 1; }
body.t-prime.ws-body .ws-cta .btn.brand { order: 1; background: var(--pr-clay); color: #f7f4ef; }
body.t-prime .ws-footer { background: var(--pr-slate); border-top: 0; color: rgba(247,244,239,0.6); }

@media (max-width: 900px) {
  body.t-prime.ws-body .ws-section { padding: 64px 0; }
  body.t-prime .ws-features-grid, body.t-prime .ws-testimonials-grid, body.t-prime .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-prime .ws-nav::before { font-size: 9px; letter-spacing: 0.09em; }
}
@media (max-width: 560px) {
  body.t-prime .ws-features-grid, body.t-prime .ws-testimonials-grid { grid-template-columns: 1fr; }
}

/* night */
html[data-theme="dark"] body.t-prime.ws-body { --bg: #141a1f; --fg: #99a2ab; --heading: #eef1f4; --text: #99a2ab; --muted: #78818a;
  --pr-slate: #0d1216; --pr-clay: #cf6a3c; --pr-line: rgba(238,241,244,0.15); }
html[data-theme="dark"] body.t-prime { background: #141a1f; color: #eef1f4; }
html[data-theme="dark"] body.t-prime.ws-body .ws-section, html[data-theme="dark"] body.t-prime.ws-body .ws-section:nth-child(even) { background: #141a1f; }
html[data-theme="dark"] body.t-prime.ws-body .ws-section.ws-columns { background: var(--pr-slate); }
html[data-theme="dark"] body.t-prime.ws-body .ws-section.ws-cta { background-image: linear-gradient(rgba(13,18,22,0.92), rgba(13,18,22,0.96)), url("/media/samples/prm_cta_street.jpg"); }