/* ============================================================
   Fauji Foundation — Design System
   Brand: royal blue + white + gold (from official crest/wordmark)
   Type:  Oswald (display) · Poppins (headings) · Inter (body)
   Motion base states live here; app.js drives the animation.
   ============================================================ */
:root{
  /* Brand palette — royal institutional blue + crest gold */
  --brand:      #14539e;
  --brand-600:  #0f4685;
  --brand-700:  #0d3b73;
  --brand-800:  #0a2f5c;
  --brand-900:  #2183B7;
  --brand-300:  #4b83c0;
  --brand-100:  #d9e6f4;
  --brand-050:  #eef4fb;
  --accent:     #c9a227;   /* gold */
  --accent-600: #a9861a;
  --accent-200: #f0e2b0;

  /* Neutrals */
  --ink:      #1c2733;
  --body:     #33424f;
  --muted:    #5b6b7b;
  --line:     #e3e9ef;
  --surface:  #ffffff;
  --surface-2:#f5f8fc;

  /* Semantic */
  --success:#2e8b57; --danger:#c0392b; --warning:#d4a017; --info:#2f6fed;

  /* Typography */
  --font-display:'Oswald', 'Poppins', system-ui, sans-serif;
  --font-head:   'Poppins', system-ui, sans-serif;
  --font-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius & elevation */
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(10,39,68,.06), 0 2px 6px rgba(10,39,68,.07);
  --shadow-md:0 10px 28px rgba(10,39,68,.12);
  --shadow-lg:0 24px 60px rgba(10,39,68,.20);
  --shadow-brand:0 18px 40px rgba(20,83,158,.30);

  --nav-h:76px;
  --util-h:38px;

  /* Bootstrap bridge */
  --bs-primary:var(--brand); --bs-primary-rgb:20,83,158;
  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--body);
  --bs-link-color:var(--brand); --bs-link-hover-color:var(--brand-700);
}

*{ text-underline-offset:2px; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--util-h) + var(--nav-h)); overflow-x:clip; }
body{
  font-family:var(--font-body); color:var(--body); background:var(--surface);
  font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:clip; max-width:100%;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); color:var(--ink); line-height:1.18; letter-spacing:-.01em; }
p{ margin-bottom:1rem; }
a{ color:var(--brand); text-decoration:none; }
img{ max-width:100%; }
::selection{ background:var(--brand); color:#fff; }

/* Accessibility */
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
.skip-link{
  position:absolute; left:12px; top:-56px; z-index:3000; background:var(--brand); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 10px 10px; transition:top .2s ease; font-weight:600;
}
.skip-link:focus{ top:0; color:#fff; }

/* ===================== Buttons ===================== */
.btn{ font-weight:600; border-radius:12px; padding:.72rem 1.4rem; letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.btn:active{ transform:translateY(1px); }
.btn-brand{ background:var(--brand); border:1px solid var(--brand); color:#fff; }
.btn-brand:hover,.btn-brand:focus{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; box-shadow:var(--shadow-brand); }
.btn-accent{ background:var(--accent); border:1px solid var(--accent); color:#20170a; }
.btn-accent:hover,.btn-accent:focus{ background:var(--accent-600); border-color:var(--accent-600); color:#fff; box-shadow:0 14px 34px rgba(201,162,39,.34); }
.btn-outline-brand{ border:1.5px solid var(--brand); color:var(--brand); background:transparent; }
.btn-outline-brand:hover{ background:var(--brand); color:#fff; }
.btn-outline-light-2{ border:1.5px solid rgba(255,255,255,.7); color:#fff; background:transparent; }
.btn-outline-light-2:hover{ background:#fff; color:var(--brand); }
.btn-lg{ padding:.9rem 1.7rem; font-size:1.02rem; }
.btn i{ vertical-align:-.05em; }

/* ===================== Resource / demo page ===================== */
.resource-ico{ width:88px; height:88px; margin:0 auto; display:grid; place-items:center; border-radius:24px;
  background:var(--brand-050); color:var(--brand); font-size:2.5rem; box-shadow:var(--shadow-sm); }
.badge-soon{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:rgba(240,197,107,.16); border-radius:999px; padding:.3rem .85rem; }

/* ===================== Top utility bar ===================== */
.top-utility{
  position:fixed; top:0; left:0; right:0; height:var(--util-h); z-index:1031;
  background:var(--brand-900); border-bottom:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center;
}
.utility-links{
  list-style:none; margin:0; padding:0; width:100%;
  display:flex; align-items:center; gap:.15rem; justify-content:flex-end;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none;
}
.utility-links::-webkit-scrollbar{ display:none; }
.utility-links a{
  display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.85);
  font-size:.82rem; font-weight:500; padding:.32rem .7rem; border-radius:7px; text-decoration:none;
  transition:color .2s ease, background .2s ease;
}
.utility-links a:hover,.utility-links a:focus-visible{ color:#fff; background:rgba(255,255,255,.14); }
.utility-links i{ font-size:.95rem; color:var(--accent); }
@media (max-width:767px){
  .utility-links{ justify-content:flex-start; }
  .utility-links a{ font-size:.8rem; padding:.3rem .6rem; }
}

/* ===================== Navbar ===================== */
.site-nav{
  position:fixed; top:var(--util-h); left:0; right:0; z-index:1030; min-height:var(--nav-h);
  display:flex; align-items:center; padding:.4rem 0;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
.site-nav.scrolled{
  background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(10px);
  border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(10,39,68,.08);
}
.navbar-brand{ display:inline-flex; align-items:center; min-width:0; padding:0; }
/* One complete logo everywhere: white over the transparent header, full-colour once solid. */
.brand-logo{
  height:44px; width:auto; max-width:min(62vw,360px); display:block; object-fit:contain;
  filter:brightness(0) invert(1); transition:filter .3s ease, height .3s ease;
}
.site-nav.scrolled .brand-logo{ filter:none; }
/* Off-canvas panel is dark, so keep its logo white regardless of scroll state. */
.brand-logo--onDark{ height:38px; filter:brightness(0) invert(1); }

.site-nav .navbar-nav{ align-items:center; }
.site-nav .nav-link{
  color:rgba(255,255,255,.92); font-weight:500; font-size:.98rem; padding:.55rem .9rem !important;
  position:relative; border-radius:9px; transition:color .2s ease, background .2s ease;
}
/* Clean pill hover (no underline) */
.site-nav .nav-link:hover,.site-nav .nav-link:focus-visible{ color:#fff; background:rgba(255,255,255,.14); }
.site-nav.scrolled .nav-link{ color:var(--body); }
.site-nav.scrolled .nav-link:hover,.site-nav.scrolled .nav-link:focus-visible{ color:var(--brand); background:var(--brand-050); }
.site-nav .dropdown.show > .nav-link,.site-nav .dropdown:hover > .nav-link{ background:rgba(255,255,255,.14); color:#fff; }
.site-nav.scrolled .dropdown.show > .nav-link,.site-nav.scrolled .dropdown:hover > .nav-link{ background:var(--brand-050); color:var(--brand); }

/* Dropdowns */
.site-nav .dropdown-toggle::after{ margin-left:.4em; transition:transform .25s ease; vertical-align:.15em; }
.site-nav .dropdown:hover .dropdown-toggle::after,.site-nav .show .dropdown-toggle::after{ transform:rotate(180deg); }
.site-nav .dropdown{ position:relative; }
.site-nav .dropdown-menu{
  position:absolute; top:100%; left:0; margin-top:.55rem;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:.5rem;
  min-width:16rem; background:#fff;
}
/* Invisible hover bridge so crossing the gap doesn't drop the hover */
.site-nav .dropdown-menu::before{ content:""; position:absolute; left:0; right:0; top:-.6rem; height:.6rem; }
.site-nav .dropdown-menu .dropdown-item{
  border-radius:9px; padding:.6rem .8rem; font-size:.94rem; font-weight:500; color:var(--body);
  display:flex; align-items:center; gap:.6rem; transition:background .18s ease, color .18s ease, padding-left .18s ease;
}
.site-nav .dropdown-menu .dropdown-item i{ color:var(--brand); font-size:1.05rem; }
.site-nav .dropdown-menu .dropdown-item:hover,.site-nav .dropdown-menu .dropdown-item:focus{
  background:var(--brand-050); color:var(--brand); padding-left:1.05rem;
}
/* Hover-open on desktop */
@media (min-width:992px){
  .site-nav .dropdown:hover > .dropdown-menu{ display:block; }
  .site-nav .dropdown-menu{ animation:ddIn .22s ease both; }
}
@keyframes ddIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

.nav-toggler{
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); width:46px; height:46px;
  border-radius:11px; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem;
  transition:color .3s ease, background .3s ease, border-color .3s ease;
}
.nav-toggler:active{ transform:scale(.95); }
.site-nav.scrolled .nav-toggler{ color:var(--brand); border-color:var(--line); background:var(--brand-050); }

/* Auth pills in nav */
.nav-auth .btn{ padding:.5rem 1.1rem; font-size:.92rem; }
.nav-user .dropdown-toggle{ color:inherit; }

/* Off-canvas mobile */
.offcanvas.mobile-nav{ width:min(86vw,340px); background:var(--brand-900); color:#fff; }
.mobile-nav .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-nav .nav-link{ color:rgba(255,255,255,.9); font-weight:600; padding:.7rem .2rem; }
.mobile-nav .nav-link:hover{ color:var(--accent); }
.mobile-nav .accordion-button{
  background:transparent; color:#fff; font-weight:600; padding:.7rem .2rem; box-shadow:none; font-family:var(--font-body);
}
.mobile-nav .accordion-button:not(.collapsed){ color:var(--accent); background:transparent; }
.mobile-nav .accordion-button::after{ filter:invert(1); }
.mobile-nav .accordion-body{ padding:.2rem 0 .6rem .6rem; }
.mobile-nav .accordion-body a{ display:block; color:rgba(255,255,255,.78); padding:.4rem 0; font-size:.94rem; }
.mobile-nav .accordion-body a:hover{ color:#fff; }
.mobile-nav .accordion-item{ background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.1); }

/* ===================== Hero ===================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; color:#fff; background:var(--brand-900); }
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  background-size:cover; background-position:78% center;
  transition:opacity 1.1s ease, visibility 1.1s ease; transform:scale(1.06);
}
.hero-slide.is-active{ opacity:1; visibility:visible; }
.js-anim .hero-slide.is-active{ animation:kenburns 8s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1.02); } }
/* Diagonal brand scrim hides baked-in text on the left of each photo */
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, var(--brand-900) 0%, rgba(33,131,183,.92) 26%, rgba(10,47,92,.62) 52%, rgba(10,47,92,.15) 78%, rgba(10,47,92,.35) 100%),
    linear-gradient(0deg, rgba(6,26,47,.55), rgba(6,26,47,0) 40%);
}
.hero-grid{
  position:absolute; inset:0; z-index:1; opacity:.14; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0); background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg,#000 40%,transparent 75%);
          mask-image:linear-gradient(100deg,#000 40%,transparent 75%);
}
.hero .container{ position:relative; z-index:2; padding-top:calc(var(--util-h) + var(--nav-h)); }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; color:var(--accent-200);
  background:rgba(255,255,255,.08); padding:.4rem .95rem; border-radius:40px; border:1px solid rgba(255,255,255,.18);
}
.hero-eyebrow .crest{ height:20px; width:auto; }
.hero h1{
  color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5rem); line-height:.98; letter-spacing:.005em; margin:1.1rem 0 .2rem;
  text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero h1 .rotator{ display:block; color:var(--accent); }
.hero .rotator-word{ display:inline-block; }
.hero p.lead{
  font-family:var(--font-body); color:rgba(255,255,255,.9); max-width:40rem;
  font-size:clamp(1.02rem,1.6vw,1.22rem); line-height:1.7; margin-top:1.1rem; text-transform:none;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:2.6rem; }
.hero-meta .num{ font-family:var(--font-display); font-weight:700; font-size:1.8rem; color:#fff; line-height:1; }
.hero-meta .lbl{ font-size:.82rem; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.08em; }

/* Hero controls */
.hero-dots{ position:absolute; z-index:3; left:0; right:0; bottom:2.2rem; display:flex; justify-content:center; gap:.6rem; }
.hero-dots button{
  width:36px; height:4px; border:0; padding:0; border-radius:4px; background:rgba(255,255,255,.35); cursor:pointer; overflow:hidden; position:relative;
}
.hero-dots button .fill{ position:absolute; inset:0; width:0; background:var(--accent); border-radius:4px; }
.hero-dots button.is-active .fill{ background:var(--accent); }
.scroll-cue{
  position:absolute; z-index:3; left:50%; bottom:.7rem; transform:translateX(-50%); color:rgba(255,255,255,.75);
  font-size:1.4rem; animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,7px);} }

/* ===================== Legacy strip ===================== */
.legacy-strip{ background:var(--brand-900); color:rgba(255,255,255,.85); }
.legacy-strip .container{ padding:1.15rem 0; }
.legacy-item{ display:flex; align-items:center; gap:.7rem; font-size:.95rem; }
.legacy-item i{ color:var(--accent); font-size:1.3rem; }
.legacy-divider{ width:1px; background:rgba(255,255,255,.14); align-self:stretch; }

/* ===================== Sections ===================== */
.section{ padding:clamp(3.5rem,7vw,6.5rem) 0; }
.section-tint{ background:var(--surface-2); }
.section-brand{ background:var(--brand-900); color:rgba(255,255,255,.86); }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--brand); font-family:var(--font-display);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.8rem;
}
.section-eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); display:inline-block; }
.section-brand .section-eyebrow{ color:var(--accent-200); }
.section-title{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:700; margin-top:.55rem; }
.section-brand .section-title{ color:#fff; }
.text-muted-2{ color:var(--muted); }
.lead-2{ font-size:1.08rem; color:var(--muted); }

/* ===================== About ===================== */
.about-figure{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.about-figure .badge-year{
  position:absolute; left:1.2rem; bottom:1.2rem; background:var(--accent); color:#20170a; border-radius:14px;
  padding:.8rem 1.1rem; font-family:var(--font-display); font-weight:700; box-shadow:var(--shadow-md);
}
.about-figure .badge-year b{ display:block; font-size:1.8rem; line-height:1; }
.mission-card{
  background:var(--brand-900); color:#fff; border-radius:var(--radius); padding:2rem;
  position:relative; overflow:hidden;
}
.mission-card::before{ content:"\201C"; position:absolute; right:1rem; top:-1rem; font-size:8rem; color:rgba(255,255,255,.08); font-family:Georgia,serif; }
.mission-card p{ color:rgba(255,255,255,.92); }
.check-list{ list-style:none; padding:0; margin:1.4rem 0 0; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.7rem; }
.check-list i{ color:var(--accent); font-size:1.15rem; margin-top:.15rem; }

/* ===================== Stats ===================== */
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.2rem;
  text-align:center; height:100%; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease;
}
.stat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.stat-icon{ width:64px; height:64px; margin:0 auto .8rem; display:grid; place-items:center; border-radius:16px; background:var(--brand-050); }
.stat-icon img{ width:38px; height:38px; object-fit:contain; }
.stat-icon i{ font-size:30px; line-height:1; color:var(--brand); }
.section-brand .stat-icon i{ color:var(--accent); }
.stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4vw,2.9rem); color:var(--brand); line-height:1; }
.stat-num .suffix{ color:var(--accent); }
.stat-label{ color:var(--muted); font-size:.98rem; margin-top:.3rem; }
.section-brand .stat-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.section-brand .stat-icon{ background:rgba(255,255,255,.1); }
.section-brand .stat-num{ color:#fff; } .section-brand .stat-label{ color:rgba(255,255,255,.72); }

/* ===================== Service cards ===================== */
.service-card{
  position:relative; border-radius:var(--radius); overflow:hidden; height:100%;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.service-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.service-card:hover .service-media img{ transform:scale(1.08); }
.service-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(33,131,183,0) 45%,rgba(33,131,183,.55)); }
.service-badge{
  position:absolute; z-index:2; left:1rem; top:1rem; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; background:rgba(255,255,255,.94); color:var(--brand); font-size:1.3rem; box-shadow:var(--shadow-sm);
}
.service-body{ padding:1.3rem 1.4rem 1.5rem; }
.service-body h3{ font-size:1.2rem; margin-bottom:.35rem; }
.service-link{ font-weight:600; color:var(--brand); display:inline-flex; align-items:center; gap:.35rem; }
.service-link i{ transition:transform .2s ease; }
.service-card:hover .service-link i{ transform:translateX(4px); }

/* ===================== CTA band ===================== */
.cta-band{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(120deg,var(--brand-800),var(--brand) 70%); }
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0); background-size:24px 24px;
}
.cta-parallax{ position:absolute; right:-6%; top:-30%; width:46%; height:160%; z-index:0; opacity:.22;
  background:radial-gradient(closest-side,var(--accent),transparent 70%); }
.cta-band .container{ position:relative; z-index:2; padding:clamp(3rem,6vw,5rem) 0; }
.cta-band h2{ color:#fff; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.8rem,4vw,3rem); }

/* ===================== Businesses / Investments ===================== */
.biz-card{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:260px; display:flex; align-items:flex-end;
  color:#fff; box-shadow:var(--shadow-md); background-size:cover; background-position:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.biz-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.biz-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(33,131,183,.1),rgba(33,131,183,.85)); }
.biz-body{ position:relative; z-index:2; padding:1.5rem; }
.biz-body .tag{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--accent-200); }
.biz-body h3{ color:#fff; font-size:1.35rem; margin:.25rem 0 .3rem; }
.biz-body p{ color:rgba(255,255,255,.82); font-size:.95rem; margin:0; }

/* ===================== Media grid ===================== */
.media-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:1rem; }
.media-item{ position:relative; overflow:hidden; border-radius:14px; box-shadow:var(--shadow-sm); }
.media-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.media-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(33,131,183,0) 50%,rgba(33,131,183,.6)); opacity:0; transition:opacity .3s ease; }
.media-item:hover::after{ opacity:1; }
.media-item:hover img{ transform:scale(1.08); }
.media-item .cap{ position:absolute; z-index:2; left:.9rem; bottom:.7rem; color:#fff; font-weight:600; font-size:.9rem; opacity:0; transform:translateY(8px); transition:.3s ease; }
.media-item:hover .cap{ opacity:1; transform:none; }
.media-item.tall{ grid-row:span 2; }
.media-item.wide{ grid-column:span 2; }
@media (max-width:767px){ .media-grid{ grid-template-columns:repeat(2,1fr); } .media-item.wide{ grid-column:span 2; } }

/* ===================== Contact ===================== */
.contact-info li{ display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.1rem; }
.contact-ico{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--brand-050); color:var(--brand); font-size:1.2rem; }
.contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); }
.form-label{ font-weight:600; color:var(--ink); font-size:.92rem; }
.form-control{ border-radius:10px; padding:.7rem .9rem; border-color:var(--line); }
.form-control:focus{ border-color:var(--brand-300); box-shadow:0 0 0 .22rem rgba(20,83,158,.16); }
.contact-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); }

/* ===================== Footer ===================== */
.site-footer{ background:var(--brand-900); color:rgba(255,255,255,.78); padding:clamp(3rem,5vw,4.5rem) 0 1.5rem; }
.footer-logo{ height:52px; width:auto; margin-bottom:1rem; }
.footer-head{ color:#fff; font-family:var(--font-head); font-weight:600; font-size:1rem; margin-bottom:1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.55rem; }
.footer-links a{ color:rgba(255,255,255,.72); }
.footer-links a:hover{ color:var(--accent); }
.footer-contact li{ display:flex; gap:.6rem; margin-bottom:.7rem; color:rgba(255,255,255,.74); font-size:.94rem; }
.footer-contact i{ color:var(--accent); margin-top:.15rem; }
.footer-contact a{ color:rgba(255,255,255,.74); text-decoration:none; }
.footer-contact a:hover{ color:var(--accent); }
.footer-rule{ border-color:rgba(255,255,255,.14); margin:2.2rem 0 1.2rem; }
.footer-muted{ color:rgba(255,255,255,.6); }
.social-btn{ width:42px; height:42px; border-radius:11px; display:inline-grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; transition:background .2s ease, color .2s ease, transform .2s ease; }
.social-btn:hover{ background:var(--accent); color:#20170a; transform:translateY(-3px); }
/* Light variant for use on white sections */
.social-btn--brand{ background:var(--brand-050); color:var(--brand); }
.social-btn--brand:hover{ background:var(--brand); color:#fff; }
.social-follow-label{ font-weight:600; color:var(--muted); font-size:.95rem; }

/* ===================== Inner page banner ===================== */
.page-banner{ position:relative; color:#fff; min-height:44vh; display:flex; align-items:center; overflow:hidden; background:var(--brand-900); }
.page-banner .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.page-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--brand-900) 10%,rgba(10,47,92,.7) 55%,rgba(10,47,92,.3)); }
.page-banner .container{ position:relative; z-index:2; padding-top:calc(var(--util-h) + var(--nav-h)); }
.page-banner h1{ color:#fff; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(2rem,5vw,3.4rem); }
.breadcrumb-nav{ display:flex; gap:.5rem; align-items:center; color:rgba(255,255,255,.8); font-size:.9rem; }
.breadcrumb-nav a{ color:rgba(255,255,255,.8); } .breadcrumb-nav a:hover{ color:#fff; }
.breadcrumb-nav .sep{ opacity:.5; }
.anchor-offset{ scroll-margin-top:calc(var(--util-h) + var(--nav-h) + 12px); }
.prose h2{ font-size:1.5rem; margin-bottom:.6rem; } .prose h3{ font-size:1.2rem; }
.prose p{ color:var(--body); }
.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.6rem; height:100%; }
.info-card .ico{ width:52px; height:52px; border-radius:13px; display:grid; place-items:center; background:var(--brand-050); color:var(--brand); font-size:1.4rem; margin-bottom:1rem; }

/* ===================== Flash / alerts ===================== */
.flash-toast{ border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-md); }

/* ===================== Splash / loader ===================== */
.splash{
  position:fixed; inset:0; z-index:5000; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 0%, var(--brand-800), var(--brand-900) 70%);
  transition:opacity .55s ease, visibility .55s ease;
}
.splash.is-hidden{ opacity:0; visibility:hidden; }
.splash-inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.splash-logo{ height:76px; width:auto; animation:splashPulse 1.5s ease-in-out infinite; }
.splash-bar{ width:190px; height:4px; border-radius:4px; background:rgba(255,255,255,.16); overflow:hidden; }
.splash-bar span{ display:block; height:100%; width:38%; border-radius:4px; background:var(--accent); animation:splashBar 1.15s ease-in-out infinite; }
.splash-tag{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.22em; font-size:.7rem; color:rgba(255,255,255,.6); }
@keyframes splashPulse{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.06); opacity:1; } }
@keyframes splashBar{ 0%{ transform:translateX(-140%); } 100%{ transform:translateX(360%); } }
@media (prefers-reduced-motion:reduce){
  .splash-logo{ animation:none; }
  .splash-bar span{ animation:none; width:100%; }
}

/* ===================== Animation base states ===================== */
.js-anim .reveal{ opacity:0; }
.js-anim .reveal-up{ opacity:0; transform:translateY(28px); }
.js-anim .reveal-left{ opacity:0; transform:translateX(-28px); }
.js-anim .reveal-right{ opacity:0; transform:translateX(28px); }
.js-anim .reveal-scale{ opacity:0; transform:scale(.94); }
.js-anim .hero-anim{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-anim .reveal,.js-anim .reveal-up,.js-anim .reveal-left,.js-anim .reveal-right,.js-anim .reveal-scale,.js-anim .hero-anim{
    opacity:1 !important; transform:none !important;
  }
  .js-anim .hero-slide.is-active{ animation:none; transform:scale(1.02); }
  .scroll-cue{ animation:none; }
}

/* ===================== Utilities ===================== */
.py-section{ padding:clamp(3.5rem,7vw,6.5rem) 0; }
.max-40{ max-width:40rem; } .max-46{ max-width:46rem; }
.text-balance{ text-wrap:balance; }
.z-2{ position:relative; z-index:2; }

@media (max-width:991px){
  .hero{ min-height:92svh; }
  .hero-meta{ gap:1.2rem 1.8rem; }
  .media-grid{ grid-auto-rows:130px; }
  .brand-logo{ height:40px; }
}
@media (max-width:575px){
  .brand-logo{ height:36px; }
}
@media (max-width:359px){
  .brand-logo{ height:32px; }
  .nav-toggler{ width:42px; height:42px; font-size:1.35rem; }
}

/* ===================== About pages ===================== */
/* Leadership profile */
.leader-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); background:var(--surface-2); }
.leader-photo img{ display:block; width:100%; height:auto; }
.leader-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.12; margin-top:.5rem; }
.leader-title{ color:var(--brand); font-weight:600; margin:.4rem 0 0; }
.leader-quote{ border-left:4px solid var(--accent); padding:.2rem 0 .2rem 1.2rem; margin:1.5rem 0; font-size:1.12rem; font-style:italic; color:var(--muted); }

/* Explore / link cards */
.link-card{ display:block; height:100%; text-decoration:none; color:inherit; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.link-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.link-card .go{ display:inline-flex; align-items:center; gap:.4rem; color:var(--brand); font-weight:600; margin-top:.9rem; }

/* Value cards */
.value-card{ text-align:center; }
.value-card .ico{ margin-left:auto; margin-right:auto; }

/* "Earn to Serve" principle band */
.principle-band{ background:var(--brand-900); color:#fff; border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,3rem); box-shadow:var(--shadow-lg); }
.principle-band .kicker{ color:var(--accent-200,#f0c56b); font-family:var(--font-display); letter-spacing:.06em; text-transform:uppercase; font-size:.85rem; }
.principle-band .big{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.15; margin:.5rem 0 .2rem; }

/* Governance org charts */
.gov-chart{ display:block; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface); text-decoration:none; color:inherit; }
.gov-chart img{ display:block; width:100%; height:auto; }
.gov-chart figcaption{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 1.1rem; font-size:.92rem; color:var(--muted); border-top:1px solid var(--line); }
.gov-chart figcaption .zoom{ color:var(--brand); font-weight:600; white-space:nowrap; }
.gov-tier{ height:100%; }
.gov-tier .tier-tag{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); background:var(--brand-050); border-radius:999px; padding:.28rem .8rem; margin-bottom:.7rem; }