/* ==========================================================================
   Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Double-bezel shell
   Nothing important sits flat on the background. A shell wraps the content in
   a tinted tray with a hairline and small padding; the core inside gets its
   own ground and a top highlight. Inner radius is outer minus shell padding
   so the curves stay concentric — the detail that makes it read as machined
   rather than as two stacked divs.
   -------------------------------------------------------------------------- */

.shell {
  padding: 0.375rem;
  border-radius: var(--radius-xl);
  background: rgba(11, 43, 60, 0.035);
  box-shadow: inset 0 0 0 1px rgba(11, 43, 60, 0.06);
}
.shell__core {
  border-radius: var(--radius-inner);
  background: var(--white);
  box-shadow: var(--highlight-inset), var(--shadow-md);
  overflow: hidden;
}

/* On navy grounds the tray inverts. */
.section--ink .shell {
  background: rgba(250, 248, 243, 0.05);
  box-shadow: inset 0 0 0 1px var(--rule-ink);
}
.section--ink .shell__core {
  background: #12384C;
  box-shadow: var(--highlight-inset-ink), 0 18px 44px rgba(0, 0, 0, 0.24);
}

/* Flat panel for lighter-weight groupings. */
.panel {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--highlight-inset), var(--shadow-sm);
}
.panel--warm { background: var(--paper-warm); box-shadow: none; }

/* Heading and body for a panel on a light background. The visually similar
   .callout__* pair is hardcoded cream-on-navy for dark sections; reusing it
   here rendered near-invisible text. */
.panel__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.panel__body {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-muted);
}
.panel--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-chip: rgba(250, 248, 243, 0.16);

  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease),
              background-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.btn:hover { box-shadow: var(--shadow-lg); }
.btn:active { transform: scale(0.98); }

/* The trailing arrow is never naked next to the label — it lives in its own
   circular chip flush with the button's inner padding. On hover the chip
   drifts diagonally and grows slightly, so the button has internal tension
   rather than just changing colour. */
.btn__chip {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--btn-chip);
  transition: transform var(--duration-base) var(--ease-spring),
              background-color var(--duration-base) var(--ease);
}
.btn__chip svg { width: 0.875rem; height: 0.875rem; }
.btn:hover .btn__chip { transform: translate(2px, -2px) scale(1.06); }

/* Gold ground demands navy text. Cream on gold measures ~1.9:1 and is the
   single fastest way to make a gold palette look cheap. */
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  --btn-chip: rgba(11, 43, 60, 0.14);
}
.btn--accent:hover { --btn-bg: var(--accent-hover); }

.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-chip: rgba(11, 43, 60, 0.09);
}

/* Solid white. The outline variant over a photograph left its label almost
   invisible, so any secondary CTA sitting on the hero uses this instead. */
.btn--white {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-chip: rgba(11, 43, 60, 0.08);
  box-shadow: var(--shadow-md);
}
.btn--white:hover { --btn-bg: #FFFFFF; --btn-chip: rgba(11, 43, 60, 0.14); }
/* WhatsApp mark keeps its brand green against the white ground. */
.btn--white .btn__chip svg { color: var(--whatsapp); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-chip: rgba(11, 43, 60, 0.07);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn--outline:hover { --btn-bg: var(--white); }
.section--ink .btn--outline {
  --btn-fg: var(--paper);
  --btn-chip: rgba(250, 248, 243, 0.14);
  box-shadow: inset 0 0 0 1px var(--rule-ink);
}
.section--ink .btn--outline:hover { --btn-bg: rgba(250, 248, 243, 0.07); }

/* Text link with a sliding arrow, for tertiary actions. */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--tracking-wide);
}
.btn-text svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-base) var(--ease);
}
.btn-text:hover { color: var(--accent-ink); }
.btn-text:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Navigation — floating island
   Detached from the top edge, a glass pill rather than a bar glued to the
   viewport. backdrop-filter is safe here because the element is fixed.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  z-index: var(--z-nav);
  padding: var(--space-6) var(--gutter) 0;
  pointer-events: none;
}
.nav-island {
  pointer-events: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  background: rgba(250, 248, 243, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(11, 43, 60, 0.07), var(--shadow-md);
  transition: box-shadow var(--duration-slow) var(--ease),
              background-color var(--duration-slow) var(--ease);
}
/* Deepens once the page has scrolled, so it separates from content. */
.is-scrolled .nav-island {
  background: rgba(250, 248, 243, 0.94);
  box-shadow: inset 0 0 0 1px rgba(11, 43, 60, 0.1), var(--shadow-lg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
/* The asset is already cropped to the globe's bounding box and exported at 3x,
   so it only needs sizing — no mask, no transform. The previous version scaled a
   500x500 file to 227% inside a 40px circular window, which both clipped the
   globe and resampled it into a smudge. Height-driven with width:auto so the
   intrinsic aspect ratio is never distorted. */
.brand__pic { display: block; flex-shrink: 0; }
.brand__mark {
  display: block;
  height: 2.5rem;
  width: auto;
  /* base.css gives every img a cream background as a loading placeholder, which
     is right for photos and wrong for anything with transparency — it shows
     through and reads as a solid pale box behind the artwork. This is the
     specific bug the user reported twice. */
  background: none;
}
.brand__text {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  white-space: nowrap;
}
.section--ink .brand__text,
.site-footer .brand__text,
.nav-overlay .brand__text { color: var(--paper); }

/* Wordmark is dropped on the narrowest phones, where the nav pill would
   otherwise wrap. The mark alone still identifies the site. */
@media (max-width: 25rem) {
  .brand__text { display: none; }
}

.nav-links { display: none; }
@media (min-width: 60rem) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .nav-links a {
    position: relative;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-soft);
    padding-block: var(--space-2);
    transition: color var(--duration-fast) var(--ease);
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease);
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after,
  .nav-links .current-menu-item > a::after { transform: scaleX(1); }
  .nav-links .current-menu-item > a { color: var(--ink); }
}

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-actions .btn { padding: 0.6rem 0.6rem 0.6rem 1.15rem; }
@media (max-width: 47.99rem) {
  /* Below tablet the CTA label is dropped; the burger carries navigation. */
  .nav-actions .btn { display: none; }
}

/* Hamburger — the bars rotate and translate into a true X. */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: rgba(11, 43, 60, 0.055);
  transition: background-color var(--duration-base) var(--ease);
}
.nav-toggle:hover { background: rgba(11, 43, 60, 0.1); }
@media (min-width: 60rem) { .nav-toggle { display: none; } }

.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--duration-base) var(--ease),
              opacity var(--duration-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }

[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0.3); }
[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Full-screen menu overlay. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  /* Explicit minmax(0, 1fr): an auto column sizes to max-content, and because
     this overlay is only visibility:hidden rather than display:none it still
     participates in layout — the long links at display size were pushing the
     document to 565px on a 390px screen and clipping the entire page. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-24) var(--gutter) var(--space-16);
  background: rgba(11, 43, 60, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease),
              visibility var(--duration-slow) var(--ease);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

.nav-overlay__list {
  display: grid;
  gap: var(--space-2);
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
  min-width: 0;
}
/* The fallback renders bare anchors rather than list items, so the stagger
   selectors below need an equivalent hook. */
.nav-overlay__list--plain a:nth-child(1) { transition-delay: 60ms; }
.nav-overlay__list--plain a:nth-child(2) { transition-delay: 110ms; }
.nav-overlay__list--plain a:nth-child(3) { transition-delay: 160ms; }
.nav-overlay__list--plain a:nth-child(4) { transition-delay: 210ms; }
.nav-overlay__list--plain a:nth-child(5) { transition-delay: 260ms; }
.nav-overlay__list a {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--paper);
  padding-block: var(--space-2);
  /* Each link starts below an invisible mask line and slides up. */
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              color var(--duration-fast) var(--ease);
}
.nav-overlay.is-open .nav-overlay__list a { opacity: 1; transform: translateY(0); }
/* Staggered so the list unfurls rather than appearing as a block. */
.nav-overlay__list li:nth-child(1) a { transition-delay: 60ms; }
.nav-overlay__list li:nth-child(2) a { transition-delay: 110ms; }
.nav-overlay__list li:nth-child(3) a { transition-delay: 160ms; }
.nav-overlay__list li:nth-child(4) a { transition-delay: 210ms; }
.nav-overlay__list li:nth-child(5) a { transition-delay: 260ms; }
.nav-overlay__list li:nth-child(6) a { transition-delay: 310ms; }
.nav-overlay__list li:nth-child(7) a { transition-delay: 360ms; }
.nav-overlay__list li:nth-child(8) a { transition-delay: 410ms; }
.nav-overlay__list a:hover { color: var(--accent); }

.nav-overlay__meta {
  max-width: var(--container);
  margin: var(--space-12) auto 0;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  color: rgba(250, 248, 243, 0.66);
  font-size: var(--text-sm);
}
.nav-overlay__meta a { color: var(--paper); border-bottom: 1px solid rgba(250, 248, 243, 0.3); }

body.nav-open { overflow: hidden; }

/* Header is fixed, so the first section needs clearance. */
.site-main { padding-top: 5.5rem; }
.is-home .site-main { padding-top: 0; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--highlight-inset), var(--shadow-sm);
  transition: transform var(--duration-slow) var(--ease),
              box-shadow var(--duration-slow) var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.card__index {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-faint);
  margin-bottom: var(--space-6);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-3);
}
.card__body { color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.card__foot { margin-top: auto; padding-top: var(--space-6); }

/* Sector card — a hairline rule that fills with brick on hover. */
.card--sector { padding-top: var(--space-6); border-top: 2px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; background: transparent; }
.card--sector::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease);
}
a.card--sector:hover { transform: none; box-shadow: none; }
a.card--sector:hover::before { transform: scaleX(1); }

/*
 * Article card for the blog index and "keep reading". None of the four
 * existing posts has a featured image, so .post-card__media never renders for
 * them — without its own boundary the card was just a loose stack of meta and
 * a title, and two of them stacked in a row read as one undifferentiated
 * block of text rather than two separate links. The border gives every card a
 * visible edge regardless of whether a thumbnail exists.
 */
.post-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease);
}
.post-card:hover { border-color: var(--accent); }
.post-card:has(.post-card__media) { padding: 0; border: 0; }
.post-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-warm);
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-faint);
}
.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.post-card:hover .post-card__title { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Stats — the 200+ placements band
   -------------------------------------------------------------------------- */

.stat-band {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .stat-band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stat-band { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.stat { border-left: 1px solid var(--border); padding-left: var(--space-5); }
.section--ink .stat { border-color: var(--rule-ink); }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.stat__label {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: var(--leading-normal);
}
.section--ink .stat__label { color: rgba(250, 248, 243, 0.66); }
.stat__note {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Timeline — the M0 to M36 process spine
   -------------------------------------------------------------------------- */

.timeline { position: relative; display: grid; gap: var(--space-10); }
.timeline::before {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--border);
}
.section--ink .timeline::before { background: var(--rule-ink); }

.timeline__step { position: relative; padding-left: var(--space-8); }
.timeline__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: var(--radius-full);
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--ink-faint);
}
.timeline__step--active::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px var(--accent-wash); }
.section--ink .timeline__step::before { background: var(--ink); box-shadow: 0 0 0 1.5px rgba(250, 248, 243, 0.4); }

.timeline__marker {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-2);
}
.timeline__title { font-size: var(--text-lg); font-weight: 600; font-family: var(--font-body); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2); }
.timeline__body { color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.section--ink .timeline__body { color: rgba(250, 248, 243, 0.7); }

/* Horizontal variant for wide viewports. */
@media (min-width: 64rem) {
  .timeline--horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-6); }
  .timeline--horizontal::before { left: 0.5rem; right: 0.5rem; top: 0.3125rem; bottom: auto; width: auto; height: 1px; }
  .timeline--horizontal .timeline__step { padding-left: 0; padding-top: var(--space-8); }
  .timeline--horizontal .timeline__step::before { top: 0; left: 0; }
}

/* --------------------------------------------------------------------------
   Data table + stipend bars
   -------------------------------------------------------------------------- */

.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.data-table { min-width: 44rem; font-size: var(--text-sm); background: var(--white); }
.data-table thead th {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color var(--duration-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--paper); }
.data-table__sector { font-weight: 600; }
.data-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 8rem;
}
.bar__track { flex: 1; height: 0.375rem; border-radius: var(--radius-full); background: var(--paper-deep); overflow: hidden; }
.bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--data-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-reveal) var(--ease-out);
}
.is-visible .bar__fill { transform: scaleX(1); }
.bar__label { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-muted); white-space: nowrap; }

/* --------------------------------------------------------------------------
   FAQ accordion — native details/summary, so it works without JS
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  list-style: none;
  transition: color var(--duration-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-ink); }
.faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
[open] .faq__icon::after { transform: rotate(0deg); }

.faq__a { padding-bottom: var(--space-8); max-width: var(--measure-tight); color: var(--ink-muted); }
.faq__a > * + * { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Forms — Tally embed shell and SureForms restyle
   -------------------------------------------------------------------------- */

.form-slot { position: relative; }
.form-slot iframe { width: 100%; border: 0; display: block; background: transparent; }

/* Tally reports its height via postMessage and site.js resizes the iframe, but
   that message does not always arrive — when it did not, a 26rem min-height cut
   the form off mid-question. The floor is now the form's measured natural
   height (744px at the narrowest column), so the worst case is a little dead
   space rather than an unusable form. */
.form-slot--tally iframe { min-height: 50rem; }

.form-slot__fallback {
  padding: var(--space-8);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* SureForms inherits our tokens rather than shipping its own look. */
.srfm-form-container {
  --srfm-color-scheme-primary: var(--accent);
  --srfm-color-input-label: var(--ink);
  --srfm-color-input-text: var(--ink);
  --srfm-color-input-border: var(--border);
  --srfm-bg-color: transparent;
}
.srfm-form-container input[type='text'],
.srfm-form-container input[type='email'],
.srfm-form-container input[type='tel'],
.srfm-form-container textarea,
.srfm-form-container select {
  border-radius: var(--radius-md) !important;
  border-color: var(--border) !important;
  font-family: var(--font-body) !important;
}
.srfm-form-container button[type='submit'] {
  border-radius: var(--radius-full) !important;
  background: var(--accent) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-wide) !important;
}

/* --------------------------------------------------------------------------
   Floating actions — WhatsApp and call
   -------------------------------------------------------------------------- */

.float-actions {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.float-btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-base) var(--ease-spring),
              background-color var(--duration-base) var(--ease);
}
.float-btn svg { width: 1.375rem; height: 1.375rem; }
.float-btn:hover { transform: scale(1.06); }
.float-btn:active { transform: scale(0.96); }
.float-btn--whatsapp { background: var(--whatsapp); }
.float-btn--whatsapp:hover { background: #1DB356; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-faint);
  text-transform: uppercase;
}
.breadcrumb a { color: var(--ink-muted); transition: color var(--duration-fast) var(--ease); }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb [aria-current='page'] { color: var(--ink); }

/* --------------------------------------------------------------------------
   Author block
   -------------------------------------------------------------------------- */

.author {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
}
.author__avatar {
  flex-shrink: 0;
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--paper-deep);
}
.author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author__name { font-weight: 600; letter-spacing: var(--tracking-snug); }
.author__role {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}
.author__bio { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.pagination a.page-numbers:hover { background: var(--white); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink); color: rgba(250, 248, 243, 0.72); padding-block: var(--section-y-tight) var(--space-10); }
.site-footer h2, .site-footer h3, .site-footer .brand__text { color: var(--paper); }
.site-footer a { color: rgba(250, 248, 243, 0.72); transition: color var(--duration-fast) var(--ease); }
.site-footer a:hover { color: var(--paper); }

.footer-grid { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-16); } }

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(250, 248, 243, 0.5);
  margin-bottom: var(--space-5);
}
.footer-list { display: grid; gap: var(--space-3); font-size: var(--text-sm); }

.footer-bottom {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: rgba(250, 248, 243, 0.5);
}