/* ═══════════════════════════════════════════════════════════════
   Real Win Immigration Services — Style Fixes
   Schibsted Grotesk / Inter, deep navy, warm gold, cream/dark bg.

   RULE: Never set color on html/body/* globally.
         All colour rules are scoped to .app.light or [data-theme="dark"].
═══════════════════════════════════════════════════════════════ */

/* ── Font stack ─────────────────────────────────────────────── */
html, body, .app {
  font-family: 'Schibsted Grotesk', 'Inter', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.wordmark, .eyebrow, .tile-name,
.trust-n, .stat-n, .btn, .navlink {
  font-family: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif !important;
}

/* ── Brand CSS variables ─────────────────────────────────────── */
:root {
  --brand-navy:      #142833;
  --brand-navy-2:    #1f3141;
  --brand-gold:      #d99d41;
  --brand-gold-deep: #bf7e20;
  --brand-cream:     #fbf7f3;
  --brand-cream-2:   #f1ece6;
}

/* ══════════════════════════════════════════════════════════════
   TILE / COUNTRY CARDS
   Always sit on a dark photo — text must always be white
══════════════════════════════════════════════════════════════ */
.tile-name, .tile-name *,
.tile-cap,
.tile-foot, .tile-price, .tile-apply {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}

.tile-body {
  background: linear-gradient(transparent, rgba(0,0,0,0.72)) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE
══════════════════════════════════════════════════════════════ */
.app.light {
  --bg:          #fbf7f3;
  --bg2:         #f3eee8;
  --surface:     #ffffff;
  --surface2:    #f6f2ee;
  --line:        rgba(19,35,49,0.12);
  --ink:         #132331;
  --ink2:        #2d4052;
  --muted:       #586a7b;
  --gold:        #d99d41;
  --gold2:       #bf7e20;
  --trust-green: #1c7d5e;
  --pkg-no:      #c5352f;
  background-color: #fbf7f3 !important;
  color: #132331 !important;
}

/* ── Light: body text ──────────────────────────────────────── */
.app.light p,
.app.light li,
.app.light dd,
.app.light td {
  color: #233647 !important;
}

/* ── Light: headings ──────────────────────────────────────── */
.app.light h1,
.app.light h2,
.app.light h3,
.app.light h4,
.app.light h5,
.app.light h6 {
  color: #132331 !important;
  letter-spacing: -0.03em !important;
}

/* ── Light: helper classes ─────────────────────────────────── */
.app.light .muted   { color: #586a7b !important; }
.app.light .ink2    { color: #2d4052 !important; }
.app.light .eyebrow { color: #d99d41 !important; }

/* ── Light: nav ────────────────────────────────────────────── */
.app.light .navlink       { color: #132331 !important; }
.app.light .navlink:hover { color: #d99d41 !important; }
.app.light .navlink.on    { color: #d99d41 !important; }

/* ── Light: section / wrap text ────────────────────────────── */
.app.light .sec p,
.app.light .sec li,
.app.light .wrap p {
  color: #2d4052 !important;
}

/* ── Light: cards ─────────────────────────────────────────── */
.app.light .card {
  background: #ffffff !important;
  border-color: rgba(19,35,49,0.12) !important;
}
.app.light .card h3,
.app.light .card h4,
.app.light .card h5 {
  color: #132331 !important;
}
.app.light .card p,
.app.light .card li,
.app.light .card td {
  color: #2d4052 !important;
}

/* ── Light: chip filters ───────────────────────────────────── */
.app.light .chip:not(.on) {
  color: #2d4052 !important;
  border-color: rgba(19,35,49,0.18) !important;
}
.app.light .chip.on {
  color: #ffffff !important;
}

/* ── Light: input / label ──────────────────────────────────── */
.app.light .label { color: #132331 !important; }
.app.light .input { color: #132331 !important; background: #ffffff !important; }

/* ── Light: comparison table ───────────────────────────────── */
.app.light .vs,
.app.light .vs th,
.app.light .vs td,
.app.light .vs .vs-feat,
.app.light .vs .vs-us,
.app.light .vs .vs-them {
  color: #132331 !important;
}

/* ── Light: steps ──────────────────────────────────────────── */
.app.light .step h3  { color: #132331 !important; }
.app.light .step p   { color: #2d4052 !important; }
.app.light .stepno   { color: #d99d41 !important; }

/* ── Light: FAQ ────────────────────────────────────────────── */
.app.light details summary { color: #132331 !important; }
.app.light details p       { color: #2d4052 !important; }

/* ── Light: review cards ───────────────────────────────────── */
.app.light .review-card                { background: #ffffff !important; border-color: rgba(19,35,49,0.1) !important; }
.app.light .review-card .fw6           { color: #132331 !important; }
.app.light .review-card .muted         { color: #586a7b !important; }
.app.light .review-card p              { color: #2d4052 !important; }
.app.light .review-card .review-src    { color: #586a7b !important; }
.app.light .review-card:hover          { border-color: #d99d41 !important; }

/* ── Light: tipbox ─────────────────────────────────────────── */
.app.light .tipbox {
  background: #eaf3fa !important;
  border: 1px solid rgba(19,35,49,0.1) !important;
  color: #2d4052 !important;
  border-radius: 0.6rem !important;
  padding: 1rem 1.2rem !important;
}
.app.light .tipbox p,
.app.light .tipbox a { color: #2d4052 !important; }

/* ── Light: badge / trust-link ─────────────────────────────── */
.app.light .badge       { color: #132331 !important; }
.app.light .trust-link  { color: #132331 !important; }
.app.light .trust-stars { color: #d99d41 !important; }
.app.light .trust-arrow { color: #586a7b !important; }

/* ── Light: pkgtick (policy pages checkmarks) ──────────────── */
.app.light .pkgtick { color: #1c7d5e !important; }

/* ── Light: testimonials / review cards ───────────────────── */
.app.light .review-name,
.app.light .review-text { color: #132331 !important; }

/* ── Light: ondark sections (dark bg, always white text) ────── */
.app.light .ondark,
.app.light .glassband {
  /* keep their own dark background */
}
.ondark p, .ondark span:not(.gold), .ondark li  { color: rgba(240,240,240,0.88) !important; }
.ondark h1, .ondark h2, .ondark h3, .ondark h4  { color: #ffffff !important; }
.ondark .muted                                   { color: rgba(220,220,220,0.75) !important; }
.ondark .ink2                                    { color: rgba(230,230,230,0.88) !important; }
.ondark .btn-ghost {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

/* ── Light: hero (always over photo) ──────────────────────── */
.hero h1, .hero h2, .hero h3, .hero .heroface,
.ondark h1, .ondark h2, .ondark .heroface,
.screen.hero h1, .screen.hero h2,
[data-screen-label] .hero h1,
[data-screen-label] .hero h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 5px rgba(0,0,0,0.25) !important;
}

/* ── Hero / ondark: EVERYTHING white, no exceptions ───────── */
.hero *,
.hero p, .hero p *,
.hero span, .hero div,
.hero h1, .hero h2, .hero h3,
.hero .ink2, .hero .muted,
.hero .trust-stars, .hero .trust-arrow, .hero .trust-link,
.hero .trust-n, .hero .badge,
.ondark p, .ondark p *,
.ondark span:not([style*="background"]),
.ondark div,
.ondark .ink2, .ondark .muted,
.ondark .trust-n, .ondark .badge,
section.hero p,
section.ondark p,
.screen.hero *,
[data-screen-label] .hero * {
  color: #ffffff !important;
}

/* Explicit overrides so light-mode class rules can't win */
.app.light .hero .ink2,
.app.light .hero .muted,
.app.light .hero p,
.app.light .hero span,
.app.light .hero div,
.app.light .hero .trust-stars,
.app.light .hero .trust-arrow,
.app.light .hero .trust-link,
.app.light .hero .trust-n,
.app.light .hero .badge,
.app.light .hero .stat-n,
.app.light section.hero p,
.app.light .ondark .ink2,
.app.light .ondark .muted,
.app.light .ondark p,
.app.light .ondark span,
.app.light .ondark .trust-n,
.app.light .ondark .badge {
  color: #ffffff !important;
}

.hero .btn,
.ondark .btn,
.screen.hero .btn,
[data-screen-label] .hero .btn {
  border-radius: 999px !important;
}

.heroface {
  text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* ── Light: FOOTER ─────────────────────────────────────────── */
/*
   The footer uses classes: .footer  (outer wrapper)
   Inside: .wrap > .grid > .footcol (columns with h5 + a links)
   Bottom bar: .footer-bottom with two <span>s
   Fixed dark gradient background and #a2c8e0 text in BOTH modes.
*/
.app.light .footer,
.app.light footer {
  background: linear-gradient(180deg,#1a1510,#110d09) !important;
  color: #a2c8e0 !important;
  border-top: none !important;
}

/* Footer: all text elements */
.app.light .footer h5,
.app.light .footer h4,
.app.light .footer h3,
.app.light footer h5,
.app.light footer h4,
.app.light footer h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

.app.light .footer p,
.app.light .footer span,
.app.light .footer li,
.app.light .footer div,
.app.light footer p,
.app.light footer span,
.app.light footer li,
.app.light footer div {
  color: #a2c8e0 !important;
}

.app.light .footer a,
.app.light footer a {
  color: #a2c8e0 !important;
  text-decoration: none !important;
  display: block;
  line-height: 1.9 !important;
}

.app.light .footer a:hover,
.app.light footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Footer wordmark */
.app.light .footer .wordmark,
.app.light footer .wordmark {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Footer blurb / contact text */
.app.light .footer .footer-blurb,
.app.light .footer .foot-contact span,
.app.light .footer .foot-contact a {
  color: #a2c8e0 !important;
}

/* Footer icons */
.app.light .footer .foot-ic {
  color: #d99d41 !important;
  margin-right: 6px !important;
}

/* Footer muted */
.app.light .footer .muted,
.app.light footer .muted {
  color: #7aaec8 !important;
}

/* Footer divider line */
.app.light .footer .divider,
.app.light footer .divider {
  border-color: rgba(162,200,224,0.15) !important;
}

/* Footer bottom bar */
.app.light .footer .footer-bottom,
.app.light footer .footer-bottom {
  color: #7aaec8 !important;
  font-size: 0.78rem !important;
}

.app.light .footer .footer-bottom span,
.app.light footer .footer-bottom span {
  color: #7aaec8 !important;
}

/* ── Light: buttons ────────────────────────────────────────── */
.btn {
  font-family: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  padding: 0.9rem 1.45rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 10px 18px rgba(20,40,51,0.12) !important;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}
.btn-gold:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

.app.light .btn-ghost {
  background: rgba(20,40,51,0.05) !important;
  border: 1px solid rgba(20,40,51,0.18) !important;
  color: #132331 !important;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .app,
html[data-theme="dark"] .app.light {
  --bg:          #101b26 !important;
  --bg2:         #172a38 !important;
  --surface:     #15273a !important;
  --surface2:    #1c3244 !important;
  --line:        rgba(255,255,255,0.08) !important;
  --ink:         #edf4fb !important;
  --ink2:        #c8dced !important;
  --muted:       #90aabf !important;
  --gold:        #e2b35d !important;
  --gold2:       #d99d41 !important;
  --trust-green: #00b67a !important;
  --pkg-no:      #e5645f !important;
  background-color: #101b26 !important;
  color: #edf4fb !important;
}

/* ── Dark: body text ──────────────────────────────────────── */
html[data-theme="dark"] .app p,
html[data-theme="dark"] .app li,
html[data-theme="dark"] .app dd,
html[data-theme="dark"] .app td {
  color: #c8dced !important;
}

/* ── Dark: headings ────────────────────────────────────────── */
html[data-theme="dark"] .app h1,
html[data-theme="dark"] .app h2,
html[data-theme="dark"] .app h3,
html[data-theme="dark"] .app h4,
html[data-theme="dark"] .app h5,
html[data-theme="dark"] .app h6 {
  color: #edf4fb !important;
}

/* ── Dark: helper classes ──────────────────────────────────── */
html[data-theme="dark"] .app .muted   { color: #90aabf !important; }
html[data-theme="dark"] .app .ink2    { color: #c8dced !important; }
html[data-theme="dark"] .app .eyebrow { color: #e2b35d !important; }

/* ── Dark: nav ─────────────────────────────────────────────── */
html[data-theme="dark"] .app .navlink        { color: #edf4fb !important; }
html[data-theme="dark"] .app .navlink:hover  { color: #e2b35d !important; }
html[data-theme="dark"] .app .navlink.on     { color: #e2b35d !important; }

/* ── Dark: input / label ───────────────────────────────────── */
html[data-theme="dark"] .app .label { color: #c8dced !important; }
html[data-theme="dark"] .app .input {
  color: #edf4fb !important;
  background: #1c3244 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── Dark: cards ───────────────────────────────────────────── */
html[data-theme="dark"] .app .card {
  background: #15273a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .app .card h3,
html[data-theme="dark"] .app .card h4,
html[data-theme="dark"] .app .card h5 {
  color: #edf4fb !important;
}
html[data-theme="dark"] .app .card p,
html[data-theme="dark"] .app .card li,
html[data-theme="dark"] .app .card span:not(.gold) {
  color: #c8dced !important;
}

/* ── Dark: chip filters ────────────────────────────────────── */
html[data-theme="dark"] .app .chip:not(.on) {
  color: #c8dced !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html[data-theme="dark"] .app .chip.on {
  color: #101b26 !important;
}

/* ── Dark: comparison table ────────────────────────────────── */
html[data-theme="dark"] .app .vs,
html[data-theme="dark"] .app .vs *,
html[data-theme="dark"] .app .vs th,
html[data-theme="dark"] .app .vs td,
html[data-theme="dark"] .app .vs .vs-feat,
html[data-theme="dark"] .app .vs .vs-us,
html[data-theme="dark"] .app .vs .vs-them {
  color: #edf4fb !important;
}
html[data-theme="dark"] .app .vs th,
html[data-theme="dark"] .app .vs td {
  background: transparent !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* ── Dark: steps ────────────────────────────────────────────── */
html[data-theme="dark"] .app .step h3 { color: #edf4fb !important; }
html[data-theme="dark"] .app .step p  { color: #c8dced !important; }
html[data-theme="dark"] .app .stepno  { color: #e2b35d !important; }

/* ── Dark: FAQ ──────────────────────────────────────────────── */
html[data-theme="dark"] .app details summary { color: #edf4fb !important; }
html[data-theme="dark"] .app details p       { color: #c8dced !important; }

/* ── Dark: review cards ─────────────────────────────────────── */
html[data-theme="dark"] .app .review-card             { background: #15273a !important; border-color: rgba(255,255,255,0.08) !important; }
html[data-theme="dark"] .app .review-card .fw6        { color: #edf4fb !important; }
html[data-theme="dark"] .app .review-card .muted      { color: #90aabf !important; }
html[data-theme="dark"] .app .review-card p           { color: #c8dced !important; }
html[data-theme="dark"] .app .review-card .review-src { color: #90aabf !important; }

/* ── Dark: tipbox ────────────────────────────────────────────── */
html[data-theme="dark"] .app .tipbox {
  background: #1c3244 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #c8dced !important;
}
html[data-theme="dark"] .app .tipbox p,
html[data-theme="dark"] .app .tipbox a { color: #c8dced !important; }

/* ── Dark: badge / trust-link ───────────────────────────────── */
html[data-theme="dark"] .app .badge       { color: #c8dced !important; }
html[data-theme="dark"] .app .trust-link  { color: #edf4fb !important; }
html[data-theme="dark"] .app .trust-stars { color: #e2b35d !important; }
html[data-theme="dark"] .app .trust-arrow { color: #90aabf !important; }

/* ── Dark: pkgtick ───────────────────────────────────────────── */
html[data-theme="dark"] .app .pkgtick { color: #00b67a !important; }

/* ── Dark: section / wrap text ─────────────────────────────── */
html[data-theme="dark"] .app .sec p,
html[data-theme="dark"] .app .sec li,
html[data-theme="dark"] .app .wrap p {
  color: #c8dced !important;
}

/* ── Dark: FOOTER ──────────────────────────────────────────── */
html[data-theme="dark"] .app .footer,
html[data-theme="dark"] .app footer {
  background: linear-gradient(180deg,#1a1510,#110d09) !important;
  color: #a2c8e0 !important;
  border-top: none !important;
}

html[data-theme="dark"] .app .footer h5,
html[data-theme="dark"] .app .footer h4,
html[data-theme="dark"] .app .footer h3,
html[data-theme="dark"] .app footer h5,
html[data-theme="dark"] .app footer h4,
html[data-theme="dark"] .app footer h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

html[data-theme="dark"] .app .footer p,
html[data-theme="dark"] .app .footer li,
html[data-theme="dark"] .app .footer div,
html[data-theme="dark"] .app footer p,
html[data-theme="dark"] .app footer li,
html[data-theme="dark"] .app footer div {
  color: #a2c8e0 !important;
}

html[data-theme="dark"] .app .footer span,
html[data-theme="dark"] .app footer span {
  color: #a2c8e0 !important;
}

html[data-theme="dark"] .app .footer a,
html[data-theme="dark"] .app footer a {
  color: #a2c8e0 !important;
  display: block;
  line-height: 1.9 !important;
}

html[data-theme="dark"] .app .footer a:hover,
html[data-theme="dark"] .app footer a:hover {
  color: #ffffff !important;
}

html[data-theme="dark"] .app .footer .wordmark,
html[data-theme="dark"] .app footer .wordmark {
  color: #ffffff !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .app .footer .foot-ic,
html[data-theme="dark"] .app footer .foot-ic {
  color: #d99d41 !important;
}

html[data-theme="dark"] .app .footer .muted,
html[data-theme="dark"] .app footer .muted {
  color: #7aaec8 !important;
}

html[data-theme="dark"] .app .footer .divider,
html[data-theme="dark"] .app footer .divider {
  border-color: rgba(162,200,224,0.15) !important;
}

html[data-theme="dark"] .app .footer .footer-bottom,
html[data-theme="dark"] .app footer .footer-bottom {
  color: #7aaec8 !important;
}

html[data-theme="dark"] .app .footer .footer-bottom span,
html[data-theme="dark"] .app footer .footer-bottom span {
  color: #7aaec8 !important;
}

/* ── Dark: buttons ──────────────────────────────────────────── */
html[data-theme="dark"] .app .btn-ghost {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: #edf4fb !important;
}

/* ── Dark: nav bar ──────────────────────────────────────────── */
html[data-theme="dark"] .nav {
  background: rgba(16,27,38,0.88) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   APPLY DRAWER / SPLITFORM — animation panel text visibility
   The splitmedia right panel uses var(--ink2), var(--muted) etc.
   Ensure these are readable in both modes.
══════════════════════════════════════════════════════════════ */

/* Light mode: all text in splitform/splitmedia must be dark */
.app.light .splitpage,
.app.light .splitform,
.app.light .splitmedia,
.app.light .fstep,
.app.light .tipbox,
.app.light .package-live-preview,
.app.light .package-preview-features,
.app.light .drawer-panel {
  color: #1c2b38 !important;
}

.app.light .splitform p,
.app.light .splitform label,
.app.light .splitform span,
.app.light .splitform h1,
.app.light .splitform h2,
.app.light .splitform h3,
.app.light .splitmedia p,
.app.light .splitmedia span,
.app.light .splitmedia h2,
.app.light .splitmedia h3,
.app.light .splitmedia label,
.app.light .fstep,
.app.light .fstep *,
.app.light .tipbox,
.app.light .package-live-preview p,
.app.light .package-live-preview span,
.app.light .package-live-preview h2,
.app.light .package-preview-features span,
.app.light .drawer-panel p,
.app.light .drawer-panel span,
.app.light .drawer-panel h2,
.app.light .drawer-panel h3,
.app.light .drawer-panel label {
  color: #1c2b38 !important;
}

/* muted text in drawer */
.app.light .splitform .muted,
.app.light .splitmedia .muted,
.app.light .drawer-panel .muted,
.app.light .package-live-preview .muted {
  color: #586a7b !important;
}

/* Dark mode: ensure text stays light in the drawer */
html[data-theme="dark"] .app .splitform p,
html[data-theme="dark"] .app .splitform span,
html[data-theme="dark"] .app .splitform h1,
html[data-theme="dark"] .app .splitform h2,
html[data-theme="dark"] .app .splitform h3,
html[data-theme="dark"] .app .splitmedia p,
html[data-theme="dark"] .app .splitmedia span,
html[data-theme="dark"] .app .splitmedia h2,
html[data-theme="dark"] .app .fstep,
html[data-theme="dark"] .app .fstep *,
html[data-theme="dark"] .app .tipbox,
html[data-theme="dark"] .app .package-live-preview p,
html[data-theme="dark"] .app .package-live-preview span,
html[data-theme="dark"] .app .package-live-preview h2,
html[data-theme="dark"] .app .package-preview-features span,
html[data-theme="dark"] .app .drawer-panel p,
html[data-theme="dark"] .app .drawer-panel span,
html[data-theme="dark"] .app .drawer-panel h2,
html[data-theme="dark"] .app .drawer-panel h3,
html[data-theme="dark"] .app .drawer-panel label {
  color: #c8dced !important;
}

html[data-theme="dark"] .app .splitform .muted,
html[data-theme="dark"] .app .splitmedia .muted,
html[data-theme="dark"] .app .drawer-panel .muted,
html[data-theme="dark"] .app .package-live-preview .muted {
  color: #90aabf !important;
}

/* ══════════════════════════════════════════════════════════════
   SOCIAL ICONS — consistent circle sizing
══════════════════════════════════════════════════════════════ */
.footer .social,
footer .social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(19,35,49,0.08) !important;
  transition: background 0.2s ease !important;
  flex-shrink: 0 !important;
}

.footer .social:hover,
footer .social:hover {
  background: rgba(19,35,49,0.16) !important;
}

html[data-theme="dark"] .app .footer .social,
html[data-theme="dark"] .app footer .social {
  background: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .app .footer .social:hover,
html[data-theme="dark"] .app footer .social:hover {
  background: rgba(255,255,255,0.15) !important;
}

.footer .social svg,
footer .social svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER LAYOUT — both modes
   footcol is the column container used inside .footer .grid
══════════════════════════════════════════════════════════════ */
.footer .footcol {
  display: flex;
  flex-direction: column;
}

.footer .footcol h5 {
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.footer .footcol a {
  font-size: 0.88rem !important;
  line-height: 1.9 !important;
  text-decoration: none !important;
}

.footer .foot-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.76rem !important;
  padding-bottom: 24px !important;
}


/* ── Plane animation: mouse-driven ──────────────────────────────────────────── */
.rplane {
  /* Allow CSS transform to work on SVG <g> element */
  transform-origin: 0 0;
  transition: opacity .3s;
  will-change: transform;
}
.rplane .plane-bob {
  transform-origin: 50% 50%;
}
/* Roadmap SVG wrapper: catch pointer events for tooltip */
.roadmap-canvas {
  cursor: crosshair;
}
/* Step cards: start hidden, animate in as plane passes */
.roadmap-cards .road-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.roadmap-cards .road-card.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Runway tooltip */
#rwis-runway-tip {
  font-family: 'Schibsted Grotesk', Inter, system-ui, sans-serif;
  font-size: .82rem;
  pointer-events: none;
  user-select: none;
}
html[data-theme="dark"] #rwis-runway-tip {
  background: var(--surface, #232019) !important;
  color: var(--ink, #f5ebe0) !important;
  border-color: var(--line, rgba(245,235,224,.13)) !important;
}