/* ============================================================================
   Executive design: white and spacious, leadership first. Serif headings
   (Fraunces), Inter text, rounded buttons, one deep accent.

   Loaded after site.css only while this design is chosen in Admin › Design
   (app/designs.py). The accent colour can be changed in the admin; it arrives
   as an inline style on <html>, which wins over the default here.
   ========================================================================== */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../../fonts/web/Fraunces-latin.woff2") format("woff2");
}

html[data-design="executive"] {
  --c-ground: 255 255 255;
  --c-surface: 255 255 255;
  --c-surface-2: 245 246 244;
  --c-line: 222 225 229;
  --c-ink: 21 25 30;
  --c-ink-2: 74 83 94;
  --c-ink-3: 98 106 117;
  --c-accent: 15 92 74;
  --c-accent-strong: 10 66 54;
  --c-on-accent: 255 255 255;
  --shadow: 0 16px 40px -24px rgb(21 25 30 / .25);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-label: Inter, system-ui, sans-serif;
  --wrap: 75rem;
  color-scheme: light;
}
html[data-design="executive"] h1,
html[data-design="executive"] h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }
html[data-design="executive"] h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }

/* ---------- shared components, restyled ---------- */
html[data-design="executive"] .btn { border-radius: 999px; padding: .85rem 1.5rem; }
html[data-design="executive"] .btn-sm { padding: .55rem 1.05rem; }
html[data-design="executive"] .btn-ghost { background: transparent; border-color: rgb(var(--c-ink) / .25); }
html[data-design="executive"] .btn-ghost:hover { border-color: rgb(var(--c-ink)); color: rgb(var(--c-ink)); }
html[data-design="executive"] .ex-btn-ink { background: rgb(var(--c-ink)); color: rgb(var(--c-ground)); }
html[data-design="executive"] .ex-btn-ink:hover { background: var(--accent); color: rgb(var(--c-on-accent)); }

html[data-design="executive"] .card { border-radius: .5rem; border-color: rgb(var(--c-line)); }
html[data-design="executive"] a.card:hover,
html[data-design="executive"] .card-hover:hover { transform: none; border-color: rgb(var(--c-ink) / .3); }

html[data-design="executive"] .label { letter-spacing: .08em; font-weight: 600; font-size: .7rem; }
html[data-design="executive"] .kicker { letter-spacing: .1em; font-weight: 600; }
html[data-design="executive"] .kicker::before { display: none; }
html[data-design="executive"] .chip { font-size: .72rem; letter-spacing: 0; }
html[data-design="executive"] .status { border-radius: 999px; }
html[data-design="executive"] .field { border-radius: .5rem; }

html[data-design="executive"] .trace::before,
html[data-design="executive"] .trace::after { display: none; }
html[data-design="executive"] .prose-note h2,
html[data-design="executive"] .prose-note h3 { font-family: var(--font-display); font-weight: 500; }

/* ---------- header and footer ---------- */
.ex-header { background: rgb(255 255 255 / .92); border-bottom: 1px solid rgb(var(--c-line));
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); }
.ex-brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.ex-nav { font-size: .95rem; color: rgb(var(--c-ink-2)); }
.ex-nav:hover, .ex-nav.is-on { color: rgb(var(--c-ink)); }
.ex-nav.is-on { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: .2rem; }
.ex-footer { background: rgb(var(--c-surface-2)); border-top: 1px solid rgb(var(--c-line)); }

/* ---------- home page ---------- */
.ex-roles { display: flex; flex-direction: column; gap: .15rem; color: var(--accent); font-weight: 600; font-size: .95rem; }
.ex-portrait { aspect-ratio: 4 / 5; border-radius: .25rem; overflow: hidden; background: rgb(var(--c-surface-2)); }
.ex-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 30%; }
@media (max-width: 1023px) { .ex-portrait { aspect-ratio: 4 / 3; } }
.ex-band { background: rgb(var(--c-surface-2)); }
.ex-stat { border-top: 2px solid rgb(var(--c-ink)); padding-top: 1.25rem; }
.ex-stat-num { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ex-list { border-top: 1px solid rgb(var(--c-line)); }
.ex-list > li { padding-block: 1.35rem; border-bottom: 1px solid rgb(var(--c-line)); }
.ex-list-tight > li { padding-block: .9rem; }
.ex-no { font-family: var(--font-display); color: var(--accent); font-size: 1.1rem; }
.ex-img { border-radius: .25rem; overflow: hidden; background: rgb(var(--c-surface-2)); }
.ex-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.group:hover .ex-img img { transform: scale(1.03); }
.ex-quote { background: rgb(var(--c-surface-2)); border-radius: .25rem; padding: 2rem 2.25rem; }
.ex-quote p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.65rem); line-height: 1.35; }

/* the dark partner band: the same components, with light-on-dark tokens */
.ex-dark {
  --c-ground: 21 25 30; --c-surface: 30 35 41; --c-line: 58 66 76;
  --c-ink: 255 255 255; --c-ink-2: 201 206 212; --c-ink-3: 170 177 186;
  background: rgb(21 25 30); color: #fff;
}
.ex-dark .ex-btn-light { background: #fff; color: rgb(21 25 30); }
.ex-dark .ex-btn-light:hover { background: rgb(var(--c-surface-2, 245 246 244)); }

html[data-design="executive"] .mobile-cta { background: rgb(255 255 255 / .95); }