/* =========================================================================
   Internal Benefit Advisors — design system
   Evolved from the existing brand: navy #1F2A58 retained as the primary,
   the alarm red #CC3B32 deepened into a considered oxblood accent drawn from
   the red in the IBA seal. Type pairs Public Sans (the typeface of the U.S.
   Web Design System, familiar to this audience) with Newsreader for display.
   ========================================================================= */

:root {
  /* Ink & ground ------------------------------------------------------- */
  --ink:        #141b33;
  --navy:       #1f2a58;
  --navy-600:   #2c3a6e;
  --navy-050:   #eef0f6;
  --paper:      #fbfaf6;
  --surface:    #ffffff;
  --muted:      #5a6480;
  --muted-soft: #8b93a8;
  --line:       #e4e0d6;
  --line-soft:  #efece4;

  /* Accent — a deep oxblood drawn from the red in the IBA seal ---------------------------- */
  --accent:       #8f2d2a;
  --accent-deep:  #74221f;
  --accent-tint:  #f8f1ef;
  --accent-line:  #dcc3bf;

  /* On-navy ------------------------------------------------------------ */
  --on-navy:      #f4f5f9;
  --on-navy-mute: #a8b1cb;

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

  --step--1: clamp(0.83rem, 0.81rem + 0.09vw, 0.88rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.11rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.33vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.57vw, 1.8rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.92vw, 2.3rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.43vw, 2.94rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.19vw, 3.75rem);

  /* Space -------------------------------------------------------------- */
  --gap-xs: 0.5rem;
  --gap-s:  0.875rem;
  --gap-m:  1.5rem;
  --gap-l:  2.5rem;
  --gap-xl: 4rem;
  --gap-2xl: 6rem;

  --measure: 68ch;
  --shell: 1200px;
  --shell-narrow: 780px;

  --radius: 3px;
  --shadow-card: 0 1px 2px rgba(20, 27, 51, 0.05), 0 12px 28px -18px rgba(20, 27, 51, 0.28);
  --shadow-lift: 0 2px 4px rgba(20, 27, 51, 0.06), 0 20px 44px -22px rgba(20, 27, 51, 0.34);

  /* Motion. Two easings do all the work: things arriving decelerate into
     place (--ease-out), things responding to a pointer use the gentler
     --ease-soft. Nothing eases *in* on entry — an element that accelerates
     away from the reader reads as sluggish. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-enter: 480ms;
  --enter-shift: 10px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0; text-wrap: pretty; }

a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Layout primitives ------------------------------------------------------ */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.shell--narrow { width: min(100% - 2.5rem, var(--shell-narrow)); margin-inline: auto; }
.stack > * + * { margin-top: var(--flow, var(--gap-m)); }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, var(--gap-2xl)); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy h2, .section--navy h3 { color: var(--on-navy); }
.section--paper { background: var(--surface); }
.section--tint { background: var(--accent-tint); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--gap-s);
}
.section--navy .eyebrow { color: var(--accent-line); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 58ch; }
.section--navy .lede { color: var(--on-navy-mute); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--gap-m); }
.prose h2 { margin-top: var(--gap-l); }
.prose h3 { margin-top: var(--gap-m); font-size: var(--step-1); }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 0.6rem; }
.prose li::marker { color: var(--accent); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.section--navy .btn--ghost { color: var(--on-navy); border-color: rgba(244,245,249,0.35); }
.section--navy .btn--ghost:hover { background: rgba(244,245,249,0.08); color: var(--on-navy); border-color: var(--on-navy); }

/* Inline, not inline-flex: a wrapping label must keep its arrow on the last
   word rather than dropping it onto a line of its own. */
.link-arrow {
  display: inline;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-deep);
}
.link-arrow::after { content: ' \2192'; white-space: nowrap; display: inline-block; transition: transform var(--dur-fast) var(--ease-soft); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(3px); }
.section--navy .link-arrow { color: var(--accent-line); }
.section--navy .link-arrow:hover { color: #fff; }

/* Header ----------------------------------------------------------------- */
.utility {
  background: var(--navy);
  color: var(--on-navy-mute);
  font-size: var(--step--1);
}
.utility__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-m); padding-block: 0.55rem; }
.utility a { color: var(--on-navy); text-decoration: none; }
.utility a:hover { color: #fff; text-decoration: underline; }
.utility__spacer { margin-left: auto; }
.utility__note { color: var(--on-navy-mute); }
@media (max-width: 760px) { .utility__note { display: none; } }

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 250, 246, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: var(--gap-m); padding-block: 0.9rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand__mark { width: 46px; height: 46px; flex: none; }
.brand__name { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
.brand__name span { display: block; font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent-deep); margin-top: 0.22rem; }

.nav { display: flex; align-items: center; gap: var(--gap-m); margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav__link:hover { background: var(--navy-050); }
.nav__link[aria-current="page"] { color: var(--accent-deep); }
.nav__caret { width: 9px; height: 9px; transition: transform var(--dur-base) var(--ease-soft); }
.nav__item--has-menu[data-open="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  min-width: 280px;
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  list-style: none;
  display: none;
}
.nav__item { position: relative; }
.nav__item--has-menu[data-open="true"] .nav__menu { display: block; }

/* Bridge the visual gap between the button and the open menu. Without this the
   0.4rem of margin is dead space — the pointer leaves the nav item on the way
   down and the menu closes just before it can be clicked. The pseudo-element
   belongs to the nav item, so crossing it never fires mouseleave. */
.nav__item--has-menu[data-open="true"]::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  /* As wide as the menu below it, not just the button, so a diagonal approach
     to the far side of the menu stays inside the nav item the whole way. */
  width: max(100%, 280px);
  height: 0.75rem;
}
.nav__menu a {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
}
.nav__menu a:hover { background: var(--navy-050); color: var(--navy); }

.masthead .btn { min-height: 46px; padding: 0.6rem 1.15rem; font-size: 0.93rem; }
.nav-toggle { display: none; }

@media (max-width: 1120px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    min-height: 46px;
    padding: 0.55rem 0.9rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .masthead__inner { position: relative; flex-wrap: wrap; }
  .masthead__inner > .btn { display: none; }
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    margin: 0;
    padding: var(--gap-m) 0 var(--gap-l);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    max-height: 76vh;
    overflow-y: auto;
  }
  .masthead[data-nav-open="true"] .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-inline: 1.25rem; }
  .nav__link { justify-content: space-between; width: 100%; padding: 0.9rem 0.25rem; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); }
  .nav__menu { position: static; display: none; min-width: 0; margin: 0; padding: 0.25rem 0 0.6rem 0.9rem; border: 0; box-shadow: none; background: none; }
  .nav__item--has-menu[data-open="true"] .nav__menu { display: block; }
  .nav .btn { display: flex; width: calc(100% - 2.5rem); margin: var(--gap-m) 1.25rem 0; }
}

/* Keep the brand and the Menu button on one row on a phone. */
@media (max-width: 560px) {
  .masthead__inner { gap: var(--gap-s); }
  .brand { gap: 0.55rem; min-width: 0; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 0.94rem; }
  .brand__name span { font-size: 0.55rem; letter-spacing: 0.14em; }
  .nav-toggle { flex: none; padding: 0.5rem 0.7rem; }
}
@media (max-width: 380px) {
  .brand__name { font-size: 0.86rem; }
  .brand__name span { display: none; }
}

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--navy); color: var(--on-navy); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 27, 51, 0.95) 0%, rgba(20, 27, 51, 0.84) 42%, rgba(20, 27, 51, 0.44) 78%, rgba(20, 27, 51, 0.52) 100%);
}
.hero__inner { padding-block: clamp(4rem, 2rem + 9vw, 8.5rem); }
.hero__copy { max-width: 40rem; }
.hero h1 { color: #fff; font-size: var(--step-5); }
.hero__sub { margin-top: var(--gap-m); font-size: var(--step-1); line-height: 1.5; color: #dfe3ee; max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-m); margin-top: var(--gap-l); }
.hero__secondary { display: inline; max-width: 30rem; color: #f0d9d5; font-weight: 600; text-decoration: none; }
.hero__secondary::after { content: ' \2192'; white-space: nowrap; }
.hero__secondary:hover { color: #fff; text-decoration: underline; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--gap-m);
  margin-top: var(--gap-xl);
  padding-top: var(--gap-m);
  border-top: 1px solid rgba(244, 245, 249, 0.22);
  font-size: var(--step--1);
  color: #c3cade;
  list-style: none;
  padding-left: 0;
  max-width: 54rem;
}
.trust-strip li { display: flex; align-items: center; gap: 0.5rem; }
.trust-strip li + li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-line); }

.hero__videobtn {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: rgba(20, 27, 51, 0.55);
  border: 1px solid rgba(244, 245, 249, 0.3);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.hero__videobtn:hover { background: rgba(20, 27, 51, 0.82); }
.hero__videobtn svg { width: 12px; height: 12px; }

/* Page header (interior pages) ------------------------------------------ */
.pagehead { background: var(--navy); color: var(--on-navy); padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem); }
.pagehead h1 { color: #fff; max-width: 22ch; }
.pagehead .lede { color: #cdd4e6; margin-top: var(--gap-m); }
.pagehead--image { position: relative; isolation: isolate; overflow: hidden; }
.pagehead--image .pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead--image .pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead--image::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(20,27,51,0.96) 0%, rgba(20,27,51,0.82) 50%, rgba(20,27,51,0.48) 100%);
}

.crumbs { font-size: var(--step--1); color: var(--on-navy-mute); margin-bottom: var(--gap-m); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: rgba(168,177,203,0.6); }
.crumbs a { color: var(--on-navy-mute); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* Cards ------------------------------------------------------------------ */
.grid { display: grid; gap: var(--gap-m); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding: var(--gap-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--accent-line); }
.card h3, .card__title { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: 0.97rem; }
.card__cta { margin-top: auto; padding-top: var(--gap-xs); }
.card__media { margin: calc(var(--gap-m) * -1) calc(var(--gap-m) * -1) 0; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card--plain { box-shadow: none; background: none; }
.card--plain:hover { transform: none; box-shadow: none; }

.numbered { counter-reset: step; }
.numbered .card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* Checklist -------------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-s); }
.checklist li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; align-items: start; }
.checklist svg { width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; color: var(--accent); flex: none; }
.section--navy .checklist svg { color: var(--accent-line); }

/* Split ------------------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.split--sticky { align-items: start; }
.split--sticky > :first-child { position: sticky; top: 6.5rem; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split--sticky > :first-child { position: static; } }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lift); aspect-ratio: 4 / 3; object-fit: cover; }

/* Testimonials ----------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin: 0;
  padding: var(--gap-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.42; color: var(--ink); }
.quote figcaption { font-size: var(--step--1); color: var(--muted); margin-top: auto; }
.quote cite { font-style: normal; font-weight: 600; color: var(--ink); }
.disclosure { font-size: var(--step--1); color: var(--muted-soft); line-height: 1.55; max-width: 74ch; }

/* FAQ -------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  min-height: 52px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-body); font-size: 1.5rem; color: var(--accent); font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding-bottom: 1.3rem; max-width: var(--measure); color: var(--muted); }
.faq details > div > * + * { margin-top: var(--gap-s); }

/* Fact strip ------------------------------------------------------------- */
.factbar { display: flex; flex-wrap: wrap; gap: var(--gap-m); margin: 0; padding: var(--gap-m); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius); }
.factbar > div { flex: 1 1 12rem; }
.factbar dt { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.factbar dd { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: var(--step-2); }

/* Callout ---------------------------------------------------------------- */
.callout {
  padding: var(--gap-m);
  background: var(--navy-050);
  border: 1px solid #d5dbea;
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--navy);
  line-height: 1.6;
}
.callout strong { display: block; margin-bottom: 0.35rem; }
.callout a { color: var(--navy); }

/* Placeholder marker — every unverified fact is visibly flagged ---------- */
.ph {
  background: #fff4d6;
  border-bottom: 1px dashed #c9a227;
  padding: 0 0.22em;
  font-weight: 600;
  color: #6f5410;
  font-style: normal;
}
.section--navy .ph, .hero .ph, .pagehead .ph { background: rgba(255, 244, 214, 0.16); color: #f6e6bd; border-bottom-color: #c9a227; }

/* Forms ------------------------------------------------------------------ */
.form { display: flex; flex-direction: column; gap: var(--gap-m); }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.92rem; font-weight: 600; }
.field input, .field select, .field textarea {
  min-height: 52px;
  padding: 0.8rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m); }
@media (max-width: 640px) { .field--row { grid-template-columns: minmax(0, 1fr); } }
.form__note { font-size: var(--step--1); color: var(--muted); }

/* Blog ------------------------------------------------------------------- */
.card__meta { font-size: var(--step--1); color: var(--muted-soft); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--accent-deep); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chips__label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-soft); margin-right: 0.35rem; }
.chips a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}
.chips a:hover { border-color: var(--accent); color: var(--accent-deep); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: var(--gap-l); }
.pager a, .pager__current, .pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
}
.pager a { color: var(--navy); border: 1px solid var(--line); background: var(--surface); }
.pager a:hover { border-color: var(--accent); color: var(--accent-deep); }
.pager__current { background: var(--navy); color: #fff; }
.pager__gap { color: var(--muted-soft); min-width: 1.5rem; padding: 0; }

/* Post ------------------------------------------------------------------- */
/* Extra bottom padding leaves room for the hero image to overlap the navy
   band without ever riding up over the headline. */
.post__head { background: var(--navy); color: var(--on-navy); padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(4rem, 3rem + 4vw, 6.5rem); }
.post__head h1 { color: #fff; font-size: var(--step-4); max-width: 26ch; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: var(--gap-m); font-size: var(--step--1); color: var(--on-navy-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.post__meta a { color: var(--accent-line); text-decoration: none; }
.post__meta a:hover { color: #fff; text-decoration: underline; }
.crumbs--light { margin-bottom: var(--gap-s); }

.post__hero { margin-top: clamp(-4rem, -3rem - 2vw, -2.5rem); }
.post__hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.post__body { padding-block: var(--gap-l) var(--gap-2xl); }

/* Post content comes from WordPress, so style by element rather than class. */
.prose--post { max-width: none; font-size: 1.06rem; line-height: 1.75; }
.prose--post > * + * { margin-top: var(--gap-m); }
.prose--post h2 { font-size: var(--step-2); margin-top: var(--gap-xl); }
.prose--post h3 { font-size: var(--step-1); margin-top: var(--gap-l); }
.prose--post h4 { font-size: 1.1rem; margin-top: var(--gap-m); }
.prose--post img { border-radius: var(--radius); margin-inline: auto; }
.prose--post figure { margin: var(--gap-l) 0; }
.prose--post figcaption { font-size: var(--step--1); color: var(--muted-soft); margin-top: var(--gap-xs); text-align: center; }
.prose--post ul, .prose--post ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.55rem; }
.prose--post li::marker { color: var(--accent); }
.prose--post blockquote {
  margin: var(--gap-l) 0;
  padding: 0.4rem 0 0.4rem var(--gap-m);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
}
.prose--post table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 0.95rem; }
.prose--post th, .prose--post td { padding: 0.6rem 0.8rem; border: 1px solid var(--line); text-align: left; }
.prose--post th { background: var(--navy-050); font-weight: 600; }
.prose--post iframe, .prose--post video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }
.prose--post hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-xl) 0; }

/* Inherited WordPress button blocks -------------------------------------- */
/* Every wp-block-group in the archive wraps a call-to-action button and
   nothing else (verified across all 792), so the group is styled as a CTA
   panel rather than left as a bare button floating in the body copy. The
   inline styles WordPress attached are stripped at build time — they would
   otherwise beat any rule here. */
.prose--post .wp-block-group {
  margin: var(--gap-xl) 0;
  padding: var(--gap-m);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  text-align: center;
}
.prose--post .wp-block-group__inner-container { display: block; }
.prose--post .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose--post .wp-block-button { max-width: 100%; margin: 0; }
/* WordPress width utilities assume a full-bleed canvas; inside the article
   column they only squash the button, so the button sizes to its label. */
.prose--post .wp-block-button__width-25,
.prose--post .wp-block-button__width-50,
.prose--post .wp-block-button__width-75,
.prose--post .wp-block-button__width-100 { width: auto; }
.prose--post .alignfull,
.prose--post .alignwide { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }

.currency-note {
  padding: var(--gap-s) var(--gap-m);
  margin-bottom: var(--gap-l);
  background: var(--navy-050);
  border-left: 3px solid var(--navy-600);
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--navy);
}

.authorbox {
  display: flex;
  gap: var(--gap-m);
  align-items: flex-start;
  margin-top: var(--gap-xl);
  padding-top: var(--gap-l);
  border-top: 1px solid var(--line);
}
.authorbox img { width: 56px; height: 56px; flex: none; border-radius: 50%; }
.authorbox__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.authorbox__role { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); margin-top: 0.15rem; }
.authorbox__bio { color: var(--muted); font-size: 0.96rem; margin: 0.5rem 0 0.6rem; }

.postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m); padding-block: var(--gap-xl); }
@media (max-width: 640px) { .postnav { grid-template-columns: minmax(0, 1fr); } }
.postnav a {
  display: block;
  padding: var(--gap-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.35;
}
.postnav a:hover { border-color: var(--accent-line); box-shadow: var(--shadow-card); }
.postnav a span { display: block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 0.4rem; }
.postnav--next { text-align: right; }

/* Embedded scheduler ----------------------------------------------------- */
/* The booking widget is a third-party iframe that cannot report its own height
   across origins, so the frame is sized generously and scrolls internally.
   Taller on narrow screens, where the calendar stacks. */
.scheduler {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.scheduler__frame {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}
@media (max-width: 900px) { .scheduler__frame { height: 900px; } }
@media (max-width: 560px) { .scheduler__frame { height: 1020px; } }

/* The contact form is a shorter widget than the calendar, but it carries two
   consent paragraphs that wrap hard on a phone — hence the generous floor. */
.scheduler__frame--form { height: 720px; }
@media (max-width: 900px) { .scheduler__frame--form { height: 780px; } }
@media (max-width: 560px) { .scheduler__frame--form { height: 900px; } }

/* Footer ----------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-navy-mute); padding-block: var(--gap-xl) var(--gap-m); font-size: 0.95rem; }
.footer a { color: var(--on-navy); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr; gap: var(--gap-l); }
@media (max-width: 1020px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }
.footer h2 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-line); margin-bottom: var(--gap-s); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer__intro { max-width: 32ch; line-height: 1.6; }
.footer__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--gap-s); color: #fff; text-decoration: none; }
.footer__brand svg { width: 40px; height: 40px; flex: none; }
.footer__brand span { font-family: var(--font-display); font-size: 1rem; color: #fff; }
.footer address { font-style: normal; line-height: 1.55; }
.footer address + address { margin-top: var(--gap-s); }
.footer address strong { color: var(--on-navy); display: block; font-weight: 600; }
.footer__bottom { margin-top: var(--gap-xl); padding-top: var(--gap-m); border-top: 1px solid rgba(244,245,249,0.14); display: flex; flex-direction: column; gap: var(--gap-s); font-size: 0.86rem; line-height: 1.6; }
.footer__disclaimer { max-width: 88ch; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }

/* Utility ---------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 200;
  padding: 0.75rem 1.1rem; background: var(--ink); color: #fff;
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; color: #fff; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Motion ------------------------------------------------------------------ */
/* Emil Kowalski's rules, applied with the restraint this audience deserves:
   entrances decelerate, distances stay around 10px, only transform and opacity
   are animated (both composited, neither triggers layout), and every entrance
   is one-way — nothing re-animates when it scrolls back into view.

   The hidden starting state lives behind .has-motion, which the inline script
   in <head> sets before first paint and only when the reader has not asked for
   reduced motion. So with JS off, or motion reduced, every element is simply
   visible: this can never hide content it then fails to reveal. */

.has-motion [data-enter] {
  opacity: 0;
  transform: translate3d(0, var(--enter-shift), 0);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
  transition-delay: var(--enter-delay, 0ms);
}
.has-motion [data-enter].is-in { opacity: 1; transform: none; }

/* The hero sits above the fold and its shift is larger, so it gets a little
   longer to travel — distance and duration move together. */
.has-motion .hero [data-enter] { --enter-shift: 14px; --dur-enter: 620ms; }

/* Dropdowns are toggled with display, which cannot transition, so the open
   state carries a keyframe instead. It scales from the top edge because that
   is where the menu is anchored — motion that ignores its origin reads wrong. */
@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.has-motion .nav__item--has-menu[data-open="true"] .nav__menu {
  transform-origin: top center;
  animation: nav-menu-in var(--dur-base) var(--ease-out);
}

/* A button that does not acknowledge the press feels broken on touch, where
   there is no hover state to fall back on. */
.btn:active { transform: translateY(1px); }

/* Cross-document view transitions: a short dissolve between pages, which makes
   a 512-page static site feel continuous. Chrome-only today and entirely
   progressive — browsers without it navigate exactly as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: var(--dur-base);
    animation-timing-function: var(--ease-out);
  }
}

/* Definition pairs — registration codes, office facts. Two columns where there
   is room, stacked where there is not, and a <dl> throughout so the label and
   its value stay associated for a screen reader. */
.factlist { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.factlist__row {
  display: grid;
  grid-template-columns: minmax(11rem, 30%) 1fr;
  gap: var(--gap-m);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.factlist dt { font-weight: 600; margin: 0; }
.factlist dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) {
  .factlist__row { grid-template-columns: 1fr; gap: 0.2rem; }
}