/* Consistent keyboard, pointer, and reading states across the suite. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
:where(button, .kit-btn, .btn-syllabus, .btn-card-select) { min-height: 44px; }
.utility-link { min-height: 44px; display: inline-flex; align-items: center; }
:where(button, a):active { filter: brightness(0.88); }
.overlay-open { overflow: hidden; }
.action-card { position: relative; border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.action-card:hover { border-color: var(--surface-accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.action-card:focus-within { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.card-primary-action::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.action-card :where(a, button):not(.card-primary-action) { position: relative; z-index: 2; }
.card-detail-action { background: transparent; border: 0; border-bottom: 1px solid var(--surface-accent); color: var(--surface-accent); cursor: pointer; font: 500 12px var(--font-display); letter-spacing: 1.5px; margin-top: 16px; align-self: flex-start; }
.card-detail-action:hover { color: var(--ink); background: var(--white-sunken);}
dialog.custom-dialog { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100dvh; margin: 0; padding: 20px; border: 0; background: transparent; color: var(--ink); }
dialog.custom-dialog[open] { display: flex; align-items: center; justify-content: center; }
dialog.custom-dialog:not([open]) { display: none; }
.custom-dialog .modal-content { max-height: calc(100dvh - 40px); padding-top: 64px; overscroll-behavior: contain; }
.modal-close-btn { min-width: 44px; min-height: 44px; top: 12px; right: 12px; }
.card-detail-content { color: var(--ink); }
.custom-dialog::backdrop { background: rgba(0,0,0,0.82); }
.custom-dialog .modal-content { position: relative; background: var(--white-raised); color: var(--ink); width: 100%; max-width: 720px; overflow-y: auto; padding: 64px 32px 32px; border: 1px solid var(--line); border-radius: 4px;
  --surface-accent: var(--maroon-700);
  --surface-heading: var(--maroon-700);
  --surface-muted: var(--ink-2);
  --focus-color: var(--maroon-700);
  --button-bg: var(--maroon-700);
  --button-text: var(--white);
  --button-hover: var(--maroon-600);
}
.custom-dialog .modal-close-btn { position: absolute; background: var(--white-raised); color: var(--ink); border: 1px solid var(--line); cursor: pointer; font-size: 28px;}
.clipboard-status { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--white-raised); color: var(--ink); border: 2px solid var(--surface-accent); padding: 12px 20px; z-index: 3000; width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 1px 2px rgba(0,0,0,.06);
  --surface-accent: var(--maroon-700);
  --surface-heading: var(--maroon-700);
  --surface-muted: var(--ink-2);
  --focus-color: var(--maroon-700);
  --button-bg: var(--maroon-700);
  --button-text: var(--white);
  --button-hover: var(--maroon-600);
}
.site-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
[id] { scroll-margin-top: 110px; }
@media (max-width: 900px) {
  .nav-menu.nav-open { position: absolute; top: 100%; bottom: auto; height: calc(100dvh - var(--nav-top, 110px)); left: 0; right: 0; overflow-y: auto; justify-content: flex-start; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal-content { padding: 64px 24px 28px; }
}
@media screen and (max-width: 700px) {
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .proposal-deck { margin: 16px 12px 32px; gap: 20px; }
  .proposal-page { min-height: auto; padding: 28px 20px; }
  .proposal-page .cover-title { font-size: 36px; overflow-wrap: anywhere; }
  .cover-meta-grid, .two-col-grid, .stat-trio-grid, .bio-split, .survey-four-grid, .voices-grid,
  .sheet-header, .bio-grid, .content-grid, .stats-grid, .content-columns { grid-template-columns: minmax(0, 1fr); }
  .metrics-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cover-meta-grid { padding: 16px; }
  .page-running-header, .page-footer { flex-wrap: wrap; gap: 8px; }
  .proposal-page table { display: block; max-width: 100%; overflow-x: auto; }
  .proposal-page :where(h1,h2,h3,p,li,a), .sheet-container :where(h1,h2,h3,p,li,a) { overflow-wrap: anywhere; }
  .proposal-page [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
  .sheet-container { padding: 20px; }
  .contact-block { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .card-detail-action, .clipboard-status { display: none !important; } }


/* Maroon, white and grey brand palette. */

.top-announcement { background-color: var(--white); color: var(--forest); border-bottom: 1px solid var(--line);
  --surface-accent: var(--maroon-700);
  --surface-heading: var(--maroon-700);
  --surface-muted: var(--ink-2);
  --focus-color: var(--maroon-700);
  --button-bg: var(--maroon-700);
  --button-text: var(--white);
  --button-hover: var(--maroon-600);
}
.site-header, .nav-menu.nav-open { background: var(--forest);
  --surface-accent: var(--accent-on-dark);
  --surface-heading: var(--white);
  --surface-muted: var(--muted-on-dark);
  --focus-color: var(--white);
  --button-bg: var(--white);
  --button-text: var(--maroon-700);
  --button-hover: var(--white-sunken);

  color: var(--white);
}
.brand-logo-circle { border-color: var(--white-raised); }
.brand-sub, .logo-letters, .hero-kicker, .hero-main-title .gold-text,
.metric-num, .hero-section .btn-ghost:hover { color: var(--surface-accent); }
.hero-section, .subpage-hero, .about-section { background-image: none; }
.hero-section, .subpage-hero { background-color: var(--forest);
  --surface-accent: var(--accent-on-dark);
  --surface-heading: var(--white);
  --surface-muted: var(--muted-on-dark);
  --focus-color: var(--white);
  --button-bg: var(--white);
  --button-text: var(--maroon-700);
  --button-hover: var(--white-sunken);

  color: var(--white);
}
.hero-section .portrait-dashed-frame { border: 1px solid var(--maroon-200); }
.nav-menu a:hover, .nav-menu a.active { color: var(--white); }
.nav-menu a.active::after { background: var(--white-raised);
}
.mobile-menu-toggle { color: var(--white); border-color: var(--maroon-200); }
.nav-contact-btn:is(:hover,:focus-visible,:active), .nav-contact-btn.active {
  background: var(--white-raised) !important; color: var(--forest) !important; border-color: var(--white-raised) !important;}
.btn-gold, .btn-outline { color: var(--white); border-color: var(--white-raised); }
.btn-gold:is(:hover,:focus-visible,:active), .btn-outline:is(:hover,:focus-visible,:active) {
  background: var(--white-raised); color: var(--forest); border-color: var(--white-raised);}
.btn-gold-solid, .btn-card-select, .gold-badge-banner, .print-action-btn, .print-btn {
  background: var(--forest-action); color: var(--white); border-color: var(--forest-action);}
.btn-gold-solid:is(:hover,:focus-visible,:active), .btn-card-select:is(:hover,:focus-visible,:active),
.kit-btn:is(:hover,:focus-visible,:active), .pkg-select-btn:is(:hover,:focus-visible,:active),
.btn-dark-outline:is(:hover,:focus-visible,:active), .btn-syllabus:is(:hover,:focus-visible,:active),
.print-action-btn:is(:hover,:focus-visible,:active), .print-btn:is(:hover,:focus-visible,:active) {
  background: var(--forest-hover); color: var(--white) !important; border-color: var(--forest-hover);}
.calc-results-card .results-header, .calc-results-card .total-fee-display { color: var(--white); }
.calc-results-card .btn-copy-scope { color: var(--white); border-color: var(--maroon-200); }
.calc-results-card .btn-copy-scope:is(:hover,:focus-visible,:active) { background: var(--white-raised); color: var(--forest);}
.subpage-breadcrumb { color: var(--surface-accent); background: var(--black-2); border-color: var(--maroon-200); }
.keynotes-section .gold-underline, .services-section .gold-underline,
.mediakit-section .gold-underline, .keynotes-section .section-title-center .gold-underline { background: var(--surface-accent);
}
.cover-page { --surface-accent: var(--accent-on-dark);
  color: var(--white);
}
.proposal-page [style*="background: var(--black)"], .proposal-page [style*="background-color: var(--black)"] { --surface-accent: var(--accent-on-dark);
  color: var(--white);
}
.utility-bar { background: var(--forest);
  --surface-accent: var(--accent-on-dark);
  --surface-heading: var(--white);
  --surface-muted: var(--muted-on-dark);
  --focus-color: var(--white);
  --button-bg: var(--white);
  --button-text: var(--maroon-700);
  --button-hover: var(--white-sunken);

  color: var(--white);
}
.footer-monogram, .footer-brand .footer-text { color: var(--white); }
.site-footer a:hover { color: var(--surface-accent); }
.custom-dialog::backdrop { background: rgba(0,0,0,0.82); }
.banner-quote-text, .pipeline-step-num, .outcome-label-col span, .stat-box .stat-num, .metrics-row .metric-val { color: var(--surface-accent); }
.footer-tagline, .footer-copyright, .banner-quote-author, .calc-note { color: var(--surface-muted); }
.pkg-badge, .per-mo, .sheet-container footer { color: var(--surface-muted); }
.proposal-page [style*="background: var(--color-gold)"][style*="color: var(--maroon-700)"] { color: var(--white) !important; }
.proposal-page [style*="background: var(--black)"] .card-detail-action { color: var(--surface-accent); border-color: var(--surface-accent); }

/* Button colors inherit the containing section or card surface. */
:is(.btn-gold, .btn-outline, .btn-dark-outline, .btn-gold-solid, .btn-card-select, .btn-syllabus, .kit-btn, .pkg-select-btn, .btn-copy-scope, .nav-contact-btn, .nav-back-btn, .print-action-btn, .print-btn) {
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  border-color: var(--button-bg) !important;
  border-radius: 4px;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
:is(.btn-gold, .btn-outline, .btn-dark-outline, .btn-gold-solid, .btn-card-select, .btn-syllabus, .kit-btn, .pkg-select-btn, .btn-copy-scope, .nav-contact-btn, .nav-back-btn, .print-action-btn, .print-btn):is(:hover, :focus-visible, :active) {
  background: var(--button-hover) !important;
  color: var(--button-text) !important;
  border-color: var(--button-hover) !important;
}
:where(a, button, input, select, textarea):focus-visible, .action-card:focus-within {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
/* Keep secondary text readable on every inherited surface. */
.footer-tagline, .footer-copyright, .footer-links, .footer-links a { color: var(--muted-on-dark); }
.why-section .gold-underline { background: var(--black); }
.form-control, .contact-box .form-control { background-color: var(--white-sunken); }

/* Kado surface rules override the former brand layer. */
.site-header, .nav-menu.nav-open { background-color: var(--black); }
.site-footer, .site-footer a, .footer-tagline, .footer-copyright { color: var(--white); }
.hero-section .btn-gold-solid, .subpage-hero .btn-gold-solid { --button-bg: var(--white); --button-text: var(--maroon-700); --button-hover: var(--grey-200); }

/* ================= Kado brand layer: logo-led maroon, Jost wordmark type ================= */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }
.top-announcement { background-color: var(--maroon-900); color: var(--white); border-bottom-color: var(--maroon-900); }
.top-announcement span, .top-announcement a { color: var(--white); }
.brand-monogram-box { gap: 12px; }
.brand-logo { width: auto; height: 28px; }
.brand-name { font-size: 15px; font-weight: 400; letter-spacing: 0.24em; line-height: 1.15; }
.brand-sub { font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: 0.18em; color: var(--maroon-200); margin-top: 3px; }
.nav-menu { gap: 22px; }
.nav-menu a { font-size: 12px; font-weight: 400; letter-spacing: 0.18em; }
.nav-contact-btn { font-size: 12px !important; font-weight: 500 !important; padding: 8px 18px !important; }
.hero-section { padding: 84px 24px 96px; border-bottom: 0; }
.hero-content-grid { grid-template-columns: 1.3fr 0.7fr; }
.hero-kicker { font-weight: 500; letter-spacing: 0.22em; margin-bottom: 14px; }
.hero-main-title { font-weight: 300; letter-spacing: -0.005em; line-height: 1.12; text-transform: none; }
.hero-main-title .gold-text { color: var(--maroon-200); font-weight: 400; }
.hero-image-col { display: flex; justify-content: center; }
.hero-k-mark { display: block; width: 100%; max-width: 380px; height: auto; opacity: 0.2; }
.hero-section .btn-outline, .hero-section .btn-gold, .subpage-hero .btn-outline, .subpage-hero .btn-gold, .subpage-hero .btn-gold-solid { font-size: 13px; font-weight: 500; letter-spacing: 0.18em; border-width: 1px; }
.hero-section .btn-gold, .subpage-actions a:not(:first-child) { background: transparent !important; color: var(--white) !important; border: 1px solid var(--white) !important; }
.hero-section .btn-gold:is(:hover, :focus-visible, :active), .subpage-actions a:not(:first-child):is(:hover, :focus-visible, :active) { background: var(--maroon-600) !important; color: var(--white) !important; border-color: var(--white) !important; }
.hero-section .btn-ghost { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--white); }
.subpage-hero { padding: 64px 24px 56px; }
.subpage-title { font-weight: 300; text-transform: none; letter-spacing: -0.005em; }
.subpage-breadcrumb { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 14px; font-weight: 500; letter-spacing: 0.22em; color: var(--maroon-200); }
.speaker-display-name { font-weight: 400; letter-spacing: 0; }
.gold-badge-banner { border-radius: 0; font-size: 14px; font-weight: 500; letter-spacing: 0.18em; }
.portrait-dashed-frame, .about-quote-panel { border-radius: 2px; }
.k-rule { --k-rule-color: var(--maroon-700); display: block; width: 56px; height: 5px; border-top: 1px solid var(--k-rule-color); border-bottom: 1px solid var(--k-rule-color); margin: 0 0 22px; }
.hero-section .k-rule, .subpage-hero .k-rule, .site-footer .k-rule { --k-rule-color: var(--maroon-200); }
.subpage-hero .k-rule { margin: 0 auto 22px; }
.site-footer { background-color: var(--maroon-900); }
.footer-lockup { display: block; width: auto; height: 76px; }
.footer-brand { flex-direction: column; gap: 14px; }
.footer-text { font-weight: 400; letter-spacing: 0.22em; font-size: 13px; }
@media (max-width: 1024px) {
  .hero-image-col { display: none; }
  .hero-section { padding: 56px 24px 64px; }
}