/* ============================================================
   SYNOPSIS — NEW DIRECTION · DESIGN SYSTEM (from Claude Design)
   Loaded AFTER style.css + fonts.css. Blue is accent only.
   Fonts come from fonts.css (family 'GalanoGrotesque'); reset
   + body already set by style.css, so omitted here.
   ============================================================ */

:root {
  --blue: #0077C8;
  --blue-hover: #0066AD;
  --ink: #141414;
  --ink-body: #555555;
  --muted: #777777;
  --muted-soft: #888888;
  --faint: #B0B0B0;
  --white: #FFFFFF;
  --band-white: #FFFFFF;
  --band-gray: #F4F3F1;
  --band-blue: #0077C8;
  --line: #E2E2E2;
  --line-nav: #EAEAEA;
  --line-strong: #141414;
  --line-gray: #DEDDD9;
  --fs-display: 82px; --fs-stat-xl: 76px; --fs-h1: 52px; --fs-h2: 40px;
  --fs-h3: 36px; --fs-h4: 25px; --fs-stat: 52px; --fs-lead: 21px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 12px;
  --lh-tight: 1.02; --lh-head: 1.15; --lh-body: 1.7;
  --space-md: 18px; --space-lg: 28px; --space-xl: 40px;
  --section-y: 108px; --gutter: 64px; --maxw: 1152px;
}

/* LAYOUT — sections & bands */
.rd .section, section.section.rd, .section.rd { }
.rd-section { padding: var(--section-y) var(--gutter); }
/* First section must clear the fixed 72px nav at every breakpoint (home hero) */
#main-content > .rd-section:first-child { padding-top: max(var(--section-y), 96px); }
.rd-section--gray { background: var(--band-gray); }
.rd-section--blue { background: var(--band-blue); color: var(--white); }
.rd-section--flush-top { padding-top: 0; }
.rd-inner { max-width: var(--maxw); margin: 0 auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split--top { align-items: start; }

/* TYPE */
.display { font-size: var(--fs-display); font-weight: 700; color: var(--ink); line-height: var(--lh-tight); letter-spacing: -2.5px; }
.h1 { font-size: var(--fs-h1); font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -1.2px; }
.h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--ink); line-height: var(--lh-head); letter-spacing: -0.8px; }
.h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.6px; }
.h4 { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); line-height: 1.22; letter-spacing: -0.4px; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-body); }
.body { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-body); }
.body--sm { font-size: var(--fs-body); }
.measure { max-width: 600px; }
.measure-sm { max-width: 480px; }
.accent-dot { color: var(--blue); }
.rd-section--blue .display, .rd-section--blue .h1, .rd-section--blue .h2, .rd-section--blue .h3 { color: var(--white); }
.rd-section--blue .lead, .rd-section--blue .body { color: rgba(255,255,255,0.85); }

/* Eyebrow */
.eyebrow { display: flex; align-items: center; gap: 13px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink); margin-bottom: var(--space-lg); }
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--blue); }
.rd-section--blue .eyebrow { color: var(--white); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; padding: 16px 34px; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-hover); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--white); }
.btn--link { padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 15px; font-weight: 700; }
.btn--link:hover { color: var(--blue); border-bottom-color: var(--blue); }
.btn--inverse.btn--primary { background: var(--white); color: var(--blue); }
.btn--inverse.btn--primary:hover { background: rgba(255,255,255,0.88); }
.btn--inverse.btn--link { color: var(--white); border-bottom-color: rgba(255,255,255,0.5); }
.btn--inverse.btn--link:hover { border-bottom-color: var(--white); }
.btn-group { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* Card */
.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); padding: 34px 30px; }
.card--accent { border-top: 3px solid var(--blue); }
.card__title { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 14px; }
.card__body { font-size: 15px; line-height: 1.65; color: var(--ink-body); }
.card__link { margin-top: auto; padding-top: 22px; font-size: var(--fs-small); font-weight: 700; color: var(--ink); text-decoration: none; }
.card__link:hover { color: var(--blue); }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Panel */
.panel { background: var(--band-gray); border-top: 3px solid var(--blue); padding: 36px 32px; }
.rd-section--gray .panel { background: var(--white); }

/* Stats */
.stat__num { font-size: var(--fs-stat); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -1.5px; }
.stat__label { font-size: var(--fs-small); color: var(--muted); margin-top: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.stat-grid .stat { padding: 30px var(--space-xl); }
.stat-grid .stat:first-child { padding-left: 0; }
.stat-grid .stat:last-child { padding-right: 0; }
.stat-grid .stat + .stat { border-left: 1px solid var(--line); }
.rd-section--blue .stat__num { color: var(--white); }
.rd-section--blue .stat__label { color: rgba(255,255,255,0.8); }
.figure-list { display: flex; flex-direction: column; }
.figure { display: flex; align-items: center; gap: 28px; padding: 34px 0; }
.figure:not(:last-child) { border-bottom: 1px solid var(--line-gray); }
.figure:first-child { padding-top: 0; }
.figure:last-child { padding-bottom: 0; }
.figure__num { flex: none; min-width: 200px; font-size: var(--fs-stat-xl); font-weight: 700; color: var(--ink); line-height: 0.9; letter-spacing: -3px; }
.figure__num--accent { color: var(--blue); }
.figure__num .lt { margin-right: 0.12em; }
.figure__text { font-size: 17px; line-height: 1.45; color: var(--ink-body); }

/* Numbered index */
.index__row { display: grid; grid-template-columns: 72px 340px 1fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--line); }
.index__row:first-child { border-top: 1px solid var(--line-strong); }
.index__row:last-child { border-bottom: 1px solid var(--line); }
.index__num { font-size: 15px; font-weight: 700; color: var(--faint); letter-spacing: 1px; padding-top: 5px; }
.index__title { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); line-height: 1.22; letter-spacing: -0.4px; }
.index__body { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); max-width: 560px; }
.index__link { display: inline-block; margin-top: var(--space-md); font-size: var(--fs-small); font-weight: 700; color: var(--ink); text-decoration: none; }
.index__link:hover { color: var(--blue); }

/* Partner row */
.partner-row { display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-end; margin-top: 48px; }
.partner__name { font-size: 18px; font-weight: 700; color: var(--ink); }
.partner__cred { font-size: 13px; color: var(--muted-soft); margin-top: 4px; }
.partner-row .btn--link { margin-left: auto; }

/* Responsive */
@media (max-width: 980px) {
  :root { --section-y: 72px; --gutter: 40px; --fs-display: 56px; --fs-h1: 40px; --fs-h2: 32px; --fs-stat-xl: 60px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .card-grid, .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .index__row { grid-template-columns: 48px 1fr; }
  .index__row > div:last-child { grid-column: 2; }
  .index__body { grid-column: 2; }
  .figure__num { min-width: 150px; }
}
@media (max-width: 600px) {
  :root { --section-y: 56px; --gutter: 24px; --fs-display: 40px; --fs-h1: 32px; --fs-stat-xl: 48px; --fs-lead: 18px; }
  .display { letter-spacing: -1.5px; }
  .stat-grid { grid-template-columns: 1fr; border-top: 0; }
  .stat-grid .stat { padding: 24px 0; border-top: 1px solid var(--line); }
  .stat-grid .stat + .stat { border-left: 0; }
  .card-grid, .card-grid--3 { grid-template-columns: 1fr; }
  .figure { flex-direction: column; gap: 10px; }
  .figure__num { min-width: 0; }
  .index__row { grid-template-columns: 1fr; gap: 12px; }
  .btn { width: 100%; }
  .btn-group { width: 100%; }
}

/* ============================================================
   INNER PAGES — extended components (restructure pass, 2026-06-25)
   Adds the editorial vocabulary the inner pages need to match Home:
   page hero, story split, partner bios, services offers + metrics,
   numbered steps, article prose, legal doc rows.
   ============================================================ */

:root { --fs-hero: 60px; }

/* Inner-page hero heading — smaller than Home's .display, larger than .h1 */
.display--sm { font-size: var(--fs-hero); font-weight: 700; color: var(--ink); line-height: 1.05; letter-spacing: -1.6px; }
.measure-lg { max-width: 920px; }
.measure-md { max-width: 760px; }

/* Meta line (article byline, card footer) */
.meta { font-size: var(--fs-small); color: var(--muted-soft); }

/* Heading-left / body-right document split (story, legal sections) */
.docrows { display: flex; flex-direction: column; }
.docrow { display: grid; grid-template-columns: 300px 1fr; gap: 64px; padding: 48px 0; border-top: 1px solid var(--line); }
.docrow:first-child { border-top: 1px solid var(--line-strong); }
.docrow:last-child { border-bottom: 1px solid var(--line); }
.docrow__title { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); line-height: 1.22; letter-spacing: -0.4px; }

/* Rich text block (legal bodies, prose) */
.rich { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-body); }
.rich p { margin: 0; }
.rich p + p { margin-top: 18px; }
.rich strong { color: var(--ink); font-weight: 700; }
.rich a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0,119,200,0.3); }
.rich a:hover { border-bottom-color: var(--blue); }
.rich ul { list-style: none; margin: 16px 0 0; padding: 0; }
.rich li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.rich li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; background: var(--blue); }

/* Partner bio rows (team) */
.bio-rows { display: flex; flex-direction: column; }
.bio-row { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; padding: 56px 0; border-top: 1px solid var(--line); }
.bio-row:first-child { border-top: 1px solid var(--line-strong); }
.bio-row:last-child { border-bottom: 1px solid var(--line); }
.bio__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(100%); background: var(--band-gray); display: block; }
.bio__name { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.4px; }
.bio__role { font-size: var(--fs-small); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.bio__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); margin-top: 18px; }

/* Services offers (stacked) + metric sidebar */
.split--sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 72px; align-items: start; }
.offers { display: flex; flex-direction: column; }
.offer { padding: 34px 0; border-top: 1px solid var(--line); }
.offer:first-child { border-top: 1px solid var(--line-strong); }
.offer__title { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); line-height: 1.22; letter-spacing: -0.4px; margin-bottom: 14px; }
.offer__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); }
.offer__text + .offer__text { margin-top: 12px; }
.metric-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.metric { padding: 26px 0; border-bottom: 1px solid var(--line); }
.metric:last-child { border-bottom: 0; }
.metric__num { font-size: var(--fs-h2); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -1.2px; }
.metric__num--accent { color: var(--blue); }
.metric__label { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; line-height: 1.4; }

/* Card meta footer + clickable card (insights) */
.card__meta { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted-soft); }
.card--link { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--ink); }

/* Numbered steps (contact) */
.steps { display: flex; flex-direction: column; counter-reset: step; }
.step { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 1px solid var(--line-strong); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before { content: counter(step, decimal-leading-zero); font-size: 14px; font-weight: 700; color: var(--faint); letter-spacing: 1px; padding-top: 3px; }
.step__title { font-size: 18px; font-weight: 700; color: var(--ink); }
.step__body { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-body); margin-top: 5px; }

/* Article prose */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-size: 18px; line-height: 1.78; color: var(--ink-body); margin: 0; }
.prose p + p { margin-top: 22px; }
.prose h2 { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -0.4px; margin: 50px 0 18px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .source { font-size: 13px; line-height: 1.5; color: var(--muted-soft); font-style: italic; margin-top: 10px; }
.prose .pull { font-size: 25px; line-height: 1.4; color: var(--ink); font-weight: 700; letter-spacing: -0.5px; margin: 44px 0; padding-left: 24px; border-left: 3px solid var(--blue); }
.prose__foot { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; }

/* Equal-height card grid (Other services) */
.card-grid--even { grid-auto-rows: 1fr; }

/* Contact — calm, line-free steps */
.steps-clean { display: flex; flex-direction: column; gap: 32px; }
.step-c { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.step-c__n { font-size: 14px; font-weight: 700; color: var(--blue); letter-spacing: 1px; padding-top: 3px; }
.step-c__t { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.step-c__b { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-body); margin-top: 6px; }

/* Contact — form grouped in a calm panel with filled fields (no floating underlines) */
.form-panel { background: var(--band-gray); padding: 44px 40px; }
.form-panel .form-group label { color: var(--muted); }
.form-panel .form-group input, .form-panel .form-group textarea { background: var(--white); border: 1px solid var(--line); padding: 13px 14px; }
.form-panel .form-group input:focus, .form-panel .form-group textarea:focus { border-color: var(--blue); }
.form-panel .form-group input[type="checkbox"] { padding: 0; }
@media (max-width: 600px) { .form-panel { padding: 28px 22px; } }

/* Fix: footer link hover was white-on-white in the new light footer */
footer .footer-links a:hover, footer .footer-bottom a:hover { color: var(--blue); }

@media (max-width: 980px) {
  :root { --fs-hero: 44px; }
  .docrow { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .bio-row { grid-template-columns: 240px 1fr; gap: 36px; padding: 40px 0; }
  .split--sidebar { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
  :root { --fs-hero: 34px; }
  .display--sm { letter-spacing: -1px; }
  .bio-row { grid-template-columns: 1fr; gap: 20px; }
  .bio__photo { max-width: 280px; }
  .card__meta { flex-direction: column; gap: 4px; }
  .prose p { font-size: 17px; }
}