/* ==========================================================================
   BRAINTREE SOLICITORS — Design System
   Light editorial · Ink navy on ivory · gold as hairline accent
   Static build for Laravel Blade conversion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Paper */
  --paper: #FFFFFF;
  --paper-2: #FAF8F4;   /* warm bone — alternating sections */
  --paper-3: #F2EFE8;   /* deeper bone — quiet bands */

  /* Ink (navy-black) */
  --ink: #0F1729;
  --ink-2: #1B2540;
  --ink-3: #2C3854;
  --text: #394154;
  --text-dim: #626B7D;
  --text-mute: #8A919F;

  /* Brand blue — sampled from the logo artwork (#003760). --ink stays the
     near-black used for type and dark bands; this is the button colour. */
  --brand: #003760;
  --brand-hover: #004C82;
  /* On an ink band the logo blue sits at ~1.4:1 against the ground and all
     but disappears, so dark sections use a lifted tint of the same hue. */
  --brand-lift: #2C6699;
  --brand-lift-hover: #3D7BB3;

  /* Gold — restrained, deeper than screen-gold so it holds up on white */
  --gold: #A5842F;
  --gold-2: #C0A05A;
  --gold-3: #E4D7B4;

  /* Lines */
  --rule: rgba(15, 23, 41, .11);
  --rule-2: rgba(15, 23, 41, .18);
  --rule-gold: rgba(165, 132, 47, .32);

  /* Type */
  --font-display: 'Spectral', 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Metrics */
  --bar-h: 40px;
  --nav-h: 84px;
  --shell: 1240px;
  --gutter: 32px;

  /* Motion — short and few */
  --e-out: cubic-bezier(.2, .7, .3, 1);
  --t: .3s var(--e-out);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0; }

::selection { background: var(--ink); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-wide { max-width: 1440px; }
.shell-narrow { max-width: 820px; }

.section { position: relative; padding: 112px 0; }
.section-sm { padding: 72px 0; }
.section-lg { padding: 140px 0; }

.bg-paper { background: var(--paper); }
.bg-bone { background: var(--paper-2); }
.bg-bone-2 { background: var(--paper-3); }
.bg-ink { background: var(--ink); color: rgba(255, 255, 255, .78); }

.rule-top { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }

.grid { display: grid; gap: 32px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--ink);
}

.display { font-size: clamp(2.7rem, 5.6vw, 4.7rem); line-height: 1.08; }
.h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.h2 { font-size: clamp(1.9rem, 3.3vw, 2.85rem); }
.h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.24; }
.h4 { font-size: 1.2rem; line-height: 1.34; }

.accent { font-style: italic; color: var(--gold); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-ui);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}

.lede {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 62ch;
}
.body-dim { color: var(--text-dim); }
.body-sm { font-size: .93rem; line-height: 1.78; color: var(--text-dim); }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Inverted type inside .bg-ink */
.bg-ink .display, .bg-ink .h1, .bg-ink .h2, .bg-ink .h3, .bg-ink .h4 { color: #fff; }
.bg-ink .lede, .bg-ink .body-sm { color: rgba(255, 255, 255, .68); }
.bg-ink .eyebrow { color: var(--gold-2); }
.bg-ink .eyebrow::before, .bg-ink .eyebrow::after { background: var(--gold-2); }
.bg-ink .accent { color: var(--gold-3); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 30px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.btn-ghost {
  color: var(--brand);
  background: transparent;
  border-color: rgba(0, 55, 96, .32);
}
.btn-ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Unused at present; kept as the one deliberately non-blue action. */
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: #8E7028; border-color: #8E7028; }

/* On dark bands */
.bg-ink .btn,
.hero .btn,
.page-hero .btn { background: var(--brand-lift); border-color: var(--brand-lift); color: #fff; }
.bg-ink .btn:hover,
.hero .btn:hover,
.page-hero .btn:hover { background: var(--brand-lift-hover); border-color: var(--brand-lift-hover); }
.bg-ink .btn-ghost,
.hero .btn-ghost,
.page-hero .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
.bg-ink .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover { background: #fff; border-color: #fff; color: var(--brand); }

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 7px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-gold);
  transition: color var(--t), border-color var(--t);
}
.btn-line:hover { color: var(--gold); border-color: var(--gold); }
.bg-ink .btn-line { color: #fff; border-color: rgba(255, 255, 255, .28); }
.bg-ink .btn-line:hover { color: var(--gold-3); border-color: var(--gold-3); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --------------------------------------------------------------------------
   6. TOP UTILITY BAR + HEADER
   -------------------------------------------------------------------------- */
.top-bar {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: .74rem;
  letter-spacing: .04em;
}
.top-bar-in {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.top-bar a { transition: color var(--t); }
.top-bar a:hover { color: var(--gold-3); }
.top-bar .tb-left { display: flex; gap: 28px; align-items: center; }
.top-bar .tb-right { display: flex; gap: 20px; align-items: center; color: rgba(255, 255, 255, .5); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: height var(--t), box-shadow var(--t);
}
.site-header.scrolled {
  height: 68px;
  box-shadow: 0 1px 14px rgba(15, 23, 41, .07);
}
.nav-inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand { display: flex; align-items: center; gap: 12px; }
/* The mark is the emblem lifted straight out of the firm's logo; the wordmark
   beside it is set in type so it stays crisp at nav sizes. Height-driven —
   the intrinsic 240×147 keeps the box reserved before the image lands. */
.brand-mark { height: 40px; width: auto; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-sub {
  margin-top: 5px;
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative;
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .07em;
  color: var(--text);
  transition: color var(--t);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .btn { padding: 12px 22px; font-size: .67rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px;
  width: 20px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--t), opacity .2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21.5px; }
.burger span:nth-child(3) { top: 27px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Mobile menu — simple slide, no clip-path */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 108px var(--gutter) 44px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
body.menu-open .nav-overlay { opacity: 1; visibility: visible; transform: none; }
.nav-overlay ul { display: flex; flex-direction: column; }
.nav-overlay a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: color var(--t);
}
.nav-overlay a:hover { color: var(--gold); }
.nav-overlay a i {
  font-family: var(--font-ui);
  font-size: .58rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--gold);
}
.nav-overlay-foot {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .88rem;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* Ink ground with the same current as the inner-page heroes (hero-flow.js).
   The strip at the foot of this section is already ink, so hero and strip now
   read as one dark block — the rule below re-separates them. */
.hero {
  position: relative;
  padding: 96px 0 0;
  background: var(--ink);
  overflow: hidden;
  color: rgba(255, 255, 255, .72);
}
.hero .hero-flow { z-index: 0; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(15, 23, 41, .86) 0%, rgba(15, 23, 41, .40) 46%, rgba(15, 23, 41, 0) 100%);
  pointer-events: none;
}
.hero-inner, .hero-strip { position: relative; z-index: 2; }

.hero-title { color: #fff; }
.hero .hero-lede { color: rgba(255, 255, 255, .70); }
.hero .eyebrow { color: var(--gold-2); }
.hero .eyebrow::before, .hero .eyebrow::after { background: var(--gold-2); }
.hero .accent { color: var(--gold-3); }
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  /* Even split. .hero-copy caps at 640px anyway, so the wider text column was
     only ever padding — this hands the spare width to the scales. */
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 560px;
}
.hero-copy { padding-bottom: 64px; max-width: 640px; }
.hero-title { margin-bottom: 26px; }
.hero-lede { font-size: 1.13rem; max-width: 50ch; }
.hero-actions { margin-top: 38px; }

.hero-art {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  /* Trimmed from 88px when the scales grew, so the taller artwork does not
     push the hero strip below the fold on a 900px-tall laptop screen. */
  padding-bottom: 64px;
}
.hero-art::before {
  content: '';
  position: absolute;
  inset: 6% 2% 20%;
  background: radial-gradient(58% 58% at 50% 46%, rgba(165, 132, 47, .10), transparent 72%);
}

/* 3D rotunda — canvas sits over a static SVG fallback */
.hero-3d {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
}
.hero-3d canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s var(--e-out);
}
.hero-3d.has-3d canvas { opacity: 1; }
.hero-3d-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}
/* Tracks the canvas size above, so the no-canvas case matches the 3D framing. */
.hero-3d-fallback svg { width: 68%; max-width: 380px; height: auto; }
.hero-3d.has-3d .hero-3d-fallback { display: none; }

/* Firm statement — the one block of prose on a minimal homepage */
.statement {
  padding: 104px 0;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.statement p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  max-width: 26ch;
  margin-inline: auto;
}
.statement .lede { margin: 26px auto 0; max-width: 56ch; }
.statement .btn-row { justify-content: center; margin-top: 34px; }

/* Hero stats strip */
/* Light band closing the hero. The hero above it is ink and the statement
   section below is white, so the strip sits in warm bone to read as its own
   register rather than merging into either. .hero-strip is homepage-only. */
.hero-strip {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.hero-strip-in {
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-strip-item {
  padding: 34px 28px 34px 0;
  border-right: 1px solid var(--rule);
}
.hero-strip-item:last-child { border-right: 0; }
.hero-strip-item:not(:first-child) { padding-left: 28px; }
.hero-strip-item b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}
/* Direct child only. The figure itself is a <span data-count> nested inside the
   <b>, so an unscoped `.hero-strip-item span` shrank it to label size. */
.hero-strip-item > span {
  display: block;
  margin-top: 9px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   8. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
/* Ink band with a slow current drifting behind the type (hero-flow.js). The
   navy is set here, not in the script, so the band still looks deliberate if
   the canvas never initialises. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 76px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
  color: rgba(255, 255, 255, .72);
}
.hero-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--e-out);
  pointer-events: none;
}
.page-hero.has-flow .hero-flow,
.hero.has-flow .hero-flow { opacity: 1; }
/* A wash across the reading edge so the current never fights the headline. */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(15, 23, 41, .88) 0%, rgba(15, 23, 41, .44) 48%, rgba(15, 23, 41, .02) 100%);
  pointer-events: none;
}
.page-hero > .shell { position: relative; z-index: 2; }

/* Type inverted for the ink ground. */
.page-hero .h1 { color: #fff; }
.page-hero .lede { color: rgba(255, 255, 255, .70); }
.page-hero .eyebrow { color: var(--gold-2); }
.page-hero .eyebrow::before,
.page-hero .eyebrow::after { background: var(--gold-2); }
.page-hero .crumbs { color: rgba(255, 255, 255, .48); }
.page-hero .crumbs a { color: var(--gold-2); }
.page-hero .crumbs a:hover { color: #fff; }
/* 17ch crammed most headings into five short lines while two thirds of the
   row sat empty. 24ch lets them settle into two or three, and the freed width
   carries a short panel of page-specific facts. */
.page-hero .h1 { max-width: 24ch; }
.page-hero .lede { margin-top: 22px; }

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 72px;
  align-items: start;
}
.hero-facts {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.hero-fact + .hero-fact {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-fact dt {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.hero-fact dd {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: #fff;
  overflow-wrap: anywhere;  /* an email address is one long unbreakable word */
}
.hero-fact dd a { border-bottom: 1px solid rgba(192, 160, 90, .5); transition: color var(--t); }
.hero-fact dd a:hover { color: var(--gold-2); }
/* An address is too long for this column at display size and breaks mid-word. */
.hero-fact dd a[href^="mailto:"] { font-family: var(--font-ui); font-size: .84rem; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  color: var(--text-mute);
  margin-bottom: 22px;
}
.crumbs a { color: var(--gold); transition: color var(--t); }
.crumbs a:hover { color: var(--ink); }
.crumbs em { font-style: normal; opacity: .5; }

/* --------------------------------------------------------------------------
   9. FIGURE / MEDIA PLACEHOLDERS
   -------------------------------------------------------------------------- */
.figure {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: .42;
}
.figure-art svg { width: 44%; max-width: 190px; height: auto; }
.figure-tall { aspect-ratio: 3 / 4; }
.figure-wide { aspect-ratio: 16 / 10; }
.figure-sq { aspect-ratio: 1 / 1; }

.figure-badge {
  position: absolute;
  z-index: 2;
  left: 0; bottom: 0;
  padding: 9px 16px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
}

/* Stat card beside an image */
.stat-card {
  margin-top: -1px;
  padding: 28px 30px;
  background: var(--ink);
  color: #fff;
}
.stat-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-3);
}
.stat-card span {
  display: block;
  margin-top: 9px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   10. SPLIT SECTION
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center;
}
.split.rev .split-media { order: 2; }

.tick-list { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.tick-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: .97rem;
  color: var(--text-dim);
}
.tick-list li::before {
  content: '';
  flex: none;
  margin-top: 10px;
  width: 6px; height: 6px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   11. PRACTICE CARDS
   -------------------------------------------------------------------------- */
.pa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 42px 36px 38px;
  background: var(--paper);
  min-height: 300px;
  transition: background var(--t);
}
.pa-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t);
}
.pa-card:hover { background: var(--paper-2); }
.pa-card:hover::before { transform: scaleY(1); }

.pa-num {
  position: absolute;
  top: 26px; right: 30px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  opacity: .55;
}

.pa-icon {
  width: 38px; height: 38px;
  margin-bottom: 24px;
  color: var(--gold);
}
.pa-icon svg { width: 100%; height: 100%; }

.pa-card h3 {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}
.pa-card p { font-size: .92rem; line-height: 1.74; color: var(--text-dim); }
.pa-card .pa-more {
  margin-top: auto;
  padding-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   12. STATS BAND
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
}
.stat {
  padding: 52px 28px;
  background: var(--ink);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.stat span {
  display: block;
  margin-top: 12px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-2);
}

/* --------------------------------------------------------------------------
   13. ACCORDION
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.acc-head i {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gold);
  flex: none;
}
.acc-head h4 {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  font-weight: 400;
  color: var(--ink);
  transition: color var(--t);
}
.acc-head:hover h4 { color: var(--gold); }
.acc-plus { position: relative; width: 14px; height: 14px; flex: none; }
.acc-plus::before, .acc-plus::after {
  content: '';
  position: absolute;
  background: var(--gold);
  transition: transform var(--t), opacity .2s;
}
.acc-plus::before { top: 6.5px; left: 0; width: 14px; height: 1.5px; }
.acc-plus::after { left: 6.25px; top: 0; width: 1.5px; height: 14px; }
.acc-item.open .acc-plus::after { transform: rotate(90deg); opacity: 0; }
.acc-body { height: 0; overflow: hidden; transition: height .3s var(--e-out); }
.acc-body-in { padding: 0 0 26px 44px; max-width: 70ch; color: var(--text-dim); font-size: .96rem; }

/* --------------------------------------------------------------------------
   14. TEAM
   -------------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
/* Each card is a link to that person's profile page, so the whole tile is the
   hit target — no nested anchors inside it. */
a.member { display: block; color: inherit; }
a.member .figure,
a.member h4 { transition: border-color var(--t), color var(--t); }
a.member:hover h4 { color: var(--gold); }
a.member:hover .figure { border-color: var(--rule-2); }
a.member:hover .member-more { color: var(--gold); }
a.member:hover .member-more svg { transform: translateX(4px); }

.member-more {
  margin-top: 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color var(--t);
}
.member-more svg { transition: transform var(--t); }

.member .figure { margin-bottom: 20px; }
.member h4 { font-family: var(--font-display); font-size: 1.24rem; color: var(--ink); }
.member .role {
  margin-top: 6px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.member .bio { margin-top: 11px; font-size: .88rem; color: var(--text-dim); }
.member-links { margin-top: 13px; display: flex; gap: 8px; }
.member-links a {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--text-mute);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.member-links a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.member-links svg { width: 13px; height: 13px; }

/* Profile pages (person-*.html). The portrait column is narrower than the
   even .split default and pinned to the top, so the bio reads as the subject
   of the page rather than a caption beside a tall image. */
.profile-split {
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
.focus-list {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.focus-list li {
  padding: 7px 14px;
  border: 1px solid var(--rule);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.profile-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
/* First and last in the roster have one neighbour; the generator emits an empty
   span for the missing side so space-between still lands the link correctly. */
.profile-nav > span:empty { display: block; }

/* --------------------------------------------------------------------------
   15. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote-stage { position: relative; min-height: 250px; }
.quote {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.quote.active { opacity: 1; pointer-events: auto; }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
.quote figcaption { margin-top: 28px; display: flex; align-items: center; gap: 12px; justify-content: center; }
.quote figcaption b { font-size: .82rem; font-weight: 600; color: var(--ink); }
.quote figcaption em { font-style: normal; font-size: .78rem; color: var(--text-mute); }
.quote-mark {
  font-family: var(--font-display);
  font-size: 4.4rem;
  line-height: .7;
  color: var(--gold);
  opacity: .3;
  margin-bottom: 10px;
}
.quote-dots { display: flex; gap: 8px; justify-content: center; margin-top: 38px; }
.quote-dots button {
  width: 28px; height: 2px;
  background: var(--rule-2);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--t);
}
.quote-dots button.on { background: var(--gold); }

/* --------------------------------------------------------------------------
   16. INSIGHTS
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post { display: flex; flex-direction: column; }
.post .figure { margin-bottom: 20px; }
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.post-meta em { font-style: normal; font-weight: 400; color: var(--text-mute); }
.post h3 {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--t);
}
.post:hover h3 { color: var(--gold); }
.post p { margin-top: 11px; font-size: .9rem; color: var(--text-dim); }

.post-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.post-row .date { font-size: .74rem; color: var(--text-mute); }
.post-row h4 { font-family: var(--font-display); font-size: 1.32rem; color: var(--ink); transition: color var(--t); }
.post-row:hover h4 { color: var(--gold); }
.post-row .go { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { padding: 104px 0; background: var(--ink); }
.cta-band .h2 { max-width: 19ch; margin-inline: auto; color: #fff; }

/* --------------------------------------------------------------------------
   18. CONTACT
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.12fr; gap: 68px; align-items: start; }

.info-list { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--rule); }
.info-item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.info-item .ic {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--gold);
}
.info-item .ic svg { width: 17px; height: 17px; }
.info-item h5 {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.info-item p { font-size: .98rem; color: var(--ink); }
.info-item a { transition: color var(--t); }
.info-item a:hover { color: var(--gold); }

.form-card {
  padding: 44px 42px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.field { margin-bottom: 26px; }
.field label {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 9px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  color: var(--ink);
  font-size: .97rem;
  outline: none;
  transition: border-color var(--t);
}
.field select { cursor: pointer; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.form-note { margin-top: 14px; font-size: .78rem; line-height: 1.6; color: var(--text-mute); }
.form-ok {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  font-size: .88rem;
  color: #2E5A38;
  background: #EDF5EE;
  border: 1px solid #C6DECB;
}
.form-ok.show { display: block; }

.map-frame {
  aspect-ratio: 21 / 8;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  display: grid;
  place-items: center;
  overflow: hidden;
  display: block;
}
.map-frame img { width: 100%; height: 100%; object-fit: cover; }
.map-frame:hover { border-color: var(--rule-2); }
.map-note { margin-top: 12px; font-size: .8rem; color: var(--text-mute); }
.map-note span { color: var(--gold); }
.map-frame span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .68); }
.footer-top { padding: 76px 0 56px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; }
.footer-brand .brand { margin-bottom: 20px; }
.footer-brand .brand-mark { height: 46px; }  /* reversed artwork, see markup */
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: var(--gold-2); }
.footer-brand p { font-size: .9rem; color: rgba(255, 255, 255, .58); max-width: 38ch; }

.foot-title {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 20px;
}
.foot-list { display: flex; flex-direction: column; gap: 11px; }
.foot-list a { font-size: .89rem; color: rgba(255, 255, 255, .62); transition: color var(--t); }
.foot-list a:hover { color: #fff; }
.footer-top .body-sm { color: rgba(255, 255, 255, .58); }
.footer-top .body-sm a:hover { color: #fff; }

.subscribe { display: flex; margin-top: 16px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.subscribe input {
  flex: 1;
  padding: 11px 2px;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-size: .88rem;
}
.subscribe input::placeholder { color: rgba(255, 255, 255, .38); }
.subscribe button {
  padding: 0 4px 0 14px;
  background: none;
  border: 0;
  color: var(--gold-2);
  cursor: pointer;
  transition: color var(--t);
}
.subscribe button:hover { color: #fff; }

.socials { display: flex; gap: 9px; margin-top: 26px; }
.socials a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .68);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.socials a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.socials svg { width: 15px; height: 15px; }

.footer-bar {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
  flex-wrap: wrap;
}
.footer-bar a { transition: color var(--t); }
.footer-bar a:hover { color: #fff; }
.footer-bar nav { display: flex; gap: 24px; }

/* Back to top */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 700;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), background var(--t);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--gold); }

/* --------------------------------------------------------------------------
   20. REVEAL — one effect, kept short
   -------------------------------------------------------------------------- */
[data-rev] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
[data-rev].in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { gap: 44px; }
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .nav-links, .nav-cta .btn { display: none; }
  .burger { display: block; }
  .top-bar .tb-right { display: none; }
  .section { padding: 84px 0; }
  .section-lg { padding: 100px 0; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split.rev .split-media { order: 0; }
  /* Stacked, the 3:4 portrait would otherwise fill most of a phone screen. */
  .profile-split .split-media { max-width: 300px; }
  .pa-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  /* Narrow viewports compress the horizontal gradient and stack more text
     into the band, so the wash runs down the page instead of across it. */
  .hero::after,
  .page-hero::after {
    background: linear-gradient(165deg, rgba(15, 23, 41, .90) 0%, rgba(15, 23, 41, .66) 58%, rgba(15, 23, 41, .34) 100%);
  }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* Facts drop below the heading and run as a row of columns instead. */
  .page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-facts {
    padding-left: 0;
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 26px;
  }
  .hero-fact + .hero-fact { margin-top: 0; padding-top: 0; border-top: 0; }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 8px; }
  .hero-art { order: -1; padding-bottom: 0; }
  .hero-3d { max-width: 360px; }
  .hero-copy { padding-bottom: 64px; }
  .statement { padding: 76px 0; }
  .hero-strip-in { grid-template-columns: repeat(2, 1fr); }
  .hero-strip-item:nth-child(2) { border-right: 0; }
  .hero-strip-item:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .hero-strip-item:nth-child(3) { padding-left: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .top-bar { font-size: .7rem; }
  .top-bar .tb-left { gap: 16px; }
  .hero { padding-top: 56px; }
  .pa-grid, .post-grid, .team-grid, .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-card { padding: 30px 22px; }
  .field-row { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; gap: 8px; }
  .acc-body-in { padding-left: 0; }
  .page-hero { padding: 56px 0 52px; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .to-top { right: 14px; bottom: 14px; }
  .cta-band { padding: 72px 0; }
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-rev] { opacity: 1 !important; transform: none !important; }
  /* rotunda.js renders a single static frame and never starts its loop */
  .hero-3d canvas { opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .top-bar, .nav-overlay, .to-top, .cta-band, .site-footer { display: none; }
  body { color: #000; font-size: 11pt; }
  [data-rev] { opacity: 1; transform: none; }
}