/* ============================================================
   LIC SHOWCASE SITE — shared styles
   Built on the LIC design system tokens (styles.css).
   Vanilla CSS recreation of the system's component language.
   ============================================================ */

@import url("styles.css");

/* ============================================================
   PALETTE OVERRIDE — matched to the LIC recruitment email
   (navy + cream + orange/tan). Scoped to the website; the
   design-system cards keep their own tokens.
   ============================================================ */
:root {
  --lic-navy:        #1A2B4A;
  --lic-navy-deep:   #14223C;
  --lic-navy-soft:   #233A63;
  --lic-orange:      #D4621F;
  --lic-orange-deep: #B5511A;
  --lic-orange-soft: #E8A765;
  --lic-gold:        #E8A765;

  --cream-50:  #FDFAF3;
  --cream-100: #FAF5EC;
  --cream-200: #F5EDDB;
  --cream-300: #EDE0C8;
  --cream-400: #E3D4B5;
  --cream-500: #FBD89A;

  --ink-900: #1A2B4A;
  --ink-700: #574B3C;
  --ink-500: #8C7E6A;
  --ink-300: #B8A888;

  --border-subtle: #E3D4B5;
  --border-strong: #D8C7A4;
  --divider:       #E3D4B5;
  --focus-ring:    rgba(26,43,74,0.40);

  --navy-grad: linear-gradient(160deg, #1A2B4A 0%, #233A63 100%);
  --shadow-orange: 0 8px 20px rgba(212,98,31,0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--text-strong); }

/* paper grain backdrop */
.grain {
  background-color: var(--bg-page);
  background-image: radial-gradient(rgba(30,42,82,.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.wrap--narrow { max-width: 780px; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--tight { padding: clamp(32px, 5vw, 56px) 0; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font: var(--fw-bold) var(--text-xs)/1.2 var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--lic-orange);
}
.eyebrow--soft { color: var(--lic-orange-soft); }

/* ---------- Headings ---------- */
.h-display { font: var(--fw-bold) clamp(40px, 7vw, 72px)/1.02 var(--font-display); color: var(--lic-navy); letter-spacing: -0.02em; }
.h1 { font: var(--fw-bold) clamp(32px, 5.5vw, 52px)/1.05 var(--font-display); color: var(--lic-navy); letter-spacing: -0.01em; }
.h2 { font: var(--fw-bold) clamp(26px, 4vw, 40px)/1.1 var(--font-display); color: var(--lic-navy); }
.h3 { font: var(--fw-semibold) clamp(19px, 2.4vw, 24px)/1.2 var(--font-display); color: var(--lic-navy); }
.accent { color: var(--lic-orange); }
.lead { font: var(--fw-regular) clamp(16px, 2vw, 19px)/1.7 var(--font-body); color: var(--ink-700); }
.muted { color: var(--text-muted); }
.serif-em { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-bold); }
.script { font-family: var(--font-script); font-weight: var(--fw-bold); }

/* ---------- Buttons (mirrors Button.jsx) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--fw-bold) 15px/1.1 var(--font-body); letter-spacing: .01em;
  padding: 12px 28px; border: none; border-radius: var(--radius-pill);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  text-align: center;
}
.btn:active { transform: scale(.96); }
.btn:hover { filter: brightness(1.06); }
.btn--lg { padding: 16px 40px; font-size: 17px; }
.btn--sm { padding: 8px 18px; font-size: 14px; }
.btn--primary { background: var(--lic-orange); color: var(--text-on-orange); box-shadow: var(--shadow-orange); }
.btn--secondary { background: var(--lic-navy); color: var(--cream-200); box-shadow: var(--shadow-sm); }
.btn--soft { background: var(--cream-500); color: var(--lic-navy); }
.btn--ghost { background: transparent; color: var(--lic-navy); box-shadow: inset 0 0 0 2px var(--border-strong); }
.btn--inverse { background: var(--cream-200); color: var(--lic-navy); }

/* ---------- Tag / Badge ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: var(--fw-semibold) 13px/1.2 var(--font-body);
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--ink-700);
  box-shadow: inset 0 0 0 1.5px var(--border-subtle);
}
.tag .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: var(--fw-bold) 12px/1.3 var(--font-body); padding: 4px 11px;
  border-radius: var(--radius-pill); background: var(--lic-navy); color: var(--cream-200);
}

/* ---------- Card (mirrors Card.jsx) ---------- */
.card {
  position: relative; background: var(--surface-card);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border-subtle); padding: 24px; overflow: hidden;
}
.card--raised { box-shadow: var(--shadow-lg); }
.card__accent { position: absolute; top: 0; left: 0; right: 0; height: 6px; }

/* ---------- Flight path divider ---------- */
.flightpath { display: flex; align-items: center; width: 100%; }
.flightpath .dash { flex: 1; border-top: 2.5px dashed var(--border-strong); }
.flightpath--navy .dash { border-color: rgba(255,248,231,.45); }
.pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); flex-shrink: 0; }

/* ---------- Avatars ---------- */
.ava { width: 40px; height: 40px; border-radius: 50%; padding: 2.5px; display: inline-flex; flex-shrink: 0; }
.ava > span {
  width: 100%; height: 100%; border-radius: 50%; background: var(--cream-500);
  border: 2px solid var(--cream-100); display: flex; align-items: center; justify-content: center;
  font: var(--fw-semibold) 15px var(--font-display); color: var(--lic-navy);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,243,224,.86); backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--border-subtle);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(16px, 5vw, 40px); gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img {
  width: 46px; height: 46px; border-radius: 50%; background: var(--cream-50);
  box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--border-subtle);
  transition: transform var(--dur-base) var(--ease-bounce);
}
.brand:hover img { transform: rotate(-7deg) scale(1.06); }
.brand b { font: var(--fw-extra) 20px var(--font-display); color: var(--lic-navy); line-height: 1; display: block; letter-spacing: .01em; }
.brand small { display: block; margin-top: 3px; white-space: nowrap; font: var(--fw-semibold) 9px var(--font-serif); color: var(--ink-500); letter-spacing: .16em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  font: var(--fw-bold) 14px var(--font-body); color: var(--lic-navy);
  padding: 8px 14px; border-radius: var(--radius-pill); transition: color var(--dur-fast);
}
.nav__links a:hover { color: var(--lic-orange); }
.nav__links a.is-active { color: var(--lic-orange); }
.nav__right { display: flex; align-items: center; gap: 10px; }

/* passport counter pill */
.passport-pill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: var(--fw-bold) 13px var(--font-body); color: var(--lic-navy);
  background: var(--surface-raised); border: 1.5px solid var(--border-strong);
  padding: 7px 13px; border-radius: var(--radius-pill); transition: transform var(--dur-fast) var(--ease-bounce);
}
.passport-pill:hover { transform: translateY(-1px); }
.passport-pill .pp-icon { font-size: 14px; }
.passport-pill b { color: var(--lic-orange); }

.nav__ig {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; color: var(--lic-navy);
  background: var(--surface-raised); border: 1.5px solid var(--border-strong);
  transition: transform var(--dur-fast) var(--ease-bounce), color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.nav__ig svg { width: 19px; height: 19px; }
.nav__ig:hover { transform: translateY(-1px); color: var(--lic-orange); border-color: color-mix(in srgb, var(--lic-orange) 55%, transparent); }

.hamburger { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2.5px; background: var(--lic-navy); border-radius: 2px; margin: 4px 0; transition: .2s; }

/* ============================================================
   HERO
   ============================================================ */
.hero { background: var(--navy-grad); border-radius: 0 0 36px 36px; padding: clamp(40px, 7vw, 64px) 0 clamp(48px, 8vw, 70px); position: relative; overflow: hidden; }
.hero__inner { text-align: center; position: relative; z-index: 2; }

/* masthead cluster — logo coin orbited by drifting words + icons (email header) */
.lic-masthead { position: relative; width: min(360px, 84vw); height: 156px; margin: 0 auto 12px; z-index: 2; }
.lic-masthead__coin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; background: var(--cream-200);
  box-shadow: 0 10px 24px rgba(0,0,0,.30); display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 3;
}
.lic-masthead__coin img { width: 100%; height: 100%; object-fit: cover; }
.lic-masthead .fly-word {
  position: absolute; font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-weight: 700; font-size: 15px; white-space: nowrap; z-index: 2;
  animation-name: licDrift; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.lic-masthead .fly-icon {
  position: absolute; width: 21px; height: 21px; z-index: 2;
  animation-name: licDrift; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes licDrift { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lic-masthead .fly-word, .lic-masthead .fly-icon { animation: none; opacity: .95; } }

/* compact masthead for interior page headers */
.lic-masthead--sm { width: min(300px, 82vw); height: 116px; margin: 0 auto 4px; }
.lic-masthead--sm .lic-masthead__coin { width: 60px; height: 60px; box-shadow: 0 8px 18px rgba(0,0,0,.28); }
.lic-masthead--sm .fly-word { font-size: 12.5px; }
.lic-masthead--sm .fly-icon { width: 17px; height: 17px; }
.hero h1 { color: var(--cream-200); font: var(--fw-bold) clamp(34px, 6.5vw, 62px)/1.04 var(--font-display); letter-spacing: -0.015em; }
.hero h1 em { color: var(--lic-orange); font-style: normal; }
.hero .lead { color: rgba(255,248,231,.80); max-width: 520px; margin: 20px auto 0; }
.hero__cta { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* hero ambient animation layer */
.hero__deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__deco .spk { position: absolute; color: rgba(255,248,231,.42); font-size: 18px; opacity: .3; will-change: transform, opacity; animation: spkFloat 6s ease-in-out infinite; }
.hero__deco .s1 { top: 16%; left: 9%;  font-size: 24px; animation-duration: 6.5s; animation-delay: 0s; }
.hero__deco .s2 { top: 26%; left: 84%; font-size: 18px; color: var(--lic-gold); animation-duration: 5.2s; animation-delay: .8s; }
.hero__deco .s3 { top: 58%; left: 14%; font-size: 15px; animation-duration: 7s;   animation-delay: 1.4s; }
.hero__deco .s4 { top: 70%; left: 78%; font-size: 22px; color: var(--lic-gold); animation-duration: 6s;   animation-delay: .4s; }
.hero__deco .s5 { top: 40%; left: 50%; font-size: 14px; animation-duration: 5.6s; animation-delay: 2s; }
.hero__deco .s6 { top: 80%; left: 40%; font-size: 18px; color: var(--lic-gold); animation-duration: 6.8s; animation-delay: 1s; }
.hero__deco .s7 { top: 12%; left: 64%; font-size: 15px; animation-duration: 5.9s; animation-delay: 1.7s; }
@keyframes spkFloat {
  0%, 100% { transform: translateY(0) scale(.85) rotate(0deg); opacity: .22; }
  50%      { transform: translateY(-13px) scale(1.18) rotate(20deg); opacity: .75; }
}
.hero__plane { position: absolute; top: 21%; left: 0; font-size: 25px; color: rgba(255,248,231,.7); will-change: transform, opacity; animation: flyAcross 16s linear infinite; }
@keyframes flyAcross {
  0%   { transform: translate(-8vw, 0) rotate(8deg); opacity: 0; }
  10%  { opacity: .7; }
  50%  { transform: translate(46vw, -20px) rotate(3deg); opacity: .7; }
  90%  { opacity: .7; }
  100% { transform: translate(108vw, 12px) rotate(8deg); opacity: 0; }
}

/* multilingual hello rotator */
.hello-rotator { height: 1.5em; position: relative; font: italic var(--fw-bold) clamp(20px,3vw,30px) var(--font-serif); margin-bottom: 6px; }
.hello-rotator span {
  position: absolute; inset: 0; opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.hello-rotator span.is-on { opacity: 1; transform: translateY(0); }

.hero__stats { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; }

/* hero language chips */
.hero__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; max-width: 540px; }
.hero__langs .hpill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill);
  background: rgba(255,248,231,.10); border: 1px solid rgba(255,248,231,.20);
  color: var(--cream-200); font: var(--fw-semibold) 13px var(--font-body);
}
.hero__langs .hpill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hero__langs .hpill--more { background: transparent; border-color: transparent; color: rgba(255,248,231,.62); }

/* hero stat strip */
.hero__metrics { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); margin-top: 30px; flex-wrap: wrap; }
.hero__metrics .metric { text-align: center; }
.hero__metrics .metric b { display: block; font: var(--fw-bold) clamp(26px, 4vw, 36px)/1 var(--font-display); color: var(--cream-100); }
.hero__metrics .metric span { font: var(--fw-semibold) 11px var(--font-serif); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,248,231,.62); }
.hero__metrics .sep { width: 1.5px; height: 38px; background: rgba(255,248,231,.22); }
.ava-stack { display: flex; }
.ava-stack .ava { margin-left: -10px; }
.ava-stack .ava:first-child { margin-left: 0; }
.hero__stats .txt { font: var(--fw-bold) 14px var(--font-body); color: rgba(255,248,231,.85); }

/* ============================================================
   PILLARS / GRID
   ============================================================ */
.grid { display: grid; gap: clamp(16px, 3vw, 24px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* awards */
.award {
  position: relative; overflow: hidden; display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px); padding: 26px 26px 24px; box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.award::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--pc); }
.award:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pc) 45%, var(--border-subtle)); }
.award__ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--pc) 60%, var(--border-subtle));
  background: color-mix(in srgb, var(--pc) 12%, var(--surface-card)); color: var(--pc);
}
.award__ico svg { width: 24px; height: 24px; stroke-width: 2; }
.award__sem {
  display: inline-block; font: var(--fw-bold) 11.5px var(--font-body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--pc); margin-bottom: 4px;
}
.award p { font-size: 15px; margin-top: 6px; }

/* pull-quote */
.quote { font: italic var(--fw-semibold) clamp(20px, 3vw, 27px)/1.5 var(--font-serif); color: var(--lic-navy); margin: 0; }
.quote cite { display: block; margin-top: 14px; font: var(--fw-bold) 13px var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--lic-orange); }

/* home mission band */
.mission-band {
  position: relative; overflow: hidden; background: var(--navy-grad);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-lg);
  padding: clamp(30px,5vw,56px);
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px,5vw,52px); align-items: center;
}
.mission-band__deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mission-band .mb-spark { position: absolute; color: rgba(212,185,106,.5); }
.mission-band .mb-spark.s1 { top: 18px; right: 34%; font-size: 20px; }
.mission-band .mb-spark.s2 { bottom: 26px; left: 8%; font-size: 15px; color: rgba(255,248,231,.4); }
.mission-band .mb-spark.s3 { top: 40%; right: 6%; font-size: 24px; }
.mission-band__body { position: relative; z-index: 1; }
.mission-band__quote {
  position: relative; z-index: 1; margin: 0;
  background: rgba(255,248,231,.07); border: 1.5px solid rgba(255,248,231,.16);
  border-radius: var(--radius-2xl); padding: clamp(24px,3vw,34px);
}
.mission-band__quote .mb-mark { position: absolute; top: -8px; left: 16px; font: var(--fw-extra) 84px var(--font-display); color: rgba(212,185,106,.28); line-height: 1; }
.mission-band__quote blockquote { position: relative; z-index: 1; margin: 12px 0 0; font: italic var(--fw-semibold) clamp(19px,2.2vw,24px)/1.45 var(--font-serif); color: var(--cream-100); }
.mission-band__quote figcaption { margin-top: 16px; font: var(--fw-bold) 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--lic-orange-soft); }

/* purpose list (about) */
.purpose { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.purpose li { display: flex; align-items: flex-start; gap: 12px; font: var(--fw-regular) 16px/1.55 var(--font-body); color: var(--ink-700); }
.purpose .pin { margin-top: 6px; flex-shrink: 0; }

/* mission & vision cards */
.mv { align-items: stretch; }
.mv-card {
  position: relative; overflow: hidden; background: var(--surface-card);
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-xl);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.mv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--pc); }
.mv-card::after { content: ''; position: absolute; right: -30%; top: -40%; width: 180px; height: 180px; border-radius: 50%; background: var(--pc); opacity: .06; transition: transform var(--dur-slow) var(--ease-out); }
.mv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--pc) 45%, var(--border-subtle)); }
.mv-card:hover::after { transform: scale(1.5); }
.mv-card:hover .mv-ico { transform: rotate(-8deg) scale(1.06); }
.mv-card__head { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.mv-ico {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pc) 14%, var(--cream-50)); color: var(--pc);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc) 30%, transparent);
  transition: transform var(--dur-base) var(--ease-bounce);
}
.mv-ico svg { width: 28px; height: 28px; stroke-width: 2; }
.mv-card p, .mv-card__head { position: relative; z-index: 1; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 1; }
.mv-chips span {
  font: var(--fw-bold) 12px var(--font-serif); letter-spacing: .04em;
  color: var(--pc); padding: 6px 13px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pc) 11%, var(--cream-50));
}
/* belief banner */
.belief {
  position: relative; margin: clamp(20px,4vw,30px) auto 0; max-width: 760px;
  background: var(--lic-navy); color: var(--cream-100); border-radius: var(--radius-2xl);
  padding: clamp(28px,4vw,38px) clamp(28px,5vw,52px); text-align: center; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.belief__mark { position: absolute; top: -14px; left: 20px; font: var(--fw-extra) 120px var(--font-display); color: rgba(255,248,231,.10); line-height: 1; }
.belief p { position: relative; z-index: 1; margin: 0; font: italic var(--fw-semibold) clamp(17px,2.4vw,22px)/1.55 var(--font-serif); }
.pillar { text-align: center; }
.pillar .pin { margin: 0 auto 16px; }
.pillar p { margin: 8px auto 0; max-width: 300px; }

/* elevated program cards ("Four ways to belong") */
.pillars { align-items: stretch; }
.pcard {
  position: relative; overflow: hidden; text-align: left;
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--pc); }
.pcard::after { content: ''; position: absolute; left: -40%; bottom: -60%; width: 150px; height: 150px; border-radius: 50%; background: var(--pc); opacity: .07; transition: transform var(--dur-slow) var(--ease-out); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--pc) 45%, var(--border-subtle)); }
.pcard:hover::after { transform: scale(1.6); }
.pcard:hover .pcard__ico { transform: rotate(-8deg) scale(1.08); }
.pcard__no {
  position: absolute; top: 14px; right: 18px; z-index: 1;
  font: var(--fw-extra) 30px var(--font-display); color: var(--pc); opacity: .18; letter-spacing: -.02em;
}
.pcard__ico {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
  background: color-mix(in srgb, var(--pc) 14%, var(--cream-50)); color: var(--pc);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc) 30%, transparent);
  transition: transform var(--dur-base) var(--ease-bounce);
}
.pcard__ico svg { width: 26px; height: 26px; stroke-width: 2; }
.pcard h3 { position: relative; z-index: 1; }
.pcard p { position: relative; z-index: 1; font-size: 15px; margin: 2px 0 0; }
.pcard__tag {
  position: relative; z-index: 1; align-self: flex-start; margin-top: 14px;
  font: var(--fw-bold) 11px var(--font-serif); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pc); padding: 5px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pc) 12%, var(--cream-50));
}

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 4vw, 32px); flex-wrap: wrap; }

/* ============================================================
   ACTIVITY FEATURE BLOCKS
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.feature--flip .feature__art { order: 2; }
.feature__body .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }

/* illustrated placeholder art block */
.art {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-2xl); overflow: hidden;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  background: var(--lic-navy);
}
.art__label { position: absolute; bottom: 14px; left: 16px; z-index: 3; font: var(--fw-bold) 13px var(--font-body); color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 7px; }
.art__glyph { font: var(--fw-bold) clamp(48px, 9vw, 92px) var(--font-display); color: rgba(255,255,255,.16); position: relative; z-index: 2; letter-spacing: -.03em; }
.art .spark { position: absolute; color: rgba(255,255,255,.5); z-index: 1; }
/* color variants */
.art--red { background: linear-gradient(150deg, #D2421D, #8f2c12); }
.art--blue { background: linear-gradient(150deg, #3A52A4, #1d2f6b); }
.art--magenta { background: linear-gradient(150deg, #B24A84, #6f2c52); }
.art--green { background: linear-gradient(150deg, #2F8A6E, #1c5645); }
.art--gold { background: linear-gradient(150deg, #D4B96A, #a98f3f); }
.art--orange { background: linear-gradient(150deg, #D2421D, #8f2c12); }
.art--navy { background: linear-gradient(150deg, #2C3F86, #162257); }
/* photo-backed art block */
.art--photo { background: var(--lic-navy); }
.art__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.art__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(22,34,87,.6), rgba(22,34,87,0) 52%); }

/* photo gallery / moments wall */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 18px); }
.gallery .shot { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); margin: 0; }
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.gallery a.shot:hover img { transform: scale(1.06); }
.gallery .shot figcaption, .gallery .shot .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 14px 11px;
  color: #fff; font: var(--fw-bold) 12.5px var(--font-body);
  background: linear-gradient(to top, rgba(22,34,87,.72), transparent);
  display: flex; align-items: center; gap: 7px;
}
.gallery .shot--tall { grid-row: span 2; aspect-ratio: 3/4; }

/* ---------- LIC Runner game ---------- */
.runner-wrap { position: relative; width: 100%; background: var(--cream-100); border-top: 1.5px solid var(--border-subtle); touch-action: manipulation; cursor: pointer; }
#lic-runner { display: block; width: 100%; height: clamp(200px, 32vw, 250px); cursor: pointer; outline: none; touch-action: manipulation; }
.runner-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 20px; background: rgba(22,34,87,.80); transition: opacity .22s var(--ease-out); cursor: pointer; touch-action: manipulation;
}
.runner-overlay .ttl { font: var(--fw-bold) clamp(20px,3vw,26px) var(--font-display); color: #fff; }
.runner-overlay .sub { font: var(--fw-semibold) 14px var(--font-body); color: rgba(255,248,231,.86); max-width: 320px; }
.runner-overlay .key { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); border-radius: 6px; padding: 1px 7px; font-weight: 700; }
.runner-overlay.hidden { opacity: 0; pointer-events: none; }

/* small chips for facts */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background: var(--lic-orange); border-radius: var(--radius-2xl); box-shadow: var(--shadow-orange);
  padding: clamp(28px, 5vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner h2 { color: var(--cream-100); }
.cta-banner p { margin: 8px 0 0; color: rgba(255,255,255,.92); font: var(--fw-regular) 16px/1.5 var(--font-body); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-grad); border-radius: 36px 36px 0 0; margin-top: clamp(40px,6vw,72px); }
.footer__inner { padding: clamp(36px,5vw,52px) 0 clamp(28px,4vw,36px); text-align: center; }
.footer .brand { justify-content: center; margin-bottom: 18px; }
.footer .brand b, .footer .brand small { color: var(--cream-200); }
.footer__links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.footer__links a { font: var(--fw-bold) 14px var(--font-body); color: rgba(255,248,231,.8); }
.footer__links a:hover { color: var(--lic-orange-soft); }
.footer__fine { font: var(--fw-regular) 12px/1.7 var(--font-body); color: rgba(255,248,231,.55); }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.pagehead { background: var(--navy-grad); border-radius: 0 0 32px 32px; padding: clamp(36px,6vw,56px) 0; text-align: center; }
.pagehead h1 { color: var(--cream-200); }
.pagehead .lead { color: rgba(255,248,231,.72); max-width: 540px; margin: 12px auto 0; }
.pagehead .eyebrow { color: var(--lic-orange-soft); }
.pagehead { position: relative; overflow: hidden; }
.pagehead .wrap { position: relative; z-index: 2; }

/* animated flight-path pins (subtle, sitewide) */
@media (prefers-reduced-motion: no-preference) {
  .flightpath .pin { animation: pinPulse 2.6s ease-in-out infinite; }
}
@keyframes pinPulse { 0%, 100% { transform: rotate(-45deg) scale(1); } 50% { transform: rotate(-45deg) scale(1.22); } }

/* per-page header animations (one distinct motion per page) */
.ph-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .deco--pins .fp { animation: pinBob 4.2s ease-in-out infinite; }
  .deco--pins .fp:nth-child(2) { animation-delay: .5s; }
  .deco--pins .fp:nth-child(3) { animation-delay: 1s; }
  .deco--pins .fp:nth-child(4) { animation-delay: 1.5s; }
  .deco--pins .fp:nth-child(5) { animation-delay: .8s; }
  .deco--journey .jplane { animation: jFly 8s ease-in-out infinite; }
  .deco--rise .rd { animation: riseUp 7s linear infinite; }
}
/* About — floating map pins */
.deco--pins .fp { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); opacity: .5; }
@keyframes pinBob { 0%, 100% { transform: rotate(-45deg) translateY(0); } 50% { transform: rotate(-45deg) translateY(-13px); } }
/* Activities — a plane travels the flight path */
.deco--journey .jpath { position: absolute; left: 5%; right: 5%; top: 40%; border-top: 2.5px dashed rgba(255,248,231,.25); }
.deco--journey .jplane { position: absolute; top: calc(40% - 13px); left: 0; font-size: 22px; color: rgba(255,248,231,.7); opacity: 0; }
@keyframes jFly { 0% { transform: translateX(3vw) rotate(6deg); opacity: 0; } 12% { opacity: .75; } 50% { transform: translateX(46vw) translateY(-10px) rotate(2deg); } 88% { opacity: .75; } 100% { transform: translateX(92vw) rotate(6deg); opacity: 0; } }
/* Game — culture dots rising */
.deco--rise .rd { position: absolute; bottom: -16px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; }
@keyframes riseUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } 100% { transform: translateY(-200px) scale(1); opacity: 0; } }

/* ============================================================
   INTERACTIVE FX (site-fx.js)
   ============================================================ */
/* scroll reveal */
.has-js .reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.has-js .reveal.in { opacity: 1; transform: none; transition: opacity .45s var(--ease-out) var(--rev-d, 0ms), transform .45s var(--ease-out) var(--rev-d, 0ms); }
@media (prefers-reduced-motion: reduce) { .has-js .reveal { opacity: 1 !important; transform: none !important; } }

/* nav scroll state + underline */
.nav { transition: box-shadow .25s ease, background .25s ease; }
.nav .nav__inner { transition: padding .25s ease; }
.nav.scrolled { box-shadow: var(--shadow-md); background: rgba(251,243,224,.95); }
.nav.scrolled .nav__inner { padding-top: 8px; padding-bottom: 8px; }
.nav__links a { position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--lic-orange); transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease-out); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

/* scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--lic-orange); z-index: 60; box-shadow: 0 0 8px rgba(210,66,29,.5); }

/* cursor glow in header */
.cursor-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%), rgba(212,185,106,.20), rgba(212,185,106,0) 70%); }

/* card hover depth (shadow only — no transform, avoids reveal conflict) */
.card { transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
a.card { will-change: box-shadow; }
a.card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.btn--primary, .btn--lg { transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }

/* ============================================================
   VALUES (about)
   ============================================================ */
.value { text-align: left; }
.value .vdot { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font: var(--fw-bold) 15px var(--font-display); color: #fff; }

/* timeline */
.timeline { display: flex; flex-direction: column; gap: 4px; }
.tl-item { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1.5px dashed var(--border-subtle); }
.tl-item:last-child { border-bottom: none; }
.tl-year { font: var(--fw-bold) 20px var(--font-display); color: var(--lic-orange); }

/* ============================================================
   PASSPORT GAME
   ============================================================ */
/* hidden stamp trigger scattered on content pages */
.stamp-hidden {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 2px dashed var(--border-strong); color: var(--ink-300);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font: var(--fw-bold) 16px var(--font-display); background: rgba(253,250,243,.5);
  transition: transform var(--dur-base) var(--ease-bounce), opacity var(--dur-base), border-color var(--dur-fast);
  z-index: 5; opacity: .55;
}
.stamp-hidden:hover { opacity: 1; transform: rotate(-8deg) scale(1.12); border-color: var(--lic-orange); color: var(--lic-orange); }
.stamp-hidden.found { display: none; }

/* toast */
.pp-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 80px);
  background: var(--lic-navy); color: var(--cream-100); padding: 13px 22px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); font: var(--fw-bold) 14px var(--font-body); z-index: 200;
  display: flex; align-items: center; gap: 12px; opacity: 0; transition: transform .4s var(--ease-bounce), opacity .3s; pointer-events: none;
}
.pp-toast.show { transform: translate(-50%, 0); opacity: 1; }
.pp-toast .mini-stamp { width: 30px; height: 30px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 9px var(--font-display); }

/* passport book grid */
.passport-book { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 3vw, 24px); align-items: start; }
.stamp {
  min-width: 0; min-height: 150px; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px; position: relative; background: var(--surface-raised);
  border: 2px dashed var(--border-strong); color: var(--ink-300);
}
.stamp.collected {
  border-style: double; border-width: 3px; background: var(--surface-card); opacity: 1;
  box-shadow: var(--shadow-sm); animation: stampIn .45s var(--ease-bounce);
}
.stamp__ring { width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid currentColor; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.stamp__hello { font: var(--fw-bold) 17px var(--font-serif); font-style: italic; line-height: 1; }
.stamp__country { font: var(--fw-bold) 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.stamp__est { font: var(--fw-semibold) 8px var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 3px; }
.stamp__hint { font: var(--fw-semibold) 10px var(--font-body); color: var(--ink-500); margin-top: 4px; }
@keyframes stampIn { 0% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1) rotate(-3deg); } }

/* progress bar */
.progress { height: 12px; background: var(--cream-400); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--lic-orange); border-radius: var(--radius-pill); transition: width .6s var(--ease-out); width: 0; }

/* completion celebration */
.celebrate { text-align: center; }
.confetti { position: fixed; top: -10px; width: 10px; height: 14px; z-index: 150; pointer-events: none; opacity: 0; }

/* ============================================================
   SPECIAL POLISH — entrances, page transitions, micro-delight
   ============================================================ */
/* soft cross-fade between pages (supported browsers) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* brand text selection */
::selection { background: var(--lic-orange); color: var(--cream-50); }

/* visible keyboard focus */
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

/* nicer text wrapping */
.h-display, .h1, .h2, .h3, .hero h1 { text-wrap: balance; }
.lead, .quote { text-wrap: pretty; }

/* header entrance choreography (masthead → title → lead → CTAs → metrics).
   Gated on a JS-added, JS-removed .entering class so content is never
   stuck hidden if animations don't run — base state stays visible. */
@media (prefers-reduced-motion: no-preference) {
  .entering .hero__inner > *, .entering .pagehead .wrap > * { animation: riseIn .6s var(--ease-out) backwards; }
  .entering .hero__inner > :nth-child(2), .entering .pagehead .wrap > :nth-child(2) { animation-delay: .09s; }
  .entering .hero__inner > :nth-child(3), .entering .pagehead .wrap > :nth-child(3) { animation-delay: .17s; }
  .entering .hero__inner > :nth-child(4), .entering .pagehead .wrap > :nth-child(4) { animation-delay: .25s; }
  .entering .hero__inner > :nth-child(5), .entering .pagehead .wrap > :nth-child(5) { animation-delay: .33s; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } }

/* the logo coin gently floats */
@media (prefers-reduced-motion: no-preference) {
  .lic-masthead__coin { animation: coinBob 5s ease-in-out infinite; }
}
@keyframes coinBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -57%); } }

/* twinkle the sparks inside the mission band + art blocks */
@media (prefers-reduced-motion: no-preference) {
  .mission-band .mb-spark, .art .spark { animation: spkFloat 5.5s ease-in-out infinite; }
  .mission-band .mb-spark.s2 { animation-delay: 1.2s; }
  .mission-band .mb-spark.s3 { animation-delay: 2.2s; }
}

/* award cards get a light-sweep on hover */
.award::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.award:hover::after { animation: awardShine .8s var(--ease-out); }
@keyframes awardShine { to { left: 130%; } }

/* hidden stamps punch instead of vanish */
.stamp-hidden.stamping {
  border-style: solid; border-color: var(--lic-orange); color: var(--lic-orange);
  opacity: 1; pointer-events: none;
  animation: stampPunch .55s var(--ease-out) forwards;
}
@keyframes stampPunch {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  45%  { transform: scale(1.55) rotate(-12deg); opacity: 1; }
  100% { transform: scale(.2) rotate(-12deg); opacity: 0; }
}

/* passport counter pill celebrates each new stamp */
.passport-pill.bump { animation: pillBump .55s var(--ease-bounce); }
@keyframes pillBump { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* tags lift slightly */
.tag { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.tag:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--border-strong), var(--shadow-sm); }

/* gallery shots deepen on hover */
.gallery .shot { transition: box-shadow .3s var(--ease-out); }
.gallery .shot:hover { box-shadow: var(--shadow-lg); }

/* a little plane crosses the footer now and then */
.footer { position: relative; overflow: hidden; }
.footer__plane {
  position: absolute; top: 22%; left: 0; font-size: 19px;
  color: rgba(255,248,231,.45); pointer-events: none; z-index: 0;
  animation: flyAcross 26s linear infinite;
}
.footer__inner { position: relative; z-index: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .shot--tall { grid-row: span 1; aspect-ratio: 4/3; }
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature .feature__art { order: -1; }  /* photo first, then the words */
  .feature--flip .feature__art { order: -1; }
  .passport-book { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--cream-100); border-bottom: 1.5px solid var(--border-subtle); padding: 10px;
    box-shadow: var(--shadow-md); display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 16px; border-radius: var(--radius-md); }
  .hamburger { display: block; }
  .nav__cta-text { display: none; }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .mission-band { grid-template-columns: 1fr; }
  .pillar p { max-width: none; }
  .cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  /* keep the three hero metrics on one line */
  .hero__metrics { flex-wrap: nowrap; gap: 14px; }
  .hero__metrics .metric b { font-size: 20px; }
  .hero__metrics .metric span { font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
  .hero__metrics .sep { height: 26px; }
  .passport-book { grid-template-columns: repeat(2, 1fr); }
  .tl-item { grid-template-columns: 70px 1fr; gap: 12px; }
}
@media (max-width: 420px) {
  .passport-book { grid-template-columns: 1fr 1fr; }
  .hero__cta .btn { width: 100%; }
}

/* ============================================================
   ROLES ACCORDION — "Meet the board"
   ============================================================ */
/* side-by-side cards */
.roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.role {
  --pc: var(--globe-blue);
  --pc-tint: color-mix(in srgb, var(--pc) 8%, #fff);
  position: relative;
  background: linear-gradient(180deg, var(--pc-tint) 0%, #fff 46%);
  border: 1px solid color-mix(in srgb, var(--pc) 20%, var(--line, rgba(26,43,74,.10)));
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(26,43,74,.06);
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34,1.4,.64,1);
}
/* gradient top accent */
.role::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 35%, #fff));
  transform: scaleX(.4); transform-origin: left;
  transition: transform .4s cubic-bezier(.4,.02,.2,1);
}
.role:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26,43,74,.13); border-color: color-mix(in srgb, var(--pc) 40%, transparent); }
.role:hover::before { transform: scaleX(.7); }
.role.open { box-shadow: 0 16px 38px rgba(26,43,74,.17); border-color: color-mix(in srgb, var(--pc) 50%, transparent); }
.role.open::before { transform: scaleX(1); }

.role__head {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 18px 18px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink-900, var(--lic-navy));
  transition: background .28s ease;
}
.role.open .role__head { background: color-mix(in srgb, var(--pc) 7%, transparent); }

.role__ico {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  color: var(--pc);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pc) 22%, #fff), color-mix(in srgb, var(--pc) 10%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent), 0 4px 10px color-mix(in srgb, var(--pc) 18%, transparent);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.role__ico svg { width: 23px; height: 23px; }
.role:hover .role__ico { transform: rotate(-4deg) scale(1.05); }
.role.open .role__ico { transform: rotate(-6deg) scale(1.08); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent), 0 6px 16px color-mix(in srgb, var(--pc) 28%, transparent); }

.role__title { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.role__title b { font: var(--fw-bold, 700) 17px var(--font-heading, var(--font-body, sans-serif)); color: var(--lic-navy); line-height: 1.15; letter-spacing: -.01em; }
.role__title small { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--pc); font-weight: 700; }

.role__chev {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--pc);
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  transition: transform .38s cubic-bezier(.4,.02,.2,1), background .28s ease;
}
.role__chev svg { width: 17px; height: 17px; }
.role.open .role__chev { transform: rotate(180deg); background: color-mix(in srgb, var(--pc) 20%, transparent); }

/* Height animated by JS (initRoles) for cross-browser reliability */
.role__panel {
  height: 0; overflow: hidden;
  transition: height .42s cubic-bezier(.4,.02,.2,1);
}
.role__panel-inner { min-height: 0; }

.role__list {
  list-style: none; margin: 0; padding: 4px 14px 16px 14px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .32s ease .05s, transform .38s cubic-bezier(.4,.02,.2,1) .05s;
}
.role.open .role__list { opacity: 1; transform: none; }
.role__list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 8px 10px; border-radius: 11px;
  font: var(--fw-regular, 400) 14px/1.5 var(--font-body, sans-serif);
  color: var(--ink-700, #3a4a63);
  transition: background .2s ease;
}
.role__list li:hover { background: color-mix(in srgb, var(--pc) 9%, transparent); }
.role__list li::before {
  content: "✓"; flex: none; margin-top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--pc);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--pc) 40%, transparent);
}

@media (max-width: 720px) {
  .roles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .role, .role::before, .role__ico, .role__chev, .role__panel, .role__list, .role__head { transition: none !important; }
}

/* ============================================================
   LEADERBOARD — on-page Top-5 panel
   ============================================================ */
.lb-panel { padding: 0; overflow: hidden; }
.lb-panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 14px;
  background: linear-gradient(135deg, var(--lic-navy), color-mix(in srgb, var(--lic-navy) 82%, #000));
  color: var(--cream-100, #fff);
}
.lb-panel__head .lb-globe { display: inline-grid; place-items: center; color: var(--cream-100, #fff); }
.lb-panel__head .lb-globe svg { width: 24px; height: 24px; }
.lb-panel__head h3 { font: var(--fw-bold,700) 18px var(--font-heading, var(--font-body)); margin: 0; color: var(--cream-100,#fff); }
.lb-panel__head small { display: block; font-size: 12px; opacity: .72; font-weight: 500; letter-spacing: .02em; }

.lb-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: grid; grid-template-columns: 34px 30px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  font: var(--fw-regular,400) 15px var(--font-body, sans-serif); color: var(--lic-navy);
  transition: background .2s ease;
}
.lb-row--top { background: color-mix(in srgb, var(--lic-orange) 8%, transparent); }
.lb-row:hover { background: color-mix(in srgb, var(--lic-navy) 6%, transparent); }
.lb-row--me { background: color-mix(in srgb, var(--lic-orange) 20%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lic-orange) 55%, transparent); }
.lb-row--empty { display: block; text-align: center; color: var(--text-muted, #6a778c); padding: 26px 14px; font-style: italic; }
.lb-rank { font-weight: 800; font-size: 16px; text-align: center; color: var(--ink-500, #7a869a); }
.lb-row--top .lb-rank { font-size: 19px; }
.lb-flag { font-size: 22px; line-height: 1; text-align: center; }
.lb-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.lb-score { font-weight: 800; color: var(--lic-orange); white-space: nowrap; }
.lb-score small { font-weight: 600; font-size: 11px; opacity: .7; margin-left: 2px; }

.lb-note { padding: 4px 22px 16px; font-size: 12.5px; color: var(--text-muted, #6a778c); }

/* ============================================================
   LEADERBOARD — modal
   ============================================================ */
.lb-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.lb-modal[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(16,26,46,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .26s ease; }
.lb-modal.show .lb-backdrop { opacity: 1; }
.lb-card {
  position: relative; z-index: 1; width: min(460px, 100%);
  max-height: calc(100dvh - 40px); overflow: hidden auto;
  background: var(--cream-100, #fff); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(16,26,46,.4);
  padding: 30px 26px 26px; text-align: center;
  transform: translateY(16px) scale(.96); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .26s ease;
}
.lb-modal.show .lb-card { transform: none; opacity: 1; }
.lb-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--lic-navy) 8%, transparent); color: var(--lic-navy);
  font-size: 20px; line-height: 1; transition: background .2s ease;
}
.lb-x:hover { background: color-mix(in srgb, var(--lic-navy) 16%, transparent); }

.lb-burst {
  width: 62px; height: 62px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; color: var(--lic-orange);
  background: color-mix(in srgb, var(--lic-orange) 12%, transparent);
  animation: lb-pop .5s cubic-bezier(.34,1.56,.64,1);
}
.lb-burst svg { width: 32px; height: 32px; }

/* rank medals / numbers (icons, not emoji) */
.lb-medal { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.lb-medal svg { width: 22px; height: 22px; }
.lb-medal--0 { color: var(--globe-gold, #E0A52E); }
.lb-medal--1 { color: #9aa4b2; }
.lb-medal--2 { color: #c98a4b; }
.lb-num { font-weight: 800; color: var(--ink-500, #7a869a); }
@keyframes lb-pop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: none; } }
.lb-eyebrow { font: var(--fw-bold,700) 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--lic-orange); }
.lb-title { font: var(--fw-bold,700) clamp(24px,5vw,30px) var(--font-heading, var(--font-body)); color: var(--lic-navy); margin: 6px 0 0; }
.lb-lead { color: var(--text-muted, #4a5568); font-size: 15px; line-height: 1.55; margin: 10px auto 0; max-width: 340px; }
.lb-lead b { color: var(--lic-navy); }
.lb-sub { font-size: 13px; color: var(--text-muted, #6a778c); margin-top: 6px; }
.lb-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

.lb-search, .lb-input {
  width: 100%; margin-top: 16px; padding: 12px 14px;
  border: 1.5px solid color-mix(in srgb, var(--lic-navy) 16%, transparent);
  border-radius: 12px; font: var(--fw-regular,400) 15px var(--font-body); color: var(--lic-navy);
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.lb-search:focus, .lb-input:focus { outline: none; border-color: var(--lic-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lic-orange) 20%, transparent); }

.lb-flags {
  margin-top: 12px; max-height: 240px; overflow-y: auto; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px;
}
.lb-flagbtn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 1.5px solid transparent; border-radius: 11px;
  background: color-mix(in srgb, var(--lic-navy) 4%, transparent); cursor: pointer;
  font: var(--fw-regular,400) 13.5px var(--font-body); color: var(--lic-navy); text-align: left;
  transition: background .18s ease, border-color .18s ease;
}
.lb-flagbtn:hover { background: color-mix(in srgb, var(--lic-orange) 10%, transparent); }
.lb-flagbtn.is-sel { border-color: var(--lic-orange); background: color-mix(in srgb, var(--lic-orange) 15%, transparent); }
.lb-flagemoji { font-size: 20px; line-height: 1; flex: none; }
.lb-flagname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lb-err { min-height: 18px; margin-top: 8px; color: var(--globe-red, #c0392b); font-size: 13.5px; font-weight: 600; }

.lb-list--modal { margin-top: 18px; background: color-mix(in srgb, var(--lic-navy) 4%, transparent); border-radius: 14px; padding: 8px; text-align: left; }
.lb-list--modal .lb-row { font-size: 14px; padding: 9px 12px; }

.lb-confetti { position: absolute; top: 18px; width: 8px; height: 8px; z-index: 3; pointer-events: none; }

@media (max-width: 460px) {
  .lb-flags { grid-template-columns: 1fr; max-height: 210px; }
  .lb-card { padding: 26px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-backdrop, .lb-card, .lb-burst { transition: none !important; animation: none !important; }
}

/* ============================================================
   PASSPORT COMPLETION — full-screen world-tour cinematic
   ============================================================ */
@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes pp-tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.pp-cine { position: fixed; inset: 0; z-index: 340; display: grid; place-items: center; overflow: hidden; opacity: 0; transition: opacity .4s ease; }
.pp-cine.show { opacity: 1; }
.pp-cine__sky { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 18%, #22406e 0%, var(--lic-navy, #1A2B4A) 46%, #0c1730 100%); }
.pp-cine__x {
  position: absolute; top: 16px; right: 18px; z-index: 6; width: 38px; height: 38px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1;
  background: rgba(255,255,255,.14); color: #fff;
}
.pp-cine__x:hover { background: rgba(255,255,255,.26); }

/* intro (name prompt) */
.pp-cine__intro { position: relative; z-index: 3; text-align: center; max-width: 440px; padding: 24px; color: #fff; }
.pp-cine__globe { font-size: 62px; display: inline-block; animation: pp-spin 7s linear infinite, pp-pop .6s cubic-bezier(.34,1.56,.64,1); }
.pp-cine__h { font: var(--fw-bold,700) clamp(24px,5vw,34px) var(--font-heading, var(--font-body)); color: #fff; margin: 10px 0 0; }
.pp-cine__p { color: rgba(255,248,231,.84); font-size: 15.5px; line-height: 1.55; margin: 12px auto 0; max-width: 370px; }
.pp-cine__name {
  width: 100%; max-width: 300px; margin: 20px auto 0; display: block; text-align: center;
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.1); color: #fff; font: 400 16px var(--font-body, sans-serif);
}
.pp-cine__name::placeholder { color: rgba(255,255,255,.5); }
.pp-cine__name:focus { outline: none; border-color: var(--lic-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lic-orange) 30%, transparent); }
.pp-cine__err { min-height: 18px; margin-top: 8px; color: #ffb4a2; font-size: 13.5px; font-weight: 600; }
.pp-cine__intro .btn { margin-top: 14px; }

/* stage (the map + flight) */
.pp-cine__stage { position: absolute; inset: 0; z-index: 2; }
.pp-cine__svg { width: 100%; height: 100%; display: block; }
.pp-cine__stage.done .pp-cine__svg { filter: brightness(.6) blur(1px); transition: filter .6s ease; }
.pp-map { pointer-events: none; }
.pp-map circle { fill: rgba(150,190,235,.32); }
.pp-route { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lic-orange) 60%, transparent)); }
.pp-plane { fill: #fff; filter: drop-shadow(0 0 7px rgba(255,255,255,.7)); }
.pp-node { transition: opacity .4s ease; }
.pp-node__flag, .pp-node__hi { opacity: 0; transition: opacity .5s ease .08s; }
.pp-node.lit .pp-node__flag, .pp-node.lit .pp-node__hi { opacity: 1; }
.pp-node__hi { font-family: var(--font-heading, var(--font-body)); font-weight: 700; }
.pp-node__halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pp-node.lit .pp-node__halo { animation: pp-halo 1.1s ease-out; }
@keyframes pp-halo { 0% { opacity: .55; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
.pp-stars circle { animation: pp-tw 3s ease-in-out infinite; }

/* finale */
.pp-cine__finale {
  position: relative; z-index: 4; text-align: center; max-width: 480px; padding: 24px; color: #fff;
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .4s ease, transform .45s cubic-bezier(.34,1.5,.64,1);
}
.pp-cine__finale.show { opacity: 1; transform: none; }
.pp-cine__finale-h { font: var(--fw-bold,700) clamp(26px,6vw,42px) var(--font-heading, var(--font-body)); color: #fff; margin: 0; text-shadow: 0 6px 34px rgba(0,0,0,.45); }
.pp-cine__badge {
  display: inline-block; margin-top: 18px; padding: 9px 20px; border-radius: 999px;
  font: var(--fw-bold,700) 14px var(--font-body); letter-spacing: .06em; color: var(--lic-navy);
  background: linear-gradient(120deg, color-mix(in srgb, var(--globe-gold,#E0A52E) 62%, #fff), color-mix(in srgb, var(--lic-orange) 45%, #fff));
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
}
.pp-fw { position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 5; pointer-events: none; }

/* ghost buttons sit on the dark cinematic — make them legible */
.pp-cine .btn--ghost { color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.55); }
.pp-cine .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pp-cine__globe, .pp-stars circle, .pp-node.lit .pp-node__halo { animation: none !important; }
  .pp-cine, .pp-cine__finale, .pp-node__flag, .pp-node__hi { transition: none !important; }
}