/* ==========================================================================
   Yogashri "Yoshi" Pradhan — Personal Brand Site
   Design system + components
   Palette derived from the "Fueling Impact" book cover (ink / gold / amber)
   and the free-guide PDFs (deep navy / sky blue).
   ========================================================================== */

/* ---------- 1. Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --ink:        #0A0A0C;
  --ink-soft:   #16161A;
  --navy:       #0C2D5A;
  --navy-deep:  #071B36;
  --navy-mid:   #16477F;
  --sky:        #3E8EDE;
  --gold:       #F2C230;
  --gold-deep:  #DCA810;
  --amber:      #F58220;

  /* Neutrals */
  --white:      #FFFFFF;
  --cream:      #F7F5EF;
  --cream-2:    #EFEBE1;
  --line:       #E3DED2;
  --body:       #45474F;
  --muted:      #7A7D88;

  /* Type */
  --font-display: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* geometric sans for the nav pill + announcement bar */
  --font-nav:     'Figtree', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* signature script for the wordmark */
  --font-script:  'Yellowtail', 'Segoe Script', cursive;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --gutter: clamp(20px, 5vw, 56px);
  /* --nav-h must equal the nav's real rendered height: the hero and page
     headers pull themselves up by exactly this much to sit behind it. */
  --nav-h: 84px;
  --bar-h: 52px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .55s;

  /* Depth */
  --sh-sm: 0 2px 8px rgba(7,27,54,.06);
  --sh-md: 0 10px 30px rgba(7,27,54,.10);
  --sh-lg: 0 24px 60px rgba(7,27,54,.16);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.menu-open, html.search-open { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* long unbreakable strings (handles, URLs, ISBNs) wrap instead of
     pushing the layout wider than the screen */
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 2. Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy-deep);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.015em; }
h4 { font-size: 1.15rem; letter-spacing: -.01em; font-weight: 700; }

p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--navy-deep); font-weight: 650; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1rem;
  display: block;
}
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--onDark { color: var(--gold); }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; }

.u-center { text-align: center; }
.u-mx { margin-left: auto; margin-right: auto; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--cream { background: var(--cream); }
.section--cream2 { background: var(--cream-2); }
.section--ink { background: var(--ink); }
.section--navy { background: var(--navy-deep); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4,
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--ink p, .section--navy p { color: rgba(255,255,255,.76); }
.section--ink strong, .section--navy strong { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.u-center { margin-inline: auto; }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1rem 2.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  will-change: transform;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy-deep);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--white); transform: translateY(-3px); box-shadow: var(--sh-md); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(-1px); }

.btn--navy { --btn-bg: var(--navy-deep); --btn-fg: var(--white); }
.btn--navy::before { background: var(--gold); }
.btn--navy:hover { color: var(--ink); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-deep);
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--ghost::before { background: var(--navy-deep); }
.btn--ghost:hover { color: var(--white); }

.btn--ghostLight { --btn-bg: transparent; --btn-fg: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.btn--ghostLight::before { background: var(--white); }
.btn--ghostLight:hover { color: var(--ink); }

.btn--sm { padding: .72rem 1.5rem; font-size: .74rem; }

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

/* text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-deep);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease-out), color .3s var(--ease), gap .3s var(--ease);
}
.tlink:hover { gap: .8em; color: var(--gold-deep); }
.tlink .ar { transition: transform .4s var(--ease-out); }
.tlink:hover .ar { transform: translateX(3px); }

/* ---------- 5. Announcement bar ---------- */
.annbar {
  position: relative;
  z-index: 120;
  background: var(--gold);
  color: var(--ink);
  min-height: var(--bar-h);
  display: block;
  text-align: center;
  padding: 14px clamp(16px, 4vw, 28px);
}
.annbar a {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-nav);
  font-size: clamp(.8rem, 1.4vw, 1.06rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-wrap: balance;
  transition: opacity .25s var(--ease);
}
.annbar a:hover { opacity: .62; }

/* ---------- 6. Navigation (floating pill over the hero) ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* fixed height, not padding-driven — keeps --nav-h exact and stops the
     nav resizing (and jolting the page) when it becomes stuck */
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck {
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
}

.nav__inner {
  width: 100%; max-width: 1560px; margin-inline: auto;
  padding-inline: clamp(18px, 3.4vw, 46px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* Wordmark — script given name + letterspaced surname, sitting on the dark hero */
.logo {
  display: inline-flex; align-items: center; gap: 11px;
  flex-shrink: 0; color: var(--white);
}
.logo__script {
  position: relative;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.1vw, 2.05rem);
  line-height: .82;
  letter-spacing: 0;
  padding: .12em .1em 0 .04em;
}
/* the signature swash sweeping out from under the script */
.logo__swash {
  position: absolute; left: -13%; bottom: -.40em;
  width: 262%; height: auto;
  overflow: visible; pointer-events: none;
}
.logo__swash path {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: swashDraw 1.15s var(--ease-out) .35s forwards;
}
@keyframes swashDraw { to { stroke-dashoffset: 0; } }
.logo:hover .logo__swash path { animation: swashDraw .8s var(--ease-out) forwards; }

.logo__last {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: clamp(.8rem, 1.05vw, .95rem);
  letter-spacing: .215em;
  text-transform: uppercase;
  padding-top: .32em;
  white-space: nowrap;
}

/* The white bar — rounded rectangle, not a full pill */
.menu {
  display: flex; align-items: center; gap: 0;
  background: var(--white);
  border-radius: 16px;
  padding: 6px 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.14);
}
.menu__item { position: relative; }

/* Invisible bridge across the gap between the link and its dropdown, so the
   cursor never leaves the hovered item on the way down. Inert until hovered,
   so it can't swallow clicks on the hero underneath. */
.menu__item::after {
  content: '';
  position: absolute;
  top: 100%; left: -60px; right: -60px;
  height: 26px;   /* measured gap is 20px — 6px slack */
  pointer-events: none;
}
.menu__item:hover::after,
.menu__item:focus-within::after { pointer-events: auto; }
.menu__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-nav);
  font-size: clamp(.87rem, 1vw, .97rem);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.4;
  color: var(--ink);
  border-radius: 11px;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.menu__link .chev { transition: transform .35s var(--ease); opacity: .7; margin-top: 1px; }
.menu__item:hover > .menu__link { background: var(--cream); color: var(--gold-deep); }
.menu__item:hover .chev { transform: rotate(180deg); opacity: 1; }
.menu__link.is-active { color: var(--gold-deep); }

/* search button lives inside the bar */
.menu__search {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: var(--ink);
  margin-left: 3px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.menu__search:hover { background: var(--cream); color: var(--gold-deep); transform: scale(1.07); }

/* Dropdown */
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .38s var(--ease-out), visibility .3s;
  /* grace period before closing, so a brief slip off the item forgives */
  transition-delay: .16s;
}
.menu__item:hover .drop,
.menu__item:focus-within .drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.drop::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 12px; height: 12px; background: var(--white);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 2px;
}
.drop__link {
  position: relative; display: block;
  padding: 10px 14px; border-radius: 10px;
  font-size: .89rem; font-weight: 500; color: var(--navy-deep);
  transition: background .22s var(--ease), color .22s var(--ease), padding-left .28s var(--ease);
}
.drop__link small { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; margin-top: 1px; }
.drop__link:hover { background: var(--cream); color: var(--gold-deep); padding-left: 20px; }
.drop__link:hover small { color: var(--body); }
.drop__sep { height: 1px; background: var(--line); margin: 8px 12px; }

.nav__right { display: flex; align-items: center; gap: 10px; }

/* Hamburger — rounded-rectangle button, matching the nav bar */
.burger {
  display: none; width: 44px; height: 44px; border-radius: 13px;
  position: relative; background: var(--white);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.burger span {
  position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px;
  background: var(--navy-deep);
  transition: transform .4s var(--ease-out), opacity .25s var(--ease), width .3s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; width: 14px; }
.burger span:nth-child(3) { top: 26px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--white);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 46px) 40px);
  transition: clip-path .7s var(--ease-out);
  visibility: hidden;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 46px) 40px); visibility: visible; }

.drawer__list { border-top: 1px solid var(--line); }
.drawer__row { border-bottom: 1px solid var(--line); }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 4px;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: var(--navy-deep); letter-spacing: -.02em;
  opacity: 0; transform: translateY(16px);
  transition: color .25s var(--ease);
}
.drawer.is-open .drawer__link { animation: drawerIn .55s var(--ease-out) forwards; }
.drawer__row:nth-child(1) .drawer__link { animation-delay: .12s; }
.drawer__row:nth-child(2) .drawer__link { animation-delay: .18s; }
.drawer__row:nth-child(3) .drawer__link { animation-delay: .24s; }
.drawer__row:nth-child(4) .drawer__link { animation-delay: .30s; }
.drawer__row:nth-child(5) .drawer__link { animation-delay: .36s; }
.drawer__row:nth-child(6) .drawer__link { animation-delay: .42s; }
.drawer__row:nth-child(7) .drawer__link { animation-delay: .48s; }
@keyframes drawerIn { to { opacity: 1; transform: translateY(0); } }
.drawer__link:hover { color: var(--gold-deep); }
.drawer__link .chev { transition: transform .35s var(--ease); }
.drawer__link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.drawer__sub.is-open { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__sub a { display: block; padding: 11px 4px 11px 18px; font-size: .98rem; color: var(--body); border-left: 2px solid var(--line); margin-left: 4px; }
.drawer__sub a:hover { color: var(--gold-deep); border-color: var(--gold); }
.drawer__foot { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }

/* Search overlay */
.search {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(7,27,54,.97);
  display: grid; place-items: start center;
  padding: clamp(80px, 16vh, 180px) var(--gutter) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.search.is-open { opacity: 1; visibility: visible; }
.search__box { width: 100%; max-width: 720px; transform: translateY(24px); transition: transform .55s var(--ease-out); }
.search.is-open .search__box { transform: translateY(0); }
.search__field { position: relative; border-bottom: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; gap: 14px; padding-bottom: 14px; }
.search__field svg { color: var(--gold); flex-shrink: 0; }
.search__input {
  flex: 1; background: none; border: 0; outline: none;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3.6vw, 2.4rem); font-weight: 700;
  color: var(--white); letter-spacing: -.02em;
}
.search__input::placeholder { color: rgba(255,255,255,.35); }
.search__hint { color: rgba(255,255,255,.5); font-size: .82rem; margin-top: 18px; }
.search__results { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.search__res {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  color: var(--white); transition: background .22s var(--ease), padding-left .28s var(--ease);
}
.search__res:hover { background: rgba(255,255,255,.08); padding-left: 22px; }
.search__res b { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.search__res span { font-size: .82rem; color: rgba(255,255,255,.55); }
.search__close { position: absolute; top: 26px; right: 26px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--white); transition: background .25s var(--ease), transform .35s var(--ease); }
.search__close:hover { background: rgba(255,255,255,.12); transform: rotate(90deg); }

/* ---------- 7. Hero — full-bleed photo, quote on the right ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  min-height: calc(100svh - var(--bar-h));
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  display: flex; align-items: center;
}

/* the photograph */
.hero__media {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(64%, 1120px);
  z-index: 0;
  animation: heroZoom 2.4s var(--ease-out) both;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 40%;
}
@keyframes heroZoom { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }

/* gradient veils that melt the photo into the black right-hand side */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(94deg,
      rgba(10,10,12,.62) 0%,
      rgba(10,10,12,.20) 14%,
      rgba(10,10,12,.24) 30%,
      rgba(10,10,12,.72) 46%,
      rgba(10,10,12,.97) 58%,
      var(--ink) 66%),
    linear-gradient(to top, rgba(10,10,12,.85) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(10,10,12,.7) 0%, transparent 24%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1560px; margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) clamp(18px, 3.4vw, 46px);
  display: grid; grid-template-columns: 54% 46%;
  align-items: center;
}
.hero__slot { grid-column: 2; display: flex; flex-direction: column; align-items: center; }

/* rotating credential quote */
.hero__stage { position: relative; width: 100%; min-height: 230px; }
.hq {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 20px;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .7s var(--ease), transform .8s var(--ease-out);
  pointer-events: none;
}
.hq.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hq p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.9vw, 2.5rem);
  line-height: 1.24;
  letter-spacing: -.028em;
  color: var(--white);
  max-width: 17ch;
  margin: 0;
  text-wrap: balance;
}
.hq cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(.7rem, 1.05vw, .82rem);
  font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}

.quotes__nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 34px;
}
.qarrow {
  /* 44px minimum touch target; the icon inside stays small and low-key */
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.32);
  transition: color .3s var(--ease), background .3s var(--ease), transform .25s var(--ease);
}
.qarrow:hover { color: var(--gold); background: rgba(255,255,255,.08); }
.qarrow:active { transform: scale(.9); }

.quotes__dots { display: flex; gap: 9px; justify-content: center; }
.qdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.28);
  transition: background .3s var(--ease), width .4s var(--ease-out);
}
.qdot.is-active { background: var(--gold); width: 26px; border-radius: 999px; }

/* screen-reader-only h1 (the reference hero carries no headline) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes heroUp { to { opacity: 1; transform: translateY(0); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,44px) scale(1.09); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 9. Cards ---------- */
/* Grid/flex children default to min-width:auto, which refuses to shrink below
   their longest word and blows the track past the viewport. Opt them out. */
.grid > *, .topicgrid > *, .stats > *, .foot__top > *,
.about__inner > *, .bookfeat__inner > *, .book__inner > *,
.cform__grid > *, .btn-row > *, .f2f__row > * { min-width: 0; }

.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Guide card */
.gcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.gcard::after {
  content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.gcard:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); border-color: transparent; }
.gcard:hover::after { transform: scaleX(1); }
.gcard__num {
  font-family: var(--font-display); font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sky);
  margin-bottom: 14px;
}
.gcard h3 { font-size: 1.16rem; margin-bottom: 10px; line-height: 1.28; }
.gcard p { font-size: .92rem; color: var(--body); margin-bottom: 20px; }
.gcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gcard__meta { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.gcard__dl {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream); color: var(--navy-deep);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
}
.gcard:hover .gcard__dl { background: var(--gold); transform: translateY(2px); }

/* Big inline search field */
.bigsearch {
  position: relative;
  max-width: 880px;
  margin: 0 auto clamp(44px, 6vw, 72px);
}
.bigsearch input {
  width: 100%;
  padding: 21px 70px 21px 26px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy-deep);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.bigsearch input::placeholder { color: var(--muted); }
.bigsearch input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(242,194,48,.22);
}
.bigsearch__go {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center; color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.bigsearch__go:hover { background: var(--cream-2); color: var(--gold-deep); }

/* Topic card grid */
.topicgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 18px); }

.tcard {
  background: var(--cream);
  border: 0;
  border-radius: 16px;
  padding: 32px 16px 28px;
  text-align: center;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), background .35s var(--ease);
}
.tcard__ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center; margin: 0 auto 16px;
  transition: transform .5s var(--ease-out), background .35s var(--ease);
}
.tcard span {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink);
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1.3;
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--sh-md); background: var(--cream-2); }
.tcard:hover .tcard__ico { transform: rotate(-10deg) scale(1.1); }

@media (max-width: 1080px) { .topicgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .topicgrid { grid-template-columns: repeat(2, 1fr); } }

/* Video / episode card */
.vcard { display: block; transition: transform .4s var(--ease-out); }
.vcard:hover { transform: translateY(-6px); }
.vcard__thumb {
  position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
  background: linear-gradient(140deg, var(--navy-deep), var(--navy-mid) 55%, var(--sky));
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
  transition: box-shadow .4s var(--ease);
}
.vcard:hover .vcard__thumb { box-shadow: var(--sh-lg); }
.vcard__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(245,130,32,.35), transparent 60%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.vcard:hover .vcard__thumb::after { opacity: 1; }
.vcard__play {
  position: relative; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--navy-deep);
  display: grid; place-items: center;
  transition: transform .45s var(--ease-out), background .3s var(--ease);
}
.vcard:hover .vcard__play { transform: scale(1.14); background: var(--gold); }
.vcard__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-display); font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(10,10,12,.66); color: var(--gold);
  padding: 5px 10px; border-radius: 6px; backdrop-filter: blur(4px);
}
.vcard h4 { margin-top: 14px; font-size: 1rem; line-height: 1.32; transition: color .3s var(--ease); }
.vcard:hover h4 { color: var(--gold-deep); }
.vcard__meta { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 6px; }

/* Service card */
.scard {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 30px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.scard::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(242,194,48,.09), transparent 55%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.scard:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.scard:hover::before { opacity: 1; }
.scard > * { position: relative; z-index: 1; }
.scard__ico {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--navy-deep); color: var(--gold);
  display: grid; place-items: center; margin-bottom: 20px;
  transition: transform .5s var(--ease-out), background .35s var(--ease);
}
.scard:hover .scard__ico { transform: rotate(-8deg) scale(1.08); background: var(--gold); color: var(--navy-deep); }
.scard h3 { font-size: 1.28rem; margin-bottom: 10px; }
.scard p { font-size: .95rem; margin-bottom: 18px; }
.scard ul { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.scard li { position: relative; padding-left: 24px; font-size: .89rem; }
.scard li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 12px; height: 2px; background: var(--gold); border-radius: 2px;
}

/* ---------- 10. Book section ---------- */
.book { position: relative; overflow: hidden; }
.book__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }

.book__visual { position: relative; perspective: 1400px; justify-self: center; width: min(360px, 80vw); }
.book__cover {
  position: relative;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.42), 0 6px 18px rgba(0,0,0,.28);
  transform: rotateY(-16deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-out), box-shadow .8s var(--ease);
  will-change: transform;
}
.book__visual:hover .book__cover { transform: rotateY(-4deg) rotateX(1deg) translateY(-10px); box-shadow: 0 44px 92px rgba(0,0,0,.5); }
/* spine + page edge */
.book__cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.16) 45%, rgba(0,0,0,.3));
  z-index: 3;
}
.book__cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.26) 0%, transparent 34%, transparent 66%, rgba(255,255,255,.1) 100%);
  z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity .7s var(--ease);
}
.book__visual:hover .book__cover::after { opacity: 1; }
.book__shadow {
  position: absolute; left: 8%; right: 8%; bottom: -26px; height: 34px;
  background: rgba(0,0,0,.4); filter: blur(24px); border-radius: 50%;
  transition: transform .8s var(--ease-out), opacity .8s var(--ease);
}
.book__visual:hover .book__shadow { transform: scaleX(.86) translateY(6px); opacity: .7; }

.book__badge {
  position: absolute; z-index: 6; top: -18px; right: -18px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: .68rem;
  line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--sh-lg);
  animation: bob 5s ease-in-out infinite;
}

.book__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 22px 0 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.book__meta div { display: flex; flex-direction: column; gap: 2px; }
.book__meta dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; font-family: var(--font-display); }
.book__meta dd { font-size: .92rem; color: rgba(255,255,255,.86); }

/* Field-to-Feed — editorial contents-page list, no cards */
.f2f { margin: 30px 0 34px; }
.f2f__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2vw, 26px);
  align-items: baseline;
  padding: 20px 2px 20px 0;
  border-top: 1px solid var(--line);
  transition: padding-left .45s var(--ease-out);
}
.f2f__row:last-child { border-bottom: 1px solid var(--line); }
/* gold rule that wipes in across the row on hover */
.f2f__row::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--gold-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.f2f__row:hover { padding-left: 12px; }
.f2f__row:hover::before { transform: scaleX(1); }

.f2f__n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--gold);
  transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}
/* outlined numerals where supported, solid gold everywhere else */
@supports (-webkit-text-stroke: 1px red) {
  .f2f__n { color: transparent; -webkit-text-stroke: 1.6px var(--gold-deep); }
  .f2f__row:hover .f2f__n { color: var(--gold); }
}

.f2f__row b {
  display: block;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-deep);
  margin-bottom: 7px;
}
.f2f__row p { font-size: .95rem; line-height: 1.6; margin: 0; color: var(--body); }

/* "Who it's for" list — dark surface, book page */
.fitlist__row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  transition: background .35s var(--ease), transform .35s var(--ease-out), border-color .35s var(--ease);
}
.fitlist__row:hover { background: rgba(242,194,48,.1); border-color: rgba(242,194,48,.32); transform: translateX(6px); }
.fitlist__n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
}
.fitlist__row p { font-size: .94rem; margin: 0; }

/* ---------- 10b. Featured book block (light, cover + seals) ---------- */
.bookfeat { background: var(--cream); overflow: hidden; }
.bookfeat__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.bookfeat__visual {
  position: relative;
  justify-self: center;
  width: min(420px, 84vw);
}

/* the author photo carries the block */
.bookfeat__photo {
  width: 100%;
  border-radius: 20px;
  box-shadow:
    22px 28px 62px rgba(7,27,54,.22),
    6px 8px 20px rgba(7,27,54,.12);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease);
}
.bookfeat__visual:hover .bookfeat__photo {
  transform: translateY(-9px);
  box-shadow: 28px 40px 80px rgba(7,27,54,.28), 8px 12px 26px rgba(7,27,54,.15);
}

/* the jacket, tucked into the lower-left corner so the cover art stays legible */
.bookfeat__inset {
  position: absolute; z-index: 4;
  left: -26px; bottom: -26px;
  width: 37%;
  border-radius: 2px 7px 7px 2px;
  box-shadow: 0 20px 44px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.26);
  transform: rotate(-5deg);
  transition: transform .6s var(--ease-out);
}
.bookfeat__visual:hover .bookfeat__inset { transform: rotate(-2.5deg) translateY(-7px); }

.bookfeat__cover {
  width: 100%;
  border-radius: 3px 9px 9px 3px;
  box-shadow:
    26px 32px 64px rgba(7,27,54,.22),
    8px 10px 24px rgba(7,27,54,.13);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease);
}
.bookfeat__visual:hover .bookfeat__cover {
  transform: translateY(-10px) rotate(-.6deg);
  box-shadow: 34px 44px 82px rgba(7,27,54,.28), 10px 14px 30px rgba(7,27,54,.16);
}

/* award / credential seals overlapping the cover edge */
.seal {
  position: absolute; z-index: 3;
  display: grid; place-items: center; text-align: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(7,27,54,.22);
  transition: transform .45s var(--ease-out);
}
.seal::after {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%; border: 1px solid currentColor; opacity: .38;
}
.seal span { display: block; padding: 0 10px; }
.seal em { display: block; font-style: normal; font-size: 1.5em; letter-spacing: 0; }
.bookfeat__visual:hover .seal { transform: scale(1.06); }

/* positioned to hang off the cover's right edge, over the artwork —
   clear of the title block that runs across the top-left of the jacket */
.seal--a {
  width: 106px; height: 106px; top: 21%; right: -50px;
  background: var(--gold); color: var(--ink);
  font-size: .56rem;
  animation: bob 5.5s ease-in-out infinite;
}
.seal--b {
  width: 96px; height: 96px; top: 45%; right: -60px;
  background: var(--white); color: var(--navy-deep);
  font-size: .5rem;
  animation: bob 5.5s ease-in-out .9s infinite;
}
.seal--c {
  width: 100px; height: 100px; top: 67%; right: -46px;
  background: var(--navy-deep); color: var(--gold);
  font-size: .5rem;
  animation: bob 5.5s ease-in-out 1.8s infinite;
}

/* light-surface variants of the shared book bits */
.bookfeat .book__meta { border-top-color: var(--line); }
.bookfeat .book__meta dt { color: var(--gold-deep); }
.bookfeat .book__meta dd { color: var(--body); }

@media (max-width: 940px) {
  .bookfeat__inner { grid-template-columns: 1fr; }
  .bookfeat__visual { order: -1; width: min(320px, 70vw); }
  .seal--a { width: 84px; height: 84px; right: -22px; font-size: .48rem; }
  .seal--b { width: 78px; height: 78px; right: -30px; font-size: .44rem; }
  .seal--c { width: 80px; height: 80px; right: -18px; font-size: .44rem; }
}
@media (max-width: 520px) {
  .seal--b { display: none; }
}

/* ---------- 11. Newsletter ---------- */
.nl {
  position: relative; z-index: 2;
  background: var(--gold);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  box-shadow: var(--sh-lg);
}
.nl h2 { color: var(--ink); margin-bottom: .6rem; }
.nl p { color: rgba(10,10,12,.72); max-width: 46ch; margin-inline: auto; }
.nl__form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.nl__form input {
  flex: 1 1 220px; max-width: 300px;
  padding: 15px 20px; border-radius: 999px;
  border: 2px solid rgba(10,10,12,.14);
  background: var(--white);
  font-family: var(--font-body); font-size: .95rem; color: var(--navy-deep);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.nl__form input::placeholder { color: var(--muted); }
.nl__form input:focus { outline: none; border-color: var(--navy-deep); box-shadow: 0 0 0 4px rgba(7,27,54,.12); transform: translateY(-2px); }
.nl__form button { flex: 0 0 auto; }
.nl__fine { font-size: .76rem; color: rgba(10,10,12,.6); margin-top: 16px; }
.nl__ok { display: none; font-family: var(--font-display); font-weight: 700; color: var(--navy-deep); margin-top: 18px; }
.nl.is-done .nl__ok { display: block; animation: heroUp .5s var(--ease-out) forwards; }
.nl.is-done .nl__form { display: none; }

/* ---------- 12. About / photo strip ---------- */
.about__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 76px); align-items: center; }
/* ratio variants — as classes, never inline, so the mobile collapse can win */
.about__inner--textFirst { grid-template-columns: 1.2fr .8fr; }
.about__inner--textWide  { grid-template-columns: 1.15fr .85fr; align-items: start; }
.about__inner--even      { grid-template-columns: 1.1fr .9fr; }
.about__photo { position: relative; justify-self: center; width: min(340px, 76vw); }
.about__photo img { border-radius: 50%; position: relative; z-index: 2; }
/* rectangular variant, for full-length photos that a circle would crop badly */
.about__photo--rect { width: min(370px, 80vw); }
.about__photo--rect img { border-radius: 20px; box-shadow: 18px 24px 54px rgba(7,27,54,.2), 5px 7px 18px rgba(7,27,54,.1); }
.about__photo--rect .about__blob { inset: -6%; border-radius: 26px; }
.about__blob {
  position: absolute; inset: -8%; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), var(--amber));
  opacity: .18; filter: blur(30px);
  animation: bob 8s ease-in-out infinite;
}
.sig {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; color: var(--navy-deep);
  letter-spacing: -.03em; margin-top: 22px;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.sig small { font-family: var(--font-body); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Carousel (arrows) */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: 0 0 clamp(230px, 26vw, 300px); scroll-snap-align: start; }
.carousel__nav { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.cbtn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  color: var(--navy-deep);
  display: grid; place-items: center;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.cbtn:hover { background: var(--navy-deep); color: var(--gold); border-color: var(--navy-deep); transform: scale(1.08); }
.cbtn:disabled { opacity: .32; cursor: not-allowed; transform: none; background: var(--white); color: var(--navy-deep); }

/* ---------- 13. Timeline ---------- */
.tl { position: relative; padding-left: 34px; }
.tl::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--sky), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.4s var(--ease-out);
}
.tl.is-in::before { transform: scaleY(1); }
.tl__item { position: relative; padding-bottom: 38px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {
  content: ''; position: absolute; left: -30px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px var(--cream);
  transition: transform .4s var(--ease-out), background .3s var(--ease);
}
.tl__item:hover::before { transform: scale(1.35); background: var(--gold); }
.tl__when {
  font-family: var(--font-display); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 5px;
}
.tl__item h4 { font-size: 1.12rem; margin-bottom: 3px; }
.tl__where { font-size: .88rem; color: var(--gold-deep); font-weight: 600; margin-bottom: 8px; }
.tl__item p { font-size: .93rem; }

/* ---------- 14. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); }
.stat { text-align: center; position: relative; }
.stat__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--gold); line-height: 1; letter-spacing: -.04em;
  display: block; margin-bottom: 8px;
}
.stat__l { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 600; }
.section--cream .stat__n { color: var(--navy-deep); }
.section--cream .stat__l { color: var(--muted); }

/* Award pills */
.awards { display: flex; flex-wrap: wrap; gap: 12px; }
.award {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: 14px;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.award:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--gold); }
.award svg { color: var(--gold-deep); flex-shrink: 0; }
.award b { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--navy-deep); }
.award span { font-size: .78rem; color: var(--muted); }

/* ---------- 14b. Recognition wall (awards + credentials) ---------- */
.awall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }

.acard {
  position: relative;
  padding: 26px 24px 24px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease-out);
}
.acard::after {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.acard:hover {
  background: rgba(242,194,48,.075);
  border-color: rgba(242,194,48,.34);
  transform: translateY(-6px);
}
.acard:hover::after { transform: scaleX(1); }

.acard__yr {
  display: block; margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw, 2.15rem); line-height: .85; letter-spacing: -.045em;
  color: var(--gold);
  transition: color .4s var(--ease);
}
@supports (-webkit-text-stroke: 1px red) {
  .acard__yr { color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
  .acard:hover .acard__yr { color: var(--gold); }
}
.acard__yr svg { display: block; color: var(--gold); }

.acard h3 { color: var(--white); font-size: 1.06rem; line-height: 1.28; margin-bottom: 9px; }
.acard__by {
  font-family: var(--font-nav); font-size: .68rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
}
.acard__note { font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.52); margin-top: 9px; }

/* credential pills */
.certs { display: flex; flex-wrap: wrap; gap: 10px; }
.cert {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.9);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cert:hover { background: rgba(242,194,48,.12); border-color: rgba(242,194,48,.4); transform: translateY(-2px); }
.cert svg { color: var(--gold); flex-shrink: 0; }
.cert b { font-weight: 650; color: var(--white); }
.cert span { color: rgba(255,255,255,.6); }

.rule--faint { height: 1px; background: rgba(255,255,255,.12); margin-block: clamp(38px, 5vw, 60px); }

@media (max-width: 940px) { .awall { grid-template-columns: repeat(2, 1fr); } }

/* On phones the award cards become compact rows — year beside the award name,
   supporting note dropped. Six stacked cards was ~1100px otherwise. */
@media (max-width: 700px) {
  .awall { grid-template-columns: 1fr; gap: 8px; }
  .acard {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 15px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 13px;
  }
  .acard__yr  { grid-area: 1 / 1 / 3 / 2; margin: 0; font-size: 1.5rem; align-self: center; }
  .acard h3   { grid-area: 1 / 2 / 2 / 3; font-size: .95rem; margin-bottom: 4px; }
  .acard__by  { grid-area: 2 / 2 / 3 / 3; font-size: .6rem; letter-spacing: .12em; }
  .acard__note { display: none; }
  .acard__yr svg { width: 23px; height: 23px; }
  /* pills carry just the credential on a phone; the institution/year is detail */
  .cert { padding: 9px 14px; font-size: .8rem; }
  .cert span { display: none; }
  .rule--faint { margin-block: 24px; }
  /* the explanatory lead is desktop nicety, not needed above a labelled list */
  #recognition .section-head .lead { display: none; }
}

/* Logo strip */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 54px); }
.logos span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.85rem, 1.5vw, 1.05rem); letter-spacing: .02em;
  color: var(--navy-deep); opacity: .42;
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.logos span:hover { opacity: 1; transform: translateY(-3px); color: var(--gold-deep); }
.section--ink .logos span, .section--navy .logos span { color: var(--white); opacity: .5; }
.section--ink .logos span:hover, .section--navy .logos span:hover { opacity: 1; color: var(--gold); }

/* ---------- 15. Accordion (FAQ / Q&A) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 4px; text-align: left;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 700;
  color: var(--navy-deep); letter-spacing: -.015em;
  transition: color .25s var(--ease);
}
.acc__q:hover { color: var(--gold-deep); }
.acc__ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream); display: grid; place-items: center;
  transition: background .3s var(--ease), transform .4s var(--ease-out);
}
.acc__q[aria-expanded="true"] .acc__ico { background: var(--gold); transform: rotate(180deg); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.acc__a.is-open { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 4px 24px; font-size: .96rem; }

/* ---------- 15b. Contact form + info sidebar ---------- */
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy-deep);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font-body); font-size: .96rem; color: var(--navy-deep);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2345474F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(242,194,48,.22);
  transform: translateY(-1px);
}

.cform__ok { display: none; margin-top: 18px; font-family: var(--font-display); font-weight: 700; color: var(--navy-deep); }
.cform.is-done .cform__ok { display: block; animation: heroUp .5s var(--ease-out) forwards; }
.cform.is-done .cform__grid, .cform.is-done .field, .cform.is-done .btn-row { display: none; }

/* spam honeypot — off-screen rather than display:none, which some bots skip */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* inline submit error */
.form-err {
  margin-top: 14px; padding: 11px 15px;
  border-radius: 10px;
  background: rgba(209,67,67,.1);
  border: 1px solid rgba(209,67,67,.35);
  color: #9B2C2C;
  font-size: .88rem; font-weight: 500;
}
.nl .form-err { background: rgba(120,20,20,.14); border-color: rgba(120,20,20,.3); color: #6B1A1A; }
button[type="submit"]:disabled { opacity: .65; cursor: progress; }

.infobox {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 26px;
}
.infobox--dark { background: var(--navy-deep); border-color: var(--navy-deep); }
.infobox h4 { margin-bottom: 18px; }
.infobox--dark h4 { color: var(--gold); }

.infolist { display: flex; flex-direction: column; gap: 6px; }
.infolist a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  color: var(--navy-deep);
  transition: background .25s var(--ease), transform .3s var(--ease);
}
.infolist a:hover { background: var(--white); transform: translateX(5px); }
.infolist svg { color: var(--gold-deep); flex-shrink: 0; }
.infolist b { display: block; font-family: var(--font-display); font-size: .95rem; }
.infolist small { display: block; font-size: .78rem; color: var(--muted); }

@media (max-width: 700px) { .cform__grid { grid-template-columns: 1fr; } }

/* ---------- 16. Page header (inner pages) ---------- */
.phead {
  position: relative; overflow: hidden;
  background: var(--navy-deep); color: var(--white);
  /* pull up under the transparent floating nav */
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(60px, 9vw, 116px);
}
.phead::before {
  content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: rgba(245,130,32,.2); filter: blur(90px); right: -140px; top: -200px;
  animation: float1 18s ease-in-out infinite;
}
.phead__inner { position: relative; z-index: 2; }
.phead h1 { color: var(--white); max-width: 18ch; }
.phead p { color: rgba(255,255,255,.72); max-width: 58ch; margin-top: 1.1rem; font-size: clamp(1rem, 1.4vw, 1.14rem); }

.crumb { display: flex; align-items: center; gap: 10px; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.55); margin-bottom: 20px; }
.crumb a:hover { color: var(--gold); }
.crumb span { opacity: .5; }

/* ---------- 17. Footer ---------- */
.foot { background: var(--ink); color: rgba(255,255,255,.62); padding-top: clamp(56px, 7vw, 90px); }
.foot__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(28px, 4vw, 54px); padding-bottom: 52px; }
.foot__brand .logo { color: var(--white); }
.foot__brand p { font-size: .92rem; margin-top: 18px; max-width: 34ch; color: rgba(255,255,255,.55); }
.foot h5 {
  font-family: var(--font-display); font-size: .74rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.foot ul { display: flex; flex-direction: column; gap: 11px; }
.foot li a {
  font-size: .9rem; color: rgba(255,255,255,.62);
  display: inline-block;
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.foot li a:hover { color: var(--gold); transform: translateX(4px); }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.soc {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center; color: rgba(255,255,255,.72);
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease), border-color .3s var(--ease);
}
.soc:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-4px); }

.foot__bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  font-size: .8rem;
}
.foot__bar nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__bar a:hover { color: var(--gold); }

/* ---------- 18. Floating badge ---------- */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
  box-shadow: var(--sh-lg);
  opacity: 0; transform: scale(.4);
  transition: opacity .5s var(--ease), transform .55s var(--ease-out), background .3s var(--ease);
}
.fab.is-in { opacity: 1; transform: scale(1); }
.fab:hover { transform: scale(1.09) rotate(-6deg); background: var(--white); }
.fab::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--gold); opacity: .5;
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.95); opacity: .6; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 19. Scroll reveal ----------
   Gated behind .js, which an inline script in <head> sets. If scripting is
   disabled or main.js fails to load, none of this applies and the page renders
   fully visible instead of blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .9s var(--ease-out);
}
.js [data-reveal="left"]  { transform: translateX(-36px); }
.js [data-reveal="right"] { transform: translateX(36px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-stagger] > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .8s var(--ease-out);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

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

/* ---------- 20. Responsive ---------- */
@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  :root { --nav-h: 84px; }
  .menu { display: none; }
  .burger { display: block; }
  .hero__inner { grid-template-columns: 1fr; align-items: end; }
  .hero__slot { grid-column: 1; justify-content: flex-end; }
  .hero { min-height: calc(100svh - var(--bar-h)); align-items: flex-end; }
  .hero__media { width: 100%; }
  .hero__media img { object-position: 50% 18%; }
  .hero__veil {
    background:
      linear-gradient(to top, var(--ink) 0%, rgba(10,10,12,.96) 34%, rgba(10,10,12,.62) 52%, rgba(10,10,12,.25) 74%, rgba(10,10,12,.5) 100%);
  }
  .hero__stage { min-height: 200px; }
  .hq p { max-width: 20ch; }
}

@media (max-width: 940px) {
  /* columns are stacked here, so a sideways reveal is both pointless and a
     source of horizontal overflow while the element waits off-screen.
     Must carry .js to outrank the gated base rule above. */
  .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(30px); }

  .book__inner, .about__inner { grid-template-columns: 1fr; }
  .book__visual, .about__photo { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }

  /* --- vertical compression: the page is ~14 screens on a phone otherwise --- */
  .section { padding-block: 46px; }
  .section--tight { padding-block: 32px; }
  .section-head { margin-bottom: 24px; }

  /* footer: 4 stacked columns is a screen and a half on its own */
  .foot__top { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding-bottom: 34px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot ul { gap: 9px; }

  /* guide cards: trim padding and clamp the blurb so 8 cards aren't 8 screens */
  .gcard { padding: 20px 18px 18px; border-radius: 14px; }
  .gcard h3 { font-size: 1.05rem; }
  .gcard__num { margin-bottom: 9px; }
  .gcard p { margin-bottom: 14px; }

  /* Home-page guide cards collapse into a compact index: number + title + the
     download button. Nothing is removed from the DOM — the blurbs simply aren't
     what you need on a phone, and 8 full cards ran to eight screens.
     Scoped to .grid--guides so the About page's education cards keep their copy. */
  .grid--guides { gap: 10px; }
  .grid--guides .gcard {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 15px 16px;
    border-radius: 13px;
  }
  .grid--guides .gcard__num  { grid-area: 1 / 1 / 2 / 2; margin: 0 0 3px; font-size: .6rem; }
  .grid--guides .gcard h3    { grid-area: 2 / 1 / 3 / 2; font-size: .97rem; margin: 0; line-height: 1.32; }
  .grid--guides .gcard p     { display: none; }
  .grid--guides .gcard__foot { grid-area: 1 / 2 / 3 / 3; margin: 0; padding-left: 12px; }
  .grid--guides .gcard__meta { display: none; }
  .grid--guides .gcard__dl   { width: 36px; height: 36px; }
  .annbar { padding: 11px 18px; }
  .fab { width: 74px; height: 74px; font-size: .62rem; right: 14px; bottom: 14px; }
  .nl__form input { max-width: none; flex-basis: 100%; }
  .nl__form button { width: 100%; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
  .tl { padding-left: 26px; }
  .tl__item::before { left: -24px; }
}

@media (max-width: 460px) {
  .logo__last { display: none; }
  .logo__swash { width: 128%; }
}