/* ==========================================================================
   Olympic Law — Design System v2  ("Institutional Capital x Plaintiff's Advocate")
   --------------------------------------------------------------------------
   The visual envelope is a private-capital annual review: paper ground, deep
   ink anchor, one rationed brass accent, hairline rules instead of shadows,
   editorial serif display, tabular numerals. The voice on top of it is a
   trial lawyer's.

   Why hairlines and not cards-with-shadows: soft drop shadows read as
   consumer SaaS. Institutions rule things off. That single swap does more
   to shift the register than any color change.

   Faces: Newsreader (display) / Inter (body, UI) / IBM Plex Mono (micro-labels)
   ========================================================================== */

/* ============================ 1. TOKENS ============================ */
:root {
  /* Ink — cool, slightly green-blue near-black. Warmer than pure #000. */
  --ink:        #101A24;
  --ink-2:      #16222E;   /* dark section ground */
  --ink-3:      #26394A;   /* raised surface on dark */
  --ink-soft:   #55606C;   /* secondary text on paper (AA) */
  --ink-mute:   #5A6873;   /* darkened: #6E808C measured 3.42:1 on paper */   /* tertiary text on paper (AA at 16px+) */

  /* Paper — warm off-white. Never pure #FFF; pure white reads clinical. */
  --paper:      #FAF7F2;
  --paper-2:    #F0EAE0;   /* alternating section */
  --paper-3:    #EAE4D8;   /* wash / inset */
  --rule:       #DCD3C6;   /* hairline on paper */
  --rule-2:     #C9C0AD;   /* emphasized hairline */
  --rule-dark:  rgba(255,255,255,0.14);

  /* Brass — the single accent. Rationed: rules, numerals, eyebrows, one CTA. */
  --brass:      #9A7726;   /* AA on paper for small text */
  --brass-deep: #6F5416;
  --brass-mid:  #B8933F;
  --brass-lite: #D9BC77;   /* on ink only */

  /* Signal */
  --alert:      #7E2B32;   /* urgent/serious accent, used sparingly */
  --ok:         #2C5F3F;
  --error:      #A32218;

  /* Type */
  --display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Space + shape */
  --maxw:      1240px;
  --maxw-text: 68ch;
  --gutter:    clamp(20px, 4vw, 44px);
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-pill: 100px;

  /* Motion */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation — used almost nowhere by design. */
  --lift: 0 1px 2px rgba(11,16,20,0.04), 0 12px 32px rgba(11,16,20,0.07);

  --nav-h: 80px;
  --util-h: 38px;
}

/* ============================ 2. RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
::selection { background: var(--brass-lite); color: var(--ink); }
hr { border: none; border-top: 1px solid var(--rule); margin: 0; }

/* ============================ 3. TYPE SCALE ============================ */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.021em;
  color: var(--ink);
  margin: 0 0 0.42em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.1vw, 4.4rem); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: clamp(1.95rem, 4vw, 3rem); letter-spacing: -0.026em; }
h3 { font-size: clamp(1.28rem, 2vw, 1.6rem); letter-spacing: -0.018em; }
h4 { font-size: 1.16rem; }
p  { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a  { color: var(--brass-deep); text-decoration: none; }
strong { font-weight: 600; }
small { font-size: 0.86rem; }

.display-xl { font-family: var(--display); font-size: clamp(3rem, 8vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500; }
.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 60ch;
  font-weight: 400;
}
.prose { max-width: var(--maxw-text); }
.prose p { color: var(--ink-soft); }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose h3 { margin-top: 2em; }
.prose--legal h2 { font-size: 1.3rem; margin: 2.2em 0 0.5em; }
.prose--legal h2:first-child { margin-top: 0; }
.prose ul, .prose ol { color: var(--ink-soft); padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.55em; }
.prose li::marker { color: var(--brass); }

/* Micro-label — the institutional tell. Mono, uppercase, tracked out. */
.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--brass-mid);
  flex-shrink: 0;
}
.kicker.no-rule::before { display: none; }
.kicker.center { justify-content: center; }
.on-ink .kicker, .kicker.on-ink { color: var(--brass-lite); }
.on-ink .kicker::before { background: var(--brass); }

/* Tabular numerals for anything that is a figure */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============================ 4. LAYOUT ============================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding-inline: var(--gutter); }

.section { padding: clamp(88px, 11vw, 172px) 0; position: relative; }
.section-sm { padding: clamp(64px, 7vw, 104px) 0; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink-2); color: rgba(255,255,255,0.78); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .lead { color: rgba(255,255,255,0.72); }
.section--ink a { color: var(--brass-lite); }
.section + .section:not(.section--ink):not(.section--paper2) { border-top: 1px solid var(--rule); }

/* Section header — asymmetric editorial split */
.sec-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: clamp(24px,4vw,64px); align-items: end; margin-bottom: clamp(48px,6.5vw,88px); }
.sec-head h2 { margin: 0; }
.sec-head .lead { margin: 0; }
.sec-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--stack { grid-template-columns: 1fr; }

/* ============================ 5. BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans);
  font-size: 0.94rem; font-weight: 600; letter-spacing: -0.006em;
  padding: 15px 26px;
  min-height: 52px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background .22s var(--ease-2), color .22s var(--ease-2), border-color .22s var(--ease-2), transform .22s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-3); }

.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--brass-deep); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(11,16,20,0.03); }

.btn--onink { background: var(--brass-lite); color: var(--ink); }
.btn--onink:hover { background: #fff; }
.btn--onink-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--onink-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.07); }

.btn--lg { font-size: 1rem; padding: 17px 30px; min-height: 58px; }
.btn--block { width: 100%; }

/* Text link with an underline that grows */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 0.94rem; color: var(--brass-deep);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease-2), color .2s var(--ease-2);
}
.link-arrow:hover { color: var(--ink); border-color: var(--ink); }
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Focus — visible everywhere, brass ring */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 13px 20px; font-weight: 600; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ============================ 6. UTILITY BAR + NAV ============================ */
.utility {
  background: var(--ink);
  color: rgba(255,255,255,0.72);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  height: var(--util-h);
  display: flex; align-items: center;
  position: relative; z-index: 90;
}
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.utility-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.utility-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.utility-item svg { width: 13px; height: 13px; color: var(--brass-lite); flex-shrink: 0; }
.utility a { color: rgba(255,255,255,0.82); }
.utility a:hover { color: #fff; }
.utility-phone { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; color: #fff !important; }

.lang {
  display: inline-flex; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0;
}
.lang button, .lang a {
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em;
  padding: 5px 10px; color: rgba(255,255,255,0.6);
  transition: background .18s var(--ease-2), color .18s var(--ease-2);
  min-height: 26px;
}
.lang button:hover, .lang a:hover { color: #fff; }
.lang button.is-on, .lang a.is-on { background: var(--brass-lite); color: var(--ink); }

.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(250,247,242,0.86);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s var(--ease-2), background .3s var(--ease-2);
}
.nav.is-stuck { background: rgba(250,247,242,0.95); box-shadow: 0 1px 20px rgba(11,16,20,0.07); }
.nav-inner { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; display: block; }
.brand-sub { font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; display: block; }

.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links > a {
  color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; white-space: nowrap;
  padding: 6px 0; position: relative;
  transition: color .18s var(--ease-2);
}
.nav-links > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-links > a:hover { color: var(--ink); }
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links > a[aria-current="page"] { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); padding: 9px 4px; min-height: 44px;
}
.nav-phone svg { width: 16px; height: 16px; color: var(--brass); }
.nav-phone:hover { color: var(--brass-deep); }

.nav-burger {
  display: none; width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule-2); border-radius: var(--r-md); cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span { display: block; width: 19px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-burger span + span { margin-top: 5px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Mobile drawer */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(11,16,20,0.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-2), visibility .3s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: min(88vw, 400px);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); border-bottom: 1px solid var(--rule); }
.drawer-close { width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 1px solid var(--rule-2); border-radius: var(--r-md); cursor: pointer; }
.drawer-close svg { width: 18px; height: 18px; }
.drawer-links { display: flex; flex-direction: column; padding: 8px var(--gutter) 20px; }
.drawer-links a {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); padding: 15px 0; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
}
.drawer-links a svg { width: 15px; height: 15px; color: var(--brass); }
.drawer-foot { margin-top: auto; padding: 20px var(--gutter) 28px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rule); background: var(--paper-2); }
body.no-scroll { overflow: hidden; }

/* ============================ 7. HERO ============================ */
.hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(154,119,38,0.10), transparent 62%),
    linear-gradient(180deg, rgba(234,228,216,0.45), transparent 40%);
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,0.92fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding: clamp(48px, 6vw, 92px) 0 clamp(52px, 6vw, 88px);
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--brass-deep); font-weight: 400; }
.hero-sub { font-size: clamp(1.04rem, 1.5vw, 1.19rem); line-height: 1.58; color: var(--ink-soft); max-width: 54ch; margin: 0 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-assure { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 0.85rem; color: var(--ink-soft); }
.hero-assure span { display: inline-flex; align-items: center; gap: 7px; }
.hero-assure svg { width: 15px; height: 15px; color: var(--brass); flex-shrink: 0; }

/* ============================ 8. CREDENTIAL / STAT STRIP ============================ */
/* Institutional stat presentation: hairline-divided, serif figure, mono label. */
.stat-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: clamp(26px,3.5vw,40px) clamp(14px,2.4vw,32px);
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 7px;
}
.stat:first-child { border-left: none; }
.stat-fig {
  font-family: var(--display); font-size: clamp(1.75rem, 3.1vw, 2.6rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-fig sup { font-size: 0.42em; color: var(--brass); top: -1.1em; margin-left: 2px; font-family: var(--sans); }
.stat-label { font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.45; }
.stat-note { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.stat-foot {
  font-size: 0.76rem; color: var(--ink-mute); line-height: 1.6;
  padding: 16px 0 22px; border-top: 1px solid var(--rule); max-width: 92ch;
}

/* ============================ 9. FORM ============================ */
.form-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--lift);
}
.form-card h2, .form-card h3 { font-size: clamp(1.35rem,2vw,1.6rem); margin-bottom: 6px; }
.form-note { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.5; }
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 7px; font-weight: 500;
}
.field label .req { color: var(--alert); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 16px;                 /* 16px minimum: stops iOS zoom-on-focus */
  padding: 13px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  color: var(--ink);
  width: 100%;
  transition: border-color .18s var(--ease-2), background .18s var(--ease-2), box-shadow .18s var(--ease-2);
  min-height: 50px;
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E808C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass); background: #fff;
  box-shadow: 0 0 0 3px rgba(154,119,38,0.13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: 0.75; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.55; margin: 4px 0 16px; }
.consent input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brass); min-height: 0; }
.form-legal { font-size: 0.73rem; color: var(--ink-mute); line-height: 1.6; margin-top: 14px; }
.form-msg { display: none; padding: 14px 16px; border-radius: var(--r-md); margin-top: 14px; font-size: 0.9rem; line-height: 1.5; }
.form-msg.is-on { display: block; }
.form-msg--ok { background: #E9F1EA; color: var(--ok); border-left: 3px solid var(--ok); }
.form-msg--err { background: #FBEAE7; color: var(--error); border-left: 3px solid var(--error); }

/* ============================ 10. EDITORIAL INDEX (practice areas) ============================ */
/* A hairline table, not a card grid. Reads like a fund's holdings list. */
.index-list { border-top: 1px solid var(--rule); }
.index-item {
  display: grid; grid-template-columns: 54px minmax(0,1fr) minmax(0,1.15fr) 24px;
  gap: clamp(14px,2.4vw,32px); align-items: baseline;
  padding: clamp(22px,2.8vw,30px) 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: background .28s var(--ease-2), padding-left .28s var(--ease);
}
.index-item:hover { background: var(--paper-2); padding-left: 16px; }
.index-num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--brass); padding-top: 6px; }
.index-title { font-family: var(--display); font-size: clamp(1.3rem,2.3vw,1.72rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.15; margin: 0; }
.index-desc { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.index-arrow { color: var(--brass); align-self: center; transition: transform .28s var(--ease); }
.index-arrow svg { width: 18px; height: 18px; }
.index-item:hover .index-arrow { transform: translateX(5px); }

/* ============================ 11. ARGUMENT / CAPABILITY CARDS ============================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px,3vw,40px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px,3vw,36px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px,2.4vw,28px); }

.rule-card { border-top: 2px solid var(--ink); padding-top: 22px; }
.rule-card .rc-label { font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 12px; display: block; }
.rule-card h3 { margin-bottom: 10px; }
.rule-card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.section--ink .rule-card { border-top-color: var(--brass); }
.section--ink .rule-card p { color: rgba(255,255,255,0.7); }
.section--ink .rule-card .rc-label { color: var(--brass-lite); }

/* Translation pairs — "from X, to Y" two-column mapping */
.xlate { border-top: 1px solid var(--rule-dark); padding: 26px 0; display: grid; grid-template-columns: minmax(0,0.9fr) 30px minmax(0,1.35fr); gap: clamp(12px,2vw,28px); align-items: start; }
.xlate:last-child { border-bottom: 1px solid var(--rule-dark); }
.xlate-from { font-family: var(--mono); font-size: 0.76rem; line-height: 1.55; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brass-lite); padding-top: 5px; }
.xlate-mid { color: var(--brass); padding-top: 4px; }
.xlate-mid svg { width: 18px; height: 18px; }
.xlate-to h3 { font-size: 1.16rem; margin-bottom: 7px; color: #fff; }
.xlate-to p { font-size: 0.95rem; color: rgba(255,255,255,0.68); margin: 0; line-height: 1.62; }

/* ============================ 12. PROCESS STEPS ============================ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px,2.6vw,30px); counter-reset: step; }
.step { border-top: 1px solid var(--rule-2); padding-top: 20px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--brass);
  display: block; margin-bottom: 14px;
}
.step h3 { font-family: var(--sans); font-size: 1.03rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.35; }
.step p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; line-height: 1.58; }

/* ============================ 13. QUOTE / PULL ============================ */
.pull {
  border-left: 2px solid var(--brass);
  padding: 6px 0 6px clamp(20px,3vw,34px);
  margin: 0;
}
.pull p {
  font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.85rem);
  line-height: 1.32; letter-spacing: -0.022em; font-weight: 400; color: var(--ink); margin: 0 0 16px;
}
.pull footer { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-mute); }
.section--ink .pull p { color: #fff; }
.section--ink .pull footer { color: rgba(255,255,255,0.55); }

/* ============================ 14. BIO ============================ */
.bio-grid { display: grid; grid-template-columns: minmax(0,0.44fr) minmax(0,0.56fr); gap: clamp(28px,4.5vw,64px); align-items: start; }
.bio-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); border: 1px solid var(--rule); aspect-ratio: 4/5; }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-photo-ph { display: grid; place-items: center; height: 100%; text-align: center; padding: 24px; color: var(--ink-mute); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.7; }
.cred-list { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--rule); }
.cred-list li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem; color: var(--ink-soft); }
.cred-list li strong { color: var(--ink); font-weight: 600; text-align: right; }
.cred-key { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-mute); flex-shrink: 0; padding-top: 3px; }

/* ============================ 15. FAQ ============================ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 4px; min-height: 62px;
  font-size: 1.04rem; font-weight: 600; letter-spacing: -0.012em; color: var(--ink);
  transition: color .18s var(--ease-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-deep); }
.faq-icon { position: relative; width: 15px; height: 15px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--brass); border-radius: 1px; transition: transform .28s var(--ease); }
.faq-icon::before { top: 7px; left: 0; width: 15px; height: 1.6px; }
.faq-icon::after  { left: 7px; top: 0; width: 1.6px; height: 15px; }
.faq details[open] .faq-icon::after { transform: scaleY(0); }
.faq-body { padding: 0 4px 26px; max-width: 74ch; }
.faq-body p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.68; }
.faq-body p:last-child { margin-bottom: 0; }

/* ============================ 16. CALLOUTS ============================ */
.callout {
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--brass);
  border-radius: var(--r-md); padding: clamp(20px,2.6vw,28px);
}
.callout p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; line-height: 1.65; }
.callout p + p { margin-top: 0.8em; }
.callout strong { color: var(--ink); }
.callout--ink { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); border-left-color: var(--brass-lite); }
.callout--ink p { color: rgba(255,255,255,0.74); }
.callout--ink strong { color: #fff; }

/* Placeholder token — deliberately loud so nothing ships unfilled */
.ph {
  background: #FFF4D6; border: 1px dashed var(--brass-mid); border-radius: var(--r-sm);
  padding: 1px 7px; color: #6B5210; font-weight: 600; font-size: 0.94em; white-space: nowrap;
}
.on-ink .ph, .section--ink .ph, footer .ph { background: rgba(217,188,119,0.15); border-color: var(--brass-lite); color: var(--brass-lite); }

/* ============================ 17. FOOTER ============================ */
.site-foot { background: var(--ink); color: rgba(255,255,255,0.62); font-size: 0.9rem; padding: clamp(52px,6vw,80px) 0 0; }
.foot-top { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(26px,3.5vw,48px); padding-bottom: 44px; border-bottom: 1px solid var(--rule-dark); }
.foot-brand { font-family: var(--display); font-size: 1.5rem; color: #fff; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.foot-top p { font-size: 0.9rem; line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 42ch; }
.foot-col h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brass-lite); margin-bottom: 15px; font-weight: 500; }
.foot-col a { display: block; color: rgba(255,255,255,0.62); padding: 7px 0; font-size: 0.9rem; min-height: 34px; }
.foot-col a:hover { color: #fff; }
.foot-contact { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.foot-contact a { color: #fff; font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 9px; min-height: 40px; }
.foot-contact a svg { width: 15px; height: 15px; color: var(--brass-lite); }

.legal { padding: 34px 0 0; font-size: 0.76rem; line-height: 1.72; color: rgba(255,255,255,0.5); }
.legal h5 { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brass-lite); margin: 0 0 12px; font-weight: 500; }
.legal p { margin-bottom: 0.95em; max-width: 105ch; }
.legal strong { color: rgba(255,255,255,0.78); }
.foot-bottom {
  margin-top: 30px; padding: 20px 0 28px; border-top: 1px solid var(--rule-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 0.78rem; color: rgba(255,255,255,0.48);
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-bottom a { color: rgba(255,255,255,0.55); }
.foot-bottom a:hover { color: #fff; }

/* ============================ 18. STICKY MOBILE CTA ============================ */
.dock { display: none; }

/* ============================ 19. BREADCRUMB + PAGE HEAD ============================ */
.crumbs { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--brass-deep); }
.crumbs span[aria-current] { color: var(--ink); }
.crumb-sep { color: var(--rule-2); }

.page-head { position: relative; background: var(--paper); border-bottom: 1px solid var(--rule); overflow: hidden; padding: clamp(38px,5vw,64px) 0 clamp(34px,4.5vw,54px); }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 70% at 8% 0%, rgba(154,119,38,0.09), transparent 62%); }
.page-head .wrap { position: relative; }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: 16px; }

/* Table of contents rail */
.toc { position: sticky; top: calc(var(--nav-h) + 26px); }
.toc h4 { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; font-weight: 500; }
.toc ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a { display: block; padding: 11px 0; font-size: 0.89rem; color: var(--ink-soft); line-height: 1.4; min-height: 42px; }
.toc a:hover, .toc a.is-active { color: var(--brass-deep); }

/* ============================ 20. REVEAL ============================ */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .06s; } .rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; } .rv-d4 { transition-delay: .24s; }
.rv-d5 { transition-delay: .30s; } .rv-d6 { transition-delay: .36s; }

/* ============================ 21. UTILITIES ============================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 38px; }

/* ============================ 22. RESPONSIVE ============================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 640px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .bio-grid { grid-template-columns: 1fr; gap: 32px; }
  .bio-photo { max-width: 340px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-phone span { display: none; }        /* icon-only call button on tablet */
  .nav-phone { padding: 9px; }
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .grid-3, .grid-4, .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-top { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .index-item { grid-template-columns: 40px minmax(0,1fr) 20px; row-gap: 8px; }
  .index-desc { grid-column: 2 / 4; }
  .xlate { grid-template-columns: 1fr; gap: 10px; }
  .xlate-mid { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .utility { height: auto; padding: 7px 0; }
  .utility .wrap { flex-wrap: wrap; row-gap: 6px; justify-content: center; }
  .utility-left { gap: 14px; justify-content: center; flex-wrap: wrap; }
  .utility-hide-sm { display: none; }
  .grid-2, .grid-3, .grid-4, .steps, .field-row { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .section--ink .grid-2 { gap: 26px; }
  .pull { padding-left: 18px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }

  /* Sticky dock: the single highest-value mobile conversion surface.
     Call + Text split, because SMS is an undefended channel in this market. */
  .dock {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 75;
    padding: 8px;
    background: rgba(11,16,20,0.9);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 32px rgba(11,16,20,0.32);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .38s var(--ease), opacity .3s var(--ease-2);
  }
  .dock.is-up { transform: none; opacity: 1; }
  .dock a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 54px; border-radius: var(--r-md);
    font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em;
  }
  .dock a svg { width: 17px; height: 17px; }
  .dock-call { background: var(--brass-lite); color: var(--ink); }
  .dock-text { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.22); }
  body { padding-bottom: 86px; }
}
@media (max-width: 420px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 1.18rem; }
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--rule); }
  .stat:first-child { border-top: none; }
  .index-item { grid-template-columns: 34px minmax(0,1fr) 18px; }
}

/* ============================ 23. 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; scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .dock { transform: none !important; opacity: 1 !important; }
}

/* ============================ 24. PRINT ============================ */
@media print {
  .nav, .utility, .dock, .drawer, .drawer-scrim, .hero::before { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }
  .section { padding: 18px 0; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}

/* ============================ 25. DOCUMENT LAYOUT (silo pages) ============================ */
/* Two-column editorial: long-form column plus a sticky rail carrying the
   table of contents and a persistent conversion card. The rail is what keeps
   a 1,800-word practice page from having a single CTA at the bottom. */
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.doc-rail { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 26px; }

.doc-body > section { scroll-margin-top: calc(var(--nav-h) + 26px); padding-bottom: clamp(34px,4vw,52px); }
.doc-body > section + section { border-top: 1px solid var(--rule); padding-top: clamp(34px,4vw,52px); }
.doc-body h2 { font-size: clamp(1.6rem,2.7vw,2.15rem); margin-bottom: 0.55em; }
.doc-body h3 { font-size: clamp(1.14rem,1.7vw,1.3rem); font-family: var(--sans); font-weight: 600; letter-spacing: -0.012em; margin: 1.9em 0 0.5em; }
.doc-body p, .doc-body li { color: var(--ink-soft); }
.doc-body > section > p:first-of-type { font-size: 1.05rem; }
.doc-body ul, .doc-body ol { padding-left: 1.15em; margin: 0 0 1.15em; }
.doc-body li { margin-bottom: 0.6em; }
.doc-body li::marker { color: var(--brass); }
.doc-body strong { color: var(--ink); font-weight: 600; }

/* Answer box — the AEO play. A direct, quotable answer for AI search
   and featured snippets, placed above everything else on the page. */
.answer {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-md);
  padding: clamp(22px,2.8vw,30px);
  margin-bottom: clamp(32px,4vw,44px);
}
.answer h2 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 12px; font-weight: 500; }
.answer p { font-size: 1.06rem; line-height: 1.62; color: var(--ink); margin: 0; }
.answer p + p { margin-top: 0.85em; }

/* Fact table — hairline rows, mono keys. Reads like a term sheet. */
.facts { border-top: 1px solid var(--rule-2); margin: 0 0 1.4em; }
.facts div { display: grid; grid-template-columns: minmax(0,0.42fr) minmax(0,0.58fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; margin: 0; }
.facts dd { margin: 0; font-size: 0.96rem; color: var(--ink); font-weight: 500; }

/* Rail conversion card */
.rail-card { background: var(--ink-2); color: rgba(255,255,255,0.76); border-radius: var(--r-lg); padding: 26px 24px; }
.rail-card h3 { color: #fff; font-size: 1.22rem; margin-bottom: 8px; }
.rail-card p { font-size: 0.88rem; line-height: 1.58; margin-bottom: 18px; color: rgba(255,255,255,0.7); }
.rail-card .btn { width: 100%; }
.rail-card .btn + .btn { margin-top: 9px; }
.rail-phone { display: block; text-align: center; margin-top: 14px; font-family: var(--mono); font-size: 0.8rem; color: rgba(255,255,255,0.55); }

/* Numbered step list inside documents */
.doc-steps { list-style: none; padding: 0; counter-reset: dstep; }
.doc-steps li { counter-increment: dstep; position: relative; padding-left: 46px; margin-bottom: 20px; }
.doc-steps li::before {
  content: counter(dstep, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--brass);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  width: 32px; height: 26px; display: grid; place-items: center;
}
.doc-steps li strong { display: block; color: var(--ink); margin-bottom: 3px; }

/* Related silo links */
.related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.related a { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-weight: 500; font-size: 0.96rem; transition: border-color .22s var(--ease-2), background .22s var(--ease-2); min-height: 60px; }
.related a:hover { border-color: var(--ink); background: var(--paper-2); }
.related a svg { width: 15px; height: 15px; color: var(--brass); flex-shrink: 0; }

@media (max-width: 1024px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-rail { position: static; flex-direction: column; }
  .toc { display: none; }              /* the rail TOC is desktop-only affordance */
  .related { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .related { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================ 26. MOBILE FIXES ============================ */
/* A closed drawer lives at translateX(100%), which is outside the viewport.
   position:fixed is not clipped by body overflow, so it extends the scroll
   width unless the root clips it and the panel is taken out of the a11y tree. */
html { overflow-x: clip; }
.drawer { visibility: hidden; }
.drawer.is-open { visibility: visible; }

@media (max-width: 900px) {
  /* Icon-only call button still needs a full 44px target */
  .nav-phone { min-width: 44px; justify-content: center; }
}

@media (max-width: 620px) {
  /* Brand + phone + CTA + burger cannot all fit at 375px. The drawer already
     carries the CTA, so it is the one that goes. */
  .nav-actions > .btn { display: none; }
  .nav-inner { gap: 10px; }
}

/* WCAG 2.5.5: every interactive target reaches 44x44 on touch viewports. */
@media (max-width: 720px) {
  .utility a,
  .utility-phone { min-height: 44px; display: inline-flex; align-items: center; }
  .lang button, .lang a { min-height: 44px; padding: 6px 14px; }
  .link-arrow { min-height: 44px; align-items: center; }
  .foot-col a { min-height: 44px; display: flex; align-items: center; padding: 9px 0; }
  .foot-contact a { min-height: 46px; }
  .foot-bottom nav { gap: 6px 22px; }
  .foot-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
  .pa-row { min-height: 64px; }
}
@media (max-width: 720px) {
  .lang button, .lang a { min-width: 46px; padding: 6px 15px; }
  .brand { min-height: 44px; }
}

/* ============================ 27. LEAN HOME LAYOUT ============================ */
/* Split hero: copy left, single symbolic image right. Fewer words, more air. */
.hsplit { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,0.96fr); gap: clamp(28px,5vw,72px); align-items: center;
          padding: clamp(52px,6.5vw,96px) 0 0; }   /* no bottom pad: the subject stands on the edge */
.hsplit > div:first-child { padding-bottom: clamp(56px,7vw,104px); }
/* Sized so each br-delimited line sits on ONE visual line. A headline that
   wraps inside its own reveal mask reads as cramped and risks clipping. */
.hsplit h1 { margin-bottom: 26px; max-width: 20ch; font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.08; }
.hsplit h1 .accent { color: var(--brass-deep); font-style: italic; font-weight: 400; }
.hsplit .hero-sub { font-size: clamp(1.04rem,1.4vw,1.16rem); line-height: 1.62; color: var(--ink-soft); max-width: 46ch; margin: 0 0 34px; }

.hcta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

/* Four short assurances, two-up. Scannable in a glance, no reading required. */
.checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 28px; max-width: 480px; }
.checks span { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; color: var(--ink-soft); line-height: 1.45; }
.checks svg { width: 16px; height: 16px; color: var(--brass); flex-shrink: 0; margin-top: 2px; }

/* ── Hero subject: a cut-out figure that FLOATS, not a photo in a frame ──
   A framed rectangle reads as decoration. A masked subject standing on the
   section baseline, with concentric rings behind it, reads as the argument:
   this is the person you are hiring. The rings are drawn in CSS so they can
   sit behind the subject and in front of the ground without a second asset. */
.hart { position: relative; align-self: end; display: flex; justify-content: center; min-height: clamp(340px, 42vw, 560px); }

.hart::before,
.hart::after {
  content: ""; position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
}
/* soft filled halo */
.hart::before {
  width: min(78%, 400px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(154,119,38,0.16), rgba(154,119,38,0.05) 55%, transparent 72%);
}
/* thin outer ring, echoing the reference's concentric motif */
.hart::after {
  width: min(96%, 500px); aspect-ratio: 1;
  border: 1px solid rgba(154,119,38,0.24);
}

.hart-subject {
  position: relative; z-index: 1;
  width: auto; max-width: 100%;
  height: clamp(340px, 42vw, 560px);
  object-fit: contain; object-position: bottom center;
  /* grounds the cutout so it does not look pasted on */
  filter: drop-shadow(0 26px 34px rgba(16,26,36,0.20));
}
/* Symbolic objects (scales, statuary) want to sit centred, not on the floor */
.hart--object { align-self: center; }
.hart--object .hart-subject { object-position: center; height: clamp(300px, 36vw, 470px); }
.hart--object::before, .hart--object::after { bottom: auto; top: 50%; transform: translate(-50%, -50%); }

/* Big quiet wordmark closing the footer *//* Big quiet wordmark closing the footer */
.foot-mark {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.04em; line-height: 0.86;
  font-size: clamp(3.4rem, 15vw, 12rem); color: rgba(255,255,255,0.07);
  text-align: center; padding: clamp(28px,4vw,52px) 0 0; margin: 0; user-select: none;
}

@media (max-width: 900px) {
  .hsplit { grid-template-columns: 1fr; gap: 22px; padding-top: clamp(24px,4vw,44px); }
  .hsplit h1, .hsplit .hero-sub { max-width: none; }
  .hart { order: -1; min-height: 0; }
  /* The figure is narrow (about 0.31 aspect), so height drives presence. It must
     read as standing IN FRONT of the rings, not floating inside them. */
  .hart-subject { height: clamp(238px, 66vw, 288px); }   /* keeps the primary CTA above the fold */
  .hart::before { width: min(50%, 172px); }
  .hart::after  { width: min(62%, 214px); }
  .checks { max-width: none; }
}
@media (max-width: 560px) {
  .checks { grid-template-columns: 1fr; gap: 12px; }
  .hcta .btn { width: 100%; }
}

/* ==========================================================================
   28. THE THROUGHLINE + SIGNATURE COMPONENTS  (v3)
   --------------------------------------------------------------------------
   One device carries the whole site: a hairline in the left margin that starts
   broken in the hero and resolves to solid by the closing CTA. Everything else
   here is a supporting motif used at least three times, so the page reads as a
   system rather than a set of decorated blocks.
   ========================================================================== */

/* ── The Throughline ─────────────────────────────────────────────────────── */
.rail { display: none; }
.rail svg { width: 2px; height: 100%; overflow: visible; }
.rail .rail-track { stroke: var(--rule-2); stroke-width: 1; opacity: .5; }
.rail .rail-fill  { stroke: var(--brass); stroke-width: 1.25; stroke-linecap: round; }
.rail .rail-cap   { fill: var(--brass); opacity: 0; }
/* On the dark band the line has to invert or it disappears */
.rail.on-dark .rail-track { stroke: rgba(255,255,255,.16); }
.rail.on-dark .rail-fill  { stroke: var(--brass-lite); }
.rail.on-dark .rail-cap   { fill: var(--brass-lite); }
@media (max-width: 1180px) { .rail { left: 14px; } .rail svg { width: 1px; } }
@media (max-width: 720px)  { .rail { display: none; } }

/* Per-row ticks in the practice index, echoing the rail */
.tick { position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--brass);
        transform: scaleX(0); transform-origin: left; opacity: .55; }

/* ── Hero mosaic: ordinary life, interrupted ─────────────────────────────── */
.mosaic-wrap { position: relative; display: grid; place-items: center; }
.mosaic-wrap::before {
  content: ""; position: absolute; width: 520px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(154,119,38,.24); transform: translate(6%, -6%);
  z-index: 0; pointer-events: none;
}
.mosaic {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  width: min(100%, 384px); aspect-ratio: 1;
}
.m-tile { position: relative; overflow: hidden; border-radius: 3px; background: var(--paper-3); will-change: transform, opacity; }
.m-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the interruption */
.m-tile--brass { background: var(--brass); }
.m-tile--ink   { background: var(--ink); display: grid; place-items: center; }
.m-tile--ink svg { width: 42%; height: auto; opacity: .85; }
.m-tile--ink picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.m-tile--ink .m-tile-mark { width: 62%; height: auto; object-fit: contain; opacity: .95; }
.mosaic:hover .m-tile { opacity: .9; }
.mosaic .m-tile:hover { opacity: 1; transform: translateY(-3px); z-index: 2; }
.m-tile { transition: opacity .3s var(--ease-2), transform .3s var(--ease); }

/* ── Oversized numeral watermark ─────────────────────────────────────────── */
.wm { position: relative; }
.wm::before {
  content: attr(data-wm);
  position: absolute; top: -58px; left: -14px; z-index: 0;
  font-family: var(--display); font-weight: 400; font-size: 150px; line-height: 1;
  color: var(--paper-3); pointer-events: none; user-select: none;
}
.wm > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .wm::before { font-size: 96px; top: -34px; left: auto; right: 0; opacity: .55; } }

/* ── Cropped wordmark ────────────────────────────────────────────────────── */
.wordmark-crop {
  font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: .82;
  font-size: clamp(4rem, 17vw, 13rem); color: var(--paper-3);
  text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  margin: 0;
}

/* ── Approach strip: three letterboxed tiles as punctuation ──────────────── */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 30px; max-width: 300px; }
.strip img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 2px; display: block; }
@media (max-width: 900px) { .strip { max-width: none; } }

/* ── Practice index row tiles ────────────────────────────────────────────── */
.pa-tile { width: 44px; height: 44px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.pa-tile img { width: 100%; height: 100%; object-fit: cover; display: block;
               filter: grayscale(1); opacity: .55; transition: filter .3s var(--ease-2), opacity .3s var(--ease-2), transform .3s var(--ease); }
.pa-row:hover .pa-tile img { filter: none; opacity: 1; transform: translateY(-2px); }

/* ── Commitments: a rule per column, interrupted by each number ──────────── */
.why-col { position: relative; }
.why-col::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.why-i .n { background: var(--paper); padding: 4px 0; }
.section--paper2 .why-i .n { background: var(--paper-2); }

/* ── Process spine ───────────────────────────────────────────────────────── */
.spine-wrap { position: relative; padding: 8px 0; }
.spine-svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; width: 2px; overflow: visible; }
.spine-line { stroke: var(--brass); stroke-width: 2; stroke-linecap: round; }
.spine-node { fill: var(--brass); }
.spine-ring { position: absolute; left: 50%; top: 34%; width: 500px; aspect-ratio: 1; transform: translate(-50%,-50%);
              border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.spine-steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(46px,6vw,84px); }
.spine-step { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.spine-step > div { max-width: 320px; }
.spine-step:nth-child(odd)  > div { grid-column: 1; justify-self: end; text-align: right; }
.spine-step:nth-child(even) > div { grid-column: 2; justify-self: start; text-align: left; }
.spine-step .sn { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--brass-lite); display: block; margin-bottom: 9px; }
.spine-step h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 7px; letter-spacing: -.012em; }
.spine-step p { font-size: .95rem; color: rgba(255,255,255,.68); margin: 0; line-height: 1.62; }
@media (max-width: 860px) {
  .spine-svg { left: 26px; transform: none; }
  .spine-ring { display: none; }
  .spine-step { grid-template-columns: 1fr; gap: 0; padding-left: 58px; }
  .spine-step:nth-child(odd) > div,
  .spine-step:nth-child(even) > div { grid-column: 1; justify-self: start; text-align: left; max-width: none; }
}

/* ── Contact cards straddling the footer edge ────────────────────────────── */
.foot-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: -1px;
              transform: translateY(-50%); position: relative; z-index: 2; }
.foot-card {
  background: var(--ink-3); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg);
  padding: 20px 22px; display: flex; align-items: center; gap: 14px; min-height: 76px;
  color: #fff; transition: border-color .25s var(--ease-2), transform .25s var(--ease), background .25s var(--ease-2);
}
.foot-card:hover { border-color: var(--brass-lite); transform: translateY(-3px); background: #22333f; }
.foot-card svg { width: 20px; height: 20px; color: var(--brass-lite); flex-shrink: 0; }
.foot-card .fc-k { font-family: var(--mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); display: block; margin-bottom: 3px; }
.foot-card .fc-v { font-size: .98rem; font-weight: 500; letter-spacing: -.008em; }
.site-foot--cards { padding-top: 0; }
.site-foot--cards .foot-top { padding-top: 20px; }
@media (max-width: 760px) { .foot-cards { grid-template-columns: 1fr; transform: translateY(-28px); } }

/* Footer texture band: the mosaic returns, almost invisible */
.foot-texture { position: relative; overflow: hidden; }
.foot-texture .ft-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; opacity: .045; pointer-events: none; }
.foot-texture .ft-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Motion primitives shared by every page */
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.line-in { display: block; }
.anim-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .anim-hidden { opacity: 1 !important; } }

/* Nav-integrated scroll progress: the nav's own bottom border fills. */
.nav { position: sticky; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass);
                transform: scaleX(0); transform-origin: left; z-index: 2; }
/* Hero split tuned for the mosaic */
.hsplit--mosaic { align-items: center; padding: clamp(56px,7vw,104px) 0 clamp(56px,7vw,104px); }
.hsplit--mosaic > div:first-child { padding-bottom: 0; }

/* Practice index gains an object tile per row */
.pa { position: relative; }
.pa-row { position: relative; grid-template-columns: 54px 44px minmax(0,0.58fr) minmax(0,1fr) 24px; }
@media (max-width: 900px) {
  .pa-row { grid-template-columns: 40px 40px minmax(0,1fr) 20px; row-gap: 10px; }
  .pa-d { grid-column: 2 / 5; }
  .pa-tile { width: 40px; height: 40px; }
}

/* Spine nodes are positioned elements, not SVG circles, so they can sit on
   the line at each step's vertical centre without a coordinate system. */
.spine-node { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--brass);
              left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; }
.spine-step { position: relative; }
@media (max-width: 860px) { .spine-node { left: 26px; } }

/* ==========================================================================
   29. HOME LAYOUT  (moved out of the page's inline <style> so a single
   stylesheet governs every page and cannot be silently overridden)
   ========================================================================== */
/* The masked line reveal gets its from-value from Anime, not from CSS, so
     a JS failure leaves the headline readable rather than invisible. */
  .line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
  .line-in { display: block; }

  /* The rail transitions its dash pattern; JS only swaps the value. */
  .rail-fill { transition: stroke-dasharray .9s cubic-bezier(0.33,1,0.68,1); }

  /* ── Hero: single centred column, deliberately sparse ── */

  /* Badge row as a hairline ledger, not boxes */

  /* Full-bleed photograph band */

  /* Statements — three columns of air, one hairline each */
  .stmts { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(32px,5vw,72px); }
  .stmt { border-top: 1px solid var(--rule-2); padding-top: 26px; }
  .stmt strong { display: block; font-family: var(--display); font-size: clamp(1.25rem,1.9vw,1.5rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
  .stmt span { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.68; }

  /* Approach */
  .appr { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,0.88fr); gap: clamp(40px,6vw,92px); align-items: start; }
  .appr-text p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.72; margin-bottom: 1.5em; }
  .appr-text p strong { color: var(--ink); }
  .aside-fig { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 34px 30px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
  .aside-fig svg { width: 190px; height: auto; }
  .aside-fig p { color: var(--ink-soft); font-size: 0.92rem; text-align: center; margin: 0; max-width: 30ch; line-height: 1.6; }

  /* Practice areas as a hairline index */
  .pa { border-top: 1px solid var(--rule); }
  .pa-row { display: grid; grid-template-columns: 54px 44px minmax(0,0.58fr) minmax(0,1fr) 24px; gap: clamp(16px,3vw,40px); align-items: baseline;
            padding: clamp(28px,3.4vw,38px) 6px; border-bottom: 1px solid var(--rule); color: var(--ink);
            transition: background .16s cubic-bezier(0.33,1,0.68,1), padding-left .32s cubic-bezier(0.33,1,0.68,1); }
  .pa-row:hover { background: rgba(154,119,38,0.055); padding-left: 18px; }
  .pa-n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--brass); }
  .pa-t { font-family: var(--display); font-size: clamp(1.32rem,2.3vw,1.75rem); font-weight: 500; letter-spacing: -0.022em; margin: 0; line-height: 1.16; }
  .pa-d { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.68; margin: 0; }
  .pa-a { color: var(--brass); align-self: center; transition: transform .32s cubic-bezier(0.33,1,0.68,1); }
  .pa-a svg { width: 17px; height: 17px; }
  .pa-row:hover .pa-a { transform: translateX(5px); }

  /* Commitments — two columns, wide gutters, no boxes */
  .why { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(40px,5.5vw,76px) clamp(44px,6vw,96px); }
  .why-i { padding-left: 62px; position: relative; }
  .why-i .n { position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--brass); }
  .why-i h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 10px; line-height: 1.4; }
  .why-i p { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.7; margin: 0; }

  @media (max-width: 900px) {
    .stmts, .appr, .why { grid-template-columns: 1fr; }
    .pa-row { grid-template-columns: 40px 40px minmax(0,1fr) 20px; row-gap: 10px; }
    .pa-d { grid-column: 2 / 5; }
  }
  @media (max-width: 620px) {
  }
  @media (prefers-reduced-motion: reduce) { .line-in { transform: none !important; } }

/* ── Mosaic + watermark: mobile containment ──────────────────────────────
   The mosaic was rendering at its 384px max inside a 350px content box, so
   it broke its column. Cap it against the column, not against a fixed px. */
@media (max-width: 900px) {
  .mosaic-wrap { width: 100%; }
  .mosaic { width: min(100%, 340px); }
  .mosaic-wrap::before { width: min(122%, 400px); }
  .wm::before { font-size: 84px; top: -28px; opacity: .5; }
}
@media (max-width: 430px) {
  .mosaic { width: min(100%, 306px); }
  .mosaic-wrap::before { width: 356px; }
  .wm::before { font-size: 72px; top: -24px; }
}

/* .pa-n sits on --paper-2, where --brass measures 3.48:1 against a 4.5:1
   requirement for text this size. The deeper tone clears it at ~6.5:1. */
.pa-n { color: var(--brass-deep); }

/* Contact detail blocks. The rebuild referenced .info-block, which only ever
   existed in the retired css/style.css, so it was rendering unstyled. */
.info-block { padding-top: 22px; border-top: 1px solid var(--rule); }
.info-block:first-child { border-top: 2px solid var(--brass); }
.info-block .label { display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px; font-weight: 500; }
.info-block p { color: var(--ink-soft); margin: 0; line-height: 1.7; }
.info-block a { min-height: 44px; display: inline-flex; align-items: center; }

/* .toc links were 2px under the 44px floor. */
.toc a { min-height: 44px; }

/* Footer column headings were h4 under an h2, skipping a level. */
.foot-col h3 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--brass-lite); margin-bottom: 15px; font-weight: 500; }

/* ── Audit fixes: small-text contrast and pointer-target minimums ────────
   WCAG 2.5.8 sets a 24px floor for pointer targets; the mobile rules already
   enforce 44px, these keep desktop above the AA floor. */
.brand-sub { font-size: 0.6rem; color: var(--ink-soft); }
.crumbs { color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); display: inline-flex; align-items: center; }
.crumb-sep { color: var(--rule-2); }
.facts dt { color: var(--ink-soft); }
.utility a, .foot-bottom a { display: inline-flex; align-items: center; }
.toc a { min-height: 44px; display: flex; align-items: center; }

/* Pointer-target floor. Scoped above the mobile breakpoint so it cannot
   override the 44px touch rules, which live earlier in this file. */
@media (min-width: 721px) {
  .crumbs a, .utility a, .foot-bottom a { min-height: 26px; }
}

/* The placeholder chip on the dark footer was rendering brass-on-brass. */
.site-foot .ph, .section--ink .ph {
  background: rgba(217,188,119,0.14);
  border-color: var(--brass-lite);
  color: #F0DFB4;
}

/* ── Specificity fix: dark-section link colour was eating button labels ──
   `.section--ink a` (0,1,1) outranks `.btn--onink` (0,1,0), so every primary
   CTA inside a dark band rendered brass-on-brass and was invisible. Scope the
   link rule so it never applies to buttons. */
.section--ink a:not(.btn):not(.foot-card) { color: var(--brass-lite); }
.section--ink .btn--onink { color: var(--ink); }
.section--ink .btn--onink-ghost { color: #fff; }
.section--ink .btn--primary { color: var(--paper); }
.section--ink .btn--brass { color: #fff; }

/* ── Dark-band and small-numeral contrast ───────────────────────────────
   `.kicker` is brass-deep for light grounds. Inside an ink section that
   measured 2.27:1 — effectively invisible. The `.on-ink` variant existed but
   nothing carried the class, so bind it to the section instead. */
.section--ink .kicker { color: var(--brass-lite); }
.section--ink .kicker::before { background: var(--brass); }

/* Commitment numerals were --brass on paper at 3.9:1. */
.why-i .n { color: var(--brass-deep); }

/* moved out of index.html so no page carries layout rules inline */
.hsplit--mosaic { align-items: center; }

/* Breadcrumb links need the touch height back on mobile. Their width stays
   text-sized: WCAG 2.5.8 exempts targets that sit inline within a sentence,
   and padding a breadcrumb out to 44px wide would break the crumb rhythm. */
@media (max-width: 720px) {
  .crumbs a { min-height: 44px; }
}

/* ── .kicker must look like a kicker whatever element carries it ────────
   `.doc-body h2` (0,1,1) was outranking `.kicker` (0,1,0), rendering FAQ
   category labels at 34px instead of 11px. Heading tags are used here for
   document outline, not for size. */
h1.kicker, h2.kicker, h3.kicker, h4.kicker,
.doc-body h1.kicker, .doc-body h2.kicker, .doc-body h3.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.section--ink h1.kicker, .section--ink h2.kicker, .section--ink h3.kicker { color: var(--brass-lite); }

/* ===== Brand logo (real artwork, images/brand/) ===== */
.brand-logo { height: 64px; width: auto; display: block; }
.drawer-logo { height: 44px; width: auto; display: block; }
@media (max-width: 720px) { .brand-logo { height: 48px; } }

/* ============================ ATTORNEY PAGE ============================ */
.bio-lede { font-family: var(--display); font-size: clamp(1.25rem,2.1vw,1.6rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 22px; }
.bio-note { font-size: 0.86rem; color: var(--ink-mute); line-height: 1.6; margin-top: 14px; }
.verify-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.86rem; color: var(--brass-deep); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.verify-link svg { width: 14px; height: 14px; }

/* ============================ ATTORNEY PAGE v2 (Sept 2026) ============================ */
/* Hero: ink ground, name + lead on the left, framed portrait on the right. Solo-firm
   convention is portrait-forward; here it sits inside a brass hairline frame so it reads
   as a plate in an annual review, not a stock headshot. */
.atty-hero { position: relative; overflow: hidden; padding: clamp(36px,4.5vw,56px) 0 clamp(64px,8vw,110px); background: var(--ink-2); color: rgba(255,255,255,0.78); border-bottom: 1px solid rgba(255,255,255,0.08); }
.atty-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 70% at 85% 30%, rgba(184,147,63,0.13), transparent 62%); }
.atty-hero .wrap { position: relative; }
.atty-hero h1 { color: #fff; max-width: 12ch; margin-bottom: 14px; }
.atty-hero .lead { color: rgba(255,255,255,0.74); max-width: 56ch; margin-top: 18px; }
.crumbs--on-ink, .crumbs--on-ink a { color: rgba(255,255,255,0.55); }
.crumbs--on-ink a:hover { color: var(--brass-lite); }
.crumbs--on-ink span[aria-current] { color: #fff; }
.crumbs--on-ink .crumb-sep { color: rgba(255,255,255,0.25); }
.atty-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,0.8fr); gap: clamp(32px,6vw,96px); align-items: center; margin-top: clamp(18px,3vw,36px); }
.atty-title { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-lite); margin: 0; }
.atty-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.atty-marks { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.86rem; color: rgba(255,255,255,0.7); }
.atty-marks li { display: inline-flex; align-items: center; gap: 8px; }
.atty-marks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); flex-shrink: 0; }
.atty-portrait { margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.atty-portrait-frame { position: relative; aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden; background: var(--ink-3); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.atty-portrait-frame::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217,188,119,0.55); border-radius: 4px; pointer-events: none; }
.atty-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.atty-portrait figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); }
.atty-portrait-name { font-family: var(--display); font-size: 1.05rem; color: #fff; letter-spacing: -0.01em; }
.atty-portrait-sub { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: right; }
.stat-sep { color: var(--brass); font-weight: 400; margin: 0 2px; }

/* Biography: prose left, sticky "at a glance" column right. */
.atty-bio-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(32px,5vw,80px); align-items: start; }
.atty-bio .kicker { margin-bottom: 18px; }
.atty-bio h2 { font-size: clamp(1.45rem,2.4vw,1.9rem); margin-top: 38px; }
.atty-pull { margin: 34px 0 10px; }
.atty-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.glance { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 22px 22px 20px; }
.glance-title { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); margin: 0 0 6px; }
.glance .cred-list { margin-top: 8px; border-top: 0; }
.glance .cred-list li { padding: 11px 0; font-size: 0.88rem; }
.glance .cred-list li:last-child { border-bottom: 0; }
.glance .verify-link { margin-top: 10px; }
.glance-links { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.glance-links a { display: block; padding: 7px 0; font-size: 0.9rem; color: var(--ink); border-bottom: 1px solid var(--rule); }
.glance-links a:hover { color: var(--brass-deep); }
.glance--cta { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,0.72); }
.glance--cta .glance-title { color: var(--brass-lite); }
.glance-phone { display: block; font-family: var(--display); font-size: 1.9rem; letter-spacing: -0.02em; color: #fff; margin: 2px 0 8px; }
.glance-hint { font-size: 0.84rem; line-height: 1.55; margin: 0 0 16px; }
.glance--cta .btn--primary { background: var(--brass); color: #fff; }
.glance--cta .btn--primary:hover { background: var(--brass-mid); }

@media (max-width: 1080px) {
  .atty-hero-grid { grid-template-columns: minmax(0,1fr) minmax(260px,0.7fr); }
  .atty-bio-grid { grid-template-columns: 1fr; }
  .atty-side { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .glance--cta { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .atty-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .atty-portrait { justify-self: start; max-width: 360px; }
  .atty-hero h1 { max-width: none; }
}
@media (max-width: 720px) {
  .atty-hero { padding-bottom: 56px; }
  .atty-hero-cta .btn { width: 100%; }
  .atty-side { grid-template-columns: 1fr; }
  .atty-portrait { max-width: none; }
  .atty-marks { gap: 8px 16px; font-size: 0.82rem; }
  .atty-portrait figcaption { flex-direction: column; align-items: flex-start; gap: 4px; }
  .atty-portrait-sub { text-align: left; }
}