/* ============================================================
   Womenpreneur Legal — Design System
   White · Black · Blue · Grey — premium legal aesthetic
   ============================================================ */

/* ---------- Font (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0e1420;
  --ink-soft: #414c5f;
  --white: #ffffff;
  --grey-50: #f6f8fa;
  --grey-100: #edf0f4;
  --grey-200: #dfe4ea;
  --grey-300: #ccd3dc;
  --grey-500: #7d8798;
  /* Brand blue — aligned to PSP Legal (psplegal.ae): #090cd3 → #0609a8.
     Whole scale sits on hue 239°. Every pairing used in this sheet was
     contrast-checked; the lowest is 6.69:1, well clear of the 4.5:1 minimum. */
  --blue-950: #070a1f;
  --blue-900: #0b1040;
  --blue-800: #0000a3;
  --blue-700: #0609a8;
  --blue-600: #090cd3;
  --blue-500: #2f33e0;
  --blue-100: #dcddfc;
  --blue-50: #eff0fe;
  /* Brand blue for text on the dark bands (--blue-950 / --blue-900). Same hue as
     --blue-600, lifted until it passes AA: #090cd3 on --blue-950 is 1.9:1 and reads
     as almost-black, this is 4.8:1. Client asked (2026-08-12) for "LEGAL" and
     "OUR MISSION" to match the brand blue rule; this is that request at the closest
     value that stays readable — A/B'd and signed off rather than assumed. Use this,
     never --blue-600, for text sitting on a dark background. */
  --blue-on-dark: #666bff;
  /* Primary gradient, used on brand surfaces only (buttons, CTA band). */
  --grad-brand: linear-gradient(135deg, #090cd3 0%, #0609a8 100%);
  --grad-brand-hover: linear-gradient(135deg, #0609a8 0%, #0000a3 100%);
  --serif: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius: 6px;
  --shadow-card: 0 18px 40px -18px rgba(14, 20, 32, .18);
  --shadow-nav: 0 10px 30px -12px rgba(14, 20, 32, .12);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-optical-sizing: auto;
  color: var(--ink-soft);
  background: var(--white);
  font-size: 1.0rem;
  line-height: 1.7;
  letter-spacing: -.011em; /* Inter's recommended tracking at 16px */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, .font-serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.024em;
}
h3 { font-weight: 600; letter-spacing: -.018em; }
h4, h5, h6 { color: var(--ink); font-weight: 600; letter-spacing: -.012em; }
a { color: var(--blue-600); text-decoration: none; transition: color .2s var(--ease-out); }
a:hover { color: var(--blue-800); }
::selection { background: var(--blue-600); color: #fff; }
img { max-width: 100%; }

.text-ink { color: var(--ink) !important; }
.text-blue { color: var(--blue-600) !important; }
.bg-soft { background: var(--grey-50); }
.bg-tint { background: var(--blue-50); }

/* Accent inside headings */
.accent-i {
  font-style: normal;
  font-weight: inherit;
  color: var(--blue-600) !important;
}

/* Client amendment: headings set fully in brand blue rather than part-accented. */
.h-brand, .h-brand .accent-i { color: var(--ink); }

/* Client amendment: "Serviced by PSP Legal Consultancy" under the wordmark. */
.brand-mark .brand-serviced {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  text-align: right;
  margin-top: .92rem;
  white-space: nowrap;
}
.site-footer .brand-serviced { color: rgba(255, 255, 255, .72); }
@media (max-width: 400px) { .brand-mark .brand-serviced { font-size: .55rem; letter-spacing: .06em; } }

/* ---------- Kicker / eyebrow labels ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--blue-600);
  display: inline-block;
}
.kicker--plain::before { display: none; }

/* ---------- Buttons ---------- */
.btn-brand,
.btn-outline-brand,
.btn-light-brand {
  --bs-btn-font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.005em;
  padding: .78rem 1.6rem;
  border-radius: var(--radius);
  transition: all .25s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.btn-brand {
  background: var(--grad-brand);
  border: 1px solid var(--blue-700);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--grad-brand-hover);
  border-color: var(--blue-800);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(9, 12, 211, .55);
}
.btn-outline-brand {
  background: transparent;
  border: 1px solid var(--grey-300);
  color: var(--ink);
}
.btn-outline-brand:hover, .btn-outline-brand:focus {
  border-color: var(--blue-600);
  color: var(--blue-600);
  transform: translateY(-2px);
}
.btn-light-brand {
  background: #fff;
  border: 1px solid #fff;
  color: var(--blue-900);
}
.btn-light-brand:hover { background: var(--blue-50); color: var(--blue-900); transform: translateY(-2px); }
.btn-arrow { transition: transform .25s var(--ease-out); }
.btn-brand:hover .btn-arrow,
.btn-outline-brand:hover .btn-arrow,
.btn-light-brand:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Navbar ---------- */
.site-nav {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grey-100);
  transition: box-shadow .3s var(--ease-out), padding .3s var(--ease-out);
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}
.site-nav.is-scrolled { box-shadow: var(--shadow-nav); padding-top: .55rem; padding-bottom: .55rem; }

.brand-mark { display: inline-block; line-height: 1; }
.brand-mark .brand-word {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.032em;
  color: var(--blue-600);
  display: block;
}
.brand-mark .brand-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  text-align: right;
  margin-top: .1rem;
}
.brand-mark:hover .brand-word { color: var(--ink); }

.site-nav .nav-link {
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
  padding: .5rem .85rem !important;
  position: relative;
}
.site-nav .nav-link::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .2rem;
  height: 2px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { transform: scaleX(1); }
.site-nav .nav-link.active { color: var(--blue-600); }
.site-nav .dropdown-menu {
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: .5rem;
  margin-top: .75rem;
}
.site-nav .dropdown-item {
  font-size: .9rem;
  padding: .55rem .9rem;
  border-radius: 4px;
  color: var(--ink-soft);
}
.site-nav .dropdown-item:hover { background: var(--blue-50); color: var(--blue-700); }
.navbar-toggler { border: 1px solid var(--grey-200); border-radius: var(--radius); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--blue-100); }

/* ---------- Hero (home) ---------- */
/* Client voice note (audio1, 2026-08-12): "there's too much of a gap between that
   [the two hero buttons] and then the next bit, what we do — so maybe just drop it
   down a little bit."
   The gap measured 299px: 81px of hero bottom padding, 81px on the section below,
   and ~100px of slack because the photo column is taller than the copy column and
   the row is centre-aligned. Both paddings are trimmed here, and .hero-copy takes
   up part of the slack so the buttons sit lower — which is the "drop it down" the
   client described — without dragging the headline down with them. */
.hero {
  position: relative;
  padding: clamp(5rem, 11vh, 8.5rem) 0 clamp(2.25rem, 4.5vh, 3.5rem);
  background:
    radial-gradient(52rem 30rem at 88% -12%, var(--blue-50) 0%, rgba(239, 240, 254, 0) 62%),
    radial-gradient(40rem 26rem at -12% 108%, var(--grey-50) 0%, rgba(246, 248, 250, 0) 60%),
    var(--white);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grey-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--grey-100) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(46rem 30rem at 82% 0%, rgba(0,0,0,.55), transparent 70%);
  -webkit-mask-image: radial-gradient(46rem 30rem at 82% 0%, rgba(0,0,0,.55), transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 3.1rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.033em;
  margin-bottom: 1.4rem;
}
/* Client amendment: hero intro set larger than standard body copy. */
.hero .lead-copy {
  font-size: 1.25rem;
  line-height: 1.7;
  max-width: 46rem;
  color: var(--ink-soft);
  /* text-align: justify comes from the shared justified-copy block below. */
}
@media (max-width: 575.98px) { .hero .lead-copy { font-size: 1.12rem; } }
/* Client amendment (2026-08-11): the .hero-rule divider under the headline was
   removed at the client's request, and its rule with it.
   Client amendment (2026-08-11): "put a 2 line space between this and the book a
   consultation button". One line of .hero-lead is 1.25rem x 1.7 = 2.125rem, so two
   lines is 4.25rem; tapered on narrow screens where the copy is set smaller. */
.hero-actions { margin-top: clamp(2.6rem, 7vw, 4.25rem); }
/* Client voice note (2026-08-14): "the book a consultation button and explore — if
   you can move it down a little. The blank gap below it is too much."
   The remaining gap was the photo column out-growing the copy column: the photo is
   set 3:4, so on a wide screen it stood ~200px taller than the headline-to-buttons
   block and the row's centring left that difference as dead space under the buttons.
   The photo is now capped to roughly the copy's own height (see .hero-figure__img),
   which removes the slack, and the copy keeps a small top offset so the buttons still
   sit low against the photo. Measured button-to-"What we do" gap across 1280x720 →
   2560x1440: 80–126px, previously 80–200px+. */
@media (min-width: 992px) {
  .hero-copy { padding-top: 1.5rem; }
}
/* The section directly below the hero closes up to match — on the home page this is
   the "What we do" sector grid the client was measuring against. */
.hero + .section { padding-top: clamp(2.25rem, 4.5vh, 3.5rem); }

/* Decorative arc panel on hero right */
.hero-motif {
  position: relative;
  min-height: 320px;
}
.hero-motif svg { width: 100%; height: auto; display: block; }

/* Hero photograph (replaces the SVG motif). The photo is framed rather than cut out:
   a tinted plate offset behind it and a short brand rule across its lower edge, so the
   right-hand column reads as art direction rather than an image dropped on the page. */
.hero-figure {
  position: relative;
  padding-top: 1.6rem; /* room for the offset plate to sit above the photo */
}
.hero-figure__plate {
  position: absolute;
  top: 0;
  right: -1.6rem;
  width: 82%;
  height: 78%;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  background: var(--blue-50);
  pointer-events: none;
}
.hero-figure__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /* height:auto is required — the img's height attribute is a presentational hint
     that would otherwise beat aspect-ratio and render the photo at full 1168px. */
  height: auto;
  aspect-ratio: 3 / 4;
  /* Caps how tall the photo can grow. Held close to the height of the copy column
     beside it so the two columns finish together and no dead space is left under the
     buttons; object-fit crops rather than squashing, and the focal point keeps all
     three faces in frame. */
  max-height: min(64vh, 31rem);
  object-fit: cover;
  object-position: center 22%; /* keeps all three faces in frame as the panel scales */
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -28px rgba(14, 20, 32, .38);
}
/* Client voice note (audio4, 2026-08-13): the .hero-figure__rule brand bar that sat
   across the photo's lower-left corner is removed, and its rule with it. */
@media (max-width: 1199.98px) {
  .hero-figure__plate { right: -1rem; width: 84%; }
}

/* Stat strip */
.stat-strip { border-top: 1px solid var(--grey-100); }
.stat-item .stat-num {
  font-family: var(--sans);
  font-size: 2.15rem;
  font-weight: 750;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.stat-item .stat-num span { color: var(--blue-600); }
.stat-item .stat-label {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-500);
  font-weight: 500;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(3.6rem, 8vh, 6rem) 0 clamp(2.8rem, 6vh, 4.4rem);
  background:
    radial-gradient(44rem 24rem at 90% -20%, var(--blue-50) 0%, rgba(239, 240, 254, 0) 60%),
    var(--grey-50);
  border-bottom: 1px solid var(--grey-100);
}
.page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 750; line-height: 1.1; letter-spacing: -.03em; }
.breadcrumb { --bs-breadcrumb-divider: '—'; font-size: .84rem; margin-bottom: 1.2rem; }
.breadcrumb .breadcrumb-item a { color: var(--grey-500); }
.breadcrumb .breadcrumb-item a:hover { color: var(--blue-600); }
.breadcrumb .breadcrumb-item.active { color: var(--blue-600); font-weight: 500; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.8rem, 9vh, 6.5rem) 0; }
.section-head { max-width: 44rem; }
.section-head h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); letter-spacing: -.028em; margin-bottom: 1rem; }
/* Client amendment: sector-page section headings set larger. */
.page-sector .section-head h2 { font-size: clamp(2.15rem, 3.9vw, 3rem); }
/* Client amendment (2026-08-08): the eyebrow labels above them — "Core legal
   packages", "Ongoing legal retainer packages", "Training programmes" — set larger
   to match, with the rule and tracking scaled so the lockup stays balanced. */
.page-sector .section-head .kicker {
  font-size: 1rem;
  letter-spacing: .14em;
  gap: .9rem;
  margin-bottom: 1.25rem;
}
.page-sector .section-head .kicker::before { width: 44px; }
.section-head p { line-height: 1.75; }
/* A section head that is just its eyebrow — the sector pages' "Core legal packages",
   after the client removed the headline beneath it. The kicker's own bottom margin
   would stack on top of the head's `mb-5` and leave the cards adrift, so it drops. */
.section-head--label .kicker { margin-bottom: 0; }

/* Justified body copy.
   Client voice note (audio4, 2026-08-13): "on a few of the pages the writing is still
   not justified. On the front page you've justified it, end to end… go through the
   website and just justify the writing." The home hero lead was her sample, so its
   setting is now shared by every block of running prose on the site.
   Deliberately scoped to prose set at a readable measure. Card blurbs (.pkg-card,
   .sector-card, .event-card) are two or three lines in a column of about fifteen
   characters' fewer measure, where justification opens word gaps instead of tidying
   the edge, so those stay ragged-right — as do the centred quote and CTA bands,
   where the two alignments would fight. */
/* Client voice note (audio7, 2026-08-14): "our people, each profile… the about page…
   on the seminars, where it says seminars that build confidence, underneath… same on
   the mentorship page… all across the website basically, where you see chunks of
   writing." All of those were already covered by the list below; what she was looking
   at was a cached copy of last week's stylesheet (see ASSET_VERSION in layout.mjs).
   The one block genuinely still ragged was the seminar cards, which run to three or
   four lines in a half-width column — wide enough to justify cleanly — so they join
   the list. She excused the sector cards herself ("it's few lines"), and they sit in
   a much narrower column, so those stay as they are. */
.hero .lead-copy,
.page-hero p,
.section-head p,
.person-body p,
.soon-panel p,
.event-card p,
.prose p,
.prose li,
.notice,
.justified-copy p {
  text-align: justify;
  text-justify: inter-word;
}

/* ---------- Sector cards ---------- */
.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.9rem 1.7rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  overflow: hidden;
}
.sector-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.sector-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-card);
  color: inherit;
}
.sector-card:hover::before { transform: scaleX(1); }
.sector-card .card-num {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--grey-500);
  margin-bottom: 2.2rem;
  display: block;
}
/* Client amendment: card titles in brand blue, wording in black. */
.sector-card h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: .55rem;
  color: var(--blue-600);
  transition: color .25s var(--ease-out);
}
.sector-card:hover h3 { color: var(--blue-700); }
.sector-card p { font-size: .92rem; margin-bottom: 1.4rem; color: var(--ink); }
.sector-card .card-go {
  margin-top: auto;
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.sector-card .card-go svg { transition: transform .25s var(--ease-out); }
.sector-card:hover .card-go svg { transform: translateX(5px); }

/* ---------- Package / list cards ---------- */
.pkg-card {
  height: 100%;
  padding: 1.7rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-card);
}
.pkg-card h2, .pkg-card h3, .pkg-card h4 { font-size: 1.08rem; line-height: 1.35; margin-bottom: .5rem; letter-spacing: -.018em; font-weight: 600; }
.pkg-card p { font-size: .92rem; line-height: 1.65; margin-bottom: 0; }
.pkg-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

/* Check list */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: .55rem 0 .55rem 2rem;
  border-bottom: 1px solid var(--grey-100);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .95rem;
  width: 18px;
  height: 18px;
  background: var(--blue-50);
  border-radius: 50%;
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.22rem;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: rotate(-45deg);
}

/* ---------- People ---------- */
.person-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.person-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
/* Client voice notes (audio2 + audio3, 2026-08-12): "they were square … now they're
   gone back to long … it's too zoomed in on my face … Deepak's one zoomed out is fine
   and Miguel's."
   The cause was `min-height: 100%` here overriding `aspect-ratio`: inside the card's
   flex row the portrait column stretches to the full card height, which is set by the
   length of the bio beside it. Priya's source photograph is landscape (900x629), so a
   tall container cropped the sides away and scaled what was left up — hence "long" and
   "too zoomed in". Deepak (900x1352) and Miguel (900x1203) are portrait sources and
   barely suffered, which is exactly what she reported.
   Square tile, no min-height. Priya's photo now shows its full height with only the
   sides trimmed, and the other two crop gently on a dimension they have to spare. */
.person-portrait {
  width: 100%; /* definite width so aspect-ratio can't derive an overflowing width */
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(26rem 16rem at 80% -20%, rgba(53, 99, 233, .16), transparent 60%),
    linear-gradient(160deg, var(--blue-900), var(--blue-950));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.person-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.person-portrait .monogram {
  font-family: var(--sans);
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  opacity: .92;
  z-index: 1;
}
.person-portrait img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.person-body { padding: 1.6rem 1.6rem 1.8rem; }
.person-body h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.022em; margin-bottom: .3rem; }
.person-body p { line-height: 1.7; }
.person-role {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .05em;
  /* Client amendment (2026-08-11): Priya Patel's role now runs over three lines, so
     the block needs leading of its own rather than inheriting body line-height. */
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 1rem;
}
.person-body p { font-size: .93rem; }

/* ---------- Quote / callout band ---------- */
.quote-band {
  background: linear-gradient(150deg, var(--blue-900), var(--blue-950));
  color: rgba(255, 255, 255, .85);
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.quote-band h2, .quote-band h3 { color: #fff; }
/* Client amendment (2026-08-12): "OUR MISSION" moved off the washed-out lavender
   (#a9acf8) onto the brand blue. Uses --blue-on-dark, not --blue-600 itself: the
   literal brand blue measures 1.9:1 on this band and is effectively invisible.
   --blue-on-dark is the same hue lifted to 4.8:1. See the token for the full note. */
.quote-band .kicker { color: var(--blue-on-dark); }
.quote-band .kicker::before { background: var(--blue-on-dark); }

/* ---------- CTA band ---------- */
/* Client amendment (2026-08-11): "Blue box at the bottom put end to end of screen."
   Was a 12px-radius panel inset within .container; now a full-width band. The
   .container now sits inside the band (see ctaBand() in layout.mjs), so the copy
   still aligns with every other section, and the horizontal padding moves to it. */
.cta-band {
  background: linear-gradient(140deg, var(--blue-600), var(--blue-800) 82%);
  border-radius: 0;
  color: rgba(255, 255, 255, .88);
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 6vw, 4.2rem) 0;
}
.cta-band::before {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.cta-band::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* The CTA section drops its top padding because it normally follows a white
   section, whose own bottom padding already supplies the gap. When it follows a
   full-bleed coloured band there is no such gap and the panel butts straight
   against the band edge — so restore the spacing in those cases only.
   Uses its own class rather than Bootstrap's .pt-0, whose !important would
   override the contextual rules below. */
.section--cta { padding-top: 0; }
.quote-band + .section--cta,
.section.bg-soft + .section--cta { padding-top: clamp(3.8rem, 9vh, 6.5rem); }
/* Bottom padding goes too, so the band sits flush against the footer. It was
   correct while the CTA was an inset rounded panel — it framed the panel against
   the white page. Once the band went full-bleed (client amendment, 2026-08-11)
   that same padding became an ~81px white strip between two full-width coloured
   blocks, which reads as a mistake rather than as spacing. The band's own internal
   padding supplies all the breathing room it needs. */
.section--cta { padding-bottom: 0; }

/* ---------- Coming soon ---------- */
.soon-panel {
  border: 1px solid var(--grey-200);
  border-left: 3px solid var(--blue-600);
  background: var(--grey-50);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
}

/* ---------- Contact ---------- */
.contact-panel {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.form-label { font-size: .86rem; font-weight: 600; color: var(--ink); }
.form-control, .form-select {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: .7rem .95rem;
  font-size: .95rem;
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.contact-line { display: flex; gap: 1rem; align-items: flex-start; padding: 1.05rem 0; border-bottom: 1px solid var(--grey-100); }
.contact-line:last-child { border-bottom: 0; }
.contact-line .pkg-icon { margin-bottom: 0; flex-shrink: 0; }
.contact-line strong { color: var(--ink); display: block; font-size: .95rem; }
.contact-line span { font-size: .92rem; }

/* ---------- Legal prose pages ---------- */
.prose h2 { font-size: 1.45rem; margin: 2.4rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: .96rem; }
.prose .notice {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
  font-size: .9rem;
}

/* ---------- Events + disclosure ---------- */
.event-card {
  height: 100%;
  padding: 1.5rem 1.7rem;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-100);
  border-left-color: var(--blue-600);
  box-shadow: var(--shadow-card);
}
.event-date {
  display: inline-block;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.event-date--tbc {
  background: var(--grey-50);
  border-color: var(--grey-200);
  color: var(--ink-soft); /* 8.1:1 on --grey-50 */
}
.psp-note {
  background: var(--blue-50);
  border-top: 1px solid var(--blue-100);
  border-bottom: 1px solid var(--blue-100);
  padding: 1.6rem 0;
  font-size: .92rem;
  text-align: center;
}
.psp-note a { font-weight: 600; text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--blue-950);
  color: rgba(255, 255, 255, .72);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-500) 40%, transparent 90%);
}
.site-footer .brand-word { color: #fff; }
/* Client amendment (2026-08-12): footer "LEGAL" moved off the washed-out lavender
   (#9b9ef5) onto the brand blue of the rule above it. Uses --blue-on-dark for the
   contrast reason documented on that token. */
.site-footer .brand-sub { color: var(--blue-on-dark); }
.site-footer .footer-h {
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.site-footer a { color: rgba(255, 255, 255, .72); font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .55rem; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
  color: rgba(255, 255, 255, .62); /* ≥4.5:1 on --blue-950 */
}
.footer-disclaimer { font-size: .8rem; color: rgba(255, 255, 255, .66); line-height: 1.6; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px) {
  .site-nav .nav-link::after { display: none; }
  .site-nav .navbar-collapse {
    background: #fff;
    border: 1px solid var(--grey-100);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-top: .8rem;
    box-shadow: var(--shadow-nav);
  }
  .hero-motif, .hero-figure { display: none; }
}