/* ============================================================
   DERRYDEAN DADZIE — Personal & Thought Leadership Site
   Design language: institutional confidence. Navy + brass + cream.
   Serif display (Fraunces) for authority; Inter for clarity at scale.
   ============================================================ */

:root {
  /* Brand palette — derived directly from the real logo teal (Atoll #0D6A63) and the
     Colormind blend generated from it (Coral Tree, Mobster, Vin Rouge, Cocoa Brown).
     "Navy" and "gold" variable names are kept for low-risk theming (every rule and
     inline style already references them) but now point at the real brand hexes:
     navy-* = Cocoa Brown scale, gold-* = Vin Rouge (rose) scale. */
  --navy-950: #1d1218;  /* deepest — cocoa, near-black */
  --navy-900: #271821;  /* Cocoa Brown — exact brand hex */
  --navy-800: #4d4148;
  --navy-700: #70666c;
  --navy-600: #938b90;
  --teal-900: #063a36;  /* deep teal, for dark-on-teal moments */
  --teal-700: #0d6a63;  /* Atoll — exact brand hex, primary */
  --teal-600: #12857a;
  --teal-500: #1c9c8d;
  --teal-100: #dcece9;  /* light wash, "white blended with brand teal" */
  --teal-50:  #f2f8f7;
  --gold-700: #702d3c;
  --gold-600: #702d3c;  /* dark rose — small text / eyebrows on light backgrounds */
  --gold-500: #a14156;  /* Vin Rouge — exact brand hex, primary accent */
  --gold-400: #bf7d8c;  /* light rose tint — accents on dark backgrounds */
  --terracotta-600: #8a5049;
  --terracotta-500: #a37269;  /* Coral Tree — exact brand hex, tertiary accent */
  --terracotta-100: #f6ede9;
  --mauve-600: #6d6376;
  --mauve-500: #897f98;  /* Mobster — exact brand hex, tertiary accent */
  --mauve-100: #efedf2;
  --cream-50: #faf8f3;
  --cream-100: #f4f0e6;
  --cream-200: #ece4d3;
  --ink-900: #201720;
  --ink-700: #3f363c;
  --ink-500: #6a616a;
  --ink-300: #a79fa4;
  --white: #ffffff;
  --line: rgba(32, 23, 32, 0.1);
  --line-dark: rgba(255, 255, 255, 0.12);
  --shadow-lg: 0 20px 60px -20px rgba(29, 18, 24, 0.35);
  --shadow-sm: 0 2px 10px rgba(29, 18, 24, 0.08);
  --radius: 14px;       /* cards, inputs, panels — soft, not sharp */
  --radius-pill: 999px; /* buttons, chips, nav */
  --maxw: 1180px;
  /* Archivo + Fraunces (incl. italic) rather than the Inter/Poppins pairing most
     AI-generated sites default to — a serif display with a genuine italic cut,
     paired with a grotesk that has more character than Inter at display sizes. */
  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wordmark: "Fraunces", var(--serif);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--cream-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--navy-950); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--dark { background: var(--navy-950); color: rgba(255,255,255,0.86); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
/* section--navy is deliberately a LIGHT wash, not a dark block — most of the site
   should read as white/cream with brand-colour accents; navy-950/900 are reserved
   for the hero, footer, stat strip, and .section--dark anchors. */
.section--navy { background: var(--teal-50); color: var(--ink-900); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--navy-950); }
.section--navy .card { background: var(--white); border-color: var(--line); }
.section--cream { background: var(--cream-100); }
.section--line { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--gold-500); display: inline-block; }
.section--dark .eyebrow { color: var(--gold-400); }
/* Pill variant for the homepage hero — a bordered badge rather than a bare label */
.eyebrow--pill { border: 1px solid rgba(255,255,255,0.25); padding: 7px 16px 7px 14px; border-radius: var(--radius-pill); }
.eyebrow--pill::before { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }
.hero .eyebrow--pill { color: rgba(255,255,255,0.85); }

/* Italic serif accent word inside a headline, e.g. <h1 class="display">Some <em>Business</em>.</h1> */
h1.display em, h2.display em, .display em { font-style: italic; font-weight: 500; color: var(--teal-700); }
.section--dark .display em, .hero .display em { color: var(--gold-400); }

h1.display { font-size: clamp(2.4rem, 4.4vw, 4.2rem); letter-spacing: -0.01em; }
h2.display { font-size: clamp(1.9rem, 3vw, 2.7rem); letter-spacing: -0.01em; }
.lede { font-size: 1.2rem; color: var(--ink-700); max-width: 62ch; }
.section--dark .lede { color: rgba(255,255,255,0.72); }

/* ---------- Header ---------- */
/* Floating rounded capsule rather than a full-width bar with a hard bottom border —
   reads less like a stock template header. */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 100;
  padding: 0 20px;
}
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 14px 0 22px;
  border-radius: var(--radius-pill);
}
/* The frosted-glass background lives on a pseudo-element rather than directly on
   .container. backdrop-filter (like transform/filter/perspective) creates a new
   containing block for any position:fixed descendant — since .nav-links (the mobile
   menu) is a fixed-position child of this element, having backdrop-filter here was
   anchoring the fullscreen mobile menu to this 68px header capsule instead of the
   viewport, clipping it and letting it bleed over page content. Moving the visual
   effect to ::before keeps the look identical while leaving .container filter-free. */
.site-header .container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px -12px rgba(29, 18, 24, 0.18);
  z-index: -1;
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy-950); font-family: var(--wordmark); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.005em; }
.brand img, .brand svg { width: 36px; height: 36px; object-fit: contain; }
.brand .sub { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--ink-700); letter-spacing: 0.01em; transition: color .15s; padding: 8px 0; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--navy-950); border-color: var(--gold-500); }
.nav-cta {
  background: var(--navy-950);
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600 !important;
  border: none !important;
}
.nav-cta:hover { background: var(--teal-700); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-links { position: fixed; inset: 96px 0 0 0; background: var(--cream-50); flex-direction: column; justify-content: flex-start; padding: 40px 28px; gap: 22px; transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.1rem; width: 100%; color: var(--navy-950); }
  .nav-toggle { display: block; background: none; border: none; color: var(--navy-950); cursor: pointer; padding: 8px; }
  .nav-toggle svg { width: 26px; height: 26px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-primary { background: var(--gold-500); color: var(--white); }
.btn-primary:hover { background: var(--gold-600); transform: translateY(-1px); }
.btn-outline { border-color: rgba(255,255,255,0.35); color: var(--white); }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.btn-outline-dark { border-color: var(--navy-700); color: var(--navy-900); }
.btn-outline-dark:hover { background: var(--navy-950); color: var(--white); }
.btn-block { width: 100%; justify-content: center; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
/* Small circular arrow badge, e.g. <a class="btn btn-primary">Book a Call <span class="btn-arrow">↗</span></a> */
.btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.22); font-size: 0.85rem; line-height: 1; }
.btn-outline-dark .btn-arrow, .btn-dark .btn-arrow { background: rgba(29,18,24,0.08); }

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(ellipse 90% 60% at 78% 0%, #16324a 0%, var(--navy-950) 62%);
  color: var(--white);
  padding: 130px 0 100px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -160px; top: -160px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--gold-500), var(--mauve-500) 22%, transparent 40%, var(--teal-600) 70%, var(--terracotta-500) 88%, transparent 100%);
  opacity: 0.2;
  filter: blur(4px);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 60px; align-items: end; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: var(--white); }
.hero .lede { color: rgba(255,255,255,0.78); margin-top: 20px; }
.hero-facts { display: grid; gap: 18px; }
.hero-fact { border-left: 2px solid var(--gold-500); padding-left: 16px; }
.hero-fact .num { font-family: var(--serif); font-size: 1.9rem; color: var(--white); display: block; }
.hero-fact .lbl { font-size: 0.82rem; color: rgba(255,255,255,0.6); }

/* ---------- Stat strip ---------- */
.stat-strip { background: var(--navy-900); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 800px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-item { padding: 40px 28px; text-align: center; border-left: 1px solid var(--line-dark); }
.stat-item:first-child { border-left: none; }
.stat-item .num { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-400); display: block; margin-bottom: 6px; }
.stat-item .lbl { font-size: 0.82rem; color: rgba(255,255,255,0.62); line-height: 1.4; }

/* ---------- Stat cards (light, individual, blurred brand-colour corner) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
.stat-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; isolation: isolate; }
.stat-card::before {
  content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%;
  top: -60px; right: -60px; filter: blur(30px); opacity: 0.35; z-index: -1;
  background: var(--teal-500);
}
.stat-card:nth-child(2)::before { background: var(--gold-500); }
.stat-card:nth-child(3)::before { background: var(--terracotta-500); }
.stat-card:nth-child(4)::before { background: var(--mauve-500); }
.stat-card .num { font-family: var(--serif); font-size: 2.3rem; color: var(--navy-950); display: block; margin-bottom: 4px; }
.stat-card .lbl { font-size: 0.85rem; color: var(--ink-500); line-height: 1.4; }

/* ---------- Hero credential panel (right side of the homepage hero) ---------- */
.hero-panel {
  position: relative;
  background: linear-gradient(155deg, var(--teal-600) 0%, var(--teal-900) 100%);
  border-radius: 24px;
  padding: 44px 38px;
  color: var(--white);
  box-shadow: 0 30px 70px -25px rgba(6, 58, 54, 0.55);
  overflow: hidden;
}
.hero-panel::before,
.hero-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.14);
}
.hero-panel::before { transform: rotate(-3deg) scale(0.97); z-index: -1; background: rgba(255,255,255,0.05); }
.hero-panel::after { transform: rotate(2deg) scale(0.985); z-index: -1; background: rgba(255,255,255,0.03); }
.hero-panel .mark { width: 40px; height: 40px; opacity: 0.9; margin-bottom: 22px; }
.hero-panel .portrait-frame { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 24px; aspect-ratio: 4/5; border: 1px solid rgba(255,255,255,0.16); }
.hero-panel .portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-panel blockquote { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.35; margin: 0 0 28px; color: var(--white); }
.hero-panel blockquote.small { font-size: 1.05rem; }

/* ---------- Portrait card (used inline on About, Speaking, Work With Me) ---------- */
.portrait-card { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; box-shadow: 0 24px 44px -18px rgba(29,18,24,0.35); }
.portrait-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-card::before { content: ""; position: absolute; inset: -6px; border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line); z-index: -1; }
.portrait-card .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(0deg, rgba(29,18,24,0.75) 0%, transparent 100%); color: rgba(255,255,255,0.92); font-size: 0.82rem; font-weight: 600; }

/* Layered depth backdrop: a rotated colour card behind a .portrait-card, so a single
   photo reads as a considered composition rather than a flat rectangle. Colour variants
   let each placement pick up a tone already used elsewhere on that page. */
.portrait-stack { position: relative; }
.portrait-stack::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: var(--gold-500);
  border-radius: var(--radius);
  z-index: -2;
  transform: rotate(-2.5deg);
}
.portrait-stack--teal::before { background: var(--teal-600); }
.portrait-stack--terracotta::before { background: var(--terracotta-500); }
.portrait-stack--mauve::before { background: var(--mauve-500); }

/* Float variant: lets body copy wrap around a portrait image (used on About's
   founding-story section). Always pair with .content-clear after the wrapped copy. */
.portrait-card--float { float: left; margin: 6px 36px 24px 0; }
.content-clear { clear: both; }
@media (max-width: 640px) {
  .portrait-card--float { float: none; margin: 0 auto 32px; }
}

/* Reusable text/image split used for intro bands (e.g. Writing page). */
.split-media { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 44px; align-items: center; }
@media (max-width: 680px) {
  .split-media { grid-template-columns: 1fr; }
}

/* Staggered three-photo gallery: middle image offsets downward and each card carries
   its own layered backdrop, giving a curated, non-grid feel rather than a flat row. */
.photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 56px 0 20px; }
.photo-gallery .portrait-stack:nth-child(2) { transform: translateY(30px); }
.photo-gallery .portrait-card { aspect-ratio: 4/3; }
@media (max-width: 860px) {
  .photo-gallery { grid-template-columns: 1fr; gap: 40px; }
  .photo-gallery .portrait-stack:nth-child(2) { transform: none; }
}
.hero-panel blockquote cite { display: block; margin-top: 14px; font-family: var(--sans); font-style: normal; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.hero-panel .panel-facts { display: grid; gap: 16px; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 22px; }
.hero-panel .panel-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hero-panel .panel-fact .num { font-family: var(--serif); font-size: 1.5rem; color: var(--white); white-space: nowrap; }
.hero-panel .panel-fact .lbl { font-size: 0.82rem; color: rgba(255,255,255,0.7); text-align: right; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card .icon { width: 42px; height: 42px; margin-bottom: 18px; color: var(--gold-600); }
.card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.card p { color: var(--ink-500); font-size: 0.95rem; margin-bottom: 0; }
.card .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 14px; }

/* ---------- Case study cards ---------- */
.case {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.case-head { padding: 30px 34px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.case-head h3 { font-size: 1.35rem; margin-bottom: 4px; }
.case-head .org { color: var(--teal-700); font-weight: 600; font-size: 0.92rem; }
.case-status { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; background: var(--cream-200); color: var(--ink-700); white-space: nowrap; }
.case-status.active { background: #e4f0ec; color: var(--teal-700); }
.case-body { padding: 20px 34px 30px; }
.case-body p { color: var(--ink-700); }
.case-metrics { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-metrics div { min-width: 120px; }
.case-metrics .num { font-family: var(--serif); font-size: 1.3rem; color: var(--navy-900); display: block; }
.case-metrics .lbl { font-size: 0.76rem; color: var(--ink-500); }

/* ---------- Timeline ---------- */
.timeline { border-left: 2px solid var(--line); margin-left: 8px; }
.timeline-item { position: relative; padding: 0 0 42px 34px; }
.timeline-item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-500); border: 3px solid var(--cream-50); }
.timeline-item .yr { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--gold-600); text-transform: uppercase; }
.timeline-item h4 { margin: 4px 0 6px; font-size: 1.15rem; }
.timeline-item .org { color: var(--ink-500); font-size: 0.9rem; margin-bottom: 8px; display: block; }
.timeline-item p { color: var(--ink-700); font-size: 0.95rem; }

/* ---------- Video cards (external YouTube links, thumbnail via YouTube's public img host) ---------- */
.video-card { display: block; border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 20px 40px -22px rgba(29,18,24,0.3); transition: transform .15s ease; }
.video-card:hover { transform: translateY(-3px); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: var(--navy-950); overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; }
.video-thumb .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(29,18,24,0.65); display: flex; align-items: center; justify-content: center; }
.video-thumb .play-btn svg { width: 20px; height: 20px; color: #fff; margin-left: 3px; }
.video-card .video-meta { padding: 16px 20px; }
.video-card h3 { font-size: 0.98rem; margin-bottom: 4px; line-height: 1.3; }
.video-card .video-src { font-size: 0.78rem; color: var(--ink-500); }

/* Reveal drawer: a native <details> used to hold a "top N shown, rest on request" library
   (video archive, press archive) without extra JS. The <summary> is styled to read as a button. */
.reveal-drawer { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.reveal-drawer > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--teal-700); font-size: 0.95rem; padding: 10px 18px; border: 1px solid var(--teal-600); border-radius: var(--radius-pill); transition: background .15s ease; }
.reveal-drawer > summary::-webkit-details-marker { display: none; }
.reveal-drawer > summary:hover { background: var(--teal-50); }
.reveal-drawer > summary .reveal-arrow { transition: transform .15s ease; }
.reveal-drawer[open] > summary .reveal-arrow { transform: rotate(180deg); }
.reveal-drawer[open] > summary { margin-bottom: 22px; }
.reveal-drawer .reveal-count { font-weight: 400; color: var(--ink-500); }
.link-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.link-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--cream-100); border: 1px solid var(--line); font-size: 0.88rem; font-weight: 600; color: var(--ink-700); transition: background .15s ease, transform .15s ease; }
.link-chip:hover { background: var(--cream-200); transform: translateY(-2px); }
.link-chip .chip-tag { font-weight: 400; color: var(--ink-500); }

/* ---------- Article / writing cards ---------- */
.article-card { border-bottom: 1px solid var(--line); padding: 34px 0; display: grid; grid-template-columns: 120px 1fr; gap: 28px; }
@media (max-width: 700px) { .article-card { grid-template-columns: 1fr; } }
.article-card .meta { color: var(--ink-500); font-size: 0.82rem; }
.article-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.article-card p { color: var(--ink-700); }
.article-card .read { color: var(--teal-700); font-weight: 600; font-size: 0.88rem; }
.pullquote { font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--navy-900); border-left: 3px solid var(--gold-500); padding-left: 24px; margin: 28px 0; line-height: 1.4; }
.section--dark .pullquote { color: rgba(255,255,255,0.92); }

/* ---------- Pricing / booking ---------- */
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--gold-500); box-shadow: var(--shadow-lg); position: relative; }
.price-card.featured::before { content: "MOST BOOKED"; position: absolute; top: -13px; left: 32px; background: var(--gold-500); color: var(--white); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 20px; }
.price-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.price-card .amt { font-family: var(--serif); font-size: 2.3rem; color: var(--navy-950); margin: 10px 0 4px; }
.price-card .amt span { font-size: 0.95rem; font-family: var(--sans); color: var(--ink-500); font-weight: 500; }
.price-card ul { margin: 18px 0 26px; }
.price-card li { font-size: 0.9rem; color: var(--ink-700); padding: 7px 0; padding-left: 22px; position: relative; }
.price-card li::before { content: "—"; position: absolute; left: 0; color: var(--gold-600); }
.price-card .btn { margin-top: auto; }

/* ---------- Social icon links ---------- */
.social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-900); font-size: 0.88rem; font-weight: 600; transition: all .15s ease; }
.social-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--teal-700); }
.social-link:hover { border-color: var(--teal-600); background: var(--teal-50); }
.social-link.whatsapp svg { color: #25D366; }
.social-link.whatsapp:hover { border-color: #25D366; background: #f0faf3; }

/* Floating WhatsApp quick-note button */
.quick-note-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; background: #25D366; color: #fff; border-radius: var(--radius-pill); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35); font-weight: 600; font-size: 0.88rem; }
.quick-note-fab svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .quick-note-fab span.fab-label { display: none; } .quick-note-fab { padding: 14px; } }

/* ---------- Page-specific floating action buttons ----------
   Repeats a page's primary conversion action (Request a Speaking Engagement, Collaborate,
   Submit a Brief, Download Tailored PDF...) as a floating button, so the action is visible
   from the moment someone lands on the page, not just at the bottom of the page's own
   real estate. Stacks above the WhatsApp FAB via fixed bottom offsets, no JS required for
   positioning; a page can carry zero, one, or two of these ("fab-tier-1", "fab-tier-2"). */
.page-fab {
  position: fixed;
  right: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  background: var(--gold-500);
  cursor: pointer;
  transition: transform .15s ease;
}
.page-fab:hover { transform: translateY(-2px); }
.page-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.page-fab--teal { background: var(--teal-700); }
.page-fab--terracotta { background: var(--terracotta-600); }
.page-fab.fab-tier-1 { bottom: 88px; }
.page-fab.fab-tier-2 { bottom: 152px; }
@media (max-width: 640px) {
  .page-fab span.fab-label { display: none; }
  .page-fab { padding: 14px; }
  .page-fab.fab-tier-1 { bottom: 76px; }
  .page-fab.fab-tier-2 { bottom: 130px; }
}

/* ---------- Two-column "direct line" panels (Writing page) ----------
   Puts the Collaborate and Recommend-a-Book panels side by side as equal peers, rather
   than one stacked above the other reading as a priority order. */
.split-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.split-panels > div { display: flex; flex-direction: column; }
.split-panels .spotlight-panel { flex: 1; display: flex; flex-direction: column; }
.split-panels .spotlight-panel form { display: flex; flex-direction: column; flex: 1; }
.split-panels .spotlight-panel form button[type="submit"] { margin-top: auto; }
.panel-col-head { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 14px; }
@media (max-width: 820px) {
  .split-panels { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Logo strip ---------- */
.logo-strip { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.logo-chip { border: 1px solid var(--line-dark); color: rgba(255,255,255,0.78); padding: 10px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; cursor: default; transition: border-color .2s ease, background .2s ease; }
.section--cream .logo-chip, .section--navy .logo-chip, .section:not(.section--dark):not(.section--navy) .logo-chip { border-color: var(--line); color: var(--ink-700); }

/* Hover/focus-reveal detail: the specific engagement behind an institution's name, tucked
   inside the chip itself rather than a floating tooltip, so it's in the accessible tree by
   default and only progressively disclosed visually. Motion is a one-time reveal, not a loop. */
.logo-chip { display: inline-flex; flex-direction: column; align-items: flex-start; }
.logo-chip:hover, .logo-chip:focus { outline: none; border-color: var(--teal-600); }
.section--navy .logo-chip:hover, .section--navy .logo-chip:focus,
.section--cream .logo-chip:hover, .section--cream .logo-chip:focus { background: var(--white); }
.logo-chip .chip-detail {
  display: block;
  max-height: 0;
  max-width: 26ch;
  opacity: 0;
  overflow: hidden;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-500);
  transition: max-height .28s ease, opacity .2s ease .04s, margin-top .28s ease;
}
.section--dark .logo-chip .chip-detail, .section--navy .logo-chip .chip-detail { color: rgba(29,18,24,0.55); }
.logo-chip:hover .chip-detail, .logo-chip:focus .chip-detail { max-height: 60px; opacity: 1; margin-top: 5px; }

/* Stagger-in on scroll: default state is fully visible (safe with no JS / no
   IntersectionObserver support). main.js adds .js-stagger up front only when it can
   guarantee the .in-view follow-up, so the hidden state never gets stranded. */
.logo-strip--reveal.js-stagger .logo-chip { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 45ms); }
.logo-strip--reveal.js-stagger.in-view .logo-chip { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .logo-strip--reveal.js-stagger .logo-chip { opacity: 1; transform: none; transition: none; }
}

/* ---------- Spotlight panels ----------
   A standalone, high-visual-weight panel for a feature that deserves its own real estate
   (not a link buried in a generic dropdown). Elevated card treatment: a coloured edge,
   deep layered shadow, generous padding. */
.spotlight-panel {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 30px 60px -28px rgba(29,18,24,0.30);
}
.spotlight-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--gold-500);
}
.spotlight-panel--teal::before { background: var(--teal-600); }
.spotlight-panel--terracotta::before { background: var(--terracotta-500); }
.spotlight-panel .panel-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 14px; display: block; }
.spotlight-panel h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 6px; }
.spotlight-panel .panel-sub { color: var(--ink-500); font-size: 0.92rem; margin-bottom: 26px; }

/* Single-select pill row (e.g. picking a collaboration track before filling the form). */
.track-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.track-pill {
  padding: 10px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  background: var(--white);
  color: var(--ink-900);
  transition: all .15s ease;
}
.track-pill.active { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--navy-900); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--cream-100);
  color: var(--ink-900);
  transition: border-color .15s ease, background .15s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--teal-600); background: var(--white); }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.8rem; color: var(--ink-500); margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,0.6); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { color: var(--white); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--sans); margin-bottom: 16px; }
.footer-grid a { display: block; color: rgba(255,255,255,0.6); font-size: 0.9rem; padding: 6px 0; transition: color .15s; }
.footer-grid a:hover { color: var(--gold-400); }
.footer-bottom { border-top: 1px solid var(--line-dark); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; }

/* ---------- Page hero (interior pages) ---------- */
/* Solid brand teal, not a gradient wash — a confident flat colour block per
   interior page rather than a blended tint. */
.page-hero { background: var(--teal-700); color: rgba(255,255,255,0.9); padding: 150px 0 70px; }
.page-hero .eyebrow { color: rgba(255,255,255,0.85); }
.page-hero .eyebrow::before { background: rgba(255,255,255,0.6); }
.page-hero h1, .page-hero h2 { color: var(--white); }
.page-hero .lede { margin-top: 16px; color: rgba(255,255,255,0.82); }
.breadcrumb { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,0.9); font-weight: 600; }
/* Per-page solid colour variants — each interior page gets its own brand colour
   rather than repeating the same block site-wide. */
.page-hero--rose { background: var(--gold-500); }
.page-hero--terracotta { background: var(--terracotta-600); }
.page-hero--mauve { background: var(--mauve-600); }
.page-hero--cocoa { background: var(--navy-900); }
.page-hero--deepteal { background: var(--teal-900); }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.small-note { font-size: 0.82rem; color: var(--ink-500); }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.badge { font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: 20px; background: var(--cream-200); color: var(--navy-800); }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

/* ---------- CV intent filter ---------- */
.cv-filter { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; margin-bottom: 44px; }
.cv-filter h3 { font-size: 1rem; margin-bottom: 4px; }
.cv-filter .hint { font-size: 0.85rem; color: var(--ink-500); margin-bottom: 18px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; font-family: var(--sans); cursor: pointer; user-select: none; transition: all .15s ease; background: var(--white); color: var(--ink-900); }
.cv-chip.active { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.cv-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.cv-section { margin-bottom: 44px; transition: opacity .15s ease; }
.cv-section[hidden] { display: none; }
.cv-entry { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cv-entry:last-child { border-bottom: none; }
.cv-entry h4 { font-size: 1.02rem; margin-bottom: 3px; }
.cv-entry .org { font-size: 0.82rem; color: var(--gold-600); font-weight: 600; display: block; margin-bottom: 6px; }
.cv-entry p { font-size: 0.92rem; color: var(--ink-700); margin: 0; }
.cv-empty { display: none; text-align: center; padding: 40px 20px; color: var(--ink-500); font-size: 0.92rem; }
.cv-empty.show { display: block; }

@media print {
  .site-header, .site-footer, .quick-note-fab, .page-fab, .cv-filter, .page-hero .btn-row, .cv-print-hide { display: none !important; }
  .page-hero { background: var(--white) !important; color: var(--navy-950) !important; padding: 20px 0 !important; }
  .page-hero .eyebrow, .page-hero .breadcrumb { display: none !important; }
  .page-hero h1, .page-hero .lede { color: var(--navy-950) !important; }
  body { background: var(--white); }
  .cv-section[hidden] { display: none !important; }
  a { text-decoration: none; color: inherit !important; }
}