/* ==========================================================================
   IKV Finservices — Accent system
   Light gold and growth green applied across shared components.

   Contrast discipline (enforced by the QA pass):
     --c-gold / --c-gold-200 / --c-green-400 are decorative only — rules,
     borders, icons, fills and underlines. They do not reach 4.5:1 on white.
     --c-green (4.6:1) and --c-green-900 may carry text.
     --c-gold-300 is for use on Midnight Navy and other dark surfaces only.

   Green marks a positive, verified or completed state. It is never used to
   imply a return, a projection or a performance guarantee.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Text and icon accents
   -------------------------------------------------------------------------- */
.accent-gold { color: var(--c-gold); }
.accent-gold-light { color: var(--c-gold-300); }
.accent-green { color: var(--c-green); }
.accent-green-light { color: var(--c-green-400); }

.on-dark .accent-gold,
.accent-gold-on-dark { color: var(--c-gold-300); }

/* --------------------------------------------------------------------------
   2. Square-cornered tags
   Small, restrained markers. Square corners, per the brand direction —
   deliberately not pills.
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.tag--gold {
  color: #8a6512;
  background: #fbf3df;
  border-color: var(--c-gold-200);
}
.tag--green {
  color: var(--c-green-900);
  background: var(--c-green-100);
  border-color: #bfe3cd;
}
.tag--navy {
  color: var(--c-navy);
  background: #eef2f9;
  border-color: var(--c-border);
}
.tag--gold-on-dark {
  color: var(--c-gold-300);
  background: rgba(217, 164, 65, 0.14);
  border-color: rgba(217, 164, 65, 0.45);
}
.tag--green-on-dark {
  color: #8ddbb0;
  background: rgba(47, 163, 107, 0.16);
  border-color: rgba(47, 163, 107, 0.5);
}

.tag__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   3. Accent rules
   Thin horizontal marks used to separate and punctuate.
   -------------------------------------------------------------------------- */
.rule-gold-soft {
  height: 3px;
  width: 100%;
  max-width: 72px;
  background: linear-gradient(90deg, var(--c-gold-300), var(--c-gold-200), transparent);
  border: 0;
  margin: 0 0 var(--sp-4);
  opacity: 1;
}
.rule-green-soft {
  height: 3px;
  width: 100%;
  max-width: 72px;
  background: linear-gradient(90deg, var(--c-green-400), #bfe3cd, transparent);
  border: 0;
  margin: 0 0 var(--sp-4);
  opacity: 1;
}
.rule-gold-soft--center { margin-inline: auto; }
.rule-green-soft--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Callouts
   The neutral notice already exists. These add a positive variant (what is
   included, what was verified, what happens next) and a caution variant.
   -------------------------------------------------------------------------- */
.notice--positive {
  border-left-color: var(--c-green-400);
  background: var(--c-green-100);
}
.notice--positive .notice__title { color: var(--c-green-900); }
.notice--caution {
  border-left-color: var(--c-gold);
  background: #fdf8ed;
}
.notice--caution .notice__title { color: #8a6512; }
/* A small qualifier line beneath a callout title. */
.callout-note {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-slate);
  margin-top: calc(-1 * var(--sp-2));
}
.notice--caution .callout-note { color: #8a6512; }
.notice--positive .callout-note { color: var(--c-green-900); }

/* --------------------------------------------------------------------------
   5. Checklist variants
   `check-list` uses a gold diamond. These add a confirmed state in green
   and a caution state.
   -------------------------------------------------------------------------- */
.check-list--confirm li::before {
  content: "";
  width: 11px;
  height: 6px;
  top: 0.45em;
  border: 0;
  border-left: 2px solid var(--c-green-400);
  border-bottom: 2px solid var(--c-green-400);
  transform: rotate(-45deg);
}
.check-list--caution li::before {
  border-top-color: var(--c-gold);
  border-right-color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   6. Risk severity coding
   Used only for describing how much capital is at risk, never for returns.
   The wording stays in the cell, so colour is never the only signal.
   -------------------------------------------------------------------------- */
.risk-level {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--fs-xs);
}
.risk-level::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--c-slate);
}
.risk-level--higher::before { background: var(--c-alert); }
.risk-level--moderate::before { background: var(--c-gold); }
.risk-level--limited::before { background: var(--c-green-400); }

/* --------------------------------------------------------------------------
   7. Trust strip icons
   The four credibility statements gain a green confirmation mark.
   -------------------------------------------------------------------------- */
.trust-item__icon { color: var(--c-blue); }
.trust-item--positive .trust-item__icon { color: var(--c-green); }

/* --------------------------------------------------------------------------
   8. Index and feature panels
   -------------------------------------------------------------------------- */
.index-item__num { color: var(--c-gold); }
.index-item:hover .index-item__num { color: var(--c-green); }
.index-item:hover .index-item__cta { color: var(--c-link-hover); }

.feature-panel__kicker { color: var(--c-gold-300); }
.feature-panel__confirm {
  color: #8ddbb0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   9. Statistics
   -------------------------------------------------------------------------- */
.stat { border-left-color: var(--c-gold); }
.stat--green { border-left-color: var(--c-green-400); }
.stat--green .stat__value { color: var(--c-green-900); }

/* --------------------------------------------------------------------------
   10. Process timeline
   -------------------------------------------------------------------------- */
.process__marker { color: var(--c-blue); }
.process__item.is-visible .process__marker {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-gold-300);
}
.process__item--complete.is-visible .process__marker {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
}

/* --------------------------------------------------------------------------
   11. Accordion
   -------------------------------------------------------------------------- */
.accordion__icon::before,
.accordion__icon::after { background: var(--c-gold); }
/* The accordion trigger is a <button>. Its hover fill and label are set in
   components.css; the green label that used to sit here contradicted the
   accent rule in tokens.css - green marks a positive or completed state, not
   a pointer position. */

/* --------------------------------------------------------------------------
   12. Comparison table
   -------------------------------------------------------------------------- */
.table-compare thead th {
  color: var(--c-navy);
  border-bottom-color: var(--c-gold-300);
}
.table-compare tbody th { border-left: 2px solid var(--c-gold-200); }
.table-compare tbody tr:nth-child(4n+1) th { border-left-color: var(--c-green-400); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus { border-color: var(--c-green); }
.form-status--ok {
  background: var(--c-green-100);
  border-color: var(--c-green);
  color: var(--c-green-900);
}
.checkbox-field input[type="checkbox"]:checked { accent-color: var(--c-green); }

/* --------------------------------------------------------------------------
   14. Buttons
   A restrained green variant for actions that confirm something rather
   than push a product. Hover deepens the green: a white fill here would
   leave a green button on a mist section looking broken.
   -------------------------------------------------------------------------- */
.btn--confirm { --btn-bg: var(--c-green); --btn-fg: #fff; --btn-border: var(--c-green); }
.btn--confirm {
  --btn-hover-bg: var(--c-green-700);
  --btn-hover-fg: #fff;
  --btn-hover-border: var(--c-green-700);
}
.btn--confirm:hover,
.btn--confirm:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
}

/* --------------------------------------------------------------------------
   15. Editorial column numbers
   -------------------------------------------------------------------------- */
.info-col__num { color: var(--c-gold); }
.info-col--confirmed .info-col__num { color: var(--c-green); }

/* --------------------------------------------------------------------------
   16. Section headings and eyebrows
   -------------------------------------------------------------------------- */
.eyebrow { position: relative; padding-left: 0; }
.eyebrow--accented { display: flex; align-items: center; gap: 0.6rem; }
/* Centered section headings keep the gold marker, centred with the text. */
.section-heading--center .eyebrow--accented { justify-content: center; }
.section-heading--center .text-muted {
  max-width: 62ch;
  margin-inline: auto;
}
.eyebrow--accented::before {
  content: "";
  width: 22px;
  height: 2px;
  flex: none;
  background: var(--c-gold);
}
.eyebrow--accented-green::before { background: var(--c-green); }
.section--navy .eyebrow--accented::before,
.section--navy-800 .eyebrow--accented::before { background: var(--c-gold-300); }

/* Dark page headers always carry the light-gold marker, on every page type. */
.page-hero .eyebrow,
.cat-hero .eyebrow,
.cta-final .eyebrow,
.global-visual .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.page-hero .eyebrow::before,
.cat-hero .eyebrow::before,
.cta-final .eyebrow::before,
.global-visual .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  flex: none;
  background: var(--c-gold-300);
}

/* --------------------------------------------------------------------------
   17. Links

   Hover resolves to --c-link-hover (navy on light grounds, remapped to white
   on dark ones), not to growth green: green is reserved for confirmed or
   positive states and must not become a pointer decoration.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. Solution cards on the products index
   -------------------------------------------------------------------------- */
.related__item { border-top-color: var(--c-gold); }
.related__item:hover { border-top-color: var(--c-green-400); }

.scheme-list li { border-left: 2px solid var(--c-gold-200); }
.scheme-list li:nth-child(2n) { border-left-color: #bfe3cd; }

.compare-3__col { border-top-color: var(--c-navy); }
.compare-3__col:nth-child(3n+1) { border-top-color: var(--c-gold); }
.compare-3__col:nth-child(3n+2) { border-top-color: var(--c-green-400); }

/* --------------------------------------------------------------------------
   19. Selection and focus
   -------------------------------------------------------------------------- */
::selection { background: var(--c-green-900); color: #fff; }

:where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(19, 131, 74, 0.28);
}
.on-dark :where(a, button):focus-visible {
  outline-color: var(--c-gold-300);
  box-shadow: 0 0 0 3px rgba(236, 203, 133, 0.4);
}

/* --------------------------------------------------------------------------
   20. Featured category (mutual funds)
   Typography hierarchy, text legibility on navy, and staged motion:
   image settle, sheen sweep, then staggered key points.
   -------------------------------------------------------------------------- */
.mf-feature h2 {
  text-wrap: balance;
  max-width: 22ch;
}
.mf-feature .lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  max-width: 52ch;
}
.mf-feature em {
  color: var(--c-gold-300);
}
.mf-feature .definition-list dd {
  /* The shared muted token (0.74 white) is thin at small sizes on navy;
     this section steps it up while staying in the muted family. */
  color: rgba(255, 255, 255, 0.84);
  max-width: 52ch;
}

/* Key points read as a stepped list with a gold marker per item. */
.mf-points {
  display: grid;
  gap: var(--sp-4);
}
.mf-point {
  border-left: 2px solid var(--c-gold);
  padding-left: var(--sp-4);
}
.mf-point dt {
  margin-top: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.mf-point dd {
  margin-top: var(--sp-1);
}

/* Media: slow settle-zoom while the column reveals, gentle zoom on hover,
   and a one-pass light sheen for depth. */
.mf-media img {
  transform: scale(1);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}
.mf-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
}
.js-anim .mf-media img {
  transform: scale(1.09);
}
.js-anim .mf-feature .reveal.is-in .mf-media img {
  transform: scale(1);
}
.js-anim .mf-feature .reveal.is-in .mf-media::after {
  animation: mf-sheen 1.4s var(--ease-out) 0.35s 1 both;
}
.mf-media:hover img {
  transform: scale(1.035);
  transition-duration: 0.6s;
}
.js-anim .mf-feature .reveal.is-in .mf-media:hover img {
  transform: scale(1.035);
  transition-duration: 0.6s;
}
@keyframes mf-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* Points stagger in after the image has started settling. */
.js-anim .mf-feature .mf-point {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.js-anim .mf-feature .reveal.is-in .mf-point {
  opacity: 1;
  transform: none;
}
.js-anim .mf-feature .reveal.is-in .mf-point:nth-child(1) { transition-delay: 0.25s; }
.js-anim .mf-feature .reveal.is-in .mf-point:nth-child(2) { transition-delay: 0.38s; }
.js-anim .mf-feature .reveal.is-in .mf-point:nth-child(3) { transition-delay: 0.51s; }

@media (prefers-reduced-motion: reduce) {
  .mf-media img,
  .js-anim .mf-media img,
  .js-anim .mf-feature .mf-point {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .js-anim .mf-feature .reveal.is-in .mf-media::after {
    animation: none;
  }
  .mf-media::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   21. SIP habit section ("Discipline by design")
   Same motion language as the featured category: media settle, sheen,
   staggered stats. Plus margin resets Bootstrap's paragraph rhythm would
   otherwise double up between stat value and label.
   -------------------------------------------------------------------------- */
.sip-feature h2 {
  text-wrap: balance;
  max-width: 24ch;
}
.sip-feature .lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  max-width: 52ch;
}
.sip-feature .stat__value,
.sip-feature .stat__label {
  margin-bottom: 0;
}
.sip-feature .stat__label {
  color: rgba(255, 255, 255, 0.78);
  max-width: 30ch;
}

@media (max-width: 767.98px) {
  .sip-feature .eyebrow,
  .sip-feature h2,
  .sip-feature .lead,
  .sip-feature p {
    text-align: center;
  }
}

.sip-media img {
  transform: scale(1);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}
.sip-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
}
.js-anim .sip-media img {
  transform: scale(1.09);
}
.js-anim .sip-feature .reveal.is-in .sip-media img {
  transform: scale(1);
}
.js-anim .sip-feature .reveal.is-in .sip-media::after {
  animation: mf-sheen 1.4s var(--ease-out) 0.35s 1 both;
}
.sip-media:hover img,
.js-anim .sip-feature .reveal.is-in .sip-media:hover img {
  transform: scale(1.035);
  transition-duration: 0.6s;
}

/* Stat trio staggers in once the copy column has revealed. */
.js-anim .sip-feature .col-sm-4 {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.js-anim .sip-feature .reveal.is-in .col-sm-4 {
  opacity: 1;
  transform: none;
}
.js-anim .sip-feature .reveal.is-in .col-sm-4:nth-child(1) { transition-delay: 0.25s; }
.js-anim .sip-feature .reveal.is-in .col-sm-4:nth-child(2) { transition-delay: 0.38s; }
.js-anim .sip-feature .reveal.is-in .col-sm-4:nth-child(3) { transition-delay: 0.51s; }

@media (prefers-reduced-motion: reduce) {
  .sip-media img,
  .js-anim .sip-media img,
  .js-anim .sip-feature .col-sm-4 {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .js-anim .sip-feature .reveal.is-in .sip-media::after {
    animation: none;
  }
  .sip-media::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   22. Why IKV Finservices
   Type measure, brighter body copy, staged card entrances, and a hover
   lift. The lift lives on the inner card (GSAP tweens the outer columns,
   so a transition there would fight the entrance tween).
   -------------------------------------------------------------------------- */
.why-feature h2 {
  text-wrap: balance;
  max-width: 26ch;
}
.why-feature .lead {
  max-width: 62ch;
}
.why-feature .info-col p {
  color: rgba(255, 255, 255, 0.8);
}
.why-feature .info-col__num {
  font-variant-numeric: tabular-nums;
}
.why-feature .info-col {
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), border-color 0.45s var(--ease-out);
}
@media (hover: hover) {
  .why-feature .reveal-group.is-in > div:hover .info-col {
    transform: translateY(-4px);
    transition-delay: 0s;
  }
  .why-feature .reveal-group.is-in > div:hover .info-col--bordered {
    border-top-color: var(--c-gold-300);
  }
}

/* Cards rise in sequence once the group has revealed. */
.js-anim .why-feature .info-col {
  opacity: 0;
  transform: translateY(14px);
}
.js-anim .why-feature .reveal-group.is-in .info-col {
  opacity: 1;
  transform: none;
}
.js-anim .why-feature .reveal-group.is-in > div:nth-child(1) .info-col { transition-delay: 0.1s; }
.js-anim .why-feature .reveal-group.is-in > div:nth-child(2) .info-col { transition-delay: 0.2s; }
.js-anim .why-feature .reveal-group.is-in > div:nth-child(3) .info-col { transition-delay: 0.3s; }
.js-anim .why-feature .reveal-group.is-in > div:nth-child(4) .info-col { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .why-feature .info-col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   23. Process timeline ("How we work")
   Type measure plus hover feedback. The entrance choreography (scrubbed
   connector, marker pops, rising copy) lives in motion.js; this only adds
   the interactive layer, kept off the elements GSAP tweens.
   -------------------------------------------------------------------------- */
.process-feature h2 {
  text-wrap: balance;
  max-width: 30ch;
}
@media (hover: hover) {
  .process-feature .process__item:hover .process__marker {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.18);
  }
}

/* --------------------------------------------------------------------------
   24. About IKV Finservices
   SaaS-style split: statement copy with a 2-up proof grid beside an
   image carrying a floating brand card. Copy uses only verified claims —
   no invented metrics, history or credentials.
   -------------------------------------------------------------------------- */
.about-feature h2 {
  text-wrap: balance;
  max-width: 24ch;
}
.about-feature .lead {
  max-width: 54ch;
}
.about-points {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.about-points li {
  margin: 0;
  border-top: 2px solid var(--c-navy);
  padding-top: var(--sp-3);
}
.about-points strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 2px;
}
.about-points span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
@media (max-width: 575.98px) {
  .about-points { grid-template-columns: 1fr; }
}

/* Media with an overlapping brand card, static-stacked on mobile. */
.about-media {
  position: relative;
}
.about-media__frame img {
  transform: scale(1);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}
.js-anim .about-media__frame img {
  transform: scale(1.09);
}
.js-anim .about-feature .reveal.is-in .about-media__frame img {
  transform: scale(1);
}
.about-media__frame:hover img,
.js-anim .about-feature .reveal.is-in .about-media__frame:hover img {
  transform: scale(1.035);
  transition-duration: 0.6s;
}
.about-card {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  max-width: 19rem;
  background: var(--c-navy);
  border-left: 3px solid var(--c-gold);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 1.25rem 2.5rem rgba(7, 29, 73, 0.28);
}
.about-card__line {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-gold-300);
  margin: 0 0 var(--sp-2);
}
.about-card__note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
@media (max-width: 575.98px) {
  .about-card {
    position: static;
    max-width: none;
    margin-top: var(--sp-4);
  }
}

/* Proof grid staggers in; the brand card rises just after the image. */
.js-anim .about-feature .about-points li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.js-anim .about-feature .reveal.is-in .about-points li {
  opacity: 1;
  transform: none;
}
.js-anim .about-feature .reveal.is-in .about-points li:nth-child(1) { transition-delay: 0.2s; }
.js-anim .about-feature .reveal.is-in .about-points li:nth-child(2) { transition-delay: 0.29s; }
.js-anim .about-feature .reveal.is-in .about-points li:nth-child(3) { transition-delay: 0.38s; }
.js-anim .about-feature .reveal.is-in .about-points li:nth-child(4) { transition-delay: 0.47s; }
.js-anim .about-feature .about-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out) 0.45s, transform 0.6s var(--ease-out) 0.45s;
}
.js-anim .about-feature .reveal.is-in .about-card {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-media__frame img,
  .js-anim .about-media__frame img,
  .js-anim .about-feature .about-points li,
  .js-anim .about-feature .about-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   25. Insurance section
   -------------------------------------------------------------------------- */
.insurance-feature h2 {
  text-wrap: balance;
  max-width: 30ch;
}