/* Incorporo — bespoke layer on top of Tailwind.
   Tailwind handles utilities; this file owns typography feature-settings,
   the scroll-reveal motion, the selector overlay, and a few editorial details. */

:root {
  --ink: #0F1419;
  --offwhite: #F4EFE7;
  /* Brand colours (client-supplied). Variable names kept for stability; the
     two roles are: primary = the "voice" colour, secondary = the accent. */
  --navy: #343469;      /* primary — buttons, headlines, active states */
  --accent: #3A66A6;    /* secondary — institutional blue accent: italics, prices, hovers (AA-safe on offwhite) */
  --mute: #C9C3B8;
  --mute-text: #6F6A60;
  --paper: #F4EFE7;
  --paper-card: #FBF8F2;     /* a touch lighter than the page, for raised surfaces */
  --band-alt: #FAF7F1;       /* alternating full-width section band, slightly lighter than the paper */
  --hairline: #DAD3C6;       /* warm hairline, lighter than --mute */

  /* Letterhead grain: static, desaturated SVG noise (no hue shift, no motion).
     Painted behind content so type/ink sits on top like ink on paper. */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.34'/%3E%3C/svg%3E");
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--offwhite);
  background-image: var(--paper-grain);
  background-repeat: repeat;
  color: var(--ink);
  font-family: "Libre Franklin", system-ui, sans-serif;
  font-feature-settings: "kern" 1;
  font-optical-sizing: auto;   /* Newsreader: opsz follows font-size automatically */
  letter-spacing: -0.005em;
}

.font-serif { font-family: "Newsreader", Georgia, serif; }

/* Tabular numerals — prices, comparison tables, the progress indicator. */
.tnum { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }

/* Eyebrow / small-caps label. */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 450;
  color: var(--mute-text);
}

/* Editorial headline defaults. */
.headline {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.headline em { font-style: italic; color: var(--accent); }

.prose-measure { max-width: 42rem; }   /* ~640–720px long-form prose cap */

/* --- Page container ---
   The site shell is intentionally wide; inner text columns keep their own
   comfortable measures (prose-measure, ch-based caps). The guided selector
   overlay deliberately keeps a narrower, comfortable width of its own. */
:root { --shell-max: 1720px; }
.shell {
  width: 100%;
  margin-inline: auto;
  max-width: var(--shell-max);
  padding-inline: 1.5rem;            /* 24px */
}
@media (min-width: 768px)  { .shell { padding-inline: 2.5rem; } }   /* 40px */
@media (min-width: 1280px) { .shell { padding-inline: 4rem; } }     /* 64px */
@media (min-width: 1680px) { .shell { padding-inline: 5.5rem; } }   /* 88px */

/* Section vertical rhythm token — one source of truth for the cadence the
   spec asks for (~64px mobile → ~104–120px desktop). Replaces hand-repeated
   `py-[60px] md:py-[104px]` so the rhythm is enforced, not remembered. */
.section-y { padding-block: clamp(3.75rem, 8vw, 6.5rem); }

/* Alternating full-width section bands. The section keeps its `.shell` content
   width; a full-bleed ::before paints a slightly-lighter strip edge-to-edge
   behind it. `#view` clips the horizontal overflow the 100vw strip would add
   (the sticky header lives outside #view, so its stickiness is untouched). */
#view { overflow-x: clip; }
/* SPA route cross-fade — quick opacity dip between views (brief: motion subtle). */
#view { transition: opacity 220ms ease; }
#view.view-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #view { transition: none; } }
.band-alt { position: relative; }
.band-alt::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background-color: var(--band-alt);
  background-image: var(--paper-grain);
  background-repeat: repeat;
}

/* Hairline rule — draws in left-to-right when it enters view. */
.hr-line {
  height: 1px;
  background: var(--hairline);
  border: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hr-line.is-in { transform: scaleX(1); }

/* --- Link with gentle underline animation --- */
.link-underline {
  position: relative;
  color: var(--ink);
  text-decoration: none;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

/* Nav links. */
.nav-link {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 220ms ease;
}
.nav-link:hover { color: var(--navy); }
.nav-link[aria-current="true"] { color: var(--navy); }

/* Icon-only client login. Muted by default, shifts to navy on hover/focus
   (colour inherited via currentColor from .nav-link). The glyph is bottom-heavy
   (body + key), so nudge it up ~1.5px to sit optically level with the nav text. */
.login-key { flex: 0 0 auto; transform: translateY(-1.5px); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.btn-primary {
  background: var(--navy);
  color: #F4EFE7;
  padding: 0.85rem 1.6rem;
}
.btn-primary:hover { background: #2A2A54; }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  padding: 0.85rem 1.6rem;
}
.btn-secondary:hover { background: var(--ink); color: var(--offwhite); }
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.88rem; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 0.6rem 0;
}

/* Focus visibility (never remove outline without a replacement). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- Scroll reveal: fade-and-rise --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hr-line { transform: none; transition: none; }
  .hero-img { transform: none !important; }
  .selector-step { transition: none !important; }
}

/* --- Hero engraved rotating globe (canvas) --- */
.hero-globe {
  display: block;
  /* Square, sized by the smallest of: column width, viewport-height budget, cap.
     The vh term keeps the globe in proportion on short / scaled viewports
     (e.g. Windows display scaling at 125% reports a shorter CSS viewport). */
  width: min(100%, 70vh, 760px);
  aspect-ratio: 1 / 1;
  margin-left: auto;            /* hug the right edge of the column on desktop */
  touch-action: pan-y;          /* horizontal drag spins; vertical still scrolls */
}
@media (max-width: 1023px) {
  .hero-globe { width: min(100%, 64vh, 520px); margin-inline: auto; }
}
.globe-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;          /* centred under the globe even when the column is right-aligned */
  gap: 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--mute-text);
}
.globe-key { width: 9px; height: 9px; border-radius: 9999px; display: inline-block; }
.globe-key--onshore { background: var(--navy); }
.globe-key--offshore { background: var(--accent); }
/* "Drag to explore" hint: centred below on small screens; vertical at the globe's
   right edge on desktop. */
.globe-hint {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-text);
  text-align: center;
}
@media (min-width: 1024px) {
  .globe-hint {
    position: absolute;
    top: 46%;
    right: -1.75rem;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
}

/* --- Jurisdiction catalog rows/cards --- */
.cat-row { transition: background 240ms ease; }
.cat-row:hover { background: rgba(52, 52, 105, 0.04); }
.cat-row .cat-name { transition: color 240ms ease; }
.cat-row:hover .cat-name { color: var(--accent); }
.cat-arrow { transition: transform 280ms cubic-bezier(0.22,1,0.36,1), color 240ms ease; }
.cat-row:hover .cat-arrow { transform: translateX(5px); color: var(--accent); }

/* Catalog region tabs (Onshore / Offshore). */
/* Segmented control: bordered track with a navy-filled active tab. */
.cat-tabs {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--hairline);
  background: var(--paper-card);
  margin-bottom: 2.25rem;
}
.cat-tab {
  position: relative;
  padding: 0.62rem 1.55rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mute-text);
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  transition: background 200ms ease, color 200ms ease;
}
.cat-tab:hover { color: var(--ink); }
.cat-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cat-tab .cat-tab-count {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--mute-text);
  transition: color 200ms ease;
}
.cat-tab[aria-selected="true"] {
  background: var(--navy);
  color: var(--offwhite);
}
.cat-tab[aria-selected="true"]:hover { color: var(--offwhite); }
.cat-tab[aria-selected="true"] .cat-tab-count { color: rgba(244, 239, 231, 0.72); }
.cat-panel[hidden] { display: none; }

/* Comparison chips — same selectable-label family as the catalog tabs:
   paper-card surface, hairline border, muted until chosen, navy when active. */
.cmp-chip {
  border: 1px solid var(--hairline);
  background: var(--paper-card);
  color: var(--mute-text);
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.cmp-chip:hover { color: var(--ink); border-color: var(--mute); }
.cmp-chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--offwhite);
}
.cmp-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Speak-to-an-advisor lightbox --- */
.advisor-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.advisor-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease;
}
.advisor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.advisor-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 28px 60px rgba(15, 20, 25, 0.28);
  transform: translateY(14px);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.advisor-overlay.open .advisor-panel { transform: translateY(0); }
.advisor-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mute-text);
  transition: color 200ms ease;
}
.advisor-close:hover { color: var(--ink); }
.advisor-privacy {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--mute-text);
}
.adv-radios { display: flex; gap: 1.75rem; margin-top: 0.15rem; }
.adv-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
}
.adv-radio input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
@media (prefers-reduced-motion: reduce) {
  .advisor-panel { transform: none; transition: none; }
  .advisor-overlay { transition: opacity 120ms ease; }
}

/* --- Client login lightbox (same family as the advisor modal) --- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.login-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease;
}
.login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.login-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 28px 60px rgba(15, 20, 25, 0.28);
  transform: translateY(14px);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.login-overlay.open .login-panel { transform: translateY(0); }
.login-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mute-text);
  transition: color 200ms ease;
}
.login-close:hover { color: var(--ink); }
.login-foot { font-size: 0.85rem; color: var(--mute-text); }
@media (prefers-reduced-motion: reduce) {
  .login-panel { transform: none; transition: opacity 120ms ease; }
  .login-overlay { transition: opacity 120ms ease; }
}

/* --- Guided selector: centered lightbox (same family as the advisor modal) --- */
#selector-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#selector-root.open { pointer-events: auto; }

.selector-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 20, 25, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 240ms ease;
}
#selector-root.open .selector-backdrop { opacity: 1; }

.selector-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  box-shadow: 0 28px 60px rgba(15, 20, 25, 0.28);
  display: flex;
  flex-direction: column;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
#selector-root.open .selector-panel { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .selector-panel { transform: none; transition: opacity 120ms ease; }
}

/* Cross-fade between selector steps. */
.selector-step {
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selector-step.leaving { opacity: 0; transform: translateY(-10px); position: absolute; }
.selector-step.entering { opacity: 0; transform: translateY(12px); }

/* Selector option rows. */
.opt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  padding: 1.2rem 0.25rem;
  cursor: pointer;
  transition: padding-left 280ms cubic-bezier(0.22,1,0.36,1), color 220ms ease;
}
.opt-row:last-child { border-bottom: 1px solid var(--hairline); }
.opt-row:hover { padding-left: 0.85rem; }
.opt-row .opt-label {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  transition: color 220ms ease;
}
.opt-row:hover .opt-label { color: var(--accent); }
.opt-row .opt-index {
  font-size: 0.8rem;
  color: var(--mute-text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  transform: translateY(-0.2em);
}
.opt-row[aria-pressed="true"] .opt-label { color: var(--navy); }

/* Selector results ranked rows. */
.rec-rank {
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Generic field styling for the contact form. */
.field-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute-text);
  font-weight: 450;
  margin-bottom: 0.5rem;
}
.field-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--mute-text);
  opacity: 0.75;
}
.field-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.65rem 0;
  font-size: 1.05rem;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 220ms ease;
}
.field-input::placeholder { color: #A7A095; }
.field-input:focus { outline: none; border-color: var(--navy); }
textarea.field-input { resize: vertical; min-height: 6rem; }

/* --- Brand logo --- */
.brand-logo { height: 78px; width: auto; display: block; }
.brand-mark { height: 1.9rem; width: auto; display: block; }
@media (max-width: 639px) { .brand-logo { height: 3rem; } }
/* The header carries the full lockup at every width; only the slim scroll-up
   state below swaps to the compact mark. */
.hdr-logo-full { display: block; }
.hdr-logo-mark { display: none; }
.header-row { transition: height 400ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Mobile nav toggle (hamburger) — only shown below the lg breakpoint. */
.nav-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.nav-toggle-bars::before { position: absolute; transform: translateY(-7px); }
.nav-toggle-bars::after  { position: absolute; transform: translateY(7px); }
.site-header.nav-open .nav-toggle-bars { background: transparent; }
.site-header.nav-open .nav-toggle-bars::before { transform: translateY(0) rotate(45deg); }
.site-header.nav-open .nav-toggle-bars::after  { transform: translateY(0) rotate(-45deg); }

/* Mobile menu — full-screen bottom-sheet overlay that slides up from below. */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background-color: var(--offwhite);
  background-image: var(--paper-grain);
  background-repeat: repeat;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 440ms;
}
.mobile-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}
.mobile-overlay-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
.mobile-overlay-brand {
  display: inline-flex;
  color: var(--navy);
}
.mobile-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.mobile-overlay-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-bottom: 2.5rem;
  overflow-y: auto;
}
.mobile-overlay-login {
  width: 100%;
  margin-top: 1.6rem;
}
@media (min-width: 1024px) { .mobile-overlay { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-overlay { transition: visibility 0s; }
}

.mobile-nav-link {
  padding: 0.85rem 0;
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav-link:last-child { border-bottom: 0; }
.mobile-nav-link:hover { color: var(--navy); }

/* Expandable Jurisdictions disclosure inside the hamburger nav. */
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
}
.mobile-nav-toggle .mega-caret { opacity: 0.65; }
.mobile-nav-toggle[aria-expanded="true"] .mega-caret { transform: rotate(180deg); opacity: 1; }
.mobile-nav-toggle[aria-expanded="true"] { color: var(--navy); }

/* Animate open/closed via grid-template-rows (0fr -> 1fr), no height math. */
.mobile-subnav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Border only when expanded — closes the group without doubling the line that
   the collapsed toggle already draws. */
.mobile-subnav.is-open {
  grid-template-rows: 1fr;
  border-bottom: 1px solid var(--hairline);
}
.mobile-subnav-inner { overflow: hidden; }
.mobile-subnav-group { padding: 0.4rem 0 0.2rem; }
.mobile-subnav-title {
  font-family: "Libre Franklin", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-text);
  padding: 0.7rem 0 0.45rem;
}
.mobile-subnav-link {
  display: block;
  padding: 0.55rem 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.02rem;
  color: var(--ink);
}
.mobile-subnav-link:hover { color: var(--accent); }
.mobile-subnav-link[aria-current="page"] { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .mobile-subnav { transition: none; }
  .mobile-nav-toggle .mega-caret { transition: none; }
}

/* Sticky header — three scroll-driven states:
   .at-top   opaque, seamless with the paper (no blur), always shown on load
   .pinned   revealed while scrolling up: frosted translucent over content
   .unpinned hidden while scrolling down (slides up out of view)
   Transitions handle the frosted→opaque handoff when arriving back at the top. */
.site-header {
  background-color: var(--offwhite);
  background-image: var(--paper-grain);
  border-bottom: 1px solid transparent;
  will-change: transform;
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 300ms ease,
              backdrop-filter 300ms ease,
              -webkit-backdrop-filter 300ms ease,
              border-color 300ms ease;
}
.site-header.at-top {
  background-color: var(--offwhite);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom-color: transparent;
  transform: translateY(0);
}
.site-header.pinned {
  background-color: rgba(244, 239, 231, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--hairline);
  transform: translateY(0);
}
.site-header.unpinned {
  transform: translateY(-100%);
}

/* Scroll-up reveal is a DIFFERENT header: slimmer bar, mark-only logo. */
.site-header.pinned .header-row { height: 64px; }
.site-header.pinned .hdr-logo-full { display: none; }
.site-header.pinned .hdr-logo-mark { display: block; }

/* Header CTA is redundant with the hero's "Find my jurisdiction" until you
   scroll past the hero. COLLAPSED is the default state — so it never flashes on
   load and never expands while the header is sliding away on scroll-down. It
   reveals ONLY when the header pins (scroll-up), as the persistent re-entry. */
.header-cta {
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: -0.75rem;   /* absorb the flex gap so no phantom space remains */
  pointer-events: none;
  transition: opacity 240ms ease,
              max-width 380ms cubic-bezier(0.22, 1, 0.36, 1),
              padding 240ms ease,
              margin 240ms ease;
}
.site-header.pinned:not(.hero-cta-visible) .header-cta {
  max-width: 16rem;
  opacity: 1;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  margin-left: 0;
  pointer-events: auto;
}
/* "Speak to an advisor": the mirror of .header-cta. Present at the top of the
   page (secondary, complements the hero's primary action), it collapses away
   when the header pins so only one header CTA is ever shown. */
.header-advisor {
  overflow: hidden;
  white-space: nowrap;
  max-width: 16rem;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 240ms ease,
              max-width 380ms cubic-bezier(0.22, 1, 0.36, 1),
              padding 240ms ease,
              margin 240ms ease;
}
.site-header.pinned .header-advisor {
  max-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: -0.75rem;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .header-cta,
  .header-advisor { transition: opacity 240ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  /* No hide/reveal motion: keep the header put, just flip the surface style. */
  .site-header.unpinned { transform: translateY(0); }
}

/* ---- Jurisdictions mega menu ---- */
.site-header .shell { position: relative; }

.nav-link--mega {
  gap: 0.34rem;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.mega-caret {
  flex: 0 0 auto;
  opacity: 0.65;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.mega-open .nav-link--mega { color: var(--navy); }
.site-header.mega-open .nav-link--mega .mega-caret { transform: rotate(180deg); opacity: 1; }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--paper-card);
  background-image: var(--paper-grain);
  background-repeat: repeat;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 34px 64px -38px rgba(15, 20, 25, 0.55);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.mega-open .mega {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-inner {
  display: flex;
  gap: 3rem;
  align-items: stretch;
  padding: 2.4rem 2.5rem 2.7rem;
}
@media (min-width: 1280px) { .mega-inner { padding-inline: 4rem; } }
@media (min-width: 1680px) { .mega-inner { padding-inline: 5.5rem; } }

.mega-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
/* Dedicated "View all" button, pinned to the bottom-left of the panel and
   aligned with the bottom of the rail on the right. */
.mega-viewall {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}
.mega-viewall span { color: var(--accent); display: inline-block; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.mega-viewall:hover { border-color: var(--accent); color: var(--accent); }
.mega-viewall:hover span { transform: translateX(3px); }
/* Keep a minimum gap above the button when the columns are tall. */
.mega-cols { margin-bottom: 1.6rem; }
.mega-col-title {
  font-family: "Libre Franklin", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-text);
  padding-bottom: 0.85rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}
.mega-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  margin-inline: -0.7rem;
  transition: background-color 200ms ease;
}
.mega-item:hover { background-color: var(--band-alt); }
.mega-item.is-current {
  background-color: var(--band-alt);
  box-shadow: inset 2px 0 0 var(--accent);
}
.mega-item.is-current .mega-item-name { color: var(--accent); }
.mega-item-name {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ink);
  transition: color 200ms ease;
}
.mega-item:hover .mega-item-name { color: var(--accent); }
.mega-item-arrow {
  color: var(--accent);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mega-item:hover .mega-item-arrow,
.mega-item.is-current .mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .mega-item-arrow { transition: opacity 200ms ease; transform: none; }
}

.mega-rail {
  flex: 0 0 auto;
  width: 17.5rem;
  display: flex;
  flex-direction: column;
  background-color: var(--navy);
  color: var(--offwhite);
  padding: 1.9rem 1.7rem 1.8rem;
}
.mega-rail-eyebrow {
  font-family: "Libre Franklin", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B8C6E0;
}
.mega-rail-lead {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.24rem;
  line-height: 1.24;
  margin: 0.7rem 0 0.65rem;
}
.mega-rail-body {
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(244, 239, 231, 0.78);
  margin-bottom: 1.3rem;
}
.mega-rail-cta { align-self: flex-start; margin-top: auto; }
.mega-rail-link {
  margin-top: 0.95rem;
  font-size: 0.82rem;
  color: #B8C6E0;
  text-decoration: none;
  transition: color 200ms ease;
}
.mega-rail-link:hover { color: var(--offwhite); }

@media (max-width: 1023px) {
  .mega { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mega { transform: none; transition: opacity 200ms ease; }
  .site-header.mega-open .mega { transform: none; }
  .mega-caret { transition: none; }
}

/* Number-led "how it works" steps. */
.step-num {
  font-family: "Newsreader", Georgia, serif;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.95rem;
}

/* ---- Country hero illustration + key-facts ribbon ---- */

/* Landmark illustration in the country hero. Bounded so a tall SVG never
   pushes the headline column out of vertical centre. */
.country-hero-art {
  max-height: clamp(360px, 46vw, 600px);
  display: block;
}

/* Key-facts ribbon below the hero. Hairline dividers between cells, drawn
   with insets so they don't touch the top/bottom border. */
.info-cell { position: relative; }
.info-cell + .info-cell::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 0;
  border-left: 1px solid var(--hairline);
}
/* Suppress the divider on the first cell of each wrapped row. */
@media (max-width: 767px) {
  .info-cell:nth-child(odd)::before { display: none; }
  .info-cell:nth-child(odd) { padding-left: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .info-cell:nth-child(3n + 1)::before { display: none; }
  .info-cell:nth-child(3n + 1) { padding-left: 0; }
}
@media (min-width: 1024px) {
  .info-cell:first-child::before { display: none; }
  .info-cell:first-child { padding-left: 0; }
  /* Each cell sizes to its content, then shares the leftover space equally
     (flex-basis: auto = content width; flex-grow: 1 = equal free-space split).
     dl.info-bar specificity beats Tailwind's single-class `.grid`. */
  dl.info-bar { display: flex; }
  dl.info-bar .info-cell { flex: 1 1 auto; }
}

/* ---- Country package tiers ---- */
.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.9rem 2.2rem;
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-repeat: repeat;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
}
/* Elevation (lift + shadow) follows the hovered card. */
.pkg-card:hover { box-shadow: 0 28px 60px -28px rgba(15, 20, 25, 0.6); }
@media (min-width: 768px) {
  .pkg-card:hover { transform: translateY(-1.5rem); }
}

.pkg-name { font-size: 1.65rem; line-height: 1.08; }
.pkg-label {
  font-family: "Libre Franklin", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.64rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.pkg-price {
  font-family: "Newsreader", Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 3.2vw, 3.1rem);
  line-height: 1;
  margin: 1.35rem 0 1.4rem;
}
.pkg-rule { height: 1px; background: var(--hairline); margin-bottom: 1.4rem; }
.pkg-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.97rem;
  line-height: 1.4;
}
.pkg-prefix { color: var(--mute-text); margin-bottom: 0.25rem; }
.pkg-dash { color: var(--accent); margin-top: 2px; }
.pkg-cta { margin-top: 1.9rem; align-self: flex-start; }

/* Featured (centre) tier — the focal point, lifted and filled in brand navy. */
.pkg-card--featured {
  background: var(--navy);
  color: #F4EFE7;
  box-shadow: 0 28px 60px -28px rgba(15, 20, 25, 0.6);
}
.pkg-card--featured .pkg-label { color: #B8C6E0; }
.pkg-card--featured .pkg-rule { background: rgba(244, 239, 231, 0.22); }
.pkg-card--featured .pkg-prefix { color: rgba(244, 239, 231, 0.62); }
.pkg-card--featured .pkg-dash { color: var(--mute); }
@media (min-width: 768px) {
  .pkg-card--featured { transform: translateY(-1.5rem); }
}
/* When a non-featured card is hovered, the featured one steps back (drops its
   shadow) so the elevation reads on the card under the cursor. */
.pkg-grid:has(.pkg-card:not(.pkg-card--featured):hover) .pkg-card--featured {
  box-shadow: none;
}

.btn-on-dark { background: #F4EFE7; color: var(--navy); padding: 0.85rem 1.6rem; }
.btn-on-dark:hover { background: var(--accent); color: var(--offwhite); }

/* ---- Country "About" — editorial slideshow paired with prose ---- */
.slideshow { position: relative; }
.slides {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mute);
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 800ms ease;
}
.slide.is-active { opacity: 1; }
.slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.4rem 1.15rem;
  font-family: "Libre Franklin", system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #F4EFE7;
  background: linear-gradient(to top, rgba(15, 20, 25, 0.66), rgba(15, 20, 25, 0));
}
.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(244, 239, 231, 0.82);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: background 200ms ease, opacity 220ms ease;
}
.slideshow:hover .slide-nav, .slide-nav:focus-visible { opacity: 1; }
.slide-nav:hover { background: var(--offwhite); }
.slide-prev { left: 0.9rem; }
.slide-next { right: 0.9rem; }
.slide-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.slide-dot {
  width: 26px;
  height: 2px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--mute);
  transition: background 220ms ease;
}
.slide-dot:hover { background: var(--mute-text); }
.slide-dot.is-active { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* Slider grows to fill its column so the left/right column bottoms align */
@media (min-width: 1024px) {
  .slideshow--fill {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .slideshow--fill .slides {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-card, .pkg-card:hover, .pkg-card--featured { transform: none; }
}

/* ============================================================
   Incorporation order flow (#/start/<slug>)
   ============================================================ */
.oflow-back {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--mute-text);
  margin-bottom: 2.5rem;
}
.oflow-intro { margin-bottom: 2.75rem; }

/* Progress rail */
.oprog {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0 0 3rem;
  padding: 0;
}
.oprog-step { flex: 1 1 0; min-width: 0; }
.oprog-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0 0 0.85rem;
  border-top: 2px solid var(--hairline);
  padding-top: 0.85rem;
  cursor: pointer;
  text-align: left;
  color: var(--mute-text);
  transition: color 200ms ease, border-color 200ms ease;
}
.oprog-btn:disabled { cursor: default; }
.oprog-step.is-current .oprog-btn { color: var(--ink); border-top-color: var(--accent); }
.oprog-step.is-done .oprog-btn { color: var(--ink); border-top-color: var(--navy); }
.oprog-num {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid currentColor;
}
.oprog-step.is-current .oprog-num { background: var(--accent); color: var(--offwhite); border-color: var(--accent); }
.oprog-step.is-done .oprog-num { background: var(--navy); color: var(--offwhite); border-color: var(--navy); }
.oprog-label {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  .oprog { gap: 0.35rem; }
  .oprog-label { display: none; }
  .oprog-btn { justify-content: center; padding-bottom: 0; }
}

/* Two-column: form + sticky summary */
.oflow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .oflow-grid { grid-template-columns: minmax(0,1fr) 21rem; gap: 4rem; align-items: start; }
}

/* Step panels */
.ostep { display: none; }
.ostep.is-active { display: block; animation: ostepIn 360ms cubic-bezier(0.22,1,0.36,1); }
@keyframes ostepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ostep-title { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.ostep-sub {
  margin: 0.85rem 0 2.25rem;
  color: var(--mute-text);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 42rem;
}

/* Package choice cards */
.pkg-choices { display: grid; gap: 1rem; }
.pkg-choice {
  position: relative;
  display: block;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.pkg-choice:hover { border-color: var(--mute-text); }
.pkg-choice.is-selected { border-color: var(--accent); background: var(--paper-card); }
.pkg-choice-input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-choice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pkg-choice-name { font-size: 1.3rem; }
.pkg-choice-price { font-size: 1.1rem; color: var(--ink); }

/* "See what's included" cue — shown only while the card is collapsed. */
.pkg-choice-toggle {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--accent);
  position: relative;
}
.pkg-choice-toggle::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px; width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1);
}
.pkg-choice:hover .pkg-choice-toggle::after { transform: scaleX(1); }
.pkg-choice.is-selected .pkg-choice-toggle { display: none; }

/* Detail — collapses to zero unless the card is selected (detail follows
   selection, so the chosen package is always fully explained). */
.pkg-choice-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pkg-choice.is-selected .pkg-choice-detail { grid-template-rows: 1fr; }
.pkg-choice-detail-inner { overflow: hidden; }
.pkg-choice-list { list-style: none; margin: 0.95rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.pkg-choice-item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--mute-text); line-height: 1.4; }
/* Every item carries a check (it IS included). Carried-over items get a muted
   tick; the tier's own additions get an accent tick to mark what's new. */
.pkg-check { flex: 0 0 auto; margin-top: 0.12em; display: inline-flex; color: var(--accent); }
.pkg-choice-item.is-inherited .pkg-check { color: var(--mute); }
.pkg-choice-mark {
  position: absolute; top: 1.5rem; right: 1.6rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid var(--mute); transition: all 200ms ease;
}
.pkg-choice.is-selected .pkg-choice-mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--paper-card); }
.pkg-choice-head { padding-right: 2rem; }

/* Fields */
.ofield-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
@media (max-width: 560px) { .ofield-grid { grid-template-columns: 1fr; } }
.ofield { min-width: 0; }
.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6A60' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  padding-right: 1.5rem;
}
.ofield-error { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: #9A3B3B; }
.field-invalid { border-bottom-color: #9A3B3B; }
.ofield-banking { margin-top: 2rem; max-width: 24rem; }

/* Add-ons */
.addon-list { display: grid; gap: 0.7rem; }
.addon-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.addon-row:hover { border-color: var(--mute-text); }
.addon-row.is-on { border-color: var(--accent); background: var(--paper-card); }
.addon-check { position: absolute; opacity: 0; pointer-events: none; }
.addon-icon { flex: 0 0 auto; display: inline-flex; color: var(--mute-text); transition: color 200ms ease; }
.addon-row:hover .addon-icon { color: var(--ink); }
.addon-row.is-on .addon-icon { color: var(--accent); }
.addon-text { min-width: 0; }
.addon-label { display: block; font-size: 1.02rem; color: var(--ink); }
.addon-note { display: block; font-size: 0.85rem; color: var(--mute-text); margin-top: 0.15rem; line-height: 1.4; }
.addon-right { display: flex; align-items: center; gap: 0.7rem; }
.addon-price { font-size: 0.9rem; color: var(--mute-text); white-space: nowrap; }
.addon-mark { flex: 0 0 auto; display: inline-flex; color: var(--accent); opacity: 0; transform: scale(0.7); transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22,1,0.36,1); }
.addon-row.is-on .addon-mark { opacity: 1; transform: scale(1); }

/* Payment */
.opay { margin-top: 2.5rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }
.opay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.opay-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-text); }
.ic { display: block; }
.opay-lock { color: var(--mute-text); display: inline-flex; }
.opay-fine { margin-top: 1.4rem; font-size: 0.8rem; color: var(--mute-text); }

/* Review recap */
.orecap { border: 1px solid var(--hairline); background: var(--paper-card); padding: 0.4rem 1.4rem; }
.orecap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); }
.orecap-row:last-child { border-bottom: 0; }
.orecap-k { font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--mute-text); }
.orecap-v { font-size: 1rem; color: var(--ink); text-align: right; }
.orecap-total .orecap-k { color: var(--ink); }
.orecap-total .orecap-v { font-size: 1.15rem; font-family: "Newsreader", Georgia, serif; }

/* Nav footer */
.oflow-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.75rem; }

/* Summary aside */
@media (min-width: 1024px) { .osummary { position: sticky; top: 132px; } }
.osummary-card { border: 1px solid var(--hairline); background: var(--paper-card); padding: 1.6rem 1.6rem 1.7rem; }
.osummary-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-text); }
.osummary-jur { font-size: 1.35rem; margin: 0.5rem 0 1.1rem; }
.osummary-lines { display: grid; gap: 0.55rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
.osummary-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; color: var(--ink); }
.osummary-line.is-addon { color: var(--mute-text); }
.osummary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; }
.osummary-total span:first-child { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute-text); }
.osummary-total-val { font-family: "Newsreader", Georgia, serif; font-size: 1.5rem; }
.osummary-note { margin-top: 1.1rem; font-size: 0.8rem; line-height: 1.5; color: var(--mute-text); }

/* Success */
.osuccess { max-width: 40rem; }
.osuccess-mark {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--navy); color: var(--offwhite);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.75rem;
}
.osuccess-lead { margin: 1.5rem 0 2rem; font-size: 1.08rem; line-height: 1.6; color: var(--mute-text); }
.osuccess-card { border: 1px solid var(--hairline); background: var(--paper-card); padding: 0.4rem 1.4rem; margin-bottom: 2.25rem; }
.osuccess-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .ostep.is-active { animation: none; }
}

/* Identity-verification panel (step 3) — placeholder for the Sumsub WebSDK
   mount point. See uploads/07-integration-sumsub.md. */
.verify-panel {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 2.25rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--hairline);
  background: var(--paper-card);
}
.verify-panel.is-started { border-color: var(--accent); }
.verify-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  color: var(--navy);
}
.verify-panel.is-started .verify-icon { color: var(--accent); border-color: var(--accent); }
.verify-body { min-width: 0; }
.verify-title { font-size: 1.2rem; line-height: 1.2; }
.verify-text {
  margin: 0.45rem 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mute-text);
  max-width: 34rem;
}
.verify-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink);
}
.verify-done-mark {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--offwhite);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

/* About — figures band */
.about-stat {
  padding: 2.4rem 0.5rem 2.4rem 0;
  position: relative;
}
.about-stat-num {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
}
.about-stat-label {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--mute-text);
  max-width: 18ch;
}
@media (min-width: 1024px) {
  .about-stat { padding-left: 2rem; }
  .about-stat + .about-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 2.4rem; bottom: 2.4rem;
    border-left: 1px solid var(--hairline);
  }
}

/* "Browse all" action at the foot of the mobile Jurisdictions disclosure */
.mobile-subnav-all { color: var(--accent); margin-top: 0.6rem; }

/* ---- Homepage trust strip ---- */
.trust-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* tidy 2x2 on small screens */
  gap: 1.75rem 1.5rem;
}
@media (min-width: 768px) {
  /* one row: cells fit their content, leftover space becomes the gaps between */
  .trust-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 1.5rem;
  }
}
.trust-item-value {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
}
.trust-item-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute-text);
  margin-top: 0.5rem;
}

/* ---- About: advisor / team cards ---- */
.advisor-card {
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}
.advisor-portrait {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mute-text); /* legible fallback initials (4.7:1) for when a photo fails to load */
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
/* Photo sits over the initials fallback. Grayscale by default; on hover it lifts
   to full colour with a slow zoom. If the image is missing, onerror hides it and
   the initials show. */
.advisor-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.001);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
}
.advisor-card:hover .advisor-portrait img { filter: grayscale(0); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .advisor-portrait img { transition: none; transform: none; }
}

/* ---- Team marquee (About) — auto-drifting, infinite, edge-bleed ---- */
.team-marquee {
  --team-gap: 1.5rem;
  margin-inline: calc(50% - 50vw);   /* full-bleed: slides enter/exit at both screen edges */
  overflow: hidden;
}
@media (min-width: 1024px) { .team-marquee { --team-gap: 2rem; } }
.team-track { display: flex; gap: var(--team-gap); width: max-content; will-change: transform; }
.team-set { display: flex; gap: var(--team-gap); }
.team-track .advisor-card { flex: 0 0 clamp(248px, 26vw, 340px); }
/* Draggable: grab cursor on desktop, no text/image selection during drag. */
.team-marquee { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.team-marquee.is-dragging { cursor: grabbing; }
@media (hover: none) { .team-marquee { cursor: auto; } }
.team-marquee img { -webkit-user-drag: none; user-drag: none; }

/* Dot navigation — small screens only (desktop uses drag + autoplay). */
.team-dots { display: none; }
@media (max-width: 767px) {
  .team-dots { display: flex; gap: 0.55rem; justify-content: center; margin-top: 1.8rem; }
}
.team-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--mute); opacity: 0.55; cursor: pointer;
  transition: opacity 220ms ease, background 220ms ease, transform 220ms ease;
}
.team-dot[aria-current="true"] { background: var(--accent); opacity: 1; transform: scale(1.3); }

/* ---- About closing CTA — full-bleed navy band (the page's one dark beat) ---- */
.cta-band {
  margin-inline: calc(50% - 50vw);              /* full-bleed dark band */
  background: var(--navy);
  color: var(--offwhite);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
/* Lighter institutional blue: --accent on navy is only 1.97:1 (fails AA); this matches the mega-rail eyebrow at 6.62:1. */
.cta-band .eyebrow { color: #B8C6E0; }
.cta-band .headline { color: var(--offwhite); }
.cta-band .cta-lead { color: rgba(244, 239, 231, 0.74); }
.cta-band .cta-note { font-size: 0.85rem; line-height: 1.5; color: rgba(244, 239, 231, 0.6); }
/* Buttons inverted for the dark band. */
.cta-band .btn-primary { background: var(--offwhite); color: var(--navy); }
.cta-band .btn-primary:hover { background: var(--accent); color: var(--offwhite); }
.cta-band .btn-secondary { background: transparent; color: var(--offwhite); border-color: rgba(244, 239, 231, 0.45); }
.cta-band .btn-secondary:hover { background: var(--offwhite); color: var(--navy); border-color: var(--offwhite); }