/*
Theme Name: Strategy Imagineers (Divi Child)
Theme URI: https://strategyimagineers.com
Template: Divi
Author: Strategy Imagineers
Description: Divi child theme carrying the approved Strategy Imagineers design system (colors, fonts, nav, footer, responsive rules) on top of the Divi parent theme. Divi itself stays untouched, so Elegant Themes' updates keep applying automatically; all customization lives here. Page sections are built as Divi "Code" modules inside Fullwidth Sections — see SETUP-DIVI.md.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: strategy-imagineers-divi-child
*/

/* ==========================================================================
   0. BRAND COLORS — the ENTIRE site's palette lives here.
   To recolor anything (site-wide), change a value in this block only.
   Every section, card, button, and heading below references these
   variables instead of a hardcoded color, so one edit here updates
   everywhere at once, including inside the Divi Code module content.
   ========================================================================== */
:root {
  --si-navy: #14233F;         --si-navy-rgb: 20,35,63;
  --si-teal: #1E4A4E;         --si-teal-rgb: 30,74,78;
  /* GOLD — ONE gold across the whole site: the logo's sand gold.
     Accents, buttons, cards, the wordmark: all the same colour.

     --si-on-gold is the text colour used ON TOP of gold fills. It is navy,
     not white, and that is deliberate: white on this gold measures 1.98:1
     (effectively unreadable), while navy measures 7.6:1. If you prefer
     white button labels, change --si-on-gold to var(--si-white) — that one
     line flips every gold button at once. */
  --si-gold: #D0B57E;         --si-gold-rgb: 208,181,126;
  --si-gold-hover: #E2CBA0;   --si-gold-hover-rgb: 226,203,160;
  --si-gold-logo: #D0B57E;    /* the wordmark — same gold */
  --si-gold-card: #D0B57E;    /* the "Beliefs" card — same gold */
  --si-on-gold: #14233F;      /* label colour on gold fills */
  --si-terracotta: #B0623E;   --si-terracotta-rgb: 176,98,62;
  --si-terracotta-dark: #8f4c2f; /* link hover on the cream Contact page */
  --si-cream: #EDE6D8;        --si-cream-rgb: 237,230,216;
  --si-white: #FFFFFF;        --si-white-rgb: 255,255,255;
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--si-navy);
  color: var(--si-cream);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Full-bleed wrapper for the wavy section dividers — works at any section
   padding, so it stays edge-to-edge on every screen size. Use this inside
   a Divi Fullwidth Section (which already has no side padding of its own). */
.si-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: var(--si-gold); text-decoration: none; }
a:hover { color: var(--si-gold-hover); }
::selection { background: var(--si-gold); color: var(--si-navy); }
button { font-family: inherit; }

/* The Contact page uses a light/cream scheme instead of navy — this class
   is added automatically by functions.php for the page with slug contact-us. */
/* Contact page runs a light scheme. The :not() guards stop this rule from
   leaking into the floating nav and footer, which stay dark on every page —
   that leak is what previously turned the menu items and the word
   "Strategy" terracotta on this page. Divi paints the page wrapper too, so
   it needs the cream background as well, not just <body>. */
body.si-bg-cream,
body.si-bg-cream #page-container,
body.si-bg-cream .et-l--body { background: var(--si-cream); color: var(--si-navy); }
/* The terracotta link colour applies to PAGE CONTENT only. It is scoped to
   #page-container and excludes the nav/footer, because the floating nav and
   the footer stay dark on every page — including this light one.

   The !important below is not decorative: the :not() chain above carries
   higher specificity than a plain descendant selector, so without it the
   terracotta rule would win and the menu and footer links would render
   orange on this page. */
body.si-bg-cream a:not(.si-nav__logo):not(.si-nav__cta):not(.si-btn) { color: var(--si-terracotta); }
body.si-bg-cream a:not(.si-nav__logo):not(.si-nav__cta):not(.si-btn):hover { color: var(--si-terracotta-dark); }

body.si-bg-cream .si-nav__links a,
body.si-bg-cream .si-footer a,
body.si-bg-cream .si-footer__links a { color: rgba(var(--si-cream-rgb), 0.75) !important; }
body.si-bg-cream .si-nav__links a:hover,
body.si-bg-cream .si-nav__links a.is-active,
body.si-bg-cream .si-footer a:hover,
body.si-bg-cream .si-footer__links a:hover { color: var(--si-white) !important; }
body.si-bg-cream .si-footer__logo,
body.si-bg-cream .si-footer__copy { color: rgba(var(--si-cream-rgb), 0.85) !important; }
body.si-bg-cream .si-footer__logo em { color: var(--si-gold-logo) !important; }

@keyframes floatA { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-40px) scale(1.06); } }
@keyframes floatB { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-40px,30px) scale(1.08); } }
@keyframes driftY { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* ==========================================================================
   2. LAYOUT HELPERS
   ========================================================================== */
.si-section {
  position: relative;
  padding-left: 64px;
  padding-right: 64px;
}
@media (max-width: 900px) { .si-section { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 560px) { .si-section { padding-left: 20px; padding-right: 20px; } }

.si-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: 20px;
}

/* ==========================================================================
   3. NAVIGATION (shared, built once in Divi Theme Builder's Header template)
   ========================================================================== */
.si-nav-wrap {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  padding: 0 24px;
}
.si-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  padding: 12px 12px 12px 26px;
  border-radius: 100px;
  background: rgba(var(--si-navy-rgb), 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--si-cream-rgb), 0.14);
}
.si-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  /* "Strategy" is white; "Imagineers" is the gold italic below.
     !important guards against Divi's global <a> colour repainting it —
     that's what previously made it show terracotta on the Contact page. */
  color: var(--si-white) !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.si-nav__logo img { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.si-nav__logo em { font-style: italic; font-weight: 500; color: var(--si-gold-logo) !important; }
.si-nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: nowrap;
}
/* !important on these keeps the nav readable on the cream Contact page,
   where Divi + the light-page link colour would otherwise turn menu items
   terracotta. */
.si-nav__links a { color: rgba(var(--si-cream-rgb), 0.75) !important; white-space: nowrap; }
.si-nav__links a:hover, .si-nav__links a.is-active { color: var(--si-white) !important; }
.si-nav__cta {
  background: var(--si-gold);
  color: var(--si-on-gold) !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.si-nav__cta:hover { background: var(--si-gold-hover); color: var(--si-on-gold) !important; }
.si-nav__toggle {
  display: none;
  line-height: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.si-nav__toggle { position: relative; }
.si-nav__toggle span, .si-nav__toggle::before, .si-nav__toggle::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--si-cream);
  /* All three bars are centred on the button, so the icon is symmetric and
     the open/close animation rotates about the true centre. */
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -11px;
  margin-top: -1px;
  transition: transform .2s ease, opacity .2s ease;
}
.si-nav__toggle::before { transform: translateY(-6px); }
.si-nav__toggle::after { transform: translateY(6px); }
.si-nav.is-open .si-nav__toggle span { opacity: 0; }
.si-nav.is-open .si-nav__toggle::before { transform: rotate(45deg); }
.si-nav.is-open .si-nav__toggle::after { transform: rotate(-45deg); }

/* This link only exists for narrow phones — see the ≤560px block below.
   It's a second "Contact us" link placed inside the dropdown so the
   persistent pill button can be safely hidden on the narrowest screens
   without losing the ability to reach Contact from the menu. Hidden by
   default (desktop, and tablet where the pill button has plenty of room). */
.si-nav__links-cta { display: none; }

/* Tablet AND mobile: collapse to the hamburger menu. 980px matches both
   real tablets (portrait iPads etc.) and Divi's own "Tablet" preview
   width, so there's no in-between zone where the full desktop nav gets
   squeezed into too little space. */
@media (max-width: 980px) {
  .si-nav-wrap { top: 14px; padding: 0 16px; }
  /* Vertically centred, and the extra right padding keeps the menu button
     off the edge of the pill. */
  .si-nav {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 0;              /* see note: prevents dead space under the pill */
    padding: 12px 22px 12px 24px;
    border-radius: 30px;
  }
  .si-nav__toggle { display: flex; }
  .si-nav__links {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .si-nav.is-open .si-nav__links {
    max-height: 380px;
    opacity: 1;
    padding: 10px 4px 14px;
  }
  .si-nav__links a { padding: 8px 0; width: 100%; }

  /* From tablet down, the standalone gold "Contact us" pill is hidden and
     reappears inside the dropdown menu instead — so the top row is just
     logo + hamburger and can never crowd or overflow. */
  .si-nav__cta { display: none; }
  .si-nav__links-cta { display: block; }
  .si-nav__links-cta a {
    display: inline-block;
    margin-top: 6px;
    background: var(--si-gold);
    color: var(--si-on-gold) !important;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 100px;
    width: auto;
  }
  .si-nav__links-cta a:hover { background: var(--si-gold-hover); }
}

/* Narrow phones: shrink the logo lockup a notch so it always fits. */
@media (max-width: 560px) {
  .si-nav-wrap { top: 10px; padding: 0 12px; }
  .si-nav { padding: 11px 18px 11px 18px; column-gap: 12px; row-gap: 0; }
  .si-nav__logo { font-size: 19px; gap: 10px; }
  .si-nav__logo img { width: 36px; height: 36px; border-radius: 10px; }
  .si-nav__toggle { width: 32px; height: 32px; }
}

/* ==========================================================================
   4. BUTTONS & LINKS
   ========================================================================== */
.si-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 17px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
}
/* All gold buttons share one look: gold fill, WHITE label, lighter gold on
   hover — matching the "Send message" button on the contact form. The
   !important is needed because Divi colours <a> elements globally, which
   would otherwise repaint button text. */
.si-btn--gold,
.si-btn--gold-dark {
  background: var(--si-gold);
  color: var(--si-on-gold) !important;
}
.si-btn--gold:hover,
.si-btn--gold-dark:hover {
  background: var(--si-gold-hover);
  color: var(--si-on-gold) !important;
}
.si-btn--dark { background: var(--si-navy); color: var(--si-cream) !important; }
.si-btn--dark:hover { background: var(--si-teal); color: var(--si-white) !important; }

.si-link-underline {
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(var(--si-cream-rgb), 0.35);
  padding-bottom: 4px;
}
.si-link-underline:hover { border-color: var(--si-gold); color: var(--si-gold); }
.si-link-underline--dark { color: var(--si-navy); border-bottom: 1px solid rgba(var(--si-navy-rgb), 0.35); }
.si-link-underline--dark:hover { border-color: var(--si-terracotta); color: var(--si-terracotta); }

/* Navy link on light backgrounds, warming to gold on hover. */
.si-link-underline--blue { color: var(--si-navy) !important; border-bottom: 1px solid rgba(var(--si-navy-rgb), 0.4); }
.si-link-underline--blue:hover { color: var(--si-gold) !important; border-color: var(--si-gold); }

/* White link for dark backgrounds. */
.si-link-underline--white { color: var(--si-white) !important; border-bottom: 1px solid rgba(var(--si-white-rgb), 0.5); }
.si-link-underline--white:hover { color: var(--si-gold) !important; border-color: var(--si-gold); }

/* ==========================================================================
   5. HEADINGS (fluid sizing so desktop matches the mockup, mobile scales down)
   ========================================================================== */
/* IMPORTANT: `color: inherit` here is deliberate and load-bearing.
   Divi's parent theme sets its own colour on every h1–h6. Without this,
   headings ignore the colour of the section they sit in and fall back to
   Divi's dark default — which is why several headings previously appeared
   black on dark backgrounds, or invisible on cream ones. Inheriting means
   each heading automatically takes its section's colour and can never
   disappear against its own background again. */
.si-h1, .si-h2, .si-h3 { color: inherit; }
.si-h1     { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.08; margin: 0; }
.si-h2     { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.15; margin: 0; }
.si-h3     { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.2; margin: 0; }
.si-italic-heading { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; }

/* Pull-quotes. Deliberately NOT the Playfair serif used for headings —
   quotes are set in the body sans-serif (Manrope) italic so they read as a
   calm spoken aside rather than decorative display type. */
.si-quote {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* ==========================================================================
   6. GRIDS (equal-column patterns used across pages) — smooth breakpoints
   so every section reflows cleanly at tablet and mobile widths.
   ========================================================================== */
.si-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.si-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.si-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.si-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); }

@media (max-width: 900px) {
  .si-grid-2 { grid-template-columns: 1fr !important; }
  .si-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .si-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .si-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .si-grid-3, .si-grid-4, .si-grid-5 { grid-template-columns: 1fr !important; }
}

/* Asymmetric layouts — collapse to a single column, image/photo naturally
   sits first in the markup so it appears above the text on mobile. */
.si-split-hero,      /* homepage hero: text + photo */
.si-split-leader,    /* leadership feature: photo + bio */
.si-split-who,       /* "who we are" 3-part row */
.si-split-contact,   /* contact copy + form */
.si-split-work {     /* work highlight photo + copy */
  display: grid;
}
@media (max-width: 900px) {
  .si-split-hero, .si-split-leader, .si-split-who, .si-split-contact, .si-split-work {
    grid-template-columns: 1fr !important;
  }
}

/* "number + text" rows used in Services / What Makes Us Special */
.si-num-row { display: grid; grid-template-columns: 80px 1fr; }
.si-label-row { display: grid; grid-template-columns: 200px 1fr; }
@media (max-width: 560px) {
  .si-num-row, .si-label-row { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* Team grid: reset the special "centered" last card on mobile */
.si-team-grid > *:last-child { grid-column: auto; }
@media (max-width: 900px) {
  .si-team-grid > *:last-child { grid-column: auto !important; }
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.si-card-white {
  background: var(--si-white);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(var(--si-navy-rgb), 0.06);
}
.si-card-navy { background: var(--si-navy); color: var(--si-cream); border-radius: 28px; padding: 32px 28px; }
.si-card-teal { background: var(--si-teal); color: var(--si-cream); border-radius: 28px; padding: 32px 28px; }
.si-card-gold { background: var(--si-gold-card); color: var(--si-navy); border-radius: 28px; padding: 32px 28px; }
.si-card-terracotta { background: var(--si-terracotta); color: var(--si-cream); border-radius: 28px; padding: 32px 28px; }

/* ==========================================================================
   8. IMAGE SLOTS (placeholder-friendly)
   ========================================================================== */
.si-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--si-navy-rgb), 0.05);
  border: 1px solid rgba(var(--si-navy-rgb), 0.1);
  border-radius: 14px;
  overflow: hidden;
}
/* Logos sit a little larger inside their tiles now — more of the box is
   used, with just enough padding to keep them from touching the edges. */
.si-logo-box img { max-width: 88%; max-height: 80%; object-fit: contain; }

/* ==========================================================================
   9. FORMS
   ========================================================================== */
.si-form { display: flex; flex-direction: column; gap: 18px; }
.si-form input[type="text"],
.si-form input[type="email"],
.si-form textarea {
  background: var(--si-cream);
  border: 1px solid rgba(var(--si-navy-rgb), 0.14);
  border-radius: 14px;
  padding: 16px 20px;
  color: var(--si-navy);
  font-size: 15px;
  font-family: inherit;
  width: 100%;
}
.si-form textarea { resize: none; }
.si-form button { margin-top: 6px; }
.si-form-card {
  background: var(--si-white);
  border-radius: 32px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(var(--si-navy-rgb), 0.08);
}
@media (max-width: 560px) { .si-form-card { padding: 26px; } }

.si-form-note {
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  margin: 0 0 16px;
}
.si-form-note--success { background: rgba(var(--si-teal-rgb), 0.12); color: var(--si-teal); border: 1px solid rgba(var(--si-teal-rgb), 0.25); }
.si-form-note--error { background: rgba(var(--si-terracotta-rgb), 0.12); color: var(--si-terracotta-dark); border: 1px solid rgba(var(--si-terracotta-rgb), 0.3); }
/* honeypot field — hidden from real visitors, left open for bots */
.si-form .si-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   10. FOOTER (shared, built once in Divi Theme Builder's Footer template)
   ========================================================================== */
.si-footer {
  background: var(--si-navy);
  color: var(--si-cream);
  padding: 40px 64px 32px;
  border-top: 1px solid rgba(var(--si-cream-rgb), 0.12);
}
.si-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.si-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 19px;
  color: rgba(var(--si-cream-rgb), 0.85);
}
.si-footer__logo img { width: 34px; height: 34px; border-radius: 9px; }
.si-footer__logo em { font-style: italic; font-weight: 500; color: var(--si-gold-logo) !important; }
.si-footer__links { display: flex; gap: 24px; font-size: 13px; color: rgba(var(--si-cream-rgb), 0.6); flex-wrap: wrap; }
.si-footer__links a { color: inherit; }
.si-footer__links a:hover { color: var(--si-cream); }
.si-footer__copy { font-size: 13px; color: rgba(var(--si-cream-rgb), 0.45); }

@media (max-width: 560px) {
  .si-footer { padding: 32px 20px 24px; text-align: center; }
  .si-footer__inner { justify-content: center; }
}

/* ==========================================================================
   11. MISC
   ========================================================================== */
.si-pill {
  background: rgba(var(--si-cream-rgb), 0.08);
  border: 1px solid rgba(var(--si-cream-rgb), 0.18);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  display: inline-block;
}
.si-blob { pointer-events: none; }
@media (max-width: 700px) { .si-blob { display: none; } }

/* --------------------------------------------------------------------------
   SECTION WAVE DIVIDER
   Sits at the bottom of a section and is filled with the NEXT section's
   flat colour, so the curve reads as the next section rising into this one.

   Why it's done this way: filling the wave with a flat colour that matches
   the following section is what makes the join invisible. The earlier
   version tried to paint the wave with a copy of the hero's gradient — but
   the hero's gradient runs on a 120° diagonal while an SVG gradient runs
   flat left-to-right, so the two could never line up and left a visible
   dark band. A flat fill can't drift out of alignment at any screen width.

   Height scales with the viewport, and preserveAspectRatio="none" lets the
   curve stretch to any width, so it holds up from phone to widescreen.
   -------------------------------------------------------------------------- */
.si-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* -1px avoids hairline sub-pixel gaps on some screens */
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}
.si-wave svg {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 90px);
}

/* --------------------------------------------------------------------------
   ROTATING GALLERY ("us in action")

   Sits on a gold section. The photo is presented in a white "mat" frame so
   it reads as a framed print rather than a bare image, with a caption and a
   counter beneath it and a thumbnail strip below that — the thumbnails are
   what make it unmistakably a gallery at a glance.

   Arrows, dots, thumbnails, swipe and keyboard all work; it auto-advances
   and pauses on hover/focus.

   To add or remove a photo: add/delete a .si-slide AND its matching
   .si-thumb. The dots and counter adapt automatically.
   -------------------------------------------------------------------------- */
.si-gallery { position: relative; max-width: 820px; margin: 0 auto; }

/* The white mat around the photo. */
.si-gallery__frame {
  background: var(--si-white);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(var(--si-navy-rgb), 0.28);
}
.si-gallery__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(var(--si-navy-rgb), 0.06);
}
.si-gallery__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.si-slide { flex: 0 0 100%; }
.si-slide__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@supports not (aspect-ratio: 1) { .si-slide__img { height: 340px; } }

/* Caption row sits inside the mat, under the photo. */
.si-gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 6px 4px;
}
.si-gallery__caption { font-size: 14.5px; font-weight: 600; color: var(--si-navy); }
.si-gallery__count {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  color: rgba(var(--si-navy-rgb), 0.5); white-space: nowrap;
}

/* Arrows: solid navy discs so they stand out against both gold and photo. */
.si-gallery__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--si-navy);
  border: 2px solid var(--si-white);
  color: var(--si-white);
  font-size: 20px; line-height: 1; padding: 0;
  cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(var(--si-navy-rgb), 0.35);
  transition: background .18s ease, transform .18s ease;
}
.si-gallery__btn:hover { background: var(--si-teal); }
.si-gallery__btn:active { transform: translateY(-50%) scale(.94); }
.si-gallery__btn--prev { left: 24px; }
.si-gallery__btn--next { right: 24px; }

/* Thumbnail strip — the clearest signal that this is a gallery. */
.si-gallery__thumbs {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 18px; flex-wrap: wrap;
}
.si-thumb {
  width: 92px; height: 62px; padding: 0; overflow: hidden;
  border-radius: 10px; cursor: pointer;
  border: 2px solid transparent;
  background: none; opacity: .62;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.si-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-thumb:hover { opacity: .9; transform: translateY(-2px); }
.si-thumb.is-active { opacity: 1; border-color: var(--si-navy); }

.si-gallery__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.si-gallery__dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(var(--si-navy-rgb), 0.3);
  border: none; cursor: pointer; transition: background .18s ease, width .18s ease;
}
.si-gallery__dot.is-active { background: var(--si-navy); width: 24px; border-radius: 100px; }

@media (max-width: 900px) {
  .si-thumb { width: 74px; height: 52px; }
}
@media (max-width: 560px) {
  .si-gallery__frame { padding: 10px; border-radius: 16px; }
  .si-gallery__btn { width: 36px; height: 36px; font-size: 17px; }
  .si-gallery__btn--prev { left: 14px; }
  .si-gallery__btn--next { right: 14px; }
  .si-gallery__bar { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Thumbnails scroll sideways rather than wrapping into many rows. */
  .si-gallery__thumbs {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .si-thumb { flex: 0 0 auto; width: 66px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-gallery__track { transition: none; }
}

/* --------------------------------------------------------------------------
   IMAGINEER SELECTOR (Our Imagineers page)
   A list of people on the left; clicking one shows their full profile.
   Built with plain buttons + a small script (no libraries), and it
   degrades gracefully: every profile is real content in the page, so it
   stays readable and search-engine friendly even if scripting fails.
   On mobile the layout stacks and each profile opens under its own name.
   -------------------------------------------------------------------------- */
/* Card grid of people. Each card shows a photo, name, role and the SHORT
   bio; clicking one opens that person's full profile in the detail panel
   directly beneath the grid. */
.si-people { display: block; }
.si-people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.si-person-btn {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: rgba(var(--si-cream-rgb), 0.06);
  border: 1px solid rgba(var(--si-cream-rgb), 0.14);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  color: var(--si-cream);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  font-family: inherit;
}
.si-person-btn:hover {
  background: rgba(var(--si-cream-rgb), 0.12);
  border-color: rgba(var(--si-gold-rgb), 0.5);
  transform: translateY(-2px);
}
.si-person-btn.is-active {
  background: rgba(var(--si-gold-rgb), 0.16);
  border-color: var(--si-gold);
}
.si-person-btn__photo { width: 100%; height: 210px; overflow: hidden; background: rgba(var(--si-navy-rgb), 0.4); }
.si-person-btn__body { padding: 20px 22px 24px; }
.si-person-btn__name { display: block; font-weight: 800; font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase; }
.si-person-btn__role { display: block; font-size: 12.5px; font-style: italic; color: var(--si-gold); margin: 4px 0 10px; }
.si-person-btn__short { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(var(--si-cream-rgb), 0.72); }
.si-person-btn__more { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--si-gold); }

.si-people__detail { margin-top: 28px; }

.si-people__panels { min-width: 0; } /* lets long text wrap inside the grid */
.si-person-panel { display: none; }
.si-person-panel.is-active { display: block; }
.si-person-card {
  background: var(--si-white);
  color: var(--si-navy);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.si-person-card__photo {
  width: 150px; height: 150px; border-radius: 20px; overflow: hidden; flex-shrink: 0;
}
.si-person-card__head { display: flex; gap: 26px; align-items: center; margin-bottom: 24px; }
.si-person-card p { font-size: 14.5px; line-height: 1.7; color: rgba(var(--si-navy-rgb), 0.75); margin: 0 0 14px; }
.si-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.si-tag {
  background: rgba(var(--si-navy-rgb), 0.07);
  border: 1px solid rgba(var(--si-navy-rgb), 0.12);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--si-navy-rgb), 0.75);
}

/* Close button on the open profile */
.si-person-close {
  background: none;
  border: 1px solid rgba(var(--si-navy-rgb), 0.2);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(var(--si-navy-rgb), 0.6);
  cursor: pointer;
  font-family: inherit;
}
.si-person-close:hover { border-color: var(--si-terracotta); color: var(--si-terracotta); }

@media (max-width: 900px) {
  .si-people__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .si-person-btn__photo { height: 170px; }
  .si-person-card { padding: 24px; border-radius: 20px; }
  .si-person-card__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .si-person-card__photo { width: 120px; height: 120px; }
}
@media (max-width: 560px) {
  .si-people__grid { grid-template-columns: 1fr; }
  .si-person-btn__photo { height: 220px; }
}

/* ==========================================================================
   12. DIVI-SPECIFIC RESETS
   Keeps Divi's own section/row defaults from interfering with the
   full-bleed, edge-to-edge sections pasted in via Code modules. Apply
   these by placing each Code module inside a Divi "Fullwidth Section"
   (not a regular Section > Row > Column) as described in SETUP-DIVI.md.
   ========================================================================== */
.et_pb_section.et_pb_fullwidth_section { padding: 0; }
.et_pb_fullwidth_code { margin: 0; }

/* --------------------------------------------------------------------------
   12b. FLOATING HEADER OVERLAP
   The nav is designed to float ON TOP of the hero (glass pill over the
   photo/gradient), not to sit in its own band above it.

   By default, Divi's Theme Builder header template is a normal section in
   the page flow: it takes up its own vertical space and paints its own
   background, which pushes the hero down and creates the hard horizontal
   colour seam between the header band and the hero.

   These rules lift the header template out of the flow and make it
   transparent, so the hero starts at the very top of the page and the nav
   pill floats over it — matching the approved design. The hero sections
   already carry enough top padding that the nav never covers their text.
   -------------------------------------------------------------------------- */
.et-l--header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background: transparent !important;
}
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--header .et_pb_code_inner {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: none;
}

/* Divi normally reserves space at the top of the page for its own fixed
   header; we don't want that gap since our nav is self-positioning. */
#page-container { padding-top: 0 !important; margin-top: 0 !important; }

/* Hide Divi's built-in header/footer entirely — ours replaces them. Harmless
   if the Theme Builder templates are already doing this. */
#main-header,
#top-header,
#main-footer { display: none !important; }

/* Keep the floating nav clear of the WordPress admin bar when logged in. */
body.admin-bar .si-nav-wrap { top: 52px; }
@media (max-width: 860px) { body.admin-bar .si-nav-wrap { top: 60px; } }
@media (max-width: 560px) { body.admin-bar .si-nav-wrap { top: 56px; } }