/*
Theme Name: operetic
Text Domain: operetic
Description: Custom classic theme for Operetic — fractional leadership consulting. Built from the approved site mockup.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* ============================================================
   OPERETIC — SHARED STYLESHEET
   House system: white canvas / emerald accent / dark-ink bookends
   Playfair Display + DM Sans. Header, footer and select emphasis
   blocks stay dark ink; hero and body content run white.

   Ported verbatim from the approved site mockup, then extended
   with the media, equal-height and mobile rules noted at the end.
   ============================================================ */

:root {
  --ink:          #14161c;
  --paper:        #f2f4f3;
  --cream:        #ffffff;
  /* --emerald is the brand accent, but at 3.43:1 against white it only clears
     WCAG AA for LARGE text. Anywhere it carries small text — a button label, an
     eyebrow, a stat caption — use --emerald-d (5.25:1) instead. --emerald-dd is
     the hover step below that. */
  --emerald:      #0f9c86;
  --emerald-d:    #0b7a68;
  --emerald-dd:   #096354;
  --emerald-l:    #34d8bd;
  --emerald-pale: #e7f6f2;
  --rust:         #a03020;
  --slate:        #2a2f3e;
  --slate-d:      #1c2030;
  --muted:        #6b6b72;
  --border:       #e4e2db;
  --section-bg:   #f5f5f2;
  --eu-blue:      #0055aa;
  --green:        #3a6b35;
  --maxw:         1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream); color: var(--ink);
  font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.serif { font-family: 'Playfair Display', serif; }
.mono  { font-family: 'DM Mono', monospace; }

/* ── EYEBROW / LABEL ── */
/* 11px, so it needs the AA-safe accent rather than the display one. */
.eyebrow, .section-label {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--emerald-d); margin-bottom: 14px; display: block;
}
.name-note {
  font-family: 'DM Sans', sans-serif; font-style: italic; font-size: 14px;
  color: rgba(20,22,28,.58); max-width: 560px; margin: -6px 0 22px; line-height: 1.6;
}
.name-note strong { font-style: normal; color: var(--emerald-d); font-weight: 600; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 14px 26px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; transition: all .18s;
}
/* 14.5px white on --emerald is 3.43:1 and fails AA; on --emerald-d it is 5.25:1. */
.btn-primary { background: var(--emerald-d); color: #fff; }
.btn-primary:hover { background: var(--emerald-dd); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(20,22,28,.22); color: var(--ink); }
.btn-ghost:hover { border-color: var(--emerald); color: var(--emerald-d); }
.btn-outline { border-color: var(--slate); color: var(--slate); }
.btn-outline:hover { background: var(--slate); color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }
/* Ghost/outline buttons on dark ink surfaces (CTA band) need the light treatment */
.cta-band .btn-ghost { border-color: rgba(245,240,232,.4); color: var(--paper); }
.cta-band .btn-ghost:hover { border-color: var(--emerald-l); color: var(--emerald-l); }

/* ── HEADER / MEGA MENU (stays dark ink) ── */
.site-header {
  position: sticky; top: 0; z-index: 500; background: rgba(28,32,48,.97);
  backdrop-filter: blur(6px); border-bottom: 1px solid rgba(245,240,232,.1);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 40px; position: relative;
  display: flex; align-items: center; justify-content: space-between; height: 76px;
}
/* ── LOCKUP: the aperture mark IS the "O" of Operetic ──
   Treatment G (brand-assets/operetic/README.md): wordmark in Playfair Display
   700, ring aligned cap-strict. The mark's stroke-to-diameter ratio is fixed at
   13/85 = .1529, so scale is the only lever on its weight — at Bold, a ring
   sized to the face's own cap O (736/1000em) lands within 3% of the O's
   area-equivalent monoline weight. At 900 the same ring reads weedy.

   The word that follows is live text, not outlines, so it stays selectable and
   crisp. A visually-hidden "O" restores the full word for search engines; the
   link's aria-label carries it for assistive technology.

   Treatment E, "Medallion" — chosen 6 Sep 2026. The ring is grown until its
   stroke literally equals Playfair's lowercase stem (180 units), which puts it
   at 1.662x cap height and 1.38x the cap O's monoline weight. The mark
   therefore leads the wordmark rather than sitting inside it, which is the
   intended effect. Wordmark stays at 900, so the OG card keeps its 900-vs-700
   contrast against the headline.

   Geometry, all in em so the lockup survives any font-size:
   - svg box  1.385em  — ring outer D 1.177em / .85 (the ring fills 85% of the box)
   - baseline alignment + margin-bottom -.339em puts the ring's centre on 354,
     the midpoint of Playfair's own cap O. Ring outer radius is .5885em, so the
     ring bottom lands at .354 - .5885 = -.2345em, and the box adds .104em of
     padding below that.
   - margin-right -.024em is the solved optical sidebearing: ring right edge to
     the "p" origin is 80 units, and the box already carries 104 of padding
   - letter-spacing .03em is E's +30 tracking, which the wider ring needs

   Because the ring drops below the p's descender, the lockup is ~20% taller
   than the cap-strict treatments. The mark sizes the lockup and the wordmark
   follows, so header height is unchanged. */
.logo {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 23px;
  color: #fff; letter-spacing: .03em; line-height: 1;
}
/* The vertical offset is `position: relative; top`, NOT margin-bottom.
   Under `align-items: baseline` a flex item with no baseline of its own has one
   synthesised from its border-box bottom edge, and margin-bottom is ignored in
   that synthesis — verified: changing it from 0 to -20px moved the ring zero
   pixels. A relative offset does not affect layout, so the ring can drop below
   the descender without pushing the header taller. */
.logo-mark {
  flex-shrink: 0; display: block; width: 1.385em; height: 1.385em;
  position: relative; top: .339em; margin-right: -.024em;
}
.logo-dot { fill: var(--emerald-l); }
.logo-word { display: block; }
.logo:hover .logo-dot { fill: #fff; transition: fill .18s; }
.main-nav { display: flex; height: 100%; }
.main-nav > ul { display: flex; align-items: center; height: 100%; gap: 4px; }
.main-nav > ul > li { height: 100%; display: flex; align-items: center; }
.main-nav > ul > li > a {
  color: rgba(245,240,232,.82); font-size: 14px; font-weight: 500; padding: 0 16px;
  height: 100%; display: flex; align-items: center; transition: color .15s;
  border-bottom: 2px solid transparent;
}
.main-nav > ul > li:hover > a, .main-nav > ul > li.active > a { color: #fff; border-bottom-color: var(--emerald-l); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }

.has-mega { position: static; }
.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--slate-d);
  border-bottom: 3px solid var(--emerald); padding: 40px 0; opacity: 0; visibility: hidden;
  transform: translateY(-8px); transition: all .2s; box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.has-mega:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 48px; }
.mega-col h4 {
  font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--emerald-l); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(245,240,232,.15);
}
.mega-col a { display: block; color: rgba(245,240,232,.78); font-size: 14.5px; padding: 8px 0; transition: color .15s; }
.mega-col a:hover { color: var(--emerald-l); padding-left: 4px; }
.mega-col.featured-col a { font-weight: 500; color: #fff; }
.mega-col .mega-note { font-size: 12px; color: rgba(245,240,232,.45); line-height: 1.6; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(245,240,232,.1); }

/* ── HERO (white canvas) ── */
.hero { background: #fff; color: var(--ink); padding: 96px 0 80px; position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; top:-80px; right:-80px; width:420px; height:420px; border-radius:50%; border:1px solid rgba(15,156,134,.16); }
.hero::after { content:''; position:absolute; bottom:-120px; left:20%; width:320px; height:320px; border-radius:50%; border:1px solid rgba(15,156,134,.09); }
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(38px,5.2vw,64px); font-weight: 900; line-height: 1.06; margin-bottom: 26px; color: var(--ink); }
.hero h1 em { color: var(--emerald); font-style: italic; }
.hero p.lead { font-size: 18px; color: #444; line-height: 1.7; max-width: 620px; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.page-hero { background: #fff; color: var(--ink); padding: 68px 0 56px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; border:1px solid rgba(15,156,134,.16); }
.page-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(32px,4.2vw,48px); font-weight: 800; line-height: 1.12; margin-bottom: 18px; color: var(--ink); }
.page-hero h1 em { color: var(--emerald); font-style: italic; }
.page-hero p.lead { font-size: 16.5px; color: #444; line-height: 1.7; max-width: 640px; }
.breadcrumb { font-family: 'DM Mono', monospace; font-size: 11.5px; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a { color: #555; }
.breadcrumb a:hover { color: var(--emerald-d); }

/* ── IMAGE PLACEHOLDER (retained for slots awaiting real assets) ── */
.img-ph {
  background: repeating-linear-gradient(135deg, #eef1ef, #eef1ef 12px, #e2e7e4 12px, #e2e7e4 24px);
  border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); position: relative; overflow: hidden; min-height: 220px;
}
.img-ph .ph-label {
  background: rgba(28,32,48,.86); color: var(--paper); font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .04em; padding: 10px 18px; border-radius: 3px; max-width: 82%; line-height: 1.6;
}
.img-ph.dark { background: repeating-linear-gradient(135deg, #262b3a, #262b3a 12px, #1e2230 12px, #1e2230 24px); }
.img-ph.hero-ph { min-height: 380px; border-radius: 6px; }
.img-ph.square { aspect-ratio: 1/1; min-height: 0; }
.img-ph.portrait { aspect-ratio: 3/4; min-height: 0; }
.img-ph.wide { aspect-ratio: 16/9; min-height: 0; }

/* ── STATS BAND (bold colour block) ── */
/* The 12px captions here are white on this ground, so the band takes the
   darker accent — the numbers are large enough either way. */
.stats-band { background: var(--emerald-d); padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { text-align: center; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.25); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 900; color: #fff; display: block; line-height: 1; }
.stat-lbl { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 6px; display: block; }

/* ── SECTIONS ── */
.section { padding: 80px 0; border-bottom: 1px solid var(--border); background: #fff; }
.section.alt { background: var(--section-bg); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(28px,3.4vw,40px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; color: var(--slate); margin-bottom: 18px; }
.section-intro { font-size: 15.5px; line-height: 1.8; color: #444; }

/* ── CARD GRIDS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 30px 26px; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 10px 34px rgba(0,0,0,.08); transform: translateY(-2px); }
.card-icon { font-size: 26px; margin-bottom: 14px; display: block; }
.card h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--slate); margin-bottom: 10px; }
.card p { font-size: 13.8px; color: #555; line-height: 1.68; }
.card .card-link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--emerald-d); }
.card .card-link::after { content: ' →'; }

/* Challenge card (question-format teaser) */
.challenge-card { background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.challenge-card .cc-body { padding: 26px 24px; }
.challenge-card h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--slate); margin-bottom: 10px; line-height: 1.3; }
.challenge-card p { font-size: 13.5px; color: #555; line-height: 1.65; margin-bottom: 14px; }

/* Role card. The .seat-* class names are legacy and deliberately kept: they are
   invisible to visitors and renaming them is churn with breakage risk. */
.seat-card { background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.seat-card-top { padding: 26px 24px 20px; border-bottom: 1px solid var(--border); }
.seat-tag { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--emerald-pale); color: var(--emerald-d); padding: 3px 10px; border-radius: 99px; display: inline-block; margin-bottom: 12px; }
.seat-card h3 { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }
.seat-card .seat-remit { font-size: 13.5px; color: #555; line-height: 1.65; }
.seat-card-body { padding: 20px 24px; flex: 1; }
.seat-list { list-style: none; }
.seat-list li { font-size: 13px; color: var(--slate); padding: 6px 0; display: flex; gap: 8px; }
.seat-list li::before { content: '→'; color: var(--emerald); font-weight: 700; }
.seat-card-foot { padding: 18px 24px 24px; }

/* Practice / lens card (four-lens panel) — stays dark ink as a deliberate signature */
.lens-card { background: var(--slate-d); color: var(--paper); border-radius: 4px; padding: 30px 26px; }
.lens-card .lens-num { font-family: 'Playfair Display', serif; font-size: 13px; color: var(--emerald-l); font-weight: 700; margin-bottom: 10px; }
.lens-card h3 { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.lens-card p { font-size: 13.3px; line-height: 1.65; opacity: .78; }

/* ── QUOTE / STORY PLACEHOLDER ── */
.story-card { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 28px 24px; }
.story-card .story-logo-ph { height: 34px; width: 120px; background: var(--section-bg); border: 1px dashed var(--border); border-radius: 3px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.story-card p.quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 16px; color: var(--slate); line-height: 1.6; margin-bottom: 14px; }
.story-card .story-meta { font-size: 12px; color: var(--muted); font-family: 'DM Mono', monospace; }
.placeholder-note { display: inline-block; margin-top: 12px; font-size: 10.5px; font-family: 'DM Mono', monospace; color: var(--rust); background: #fde8e8; padding: 3px 9px; border-radius: 2px; letter-spacing: .03em; }

/* ── EMPHASIS BAND — pale emerald wash, dark text ── */
.dark-band { background: var(--emerald-pale); padding: 80px 0; }
.dark-band .section-title { color: var(--slate); }
.dark-band .section-intro { color: #3f4a46; }
.mechanic-step { display: flex; gap: 20px; margin-bottom: 30px; }
.mechanic-step:last-child { margin-bottom: 0; }
.mechanic-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--emerald-d); color: #fff; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.mechanic-step h4 { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; margin-bottom: 6px; color: var(--slate); }
.mechanic-step p { font-size: 14px; opacity: .82; line-height: 1.65; color: #3f4a46; }

/* ── TRUE DARK CALLOUT ── */
.dark-callout h3 { font-family: 'Playfair Display', serif; }
.dark-callout p { line-height: 1.7; }

/* ── PULL QUOTE ── */
.pull-quote { border-left: 4px solid var(--emerald); padding: 20px 28px; margin: 8px 0; background: var(--emerald-pale); border-radius: 0 4px 4px 0; }
.pull-quote p { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600; line-height: 1.55; color: var(--slate); font-style: italic; }

/* ── ACCORDION (FAQ / signs-you-need-this) ── */
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-q { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; color: var(--slate); font-size: 15.5px; }
.accordion-q::after { content: '+'; font-size: 22px; color: var(--emerald); font-weight: 400; transition: transform .2s; }
.accordion-item.open .accordion-q::after { transform: rotate(45deg); }
.accordion-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; font-size: 14px; color: #555; line-height: 1.7; }
.accordion-item.open .accordion-a { max-height: 300px; padding-bottom: 20px; }

/* ── SIGNAL LIST ── */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.signal-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.signal-item .signal-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); margin-top: 7px; }
.signal-item p { font-size: 14px; color: var(--slate); line-height: 1.5; }

/* ── TEAM / PEOPLE CARD ── */
.person-card { text-align: left; }
.person-card .person-name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 17px; color: var(--slate); margin-top: 16px; }
.person-card .person-role { font-size: 12.5px; color: var(--emerald-d); font-family: 'DM Mono', monospace; letter-spacing: .03em; margin-top: 3px; }
.person-card .person-bio { font-size: 13px; color: #555; line-height: 1.6; margin-top: 10px; }

/* ── CTA BAND (true dark ink) ── */
/* Bottom padding is lighter than the top: the footer below shares this exact
   background, so the two paddings run together as one uninterrupted block. */
.cta-band { background: var(--slate-d); color: var(--paper); padding: 72px 0 56px; text-align: center; }
.cta-band h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px,3.2vw,38px); font-weight: 800; margin-bottom: 16px; color: #fff; }
.cta-band h2 em { color: var(--emerald-l); font-style: italic; }
.cta-band p { font-size: 15.5px; color: rgba(245,240,232,.72); max-width: 560px; margin: 0 auto 30px; }
.cta-band .hero-ctas { justify-content: center; }
.cta-band .btn-outline { border-color: rgba(245,240,232,.4); color: var(--paper); }
.cta-band .btn-outline:hover { background: var(--emerald); border-color: var(--emerald); color: #fff; }

/* ── TABLE (comparison) ── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.data-table th { background: var(--slate); color: var(--paper); padding: 13px 18px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.data-table td { padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: top; color: #333; }
.data-table tr:nth-child(even) td { background: var(--section-bg); }

/* ── FOOTER (stays dark ink) ── */
/* Reduced to a single centred brand block — the sticky header carries
   navigation on every page, so link columns here were redundant weight. */
/* The rule matters as much as the padding: footer and CTA band share a
   background, so without a boundary the whitespace reads as a gap rather than
   as separation. */
.site-footer {
  background: var(--slate-d); color: rgba(245,240,232,.6);
  padding: 48px 0 0; text-align: center;
  border-top: 1px solid rgba(245,240,232,.12);
}
.footer-inner {
  max-width: 720px; padding-bottom: 46px;
  border-bottom: 1px solid rgba(245,240,232,.12);
}
/* Same treatment-E lockup as the header, at 30px. See the .logo block above for
   the geometry and why every offset is in em. */
.footer-logo {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 30px;
  color: #fff; margin-bottom: 20px; letter-spacing: .03em; line-height: 1;
}
.footer-mark {
  flex-shrink: 0; display: block; width: 1.385em; height: 1.385em;
  position: relative; top: .339em; margin-right: -.024em;
}
.footer-logo span { display: block; }
.footer-logo .screen-reader-text { display: inline; }
.footer-tag {
  font-size: 14.5px; color: rgba(245,240,232,.62); line-height: 1.85;
  max-width: 620px; margin: 0 auto;
}
.footer-bottom {
  display: flex; justify-content: center; align-items: center; padding: 24px 0;
  font-size: 11.5px; color: rgba(245,240,232,.4); font-family: 'DM Mono', monospace;
  flex-wrap: wrap; gap: 10px; letter-spacing: .03em;
}
.footer-bottom a { color: rgba(245,240,232,.55); }
.footer-bottom a:hover { color: var(--emerald-l); }
.footer-sep { opacity: .45; }

/* ── FORMS ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); margin-bottom: 7px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 14.5px; background: #fff; color: var(--ink);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }

/* ============================================================
   THEME ADDITIONS (not in the mockup)
   1. Real photography containers replacing .img-ph slots
   2. Equal-height cards so rows align regardless of copy length
   3. Mobile button and accessibility refinements
   ============================================================ */

/* ── 1. MEDIA CONTAINERS ──
   Fixed aspect ratios matching the mockup's placeholder geometry, so a
   photo of any dimensions crops to the slot rather than reflowing the row. */
.media {
  position: relative; overflow: hidden; border: 1px solid var(--border);
  border-radius: 4px; background: var(--section-bg);
  /* Width must stay definite: an aspect-ratio box with a min-height otherwise
     resolves its width from that height and overflows a narrower column. */
  width: 100%;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.wide      { aspect-ratio: 16/9; }
.media.portrait  { aspect-ratio: 3/4; }
.media.square    { aspect-ratio: 1/1; }
.media.hero-media { aspect-ratio: 3/2; min-height: 380px; border-radius: 6px; }
.media figcaption {
  position: absolute; inset: auto 0 0 0; padding: 8px 12px;
  background: linear-gradient(transparent, rgba(28,32,48,.72));
  color: rgba(255,255,255,.9); font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .04em; opacity: 0; transition: opacity .2s;
}
.media:hover figcaption { opacity: 1; }

/* ── 2. EQUAL-HEIGHT CARDS ──
   Grid children stretch by default, but the cards themselves must become
   flex columns for that height to reach the inner content — otherwise
   copy of different lengths leaves links at ragged heights across a row. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* Scoped to DIRECT grid children on purpose. A card stacked inside a plain
   column wrapper would otherwise take height:100% of that stretched wrapper
   and blow the page open. */
:is(.grid-2, .grid-3, .grid-4) > :is(.card, .challenge-card, .seat-card, .story-card, .lens-card, .person-card) {
  display: flex; flex-direction: column; height: 100%;
}
.challenge-card .cc-body { display: flex; flex-direction: column; flex: 1; }
.card .card-link,
.challenge-card .card-link { margin-top: auto; padding-top: 6px; }
.challenge-card p:last-of-type { margin-bottom: 14px; }
.seat-card-foot { margin-top: auto; }
.person-card .person-bio { flex: 1; }

/* Stat captions: a one-line label must not lift its number out of line
   with two-line neighbours. */
.stat-lbl { min-height: 2.6em; }

/* ── 3. MOBILE + ACCESSIBILITY ── */
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--slate-d); color: #fff; padding: 12px 20px; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* WordPress core alignment + caption classes */
.alignleft { float: left; margin: 0 24px 18px 0; }
.alignright { float: right; margin: 0 0 18px 24px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .screen-reader-text { font-size: 12px; color: var(--muted); }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ── LEGAL / LONG-FORM PROSE ──
   Used by page.php for the privacy and cookie policies. Measure is capped near
   70 characters: these are documents people actually have to read, and the
   marketing layout's full width is unreadable at length. */
.legal { max-width: 46rem; }
.legal h2 {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 26px;
  color: var(--slate); line-height: 1.25; margin: 42px 0 14px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 16.5px;
  color: var(--slate); margin: 28px 0 10px; letter-spacing: .01em;
}
.legal p { font-size: 15.5px; line-height: 1.8; color: #444; margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 20px; padding-left: 0; }
.legal ul li, .legal ol li {
  font-size: 15.5px; line-height: 1.75; color: #444;
  position: relative; padding-left: 22px; margin-bottom: 10px; list-style: none;
}
.legal ul li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--emerald);
}
.legal ol { counter-reset: legal; }
.legal ol li { counter-increment: legal; }
.legal ol li::before {
  content: counter(legal) '.'; position: absolute; left: 0; top: 0;
  font-family: 'DM Mono', monospace; font-size: 13px; color: var(--emerald-d);
}
.legal strong { color: var(--slate); font-weight: 600; }
.legal a { color: var(--emerald-d); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--emerald); }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 22px; }
.legal th {
  background: var(--slate); color: var(--paper); padding: 11px 14px; text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.legal td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: #333; }
.legal em { color: var(--muted); }

/* Complianz renders its cookie tables into these pages. */
.legal .cmplz-document { font-size: 15.5px; }
.legal .cmplz-document h2 { font-size: 24px; }
.legal .cmplz-document h3 { font-size: 16px; }

/* The manage-consent link in the footer bottom bar. */
.footer-consent a { color: rgba(245,240,232,.55); }
.footer-consent a:hover { color: var(--emerald-l); }

/* ── WPFORMS ──
   The contact form is a real WPForms form. These rules restyle its output to
   the mockup's field treatment so it reads as part of the design rather than
   a plugin drop-in. Selectors are scoped to .operetic-form. */
.operetic-form .wpforms-container { margin: 0; }
/* The two-column grid belongs on .wpforms-field-container — the fields' actual
   parent. Putting it on .wpforms-form makes that container a single cell. */
.operetic-form .wpforms-form { display: block; }
.operetic-form .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
/* The grid owns the columns and gutters, so WPForms' own float + margin-left
   layout must be neutralised or every second field is nudged out of line. */
.operetic-form .wpforms-field {
  padding: 0 0 20px; grid-column: 1 / -1;
  width: 100% !important; float: none !important; margin: 0 !important;
}
.operetic-form .wpforms-one-half { grid-column: span 1; }

/* WPForms' antispam honeypot. It stays in the DOM — removing it would weaken
   spam protection — but must come out of the grid flow, or it claims a full
   row and opens a gap. Matched on the aria-hidden WPForms marks it with. */
.operetic-form .wpforms-field:has(> label[aria-hidden="true"]),
.operetic-form .wpforms-field:has(> input[aria-hidden="true"]) {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; padding: 0 !important; z-index: -1000 !important;
}
.operetic-form .wpforms-field-label {
  display: block; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--slate); margin-bottom: 7px;
}
.operetic-form .wpforms-required-label { color: var(--rust); }
.operetic-form input[type="text"],
.operetic-form input[type="email"],
.operetic-form select,
.operetic-form textarea {
  width: 100%; max-width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 14.5px; background: #fff; color: var(--ink);
  box-shadow: none;
}
.operetic-form textarea { min-height: 120px; resize: vertical; }
.operetic-form input:focus, .operetic-form select:focus, .operetic-form textarea:focus {
  outline: 2px solid var(--emerald); outline-offset: 1px; border-color: var(--emerald);
}
.operetic-form .wpforms-field-description { font-size: 12px; color: var(--muted); margin-top: 6px; }
.operetic-form .wpforms-submit-container { grid-column: 1 / -1; padding-top: 4px; }
.operetic-form button.wpforms-submit {
  display: inline-flex; align-items: center; gap: 8px; background: var(--emerald-d); color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 14px 26px; border-radius: 3px; border: 1px solid transparent; cursor: pointer;
  transition: all .18s;
}
.operetic-form button.wpforms-submit:hover { background: var(--emerald-dd); transform: translateY(-1px); }
.operetic-form .wpforms-error { color: var(--rust); font-size: 12.5px; margin-top: 5px; }
.operetic-form input.wpforms-error, .operetic-form textarea.wpforms-error, .operetic-form select.wpforms-error { border-color: var(--rust); }
.operetic-form .wpforms-confirmation-container-full {
  background: var(--emerald-pale); border: 1px solid rgba(15,156,134,.3); border-radius: 4px;
  padding: 20px 24px; color: var(--slate); font-size: 15px;
}

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .mega-inner { grid-template-columns: 1fr 1fr; }
  .mega-col.featured-col { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .wrap, .header-inner { padding: 0 22px; }
  .main-nav { display: none; }
  .main-nav.mobile-open {
    display: block; position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    height: calc(100vh - 76px);
    background: var(--slate-d); overflow-y: auto; padding: 10px 22px 40px; z-index: 400;
  }
  .main-nav.mobile-open > ul { flex-direction: column; align-items: stretch; height: auto; }
  .main-nav.mobile-open > ul > li { height: auto; display: block; border-bottom: 1px solid rgba(245,240,232,.1); }
  .main-nav.mobile-open > ul > li > a { height: auto; padding: 18px 0; border-bottom: none; }
  .mega-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border-bottom: none; padding: 0 0 18px; background: transparent; display: none; }
  .has-mega.mega-open .mega-menu { display: block; }
  .mega-inner { grid-template-columns: 1fr; padding: 0; gap: 26px; }
  .mobile-toggle { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .stat-item:nth-child(2n) { border-right: none; }
  .site-footer { padding-top: 40px; }
  .footer-logo { font-size: 26px; }
  .footer-tag { font-size: 13.5px; }
  .form-grid { grid-template-columns: 1fr; }
  .operetic-form .wpforms-field-container { grid-template-columns: 1fr; }
  .operetic-form .wpforms-one-half { grid-column: 1 / -1; }
  .signal-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .header-cta .btn-sm-label { display: none; }
  .stat-lbl { min-height: 0; }
  /* Let the aspect ratio set the height on narrow screens; a min-height here
     would force the width back up and overflow the viewport. */
  .media.hero-media { min-height: 0; }
}
/* Two inline buttons touch and render at different widths on small screens. */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .data-table { min-width: 0; }
}

/* ── ROLE STRIP ──
   Compact reference to the six fractional roles on the homepage. Deliberately
   low-detail: it replaced a six-card catalogue with capability bullets that
   duplicated the signals section above it and read as a body shop. Roles are
   named here so visitors can navigate to them, not merchandised. */
.role-strip {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 28px;
}
.role-strip a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 20px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--cream); color: var(--ink);
  font-size: 14.5px; font-weight: 500; line-height: 1.35;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.role-strip a:hover,
.role-strip a:focus-visible {
  border-color: var(--emerald-d); color: var(--emerald-dd);
  transform: translateY(-1px);
}
.role-strip .role-cat {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 400;
}
.role-strip a:hover .role-cat,
.role-strip a:focus-visible .role-cat { color: var(--emerald-d); }
@media (max-width: 700px) {
  .role-strip { flex-direction: column; }
  .role-strip a { width: 100%; }
}