/* ==========================================================================
   VIVAAN KARULKAR - Design System
   Built for Elementor: flexbox only, no CSS grid, no JS-driven layout.
   Every block below maps to a native Elementor widget or flex container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette, sampled from the logo. Saffron is the only accent;
     navy is the dark base; gold survives solely as the header crest ring. */
  --ink:          #1B1F3B;
  --navy:         #243C8C;
  --navy-deep:    #16205A;
  --navy-dark:    #0E1533;
  --saffron:      #F06C18;
  --saffron-dark: #D2560C;
  --saffron-soft: #FDEDE1;
  --gold:         #DCA96D;

  --accent:         var(--saffron);
  --accent-dark:    var(--saffron-dark);
  --accent-soft:    var(--saffron-soft);
  --accent-on-dark: #FF8A3D;   /* same hue, lifted for AA contrast on navy */

  /* Neutrals */
  --ivory:         #FBF8F3;
  --ivory-deep:    #F4EFE6;
  --white:         #FFFFFF;
  --border:        #E8E0D4;
  --border-strong: #D9CFBF;
  --muted:         #6B6F86;
  --on-dark:       #C9CCE3;    /* body text on navy */
  --on-dark-muted: #A9A5C6;

  /* Type */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1240px;
  --narrow: 820px;
  --header-h: 80px;            /* sticky header height; pinned sections offset by it */

  /* Radius rule: pill = buttons, badges, chips, filters;
     --radius = cards, media, panels, crest; --radius-sm = inputs, nav links, menu items */
  --radius-sm:   8px;
  --radius:      16px;
  --radius-pill: 999px;

  /* Elevation, ink-tinted */
  --shadow-sm:     0 1px 2px rgba(27,31,59,.05), 0 2px 8px rgba(27,31,59,.05);
  --shadow:        0 2px 6px rgba(27,31,59,.06), 0 12px 32px rgba(27,31,59,.10);
  --shadow-lg:     0 4px 12px rgba(27,31,59,.08), 0 24px 56px rgba(27,31,59,.16);
  --shadow-accent: 0 1px 2px rgba(27,31,59,.08), 0 6px 16px rgba(240,108,24,.20);
  --shadow-dark:   0 12px 28px rgba(9,13,36,.35);

  /* Motion */
  --dur:      220ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;            /* never a scroll container, so position: sticky keeps working */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent); }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .5em; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 5.9vw, 4.65rem); letter-spacing: -.012em; line-height: 1.06; }
h2 { font-size: clamp(2.1rem, 4.1vw, 3.3rem); letter-spacing: -.01em; line-height: 1.1; }
h3 { font-size: clamp(1.42rem, 2.2vw, 1.85rem); letter-spacing: 0; line-height: 1.22; }
h4 { font-size: 1.28rem; line-height: 1.3; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.bg-navy :focus-visible, .bg-saffron :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible, .mobile-nav :focus-visible, .topbar :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES  →  Elementor Container (flex)
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--narrow); }

.section { position: relative; padding: 104px 0; }
.section--sm { padding: 72px 0; }
.section--lg { padding: 128px 0; }
.section--tight-top { padding-top: 0; }

/* Section header: one headline, optional sub, stacked, left-aligned by default */
.section-head { max-width: 680px; margin: 0 0 52px; }
.section-head h2 { margin-bottom: 14px; }
.section-head .lede { margin: 0; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Row = Elementor Container, direction row.
   --gap drives both the gap and each column's flex-basis, so columns never
   wrap early when the gap changes. Mirrors how Elementor sizes its columns. */
.row {
  --gap: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: stretch;
}
.row--center  { align-items: center; }
.row--middle  { align-items: center; justify-content: center; }
.row--gap-sm  { --gap: 20px; }
.row--gap-lg  { --gap: 52px; }
.row--nowrap  { flex-wrap: nowrap; }

/* Columns = Elementor Container children with width %.
   The trailing -0.5px absorbs sub-pixel rounding so two halves always fit. */
.col      { flex: 1 1 0;                                                min-width: 0; }
.col-1-2  { flex: 1 1 calc(50%     - var(--gap) * 0.5    - 0.5px);      min-width: 0; }
.col-1-3  { flex: 1 1 calc(33.333% - var(--gap) * 0.6667 - 0.5px);      min-width: 0; }
.col-2-3  { flex: 1 1 calc(66.666% - var(--gap) * 0.3333 - 0.5px);      min-width: 0; }
.col-1-4  { flex: 1 1 calc(25%     - var(--gap) * 0.75   - 0.5px);      min-width: 0; }
.col-3-4  { flex: 1 1 calc(75%     - var(--gap) * 0.25   - 0.5px);      min-width: 0; }
.col-1-5  { flex: 1 1 calc(20%     - var(--gap) * 0.8    - 0.5px);      min-width: 0; }
.col-1-6  { flex: 1 1 calc(16.666% - var(--gap) * 0.8333 - 0.5px);      min-width: 0; }
.col-2-5  { flex: 1 1 calc(40%     - var(--gap) * 0.6    - 0.5px);      min-width: 0; }
.col-3-5  { flex: 1 1 calc(60%     - var(--gap) * 0.4    - 0.5px);      min-width: 0; }
.col-auto { flex: 0 0 auto; }

.stack { display: flex; flex-direction: column; gap: 22px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 38px; }

.text-center { text-align: center; }
.text-center .eyebrow, .text-center .rule { justify-content: center; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 30px; } .mt-4 { margin-top: 44px; }

/* --------------------------------------------------------------------------
   4. SECTION BACKGROUNDS  →  Elementor Container background
      The page is light. .bg-navy is the one dark block allowed per page; it
      uses royal navy so it reads as colour, not black. The header and footer
      stay a step darker and frame the page.
   -------------------------------------------------------------------------- */
.bg-ivory { background: var(--ivory); }
.bg-white { background: var(--white); }
.bg-deep  { background: var(--ivory-deep); }
.bg-saffron-soft { background: var(--saffron-soft); }
/* Legacy alias kept for book-technology.html; now a light tint */
.bg-plum  { background: var(--ivory-deep); }

.bg-navy {
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: var(--on-dark);
}
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy p { color: var(--on-dark); }
.bg-navy a { color: #fff; }
.bg-navy a:hover { color: var(--accent-on-dark); }

.bg-saffron {
  background: var(--accent);
  color: #fff;
}
.bg-saffron h1, .bg-saffron h2, .bg-saffron h3 { color: #fff; }
.bg-saffron p { color: rgba(255,255,255,.94); }

/* Decorative sunburst lifted from the logo. Pure CSS background, safe in Elementor. */
.has-rays { position: relative; overflow: hidden; }
.has-rays::before {
  content: '';
  position: absolute;
  top: -46%; left: 50%;
  width: var(--ray-size, 1500px); height: var(--ray-size, 1500px);
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(240,108,24,.07) 0deg 3.4deg,
    transparent 3.4deg 12deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.has-rays > * { position: relative; z-index: 1; }
.bg-navy.has-rays::before {
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(240,108,24,.08) 0deg 3.4deg,
    transparent 3.4deg 12deg
  );
}
.bg-saffron.has-rays::before {
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,.08) 0deg 3.4deg,
    transparent 3.4deg 12deg
  );
}

.has-glow { position: relative; overflow: hidden; }
.has-glow::after {
  content: '';
  position: absolute; right: -160px; bottom: -220px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,108,24,.14), transparent 68%);
  pointer-events: none; z-index: 0;
}
.has-glow > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. TYPE HELPERS
   -------------------------------------------------------------------------- */
/* Eyebrow: budget is one per three sections on any page */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ''; width: 30px; height: 2px; flex: 0 0 30px;
  background: var(--accent);
}
.bg-navy .eyebrow { color: var(--accent-on-dark); }
.bg-navy .eyebrow::before { background: var(--accent-on-dark); }
.bg-saffron .eyebrow { color: #fff; }
.bg-saffron .eyebrow::before { background: rgba(255,255,255,.8); }
.eyebrow.eyebrow--center { display: flex; justify-content: center; }

.lede { font-size: 1.22rem; line-height: 1.6; color: var(--muted); font-weight: 400; }
.bg-navy .lede { color: var(--on-dark); }
.bg-saffron .lede { color: rgba(255,255,255,.94); }

.text-navy   { color: var(--navy); }
.small { font-size: .9rem; }
.muted { color: var(--muted); }

/* Headline emphasis: italic of the same family in the accent colour */
.grad { font-style: italic; color: var(--accent); }
.bg-navy .grad { color: var(--accent-on-dark); }

.rule {
  display: flex; align-items: center; gap: 10px;
  width: 78px; height: 2px; margin: 0 0 26px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   6. BUTTONS  →  Elementor Button widget
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  text-transform: capitalize;            /* Title Case on every button label, site-wide */
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: 80ms; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover  { background: var(--accent-dark); color: #fff;
                      box-shadow: 0 2px 4px rgba(27,31,59,.08), 0 10px 22px rgba(240,108,24,.24); }
.btn-primary:active { box-shadow: 0 1px 2px rgba(27,31,59,.10); }

.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(27,31,59,.08), 0 6px 16px rgba(36,60,140,.18); }
.btn-navy:hover  { background: var(--navy-deep); color: #fff; }
.btn-navy:active { box-shadow: 0 1px 2px rgba(27,31,59,.10); }

.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover  { background: var(--navy); color: #fff; }
.btn-outline:active { background: var(--navy-deep); }

.btn-light { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-light:hover  { color: var(--accent); box-shadow: var(--shadow); }
.btn-light:active { box-shadow: var(--shadow-sm); }

.btn-ghost-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost-light:hover  { background: #fff; color: var(--navy); border-color: #fff; }
.btn-ghost-light:active { background: var(--ivory); }

/* On dark or saffron surfaces the accent glow goes flat */
.site-header .btn-primary, .mobile-nav .btn-primary, .bg-navy .btn-primary, .bg-saffron .btn-primary {
  box-shadow: 0 1px 2px rgba(9,13,36,.4);
}

.btn-sm { padding: 11px 22px; font-size: .84rem; }
.btn-lg { padding: 18px 38px; font-size: 1rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.text-center .btn-group { justify-content: center; }

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .92rem; color: var(--navy);
}
.link-arrow span.arw { transition: transform var(--dur) var(--ease); display: inline-block; }
.link-arrow:hover span.arw { transform: translateX(6px); }
.link-arrow:active span.arw { transform: translateX(2px); }

/* Pressed feedback for the smaller controls */
.filter-btn:active, .chip:active, .social a:active, .to-top:active, .burger:active,
.topbar-links a:active, .lightbox-close:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   7. HEADER  →  Elementor Header template
      .topbar          → Container (row) above the sticky header, scrolls away
      .site-header     → Container (row), Motion Effects › Sticky: Top
      .brand-crest     → Image in a Container with a negative bottom margin
      .header-progress → Progress Tracker widget (horizontal)
   -------------------------------------------------------------------------- */

/* Credentials strip */
.topbar {
  background: #090D24;
  color: var(--on-dark-muted);
  font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 38px;
}
.topbar-creds {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.topbar-creds li { display: flex; align-items: center; margin: 0; white-space: nowrap; line-height: 1.1; }
.topbar-creds li + li { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.16); }
.topbar-links { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.topbar-links a {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.72);
  min-width: 30px; height: 30px; border-radius: 50%;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.topbar-links a:hover { color: #fff; background: rgba(255,255,255,.1); }
.topbar-links svg { width: 14px; height: 14px; fill: currentColor; }
.topbar-links .topbar-mail {
  text-transform: none; letter-spacing: .02em; font-size: .78rem; font-weight: 500;
  padding: 0 14px 0 0; margin-right: 8px; border-radius: 0;
  border-right: 1px solid rgba(255,255,255,.16);
  height: 16px;
}
.topbar-links .topbar-mail:hover { background: transparent; color: #fff; }

/* Main bar */
.site-header {
  --bar-h: var(--header-h);
  position: sticky; top: 0; z-index: 200;
  background: var(--navy-deep);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
  transition: box-shadow var(--dur-slow) var(--ease);
}
.site-header.is-stuck {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), var(--shadow-dark);
}

/* Reading progress along the bottom edge */
.header-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: var(--bar-h);
}

/* Brand: logo on a white crest that hangs below the bar */
.brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; align-self: flex-start; height: var(--bar-h); }
.brand-crest {
  position: relative; z-index: 2;
  align-self: flex-start;
  display: block;
  padding: 9px 13px 13px;
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-dark), 0 0 0 1px rgba(220,169,109,.55);
  transition: padding var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), transform var(--dur) var(--ease);
}
.brand-crest img {
  height: 82px; width: auto;
  transition: height var(--dur-slow) var(--ease);
}
.brand:active .brand-crest { transform: translateY(1px); }
.site-header.is-stuck .brand-crest { padding: 7px 13px 11px; box-shadow: 0 8px 20px rgba(9,13,36,.3), 0 0 0 1px rgba(220,169,109,.55); }
.site-header.is-stuck .brand-crest img { height: 68px; }

.brand-text { display: flex; align-items: center; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 1.3rem; font-weight: 600; letter-spacing: 0;
  color: #fff; white-space: nowrap;
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: 0; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.82);
  padding: 9px 9px; border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 9px; right: 9px; bottom: 3px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a:active { transform: scale(.98); }
.nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .caret {
  width: 11px; height: 11px; flex: 0 0 11px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.has-drop:hover .caret, .has-drop:focus-within .caret { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.header-cta .btn-sm { padding: 11px 20px; }

/* Dropdown → Elementor Nav Menu sub-menu */
.has-drop { position: relative; display: inline-flex; }
.drop {
  position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 300px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 4px 4px var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
/* Hover bridge across the gap between the link and the panel */
.drop::before { content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop a {
  display: block; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: .88rem; line-height: 1.4; font-weight: 500;
  color: var(--ink); white-space: normal;
}
.drop a::after { display: none; }
.drop a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.drop a:active { background: #FADBC4; }
.drop a small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm);
  cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.burger:hover { background: rgba(255,255,255,.12); }
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 190;
  background: var(--navy-dark);
  padding: 150px 26px 44px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; color: #fff;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(16px);
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--accent-on-dark); }
/* The entry animation fills forwards, so the pressed state is colour-only */
.mobile-nav a:active { color: var(--accent); }
.mobile-nav.is-open a { animation: mnav .5s var(--ease) forwards; }
.mobile-nav a:nth-child(1)  { animation-delay: .06s; }
.mobile-nav a:nth-child(2)  { animation-delay: .10s; }
.mobile-nav a:nth-child(3)  { animation-delay: .14s; }
.mobile-nav a:nth-child(4)  { animation-delay: .18s; }
.mobile-nav a:nth-child(5)  { animation-delay: .22s; }
.mobile-nav a:nth-child(6)  { animation-delay: .26s; }
.mobile-nav a:nth-child(7)  { animation-delay: .30s; }
.mobile-nav a:nth-child(8)  { animation-delay: .34s; }
.mobile-nav a:nth-child(9)  { animation-delay: .38s; }
@keyframes mnav { to { opacity: 1; transform: translateY(0); } }
.mobile-nav .btn { margin-top: 26px; opacity: 1; transform: none; animation: none; border-bottom: 0; font-family: var(--font-body); font-size: .93rem; color: #fff; }
body.nav-open { overflow: hidden; }

/* Header breakpoints */
@media (max-width: 1300px) {
  .brand-text { display: none; }
}
@media (max-width: 1160px) {
  .nav a { padding: 9px 8px; font-size: .86rem; }
  .nav a::after { left: 8px; right: 8px; }
  .header-cta .btn { padding: 10px 17px; }
}
@media (max-width: 1080px) {
  :root { --header-h: 72px; }
  .brand-text { display: flex; }
  .brand-crest { padding: 8px 13px 11px; }
  .brand-crest img, .site-header.is-stuck .brand-crest img { height: 68px; }
  .site-header.is-stuck .brand-crest { padding: 8px 13px 11px; }
  .topbar-mail { display: none !important; }
}
@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .topbar { display: none; }
  .brand { gap: 12px; }
  .brand-crest { padding: 7px 10px 9px; }
  .brand-crest img, .site-header.is-stuck .brand-crest img { height: 58px; }
  .site-header.is-stuck .brand-crest { padding: 7px 10px 9px; }
  .brand-name { font-size: 1.2rem; }
  .burger { width: 44px; height: 44px; }
  .mobile-nav { padding-top: 112px; }
}

/* --------------------------------------------------------------------------
   8. HERO  →  Elementor Container (.hero) with an absolutely positioned child
      Container (.hero-rays), Heading (.hero-title), Divider (.hero-rule),
      Text Editor (.hero-lede), Container of two Buttons (.hero-cta),
      Container (.hero-media) holding an Image widget (.hero-portrait).
      Rule of the block: base styles are the resting state; every animation
      ends at the natural style and fills backwards only, so `animation: none`
      (reduced motion, print, or a builder skipping this CSS) is the static hero.
      Only transform, opacity and clip-path are animated. A paste-ready copy for
      Elementor's Additional CSS lives in elementor/hero-additional-css.css.
   -------------------------------------------------------------------------- */
.hero {
  padding: 84px 0 96px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;              /* clips the rotated ray square without making a scroll container */
  --hero-rise-y: 18px;         /* lede / CTA lift distance */
  --hero-drift: 56px;          /* portrait parallax travel over the hero's exit */
  --hero-book-scale: .96;      /* portrait start scale */
  --rays-turn: 180s;           /* one full turn of the sunburst */
}
.hero > .container { position: relative; z-index: 1; }

/* Sunburst: its own layer so dawn (opacity + tilt), the slow turn (rotate)
   and the scroll fade (outer opacity) live on different boxes and compose. */
.hero-rays {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
.hero-rays::before {
  content: '';
  position: absolute;
  top: -46%; left: 50%;
  width: var(--ray-size, 1500px); height: var(--ray-size, 1500px);
  margin-left: calc(var(--ray-size, 1500px) / -2);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(240,108,24,.07) 0deg 3.4deg,
    transparent 3.4deg 12deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%);
  rotate: 0deg;
  animation:
    hero-dawn 1.6s cubic-bezier(.33, 1, .68, 1) 0s backwards,
    hero-turn var(--rays-turn) linear infinite;
}
@keyframes hero-dawn { from { opacity: 0; transform: rotate(-6deg); } }
@keyframes hero-turn { to { rotate: 1turn; } }

/* Headline: one h1, three block lines, each a static clip box with
   descender clearance in em so it survives any font size or font swap. */
.hero-title { margin-bottom: 16px; }
.hero-title em { font-style: italic; font-weight: 400; }
.hero-line {
  display: block;
  clip-path: inset(-.12em -.16em -.2em -.08em);
}
.hero-line > * {
  display: block;
  animation: hero-rise .8s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i, 0) * .12s) backwards;
}
.hero-line:nth-child(1) { --i: 0; }
.hero-line:nth-child(2) { --i: 1; }
.hero-line:nth-child(3) { --i: 2; }
@keyframes hero-rise { from { transform: translate3d(0, 120%, 0); } }

/* Saffron rule: the eyebrow-bar motif, drawn from the left */
.hero-rule {
  display: block; width: 72px; height: 2px;
  margin: 0 0 18px;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: hero-draw .55s cubic-bezier(.16, 1, .3, 1) 1.35s backwards;
}
@keyframes hero-draw { from { transform: scaleX(0); } }

/* Lede and buttons */
.hero-lede { animation: hero-fade-up .6s var(--ease) .95s backwards; }
.hero-cta  { animation: hero-fade-up .6s var(--ease) 1.1s backwards; }
@keyframes hero-fade-up { from { opacity: 0; transform: translate3d(0, var(--hero-rise-y, 18px), 0); } }

/* Portrait: the clip opens from a centre sliver like a book at its spine; the
   image never goes to opacity 0 (LCP). The shadow is an overlay that fades in
   after the clip animation has ended, so it is never half-clipped. */
.hero-media { position: relative; }
.hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  position: relative; z-index: 1;
}
.hero-portrait {
  position: relative;
  border-radius: var(--radius);
  animation: hero-book .9s var(--ease) .5s backwards;
}
.hero-portrait::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  animation: hero-fade .5s var(--ease) 1.4s backwards;
}
@keyframes hero-book {
  from { clip-path: inset(0 45% 0 45% round var(--radius, 16px)); transform: scale(var(--hero-book-scale, .96)); }
  85%  { clip-path: inset(0 0 0 0 round var(--radius, 16px)); }
  to   { clip-path: inset(0 0 0 0 round var(--radius, 16px)); transform: scale(1); }
}
@keyframes hero-fade { from { opacity: 0; } }

/* Ambient scroll (pure CSS, no listener): named view timeline on the section.
   animation-timeline / animation-range must follow the animation shorthand.
   Browsers without support skip the block and get a static hero. */
@supports (animation-timeline: view()) and (view-timeline-name: --x) {
  .hero { view-timeline: --hero block; }
  .hero-rays {
    animation: hero-rays-leave linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .hero-media {
    animation: hero-drift linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
}
@keyframes hero-rays-leave { to { opacity: 0; } }
@keyframes hero-drift { to { transform: translate3d(0, var(--hero-drift, 56px), 0); } }

/* Reduced motion and print: base styles are the final frame */
@media (prefers-reduced-motion: reduce), print {
  .hero-rays, .hero-rays::before, .hero-media,
  .hero-line > *, .hero-rule, .hero-lede, .hero-cta,
  .hero-portrait, .hero-portrait::after { animation: none; }
}

/* Smaller screens: shorter distances, smaller rule, dimmer and smaller rays */
@media (max-width: 900px) {
  .hero { --hero-drift: 32px; }
  .hero-rays::before { --ray-size: 1000px; opacity: .62; }
}
@media (max-width: 620px) {
  .hero { --hero-rise-y: 12px; --hero-drift: 20px; --hero-book-scale: .985; }
  .hero-rays::before { --ray-size: 760px; opacity: .5; }
  .hero-rule { width: 48px; margin-bottom: 14px; }
  .hero-title { margin-bottom: 12px; }
}

/* Inner-page hero with the homepage entrance: add .has-dawn and a .hero-rays
   child; the .hero-line / .hero-rule / .hero-lede / .hero-cta pieces work as on the home hero. */
.has-dawn { position: relative; isolation: isolate; overflow: hidden; overflow: clip; --rays-turn: 180s; --hero-rise-y: 18px; }
.has-dawn > .container { position: relative; z-index: 1; }
.text-center .hero-rule { margin-left: auto; margin-right: auto; transform-origin: 50% 50%; }
.page-hero .hero-title { margin-bottom: 16px; }

/* Book-page hero: long titles, the cover takes the book-opening reveal */
.hero-title--long { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.1; }
.hero-media--cover .hero-portrait { max-width: 400px; margin: 0 auto; --radius: 6px; }
.hero-media--cover img { border-radius: 6px; }
.hero-media--cover .hero-portrait::after { border-radius: 6px; box-shadow: 0 30px 60px rgba(27,31,59,.28); }
.stat.stat--left { text-align: left; }
.stat--left .stat-num { justify-content: flex-start; }
/* Numbers in cards (book pages) */
.stat.stat--card {
  background: var(--ivory-deep); border-radius: var(--radius); padding: 26px 26px 22px;
  border-left: 3px solid var(--accent); text-align: left; height: 100%;
}
.stat--card .stat-num { justify-content: flex-start; }
.stat--card .stat-label { margin-top: 8px; }
/* Landscape photo in the developing frame */
.about-frame.about-frame--wide { aspect-ratio: 4 / 3; }
.about-frame.about-frame--wide img { object-position: 50% 50%; }

/* Studio hero (Proudcast): a dark stage, one cinema screen, a rail of the
   episodes in the category now on screen. The screen is the inline player. */
.hero.studio {
  --rays-turn: 240s;
  color: var(--on-dark);
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, #0A0F2B 70%, #080C22 100%);
  padding: 32px 0 44px;
}
.hero.studio .hero-rays::before {
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(220,169,109,.07) 0deg 3.4deg, transparent 3.4deg 12deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 58%), linear-gradient(180deg, #000 40%, transparent 85%);
          mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 58%), linear-gradient(180deg, #000 40%, transparent 85%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.studio-inner { display: flex; flex-direction: column; gap: 22px; }
.studio-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.studio-top .breadcrumb, .studio-top .breadcrumb a { color: var(--on-dark-muted); }
.studio-top .breadcrumb a:hover { color: #fff; }
.studio-top .hero-title { color: #fff; margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.studio-top .hero-title em { color: var(--on-dark); font-weight: 400; font-size: .72em; }
.studio-actions { flex: 0 0 auto; padding-bottom: 6px; }
/* The screen */
.studio-screen {
  /* 80% of the viewport, never wider than the container; the rail sits a scroll below on laptops */
  width: min(100%, 80vw); margin: 0 auto; position: relative;
  padding: 10px; background: #0B1030; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 90px rgba(240,108,24,.16), inset 0 1px 0 rgba(255,255,255,.06);
  animation: studio-on .9s var(--ease) .5s backwards;
}
.studio-screen::before {                    /* floor shadow */
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -70px; height: 90px;
  background: radial-gradient(ellipse at 50% 0, rgba(0,0,0,.55), transparent 70%);
  pointer-events: none; z-index: -1;
}
.studio-screen .video-thumb { border-radius: 8px; }
.studio-screen .video-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 14px 10px 6px; }
.studio-screen .video-meta .video-title { color: #fff; font-size: 1.25rem; margin: 0; flex: 1 1 auto; min-width: 0; }
.studio-screen .video-meta .video-yt { flex: 0 0 auto; margin: 0 0 0 auto; }
.studio-screen:hover, .studio-screen.is-playing:hover { transform: none; }
@keyframes studio-on { from { opacity: 0; transform: scale(.96); } }
/* The rail */
.studio-rail { animation: hero-fade-up .6s var(--ease) 1.05s backwards; }
.studio-rail-title { margin: 0 0 12px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-dark); }
.rail {
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 14px;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.rail-item {
  flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px;
  color: var(--on-dark); opacity: .72; border-radius: 10px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rail-item:hover { opacity: 1; transform: translateY(-2px); color: #fff; }
.rail-item.is-active { opacity: 1; color: #fff; }
.rail-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--navy-deep); box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--dur) var(--ease); }
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-item.is-active .rail-thumb { box-shadow: 0 0 0 2px var(--accent); }
.rail-item-title {
  font-size: .84rem; line-height: 1.35; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 901px) {
  .hero.studio { min-height: calc(100svh - var(--header-h)); display: flex; }
  .hero.studio > .container { justify-content: center; }
}
@media (max-width: 900px) {
  .studio-screen { width: 100%; }
  .studio-screen .video-meta .video-yt { margin-left: 0; }
  .studio-top { flex-direction: column; align-items: flex-start; }
  .rail-item { flex-basis: 160px; }
}
@media (max-width: 620px) {
  .hero.studio { padding: 28px 0 44px; }
  .studio-screen { padding: 6px; border-radius: 10px; }
  .studio-screen .video-meta .video-title { font-size: 1.1rem; }
  .rail-item { flex-basis: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-screen, .studio-rail { animation: none; }
}

/* Page banner for interior pages */
.page-hero { padding: 74px 0 66px; position: relative; }
.page-hero h1 { margin-bottom: 18px; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: .82rem; color: var(--muted); margin-bottom: 16px;
  list-style: none; padding: 0;
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: 9px; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.bg-navy .breadcrumb, .bg-navy .breadcrumb a { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   9. STAT COUNTERS  →  Elementor Counter widget
   -------------------------------------------------------------------------- */
.stat { text-align: center; padding: 8px 10px; }
.stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.65rem, 5.3vw, 3.8rem); line-height: 1;
  color: var(--navy); letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.stat-num .suffix { color: var(--accent); }
.stat-label {
  margin-top: 11px; font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.bg-navy .stat-num { color: #fff; }
.bg-navy .stat-num .suffix { color: var(--accent-on-dark); }
.bg-navy .stat-label { color: var(--on-dark-muted); }

.stat-strip {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 40px 20px;
}
.stat-strip .row > * + * { border-left: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   10. CARDS  →  Elementor Icon Box / Image Box
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card-body { padding: 28px; display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto; }
.card-body > * { margin: 0; }
.card-title { font-size: 1.35rem; margin: 0; }
.card-media { overflow: hidden; background: var(--ivory-deep); }
.card-media img { width: 100%; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card-media img { transform: scale(1.055); }
.card-foot { margin-top: auto; padding-top: 6px; }

/* Icon box */
.icon-box {
  display: flex; flex-direction: column; gap: 15px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--shadow-sm); height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-box:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.icon-box h3 { margin: 0; font-size: 1.2rem; }
.icon-box p  { margin: 0; font-size: .96rem; color: var(--muted); }

.icon-circle {
  width: 56px; height: 56px; flex: 0 0 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent); font-size: 1.4rem;
  border: 1px solid rgba(240,108,24,.2);
}
.icon-circle svg { width: 25px; height: 25px; }

.bg-navy .icon-box {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.bg-navy .icon-box:hover {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3);
}
.bg-navy .icon-box p { color: rgba(255,255,255,.78); }
.bg-navy .icon-circle {
  background: rgba(255,255,255,.12); color: var(--accent-on-dark); border-color: rgba(255,255,255,.2);
}

/* --------------------------------------------------------------------------
   11. BOOK CARDS
   -------------------------------------------------------------------------- */
.book-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.book-cover {
  display: flex; align-items: center; justify-content: center;
  padding: 38px 30px 28px;
  background: linear-gradient(168deg, var(--ivory-deep), #fff 70%);
  position: relative; overflow: hidden;
}
.book-cover img {
  max-height: 268px; width: auto;
  filter: drop-shadow(0 18px 30px rgba(27,31,59,.26));
  transition: transform var(--dur-slow) var(--ease);
}
.book-card:hover .book-cover img { transform: translateY(-4px); }
.book-card .card-body { padding: 26px 28px 30px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid rgba(240,108,24,.24);
}
.badge--navy { background: rgba(36,60,140,.09); color: var(--navy); border-color: rgba(36,60,140,.2); }
.badge--gold, .badge--plum { background: var(--ivory-deep); color: var(--ink); border-color: var(--border); }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Edition chips */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 500;
  padding: 8px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--ivory);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   12. STAR RATING  →  Elementor Star Rating widget
   -------------------------------------------------------------------------- */
.stars { display: inline-flex; gap: 3px; color: var(--accent); font-size: 1rem; line-height: 1; letter-spacing: .06em; }
.stars svg { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------------------------------
   13. TESTIMONIALS  →  Elementor Testimonial widget
   -------------------------------------------------------------------------- */
.quote {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 30px;
  box-shadow: var(--shadow-sm); height: 100%;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.quote::before {
  content: '“';
  position: absolute; top: 20px; right: 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 8rem; line-height: .62;
  color: var(--accent); opacity: .14; pointer-events: none;
}
.quote p { margin: 0; font-size: 1.02rem; color: var(--ink); position: relative; z-index: 1; }
.quote-author { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 8px; }
.quote-avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: #fff; font-weight: 600; font-size: .95rem; font-family: var(--font-display);
}
.quote-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.quote-role { font-size: .8rem; color: var(--muted); }

/* Masonry-ish columns using flex only */
.quote-cols { --gap: 26px; display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.quote-col { flex: 1 1 calc(33.333% - var(--gap) * 0.6667 - 0.5px); display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* Big pull quote */
.pullquote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 30px;
  font-family: var(--font-display); font-optical-sizing: auto; font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.4;
  color: var(--navy);
}
.bg-navy .pullquote { color: #fff; border-left-color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   14. TIMELINE  →  Elementor flex rows
   -------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.tl-item { display: flex; gap: 30px; padding-bottom: 44px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-marker { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; position: relative; }
.tl-age {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff; box-shadow: var(--shadow-sm);
  font-family: var(--font-display); line-height: 1;
  flex: 0 0 88px;
}
.tl-age .n { font-size: 1.85rem; font-weight: 600; }
.tl-age .t { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin-top: 3px; opacity: .92; }
.tl-item:nth-child(even) .tl-age { background: var(--navy); }
.tl-line { flex: 1 1 auto; width: 1px; background: var(--border-strong); margin-top: 14px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { flex: 1 1 auto; padding-top: 6px; }
.tl-date { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.tl-body h3 { margin-bottom: 10px; }
.tl-body p { color: var(--muted); margin: 0; }
.tl-media { flex: 0 0 240px; }
.tl-media img { border-radius: var(--radius); box-shadow: var(--shadow-sm); width: 100%; }

/* --------------------------------------------------------------------------
   15. GALLERY  →  Elementor Gallery widget
   -------------------------------------------------------------------------- */
.gallery { --gap: 18px; display: flex; flex-wrap: wrap; gap: var(--gap); }
.gallery-item {
  flex: 1 1 calc(25% - var(--gap) * 0.75 - 0.5px); min-width: 210px;
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--ivory-deep);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  aspect-ratio: 4 / 3;
  display: block; border: 0; padding: 0;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(0deg, rgba(14,21,51,.92), transparent);
  color: #fff; font-size: .82rem; font-weight: 500; line-height: 1.4;
  text-align: left;
  transform: translateY(6px); opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gallery-item:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery-item--tall { aspect-ratio: 3 / 4; }

/* Placeholder tile for images still to be supplied */
.gallery-item--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px; text-align: center; cursor: default;
  border: 2px dashed var(--border-strong); background: var(--ivory-deep);
  color: var(--muted);
}
.gallery-item--placeholder:hover { transform: none; box-shadow: var(--shadow-sm); }
.gallery-item--placeholder .ph-icon { font-size: 1.7rem; opacity: .6; }
.gallery-item--placeholder .ph-label { font-size: .82rem; font-weight: 600; line-height: 1.4; }
.gallery-item--placeholder .ph-note { font-size: .72rem; color: var(--muted); }

/* Filter buttons */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-btn {
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; text-transform: capitalize;
  padding: 10px 21px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.is-active {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 2px 8px rgba(36,60,140,.2);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(14,21,51,.94);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff; font-size: .92rem; padding: 0 30px; }
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  font-size: 1.4rem; cursor: pointer; line-height: 1;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox.has-nav .lightbox-prev, .lightbox.has-nav .lightbox-next { display: flex; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.28); }
.lightbox-prev:active, .lightbox-next:active { transform: scale(.94); }
.lightbox-prev svg, .lightbox-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-count { position: absolute; top: 28px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: .82rem; letter-spacing: .08em; margin: 0; }
@media (max-width: 620px) {
  .lightbox { padding: 16px; }
  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; }
  .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; }
  .lightbox-cap { bottom: 18px; padding: 0 16px; font-size: .84rem; }
  .lightbox img { max-height: calc(100% - 120px); }
}

/* --------------------------------------------------------------------------
   16. PRESS STRIP  →  Elementor Image Carousel
   -------------------------------------------------------------------------- */
.press-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; }
.press-logo {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  color: var(--navy); opacity: .5; letter-spacing: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.press-logo:hover { opacity: 1; color: var(--accent); }

/* --------------------------------------------------------------------------
   17. ACCORDION  →  Elementor Accordion widget
   -------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc-item.is-open { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 20px 24px; cursor: pointer;
  background: transparent; border: 0; text-align: left;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.acc-head:hover { color: var(--accent); }
.acc-head:active { color: var(--accent-dark); }
.acc-icon {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 1.1rem; line-height: 1;
  transition: transform var(--dur-slow) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-item.is-open .acc-icon { transform: rotate(45deg); background: var(--accent); color: #fff; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.acc-panel-inner { padding: 0 24px 22px; color: var(--muted); font-size: .98rem; }

/* --------------------------------------------------------------------------
   18. VIDEO / PROUDCAST
   -------------------------------------------------------------------------- */
.video-card {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--navy-deep);
  box-shadow: var(--shadow-sm); height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.video-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-deep); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.video-card:hover .video-thumb img { transform: scale(1.04); opacity: .85; }
.play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.92);
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 14px rgba(9,13,36,.35);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.video-card:hover .play-btn { transform: translate(-50%,-50%) scale(1.04); background: var(--accent-dark); }
.video-meta { padding: 17px 19px 20px; }
.video-title {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  color: #fff; line-height: 1.3; margin: 0 0 7px;
}
.video-ep { font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-on-dark); }
.video-card--lg .video-title { font-size: 1.5rem; }
.video-card--lg .play-btn { width: 84px; height: 84px; }
.video-card--lg .play-btn svg { width: 30px; height: 30px; }

.embed-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   19. AWARDS / MEDIA CARDS
   -------------------------------------------------------------------------- */
.award-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.award-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.award-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory-deep); }
.award-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.award-card:hover .award-media img { transform: scale(1.04); }
.award-body { padding: 24px 25px 27px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.award-body h3 { margin: 0; font-size: 1.13rem; line-height: 1.3; }
.award-body p { margin: 0; font-size: .92rem; color: var(--muted); }

/* Feature row: image one side, copy the other */
.feature-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.feature-media { position: relative; }
/* Keeps tall portraits from dwarfing the column beside them */
.feature-media--portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.feature-media--wide img     { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
.feature-media--framed::after {
  content: ''; position: absolute; inset: -18px -18px 18px 18px;
  border: 2px solid var(--border-strong); border-radius: var(--radius); z-index: -1;
}

/* --------------------------------------------------------------------------
   20. FORMS  →  Elementor Form widget
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);   /* 16px: under that iOS zooms into the field */
  padding: 14px 17px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(240,108,24,.18);
}
.field input::placeholder, .field textarea::placeholder { color: #A3A7BB; }
.form-note { font-size: .82rem; color: var(--muted); }

.form-panel {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow-sm);
}

/* Contact detail list */
.contact-list { display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 16px; margin: 0; }
.contact-list .icon-circle { width: 46px; height: 46px; flex: 0 0 46px; }
.contact-list .icon-circle svg { width: 20px; height: 20px; }
.contact-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.contact-value { font-size: .99rem; line-height: 1.55; }

.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); line-height: 0; }
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-dark); color: var(--on-dark-muted); padding: 78px 0 0; position: relative; overflow: hidden; }
/* Sunburst echoing the logo, rising from behind the footer crest (moved here from the header) */
.site-footer::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-conic-gradient(
    from 0deg at 12% 100%,
    rgba(240,108,24,.09) 0deg 3.4deg,
    transparent 3.4deg 12deg
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer h4,
.site-footer .footer-heading {
  color: #fff; font-family: var(--font-body);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 20px; line-height: 1.4;
}
.site-footer a { color: var(--on-dark-muted); font-size: .93rem; }
.site-footer a:hover { color: var(--accent-on-dark); }
.footer-logo { height: 74px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .95; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col { min-width: 168px; }
.footer-links li { margin: 0; }
.footer-about { font-size: .93rem; line-height: 1.72; max-width: 330px; }

.social { display: flex; gap: 11px; margin-top: 22px; }
.social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09); color: #fff;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social a:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
/* Same icons on a light background (contact page) */
.social--light a { background: var(--ivory-deep); color: var(--navy); }
.social--light a:hover { background: var(--accent); color: #fff; }

.footer-bottom {
  margin-top: 60px; padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: .85rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Back to top */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow), background-color var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); }
.to-top svg { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------------------------
   22. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { padding: 88px 0; position: relative; overflow: hidden; }
.cta-band h2 { max-width: 720px; }
.cta-band .btn-group { justify-content: flex-end; }
@media (max-width: 900px) { .cta-band .btn-group { justify-content: flex-start; } }

/* --------------------------------------------------------------------------
   23. LONG-FORM / POLICY PAGES
   -------------------------------------------------------------------------- */
.prose { max-width: var(--narrow); }
.prose h2 { font-size: 1.75rem; margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.22rem; margin-top: 1.7em; }
.prose ul, .prose ol { color: var(--ink); }
.prose li { margin-bottom: .55em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose .updated {
  font-size: .84rem; color: var(--muted);
  padding: 14px 18px; background: var(--ivory-deep);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 2.4em;
}

/* --------------------------------------------------------------------------
   24. HOMEPAGE BLOCKS  →  Elementor flex containers
      .books   → one HTML widget: scroll-pinned book arc (see README). Base
                 styles are a static shelf; the pin is layered on under .js
      .step    → 4 Containers (25%) with a top border
      .photo   → Image widget with caption
      .ep-list → Icon List, or 3 row Containers (Image + Heading)
      .quote-plain / .pullquote--center → Testimonial widget without image
   -------------------------------------------------------------------------- */

/* Books: scroll-pinned arc. One progress value --p (0..1) drives everything:
   a CSS scroll-driven animation writes it where supported, main.js block 10
   writes it inline elsewhere. The base styles below are the static shelf, used
   without JS, under reduced motion and in browsers without svh / translate. */
.books {
  --books-hold: .06;                 /* keep in sync with @keyframes books-progress */
  --stage-hold: var(--books-hold);   /* read by main.js blocks 10-11 */
  --books-travel: 300svh;
  --books-top: calc(var(--header-h) + var(--admin-bar-h, 0px));
  --books-view-h: calc(100svh - var(--books-top));
  --books-angle: 50deg;
  --books-r: min(65vw, 115svh);
  --books-cover-h: min(calc(var(--books-view-h) * .78), 54vw);
  --books-cover-w: calc(var(--books-cover-h) * 2 / 3);
  --books-scale-min: .6;
  --books-apex-y: 50%;
  --books-caption-w: min(440px, calc(50vw - var(--books-cover-w) / 2 - 64px));
}
.books-view {
  width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 48px 44px; align-items: flex-end;
}
.books-rail { display: none; }
.book-slide { flex: 1 1 calc(33.333% - 30px); min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.book-slide-cover {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 400px; border-bottom: 2px solid var(--border-strong);
}
.book-slide > .book-slide-cover > img {
  max-height: 360px; width: auto; height: auto;
  filter: drop-shadow(0 18px 30px rgba(27,31,59,.22));
}
.book-slide-cap { display: flex; flex-direction: column; gap: 8px; }
.book-slide-cap h3 { font-size: 1.2rem; margin: 0; line-height: 1.25; }
.book-slide-meta { font-size: .82rem; color: var(--muted); margin: 0; }
.book-slide-more { margin: 0; font-size: .95rem; color: var(--muted); }
.books--photos .book-slide-cover { min-height: 0; aspect-ratio: 4 / 5; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--ivory-deep); }
.books--photos .book-slide > .book-slide-cover > img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 25%; filter: none; }
.books .section-head { margin-bottom: 0; }
.bg-navy .photo figcaption { color: var(--on-dark); }
.bg-navy .photo figcaption strong { color: #fff; }
.bg-navy .photo:hover figcaption strong { color: var(--accent-on-dark); }
.bg-navy .photo-img { background: var(--navy-deep); }
.photo-img.photo-img--letter { aspect-ratio: 3 / 4; background: var(--ivory-deep); }
.photo-img.photo-img--letter img, .photo-img.photo-img--contain img { object-fit: contain; padding: 8px; }
.book-slide-cap .btn-group { gap: 10px; }
.bg-navy .book-card { border-color: rgba(255,255,255,.12); }

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes books-progress {
  0%, 6%    { --p: 0; }
  94%, 100% { --p: 1; }
}

@media (prefers-reduced-motion: no-preference) {
@supports (height: 1svh) and (translate: 0) {
  .js .books:not(.is-static) .books-stage { height: calc(var(--books-travel) + var(--books-view-h)); }
  .js .books:not(.is-static) .books-view {
    position: sticky; top: var(--books-top); height: var(--books-view-h);
    max-width: none; padding: 0; margin: 0; display: block; isolation: isolate;
    overflow: hidden; overflow: clip;
  }
  .js .books:not(.is-static) .books-rail {
    display: block; position: absolute; z-index: 0; left: 50%; translate: -50% 0;
    width: min(100% - 48px, var(--container) - 48px); height: 2px; background: var(--border-strong);
    top: calc(var(--books-apex-y) + var(--books-cover-h) / 2);
  }
  .js .books:not(.is-static) .book-slide {
    --d: max(calc(var(--pi) - var(--p)), calc(var(--p) - var(--pi)));
    --u: calc(var(--d) * var(--books-n1, 2));
    --a: calc(var(--books-angle) * var(--books-n1, 2) * (var(--pi) - var(--p)));
    --s: calc(1 - (1 - var(--books-scale-min)) * min(1, var(--u)));
    position: absolute; left: 50%; top: calc(var(--books-apex-y) + var(--books-r));
    width: var(--books-cover-w); height: var(--books-cover-h);
    translate: -50% -50%;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--books-r))) rotate(calc(-1 * var(--a))) scale(var(--s));
    opacity: clamp(0, calc(1.45 - var(--u)), 1);
    /* Generous clip while visible (the caption sits outside the box); collapses
       to nothing once the book has faded, so a hidden book cannot be clicked */
    clip-path: inset(clamp(-120%, calc((var(--u) - 1.35) * 500%), 50%) clamp(-400%, calc((var(--u) - 1.35) * 500%), 50%));
    display: block; gap: 0; will-change: transform, opacity;
  }
  .js .books:not(.is-static) .book-slide:nth-of-type(1) { --pi: 0;  z-index: 1; }
  .js .books:not(.is-static) .book-slide:nth-of-type(2) { --pi: .5; z-index: 2; }
  .js .books:not(.is-static) .book-slide:nth-of-type(3) { --pi: 1;  z-index: 3; }
  /* Six-slide variant (awards): --pi in fifths, neighbours only */
  .books--six { --books-n1: 5; --books-travel: 500svh; }
  .js .books--six:not(.is-static) .book-slide:nth-of-type(1) { --pi: 0;  z-index: 1; }
  .js .books--six:not(.is-static) .book-slide:nth-of-type(2) { --pi: .2; z-index: 2; }
  .js .books--six:not(.is-static) .book-slide:nth-of-type(3) { --pi: .4; z-index: 3; }
  .js .books--six:not(.is-static) .book-slide:nth-of-type(4) { --pi: .6; z-index: 4; }
  .js .books--six:not(.is-static) .book-slide:nth-of-type(5) { --pi: .8; z-index: 5; }
  .js .books--six:not(.is-static) .book-slide:nth-of-type(6) { --pi: 1;  z-index: 6; }
  /* Photo variant (awards): photographs fill a rounded 4:5 frame instead of a cut-out cover */
  .js .books.books--photos:not(.is-static) .book-slide > .book-slide-cover > img {
    object-fit: cover; object-position: 50% 25%; border-radius: var(--radius);
    filter: none; box-shadow: var(--shadow-lg);
  }
  .js .books.books--photos:not(.is-static) .book-slide-cover { border-radius: var(--radius); overflow: hidden; background: var(--ivory-deep); }
  .js .books:not(.is-static) .book-slide-cover { width: 100%; height: 100%; min-height: 0; border: 0; display: block; }
  .js .books:not(.is-static) .book-slide > .book-slide-cover > img {
    width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: 50% 100%;
  }
  /* Caption orbits with its cover: left of it in landscape, below it in portrait */
  .js .books:not(.is-static) .book-slide-cap {
    position: absolute; top: 50%; right: calc(100% + 40px); translate: 0 -50%;
    width: var(--books-caption-w); text-align: left; gap: 10px;
    opacity: clamp(0, calc(1.3 - var(--u) * 2.6), 1);
    transform: translateY(clamp(-24px, calc((var(--pi) - var(--p)) * 96px), 24px));
    clip-path: inset(clamp(0%, calc((var(--u) - .5) * 1000%), 50%));
  }
  .js .books:not(.is-static) .book-slide-cap h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
  .js .books:not(.is-static) .book-slide-meta { font-size: .9rem; }
  /* Keyboard: a focused book takes the apex */
  .js .books:not(.is-static) .book-slide:focus-within { --p: var(--pi); }
  .js .books:not(.is-static) .books-view:has(.book-slide:focus-within) .book-slide:not(:focus-within) { opacity: 0; }

  @media (orientation: portrait) {
    .js .books:not(.is-static) .book-slide-cap {
      top: calc(100% + 18px); right: auto; left: 50%; translate: -50% 0;
      width: calc(100vw - 48px); max-width: 420px; text-align: center; align-items: center;
    }
    .js .books:not(.is-static) .book-slide-cap h3 { font-size: 1.2rem; line-height: 1.25; }
  }
  @media (max-width: 620px) {
    .js .books:not(.is-static) .book-slide-cap h3 { font-size: 1.15rem; }
    .js .books:not(.is-static) .book-slide-meta { font-size: .8rem; }
  }

  /* Rich captions (Books page): blurb and edition chips only where there is room */
  .js .books:not(.is-static) .book-slide-cap--rich { gap: 12px; }
  .js .books:not(.is-static) .book-slide-cap--rich .book-slide-more { font-size: .95rem; line-height: 1.55; color: var(--muted); margin: 0; }
  .js .books:not(.is-static) .book-slide-cap--rich .badge-row { gap: 8px; }
  .js .books:not(.is-static) .book-slide-cap--rich .btn-group { gap: 10px; margin-top: 4px; }
  @media (orientation: portrait), (max-height: 760px) {
    .js .books:not(.is-static) .book-slide-cap--rich .book-slide-more { display: none; }
  }
  @media (orientation: portrait) {
    .js .books:not(.is-static) .book-slide-cap--rich .btn-group { justify-content: center; }
    .js .books:not(.is-static) .book-slide-cap--rich .btn { width: auto; }
  }

  /* Driver A: CSS scroll-driven animation (Chrome 115+, Safari 26) */
  @supports (animation-timeline: view()) and (view-timeline-name: --x) {
    .js .books:not(.is-static) .books-stage {
      view-timeline: --books block;
      view-timeline-inset: var(--books-top) 0;
      animation: books-progress linear both;
      animation-timeline: --books;
      animation-range: contain 0% contain 100%;
    }
    .js .books:not(.is-static) .books-stage.is-js { animation: none; }
  }
}
}
@media (prefers-reduced-motion: no-preference) and (orientation: portrait) {
  .books {
    --books-cover-h: min(calc(var(--books-view-h) * .6), 120vw);
    --books-scale-min: .5;
    --books-apex-y: calc(50% - 72px);
  }
}

/* About: the portrait develops as it enters and drifts slower than the page;
   the quote's line draws and its text fills in as it is scrolled into view.
   Base styles are the resting state; the scroll-driven layer sits under .js. */
.about-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}
.about-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.about-quote { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .about-media {
      animation: about-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .js .about-frame {
      animation: about-open linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 35%;      /* starts once a third of the portrait is visible */
    }
    .js .about-frame img {
      animation: about-develop linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 50%;
    }
    .js .about-quote {
      border-left-color: transparent;
      color: transparent;
      background-image: linear-gradient(90deg, var(--navy) 50%, rgba(36,60,140,.18) 50%);
      background-size: 200% 100%;
      background-repeat: no-repeat;
      -webkit-background-clip: text; background-clip: text;
      animation: quote-fill linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 50%;
    }
    .js .about-quote::before {
      content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
      background: var(--accent); transform-origin: top;
      animation: quote-line linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}
@keyframes about-drift   { from { transform: translateY(34px); } to { transform: translateY(-34px); } }
@keyframes about-open    { from { clip-path: inset(8% 6% 8% 6% round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes about-develop { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes quote-fill    { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes quote-line    { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Edition picker (Books page): one row per title, languages inline */
.editions { display: flex; flex-direction: column; }
.edition-row {
  display: flex; align-items: center; gap: 22px; padding: 18px 14px; margin: 0 -14px;
  border-top: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.edition-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.edition-row:hover { background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--accent); }
.edition-row:hover .edition-info h3 { color: var(--accent-on-dark); }
.edition-info h3 { transition: color var(--dur) var(--ease); }
.edition-thumb { flex: 0 0 58px; height: 86px; display: flex; align-items: flex-end; justify-content: center; }
.edition-thumb img { max-height: 86px; width: auto; filter: drop-shadow(0 8px 14px rgba(9,13,36,.45)); transition: transform var(--dur-slow) var(--ease); }
.edition-row:hover .edition-thumb img { transform: translateY(-3px); }
.edition-info { flex: 1 1 220px; min-width: 0; }
.edition-info h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 4px; color: #fff; }
.edition-info p { margin: 0; font-size: .82rem; color: var(--on-dark-muted); }
.edition-langs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: 0 1 auto; }
.chip--dark { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.chip--dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 900px) {
  .edition-row { flex-wrap: wrap; row-gap: 12px; }
  .edition-langs { flex-basis: 100%; justify-content: flex-start; padding-left: 80px; }
}
@media (max-width: 620px) {
  .edition-langs { padding-left: 0; }
}

/* Compact ledger inside a text column (book pages) */
.claims-compact { margin-top: 22px; }
.claim.claim--compact { padding: 14px 0; }
.claim--compact h3 { font-size: 1.05rem; margin-bottom: 2px; }
.claim--compact p { font-size: .92rem; }

/* Argument ledger (About page): hairline rows beside a headline */
.claim { border-top: 1px solid var(--border-strong); padding: 24px 0; }
.claim:last-child { border-bottom: 1px solid var(--border-strong); }
.claim h3 { font-size: 1.25rem; margin-bottom: 8px; line-height: 1.25; }
.claim p { margin: 0; color: var(--muted); }

/* Milestones: photo, then a timeline track that fills left to right. Each
   step draws its own segment of the track so the line joins across the gaps
   whatever the column height. */
.steps { position: relative; }
.step { display: flex; flex-direction: column; gap: 22px; }
.step-media {
  overflow: hidden; border-radius: var(--radius); background: var(--ivory-deep);
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm);
}
.step-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.step-media--top img { object-position: 50% 15%; }
.step:hover .step-media img { transform: scale(1.03); }
.step-body { position: relative; padding-top: 26px; }
.step-body::before {                       /* track segment, grey base */
  content: ''; position: absolute; top: 0; left: 0; right: calc(-1 * var(--gap));
  height: 2px; background: var(--border-strong);
}
.step:last-child .step-body::before { right: 0; }
.step-seg {                                /* saffron fill (a real element: view timelines on pseudo-elements are unreliable) */
  position: absolute; top: 0; left: 0; right: calc(-1 * var(--gap));
  height: 2px; background: var(--accent); transform-origin: left;
  transform: scaleX(1);
}
.step:last-child .step-seg { right: 0; }
.step-body::after {                        /* hollow placeholder dot: the slot is expected */
  content: ''; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 2px var(--border-strong), 0 0 0 4px var(--white);
}
.step-dot {
  position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--white); z-index: 1;
  transform: scale(var(--dot, 1));
}
.step-age {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.01em;
  color: var(--navy); margin-bottom: 14px;
  font-variant-numeric: lining-nums;
}
.step-age small {
  display: block; font-family: var(--font-body); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.step .tl-date { margin-bottom: 10px; }
/* Dark variant (About page) */
.bg-navy .step-age { color: #fff; }
.bg-navy .step-age small { color: var(--on-dark-muted); }
.bg-navy .step-body::before { background: rgba(255,255,255,.18); }
.bg-navy .step-body::after { background: var(--navy-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 0 0 4px var(--navy-deep); }
.bg-navy .step-dot { box-shadow: 0 0 0 4px var(--navy-deep); }
.bg-navy .step p { color: var(--on-dark); }
.bg-navy .step h3 { color: #fff; }
.bg-navy .step-media { background: var(--navy-deep); box-shadow: var(--shadow-dark); }
/* Six-step variant: tighter type so six columns fit on one line */
.milestones--three { --steps-last: 2; }
.milestones--three .steps-stage { --steps-travel: 180svh; }
.milestones--six { --steps-last: 5; }
.milestones--six .steps-stage { --steps-travel: 350svh; }
@media (min-width: 1081px) {
  .milestones--six .step h3 { font-size: 1.02rem; }
  .milestones--six .step p { font-size: .86rem; }
  .milestones--six .step-age { font-size: clamp(2rem, 2.6vw, 2.6rem); }
  .milestones--six .tl-date { font-size: .7rem; }
}
.step h3 { font-size: 1.2rem; margin-bottom: 8px; line-height: 1.25; }
.step p { color: var(--muted); margin: 0; font-size: .96rem; }

/* Reveal fallback: fill and dots arrive with the step's own entrance */
.js .step:not(.is-in) .step-seg { transform: scaleX(0); }
.js .step:not(.is-in) .step-dot { transform: scale(0); }
.js .step .step-seg { transition: transform .9s var(--ease) .25s; }
.js .step .step-dot { transition: transform .45s var(--ease) .15s; }
.step:nth-child(2) .step-seg { transition-delay: .4s; } .step:nth-child(2) .step-dot { transition-delay: .3s; }
.step:nth-child(3) .step-seg { transition-delay: .55s; } .step:nth-child(3) .step-dot { transition-delay: .45s; }
.step:nth-child(4) .step-seg { transition-delay: .7s; } .step:nth-child(4) .step-dot { transition-delay: .6s; }

/* Scroll-driven version: the track fills left to right as the row scrolls in */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .steps { view-timeline: --steps block; }          /* one timeline for the whole row */
    .js .step .step-seg, .js .step:not(.is-in) .step-seg {
      transition: none; transform: none;
      animation: seg-fill linear both; animation-timeline: --steps; animation-range: entry 20% entry 55%;
    }
    .js .step .step-dot, .js .step:not(.is-in) .step-dot {
      transition: none; transform: none;
      animation: dot-pop linear both; animation-timeline: --steps; animation-range: entry 15% entry 40%;
    }
    .js .step:nth-child(2) .step-seg { animation-range: entry 40% entry 75%; }
    .js .step:nth-child(2) .step-dot        { animation-range: entry 35% entry 60%; }
    .js .step:nth-child(3) .step-seg { animation-range: entry 60% entry 95%; }
    .js .step:nth-child(3) .step-dot        { animation-range: entry 55% entry 80%; }
    .js .step:nth-child(4) .step-seg, .js .step:nth-child(5) .step-seg, .js .step:nth-child(6) .step-seg { animation-range: entry 80% entry 115%; }
    .js .step:nth-child(4) .step-dot, .js .step:nth-child(5) .step-dot, .js .step:nth-child(6) .step-dot { animation-range: entry 75% entry 100%; }
  }
}
@keyframes seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dot-pop  { from { transform: scale(0); } to { transform: scale(1); } }

/* Milestones as a pinned stage (desktop only, when the row fits the viewport):
   block 1 is visible when the row pins; each scroll step reveals the next block
   and extends the track to it. --p comes from the same drivers as the Books
   stage (CSS scroll-driven animation, or main.js block 10). Smaller screens keep
   the stacked layout, which already reveals one block at a time. */
.steps-stage { --stage-hold: .06; --steps-travel: 240svh; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1081px) and (min-height: 800px) {
  @supports (height: 1svh) and (translate: 0) {
    .js .milestones:not(.is-static) {
      --steps-top: calc(var(--header-h) + var(--admin-bar-h, 0px));
      --steps-view-h: calc(100svh - var(--steps-top));
      padding: 0;                                    /* the pinned view supplies the vertical room */
    }
    .js .milestones:not(.is-static) .steps-stage { height: calc(var(--steps-travel) + var(--steps-view-h)); }
    .js .milestones:not(.is-static) .steps-view {
      position: sticky; top: var(--steps-top); height: var(--steps-view-h);
      display: flex; align-items: center;
    }
    .js .milestones:not(.is-static) .steps-view > .container { width: 100%; }
    .js .milestones:not(.is-static) .step[data-reveal] {
      --v: clamp(0, calc((var(--p, 0) * var(--steps-last, 3) - var(--k)) * 2 + 1), 1);
      opacity: 1; transform: none; transition: none;        /* the track and placeholder dots stay visible */
    }
    .js .milestones:not(.is-static) .step .step-media,
    .js .milestones:not(.is-static) .step .step-body > :not(.step-seg):not(.step-dot) {
      opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 28px));
    }
    .js .milestones:not(.is-static) .step:nth-child(1) { --k: 0; }
    .js .milestones:not(.is-static) .step:nth-child(2) { --k: 1; }
    .js .milestones:not(.is-static) .step:nth-child(3) { --k: 2; }
    .js .milestones:not(.is-static) .step:nth-child(4) { --k: 3; }
    .js .milestones:not(.is-static) .step:nth-child(5) { --k: 4; }
    .js .milestones:not(.is-static) .step:nth-child(6) { --k: 5; }
    .js .milestones:not(.is-static) .step .step-seg,
    .js .milestones:not(.is-static) .step:not(.is-in) .step-seg { animation: none; transition: none; transform: scaleX(var(--v)); }
    .js .milestones:not(.is-static) .step .step-dot,
    .js .milestones:not(.is-static) .step:not(.is-in) .step-dot { animation: none; transition: none; transform: scale(var(--v)); }
    @supports (animation-timeline: view()) and (view-timeline-name: --x) {
      .js .milestones:not(.is-static) .steps-stage {
        view-timeline: --steps-stage block;
        view-timeline-inset: var(--steps-top) 0;
        animation: books-progress linear both;
        animation-timeline: --steps-stage;
        animation-range: contain 0% contain 100%;
      }
      .js .milestones:not(.is-static) .steps-stage.is-js { animation: none; }
    }
  }
}

@media (max-width: 1080px) {
  .step-body::before, .step-seg { right: 0; }    /* 2x2 and stacked: one segment per step */
}

/* Photo mosaic: one tall + 2x2, captions below the image */
.photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.photo-img {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; font: inherit;   /* usually a lightbox button */
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ivory-deep); aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.photo-img--tall { aspect-ratio: 3 / 4; }
.photo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.photo-img--top img { object-position: 50% 0; }
.photo-img::after {                        /* gentle shade from the bottom on hover */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(14,21,51,.32));
  opacity: 0; transition: opacity var(--dur-slow) var(--ease); pointer-events: none;
}
.photo:hover .photo-img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.photo:hover .photo-img img { transform: scale(1.05); }
.photo:hover .photo-img::after { opacity: 1; }
.photo figcaption { font-size: .9rem; line-height: 1.45; color: var(--muted); }
.photo figcaption strong { display: block; color: var(--ink); font-weight: 600; transition: color var(--dur) var(--ease); }
.photo:hover figcaption strong { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .photo-img { animation: photo-open linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    .js .photo-img img { animation: photo-develop linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .js .photo:hover .photo-img img { animation: none; }   /* hover zoom wins once the tile is on screen */
  }
}
@keyframes photo-open    { from { clip-path: inset(6% 6% 6% 6% round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes photo-develop { from { transform: scale(1.1); } to { transform: scale(1); } }
.photo--tall { height: 100%; }
.photo--tall .photo-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 420px; }

/* Showcase: three-up photo grid, captions always visible, paged by "Show more" */
.showcase { display: flex; flex-wrap: wrap; gap: 36px 24px; }
.showcase > .photo { flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); min-width: 0; }
.showcase > .photo[hidden] { display: none; }
.showcase .photo figcaption { font-size: .86rem; padding-right: 6px; }
.showcase .photo figcaption strong { font-size: .95rem; margin-bottom: 2px; }
.showcase .photo-img--contain img { padding: 10px; }
.showcase-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 30px; }
.showcase-more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px; text-align: center; }
.showcase-more .btn[hidden] { display: none; }
.showcase-progress { display: block; width: min(100%, 320px); height: 3px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.showcase-progress i { display: block; height: 100%; background: var(--accent); transition: width .5s var(--ease); }
.showcase-more.is-done .showcase-progress { opacity: .5; }
@media (max-width: 900px) {
  .showcase { gap: 30px 20px; }
  .showcase > .photo { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 620px) {
  .showcase > .photo { flex-basis: 100%; max-width: 100%; }
  .showcase-bar { flex-direction: column; gap: 6px; }
}

/* Testimonials: full review cards, three per row, paged like the showcase */
.reviews { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.reviews > .rv { flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); min-width: 0; }
.reviews > .rv[hidden] { display: none; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-book {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--navy); background: var(--ivory-deep); border-radius: var(--radius-pill); padding: 5px 11px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rv-book:hover { background: var(--navy); color: #fff; }
.rv .rv-title { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; color: var(--navy); margin-bottom: 10px; }
.rv .rv-body { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.rv .rv-body p { font-family: var(--font-body); font-size: .98rem; line-height: 1.6; color: var(--ink); margin: 0; }
.rv .rv-body p + p { margin-top: 10px; }
.rv.is-open .rv-body { display: block; -webkit-line-clamp: unset; }
.rv-more { align-self: flex-start; margin-top: -6px; padding: 0; border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 600; color: var(--accent-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rv-more:hover { color: var(--accent); }
.rv-more[hidden] { display: none; }
.rv .quote-by a { display: inline-block; margin-top: 4px; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rv .quote-by { display: flex; flex-direction: column; align-items: flex-start; }
.rv .quote-by a:hover { color: var(--accent); }
.stat--link { display: block; text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.stat--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat--link .stat-label small { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Full-review wall: the marquee carrying whole reviews. Taller window, full text, speed set per column by main.js block 15 */
.quote-marquee.quote-marquee--full { --qm-height: 860px; --gap: 24px; margin-top: 40px; }
@media (min-width: 901px) { .quote-marquee--full .rv .rv-body { display: block; -webkit-line-clamp: unset; } }
@media (max-width: 1080px) { .quote-marquee.quote-marquee--full { --qm-height: 800px; } }
/* On wide screens each column is a real scroll container: main.js block 15 drifts it
   by advancing scrollTop and wraps at the seam, so wheel, trackpad and touch all work. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .quote-marquee--full .qm-col { height: var(--qm-height); max-height: var(--qm-height); overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: auto; }
  .quote-marquee--full .qm-col::-webkit-scrollbar { display: none; }
  .quote-marquee--full .qm-track { animation: none; transform: none; will-change: auto; }
}
@media (max-width: 900px) { .reviews > .rv { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); } }
@media (max-width: 620px) { .reviews > .rv { flex-basis: 100%; max-width: 100%; } }

/* Contact: hairline ledger for the direct lines, and the ledger on the navy block */
.contact-side .claim p a { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.contact-side .claim p a:hover { color: var(--accent); border-color: var(--accent); }
.bg-navy .claim { border-color: rgba(255,255,255,.16); }
.bg-navy .claim h3 { color: #fff; }
.bg-navy .claim p { color: var(--on-dark-muted); }
.bg-navy .claim:hover h3 { color: var(--accent-on-dark); }
.map-wrap iframe { filter: saturate(.85); transition: filter var(--dur-slow) var(--ease); }
.map-wrap:hover iframe { filter: none; }

/* Welcome popup (homepage): shown once per visitor, main.js block 16. The host
   section takes no space; the dialog is fixed over the page. */
.popup-host { padding: 0; height: 0; overflow: visible; }
.popup {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(14,21,51,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.popup[hidden] { display: none; }
.popup.is-open { opacity: 1; }
.popup-card {
  position: relative; width: min(100%, 880px); display: flex; align-items: stretch; overflow: hidden; isolation: isolate;
  background: var(--ivory); border-radius: 22px; box-shadow: 0 40px 120px rgba(0,0,0,.45);
  transform: translateY(18px) scale(.97); transition: transform .5s var(--ease);
}
.popup.is-open .popup-card { transform: none; }
.popup-rays { z-index: 0; }
.popup-rays::before { --ray-size: 900px; opacity: .55; }
.popup-card > :not(.popup-rays):not(.popup-close) { position: relative; z-index: 1; }
.popup-screen {
  flex: 0 0 46%; display: block; position: relative; margin: 14px 0 14px 14px; border-radius: 14px; overflow: hidden;
  background: #0B1030; box-shadow: 0 24px 60px rgba(14,21,51,.35);
}
.popup-screen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.popup-screen:hover img { transform: scale(1.04); }
.popup-screen .play-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.popup-body { flex: 1 1 auto; padding: 44px 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.popup-body h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin: 0; }
.popup-body p { margin: 0; color: var(--muted); }
.popup-body .btn-group { margin-top: 10px; }
.popup-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(14,21,51,.08); color: var(--ink); font-size: 1.5rem; line-height: 1;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.popup-close:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }
@media (max-width: 760px) {
  .popup { padding: 16px; align-items: flex-end; }
  .popup-card { flex-direction: column; border-radius: 18px; }
  .popup-screen { flex: none; margin: 12px 12px 0; aspect-ratio: 16 / 9; }
  .popup-body { padding: 24px 22px 26px; }
  .popup-body h2 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .popup, .popup-card, .popup-screen img, .popup-close { transition: none; }
  .popup-rays::before { animation: none; }
}

/* Episode list on the dark block */
.ep-list { display: flex; flex-direction: column; margin: 26px 0 30px; }
.ep {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.ep:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
/* Active episode: the one shown in the frame */
.ep.is-active .ep-title { color: var(--accent-on-dark); }
.ep.is-active .ep-thumb { box-shadow: 0 0 0 2px var(--accent-on-dark); }

/* Episode grid cards that drive the player */
.video-card.is-active { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.video-card.is-active .video-ep { color: var(--accent); }
.bg-white .video-card .video-ep, .bg-ivory .video-card .video-ep { color: var(--accent); }
.filters.filters--left { justify-content: flex-start; }
.video-player .video-meta h2.video-title { font-size: 1.35rem; margin: 0 0 7px; }

/* Inline player: the featured card plays YouTube in place (main.js block 12).
   Without JS every piece is still a link to YouTube. */
.video-player { display: block; margin: 0; scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h, 0px) + 16px); }
.video-player .video-thumb { position: relative; }
.video-play { position: absolute; inset: 0; display: block; color: inherit; }
.video-play:focus-visible { outline-offset: -4px; }       /* the card clips overflow: draw the ring inside */
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.video-player.is-playing .video-play { display: none; }
.video-player.is-playing, .video-player.is-playing:hover { transform: none; box-shadow: var(--shadow-sm); }
.video-card .video-yt {
  display: inline-block; margin-top: 10px;
  font-size: .84rem; font-weight: 600; color: var(--on-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.video-card .video-yt:hover { color: var(--accent-on-dark); }
.ep-thumb { flex: 0 0 120px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--navy-deep); }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.ep:hover .ep-thumb img { transform: scale(1.04); }
.ep-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.3;
  color: #fff; margin: 0; transition: color var(--dur) var(--ease);
}
.ep:hover .ep-title { color: var(--accent-on-dark); }
.ep .video-ep { margin-bottom: 4px; }

/* Readers: three columns of reviews drifting upward (the page's one marquee:
   many voices, one motion). Each column is a looping track whose cards are
   duplicated once; hover or focus pauses it so a review can be read. Phones
   and reduced-motion users get the static stacked wall instead. */
.quote-marquee { --gap: 22px; margin-top: 44px; }
.qm-col { min-width: 0; }
.qm-group { display: flex; flex-direction: column; gap: var(--gap); }
.qw {
  margin: 0; padding: 26px 26px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.qw:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.qw blockquote { margin: 0; }
.qw p { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-size: 1.12rem; line-height: 1.45; color: var(--ink); }
.qw .quote-by { margin-top: auto; font-size: .88rem; }
.qw--lead { background: var(--accent-soft); border-color: rgba(240,108,24,.25); }
.qw--lead p { font-size: 1.42rem; line-height: 1.35; color: var(--navy); font-style: italic; font-weight: 500; }
.qw--lead::before { content: ''; display: block; width: 44px; height: 3px; background: var(--accent); border-radius: 2px; }
.qm-dup { display: none; }                         /* duplicates exist only for the loop */

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .quote-marquee {
    --qm-height: 640px;
    height: var(--qm-height); overflow: hidden; align-items: stretch;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }
  .qm-col { overflow: hidden; }
  .qm-track { display: flex; flex-direction: column; will-change: transform; animation: qm-up var(--qm-duration, 33s) linear infinite; }
  .qm-group { padding-bottom: var(--gap); }        /* so the two halves measure exactly the same */
  .qm-dup { display: flex; }
  .quote-marquee:hover .qm-track, .quote-marquee:focus-within .qm-track { animation-play-state: paused; }
}
@keyframes qm-up { to { transform: translateY(-50%); } }
@media (max-width: 1080px) { .quote-marquee { --qm-height: 600px; } }
@media (max-width: 900px) {
  .quote-marquee .quote-col:nth-child(2) { order: -1; }   /* lead review first when columns stack */
}
@media (max-width: 620px) { .qw { padding: 22px 20px; } .qw--lead p { font-size: 1.25rem; } }

/* Readers: one statement quote, two short echoes, no cards */
.pullquote--center { border-left: 0; padding: 0; text-align: center; max-width: 760px; margin: 0 auto; }
.quote-by { margin-top: 16px; font-size: .92rem; color: var(--muted); font-family: var(--font-body); font-style: normal; }
.quote-by strong { color: var(--ink); font-weight: 600; display: block; }
.quote-plain { border-top: 1px solid var(--border-strong); padding-top: 22px; text-align: left; }
.quote-plain p { font-size: 1.05rem; margin: 0; }

@media (max-width: 900px) {
  .book-slide { flex-basis: 100%; }
  .book-slide-cover { min-height: 0; padding-top: 24px; }
  .book-slide > .book-slide-cover > img { max-height: 260px; }
  .photo--tall .photo-img { aspect-ratio: 4 / 3; min-height: 0; }
}

/* --------------------------------------------------------------------------
   25. SCROLL REVEAL  →  Elementor Entrance Animations
   -------------------------------------------------------------------------- */
/* Scoped to .js so a JS failure never leaves the page blank:
   without JavaScript every element renders in its final state. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="zoom"]  { transform: scale(.955); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-delay="1"] { transition-delay: .09s; }
.js [data-delay="2"] { transition-delay: .18s; }
.js [data-delay="3"] { transition-delay: .27s; }
.js [data-delay="4"] { transition-delay: .36s; }
.js [data-delay="5"] { transition-delay: .45s; }
.js [data-delay="6"] { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: flex; }
  .col-1-4 { flex: 1 1 calc(50% - var(--gap) * 0.5 - 0.5px); }
  .col-1-5 { flex: 1 1 calc(33.333% - var(--gap) * 0.6667 - 0.5px); }
  .col-1-6 { flex: 1 1 calc(33.333% - var(--gap) * 0.6667 - 0.5px); }
  .gallery-item { flex: 1 1 calc(33.333% - var(--gap) * 0.6667 - 0.5px); }
  .quote-col { flex: 1 1 calc(50% - var(--gap) * 0.5 - 0.5px); }
}

@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .has-rays::before { --ray-size: 1000px; opacity: .62; }
  .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(24px); }
  .section { padding: 76px 0; }
  .section--lg { padding: 88px 0; }
  .section--sm { padding: 58px 0; }
  .hero { padding: 54px 0 70px; }
  .row { gap: 30px; }
  .col-1-2, .col-1-3, .col-2-3, .col-3-4, .col-2-5, .col-3-5 { flex: 1 1 100%; }
  .row--nowrap { flex-wrap: wrap; }
  .stat-strip .row > * + * { border-left: 0; }
  .stat-strip { padding: 30px 14px; }
  .col-1-4 { flex: 1 1 calc(50% - var(--gap) * 0.5 - 0.5px); }
  .tl-media { flex: 1 1 100%; order: 3; }
  .quote-cols { display: flex; flex-direction: column; }
  .quote-col { flex: 1 1 100%; }
  .feature-media--framed::after { display: none; }
  .form-panel { padding: 28px 24px; }
  .cta-band { padding: 68px 0; }
}

@media (max-width: 620px) {
  .container { padding: 0 20px; }
  .has-rays::before { --ray-size: 760px; opacity: .5; }

  /* Mobile type scale: the desktop clamp floors are too heavy at 375px */
  h1 { font-size: 2.35rem; letter-spacing: -.01em; }
  h2 { font-size: 1.82rem; }
  h3 { font-size: 1.3rem; }
  .lede { font-size: 1.06rem; }
  .eyebrow { font-size: .68rem; letter-spacing: .11em; }
  .eyebrow::before { width: 22px; flex-basis: 22px; }
  .hero { padding: 34px 0 54px; }
  .page-hero { padding: 34px 0 46px; }
  .pullquote { padding-left: 18px; font-size: 1.16rem; }
  .stat-num { font-size: 2.65rem; }
  .section { padding: 62px 0; }
  .col-1-4, .col-1-5, .col-1-6 { flex: 1 1 100%; }
  .gallery-item { flex: 1 1 100%; min-width: 0; }
  .btn { width: 100%; }
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }
  .mobile-nav a { font-size: 1.4rem; }
  .tl-item { gap: 18px; }
  .tl-marker { flex: 0 0 66px; }
  .tl-age { width: 66px; height: 66px; flex: 0 0 66px; }
  .tl-age .n { font-size: 1.4rem; }
  .tl-age .t { font-size: .5rem; }
  .stat-strip .row { gap: 24px; }
  .book-cover img { max-height: 200px; }
  .quote::before { font-size: 4rem; right: 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .map-wrap iframe { height: 320px; }
  .to-top { right: 16px; bottom: 16px; }
  .press-strip { gap: 14px 26px; }
  .press-logo { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   26b. TOUCH SCREENS: tap room, a 12px floor for small labels, two columns on
   portrait tablets (audit of 2026-10-08)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* ≥40px of hit area on small links without moving the layout */
  .breadcrumb a, .link-arrow, .video-card .video-yt, .rv .quote-by a, .rv-more, .footer-bottom nav a {
    display: inline-block; padding: 9px 0; margin: -9px 0;
  }
  .footer-links a { display: inline-block; padding: 7px 0; margin: -4px 0; }
  /* links inside running text: vertical padding on an inline box widens the tap area without moving lines */
  .section p a, .acc-panel-inner a, .claim p a, .contact-value a { padding: 9px 0; }
  .rv-book { padding: 7px 12px; }
  .footer-links { gap: 12px; }
  .footer-bottom nav { gap: 10px 22px; }
}
@media (min-width: 621px) and (max-width: 900px) {
  /* rows made only of thirds or halves show two per row (video cards, stat cards, ledgers) */
  .row:not(:has(.col-2-3, .col-3-5, .col-2-5, .col-3-4)) > .col-1-3,
  .row:not(:has(.col-2-3, .col-3-5, .col-2-5, .col-3-4)) > .col-1-2 { flex: 1 1 calc(50% - 15px - .5px); }
  .quote-cols.quote-marquee { flex-direction: row; flex-wrap: wrap; }
  .quote-marquee .quote-col { flex: 1 1 calc(50% - var(--gap) * .5 - .5px); }
}
@media (max-width: 900px) {
  /* 12px floor for the small caps labels on phones and tablets */
  .eyebrow, .step-age small, .video-ep, .rv-book, .studio-rail-title, .contact-label { font-size: .76rem; }
  .site-footer .footer-heading { font-size: .8rem; }
  .lightbox-count { font-size: .8rem; }
}

/* --------------------------------------------------------------------------
   27. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .site-footer, .to-top, .mobile-nav, .burger, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}