/*
Theme Name: SilverBridge Advisory
Theme URI: https://silverbridgeadvisory.com
Author: SilverBridge Advisory
Author URI: https://silverbridgeadvisory.com
Description: Custom one-page theme for SilverBridge Advisory.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: silverbridge
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready

Theme stylesheet: design tokens, typography, buttons, hero, focus
cards, and section layout for the one-page site. Font paths are
relative to this file (theme root); see assets/fonts/*.woff2.
*/

/* ============================================================
   1. SELF-HOSTED FONTS
   ============================================================ */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces[SOFT,WONK,opsz,wght].woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Core dark */
  --color-ink:            #101B2D;
  --color-slate:          #1E2E44;

  /* Warm light grounds */
  --color-parchment:      #F7F3EC;

  /* Accents */
  --color-bronze:         #B08D4F;
  --color-bronze-soft:    #C9A76A;
  --color-jade:           #1F6B5C;
  --color-jade-bright:    #2A9D8F;

  /* Text */
  --color-text-primary:   #101B2D;
  --color-graphite:       #4A5361;
  --color-text-on-dark:   #EDE7DB;
  --color-mist:           #A9B2BF;

  /* Lines & structure */
  --color-hairline:       #DED7CA;
  --color-hairline-dark:  #2C3B50;

  /* Functional */
  --color-focus:          #2A9D8F;

  /* Typography */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;

  --type-display:  5.25rem;
  --type-h1:       3.5rem;
  --type-h2:       2.75rem;
  --type-h3:       1.625rem;
  --type-lead:     1.375rem;
  --type-body:     1.1875rem;
  --type-body-sm:  1rem;
  --type-label:    0.8125rem;
  --type-nav:      0.9375rem;
  --type-button:   0.9375rem;
  --type-caption:  0.8125rem;

  /* Spacing (8px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 144px;
  --space-12: 160px;

  /* Grid */
  --max-content:   1240px;
  --outer-margin:  96px;

  /* Motion */
  --dur-quick:      140ms;
  --dur-base:       240ms;
  --dur-slow:       620ms;
  --ease-standard:  cubic-bezier(.2, 0, 0, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out:    cubic-bezier(.65, 0, .35, 1);
  --ease-spring:    cubic-bezier(.34, 1.4, .64, 1);
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bronze);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body-sm);
  text-decoration: none;
  border-radius: 0;
  transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-parchment);
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-jade);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
}
a:hover { color: var(--color-jade-bright); }
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }

/* ============================================================
   4. CONTAINER & TYPOGRAPHY ELEMENTS
   ============================================================ */
.container {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--outer-margin);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--color-text-primary);
  font-weight: 400;
  font-feature-settings: "liga" 1, "calt" 1;
  font-variant-numeric: oldstyle-figures;
  text-wrap: balance;
}

h1 { font-size: var(--type-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--type-h2); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; }
h3 { font-size: var(--type-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; }

.section-label {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bronze);
  display: block;
  margin-bottom: var(--space-4);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: 1.6;
  color: var(--color-graphite);
  max-width: 42rem;
  text-wrap: balance;
}

.prose { max-width: 42rem; }
.prose p { text-wrap: pretty; }
.prose p + p { margin-top: 1.25em; }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-jade);
  color: var(--color-parchment);
  padding: 14px 26px;
  border-radius: 0;
  border: 1px solid var(--color-jade);
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary__arrow {
  display: inline-block;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-spring);
}
.btn-primary:hover {
  background: var(--color-jade-bright);
  border-color: var(--color-jade-bright);
  color: var(--color-parchment);
}
.btn-primary:hover .btn-primary__arrow { transform: translateX(4px); }
.btn-primary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-primary--compact { padding: 10px 18px; font-size: 0.875rem; }

.link-cta {
  display: inline-block;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: none;
  border: none;
  padding: 4px 0;
  border-bottom: 1.5px solid var(--color-bronze);
  background-image: linear-gradient(var(--color-bronze), var(--color-bronze));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--dur-base) var(--ease-in-out);
  text-decoration: none;
  cursor: pointer;
}
.link-cta:hover { background-size: 100% 1.5px; color: var(--color-ink); }
.link-cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.dark-band .link-cta,
.link-cta--on-dark {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-bronze-soft);
  background-image: linear-gradient(var(--color-bronze-soft), var(--color-bronze-soft));
}
.dark-band .link-cta:hover,
.link-cta--on-dark:hover { color: var(--color-text-on-dark); }

/* ============================================================
   6. NAVIGATION (masthead)
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  background: var(--color-parchment);
  border-bottom: 1px solid var(--color-hairline);
  transition: height 360ms var(--ease-standard), box-shadow 360ms var(--ease-standard);
}
.site-nav.is-scrolled {
  height: 60px;
  box-shadow: 0 1px 0 var(--color-hairline);
}

/* Keep the fixed nav below the WordPress admin toolbar when logged in. */
body.admin-bar .site-nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-nav { top: 46px; }
}

.nav-inner {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--outer-margin);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---- Wordmark lockup (nav + footer share this) ---- */
.nav-wordmark,
.footer-wordmark-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
  text-decoration: none;
}
.nav-wordmark .custom-logo { max-height: 40px; width: auto; }

.wordmark-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1;
  white-space: nowrap;
}
.wordmark-suffix {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-bronze);
  line-height: 1;
  margin-right: -0.42em; /* optical: flush the trailing tracking gap */
}

.nav-wordmark:focus-visible,
.footer-wordmark-lockup:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 2px;
}
.nav-wordmark:hover .wordmark-suffix,
.footer-wordmark-lockup:hover .wordmark-suffix {
  color: var(--color-bronze-soft);
}

/* Dot + rule marker used before eyebrow labels and above the footer wordmark. */
.motif-span {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.motif-span::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-bronze);
}
.motif-span::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-hairline);
  max-width: 220px;
}
.dark-band .motif-span::after,
.slate-band .motif-span::after,
.site-footer .motif-span::after {
  background: var(--color-hairline-dark);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-item {
  font-family: var(--font-body);
  font-size: var(--type-nav);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-graphite);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}
.nav-item:hover { color: var(--color-ink); }
.nav-item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-cta-btn { margin-left: var(--space-5); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  z-index: 150;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-9) var(--space-6);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out-quart);
}
.nav-mobile-overlay.is-open { display: flex; opacity: 1; }

.nav-mobile-overlay .nav-item {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-text-on-dark);
  letter-spacing: -0.01em;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-hairline-dark);
  width: 100%;
  display: block;
}
.nav-mobile-overlay .nav-item:hover { color: var(--color-bronze-soft); }
.nav-mobile-cta { margin-top: var(--space-7); }

/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-hairline-dark);
}

.footer-wordmark { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-wordmark-lockup .wordmark-name { font-size: 1.3125rem; color: var(--color-parchment); }
.footer-wordmark-lockup .wordmark-suffix { color: var(--color-bronze-soft); }
.footer-mission {
  font-size: var(--type-body-sm);
  color: var(--color-mist);
  line-height: 1.5;
  max-width: 24rem;
}
.footer-locale {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bronze-soft);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  text-align: right;
}
.footer-contact__label {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bronze);
}
.footer-contact__email {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-text-on-dark);
  border-bottom: 1.5px solid var(--color-bronze-soft);
  line-height: 1.3;
}
.footer-contact__email:hover { color: var(--color-bronze-soft); }
.footer-contact__linkedin {
  font-size: var(--type-body-sm);
  color: var(--color-mist);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
}
.footer-contact__linkedin:hover { color: var(--color-text-on-dark); }

.footer-bottom {
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-legal { font-size: var(--type-caption); color: var(--color-mist); line-height: 1.5; }

/* ============================================================
   8. SECTION STRUCTURE & HAIRLINES
   ============================================================ */
.section { padding-block: var(--space-10); }        /* positioning */
.section--tight { padding-block: var(--space-9); }  /* focus */
.section--statement { padding-block: var(--space-11); } /* why now */
.section--generous { padding-block: var(--space-12); }   /* contact */

.dark-band { background: var(--color-ink); }
.dark-band h1, .dark-band h2, .dark-band h3 { color: var(--color-text-on-dark); }
.dark-band p, .dark-band .lead { color: var(--color-mist); }

.slate-band { background: var(--color-slate); }
.slate-band h1, .slate-band h2, .slate-band h3 { color: var(--color-text-on-dark); }
.slate-band p, .slate-band .lead { color: var(--color-mist); }

.section-header {
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-8);
}
.dark-band .section-header,
.slate-band .section-header { border-bottom-color: var(--color-hairline-dark); }

/* ============================================================
   9. HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: calc(72px + var(--space-9));
  padding-bottom: var(--space-10);
  background: var(--color-ink);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; max-width: 52rem; }
.hero .motif-span { margin-bottom: var(--space-6); }
.hero h1 { color: var(--color-text-on-dark); margin-top: var(--space-5); margin-bottom: var(--space-5); }
.hero .lead { color: var(--color-mist); margin-bottom: var(--space-7); }
.hero-actions { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }

.hero--home h1 {
  font-size: var(--type-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

/* Suspension-bridge line figure, hero background, right half. */
.span-figure {
  position: absolute;
  inset: 0 -4% auto auto;
  height: 100%;
  width: min(54%, 740px);
  color: var(--color-bronze-soft);
  pointer-events: none;
  z-index: 0;
}
.span-figure line,
.span-figure path {
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.sf-deck { opacity: .28; }
.sf-towers line {
  opacity: 0;
  animation: sf-fade-towers var(--dur-slow) var(--ease-out-quart) 700ms forwards;
}
.sf-hangers line {
  opacity: 0;
  animation: sf-fade-hangers var(--dur-slow) var(--ease-out-quart) 900ms forwards;
}
.sf-cable {
  stroke-width: 1.5;
  opacity: .85;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: sf-draw 1400ms var(--ease-out-quart) 250ms forwards;
}
.sf-node {
  fill: var(--color-bronze);
  stroke: none;
  opacity: 0;
  animation: sf-fade-nodes var(--dur-base) var(--ease-standard) 1500ms forwards;
}
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-fade-towers { to { opacity: .30; } }
@keyframes sf-fade-hangers { to { opacity: .18; } }
@keyframes sf-fade-nodes { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sf-cable { stroke-dashoffset: 0; animation: none; }
  .sf-towers line { opacity: .30; animation: none; }
  .sf-hangers line { opacity: .18; animation: none; }
  .sf-node { opacity: 1; animation: none; }
}

@media (max-width: 1023px) {
  .span-figure { display: none; }
}

.positioning-intro h2 { margin-bottom: var(--space-5); max-width: 30ch; }

/* ============================================================
   10. WHAT-WE-BRING ROW
   ============================================================ */
.bring-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}
.bring-row__label {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bronze);
  flex: none;
}
.bring-row__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bring-row__item {
  font-size: var(--type-body-sm);
  color: var(--color-graphite);
  position: relative;
  padding-left: var(--space-4);
}
.bring-row__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-bronze-soft);
}

/* ============================================================
   10B. HOW IT STARTS — numbered steps, reusing the focus-row
   rail language (Fraunces bronze numerals, hairline separators).
   ============================================================ */
.how-start-block {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}
.how-start-block .bring-row__label { display: block; margin-bottom: var(--space-5); }
.how-start {
  list-style: none;
  margin: 0;
  padding: 0;
}
.how-start__item {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-hairline);
}
.how-start__item:last-child { border-bottom: none; padding-bottom: 0; }
.how-start__num {
  flex: none;
  font-family: var(--font-heading);
  font-variant-numeric: oldstyle-figures;
  font-size: var(--type-caption);
  color: var(--color-bronze);
}
.how-start__text {
  margin: 0;
  font-size: var(--type-body-sm);
  color: var(--color-graphite);
  line-height: 1.6;
}

/* ============================================================
   11. FOCUS AREAS — editorial label rail + row list
   ============================================================ */
.section-rail {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-7);
  align-items: start;
}
.section-rail__label { padding-top: var(--space-1); }

.focus-list {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-hairline);
}

/* Focus rows align along a vertical rail with node markers. */
.focus-row {
  position: relative;
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
  padding-left: 3.25rem;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-hairline);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.focus-row::after {
  content: '';
  position: absolute;
  left: 1.55rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-hairline);
}
.focus-row::before {
  content: '';
  position: absolute;
  left: calc(1.55rem - 3px);
  top: calc(var(--space-6) + .25em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-parchment);
  border: 1.5px solid var(--color-bronze);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-spring);
  z-index: 1;
}
.focus-row:hover { border-bottom-color: var(--color-bronze); }
.focus-row:hover::before { background: var(--color-bronze); transform: scale(1.15); }

.focus-row__num {
  position: absolute;
  left: 0;
  top: calc(var(--space-6) + .15em);
  width: auto;
  font-family: var(--font-heading);
  font-variant-numeric: oldstyle-figures;
  font-size: var(--type-caption);
  color: var(--color-bronze);
}
.focus-row__body {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-7);
}
.focus-row__title {
  flex: 1 1 15rem;
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.focus-row__blurb {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 1rem;
  color: var(--color-graphite);
  line-height: 1.5;
}

/* ============================================================
   11B. WHY NOW — full-measure pull-statement
   ============================================================ */
.section--statement { position: relative; overflow: hidden; }
.span-echo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
}
.statement { position: relative; z-index: 1; max-width: 54rem; }
.statement__rule {
  display: block;
  width: 2px;
  height: 56px;
  background: var(--color-bronze);
  margin-bottom: var(--space-6);
}
.statement .statement__kicker {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-bronze-soft);
  margin-bottom: var(--space-6);
}
.statement__body {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.statement__cta { margin-top: var(--space-6); }

/* ============================================================
   12. ENQUIRY PANEL
   ============================================================ */
.enquiry-panel {
  border-top: 1px solid var(--color-hairline-dark);
  padding-top: var(--space-6);
}
.enquiry-panel__label {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bronze);
  display: block;
  margin-bottom: var(--space-5);
}
.enquiry-panel__steps { margin: 0; padding: 0; list-style: none; }
.enquiry-panel__steps li {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-hairline-dark);
  color: var(--color-mist);
  line-height: 1.5;
}
.enquiry-panel__steps li:first-child { padding-top: 0; }
.enquiry-panel__steps span {
  flex: none;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-bronze-soft);
  font-variant-numeric: oldstyle-figures;
  line-height: 1.4;
}
.enquiry-panel__link {
  display: inline-block;
  margin-top: var(--space-6);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 600;
  border-bottom: 1.5px solid var(--color-bronze-soft);
  transition: color var(--dur-quick) var(--ease-standard);
}
.enquiry-panel__link:hover { color: var(--color-bronze-soft); }

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-direct a {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-text-on-dark);
  border-bottom: 1.5px solid var(--color-bronze-soft);
}
.contact-direct a:hover { color: var(--color-bronze-soft); }

/* ============================================================
   13. UTILITIES
   ============================================================ */
.mt-5 { margin-top: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }
.on-dark-muted { color: var(--color-mist); }

.two-col {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-9);
  align-items: start;
}

/* Scroll-reveal state; see IntersectionObserver in main.js. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-quart);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 1279px) {
  :root { --outer-margin: 48px; }
  .container { padding-inline: 48px; }
  .nav-inner { padding-inline: 48px; }
}

@media (max-width: 1023px) {
  :root {
    --outer-margin: 32px;
    --type-display: 3rem;
    --type-h1: 2.5rem;
    --type-h2: 2rem;
    --type-h3: 1.5rem;
  }
  .container { padding-inline: 32px; }
  .nav-inner { padding-inline: 32px; }
  .section-rail { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-contact { align-items: flex-start; text-align: left; }
}

@media (max-width: 767px) {
  :root {
    --outer-margin: 24px;
    --type-display: 2.5rem;
    --type-h1: 2.125rem;
    --type-h2: 1.75rem;
    --type-h3: 1.375rem;
    --type-lead: 1.1875rem;
    --type-body: 1.0625rem;
  }
  .container { padding-inline: 24px; }
  .nav-inner { padding-inline: 24px; }

  .nav-links { display: none; }
  .nav-cta-btn { display: none; }
  .nav-hamburger { display: flex; }

  .section { padding-block: var(--space-8); }
  .section--generous { padding-block: var(--space-9); }
  .section--tight { padding-block: var(--space-7); }
  .section--statement { padding-block: var(--space-8); }

  .bring-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .focus-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .two-col { grid-template-columns: 1fr; gap: var(--space-7); }

  .hero { padding-top: calc(72px + var(--space-7)); padding-bottom: var(--space-8); }
  .hero-actions { flex-direction: column; align-items: flex-start; }

  .nav-mobile-overlay .nav-item { font-size: 1.5rem; }
}