/* CoachSmart Health brand stylesheet. Georgia serif throughout, squared corners,
   navy / mauve / mint / cream palette. Matches the live template pages. */
:root {
  --navy: #143964;
  --mauve: #a85f9e;
  --cta-mauve: #9a5390;
  --mint: #9dc9a0;
  --cream: #f8f1c3;
  --peach: #fbcdaf;
  --lavender: #e4d1f2;
  --shell: #fbf7ef;
  --ink: #172235;
  --muted: #536273;
  --line: rgba(20, 57, 100, 0.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Reserve the classic scrollbar's width from first paint. These pages hydrate from an
   empty body, so without this the vertical scrollbar appears only once content arrives
   and the whole full-width layout nudges left by its width, which reads as a jerk on
   load. Overlay-scrollbar browsers ignore it, which is also why headless checks never
   reproduced the jump. */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--shell);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.55;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 99999;
  background: #143964;
  color: #fbf7ef;
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #a85f9e; outline-offset: 2px; }
/* Consistent, visible keyboard focus everywhere (WCAG 2.4.7). */
:focus-visible { outline: 3px solid var(--cta-mauve); outline-offset: 2px; }
.product-half:focus-visible, .story-card:focus-visible { outline: 3px solid var(--cta-mauve); outline-offset: 3px; }
.dev-strip, .announcement {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dev-strip { background: var(--navy); color: #fff; }
.dev-strip a, .announcement a { font-weight: 700; }
.announcement { background: var(--cream); color: var(--navy); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 247, 239, 0.96);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  width: min(1440px, calc(100vw - 34px));
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand img { width: 142px; }
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.3vw, 22px);
  flex: 1;
  white-space: nowrap;
  font-size: clamp(12px, 0.85vw, 15px);
}
.main-nav a {
  text-decoration: none;
  padding: 12px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .main-nav a { transition: none; }
}
.main-nav .nav-active { border-color: var(--mauve); color: var(--navy); }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--navy);
  border-radius: 2px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--navy);
  font: inherit;
}
.button-primary { background: var(--cta-mauve); color: #fff; border-color: var(--cta-mauve); }
.button-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.button-cream { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.button-ghost { background: #fff; color: var(--navy); }
.header-cta { min-height: 42px; padding: 10px 16px; font-size: 13px; }
.text-link, .article-link, .text-button {
  color: var(--navy);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 8px 0;
}
.hero, .band, .page-hero, .trust-band, .marla-text, .final-cta, .statement-band, .store-band, .disclaimer-strip, .research-layout, .report-grid, .plain-facts {
  width: 100%;
}
.photo-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(360px, 1.14fr);
  background: linear-gradient(90deg, rgba(248, 241, 195, 0.96), rgba(251, 247, 239, 0.75));
}
.hero-copy {
  align-self: center;
  padding: clamp(54px, 8vw, 124px);
  min-width: 0;
}
.hero h1, .page-hero h1, .final-cta h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 22px;
  color: var(--navy);
  font-size: clamp(48px, 6vw, 94px);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.16;
  margin: 0 0 18px;
}
h3 { color: var(--navy); margin: 0 0 10px; font-size: 22px; }
p { margin: 0 0 18px; }
.lead-copy { font-size: clamp(18px, 1.8vw, 24px); color: var(--muted); max-width: 720px; overflow-wrap: anywhere; }
.eyebrow {
  margin: 0 0 14px;
  color: var(--mauve);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.hero-note { margin-top: 18px; color: var(--muted); }
.image-slot {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  border-radius: 2px;
  border: 1px solid rgba(20, 57, 100, 0.18);
  background:
    linear-gradient(135deg, rgba(20, 57, 100, 0.12), rgba(185, 113, 173, 0.16)),
    var(--cream);
  display: grid;
  align-content: end;
  padding: 20px;
  overflow: hidden;
}
.image-slot strong { color: var(--navy); font-size: 22px; }
.image-slot small { color: var(--muted); }
.img-id {
  position: absolute;
  left: 14px;
  top: 14px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
}
.hero-image { min-height: 680px; border: 0; border-left: 1px solid var(--line); }
.trust-band, .marla-text, .statement-band {
  padding: 42px 24px;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.trust-band p, .marla-text p, .statement-band p {
  max-width: 960px;
  margin: 0 auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.band { padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 72px); }
.band-white { background: #fff; }
.band-shell { background: var(--shell); }
.band-mint { background: var(--mint); }
.band-cream { background: var(--cream); }
.band-lavender { background: var(--lavender); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy h2, .band-navy h3, .band-navy strong { color: #fff; }
.band-navy .step-grid article {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.42);
}
.band-navy .step-grid p { color: #fff; }
.section-heading { max-width: 920px; margin: 0 auto 38px; }
.center { text-align: center; }
.center-row { justify-content: center; }
.invert .eyebrow { color: var(--cream); }
.reel-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.reel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 230px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.reel-card {
  min-height: 432px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  padding: 12px;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
  color: var(--ink);
  scroll-snap-align: start;
}
.reel-card.is-active {
  outline: 3px solid var(--mauve);
  background: linear-gradient(180deg, #fff, rgba(248, 241, 195, 0.6));
}
.reel-badge { font-size: 12px; color: var(--navy); font-weight: 800; }
.reel-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  min-height: 0;
  background: linear-gradient(160deg, var(--navy), var(--mauve));
  border-radius: 2px;
  display: block;
}
.play-dot {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.18);
}
.reel-card.is-active .play-dot { animation: pulse 1.2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.reel-card small, .reel-card em { color: var(--muted); font-size: 12px; font-style: normal; }
.icon-button {
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  border-radius: 2px;
  min-width: 58px;
  min-height: 46px;
  cursor: pointer;
  font-weight: 800;
}
.social-bridge {
  margin: 34px auto 0;
  max-width: 760px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 18px;
}
.choice-grid, .step-grid, .report-grid, .plain-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-grid article, .step-grid article, .report-grid article, .plain-facts div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px;
}
.split {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
}
.slot-square { aspect-ratio: 1 / 1; }
.slot-wide { aspect-ratio: 16 / 10; min-height: 320px; }
.slot-cover { aspect-ratio: 4 / 5; min-height: 320px; }
.slot-cover.large { min-height: 430px; }
.slot-mint { background: linear-gradient(135deg, rgba(157, 201, 160, 0.52), rgba(255, 255, 255, 0.45)); }
.resource-row {
  width: min(1120px, 100%);
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px;
}
.page-hero {
  padding: clamp(70px, 9vw, 132px) clamp(20px, 6vw, 92px);
  background: linear-gradient(120deg, #fff, var(--shell));
}
.page-hero.slim { text-align: center; }
.page-hero.slim p { max-width: 760px; margin-left: auto; margin-right: auto; }
.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.72fr);
  gap: 44px;
  align-items: center;
}
.plain-facts { padding: 34px clamp(20px, 5vw, 72px); background: #fff; }
.guide-list { width: min(920px, 100%); margin: 0 auto; border-top: 1px solid var(--line); }
.guide-stop, .timeline-stop {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.guide-stop > span, .timeline-stop span {
  color: var(--mauve);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prototype-note { width: min(920px, 100%); margin: 24px auto 0; color: var(--muted); }
form {
  display: grid;
  gap: 16px;
}
label { display: grid; gap: 7px; font-weight: 800; color: var(--navy); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
  min-height: 48px;
  padding: 12px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }
[aria-invalid="true"] { border-color: #a40000; }
.source-chip.is-on {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 12px;
  color: var(--navy);
}
.intake-hero {
  min-height: calc(100vh - 130px);
  padding: clamp(42px, 8vw, 96px);
  background: linear-gradient(120deg, var(--cream), #fff);
}
.intake-progress {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}
.intake-progress span {
  height: 5px;
  background: rgba(20, 57, 100, 0.18);
}
.intake-progress span.is-now, .intake-progress span.is-done { background: var(--mauve); }
.intake-step {
  border: 0;
  padding: 0;
  margin: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
  max-width: 960px;
}
.intake-step.is-active {
  visibility: visible;
  position: relative;
  pointer-events: auto;
  display: grid;
  gap: 24px;
}
.intake-step legend {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--navy);
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.06;
  margin-bottom: 26px;
}
.choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.choice-list label {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  min-height: 76px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 20px;
}
.choice-list label:has(input:checked) { outline: 3px solid var(--mauve); }
.text-choice { background: var(--navy) !important; color: #fff !important; }
.form-actions, .button-row, .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.what-next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 42px clamp(20px, 6vw, 92px);
}
.research-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px;
  padding: clamp(42px, 7vw, 92px);
  background: #fff;
}
.research-layout aside {
  position: sticky;
  top: 120px;
  align-self: start;
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.research-layout nav { display: grid; gap: 12px; }
.research-article {
  display: none;
  max-width: 860px;
}
.research-article.is-active { display: block; }
.research-article h3 {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.postcard-row {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  overflow: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.postcard {
  min-width: 180px;
  scroll-snap-align: start;
}
.postcard-flip {
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  padding: 0;
  display: grid;
  cursor: pointer;
  text-align: left;
}
.postcard-face, .postcard-back {
  grid-area: 1 / 1;
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
  transition: opacity 160ms ease;
}
.postcard-back {
  opacity: 0;
  visibility: hidden;
  background: var(--cream);
}
.postcard.is-flipped .postcard-face { opacity: 0; visibility: hidden; }
.postcard.is-flipped .postcard-back { opacity: 1; visibility: visible; }
.slot-story { min-height: 180px; }
.album-controls { width: min(1280px, 100%); margin: 0 auto 14px; display: flex; gap: 10px; justify-content: flex-end; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
}
.modal.is-closed {
  visibility: hidden;
  pointer-events: none;
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(20, 57, 100, 0.58); }
.modal-panel {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100vw - 32px));
  background: #fff;
  border-radius: 2px;
  padding: 34px;
}
.modal-close { float: right; border: 1px solid var(--line); border-radius: 2px; background: #fff; padding: 10px 12px; cursor: pointer; }
.calm-hero {
  min-height: 520px;
  display: grid;
  align-items: end;
  padding: clamp(64px, 8vw, 112px);
  background: linear-gradient(135deg, rgba(20, 57, 100, 0.72), rgba(168, 95, 158, 0.56)), var(--navy);
}
.calm-hero h1, .calm-hero .eyebrow { color: #fff; }
.timeline-list { width: min(980px, 100%); margin: 0 auto; }
.timeline-stop {
  grid-template-columns: minmax(180px, 0.35fr) 1fr;
  align-items: center;
}
.slot-timeline { min-height: 180px; }
.product-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.product-duo article {
  border: 1px solid var(--line);
  padding: 24px;
  background: #fff;
}
.slot-product { min-height: 260px; margin-bottom: 22px; }
.faq-band { display: grid; gap: 0; }
.faq-item {
  width: min(900px, 100%);
  margin: 0 auto;
  border-top: 1px solid rgba(20, 57, 100, 0.22);
}
.faq-item:last-child { border-bottom: 1px solid rgba(20, 57, 100, 0.22); }
.faq-item button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 22px 0;
  text-align: left;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  cursor: pointer;
}
.store-band {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: clamp(44px, 6vw, 76px);
  background: var(--navy);
  color: #fff;
}
.store-band h2 { color: #fff; }
.disclaimer-strip {
  padding: 18px;
  text-align: center;
  background: #fff;
  color: var(--muted);
}
.contact-form, .unlock-form {
  width: min(760px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px;
}
.meta-panel, .click-panel {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px;
}
.report-grid {
  padding: 34px clamp(20px, 6vw, 92px);
  background: var(--mint);
}
.report-grid span {
  display: block;
  color: var(--navy);
  font-size: 48px;
  font-family: Georgia, 'Times New Roman', serif;
}
.data-table {
  width: min(1180px, 100%);
  margin: 24px auto 0;
  border-collapse: collapse;
  background: #fff;
}
.data-table th, .data-table td {
  border: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.click-panel {
  width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.click-panel div {
  border: 1px solid var(--line);
  padding: 12px;
}
.click-panel strong { display: block; color: var(--navy); }
.final-cta {
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  text-align: center;
  color: #fff;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.final-cta .final-image {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
  filter: blur(2px);
  opacity: 0.38;
}
.final-cta > div {
  position: relative;
  z-index: 1;
  width: min(820px, calc(100% - 40px));
}
.final-cta h2 { color: #fff; }
.site-footer {
  background: var(--mint);
  color: var(--navy);
  padding: 54px clamp(20px, 5vw, 72px) 28px;
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(150px, 0.7fr));
  gap: 30px;
}
.site-footer img { width: 170px; margin-bottom: 14px; }
.site-footer nav { display: grid; gap: 9px; align-content: start; }
.site-footer a { text-decoration: none; }
.footer-legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(20, 57, 100, 0.25);
  padding-top: 18px;
  font-size: 13px;
}
@media (max-width: 980px) {
  .header-inner { min-height: 64px; padding-right: 58px; }
  .site-header .main-nav { display: none !important; }
  .site-header .header-cta { display: none !important; }
  .photo-hero, .split, .split-hero, .resource-row, .research-layout, .timeline-stop, .store-band, .site-footer {
    grid-template-columns: 1fr;
  }
  .hero-image { min-height: 420px; }
  .choice-grid, .step-grid, .report-grid, .plain-facts, .what-next, .product-duo {
    grid-template-columns: 1fr;
  }
  .research-layout aside { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 18px; }
  .postcard-row { grid-template-columns: repeat(6, minmax(210px, 1fr)); }
  .click-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dev-strip, .announcement, .social-bridge, .store-band { flex-direction: column; text-align: center; }
  .hero-copy, .page-hero, .intake-hero { padding: 42px 20px; }
  .hero h1, .page-hero h1 { font-size: 36px; line-height: 1.14; }
  .photo-hero .lead-copy { font-size: 18px; line-height: 1.55; }
  .trust-band, .marla-text, .statement-band { padding: 36px 20px; }
  .trust-band p, .marla-text p, .statement-band p { font-size: 24px; line-height: 1.24; }
  h2 { font-size: 34px; }
  .choice-list { grid-template-columns: 1fr; }
  .reel-shell { grid-template-columns: 1fr; }
  .reel-track { display: block; overflow: hidden; max-width: 100%; }
  .reel-card { width: min(100%, 260px); margin: 0 auto; }
  .reel-card:not(.is-active) { visibility: hidden; position: absolute; pointer-events: none; }
  .reel-arrow { width: 100%; }
  .slot-wide { min-height: 240px; aspect-ratio: auto; }
  .data-table { table-layout: fixed; font-size: 12px; }
  .data-table th, .data-table td { padding: 8px; }
  .site-footer { padding-bottom: 84px; }
}

/* ---- Mobile navigation: hamburger + slide-in drawer ----
   Elements are injected into <html> by a11y.js (React-safe). Hidden by
   default; only active at the mobile breakpoint. */
.mnav-toggle, .mnav-scrim, .mnav-drawer { display: none; }
@media (max-width: 980px) {
  /* The closed drawer is fixed at right: 0 and parked off screen with
     translateX(100%), so it sits up to 320px past the right edge. Desktop browsers
     ignore that, but mobile browsers grow the LAYOUT viewport to contain it: the page
     then renders narrower than the screen, you can pinch out to reveal dead space, and
     every fixed element pinned to the right (this toggle and the accessibility button)
     drifts out there with it. Clip at the root so the layout can never exceed the
     screen. `clip` rather than `hidden` on purpose: hidden would make this a scroll
     container and break the sticky header and the pinned Protocol section. */
  html { overflow-x: clip; }

  .mnav-toggle {
    position: fixed; top: 12px; right: 15px; z-index: 2147482000;
    display: grid; place-items: center;
    width: 46px; height: 46px; padding: 0;
    border: 1px solid rgba(20,57,100,0.2); border-radius: 4px;
    background: rgba(255,255,255,0.92); cursor: pointer;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(23,34,53,0.1);
  }
  .mnav-bars { display: grid; gap: 5px; width: 22px; }
  .mnav-bars i { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .mnav-open .mnav-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav-open .mnav-bars i:nth-child(2) { opacity: 0; }
  .mnav-open .mnav-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mnav-scrim {
    position: fixed; inset: 0; z-index: 2147482500; display: block;
    background: rgba(20,32,54,0.44); opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .mnav-open .mnav-scrim { opacity: 1; pointer-events: auto; }

  .mnav-drawer {
    position: fixed; top: 0; right: 0; z-index: 2147482600;
    display: flex; flex-direction: column;
    width: min(320px, 84vw); height: 100%;
    background: var(--cream, #fbf7ef); border-left: 1px solid var(--line, rgba(20,57,100,0.14));
    box-shadow: -18px 0 46px rgba(23,34,53,0.24);
    transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; font-family: Georgia, 'Times New Roman', serif;
  }
  .mnav-open .mnav-drawer { transform: translateX(0); }
  .mnav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid rgba(20,57,100,0.12);
  }
  .mnav-drawer-title {
    font: 600 12px/1 Georgia, 'Times New Roman', serif; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--mauve, #a85f9e);
  }
  .mnav-close { border: 0; background: none; cursor: pointer; color: var(--navy, #143964); font-size: 30px; line-height: 1; padding: 0 2px; }
  .mnav-links { display: flex; flex-direction: column; padding: 8px 0 4px; }
  .mnav-links a {
    display: block; padding: 15px 22px; text-decoration: none;
    color: var(--navy, #143964); font: 400 18px/1.2 Georgia, 'Times New Roman', serif;
    border-bottom: 1px solid rgba(20,57,100,0.07);
  }
  .mnav-links a:hover, .mnav-links a:focus-visible { background: rgba(20,57,100,0.05); }
  .mnav-links a.mnav-active { color: var(--mauve, #a85f9e); }
  .mnav-cta {
    margin: 18px 20px 92px; text-align: center; text-decoration: none;
    padding: 14px 20px; border-radius: 2px;
    background: var(--mauve, #a85f9e); color: #fff;
    font: 600 15px/1 Georgia, 'Times New Roman', serif;
  }
  .mnav-cta:hover, .mnav-cta:focus-visible { background: #96548c; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav-drawer, .mnav-scrim, .mnav-bars i { transition: none; }
}
body.a11y-nomotion .mnav-drawer, body.a11y-nomotion .mnav-scrim, body.a11y-nomotion .mnav-bars i { transition: none !important; }