/* ============================================================
   HONEST ACCESS — SHARED DESIGN SYSTEM
   ============================================================ */
:root{
  --blue:#4B6FFE;
  --blue-deep:#2F5BFA;
  --blue-ink:#1E3FC4;
  --green:#2CAA54;
  --green-deep:#22903F;
  --orange:#F59E0B;
  --ink:#0F172A;
  --gray:#64748B;
  --gray-light:#94A3B8;
  --card-line:#E7EDF6;
  --bg-tint-blue:#DCE9FD;
  --bg-tint-green:#E3F5E9;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out-back:cubic-bezier(.34,1.56,.64,1);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
section{position:relative;}
.lenis, html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto;}

/* ---------- TYPE ---------- */
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:800;line-height:1.1;}
.eyebrow-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;
  border:1px solid var(--card-line);
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--blue-deep);text-transform:uppercase;
  background:#fff;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.eyebrow-pill:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(75,111,254,.15);transform:translateY(-1px);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;display:inline-block;}
.dot.green{background:var(--green);}
.accent-text{
  background:linear-gradient(90deg,var(--blue) 0%, #2E93A6 45%, var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:999px;
  background:var(--blue-deep);color:#fff;
  font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 10px 24px rgba(47,91,250,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(47,91,250,.36);background:#2648d6;}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-primary span.arrow{transition:transform .3s var(--ease);}
.btn-primary:hover span.arrow{transform:translateX(4px);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:999px;
  background:transparent;color:var(--gray);
  font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  border:1px solid var(--card-line);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep);transform:translateY(-2px);background:#fff;}
.btn-white{background:#fff;color:var(--blue-deep);box-shadow:0 10px 24px rgba(15,23,42,.12);}
.btn-white:hover{background:#fff;box-shadow:0 16px 32px rgba(15,23,42,.18);}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 24px rgba(15,23,42,.06);
  padding:14px 0;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;}
.logo .word-honest{color:var(--blue);}
.logo .word-access{color:var(--green);}
.logo svg{transition:transform .4s var(--ease-out-back);}
.logo:hover svg{transform:rotate(-8deg) scale(1.08);}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{
  font-size:14.5px;font-weight:600;color:var(--ink);position:relative;padding:4px 0;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transition:width .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--blue-deep);}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:28px;}
.nav-toggle span{height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease), opacity .3s var(--ease), background .4s var(--ease);}

/* Header sitting over a dark hero (homepage only, before scroll): flip nav
   text to white so it stays readable against the dark background image. */
.site-header.on-dark .nav-links a{color:#fff;}
.site-header.on-dark .nav-links a.active{color:#fff;}
.site-header.on-dark .nav-links a::after{background:linear-gradient(90deg,#8EA6FF,#7FE0A3);}
.site-header.on-dark .nav-toggle span{background:#fff;}
.site-header.on-dark .logo .word-honest{color:#fff;}

/* Once scrolled (solid/blurred header bar), always use dark ink regardless
   of what's behind it — this rule intentionally comes after .on-dark so it
   wins the cascade at equal specificity. */
.site-header.scrolled .nav-links a{color:var(--ink);}
.site-header.scrolled .nav-links a.active{color:var(--blue-deep);}
.site-header.scrolled .nav-links a::after{background:linear-gradient(90deg,var(--blue),var(--green));}
.site-header.scrolled .nav-toggle span{background:var(--ink);}
.site-header.scrolled .logo .word-honest{color:var(--blue);}

@media(max-width:920px){
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:280px;
    background:#fff;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:0 40px;gap:28px;
    transform:translateX(100%);transition:transform .45s var(--ease);
    box-shadow:-10px 0 40px rgba(15,23,42,.12);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
  .nav-cta .btn-primary{padding:12px 20px;font-size:12px;}
}

/* ---------- HERO SLIDER ---------- */
.hero-slider{
  position:relative;height:100vh;min-height:640px;overflow:hidden;
  background:var(--ink);
}
.hero-slide{
  position:absolute;inset:0;opacity:0;
}
.hero-slide.is-active{opacity:1;z-index:2;}
.hero-slide .slide-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.15);
}
.hero-slide .slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.72) 100%);
}
.hero-slide.slide-brand .slide-media{display:none;}
.hero-slide.slide-brand{
  background:
    radial-gradient(1100px 620px at 15% 20%, rgba(75,111,254,.55) 0%, rgba(75,111,254,0) 60%),
    radial-gradient(900px 620px at 85% 80%, rgba(44,170,84,.5) 0%, rgba(44,170,84,0) 60%),
    linear-gradient(135deg,#0B1533 0%, #0F1F3D 100%);
}
.hero-content{
  position:relative;z-index:5;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin:0 auto;padding:0 32px;
  color:#fff;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;width:max-content;margin-bottom:26px;
  backdrop-filter:blur(6px);
}
.hero-content h1{
  font-size:clamp(38px,6vw,72px);
  color:#fff;max-width:820px;
}
.hero-content h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#8EA6FF,#7FE0A3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-content p{
  font-size:18px;line-height:1.7;color:rgba(255,255,255,.82);
  max-width:560px;margin-top:22px;
}
.hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}

.slide-index{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  z-index:6;display:flex;gap:10px;
}
.slide-index button{
  width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.35);
  transition:background .3s var(--ease), width .3s var(--ease);
}
.slide-index button.is-active{background:#fff;width:50px;}
.slide-progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green));width:0;z-index:7;}

.hero-arrows{position:absolute;bottom:36px;right:32px;z-index:6;display:flex;gap:10px;}
.hero-arrows button{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hero-arrows button:hover{background:rgba(255,255,255,.15);transform:scale(1.08);}

/* ---------- PAGE BANNER (inner pages) ---------- */
.page-banner{
  position:relative;padding:190px 0 90px;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, #CFE1FC 0%, rgba(207,225,252,0) 60%),
    radial-gradient(900px 520px at 88% 10%, #D7ECE0 0%, rgba(215,236,224,0) 60%),
    linear-gradient(180deg,#EAF2FE 0%, #EDF6F1 100%);
}
.page-banner .crumb{
  font-size:13px;font-weight:700;color:var(--gray);letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:18px;display:flex;align-items:center;gap:8px;
}
.page-banner .crumb a{color:var(--blue-deep);}
.page-banner h1{font-size:clamp(36px,5.4vw,58px);}
.page-banner p{color:var(--gray);font-size:17px;max-width:600px;margin-top:16px;line-height:1.6;}

/* ---------- SCROLL REVEAL ---------- */
/* NOTE: .reveal / .reveal-item are intentionally NOT hidden by default here.
   Hiding is applied programmatically by GSAP (assets/js/main.js) only once
   GSAP has confirmed it loaded. This means if the GSAP CDN script fails to
   load for any reason, content simply stays visible (no animation) instead
   of being permanently blank. See main.js initReveals() for the fallback. */
.reveal,.reveal-item{opacity:1;transform:none;}

/* ---------- SECTION HEAD ---------- */
.section{padding:100px 0;}
.section-tight{padding:72px 0;}
.section-head{max-width:640px;margin:0 0 40px;}
.section-head.center{margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:clamp(30px,4.2vw,46px);margin:18px 0 14px;}
.section-head p{color:var(--gray);font-size:16px;line-height:1.65;}
.section-tint{
  background:linear-gradient(180deg,#EAF2FE 0%, #EDF6F1 100%);
}

/* ---------- STAT / GENERIC CARDS ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat-card{
  border:1px solid var(--card-line);border-radius:var(--radius-md);
  padding:28px 24px;background:#fff;text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.stat-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(15,23,42,.08);border-color:transparent;}
.stat-card .num{font-size:32px;font-weight:800;line-height:1;margin-bottom:10px;transition:transform .35s var(--ease-out-back);}
.stat-card:hover .num{transform:scale(1.08);}
.stat-card .num.blue{color:var(--blue);}
.stat-card .num.green{color:var(--green);}
.stat-card .num.orange{color:var(--orange);}
.stat-card .lbl{font-size:14px;color:var(--ink);font-weight:500;}

.icon-badge{
  width:46px;height:46px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-tint-blue);color:var(--blue);
  transition:transform .4s var(--ease-out-back), background .4s var(--ease), color .4s var(--ease);
}
.icon-badge.green{background:var(--bg-tint-green);color:var(--green);}

.card{
  background:#fff;border-radius:var(--radius-md);
  padding:32px 28px;border:1px solid var(--card-line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(15,23,42,.1);border-color:transparent;}
.card:hover .icon-badge{transform:scale(1.1) rotate(-6deg);background:var(--blue);color:#fff;}
.card:hover .icon-badge.green{background:var(--green);}
.card h3{font-size:19px;font-weight:700;color:var(--blue-deep);margin:18px 0 10px;}
.card p{font-size:14.5px;color:var(--gray);line-height:1.6;}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  border:1px solid var(--card-line);border-radius:var(--radius-lg);
  padding:48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,#fff 60%, #FBF3E7 100%);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cta-banner:hover{box-shadow:0 24px 56px rgba(15,23,42,.1);transform:translateY(-4px);}
.cta-banner h3{font-size:26px;margin-bottom:8px;}
.cta-banner p{color:var(--gray);font-size:15px;max-width:480px;}
.cta-banner.dark{
  background:linear-gradient(120deg,#0F1F3D 0%, #14264A 100%);
  border-color:transparent;color:#fff;
}
.cta-banner.dark h3{color:#fff;}
.cta-banner.dark p{color:rgba(255,255,255,.75);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--card-line);padding:64px 0 32px;background:#fff;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;}
.footer-about p{color:var(--gray);font-size:14.5px;line-height:1.7;margin-top:16px;max-width:320px;}
.footer-col h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;color:var(--ink);}
.footer-col ul li{margin-bottom:12px;}
.footer-col a{color:var(--gray);font-size:14.5px;transition:color .25s var(--ease);}
.footer-col a:hover{color:var(--blue-deep);}
.footer-social{display:flex;gap:12px;margin-top:18px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--card-line);
  display:flex;align-items:center;justify-content:center;color:var(--blue-deep);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.footer-social a:hover{background:var(--blue-deep);color:#fff;transform:translateY(-3px);}
.footer-bottom{
  border-top:1px solid var(--card-line);padding-top:26px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--gray-light);
}
.footer-bottom a:hover{color:var(--blue-deep);}

@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .hero-arrows{display:none;}
}

/* ---------- SCROLLTRIGGER PIN HELPERS ---------- */
.pin-section{min-height:100vh;display:flex;align-items:center;}

/* ---------- MISC ---------- */
.split-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split-row.reverse{direction:rtl;}
.split-row.reverse > *{direction:ltr;}
.rounded-photo{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  box-shadow:0 30px 60px rgba(15,23,42,.14);
}
.rounded-photo img{width:100%;height:100%;object-fit:cover;display:block;}

.back-to-top{
  position:fixed;bottom:28px;right:28px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:var(--blue-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(47,91,250,.3);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}

@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}