/* ==========================================================================
   IKV Finservices — Components
   Buttons, navigation, editorial index, timeline, accordion, forms, footer.
   ========================================================================== */

/* ==========================================================================
   1. Buttons

   Every variant declares a rest state and a hover state, and the two are
   never close enough to each other for the button to lose its edge.

   The previous system sent every variant to a white fill with a navy label
   on hover. On the white and mist sections that is a white button on a white
   page: the primary button faded to a shadowless rectangle and the ghost
   button vanished outright. Hover now deepens or lightens the fill in place
   and never fades toward the page background.

   Colour lives entirely in custom properties, so a dark ground re-themes
   every variant from one block (see the dark-ground rules in global.css)
   instead of each variant hard-coding a second `color:` declaration.
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-ink);
  --btn-hover-bg: transparent;
  --btn-hover-fg: var(--c-ink);
  --btn-hover-border: var(--c-ink);
  --btn-shadow: var(--shadow-btn);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
  --btn-bg: var(--btn-disabled-fill);
  --btn-fg: var(--btn-disabled-label);
  --btn-border: var(--btn-disabled-line);
  box-shadow: none;
  pointer-events: none;
}

/* Primary: navy fill with a gold keyline. Hover deepens the navy to
   --c-navy-700 and warms the keyline to pale gold, so the fill always
   separates from a white or mist section. */
.btn--primary {
  --btn-bg: var(--c-navy);
  --btn-fg: #fff;
  --btn-border: var(--c-gold);
  --btn-hover-bg: var(--c-navy-700);
  --btn-hover-fg: #fff;
  --btn-hover-border: var(--c-gold-200);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
}

/* Gold: the brand emphasis. Hover lightens the gold instead of emptying it,
   keeping the navy label on a fill that is still clearly gold. */
.btn--gold {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-navy-900);
  --btn-border: var(--c-gold);
  --btn-hover-bg: var(--c-gold-300);
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: var(--c-gold);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
}

/* Ghost on a light ground: an outlined button that inverts to a navy fill on
   hover. That is a visible state change, where the old white fill was not. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-navy);
  --btn-border: rgba(7, 29, 73, 0.35);
  --btn-hover-bg: var(--c-navy);
  --btn-hover-fg: #fff;
  --btn-hover-border: var(--c-gold);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
}

/* Ghost on a dark ground: white label and a light outline at rest, gold fill
   on hover. A gold fill stays legible on navy and on the hero photograph,
   where a white fill used to punch a hole in the image. */
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.55);
  --btn-hover-bg: var(--c-gold);
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: var(--c-gold);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
}

/* Hover depth. Gated on a real pointer and on motion being welcome, so a
   tapped button on a touch device does not stay stuck in its hover state
   and nothing moves for a visitor who asked for reduced motion. The colour
   change above is not motion and still applies. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(var(--btn-lift));
    box-shadow: var(--btn-shadow);
  }
}

/* Compact header CTA: fits the bar height beside the nav toggle. */
.btn--header {
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .btn--header { display: none; }
}

.btn--link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  justify-content: flex-start;
  color: var(--c-link-hover);
}
.btn--link::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease-out);
}
/* The link button already sits on the hover colour at rest, so the hover
   feedback is the underline and the arrow, not a colour change. */
.btn--link:hover,
.btn--link:focus-visible { transform: none; color: var(--c-link-hover); }
.btn--link:hover::after,
.btn--link:focus-visible::after { transform: translateX(4px); }

/* Arrow that appears on the right of a text link. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--c-blue);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.link-arrow::after { content: "\2192"; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover,
.link-arrow:focus-visible { border-bottom-color: currentColor; color: var(--c-link-hover); }
.link-arrow:hover::after,
.link-arrow:focus-visible::after { transform: translateX(4px); }

/* ==========================================================================
   2. Utility bar
   ========================================================================== */
.utility-bar {
  background: var(--c-navy-900);
  color: #fff;
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--utility-h);
  flex-wrap: wrap;
}
.utility-bar__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.utility-bar__list li { margin: 0; }
.utility-bar a { color: #fff; text-decoration: none; }
.utility-bar a:hover { color: var(--c-gold-300); text-decoration: underline; }
.utility-bar__tagline { letter-spacing: 0.06em; }

@media (max-width: 767.98px) {
  .utility-bar__tagline { display: none; }
  .utility-bar__inner { justify-content: center; min-height: 40px; }
}

/* ==========================================================================
   3. Header and primary navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-md);
}
.site-header.is-menu-open { background: #fff; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--c-navy);
  flex-shrink: 0;
}
.brand:hover { color: var(--c-navy); }
.brand img {
  height: 64px;
  width: auto;
  object-fit: contain;
  min-width: 200px;
}
@media (max-width: 575.98px) {
  .brand img {
    height: 48px;
    width: auto;
    min-width: 150px;
  }
}
.brand__tag {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-top: 2px;
}

/* --- Desktop nav -------------------------------------------------------- */
.site-nav { display: flex; align-items: center; gap: var(--sp-5); }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list > li { margin: 0; position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.25rem;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--c-link-hover); }
/* The nav label is already navy at rest, so a navy hover colour was a no-op.
   The gold underline carries the hover state instead, matching the current
   page marker. */
@media (hover: hover) {
  .site-nav__link:hover { border-bottom-color: var(--c-gold); }
}
.site-nav__link[aria-current="page"],
.site-nav__link.is-current { color: var(--c-navy); border-bottom-color: var(--c-gold); font-weight: 600; }

.site-nav__caret { width: 10px; height: 10px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
[aria-expanded="true"] > .site-nav__link .site-nav__caret { transform: rotate(180deg); }

/* --- Dropdown ----------------------------------------------------------- */
.has-dropdown > .site-nav__link::after {
  content: none;
}
.dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 340px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-gold);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) 0;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown__group + .dropdown__group {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--rule-hair);
}
.dropdown__title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-slate);
  padding: 0 var(--sp-5) var(--sp-2);
  margin: 0;
}
.dropdown__list { list-style: none; margin: 0; padding: 0; }
.dropdown__list li { margin: 0; }
.dropdown__link {
  display: block;
  padding: 0.5rem var(--sp-5);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown__link:hover { background: var(--c-mist); color: var(--c-link-hover); }
.dropdown__link[aria-current="page"] { color: var(--c-blue); font-weight: 600; }
.dropdown__desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-slate);
  font-weight: 400;
}

/* --- Header controls ---------------------------------------------------- */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-4); }

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--c-navy);
  transition: background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) {
  .nav-toggle:hover {
    background: var(--c-mist);
    border-color: var(--c-navy);
    color: var(--c-navy);
  }
}
.nav-toggle[aria-expanded="true"] {
  background: var(--c-mist);
  border-color: var(--c-navy);
}
.nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Mobile panel ------------------------------------------------------- */
@media (max-width: 1099.98px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: var(--z-mobile-nav);
    display: block;
    background: #fff;
    padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li { border-bottom: var(--rule-hair); }

  .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1.0625rem;
    border-bottom: 0;
    min-height: 44px;
  }
  .site-nav__link[aria-current="page"] { border-bottom: 0; }

  /* Accordion-style sub navigation on small screens. */
  .dropdown {
    position: static;
    transform: none;
    min-width: 0;
    border: 0;
    border-top: 0;
    box-shadow: none;
    padding: 0 0 var(--sp-4);
    background: transparent;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-dropdown.is-open > .dropdown { display: block; }
  .has-dropdown:hover > .dropdown { display: none; }
  .has-dropdown.is-open:hover > .dropdown { display: block; }
  .dropdown__group + .dropdown__group { margin-top: 0; padding-top: var(--sp-3); }
  .dropdown__link { padding: 0.6rem 0 0.6rem var(--sp-4); border-left: 2px solid var(--c-border); }
  .dropdown__link:hover { background: transparent; border-left-color: var(--c-gold); }

}

/* Backdrop behind the open mobile panel. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 29, 73, 0.45);
  /* Sits below the sticky header's stacking context so the open panel, which
     lives inside that context, always paints above the backdrop. */
  z-index: var(--z-nav-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   4. Editorial index (solutions)
   ========================================================================== */
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list > li { margin: 0; border-bottom: var(--rule-hair); }
.index-list > li:first-child { border-top: var(--rule-hair); }

.index-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.index-item:hover {
  color: var(--c-ink);
  background: linear-gradient(90deg, rgba(217, 164, 65, 0.09), rgba(217, 164, 65, 0));
  padding-left: var(--sp-3);
}
.index-item__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.index-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 2px;
  line-height: 1.25;
}
.index-item__desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.index-item__cta {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.index-item:hover .index-item__cta,
.index-item:focus-visible .index-item__cta { opacity: 1; transform: translateX(0); }
.index-item__cta::after { content: "\2192"; margin-left: 0.4rem; }

@media (max-width: 767.98px) {
  .index-item { grid-template-columns: 2.25rem 1fr; }
  .index-item__cta { display: none; }
}

.index-item--muted .index-item__title { color: var(--c-slate); }

/* --- Feature panel ------------------------------------------------------ */
.feature-panel {
  background: var(--c-navy);
  color: rgba(255, 255, 255, 0.8);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.feature-panel::after {
  content: "";
  position: absolute;
  inset: auto -20% -55% auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.18), rgba(217, 164, 65, 0) 70%);
  pointer-events: none;
}
.feature-panel h3 { color: #fff; margin-bottom: var(--sp-3); }
.feature-panel__kicker {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-300);
  display: block;
  margin-bottom: var(--sp-3);
}

/* --- Editorial two/three column blocks ---------------------------------- */
.info-col { height: 100%; }
.info-col__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--sp-3);
}
.info-col h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.info-col p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.info-col--bordered {
  border-top: 2px solid var(--c-navy);
  padding-top: var(--sp-4);
}
.section--navy .info-col--bordered, .section--navy-800 .info-col--bordered { border-top-color: var(--c-gold); }
.section--navy .info-col p, .section--navy-800 .info-col p { color: rgba(255, 255, 255, 0.72); }

/* --- Stat / metric display (verified values only) ----------------------- */
.stat { border-left: 2px solid var(--c-gold); padding-left: var(--sp-4); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-navy);
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-xs); color: var(--color-text-muted); display: block; margin-top: var(--sp-2); }
@media (max-width: 767.98px) {
  .stat__value { text-align: center; }
  .stat__label { text-align: center; }
}

/* ==========================================================================
   5. Trust strip
   ========================================================================== */
.trust-strip {
  border-block: var(--rule-hair);
  /* Background (white + grid treatments) is owned by global.css surfaces. */
  padding-block: var(--sp-6);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  /* Top-aligned so every icon and title shares one line; centering let
     items with shorter descriptions drift up and down the row. */
  align-items: start;
}
@media (max-width: 991.98px) {
  .trust-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .trust-strip__inner { grid-template-columns: 1fr; }
}
.trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust-item > div { min-width: 0; }
.trust-item__icon { flex: none; width: 28px; height: 28px; color: var(--c-blue); }
.trust-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 2px;
}
.trust-item__desc { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   6. Process timeline
   ========================================================================== */
.process { position: relative; }
.process__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.process__list::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-border);
}
.process__list > li { margin: 0; position: relative; padding-top: 0; }
.process__marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-blue);
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-4);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.process__item.is-visible .process__marker { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.section--navy .process__list::before, .section--navy-800 .process__list::before { background: rgba(255, 255, 255, 0.2); }
.section--navy .process__marker, .section--navy-800 .process__marker { background: var(--c-navy); border-color: rgba(255, 255, 255, 0.3); color: var(--c-gold-300); }
.section--navy .process__item.is-visible .process__marker, .section--navy-800 .process__item.is-visible .process__marker { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy-900); }
.process__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; margin: 0 0 var(--sp-2); }
.process__desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.section--navy .process__desc, .section--navy-800 .process__desc { color: rgba(255, 255, 255, 0.72); }

/* Animated draw line, only present when JavaScript/GSAP is available. */
.process__progress {
  position: absolute;
  top: 15px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .process__list { grid-template-columns: 1fr; gap: 0; }
  .process__list::before {
    top: 0;
    bottom: 0;
    left: 15px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .process__progress { top: 0; left: 15px; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top center; }
  .process__item {
    padding-left: 3.5rem;
    padding-bottom: var(--sp-6);
  }
  .process__item:last-child { padding-bottom: 0; }
  .process__marker { position: absolute; left: 0; top: 0; }
}

/* ==========================================================================
   7. Accordion (FAQ)
   ========================================================================== */
.accordion { border-top: var(--rule-hair); }
.accordion__item { border-bottom: var(--rule-hair); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out);
}
/* The trigger text is navy at rest and --c-link-hover is navy too, so the old
   hover rule changed nothing. It now takes a tinted fill; the chevron is
   already gold, so it reads as part of the same state. No inset bar: an
   inset shadow would need padding that would shift the text on hover. */
@media (hover: hover) {
  .accordion__trigger:hover {
    background: var(--c-mist-deep);
    color: var(--c-navy);
  }
}
.accordion__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  position: relative;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--c-gold);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.accordion__icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.accordion__icon::after { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); opacity: 0; }
.accordion__panel { overflow: hidden; }
.accordion__panel-inner {
  padding: 0 3rem var(--sp-5) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 62ch;
}
.accordion__panel[hidden] { display: none; }

/* Fallback: with JS disabled the panel is simply rendered open. */
.no-js .accordion__panel { display: block !important; }

/* FAQ search */
.faq-search { position: relative; max-width: 520px; }
.faq-search input {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.faq-search input:focus-visible { border-color: var(--c-blue-600); }
.faq-count { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--sp-3); }
.faq-empty { display: none; padding: var(--sp-5) 0; color: var(--color-text-muted); }
.faq-empty.is-visible { display: block; }

/* ==========================================================================
   8. Forms
   ========================================================================== */
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.form-label .req { color: var(--c-alert); margin-left: 2px; }
.form-hint { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--sp-2); display: block; }

.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea.form-control { min-height: 140px; resize: vertical; }
.form-control:hover, .form-select:hover { border-color: #b9c5db; }
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--c-blue-600);
  box-shadow: var(--focus-ring);
}
.form-control::placeholder { color: #8a95a9; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23526078' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

.field { margin-bottom: var(--sp-5); }
.field__error {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-alert);
  margin-top: var(--sp-2);
}
.field.has-error .field__error { display: flex; }
.field.has-error .form-control,
.field.has-error .form-select { border-color: var(--c-alert); }
.field__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; }

/* Consent checkbox */
.checkbox-field { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--c-blue);
}
.checkbox-field label { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; flex: 1 1 auto; min-width: 0; }
/* The error message wraps onto its own row, aligned with the label text —
   without this it squeezes in as a third flex item beside the checkbox. */
.checkbox-field .field__error {
  flex: 1 1 100%;
  margin-left: calc(20px + var(--sp-3));
}

/* Honeypot — visually and programmatically removed from view. */
.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Form status messages */
.form-status {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
  border-left: 3px solid;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #eef7f1; border-color: var(--c-green); color: #0c4f2c; }
.form-status--error { background: #fdf1f0; border-color: var(--c-alert); color: #7c1810; }
.form-status--pending { background: var(--c-mist); border-color: var(--c-blue); color: var(--c-navy); }

.submit-state { display: inline-flex; align-items: center; gap: var(--sp-3); }
.submit-state[aria-hidden="true"] { visibility: hidden; }

/* ==========================================================================
   9. Calculators
   ========================================================================== */
.calc { border: var(--rule-hair); background: #fff; }
.calc__form { padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }
.calc__result {
  background: var(--c-navy);
  color: rgba(255, 255, 255, 0.8);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.calc__result h3 { color: #fff; }
.calc__primary {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-2);
  word-break: break-word;
}
.calc__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-sm);
}
.calc__row dt { color: rgba(255, 255, 255, 0.68); margin: 0; }
.calc__row dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.calc__assumptions {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
}
.calc-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.calc-tab {
  min-height: 44px;
  padding: 0.5rem var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
/* A border-colour change alone was almost invisible on the white calculator
   panel; the tab now takes a tint and a gold keyline under the pointer. */
@media (hover: hover) {
  .calc-tab:not([aria-selected="true"]):hover {
    background: var(--c-mist);
    border-color: var(--c-gold);
    color: var(--c-navy);
  }
}
.calc-tab[aria-selected="true"] { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.calc-panel[hidden] { display: none; }

/* Two-column calculator body: compact form beside the result panel. */
.calc {
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.calc__columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 1.25rem + 2vw, 2.5rem);
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .calc__columns { grid-template-columns: 1fr; }
}
/* The card padding already frames the form, so the form drops its own
   inset and its last field drops trailing margin — both columns then
   share one clean top and bottom edge. */
.calc .calc__form {
  padding: 0;
  min-width: 0;
}
.calc__form .field:last-child {
  margin-bottom: 0;
}
.calc__row {
  align-items: baseline;
}
.calc__result [data-calc-caption] {
  margin-bottom: var(--sp-4);
}
.calc__noscript {
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
  border-left: 3px solid var(--c-gold);
  background: var(--c-mist);
  font-size: var(--fs-sm);
}
.calc__result dl {
  margin: 0;
  width: 100%;
}

/* ==========================================================================
   10. Comparison table
   ========================================================================== */
.table-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table-compare caption { text-align: left; font-size: var(--fs-xs); color: var(--color-text-muted); padding-bottom: var(--sp-3); }
.table-compare th,
.table-compare td {
  text-align: left;
  padding: var(--sp-4);
  border-bottom: var(--rule-hair);
  vertical-align: top;
}
.table-compare thead th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  white-space: nowrap;
}
.table-compare tbody th { font-weight: 600; color: var(--c-ink); width: 24%; }
.table-compare tbody tr:nth-child(even) { background: var(--c-mist); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   11. Team / advisor
   ========================================================================== */
.person { display: flex; gap: var(--sp-5); align-items: flex-start; height: 100%; }
.person__photo {
  flex: none;
  width: 108px;
  aspect-ratio: 3 / 4;
  background: var(--c-mist-deep);
  border: 1px solid var(--c-border);
  object-fit: cover;
}
.person__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; margin: 0 0 2px; }
.person__role {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
.person__bio { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
@media (max-width: 575.98px) { .person { flex-direction: column; } .person__photo { width: 96px; } }

/* ==========================================================================
   12. Final CTA
   ========================================================================== */
.cta-final {
  background: var(--c-navy);
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  overflow: hidden;
  /* Navy ground without the section--navy tag, so the blue and hover tokens
     are remapped here or links turn dark-on-dark. */
  --c-blue: var(--c-gold-300);
  --c-blue-600: var(--c-gold-300);
  --c-link-hover: #fff;
}
.cta-final__motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.cta-final h2 { color: #fff; max-width: 24ch; }
.cta-final .lead { color: rgba(255, 255, 255, 0.78); max-width: 46ch; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.footer {
  background: #fff;
  border-top: var(--rule-hair);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.footer h2, .footer h3 { color: var(--c-navy); }
.footer__top {
  padding-block: var(--section-y) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
/* Footer logo - PNG with transparency */
.footer__logo {
  width: 340px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .footer__logo {
    width: 200px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .footer__logo {
    width: 250px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer__logo {
    width: 300px;
  }
}
.footer__brand-desc { color: var(--color-text-muted); max-width: 34ch; }
.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--sp-3); }
.footer__list a { color: var(--c-slate); text-decoration: none; }
.footer__list a:hover { color: var(--c-link-hover); text-decoration: underline; }
.footer__contact li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer__contact svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--c-gold); }
/* Text column owns wrapping: long lines keep a hanging indent under the
   text (never the icon), and the office label sits on its own sub-line. */
.footer__contact-text { min-width: 0; flex: 1 1 auto; text-wrap: pretty; }
.footer__contact-sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.footer__contact a { color: var(--c-navy); text-decoration: none; }
.footer__contact a:hover { color: var(--c-link-hover); text-decoration: underline; }

/* Footer columns - use flexbox for better alignment */
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Risk disclosure — legible, never a tiny grey footnote. */
.risk-note {
  border: 1px solid var(--c-gold-200);
  background: #fff;
  padding: var(--sp-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-7);
}
.risk-note__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #8a6512;
  margin: 0 0 var(--sp-3);
}
.risk-note p { font-size: var(--fs-sm); line-height: 1.65; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.risk-note p:last-child { margin-bottom: 0; }

.footer__legal {
  border-top: var(--rule-hair);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.footer__legal-links li { margin: 0; }
.footer__legal a { color: var(--c-slate); text-decoration: none; }
.footer__legal a:hover { color: var(--c-link-hover); text-decoration: underline; }

/* ==========================================================================
   14. Breadcrumb / page hero
   ========================================================================== */
.page-hero {
  background: var(--c-navy);
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  overflow: hidden;
  --c-blue: var(--c-gold-300);
  --c-blue-600: var(--c-gold-300);
  --c-link-hover: #fff;
}
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--c-gold-300); }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--fs-xs);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.6); }
.breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, 0.35); }
.breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-gold-300); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.6); }

.breadcrumb--light li { color: var(--c-slate); }
.breadcrumb--light li + li::before { color: #b9c5db; }
.breadcrumb--light a { color: var(--c-blue); }
.breadcrumb--light a:hover { color: var(--c-link-hover); }
.breadcrumb--light [aria-current="page"] { color: var(--c-slate); }

/* ==========================================================================
   15. Notice / callout
   ========================================================================== */
.notice {
  border-left: 3px solid var(--c-gold);
  background: var(--c-mist);
  padding: var(--sp-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
}
.notice--alert { border-left-color: var(--c-alert); }
.notice__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; margin: 0 0 var(--sp-2); }
.notice p:last-child { margin-bottom: 0; }

.definition-list { margin: 0; }
.definition-list dt {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy);
  margin-top: var(--sp-4);
}
.definition-list dt:first-child { margin-top: 0; }
.definition-list dd { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--sp-1) 0 0; }

/* Disclosure body copy used on legal pages. */
.legal-body { max-width: 76ch; }
.legal-body h2 { margin-top: var(--sp-7); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin-top: var(--sp-5); font-size: var(--fs-h4); }
.legal-body p, .legal-body li { font-size: var(--fs-body); color: #33405c; }
.legal-body ul { padding-left: 1.25rem; }
.legal-body__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-bottom: var(--rule-hair);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
}

/* ==========================================================================
   16. 404
   ========================================================================== */
.error-page { min-height: 60vh; display: flex; align-items: center; }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-mist-deep);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.04em;
}

/* ==========================================================================
   17. Motion primitives (GSAP adds the transform; CSS keeps text visible
       when JavaScript is unavailable)
   ========================================================================== */
.reveal { opacity: 1; }
.js-anim .reveal { opacity: 0; transform: translateY(22px); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }

.reveal-group > * { opacity: 1; }
.js-anim .reveal-group > * { opacity: 0; transform: translateY(18px); }
.js-anim .reveal-group.is-in > * { opacity: 1; transform: none; }

.reveal-mask { clip-path: inset(0 0 0 0); }
.js-anim .reveal-mask { clip-path: inset(0 0 100% 0); }
.js-anim .reveal-mask.is-in { clip-path: inset(0 0 0 0); }

/* Rows of the investment index and the process steps reveal in sequence. */
.js-anim [data-index-reveal] > * { opacity: 0; transform: translateY(14px); }
.js-anim [data-index-reveal].is-in > * { opacity: 1; transform: none; }
.js-anim [data-process-item] { opacity: 0; transform: translateY(12px); }
.js-anim [data-process-item].is-visible { opacity: 1; transform: none; }

/* Hero copy stays visible by default; GSAP animates from an explicit
   initial state so a failed or blocked script can never hide the headline. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal,
  .js-anim .reveal-group > *,
  .js-anim .reveal-mask { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}