/* Brannon Wealth - site styles (emerald, warm ivory, gold)
   Tokens: primitives -> semantic -> component. Motion: transform and opacity only. */

@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dm-serif-display-latin.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 104%; ascent-override: 92%; descent-override: 26%; }
@font-face { font-family: 'Jakarta Fallback'; src: local('Arial'), local('Helvetica Neue'); size-adjust: 103%; ascent-override: 98%; descent-override: 24%; }

:root {
  /* primitives */
  --p-navy-950: #061A16;
  --p-navy-900: #0B2923;
  --p-navy-800: #123E35;
  --p-navy-700: #1A4D42;
  --p-navy-600: #245C4F;
  --p-gold-300: #EBD6A8;
  --p-gold-400: #E1C58D;
  --p-gold-500: #B68A3A;
  --p-gold-600: #9A7330;
  --p-gold-700: #7D5C24;
  --p-ivory: #F7F4EC;
  --p-cream: #E9EDE6;
  --p-sand: #E7DFCB;
  --p-white: #ffffff;
  --p-ink: #102A24;
  --p-slate: #4F625B;
  --p-mist: #7A8C85;

  /* semantic */
  --surface: var(--p-ivory);
  --surface-raised: var(--p-white);
  --surface-alt: var(--p-cream);
  --surface-dark: var(--p-navy-800);
  --surface-darker: var(--p-navy-900);
  --text: var(--p-ink);
  --text-muted: var(--p-slate);
  --text-on-dark: #F7F4EC;
  --text-on-dark-muted: #C9D6CF;
  --accent: var(--p-gold-500);
  --accent-strong: var(--p-gold-700);
  --accent-soft: var(--p-gold-400);
  --brand: var(--p-navy-800);
  --line: rgba(18,62,53, 0.14);
  --line-on-dark: rgba(255, 255, 255, 0.14);
  --la-accent: var(--p-gold-400);

  /* component */
  --btn-radius: 999px;
  --card-radius: 20px;
  --card-shadow: 0 1px 2px rgba(18,62,53, 0.05), 0 12px 32px -12px rgba(18,62,53, 0.18);
  --card-shadow-hover: 0 2px 4px rgba(18,62,53, 0.06), 0 24px 48px -16px rgba(18,62,53, 0.28);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent);

  --font-display: 'DM Serif Display', 'DM Serif Fallback', Georgia, serif;
  --font-text: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;

  --section-pad: clamp(4rem, 8vw, 8.75rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 76px;

  --gold-metal: linear-gradient(104deg, #7D5C24 0%, #8E6A2C 14.3%, #A67C34 28.6%, #B68A3A 42.9%, #C9A35A 57.1%, #E1C58D 71.4%, #EEDCB4 85.7%, #F3E6C8 100%);
  --gold-metal-deep: linear-gradient(104deg, #5E4419 0%, #6F5120 30%, #8A6628 60%, #9A7330 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font-family: var(--font-text); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--p-gold-400); color: var(--p-navy-900); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0 0 0.5em; color: var(--p-navy-800); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-family: var(--font-text); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--text-muted); max-width: 60ch; }
.measure { max-width: 66ch; }
.num { font-variant-numeric: tabular-nums; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--p-navy-800); color: #fff; padding: 10px 16px; border-radius: 8px; transition: transform var(--dur-fast) var(--ease-out); }
.skip:focus { top: 12px; }

.gold { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 200% 100%; }
.js .gold[data-sheen] { animation: sheen 2.6s var(--ease-in-out) 0.6s 1 both; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .js .gold[data-sheen] { animation: none; } }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: 1.08rem; }

/* tonal surfaces: never flat. Each carries a soft light gradient. */
.tone-light { background: radial-gradient(120% 80% at 10% 0%, #FFFDF8 0%, var(--p-ivory) 55%, #EEE9DD 100%); }
.tone-cream { background: linear-gradient(180deg, #F1F4EF 0%, var(--p-cream) 60%, #DCE4DC 100%); }
.tone-white { background: linear-gradient(180deg, #ffffff 0%, #FBF9F4 100%); }
.tone-dark { background: radial-gradient(90% 70% at 85% 10%, #1E5A4C 0%, var(--p-navy-800) 45%, var(--p-navy-900) 100%); color: var(--text-on-dark); }
.tone-dark h1, .tone-dark h2, .tone-dark h3 { color: #fff; }
.tone-dark p { color: var(--text-on-dark-muted); }
.tone-dark a { color: var(--p-gold-300); }
.tone-dark .btn--gold, .tone-dark .btn--gold:hover { color: var(--p-navy-950); }
.tone-dark .lead { color: var(--text-on-dark-muted); }
.rule-gold { width: 64px; height: 3px; border-radius: 2px; background: var(--gold-metal); margin: 0 0 1.5rem; }
.section-head--center .rule-gold { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg-a: var(--p-navy-700); --btn-bg-b: var(--p-navy-900);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border-radius: var(--btn-radius); border: 1px solid rgba(255,255,255,0.12);
  font: 600 1rem/1 var(--font-text); letter-spacing: 0.01em; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, var(--btn-bg-a), var(--btn-bg-b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -10px rgba(11,41,35, 0.55);
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-base) ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 16px 30px -12px rgba(11,41,35, 0.6); }
  .btn:hover::after { animation: btn-sheen 0.7s var(--ease-out) 1; }
}
.btn:focus-visible::after { animation: btn-sheen 0.7s var(--ease-out) 1; }
.btn:active { transform: translateY(1px) scale(0.99); }
@keyframes btn-sheen { to { transform: translateX(120%); } }
.btn--gold { --btn-bg-a: #E6CD97; --btn-bg-b: #B08840; color: var(--p-navy-950); border-color: rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 24px -10px rgba(125,92,36, 0.6); }
.btn--ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.45); box-shadow: none; backdrop-filter: blur(6px); }
.btn--ghost-dark { background: transparent; color: var(--p-navy-800); border: 1px solid rgba(18,62,53,0.35); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--ghost-dark:hover { box-shadow: 0 10px 24px -14px rgba(11,41,35,0.4); } }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: 0.95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--p-navy-800); text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(4px); } .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; } }
.tone-dark .link-arrow { color: var(--p-gold-300); }
@media (prefers-reduced-motion: reduce) { .btn, .btn::after, .link-arrow svg { transition: none; animation: none !important; } }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(11,41,35,0.72), rgba(11,41,35,0)); transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.header::before { content: ''; position: absolute; inset: 0; background: rgba(247,244,236,0.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); opacity: 0; transition: opacity var(--dur-base) ease; border-bottom: 1px solid var(--line); }
.header.is-solid::before, .header.is-static::before { opacity: 1; }
.header.is-solid, .header.is-static { color: var(--p-navy-800); }
.header__inner { position: relative; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header__logo { display: block; width: 160px; flex: none; }
.header__logo img { width: 100%; height: auto; }
.header__logo .logo-light { display: block; }
.header__logo .logo-dark { display: none; }
.header.is-solid .logo-light, .header.is-static .logo-light { display: none; }
.header.is-solid .logo-dark, .header.is-static .logo-dark { display: block; }
.nav { display: none; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header .btn { min-height: 46px; padding: 0 20px; font-size: 0.95rem; }
.header__cta { display: none; }
.menu-btn { width: 48px; height: 48px; border-radius: 12px; border: 1px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
@media (min-width: 1100px) {
  :root { --header-h: 86px; }
  .header__logo { width: 210px; }
  .nav { display: flex; gap: 6px; }
  .nav a { color: inherit; text-decoration: none; font-weight: 500; font-size: 15.5px; padding: 12px 14px; border-radius: 10px; position: relative; }
  .nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--p-gold-400); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
  .header__cta { display: inline-flex; }
  .menu-btn { display: none; }
}
@media (min-width: 1200px) { .nav { gap: 10px; } .header__logo { width: 225px; } }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.drawer[data-open] { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(6,26,22,0.55); opacity: 0; transition: opacity var(--dur-base) ease; }
.drawer[data-open] .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 400px); background: var(--p-ivory); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 320ms var(--ease-out); box-shadow: -20px 0 60px rgba(6,26,22,0.35); }
.drawer[data-open] .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); min-height: var(--header-h); }
.drawer__top img { width: 145px; }
.drawer__close { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--p-navy-800); display: grid; place-items: center; cursor: pointer; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__nav { flex: 1; overflow: auto; padding: 8px 12px; }
.drawer__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 10px 12px; color: var(--p-navy-800); text-decoration: none; font-weight: 600; font-size: 1.05rem; border-radius: 12px; }
.drawer__nav a[aria-current="page"] { background: rgba(182,138,58,0.12); }
.drawer__nav a svg { width: 18px; height: 18px; opacity: 0.5; }
.drawer__bottom { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; background: #fff; }
.drawer__bottom .btn { width: 100%; }
.drawer__phone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-weight: 600; color: var(--p-navy-800); text-decoration: none; }
.drawer__phone svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__scrim { transition: none; } }
body.drawer-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 82svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; padding-top: var(--header-h); }
@media (min-width: 1024px) { .hero { min-height: 90vh; align-items: center; } }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--p-navy-900); }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero__media video { position: absolute; inset: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,41,35,0.55) 0%, rgba(11,41,35,0.35) 30%, rgba(11,41,35,0.82) 62%, rgba(11,41,35,0.92) 100%); }
.hero .gold { filter: drop-shadow(0 2px 6px rgba(6,26,22,0.75)); }
.hero--right .hero__inner { display: flex; justify-content: flex-end; }
.hero--right .hero__copy { text-align: left; }
@media (min-width: 1024px) { .hero--right .hero__scrim { background: linear-gradient(270deg, rgba(11,41,35,0.9) 0%, rgba(11,41,35,0.7) 42%, rgba(11,41,35,0.15) 75%, rgba(11,41,35,0.05) 100%), linear-gradient(180deg, rgba(11,41,35,0.3), rgba(11,41,35,0) 30%); } }
.hero__scrim--strong { background: linear-gradient(180deg, rgba(11,41,35,0.72) 0%, rgba(11,41,35,0.6) 40%, rgba(11,41,35,0.9) 100%); }
@media (min-width: 1024px) { .hero__scrim--strong { background: linear-gradient(90deg, rgba(11,41,35,0.94) 0%, rgba(11,41,35,0.82) 45%, rgba(11,41,35,0.35) 78%, rgba(11,41,35,0.25) 100%), linear-gradient(180deg, rgba(11,41,35,0.35), rgba(11,41,35,0) 30%); } }
@media (min-width: 1024px) { .hero__scrim { background: linear-gradient(90deg, rgba(11,41,35,0.9) 0%, rgba(11,41,35,0.74) 46%, rgba(11,41,35,0.22) 78%, rgba(11,41,35,0.08) 100%), linear-gradient(180deg, rgba(11,41,35,0.3), rgba(11,41,35,0) 30%); } }
.hero__inner { position: relative; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.hero__copy { max-width: 640px; }
.hero h1 { color: #fff; margin-bottom: 0.5em; max-width: 14ch; text-shadow: 0 2px 24px rgba(6,26,22,0.35); }
.hero .lead { color: #EDEAE0; max-width: 52ch; margin-bottom: 1.8rem; text-shadow: 0 1px 12px rgba(6,26,22,0.5); }
.hero--short { min-height: 62svh; }
@media (min-width: 1024px) { .hero--short { min-height: 64vh; } }
.hero__path { position: absolute; z-index: -1; right: -4%; bottom: -6%; width: min(62vw, 720px); height: auto; opacity: 0.85; pointer-events: none; }
.hero__path path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hero__path path { animation: draw 2.4s var(--ease-out) 0.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__path path { stroke-dashoffset: 0; animation: none !important; } }

/* trust rail */
.rail { border-top: 1px solid var(--line-on-dark); margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
@media (min-width: 768px) { .rail { grid-template-columns: repeat(4, 1fr); } }
.rail__item { display: flex; gap: 12px; align-items: flex-start; }
.rail__item svg { width: 26px; height: 26px; flex: none; color: var(--p-gold-400); }
.rail__item strong { display: block; font-size: 1.02rem; line-height: 1.2; color: #fff; }
.rail__item span { display: block; font-size: 0.85rem; color: #D6E0DA; margin-top: 3px; }

/* ---------- Reveal engine (gated behind .js) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal][data-shown] { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal-group] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal-group][data-shown] > * { opacity: 1; transform: none; }
.js [data-reveal-group][data-shown] > *:nth-child(2) { transition-delay: 60ms; }
.js [data-reveal-group][data-shown] > *:nth-child(3) { transition-delay: 120ms; }
.js [data-reveal-group][data-shown] > *:nth-child(4) { transition-delay: 180ms; }
.js [data-reveal-group][data-shown] > *:nth-child(5) { transition-delay: 240ms; }
.js [data-reveal-group][data-shown] > *:nth-child(6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Cards ---------- */
.card { background: var(--surface-raised); border-radius: var(--card-radius); box-shadow: var(--card-shadow); border: 1px solid rgba(18,62,53,0.06); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card--hover:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } }
.card__body { padding: clamp(1.4rem, 3vw, 2rem); }
.figure { overflow: hidden; border-radius: var(--card-radius); background: #D8DED7; position: relative; }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .figure:hover img { transform: scale(1.05); } }
.figure--4x3 { aspect-ratio: 4 / 3; }
.figure--3x4 { aspect-ratio: 3 / 4; }
.figure--16x9 { aspect-ratio: 16 / 9; }
.figure--sq { aspect-ratio: 1; }
.figure--frame::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(225,197,141,0.6); border-radius: calc(var(--card-radius) - 10px); pointer-events: none; }

/* icons */
.icon-plate { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, #ffffff, #EFE8D8); border: 1px solid rgba(182,138,58,0.35); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(18,62,53,0.35); color: var(--p-navy-800); }
.icon-plate svg { width: 28px; height: 28px; }
.icon-plate--dark { background: linear-gradient(160deg, #1E5A4C, #123E35); border-color: rgba(225,197,141,0.35); color: var(--p-gold-300); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-text { grid-template-columns: 1.15fr 1fr; } .split--wide-media { grid-template-columns: 1fr 1.15fr; } .split > .order-first { order: -1; } }

/* ---------- Home: intro ---------- */
.intro-points { display: grid; gap: 18px; margin-top: 1.5rem; }
.intro-point { display: flex; gap: 16px; }
.intro-point p { margin: 0; color: var(--text-muted); }
.intro-point strong { color: var(--p-navy-800); display: block; margin-bottom: 2px; }
.intro-media { position: relative; }
.intro-media .figure { aspect-ratio: 4 / 5; }
.figure--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-media__tag { position: absolute; left: -8px; bottom: 28px; background: var(--p-navy-800); color: #fff; padding: 14px 18px; border-radius: 14px; box-shadow: 0 16px 40px -14px rgba(11,41,35,0.6); max-width: 250px; border: 1px solid rgba(225,197,141,0.4); }
.intro-media__tag strong { font-family: var(--font-display); font-size: 1.6rem; display: block; line-height: 1; margin-bottom: 4px; }
.intro-media__tag > span { font-size: 0.85rem; color: #D6E0DA; }
@media (min-width: 900px) { .intro-media__tag { left: -40px; } }

/* ---------- Services ---------- */
.services { display: grid; gap: 20px; }
@media (min-width: 900px) { .services { grid-template-columns: repeat(12, 1fr); } .services > .svc { grid-column: span 5; } .services > .svc.svc--lead { grid-column: span 7; grid-row: span 2; } .services > .svc.svc--wide { grid-column: span 12; } }
@media (min-width: 1100px) { .services > .svc { grid-column: span 3; } .services > .svc.svc--lead { grid-column: span 6; } .services > .svc.svc--wide { grid-column: span 3; flex-direction: column; } .services > .svc.svc--wide .figure { width: 100%; aspect-ratio: 16 / 9; } }
.svc { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.svc__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc__body h3 { margin: 4px 0 0; color: var(--p-navy-800); }
.svc__body p { color: var(--text-muted); margin: 0; }
.svc__foot { margin-top: auto; padding-top: 10px; }
.svc--lead .figure { aspect-ratio: 16 / 10; border-radius: 0; }
.svc--lead .svc__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.svc--lead h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.svc--wide { flex-direction: row; align-items: stretch; }
.svc--wide .figure { width: 38%; border-radius: 0; flex: none; aspect-ratio: auto; }
@media (max-width: 639px) { .svc--wide { flex-direction: column; } .svc--wide .figure { width: 100%; aspect-ratio: 16 / 9; } }

/* ---------- Signature: coverage gap ---------- */
.gap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .gap { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.gap__form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 0.95rem; color: #fff; display: flex; justify-content: space-between; gap: 12px; }
.field label output { color: var(--p-gold-300); font-variant-numeric: tabular-nums; }
.field input[type="range"] { width: 100%; accent-color: var(--p-gold-400); height: 32px; }
.field input[type="range"]:focus-visible { box-shadow: none; outline: 2px solid var(--p-gold-400); outline-offset: 4px; }
.field__hint { font-size: 0.85rem; color: var(--text-on-dark-muted); margin: 0; }
.gap__viz { background: rgba(255,255,255,0.05); border: 1px solid var(--line-on-dark); border-radius: var(--card-radius); padding: clamp(1.25rem, 3vw, 2rem); backdrop-filter: blur(6px); }
.gap__total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gap__total strong { font-family: var(--font-display); font-size: clamp(2.4rem, 2rem + 2.4vw, 4rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.gap__total span { color: var(--text-on-dark-muted); }
.gap__bars { display: grid; gap: 14px; margin-top: 1.5rem; }
.bar { display: grid; gap: 6px; }
.bar__label { display: flex; justify-content: space-between; font-size: 0.9rem; color: #fff; }
.bar__label b { font-variant-numeric: tabular-nums; color: var(--p-gold-300); font-weight: 600; }
.bar__track { height: 14px; border-radius: 8px; background: rgba(255,255,255,0.12); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 8px; background: var(--gold-metal); transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform 600ms var(--ease-out); }
.bar__fill--navy { background: linear-gradient(90deg, #3F7466, #9CCBB9); }
.bar__fill--gap { background: linear-gradient(90deg, #E1C58D, #F3E6C8); }
.gap__note { margin-top: 1.25rem; font-size: 0.88rem; color: var(--text-on-dark-muted); }
.gap__cta { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .bar__fill { transition: none; } }

/* ---------- Process diagram ---------- */
.process { position: relative; display: grid; gap: 28px; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.process__line { display: none; }
@media (min-width: 900px) { .process__line { display: block; position: absolute; left: 6%; width: 88%; top: 44px; height: 40px; pointer-events: none; } .process__line path { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .process__line[data-shown] path { animation: draw 1.8s var(--ease-out) 0.2s forwards; } }
.step { position: relative; padding-top: 8px; }
.step__num { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.7rem; color: var(--p-navy-800); background: radial-gradient(circle at 30% 25%, #fff, #EFE8D8); border: 1px solid rgba(182,138,58,0.45); box-shadow: 0 10px 24px -12px rgba(18,62,53,0.4), inset 0 1px 0 #fff; margin-bottom: 18px; position: relative; z-index: 1; }
.step__num::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(182,138,58,0.5); }
.step h3 { margin-bottom: 0.4em; }
.step p { color: var(--text-muted); margin: 0; }
@media (max-width: 899px) { .step { padding-left: 88px; } .step__num { position: absolute; left: 0; top: 0; } .step:not(:last-child)::before { content: ''; position: absolute; left: 35px; top: 80px; bottom: -28px; border-left: 2px dashed rgba(182,138,58,0.5); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } .split .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 22px 20px; border-radius: var(--card-radius); background: rgba(255,255,255,0.7); border: 1px solid rgba(18,62,53,0.08); box-shadow: var(--card-shadow); }
.stat strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: 1; color: var(--p-navy-800); font-variant-numeric: tabular-nums; min-width: 3ch; }
.stat > span { display: block; margin-top: 8px; font-size: 0.92rem; color: var(--text-muted); }

/* review placeholder fence */
.placeholder-fence { border: 1px dashed rgba(182,138,58,0.7); border-radius: var(--card-radius); padding: 20px; background: rgba(255,255,255,0.5); }
.placeholder-fence__label { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); margin-bottom: 8px; }
.placeholder-fence p { margin: 0; color: var(--text-muted); }

/* ---------- Insights cards ---------- */
.post { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.post .figure { border-radius: 0; aspect-ratio: 16 / 10; }
.post__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post__body h3 { font-size: 1.35rem; margin: 0; }
.post__body p { color: var(--text-muted); margin: 0; font-size: 0.98rem; }
.post__meta { font-size: 0.85rem; color: #4F625B; margin-top: auto; padding-top: 6px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--surface-raised); border: 1px solid rgba(18,62,53,0.08); border-radius: 16px; box-shadow: var(--card-shadow); }
.faq__item[hidden] { display: none; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font: 600 1.05rem/1.45 var(--font-text); color: var(--p-navy-800); cursor: pointer; border-radius: 16px; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q svg { width: 22px; height: 22px; flex: none; transition: transform var(--dur-base) var(--ease-out); color: var(--accent); }
.faq__item[open] > .faq__q svg { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.faq__a { padding: 0 20px 18px; }
.faq__item[open] > .faq__a { animation: faq-in var(--dur-base) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
.faq__a p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.faq__a .faq__rel { margin-top: 12px; }
.faq__rel a, .faq__links a { font-weight: 600; font-size: .95rem; }
.faq__rel a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125,92,36,.35); }
.faq__rel svg { width: 16px; height: 16px; }
.faq__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 24px; }
/* /faq directory: five rows at a time once site.js takes over. Before it runs, rows past the
   fifth are held back so the page does not paint 60 rows and then collapse; an inline timer
   adds .is-failed if site.js never initialises, and every row shows again. */
.faq-dir__controls { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-bottom: 18px; }
.faq-dir__controls[hidden], .faq-dir__pager[hidden], .faq-dir__empty[hidden] { display: none; }
.faq-dir__field { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--p-navy-800); min-width: 0; }
.faq-dir__field input, .faq-dir__field select { width: 100%; min-height: 50px; padding: 12px 14px; font: 500 1rem/1.3 var(--font-text); color: var(--p-ink); background: var(--surface-raised); border: 1px solid rgba(18,62,53,.28); border-radius: 12px; }
.faq-dir__field input:focus-visible, .faq-dir__field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq-dir__reset { min-height: 50px; }
.faq-dir__status { margin: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.faq-dir__status:focus { outline: none; }
.faq-dir__status:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.faq-dir__empty, .faq-dir__note { margin: 0 0 16px; padding: 16px 18px; border-radius: 14px; background: var(--surface-raised); border: 1px dashed rgba(18,62,53,.25); color: var(--text-muted); }
.faq-dir__pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.faq-dir__pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.faq-dir__pager .flip { display: inline-flex; transform: scaleX(-1); }
.faq-dir__pager svg { width: 18px; height: 18px; }
.faq.faq--dir { display: block; }
.faq--dir > .faq__item { margin-bottom: 12px; }
.faq-dir__anchor { display: block; height: 0; }
.js .faq-dir:not(.is-ready):not(.is-failed) .faq__item:nth-of-type(n+6) { display: none; }
@media (max-width: 639px) {
  .faq-dir__controls { grid-template-columns: 1fr 1fr; }
  .faq-dir__field--search { grid-column: 1 / -1; }
  .faq-dir__pager .btn { flex: 1 1 0; justify-content: center; padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .faq__q svg { transition: none; } .faq__item[open] > .faq__a { animation: none; } }

/* ---------- CTA scene ---------- */
.cta-scene { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.cta-scene__media { position: absolute; inset: 0; z-index: -2; }
.cta-scene__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cta-pos, 50% 22%); }
.cta-scene__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(125,92,36,0.82) 0%, rgba(18,62,53,0.82) 55%, rgba(11,41,35,0.9) 100%); }
.cta-scene h2 { color: #fff; }
.cta-scene p { color: #EFEBE1; }
.cta-scene__inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .cta-scene__inner { grid-template-columns: 1.2fr auto; } }

/* ---------- Footer ---------- */
.footer { background: radial-gradient(100% 60% at 0% 0%, #1A4D42 0%, var(--p-navy-900) 50%, var(--p-navy-950) 100%); color: var(--text-on-dark-muted); padding-top: clamp(3.5rem, 7vw, 6rem); border-top: 3px solid; border-image: var(--gold-metal) 1; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__logo { width: 280px; max-width: 100%; margin-bottom: 18px; }
.footer__grid > div:first-child p { color: var(--text-on-dark-muted); max-width: 40ch; font-size: 0.95rem; }
.footer__h { color: #fff; margin: 0 0 14px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer a { color: #E4ECE7; text-decoration: none; }
.footer__links a, .footer__links li > span { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 0.92rem; font-weight: 500; color: #E4ECE7; }
.footer__links svg { width: 18px; height: 18px; flex: none; color: var(--p-gold-400); opacity: 0.9; }
.footer__links a { transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover { color: var(--p-gold-300); } .footer__links a:hover svg { color: var(--p-gold-300); } }
.footer__contact a span { overflow-wrap: anywhere; }
.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-on-dark); display: grid; place-items: center; color: #fff; }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-on-dark); padding: 26px 0 calc(28px + var(--sticky-pad, 0px)); display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 0.88rem; color: #B3C3BB; }
.footer__bottom p { margin: 0; max-width: none; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; color: #8FA39B; }
.footer__legal a { color: #E4ECE7; font-weight: 500; display: inline-block; padding: 4px 2px; }
.footer__line { color: #C9D6CF; line-height: 1.7; }
.footer__line a, .prose a, .small a, .form__note a { display: inline-block; padding-block: 2px; }
.footer__disc { font-size: 0.78rem; line-height: 1.55; color: #A3B5AD; max-width: 78ch; margin-top: 6px; }
/* Powered By Launch Automation: animated reactor mark plus the LAUNCH logo montage.
   --credit-text and --logo-filter switch for a light footer via .launch-credit--light. */
.launch-credit { display: inline-flex; align-items: center; gap: 0; text-decoration: none; background: transparent; max-width: 100%; --credit-text: #f4f7fc; --logo-filter: none; }
.launch-credit--light { --credit-text: #172132; --logo-filter: brightness(.48) saturate(1.25); }
.launch-credit__label { color: var(--credit-text); font: 500 15px/1.2 var(--font-text, Arial, sans-serif); white-space: nowrap; position: relative; z-index: 1; transform: translateY(21px); }
.launch-credit__media { position: relative; display: block; width: 310px; height: 92px; margin-left: -77px; flex: none; background: transparent; filter: var(--logo-filter); }
.launch-credit__media img, .launch-credit__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.launch-credit__media video { visibility: hidden; }
.launch-credit[data-video-ready] video { visibility: visible; }
.launch-credit[data-video-ready] img { visibility: hidden; }
.launch-credit:focus-visible { outline: 2px solid #9462e8; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 380px) { .launch-credit__media { width: 270px; height: 80px; margin-left: -66px; } .launch-credit__label { font-size: 14px; transform: translateY(18px); } }
.launch-reactor-wrap { position: relative; display: block; flex: 0 0 38px; width: 38px; height: 38px; margin-right: 7px; transform: translateY(21px); z-index: 2; overflow: visible; }
.launch-reactor-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.launch-reactor-still { display: none; }
@media (max-width: 380px) { .launch-reactor-wrap { width: 32px; height: 32px; flex-basis: 32px; margin-right: 5px; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .launch-reactor-motion { display: none; } .launch-reactor-still { display: block; } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(247,244,236,0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out); }
.sticky-cta[data-show] { transform: none; }
.sticky-cta .btn { min-height: 48px; padding: 0 12px; font-size: 0.92rem; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }
@media (max-width: 1023px) { body { --sticky-pad: 72px; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- Service page pieces ---------- */
.checklist { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 2px; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid rgba(18,62,53,0.08); display: none; }
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(18,62,53,0.08); font-size: 0.97rem; }
.compare th { background: var(--p-navy-800); color: #fff; font-weight: 600; font-family: var(--font-text); }
.compare th.is-win { background: linear-gradient(180deg, #E1C58D, #9A7330); color: var(--p-navy-950); }
.compare td.is-win { background: rgba(182,138,58,0.08); }
.compare tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 600; color: var(--p-navy-800); }
.compare-cards { display: grid; gap: 14px; }
.compare-card { background: #fff; border-radius: 16px; box-shadow: var(--card-shadow); padding: 18px; border: 1px solid rgba(18,62,53,0.08); }
.compare-card .compare-card__h { margin: 0 0 10px; color: var(--p-navy-800); font-family: var(--font-text); font-weight: 700; font-size: 1.05rem; }
.compare-card dl { margin: 0; display: grid; gap: 8px; }
.compare-card dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #4F625B; font-weight: 700; }
.compare-card dd { margin: 0 0 4px; color: var(--text-muted); }
.compare-card--win { border-color: rgba(182,138,58,0.6); background: linear-gradient(180deg, #fff, #FBF6EA); }
@media (min-width: 900px) { .compare { display: table; } .compare-cards { display: none; } }

.factors { display: grid; gap: 14px; }
.factor { display: grid; grid-template-columns: 1fr; gap: 6px 16px; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--card-shadow); border: 1px solid rgba(18,62,53,0.06); }
@media (min-width: 640px) { .factor { grid-template-columns: 190px 1fr; } }
.factor strong { color: var(--p-navy-800); }
.factor__bar { height: 10px; border-radius: 6px; background: rgba(18,62,53,0.08); overflow: hidden; }
.factor__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: 6px; background: var(--gold-metal); transform-origin: left; transform: scaleX(0); transition: transform 800ms var(--ease-out); }
.factor[data-shown] .factor__bar i, .no-js .factor__bar i { transform: none; }
html:not(.js) .factor__bar i { transform: none; }
.factor p { margin: 0; font-size: 0.9rem; color: var(--text-muted); grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .factor__bar i { transform: none; transition: none; } }

.notfor { display: grid; gap: 20px; }
@media (min-width: 900px) { .notfor { grid-template-columns: 1fr 1fr; } }
.notfor__col { border-radius: var(--card-radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: #fff; box-shadow: var(--card-shadow); border: 1px solid rgba(18,62,53,0.06); }
.notfor__col .figure { border-radius: 0; aspect-ratio: 16 / 9; }
.notfor__col--yes { border-color: rgba(182,138,58,0.5); }
.notfor__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.notfor__body h3 { font-size: 1.4rem; }
.notfor__body ul { margin: 0; padding-left: 1.2rem; color: var(--text-muted); display: grid; gap: 6px; }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--text); }
.prose li { margin-bottom: 0.4em; }
.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: 0.85rem; color: #4F625B; margin-top: 8px; }
.callout { border-left: 3px solid var(--accent); background: rgba(182,138,58,0.08); padding: 16px 20px; border-radius: 0 14px 14px 0; margin: 1.5rem 0; }
.callout p { margin: 0; }
.byline { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.92rem; margin-bottom: 1.5rem; }
.byline__mark { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 1px solid rgba(182,138,58,0.4); }
.byline__mark img { width: 26px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list strong { display: block; color: var(--p-navy-800); }
.contact-list a { font-weight: 600; overflow-wrap: anywhere; display: inline-block; padding-block: 2px; }
.contact-list > li > div:last-child { min-width: 0; flex: 1; }
.hours { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.hours td { padding: 8px 0; border-bottom: 1px solid rgba(18,62,53,0.08); }
.hours td:last-child { text-align: right; color: var(--text-muted); white-space: nowrap; font-size: 0.92rem; }
.hours td:first-child { padding-right: 8px; }
.form { display: grid; gap: 16px; background: #fff; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--card-radius); box-shadow: var(--card-shadow); border: 1px solid rgba(18,62,53,0.08); }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; color: var(--p-navy-800); }
.form input, .form select, .form textarea { width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(18,62,53,0.22); background: #fff; font: 400 1rem/1.4 var(--font-text); color: var(--text); }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { box-shadow: 0 0 0 3px rgba(182,138,58,0.35); border-color: var(--accent); }
.form__note { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.form__status { display: none; padding: 12px 16px; border-radius: 12px; background: rgba(182,138,58,0.12); color: var(--p-navy-800); font-weight: 600; }
.form__status[data-show] { display: block; }
.form__status.is-err { background: rgba(155,28,20,0.10); color: #9b1c14; }
.form input.is-err, .form select.is-err, .form textarea.is-err { border-color: #9b1c14; }
/* Honeypot: off screen and out of the tab order, never display:none, so it stays a trap
   for scripted posts without any real visitor ever meeting it. */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile mount. Genuinely in the layout at zero size: an invisible widget inside a
   display:none box cannot run its challenge in several mobile browsers, so it can only
   ever time out. position: fixed keeps it out of the form's grid flow. */
.form__ts { position: fixed; width: 0; height: 0; overflow: hidden; }
/* Confirmation panel, which replaces the form outright once a lead is accepted. */
.form-thanks { gap: 12px; }
.form-thanks h3 { margin: 0; }
.form-thanks p { margin: 0; }
.form-thanks:focus:not(:focus-visible) { outline: none; }
.map { border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid rgba(18,62,53,0.08); aspect-ratio: 16 / 9; }
.map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Links page ---------- */
.links-page { min-height: 100svh; padding: calc(var(--header-h) + 2rem) 0 4rem; }
.links-card { max-width: 520px; margin-inline: auto; text-align: center; }
.links-card__logo { width: 250px; margin: 0 auto 20px; }
.links-card__photo { width: 160px; height: 160px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; margin: 0 auto 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(182,138,58,0.6), var(--card-shadow); }
.links-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 12px; }
.links-list a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(18,62,53,0.1); box-shadow: var(--card-shadow); text-decoration: none; color: var(--p-navy-800); font-weight: 600; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.links-list a svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.links-list a span { flex: 1; text-align: left; }
@media (hover: hover) and (pointer: fine) { .links-list a:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } }
.links-qr { width: 160px; margin: 1.5rem auto 0; padding: 12px; background: #fff; border-radius: 16px; border: 1px solid rgba(18,62,53,0.1); }
.links-qr svg { width: 100%; height: auto; }

/* ---------- 404 ---------- */
.notfound { min-height: 70svh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
.notfound h1 { font-size: clamp(3rem, 2rem + 6vw, 7rem); }
@media (max-width: 639px) { .notfound .btn, .btn-row--stack .btn { width: 100%; } }

/* utilities */
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.text-center { text-align: center; }
.small { font-size: 0.9rem; color: var(--text-muted); }
.eyebrow-free { display: none; }
@media print {
  .header, .drawer, .sticky-cta, .hero__media, .cta-scene, .footer__social, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; color: #000; padding-top: 0; }
  .hero h1, .hero .lead { color: #000; text-shadow: none; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* mobile overflow guards */
a[href^="mailto:"], .footer__contact span { overflow-wrap: anywhere; }
@media (max-width: 639px) { .btn { white-space: normal; text-align: center; padding-block: 12px; line-height: 1.2; } }
.grid > *, .split > *, .contact-grid > *, .gap > *, .form > *, .form__row > *, .services > *, .notfor > * { min-width: 0; }
.form input, .form select, .form textarea { min-width: 0; }
.prose, .prose p, .prose li, .prose h2, .prose h3 { overflow-wrap: anywhere; }

.copy-btn { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(18,62,53,0.25); background: #fff; color: var(--p-navy-800); font: 600 0.8rem/1 var(--font-text); cursor: pointer; vertical-align: middle; min-height: 28px; }
.copy-btn[data-done] { background: rgba(182,138,58,0.15); border-color: var(--accent); }

/* ---------- Brannon Wealth adaptation ----------
   Identity-only changes on top of the source system: the dark wordmark sits on an ivory plaque
   over dark surfaces, gold display text uses the deeper gold on light surfaces (light gold is
   reserved for deep emerald), and the services grid is rebalanced for three services. */
.gold { background-image: var(--gold-metal-deep); }
.hero .gold, .cta-scene .gold, .tone-dark .gold, .footer .gold { background-image: linear-gradient(104deg, #D2AE6A 0%, #E1C58D 25%, #F3E6C8 50%, #E1C58D 75%, #C9A35A 100%); }
.header__logo { width: 170px; }
.header.is-solid .logo-light, .header.is-static .logo-light { display: none; }
@media (min-width: 1100px) { .header__logo { width: 196px; } }
@media (min-width: 1200px) { .header__logo { width: 200px; } }
.drawer__top img { width: 150px; }
.footer__logo-link { display: inline-block; margin-bottom: 18px; }
.footer__logo-link .footer__logo { width: 250px; margin: 0; display: block; }
.footer__grid > div:first-child .footer__brand { font-family: var(--font-display); color: #fff; font-size: 1.15rem; margin-bottom: 0.6em; }
.form__opt { font-weight: 400; color: var(--text-muted); }
@media (min-width: 900px) { .services > .svc.svc--half { grid-column: span 5; } }
@media (min-width: 1100px) {
  .services > .svc.svc--half { grid-column: span 6; flex-direction: row; }
  .services > .svc.svc--half .figure { width: 40%; aspect-ratio: auto; }
}
.tone-dark .btn--ghost-dark, .cta-scene .btn--ghost-dark { color: #fff; border-color: rgba(255,255,255,0.45); }
/* audit: opaque fallback color under the gradient text fill (contrast tools and forced-colors read this) */
.gold { color: #8A6628; }
.hero .gold, .cta-scene .gold, .tone-dark .gold, .footer .gold { color: #E1C58D; }
/* audit: the launch credit row never widens the page at 320 px */
.footer__bottom > * { min-width: 0; max-width: 100%; }
.footer__attr { min-width: 0; max-width: 100%; overflow: hidden; }
/* WebKit credit: opaque H.264 matted on #061A16, lighten keeps the footer showing around the logo */
.launch-credit[data-matte] .launch-credit__media video { mix-blend-mode: lighten; }
/* legal pages sit under the fixed static header: clear it before the gold rule */
.legal-top { padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)); }
/* header logo artwork stays inside the 180 to 260 px house range at every width */
.header__logo { width: 196px; }
.header__logo img { display: block; }
@media (min-width: 1100px) { .header__logo { width: 220px; } }
@media (min-width: 1200px) { .header__logo { width: 236px; } }
@media (max-width: 359px) { .header__logo { width: 182px; } }
.drawer__top img { width: 190px; height: auto; }
.links-card__logo { width: 260px; height: auto; display: block; }
/* services grid: the three service cards stack evenly until there is room for the split layout */
@media (min-width: 900px) and (max-width: 1099px) { .services { grid-template-columns: 1fr; } .services > .svc, .services > .svc.svc--lead, .services > .svc.svc--half { grid-column: auto; grid-row: auto; } }
/* about hero lead keeps clear of the photo at tablet widths */
@media (min-width: 900px) and (max-width: 1199px) { .hero .hero__copy .lead { max-width: 34ch; } }
/* phones: a touch more weight behind hero copy that sits over light clothing */
@media (max-width: 767px) { .hero__scrim { background: linear-gradient(180deg, rgba(11,41,35,0.6) 0%, rgba(11,41,35,0.45) 30%, rgba(11,41,35,0.86) 60%, rgba(11,41,35,0.94) 100%); } }
/* CTA scene: deeper bronze on the copy side so body text and gold words hold 4.5:1 over light photos */
.cta-scene__veil { background: linear-gradient(100deg, rgba(74,55,22,0.9) 0%, rgba(18,62,53,0.86) 55%, rgba(11,41,35,0.92) 100%); }
.cta-scene p { color: #F7F4EC; }
/* footer: emerald paper grain (tools/make_textures.py, emerald-footer.webp) at half size so the grain stays fine */
.footer { background: url('/assets/editorial/textures/emerald-footer.webp') 0 0 / 320px 320px repeat, #124135; }
.footer__legal { color: #AFC1B9; }
/* footer bottom: disclaimer centred above the credit; credit sits a little lower at 65% size */
.footer__bottom .footer__disc { max-width: 72ch; margin: 4px auto 0; text-align: center; }
.footer__bottom .footer__attr { margin-top: 18px; }
.launch-credit .launch-credit__media { width: 202px; height: 60px; margin-left: -50px; }
.launch-credit .launch-credit__label { font-size: 13px; transform: translateY(14px); }
.launch-credit .launch-reactor-wrap { width: 26px; height: 26px; flex-basis: 26px; margin-right: 6px; transform: translateY(14px); }
.footer__brand > span { display: block; }
.footer__npn { font-size: 0.85rem; color: #C9D6CF; letter-spacing: 0.02em; }
/* Services cards: whole card stays clickable through the heading link; media controls sit above it */
.svc__link { color: inherit; text-decoration: none; }
.svc__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.svc__link:focus-visible { outline: none; }
.svc:has(.svc__link:focus-visible) { outline: 3px solid var(--p-gold-400, #B68A3A); outline-offset: 3px; }
/* people photos on the two portrait service cards keep every face in frame */
.figure--people img { object-position: 50% 18%; }
@media (max-width: 639px) { .svc--wide .figure.figure--people { aspect-ratio: 4 / 3; } }
/* play-once media (Services): native video, poster until it plays, final frame held */
.play-once { position: relative; }
.play-once video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0B2923; }
.play-once__btn { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(225,197,141,0.75); background: rgba(11,41,35,0.72); color: #F7F4EC; cursor: pointer; box-shadow: 0 6px 16px rgba(6,26,22,0.35); transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.play-once__btn[hidden] { display: none; }
.play-once__btn svg { width: 20px; height: 20px; display: none; }
.play-once__btn[data-mode="play"] .po-play, .play-once__btn[data-mode="pause"] .po-pause, .play-once__btn[data-mode="replay"] .po-replay { display: block; }
@media (hover: hover) and (pointer: fine) { .play-once__btn:hover { background: rgba(18,62,53,0.92); transform: scale(1.06); } }
.play-once__btn:focus-visible { outline: 3px solid #E1C58D; outline-offset: 2px; }
.figure--frame.play-once .play-once__btn { right: 26px; bottom: 26px; }
@media (hover: hover) and (pointer: fine) { .play-once:hover video { transform: none; } }
/* contact hero: the conversation sits right, copy sits on the quiet left */
/* phones: the conversation photo sits above the copy so no face is covered by the headline */
@media (max-width: 767px) {
  .hero--stack-m { display: block; min-height: 0; padding-top: 0; background: #0B2923; }
  .hero--stack-m .hero__media { position: relative; inset: auto; height: clamp(300px, 88vw, 400px); }
  .hero--stack-m .hero__media img { object-position: 64% 22%; }
  .hero--stack-m .hero__scrim { background: linear-gradient(180deg, rgba(11,41,35,0.62) 0, rgba(11,41,35,0) 110px, rgba(11,41,35,0) calc(clamp(300px, 88vw, 400px) - 90px), #0B2923 clamp(300px, 88vw, 400px), #0B2923 100%); }
  .hero--stack-m .hero__inner { padding-block: 4px 44px; }
}

/* Work With Me menu (desktop): native details, closed by site.js on outside click or Escape */
.nav__menu { position: relative; }
.nav__menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 500; font-size: 15.5px; padding: 12px 14px; border-radius: 10px; position: relative; }
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu > summary svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.nav__menu[open] > summary svg { transform: rotate(-90deg); }
.nav__menu > summary::after { content: ''; position: absolute; left: 14px; right: 30px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--p-gold-400); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav__menu.is-current > summary::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__menu > summary:hover::after { transform: scaleX(1); } }
.nav__menu > summary:focus-visible { outline: 3px solid var(--p-gold-400); outline-offset: 2px; }
.nav__panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; padding: 10px; display: grid; background: var(--p-ivory); border: 1px solid rgba(182,138,58,.55); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(6,26,22,.35); z-index: 5; }
.nav__menu[open] > .nav__panel { animation: faq-in var(--dur-base) var(--ease-out); }
.nav .nav__panel a { color: var(--p-navy-800); font-size: 15px; padding: 11px 12px; border-radius: 10px; }
.nav .nav__panel a::after { display: none; }
.nav .nav__panel a:hover, .nav .nav__panel a:focus-visible { background: rgba(182,138,58,.14); }
.nav .nav__panel a[aria-current="page"] { background: rgba(182,138,58,.16); font-weight: 600; }
.nav .nav__panel a:last-child { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
@media (prefers-reduced-motion: reduce) { .nav__menu > summary svg, .nav__menu > summary::after { transition: none; } .nav__menu[open] > .nav__panel { animation: none; } }
/* drawer service group */
.drawer__group { margin: 14px 12px 4px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.drawer__nav a.drawer__sub { min-height: 46px; padding-left: 24px; font-weight: 500; font-size: 1rem; }
.drawer__bottom .drawer__phone { min-height: 48px; }
/* footer contact rows */
.footer__lic { font-size: .92rem; }
.footer__lic a { color: var(--p-gold-300); text-decoration: underline; text-underline-offset: 3px; }
.footer__contact a { overflow-wrap: anywhere; }
/* licensing table (/about#licensing): scrolls inside its own frame on small screens */
.lic { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid rgba(18,62,53,.12); background: var(--surface-raised); box-shadow: var(--card-shadow); }
.lic:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lic__table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .95rem; table-layout: fixed; }
.lic__table col.c-state { width: 14%; } .lic__table col.c-num { width: 13%; } .lic__table col.c-status { width: 11%; } .lic__table col.c-auth { width: 32%; } .lic__table col.c-look { width: 30%; }
.lic__table th, .lic__table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lic__table thead th { background: var(--p-navy-800); color: var(--p-ivory); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.lic__table tbody tr:last-child > * { border-bottom: 0; }
.lic__table tbody th { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--p-navy-800); }
.lic__num { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }
.lic__status { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(18,62,53,.08); color: var(--p-navy-800); font-weight: 600; font-size: .85rem; }
.lic__detail, .lic__how { display: block; margin-top: 4px; font-size: .84rem; color: var(--text-muted); }
.lic__verify { font-weight: 600; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.lic-note { margin-top: 18px; color: var(--text-muted); max-width: 70ch; }
.lic-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 22px; font-weight: 600; color: var(--p-navy-800); }
.lic-meta span { display: inline-flex; align-items: center; gap: 8px; }
.lic-meta svg { width: 20px; height: 20px; color: var(--accent); }
/* research-package page components (2026-09-16) */
.checklist--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .checklist--2 { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.card__body--roomy { padding: clamp(1.6rem, 3.4vw, 2.6rem); }
.card__body--roomy p + p { margin-top: .75rem; }
h2.h3 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem); line-height: 1.25; }
.steps5 { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 640px) { .steps5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps5 { grid-template-columns: repeat(5, 1fr); } }
.steps5 .card__body { padding: clamp(1.3rem, 2.4vw, 1.7rem); }
.steps5 h3 { font-size: 1.35rem; margin: .6rem 0 .35rem; }
.steps5 p { margin: 0; color: var(--text-muted); }
.steps5__n, .qgrid__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 400 1.25rem/1 var(--font-display); color: var(--p-navy-800); background: linear-gradient(160deg, #F3E6C8, #E1C58D); box-shadow: inset 0 0 0 1px rgba(125,92,36,.35); }
.qgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .qgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .qgrid { grid-template-columns: repeat(3, 1fr); } }
.qgrid li { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--surface-raised); border: 1px solid rgba(18,62,53,.08); box-shadow: var(--card-shadow); }
.qgrid p { margin: 0; font-weight: 600; color: var(--p-navy-800); line-height: 1.45; }
.qgrid__n { flex: none; }
.media-card { margin-top: clamp(2rem, 4vw, 3rem); display: flex; gap: 20px; align-items: flex-start; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 20px; background: var(--surface-raised); border: 1px solid rgba(182,138,58,.35); box-shadow: var(--card-shadow); max-width: 860px; }
.media-card h3 { margin-bottom: .4rem; }
.media-card p { margin: 0 0 .6rem; color: var(--text-muted); }
.media-card .media-card__note { font-size: .88rem; font-style: italic; }
@media (max-width: 560px) { .media-card { flex-direction: column; } }
.related { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: .95rem; }
.related span { font-weight: 700; color: var(--p-navy-800); }
.related a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact-list a { color: var(--p-navy-800); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.svc .link-arrow { display: inline-flex; }
/* closed disclosure content stays out of layout (some engines lay it out while hidden) */
.faq__item:not([open]) > .faq__a, .nav__menu:not([open]) > .nav__panel { display: none; }
/* inline links keep a 24px touch target */
.lic__verify, .footer__lic a, .related a, .contact-list a, .checklist a, .media-card .link-arrow { display: inline-block; padding-block: 3px; }
.faq__rel a { min-height: 28px; }
/* licensing table under 768px: each state becomes its own card (no sideways scroll box) */
@media (max-width: 767px) {
  .lic { overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .lic__table, .lic__table tbody, .lic__table tr, .lic__table th, .lic__table td { display: block; }
  .lic__table { min-width: 0; table-layout: auto; }
  .lic__table colgroup { display: none; }
  .lic__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lic__table tbody tr { background: var(--surface-raised); border: 1px solid rgba(18,62,53,.12); border-top: 3px solid var(--accent); border-radius: 16px; box-shadow: var(--card-shadow); padding: 16px 18px; margin-bottom: 14px; }
  .lic__table tbody tr:last-child > * { border-bottom: 0; }
  .lic__table tbody th { padding: 0 0 8px; border: 0; font-size: 1.35rem; }
  .lic__table td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); }
  .lic__table td::before { content: attr(data-label); font-size: .72rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); padding-top: 2px; }
  .lic__table td > * { grid-column: 2; }
  .lic__table td > .lic__detail, .lic__table td > .lic__how { grid-column: 2; margin-top: -8px; }
}
@media (max-width: 767px) { .lic__table td > .lic__status, .lic__table td > .lic__num, .lic__table td > .lic__verify { justify-self: start; } }
/* services: the topic list Angie asked for (2026-09-23) */
.topic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .topic-list { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.topic-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; background: var(--surface-raised); border: 1px solid rgba(18,62,53,.09); border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; box-shadow: var(--card-shadow); }
.topic-list svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.topic-list strong { color: var(--p-navy-800); }
.topic-list span { color: var(--text-muted); line-height: 1.55; }