/* ==========================================================================
   IKV Finservices — Global styles
   Base typography, layout primitives and shared section patterns.
   ========================================================================== */

/* --- Reset / base ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

  /* Native smooth scrolling for in-page anchor jumps. Ordinary wheel,
     trackpad, touch and keyboard scrolling are never intercepted. */
  scroll-behavior: smooth;
  /* Keep anchored targets clear of the sticky header on native jumps. */
  scroll-padding-top: calc(var(--sticky-offset) + 16px);
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Locks background scroll while the mobile navigation is open. */
body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
h5 { font-size: var(--fs-sm); letter-spacing: 0.02em; }
h6 { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-blue); text-decoration-color: rgba(18, 63, 145, 0.35); text-underline-offset: 3px; }
a:hover { color: var(--c-link-hover); }

/* Icon sprites: hidden by default, revealed only where referenced. */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  vertical-align: -0.125em;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: var(--rule-hair); margin: var(--sp-6) 0; opacity: 1; }

small { font-size: var(--fs-xs); }
strong, b { font-weight: 600; }

::selection { background: var(--c-navy); color: #fff; }

/* --- Focus visibility --------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-blue-600);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.on-navy :focus-visible,
.footer :focus-visible,
.site-nav :focus-visible {
  outline-color: var(--c-gold-300);
  box-shadow: 0 0 0 3px rgba(236, 203, 133, 0.4);
}

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 2000;
  background: var(--c-navy);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* --- Layout primitives -------------------------------------------------- */
.container-ikv {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--sm { padding-block: var(--section-y-sm); }
.section--tight-top { padding-block-start: 0; }
/* Section surfaces rotate so no two neighbours share a background:
   white (default) -> Cool Mist -> Deep Mist -> Midnight Navy. Light
   surfaces keep the ink tokens untouched, so only the dark surfaces need
   the companion overrides further down this file. */
.section--mist { background: var(--color-surface-alt); }
.section--mist-deep { background: var(--c-mist-deep); }
.section--navy { background: var(--color-surface-inverse); }
.section--navy-800 { background: var(--c-navy-800); }

/* --- White-section grid treatments ---------------------------------------
   Every white surface carries the dotted grid and the isometric grid as
   layered background images (painted under the content, so text can never
   be covered). Kept faint so copy stays the focus; pure CSS, no assets,
   no motion, no print or reduced-motion concerns.
   ---------------------------------------------------------------------- */
.trust-strip {
  background-color: #fff;
  background-image:
    radial-gradient(circle, rgba(18, 63, 145, 0.14) 1.2px, transparent 1.4px),
    linear-gradient(30deg, rgba(18, 63, 145, 0.05) 1px, transparent 1px),
    linear-gradient(150deg, rgba(18, 63, 145, 0.05) 1px, transparent 1px);
  background-size: 24px 24px, 54px 54px, 54px 54px;
}
.about-feature {
  background-color: #fff;
  background-image:
    linear-gradient(30deg, rgba(18, 63, 145, 0.06) 1px, transparent 1px),
    linear-gradient(150deg, rgba(18, 63, 145, 0.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(18, 63, 145, 0.1) 1.1px, transparent 1.3px);
  background-size: 54px 54px, 54px 54px, 24px 24px;
}

/* Reusable twin of the About treatment for the other even sections. */
.bg-grid {
  background-color: #fff;
  background-image:
    linear-gradient(30deg, rgba(18, 63, 145, 0.06) 1px, transparent 1px),
    linear-gradient(150deg, rgba(18, 63, 145, 0.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(18, 63, 145, 0.1) 1.1px, transparent 1.3px);
  background-size: 54px 54px, 54px 54px, 24px 24px;
}

/* --- Dark section surfaces ----------------------------------------------
   On a dark surface the shared text, border and fill tokens are remapped
   once, here, rather than overridden component by component. Every rule that
   already reads a token adapts, so a dark section never ends up with ink
   copy on navy or a pale hairline that disappears into the background.

   `--on-dark-text` and friends stay available for the handful of places
   that hard-code a hex value rather than a token.
   ---------------------------------------------------------------------- */
.section--navy,
.section--navy-800 {
  --color-text: #fff;
  --color-text-muted: rgba(255, 255, 255, 0.74);
  --c-ink: #fff;
  --c-slate: rgba(255, 255, 255, 0.74);
  --c-border: rgba(255, 255, 255, 0.18);
  --rule-hair: 1px solid rgba(255, 255, 255, 0.18);
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-alt: rgba(255, 255, 255, 0.06);
  --c-mist: rgba(255, 255, 255, 0.06);
  --c-mist-deep: rgba(255, 255, 255, 0.1);
  /* Both blue tokens remap to light gold here. Without this, any component
     that reaches for --c-blue inside a navy section renders dark blue on a
     dark ground and disappears. */
  --c-blue: var(--c-gold-300);
  --c-blue-600: var(--c-gold-300);
  --c-link-hover: #fff;
  color: rgba(255, 255, 255, 0.82);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4,
.section--navy-800 h1,
.section--navy-800 h2,
.section--navy-800 h3,
.section--navy-800 h4 { color: #fff; }

/* Components that hard-code a hex rather than reading a token, so the remap
   above cannot reach them. Each needs its own light-on-dark treatment. */
.section--navy :is(.prose, .legal-body) p,
.section--navy-800 :is(.prose, .legal-body) p,
.section--navy :is(.prose, .legal-body) li,
.section--navy-800 :is(.prose, .legal-body) li { color: rgba(255, 255, 255, 0.78); }

/* Notices sit on a tinted fill. On dark that fill becomes a translucent
   panel so the left rule and title still carry the meaning. */
.section--navy :is(.notice, .notice--positive, .notice--caution),
.section--navy-800 :is(.notice, .notice--positive, .notice--caution) {
  background: rgba(255, 255, 255, 0.06);
}
.section--navy .notice__title,
.section--navy-800 .notice__title,
.section--navy .notice--positive .notice__title,
.section--navy-800 .notice--positive .notice__title,
.section--navy .notice--caution .notice__title,
.section--navy-800 .notice--caution .notice__title { color: #fff; }
.section--navy .callout-note,
.section--navy-800 .callout-note,
.section--navy .notice--positive .callout-note,
.section--navy-800 .notice--positive .callout-note,
.section--navy .notice--caution .callout-note,
.section--navy-800 .notice--caution .callout-note { color: rgba(255, 255, 255, 0.74); }

/* Tables alternate rows with a mist fill, which vanishes on navy. */
.section--navy .table-compare tbody tr:nth-child(even),
.section--navy-800 .table-compare tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); }
.section--navy .table-compare thead th,
.section--navy-800 .table-compare thead th { color: #fff; }
.section--navy .table-compare tbody th,
.section--navy-800 .table-compare tbody th { color: #fff; }

/* Calculator and form panels are opaque white cards by default; on a dark
   section they become translucent so the section surface still reads. */
.section--navy :is(.calc, .contact-form, .faq-search input),
.section--navy-800 :is(.calc, .contact-form, .faq-search input) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.section--navy :is(.form-control, .form-select, .faq-search input),
.section--navy-800 :is(.form-control, .form-select, .faq-search input) { color: #fff; }
.section--navy :is(.form-label, .calc__label),
.section--navy-800 :is(.form-label, .calc__label) { color: #fff; }

/* Buttons on a dark ground.

   The light-ground variants in components.css assume a white or mist section.
   On navy these are restated once, for every dark block: primary becomes a
   gold fill with a navy label (the strongest pairing available on navy, and on
   the hero photograph) and turns white on hover, while the outlined
   secondary buttons keep a light outline and fill white on hover. Gold stays
   reserved for the primary, so hovering the secondary never puts two identical
   gold buttons side by side. Nothing fades toward the background any more,
   which is what made the previous treatment disappear on pale sections.

   The surface class is spelled out rather than wrapped in :where(), because
   :where() contributes zero specificity: these rules have to out-specify
   the .btn--* variants in components.css, which is loaded later. */
.hero .btn, .section--navy .btn, .section--navy-800 .btn, .cta-final .btn,
.global-visual .btn, .page-hero .btn, .cat-hero .btn {
  --btn-shadow: var(--shadow-btn-dark);
}
.hero .btn--primary, .section--navy .btn--primary, .section--navy-800 .btn--primary,
.cta-final .btn--primary, .global-visual .btn--primary, .page-hero .btn--primary,
.cat-hero .btn--primary {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-navy-900);
  --btn-border: var(--c-gold);
  --btn-hover-bg: #fff;
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: #fff;
}
.hero .btn--ghost, .section--navy .btn--ghost, .section--navy-800 .btn--ghost,
.cta-final .btn--ghost, .global-visual .btn--ghost, .page-hero .btn--ghost,
.cat-hero .btn--ghost {
  --btn-fg: #fff;
  --btn-border: var(--btn-dark-line);
  --btn-hover-bg: #fff;
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: #fff;
}
/* On a dark ground the white fill is the highest contrast available, so it is
   the hover for the outlined secondary buttons too. Gold is reserved for the
   primary at rest: filling the secondary with gold on hover would put two
   identical gold buttons side by side the moment the pointer crossed one. */
.hero .btn--ghost-light, .section--navy .btn--ghost-light, .section--navy-800 .btn--ghost-light,
.cta-final .btn--ghost-light, .global-visual .btn--ghost-light {
  --btn-hover-bg: #fff;
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: #fff;
}
/* Gold already reads as gold on navy; the hover takes it to white so the
   state change is unmistakable against a dark ground. */
.hero .btn--gold, .section--navy .btn--gold, .section--navy-800 .btn--gold,
.cta-final .btn--gold, .global-visual .btn--gold, .page-hero .btn--gold,
.cat-hero .btn--gold {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-navy-900);
  --btn-border: var(--c-gold);
  --btn-hover-bg: #fff;
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: #fff;
}
.hero .btn--confirm, .section--navy .btn--confirm, .section--navy-800 .btn--confirm,
.cta-final .btn--confirm, .global-visual .btn--confirm {
  --btn-hover-bg: var(--c-gold);
  --btn-hover-fg: var(--c-navy-900);
  --btn-hover-border: var(--c-gold);
}

/* Links and index rows read --c-blue, which does not clear contrast on navy.
   Buttons are excluded: a .btn carries its own fill and label, and letting
   this rule colour the label would put white text on a white hover fill. */
.section--navy :is(a:not(.btn), .link-arrow, .index-item__cta),
.section--navy-800 :is(a:not(.btn), .link-arrow, .index-item__cta) { color: var(--c-gold-300); }
.section--navy :is(a:not(.btn), .link-arrow, .index-item__cta):hover,
.section--navy-800 :is(a:not(.btn), .link-arrow, .index-item__cta):hover { color: #fff; }
.section--navy .index-item,
.section--navy-800 .index-item,
.section--navy .related__item,
.section--navy-800 .related__item { color: #fff; }

/* Numbered markers and eyebrow rules need the light gold on dark. */
.section--navy :is(.index-item__num, .flow li::before, .info-col__num),
.section--navy-800 :is(.index-item__num, .flow li::before, .info-col__num) { color: var(--c-gold-300); }

/* Timeline bars read a mist fill. */
.section--navy .timeline-band__bar,
.section--navy-800 .timeline-band__bar { background: rgba(255, 255, 255, 0.12); }

/* Gold eyebrows and abbrs need the light gold on dark. */
.section--navy :is(.compare-3__abbr, .flow li::before, .principles__key),
.section--navy-800 :is(.compare-3__abbr, .flow li::before, .principles__key) { color: var(--c-gold-300); }

/* Figures and rules that key off --c-navy, which the remap does not touch:
   navy text and navy borders disappear against a navy surface. */
.section--navy :is(.stat__value, .atlas__group-title, .scheme-list__abbr, .compare-3__col, .definition-list dt),
.section--navy-800 :is(.stat__value, .atlas__group-title, .scheme-list__abbr, .compare-3__col, .definition-list dt) { color: #fff; }
.section--navy .atlas__group-title,
.section--navy-800 .atlas__group-title { border-bottom-color: rgba(255, 255, 255, 0.35); }
.section--navy .compare-3__col,
.section--navy-800 .compare-3__col { border-top-color: var(--c-gold); }
.section--navy :is(.principles li, .service-list li, .scheme-list li),
.section--navy-800 :is(.principles li, .service-list li, .scheme-list li) { border-color: rgba(255, 255, 255, 0.18); }

/* The global-visual section sits on a navy gradient but is not tagged
   section--navy, so none of the remaps above reach it. Without this block
   its h2, checklist copy and text link render in dark ink on navy. */
.global-visual {
  --color-text: #fff;
  --color-text-muted: rgba(255, 255, 255, 0.74);
  --c-ink: #fff;
  --c-slate: rgba(255, 255, 255, 0.74);
  --c-border: rgba(255, 255, 255, 0.18);
  --rule-hair: 1px solid rgba(255, 255, 255, 0.18);
  --c-blue: var(--c-gold-300);
  --c-blue-600: var(--c-gold-300);
  --c-link-hover: #fff;
  color: rgba(255, 255, 255, 0.82);
}
.global-visual h1,
.global-visual h2,
.global-visual h3,
.global-visual h4 { color: #fff; }
.global-visual .check-list strong { color: #fff; }
/* Buttons keep their own --btn-fg treatment; only text links go gold. */
.global-visual a:not(.btn),
.global-visual .link-arrow { color: var(--c-gold-300); }
.global-visual a:not(.btn):hover,
.global-visual .link-arrow:hover { color: #fff; }

.section--bordered { border-top: var(--rule-hair); }

/* Vertical hairline that separates editorial columns. */
.rule-vertical {
  border-left: var(--rule-hair);
  padding-left: var(--sp-5);
}
@media (max-width: 767.98px) {
  .rule-vertical { border-left: 0; border-top: var(--rule-hair); padding-left: 0; padding-top: var(--sp-5); }
}

/* --- Section headings --------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--sp-4);
}
.section--navy .eyebrow,
.section--navy-800 .eyebrow { color: var(--c-gold-300); }

.section-heading { max-width: 46rem; }
.section-heading h2 { margin-bottom: var(--sp-4); }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center .lead { margin-inline: auto; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}
.section--navy .lead,
.section--navy-800 .lead { color: rgba(255, 255, 255, 0.78); }

/* Lead copy on the dark page headers needs the same light treatment. */
.page-hero .lead,
.cat-hero .lead,
.global-visual .lead,
.cta-final .lead { color: rgba(255, 255, 255, 0.84); }

.text-muted { color: var(--color-text-muted); }
/* Bootstrap ships `.text-muted{...!important}` (dark grey), which beats the
   token remap above on dark surfaces — dark grey on navy is unreadable.
   This re-asserts the light treatment wherever muted text sits on navy. */
.section--navy .text-muted,
.section--navy-800 .text-muted { color: rgba(255, 255, 255, 0.8) !important; }
.text-navy { color: var(--c-navy); }
.text-gold { color: var(--c-gold); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.font-display { font-family: var(--font-display); }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }

/* --- Spacing utilities ---------------------------------------------------- */
/* Site spacing scale. These deliberately override Bootstrap's own mb-*
   utilities so that markup never needs an inline style. */
.m-0  { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 1.5rem !important; }
.mb-3 { margin-bottom: 2rem !important; }
.mb-4 { margin-bottom: 2.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-6 { margin-bottom: 3.5rem !important; }
.mt-2 { margin-top: 1.5rem !important; }
.mt-3 { margin-top: 2rem !important; }

/* --- Text utilities ------------------------------------------------------- */
.text-inverse { color: #fff; }
.text-inverse-muted { color: rgba(255, 255, 255, 0.74); }
.text-gold-300 { color: var(--c-gold-300); }
.brandline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
.page-hero__body { padding-bottom: 3rem; }
.cta-final__inner { position: relative; z-index: 1; }
.frame--on-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.calc__label {
  color: var(--c-gold-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.timeline-band__fill--sm { width: 38%; }
.timeline-band__fill--md { width: 62%; }
.timeline-band__fill--lg { width: 82%; }
.leader--stacked { grid-template-columns: 1fr; }

/* --- Decorative rules --------------------------------------------------- */
.rule-gold {
  width: 56px;
  height: 2px;
  background: var(--c-gold);
  border: 0;
  margin: 0 0 var(--sp-5);
  opacity: 1;
}

/* --- Figures / financial numerals --------------------------------------- */
.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Media frames ------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  /* Default ratio: the frame reserves space before the image loads, which
     keeps layout shift off the critical rendering path. */
  aspect-ratio: 4 / 3;
  background: var(--c-mist-deep);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--tall { aspect-ratio: 4 / 5; }
.frame--portrait { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--square { aspect-ratio: 1 / 1; }

/* --- Grid helpers ------------------------------------------------------- */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .footer, .cta-final, .utility-bar, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}