/* Sahota Services, site styles
   One proportion runs through everything: the golden ratio (φ ≈ 1.618).
   Spacing follows the Fibonacci sequence, type steps by √φ and φ,
   and two-column layouts split 61.8 / 38.2. */

:root {
  /* colour */
  --navy: #0B1F33;
  --navy-deep: #081726;
  --navy-2: #112A44;
  --paper: #FAFAF7;
  --paper-2: #F2EFE7;
  --white: #FFFFFF;
  --rule: #DAD6CB;
  --rule-strong: #B9B3A4;
  --text: #1B2733;
  --muted: #4A5663;
  --on-dark: #DCE4EC;
  --on-dark-muted: #B4C2CF;
  --on-dark-faint: #8FA2B4;
  --brass: #7A5F2A;
  --brass-light: #C2A25E;
  --brass-wash: #F5F0E3;

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fibonacci spacing, in px */
  --f1: 3px; --f2: 5px; --f3: 8px; --f4: 13px; --f5: 21px;
  --f6: 34px; --f7: 55px; --f8: 89px; --f9: 144px;

  /* φ type scale from a 17px base */
  --t-13: 0.8125rem;  /* 13 */
  --t-15: 0.9375rem;  /* 15 */
  --t-17: 1.0625rem;  /* 17  base */
  --t-21: 1.3125rem;  /* 21  base·√φ */
  --t-27: 1.71875rem; /* 27.5 base·φ */
  --t-34: 2.125rem;   /* 34  base·φ·√φ */
  --t-44: 2.78rem;    /* 44.5 base·φ² */
  --t-72: 4.5rem;     /* 72  base·φ³ */

  --phi: 1.618;
  --max: 1220px;
  --pad: clamp(21px, 4vw, 55px);
  --section: clamp(55px, 8vw, 144px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 89px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-17);
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brass); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--brass-light); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brass-light); color: var(--navy); }

.skip-link {
  position: absolute; left: 13px; top: -89px; z-index: 100;
  background: var(--navy); color: var(--white); padding: 13px 21px; text-decoration: none;
}
.skip-link:focus { top: 13px; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  margin: 0; letter-spacing: -0.014em; line-height: 1.1;
  font-optical-sizing: auto; text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.4vw, var(--t-72)); line-height: 1.03; letter-spacing: -0.022em; }
h2 { font-size: clamp(2rem, 3.6vw, var(--t-44)); }
h3 { font-size: var(--t-27); line-height: 1.18; }
p { margin: 0 0 1em; text-wrap: pretty; }

/* Eyebrow: a small golden rectangle (8 × 13) leads every label */
.eyebrow {
  display: flex; align-items: center; gap: var(--f4);
  margin: 0 0 var(--f5);
  font-family: var(--sans); font-size: var(--t-13); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass);
}
.eyebrow::before {
  /* the brass centre bar of the mark */
  content: ""; flex: none; width: 21px; height: 3px; background: var(--brass-light);
}
.lede { font-size: var(--t-21); line-height: 1.55; color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--f3);
  min-height: 55px; padding: var(--f4) var(--f6);
  font-family: var(--sans); font-size: var(--t-17); font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; border-radius: 2px;
  border: 1.5px solid var(--navy); background: var(--navy); color: var(--white);
  transition: background .21s var(--ease), color .21s var(--ease), border-color .21s var(--ease), transform .21s var(--ease);
}
.btn::after { content: "\2192"; font-weight: 500; transition: transform .21s var(--ease); }
.btn:hover { background: var(--navy-deep); color: var(--white); }
.btn:hover::after { transform: translateX(3px); }
.btn-outline { background: transparent; color: var(--navy); }
.btn-outline::after { content: none; }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-light:hover { background: var(--paper-2); color: var(--navy); border-color: var(--paper-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--f4); }
button.btn { font: inherit; font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(250, 250, 247, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(13px); backdrop-filter: saturate(1.4) blur(13px);
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50;
}
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--f3) var(--f6); padding-top: var(--f4); padding-bottom: var(--f4);
}
.brand { display: inline-flex; align-items: center; gap: var(--f4); text-decoration: none; color: var(--navy); }
/* Operations S: four navy blocks and the brass centre bar (the owner) */
.brand-mark { flex: none; width: 31px; height: 34px; display: block; }
.brand-mark .b { fill: var(--navy); }
.brand-mark .c { fill: var(--brass-light); }
.brand-name { font-family: var(--sans); font-size: 1.40625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.brand-name small {
  display: block; margin-top: var(--f2);
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.brand:hover .brand-name { color: var(--navy); }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--f2) var(--f6); font-size: var(--t-15); font-weight: 500; }
.main-nav a { color: var(--text); text-decoration: none; padding: var(--f2) 0; border-bottom: 1.5px solid transparent; transition: color .21s var(--ease), border-color .21s var(--ease); }
.main-nav a:not(.btn):hover, .main-nav a[aria-current="page"]:not(.btn) { color: var(--navy); border-bottom-color: var(--brass-light); }
.main-nav .btn { min-height: 44px; padding: var(--f3) var(--f5); color: var(--white); border-bottom: 1.5px solid var(--navy); font-size: var(--t-15); }
.main-nav .btn::after { content: none; }
.main-nav .btn:hover, .main-nav .btn[aria-current="page"] { color: var(--white); border-bottom-color: var(--navy-deep); }

/* ---------- Sections ---------- */
section { padding: var(--section) 0; }
.section-head { max-width: 764px; margin-bottom: clamp(34px, 5vw, 55px); }
.section-head h2 + p { margin-top: var(--f5); }
.rule-top { border-top: 1px solid var(--rule); }
.bg-2 { background: var(--paper-2); }
section.tight { padding: clamp(34px, 5vw, 89px) 0; }

/* ---------- The golden motif ----------
   A Fibonacci tiling with its spiral, drawn as hairlines. Used quietly
   behind dark heroes and the closing call to action. */
.hero-dark, .page-hero.dark { position: relative; overflow: hidden; isolation: isolate; }
.hero-dark::before, .page-hero.dark::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: min(64vw, 900px); aspect-ratio: 1.618 / 1;
  transform: translateY(-50%);
  background: url("/img/golden.svg") no-repeat center / contain;
  opacity: .38;
}
.hero-dark::after, .page-hero.dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(61.8% 89% at 78% 42%, rgba(194, 162, 94, .13), transparent 70%);
}

/* ---------- Hero ---------- */
.hero { padding: clamp(55px, 9vw, 144px) 0 clamp(55px, 8vw, 89px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: clamp(34px, 6vw, 89px); align-items: center; }
.hero h1 { margin-bottom: var(--f6); }
.hero .lede { margin-bottom: var(--f6); }
.hero-meta { margin-top: var(--f6); padding-top: var(--f5); border-top: 1px solid var(--rule); font-size: var(--t-15); color: var(--muted); }

.hero-dark { background: var(--navy); color: var(--on-dark); padding: clamp(55px, 9vw, 144px) 0; }
.hero-dark h1 { color: var(--white); font-size: clamp(2.75rem, 6vw, 5.06rem); line-height: 1.02; margin-bottom: var(--f6); }
.hero-dark .eyebrow { color: var(--brass-light); }
.hero-dark h1 + .hero-sub { margin-top: calc(-1 * var(--f4)); }
.hero-sub { font-family: var(--serif); font-size: clamp(1.45rem, 2.4vw, var(--t-27)); line-height: 1.25; letter-spacing: -0.01em; color: var(--brass-light); margin: 0 0 var(--f5); }
.hero-dark .lede { color: var(--on-dark-muted); margin-bottom: var(--f6); max-width: 29em; }
.hero-dark .btn { background: var(--white); color: var(--navy); border-color: var(--white); }
.hero-dark .btn:hover { background: var(--brass-light); border-color: var(--brass-light); color: var(--navy); }
.hero-dark .btn-outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.hero-dark .btn-outline:hover { background: rgba(255, 255, 255, .08); color: var(--white); border-color: var(--white); }

/* Hub diagram: core, inner ring and outer ring step by φ (68 · 110 · 178) */
.hub { width: 100%; max-width: 540px; margin: 0 auto; }
.hub .ring { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.hub .ring.gold { stroke: rgba(194, 162, 94, .55); }
.hub .spoke { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.hub .node { fill: var(--navy-2); stroke: rgba(194, 162, 94, .7); stroke-width: 1.2; }
.hub .node.on { fill: var(--brass-light); stroke: var(--brass-light); }
.hub .ico { fill: var(--white); }
.hub .node.on + .ico { fill: var(--navy); }
.hub .core { fill: var(--white); }
.hub .core-t { fill: var(--navy); font-family: var(--serif); font-size: 32px; text-anchor: middle; }
.hub .core-s { fill: var(--muted); font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-anchor: middle; text-transform: uppercase; }
.hub .lbl { fill: var(--on-dark); font-family: var(--sans); font-size: 17px; font-weight: 500; text-anchor: middle; }

/* ---------- Panels and lists ---------- */
.panel { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: clamp(21px, 3vw, 34px); }
.panel h2 { font-size: var(--t-27); margin-bottom: var(--f3); }
.panel .small { font-size: var(--t-15); color: var(--muted); margin-bottom: var(--f5); }
.check-list, .rule-list { list-style: none; margin: 0; padding: 0; }
.check-list li, .rule-list li { position: relative; padding: var(--f4) 0 var(--f4) var(--f6); border-top: 1px solid var(--rule); }
.rule-list li:last-child { border-bottom: 1px solid var(--rule); }
.check-list li::before, .rule-list li::before, .bullets-6 li::before {
  content: ""; position: absolute; left: 3px; top: calc(var(--f4) + 0.62em);
  width: 13px; height: 8px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: translateY(-50%) rotate(-45deg);
}
.rule-list strong { color: var(--navy); }
.callout { border-left: 3px solid var(--brass); background: var(--white); padding: var(--f5) var(--f6); margin: 0; color: var(--text); }
.callout p:last-child { margin: 0; }

/* ---------- Statement ---------- */
.statement { background: var(--paper-2); position: relative; overflow: hidden; padding: clamp(55px, 6vw, 89px) 0; }
.statement p {
  font-family: var(--serif); font-size: clamp(1.75rem, 3.8vw, var(--t-44)); line-height: 1.15;
  color: var(--navy); max-width: 21em; margin: 0; letter-spacing: -0.016em;
}
.statement p em { font-style: italic; color: var(--brass); }

/* ---------- Departments ---------- */
.dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--navy); border-left: 1px solid var(--rule); }
.dept {
  position: relative; display: block; padding: var(--f6) var(--f6) var(--f6);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--white); text-decoration: none; color: var(--text);
  transition: background .21s var(--ease);
}
a.dept::after {
  content: "\2192"; position: absolute; right: var(--f6); top: var(--f6);
  color: var(--brass); opacity: 0; transform: translateX(-5px);
  transition: opacity .21s var(--ease), transform .21s var(--ease);
}
a.dept:hover { background: var(--brass-wash); color: var(--text); }
a.dept:hover::after { opacity: 1; transform: none; }
.dept svg { width: 34px; height: 34px; fill: var(--navy); margin-bottom: var(--f5); }
.dept h3 { margin-bottom: var(--f3); }
.dept p { margin: 0; color: var(--muted); }

/* ---------- Charts ---------- */
.chart-card { background: var(--white); border: 1px solid var(--rule); padding: clamp(21px, 3vw, 34px); }
.chart-card svg { width: 100%; height: auto; }
.chart-cap { font-size: var(--t-13); color: var(--muted); margin: var(--f4) 0 0; }
.chart-title { font-family: var(--serif); font-size: var(--t-21); color: var(--navy); margin: 0 0 var(--f5); }
.legend { display: flex; flex-wrap: wrap; gap: var(--f3) var(--f5); margin: var(--f5) 0 0; padding: 0; list-style: none; font-size: var(--t-13); color: var(--muted); }
.legend i { display: inline-block; width: 13px; height: 8px; margin-right: var(--f3); vertical-align: 1px; }
.ch-t { fill: var(--muted); font-family: var(--sans); font-size: 15px; }
.ch-w { fill: #fff; font-family: var(--sans); font-size: 17px; font-weight: 600; }
.ch-l { fill: var(--navy); font-family: var(--sans); font-size: 17px; font-weight: 600; }
.stack { display: grid; gap: clamp(21px, 4vw, 55px); }

/* ---------- Golden splits ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(34px, 6vw, 89px); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(34px, 6vw, 89px); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 89px); align-items: center; }

/* ---------- How it works ---------- */
.approach { background: var(--paper-2); }
.approach-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(34px, 6vw, 89px); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--navy); counter-reset: step; }
.flow li { counter-increment: step; padding: var(--f6) var(--f5) var(--f3) 0; position: relative; }
.flow li + li { padding-left: var(--f5); border-left: 1px solid var(--rule); }
.flow li::before {
  content: "0" counter(step); display: block; margin-bottom: var(--f4);
  font-family: var(--sans); font-size: var(--t-13); font-weight: 600; letter-spacing: .16em; color: var(--brass);
}
.flow b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--t-27); line-height: 1.1; color: var(--navy); margin-bottom: var(--f3); }
.flow span { color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 89px minmax(0, 1fr); gap: var(--f3) var(--f5); padding: var(--f6) 0; border-top: 1px solid var(--navy); }
.steps li:last-child { border-bottom: 1px solid var(--navy); }
.steps .n { font-family: var(--serif); font-size: var(--t-44); line-height: 1; color: var(--brass); }
.steps h3 { margin-bottom: var(--f3); }
.steps p { margin: 0; color: var(--muted); }

/* ---------- Capabilities, pains, industries ---------- */
.cap-grid, .pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--f7); }
.cap, .pain { border-top: 1px solid var(--navy); padding: var(--f5) 0 var(--f6); }
.pain { display: flex; flex-direction: column; }
.cap .num { display: block; font-family: var(--serif); font-size: var(--t-17); color: var(--brass); margin-bottom: var(--f4); }
.cap h3 { margin-bottom: var(--f4); }
.cap p, .pain p { color: var(--muted); margin: 0 0 var(--f4); }
.pain q { quotes: "\201C" "\201D"; font-family: var(--serif); font-size: 1.5rem; line-height: 1.22; color: var(--navy); margin-bottom: var(--f4); }
.more { margin-top: auto; font-weight: 600; font-size: var(--t-15); text-decoration: none; color: var(--brass); }
.more::after { content: " \2192"; }
.more:hover { color: var(--navy); text-decoration: underline; }
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--f6); }
.ind { border-top: 1px solid var(--navy); padding: var(--f5) 0 var(--f6); }
.ind h3 { font-size: var(--t-21); margin-bottom: var(--f3); }
.ind p { color: var(--muted); font-size: var(--t-15); margin: 0; }

/* ---------- Engagements ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f5); align-items: stretch; }
.plan { position: relative; background: var(--white); border: 1px solid var(--rule); padding: var(--f6); display: flex; flex-direction: column; transition: border-color .21s var(--ease), box-shadow .21s var(--ease); }
.plan:hover { border-color: var(--rule-strong); box-shadow: 0 21px 34px -21px rgba(11, 31, 51, .28); }
.plan.featured { background: var(--navy); border-color: var(--navy); color: var(--on-dark); box-shadow: 0 34px 55px -34px rgba(11, 31, 51, .6); }
.plan.featured::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brass-light); }
.plan.featured h3, .plan.featured .price { color: var(--white); }
.plan .tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--f4); display: block; min-height: 1.2em; }
.plan.featured .tag { color: var(--brass-light); }
.plan .price { font-family: var(--serif); font-size: var(--t-44); line-height: 1; letter-spacing: -0.02em; color: var(--navy); margin: var(--f5) 0 var(--f3); }
.plan .price small { font-family: var(--sans); font-size: var(--t-15); letter-spacing: 0; color: var(--muted); }
.plan.featured .price small, .plan.featured .for { color: var(--on-dark-muted); }
.plan .for { font-size: var(--t-15); color: var(--muted); margin-bottom: var(--f5); }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--f6); flex: 1; }
.plan li { padding: var(--f3) 0 var(--f3) var(--f5); border-top: 1px solid var(--rule); position: relative; font-size: var(--t-15); }
.plan li::before { content: ""; position: absolute; left: 0; top: calc(var(--f3) + 0.8em); width: 8px; height: 1.5px; background: var(--brass); }
.plan.featured li { border-top-color: rgba(255, 255, 255, .16); }
.plan.featured li::before { background: var(--brass-light); }
.plan .btn { width: 100%; }
.plan .btn-outline:hover { background: var(--navy); }
.plan.featured .btn-light::after { color: var(--brass); }
.plans.compact .plan { padding: var(--f6); }
.plans.compact .plan li { padding: var(--f3) 0 var(--f3) var(--f5); }
.plans.compact .for { margin-bottom: var(--f4); }
.fine { margin-top: var(--f6); font-size: var(--t-15); color: var(--muted); max-width: 52em; }

/* ---------- Standards ---------- */
.principles { background: var(--navy); color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate; }
.principles h2, .principles h3 { color: var(--white); }
.principles .eyebrow { color: var(--brass-light); }
.principles .lede { color: var(--on-dark-muted); }
.pr-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--f6); }
.pr-row div { border-top: 1px solid rgba(255, 255, 255, .26); padding-top: var(--f5); }
.pr-row b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--t-27); color: var(--white); margin-bottom: var(--f3); }
.pr-row span { color: var(--on-dark-muted); }
.pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--f7); }
.pr { border-top: 1px solid rgba(255, 255, 255, .22); padding: var(--f5) 0 var(--f6); }
.pr h3 { margin-bottom: var(--f3); font-size: var(--t-21); }
.pr p { margin: 0; color: var(--on-dark-muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--f5) var(--f7) var(--f5) 0; position: relative;
  font-family: var(--serif); font-size: var(--t-21); line-height: 1.3; color: var(--navy);
  transition: color .21s var(--ease);
}
.faq summary:hover { color: var(--brass); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--f3); top: 50%; width: 13px; height: 13px;
  background:
    linear-gradient(var(--brass), var(--brass)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center / 1.5px 13px no-repeat;
  transform: translateY(-50%); transition: transform .21s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .ans { padding: 0 var(--f7) var(--f5) 0; color: var(--muted); }
.faq .ans p:last-child { margin-bottom: 0; }

/* ---------- Call to action band ---------- */
.cta-band { background: var(--navy); color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -6%; top: 50%; width: min(55vw, 760px); aspect-ratio: 1.618 / 1;
  transform: translateY(-50%);
  background: url("/img/golden.svg") no-repeat center / contain; opacity: .3;
}
.cta-band h2 { color: var(--white); }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--f6); align-items: center; }
.cta-inner p { margin: var(--f4) 0 0; color: var(--on-dark-muted); max-width: 34em; font-size: var(--t-21); }
.cta-inner .btn-row { justify-content: flex-end; }
.cta-band .btn { background: var(--brass-light); border-color: var(--brass-light); color: var(--navy); }
.cta-band .btn:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(34px, 6vw, 89px); align-items: start; }
.facts { margin: var(--f6) 0 0; border-top: 1px solid var(--rule); }
.facts div { padding: var(--f4) 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: var(--t-13); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--f1); }
.facts dd { margin: 0; color: var(--navy); }
.form-card { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: clamp(21px, 4vw, 55px); box-shadow: 0 34px 55px -34px rgba(11, 31, 51, .25); }
.field { margin-bottom: var(--f5); }
.field label { display: block; font-size: var(--t-15); font-weight: 600; margin-bottom: var(--f3); color: var(--navy); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 55px; padding: var(--f4);
  font: inherit; font-size: var(--t-17); color: var(--text);
  background: var(--paper); border: 1px solid #8A949E; border-radius: 2px;
  transition: border-color .21s var(--ease), background .21s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--navy); }
.field textarea { min-height: 144px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--brass-light); outline-offset: 1px; border-color: var(--navy); background: var(--white); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--f5); }
.consent { display: flex; gap: var(--f4); align-items: flex-start; font-size: var(--t-15); color: var(--muted); margin-bottom: var(--f6); line-height: 1.55; }
.consent input { flex: none; width: 21px; height: 21px; margin-top: 2px; accent-color: var(--navy); }
.form-card .btn { width: 100%; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---------- Simple pages ---------- */
.prose { max-width: 764px; }
.prose h1 { margin-bottom: var(--f4); }
.prose h2 { font-size: var(--t-27); margin: var(--f6) 0 var(--f4); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--f2); }
.prose > p:not(.lede) { color: var(--text); }

/* ---------- Service pages ---------- */
.crumbs { font-size: var(--t-15); color: var(--muted); margin-bottom: var(--f6); }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 var(--f3); opacity: .6; }
.page-hero { padding: clamp(55px, 8vw, 110px) 0 clamp(55px, 6vw, 89px); border-bottom: 1px solid var(--rule); }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); max-width: 16em; margin-bottom: var(--f5); }
.page-hero .lede { margin-bottom: var(--f6); }
.page-hero.dark { background: var(--navy); border-bottom: 0; color: var(--on-dark); }
.page-hero.dark h1 { color: var(--white); }
.page-hero.dark .lede { color: var(--on-dark-muted); }
.page-hero.dark .eyebrow { color: var(--brass-light); }
.page-hero.dark .crumbs, .page-hero.dark .crumbs a { color: var(--on-dark-faint); }
.page-hero.dark .crumbs a:hover { color: var(--white); }
.page-hero.dark .btn { background: var(--white); color: var(--navy); border-color: var(--white); }
.page-hero.dark .btn:hover { background: var(--brass-light); border-color: var(--brass-light); }
.page-hero.dark .btn-outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.page-hero.dark .btn-outline:hover { background: rgba(255, 255, 255, .08); border-color: var(--white); }

.bullets-6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--f7); list-style: none; margin: 0; padding: 0; }
.bullets-6 li { padding: var(--f5) 0 var(--f5) var(--f6); border-top: 1px solid var(--rule); position: relative; font-size: var(--t-17); color: var(--navy); font-weight: 500; }
.bullets-6 li::before { top: calc(var(--f5) + 0.8em); }
.safe { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, var(--t-34)); line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); max-width: 26em; margin: 0; }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f5); }
.related a { position: relative; display: block; padding: var(--f6); background: var(--white); border: 1px solid var(--rule); text-decoration: none; color: var(--text); transition: border-color .21s var(--ease), box-shadow .21s var(--ease); }
.related a::after { content: "\2192"; position: absolute; right: var(--f5); bottom: var(--f5); color: var(--brass); transition: transform .21s var(--ease); }
.related a:hover { border-color: var(--navy); box-shadow: 0 21px 34px -21px rgba(11, 31, 51, .28); }
.related a:hover::after { transform: translateX(3px); }
.related b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--t-21); color: var(--navy); margin-bottom: var(--f3); }
.related span { display: block; font-size: var(--t-15); color: var(--muted); padding-right: var(--f5); }

.next-steps { list-style: none; margin: var(--f6) 0 0; padding: 0; counter-reset: s; }
.next-steps li { counter-increment: s; position: relative; padding: var(--f4) 0 var(--f4) var(--f7); border-top: 1px solid var(--rule); color: var(--muted); }
.next-steps li::before { content: counter(s); position: absolute; left: 0; top: var(--f3); font-family: var(--serif); font-size: var(--t-34); line-height: 1; color: var(--brass); }
.next-steps strong { color: var(--navy); display: block; }

/* ---------- Chips ---------- */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--f3); }
.chips li { padding: var(--f3) var(--f5); border: 1px solid var(--rule); background: var(--white); font-size: var(--t-15); font-weight: 500; color: var(--navy); }

/* ---------- Trust bar, calculator, report, compare (kept for reuse) ---------- */
.trustbar { background: var(--navy); color: var(--on-dark); padding: 0; }
.trustbar ul { list-style: none; margin: 0; padding: var(--f5) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--f4) var(--f6); font-size: 0.875rem; font-weight: 500; }
.trustbar li { display: flex; align-items: center; gap: var(--f3); }
.trustbar li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--brass-light); transform: rotate(45deg); }
.calc-wrap { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); border: 1px solid var(--rule); background: var(--white); }
.calc-form { padding: clamp(21px, 4vw, 55px); }
.calc-form h3 { margin-bottom: var(--f3); }
.calc-form > p { color: var(--muted); font-size: var(--t-15); }
.calc-form .field { margin-bottom: var(--f5); }
.calc-form .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f4); align-items: end; }
.calc-form .field label { font-size: 0.875rem; }
.calc-result { background: var(--navy); color: var(--on-dark); padding: clamp(21px, 4vw, 55px); display: flex; flex-direction: column; justify-content: center; }
.calc-result .lbl { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-light); margin-bottom: var(--f3); }
.calc-result .big { font-family: var(--serif); font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1; color: var(--white); margin-bottom: var(--f2); }
.calc-result .sub { color: var(--on-dark-muted); margin-bottom: var(--f5); }
.calc-result .yr { font-family: var(--serif); font-size: var(--t-27); color: var(--white); }
.calc-result .note { margin: var(--f5) 0 0; font-size: var(--t-13); color: var(--on-dark-faint); line-height: 1.5; }
.report { background: var(--white); border: 1px solid var(--rule); box-shadow: 0 21px 34px -21px rgba(11, 31, 51, .35); }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: var(--f4); padding: var(--f4) var(--f5); background: var(--navy); color: var(--white); font-size: 0.875rem; }
.report-head strong { font-family: var(--serif); font-weight: 500; font-size: 1.125rem; }
.report-head span { color: var(--brass-light); font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.metric { padding: var(--f5); border-right: 1px solid var(--rule); }
.metric:last-child { border-right: 0; }
.metric b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--t-34); line-height: 1; color: var(--navy); margin-bottom: var(--f2); }
.metric span { font-size: var(--t-13); color: var(--muted); line-height: 1.3; display: block; }
.report-rows { padding: var(--f3) var(--f5) var(--f1); }
.report-rows div { display: flex; justify-content: space-between; gap: var(--f4); padding: var(--f4) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-15); }
.report-rows div:last-child { border-bottom: 0; }
.report-rows em { font-style: normal; color: var(--brass); font-weight: 600; white-space: nowrap; }
.report-foot { padding: var(--f4) var(--f5); background: var(--paper-2); font-size: var(--t-13); color: var(--muted); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--white); }
table.compare { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--t-15); }
.compare th, .compare td { text-align: left; padding: var(--f4) var(--f5); border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--navy); background: var(--paper-2); }
.compare thead th.us { background: var(--navy); color: var(--white); }
.compare tbody th { font-weight: 600; color: var(--navy); width: 22%; }
.compare td.us { background: var(--brass-wash); font-weight: 500; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-muted); padding: var(--f8) 0 var(--f6); font-size: var(--t-15); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--f6); padding-bottom: var(--f6); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.foot-grid.four { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.site-footer h2 { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-light); margin-bottom: var(--f4); }
.site-footer .brand { color: var(--white); margin-bottom: var(--f5); }
.site-footer .brand:hover { text-decoration: none; }
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-mark .b { fill: var(--white); }
.site-footer .brand-name small { color: var(--on-dark-faint); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--f3); }
.legal-line { padding-top: var(--f5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--f3) var(--f5); font-size: 0.875rem; color: var(--on-dark-faint); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .hero-split, .approach-grid, .contact-grid, .cta-inner, .split, .split.rev, .two-col, .calc-wrap { grid-template-columns: minmax(0, 1fr); }
  .cap-grid, .pain-grid, .dept-grid, .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .cta-inner .btn-row { justify-content: flex-start; }
  .foot-grid, .foot-grid.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(3) { padding-left: 0; border-left: 0; }
  .flow li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--f6) var(--f6); }
  .trustbar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: minmax(0, 1fr); }
  .hub { max-width: 420px; }
  .hero-dark::before, .page-hero.dark::before { left: 20%; width: 120vw; top: auto; bottom: -21%; transform: none; opacity: .22; }
  .cta-band::before { width: 110vw; right: -40%; opacity: .2; }
}
@media (max-width: 640px) {
  .cap-grid, .pain-grid, .pr-grid, .two, .foot-grid, .foot-grid.four, .dept-grid,
  .bullets-6, .pr-row, .flow, .ind-grid, .trustbar ul, .calc-form .three { grid-template-columns: minmax(0, 1fr); }
  .pr-grid, .cap-grid, .pain-grid { gap: 0; }
  .flow li, .flow li + li { padding-left: 0; border-left: 0; }
  .flow li + li { border-top: 1px solid var(--rule); }
  .steps li { grid-template-columns: 55px minmax(0, 1fr); gap: var(--f2) var(--f4); }
  .steps .n { font-size: var(--t-34); }
  .btn-row .btn { width: 100%; }
  .main-nav { gap: var(--f2) var(--f5); }
  .site-header { position: static; }
  .hero-dark h1 { font-size: 2.6rem; }
  .ch-l, .ch-w { font-size: 20px; }
  .ch-t { font-size: 19px; }
  .hub .lbl { font-size: 19px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .faq summary { font-size: 1.2rem; padding-right: var(--f6); }
  .faq .ans { padding-right: 0; }
  .dept { padding: var(--f5); }
  .dept::after { right: var(--f5); top: var(--f5); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .site-header, .site-footer, .btn, .cta-band { display: none; }
  body { background: #fff; }
  .hero-dark, .page-hero.dark { background: #fff; color: var(--text); }
  .hero-dark::before, .page-hero.dark::before, .hero-dark::after, .page-hero.dark::after { display: none; }
}