/* ==========================================================================
   Fello Logistics — Rebuild prototype
   Design system + component library
   Brand: navy #0c436a / gold #d19f2a  ·  Bakbak One + Open Sans
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  --navy:        #0c436a;
  --navy-deep:   #08304f;
  --navy-800:    #0a3a5c;
  --steel:       #afc8d5;
  --steel-soft:  #d3e2ea;
  --gold:        #d19f2a;
  --gold-deep:   #b8871c;
  --ink:         #1d252c;
  --ink-soft:    #47555f;
  --line:        #e4ebf0;
  --bg:          #ffffff;
  --bg-alt:      #f5f8fb;
  --bg-navy:     #0c436a;
  --white:       #ffffff;

  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   22px;
  --shadow-sm:   0 2px 8px rgba(12,67,106,.06);
  --shadow:      0 14px 40px rgba(12,67,106,.10);
  --shadow-lg:   0 30px 70px rgba(8,48,79,.18);

  --maxw:        1180px;
  --gap:         clamp(1rem, 2.4vw, 2rem);

  --font-display: 'Bakbak One', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-deep); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; color: var(--navy); letter-spacing: .2px; margin: 0 0 .5em; }
p { margin: 0 0 1.1rem; }
ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: .78rem;
  color: var(--gold-deep);
  margin: 0 0 .8rem;
  display: inline-block;
}
.eyebrow--light { color: var(--gold); }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--bg-navy); color: #eaf1f6; }
.section--navy h1,.section--navy h2,.section--navy h3 { color: #fff; }
.section__head { max-width: 720px; margin: 0 auto clamp(2rem,4vw,3rem); text-align: center; }
.section__head.left { margin-inline: 0; text-align: left; }
.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.lead { font-size: 1.18rem; color: var(--ink-soft); }
.section--navy .lead { color: #c5d6e2; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .4px;
  padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--gold); color: var(--navy-deep); box-shadow: 0 8px 22px rgba(209,159,42,.32); }
.btn--primary:hover { background: var(--gold-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(209,159,42,.4); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; }
.nav__logo img { height: 40px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav__menu > li { position: relative; }
.nav__menu a {
  font-family: var(--font-body); font-weight: 600; font-size: .97rem; color: var(--ink);
  padding: .6rem .85rem; border-radius: 8px; display: inline-flex; align-items: center; gap: .3rem;
}
.nav__menu a:hover { color: var(--navy); background: var(--bg-alt); }
.nav__menu .caret { width: .6rem; height: .6rem; opacity: .6; }
.dropdown__panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .5rem; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .22s var(--ease); list-style: none; margin: 0;
}
.nav__menu > li:hover .dropdown__panel,
.nav__menu > li:focus-within .dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__panel a { display: block; padding: .6rem .8rem; font-weight: 500; border-radius: 7px; }
.nav__cta { display: flex; align-items: center; gap: .6rem; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav__toggle span { display: block; width: 26px; height: 2.5px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .3s var(--ease); }

/* ---- Hero ---- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #0e4e7d 100%);
}
.hero::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(680px 420px at 82% -8%, rgba(209,159,42,.28), transparent 60%),
    radial-gradient(560px 460px at 10% 110%, rgba(175,200,213,.18), transparent 60%);
  pointer-events:none;
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center; padding: clamp(3.5rem,7vw,6rem) 0 clamp(3.5rem,8vw,6.5rem); }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.2vw, 4.2rem); margin-bottom: .35em; }
.hero__sub { font-size: 1.25rem; color: #cfe0ec; max-width: 40ch; margin-bottom: 1.8rem; }
.hero .btn-row { margin-top: .4rem; }
.hero__aside {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); padding: 1.6rem; backdrop-filter: blur(6px);
}
.hero__aside h3 { color: #fff; font-size: 1.15rem; margin-bottom: 1rem; }
.hero__values { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.hero__values li { display: flex; gap: .75rem; align-items: flex-start; color: #dbe8f0; font-size: .98rem; }
.hero__values .dot { flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(209,159,42,.2); display: grid; place-items: center; color: var(--gold); }
.hero__values strong { color: #fff; font-family: var(--font-display); font-weight: 400; letter-spacing: .3px; }

/* page hero (subpages) */
.pagehero { position: relative; color: #fff; background: linear-gradient(120deg, var(--navy-deep), var(--navy) 70%); overflow: hidden; }
.pagehero::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 340px at 88% -20%, rgba(209,159,42,.26), transparent 62%); }
.pagehero__inner { position: relative; z-index:1; padding: clamp(3rem,6vw,5rem) 0 clamp(2.6rem,5vw,4rem); max-width: 780px; }
.pagehero h1 { color:#fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.pagehero p { color:#cfe0ec; font-size: 1.2rem; max-width: 52ch; margin-bottom: 1.5rem; }
.breadcrumb { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; font-size:.86rem; color:#9db8c9; margin-bottom:1.1rem; }
.breadcrumb a { color:#c5d6e2; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { opacity:.5; }

/* ---- Cards / grids ---- */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2,1fr); }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--4 { grid-template-columns: repeat(4,1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--steel); }
.card__icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy), #12557f); color: var(--gold); margin-bottom: 1rem; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.card p { color: var(--ink-soft); font-size: .98rem; margin-bottom: .9rem; }
.card__link { font-family: var(--font-display); font-size: .92rem; letter-spacing: .4px; color: var(--navy); display: inline-flex; align-items: center; gap: .4rem; }
.card__link svg { width: .9em; transition: transform .2s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }
.card--service h3 a { color: var(--navy); }

/* ---- Values / feature list ---- */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,1.8rem); }
.value { text-align: left; }
.value__num { font-family: var(--font-display); font-size: 2.4rem; color: var(--steel); line-height: 1; }
.value h3 { font-size: 1.4rem; margin: .5rem 0 .5rem; }
.value p { color: var(--ink-soft); font-size: .98rem; }
.section--navy .value p { color: #c5d6e2; }
.section--navy .value__num { color: rgba(209,159,42,.55); }

/* checkmark benefit list */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; }
.checks li::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308304f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.checks--navy li::before { background-color: var(--gold); }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.4rem); align-items: center; }
.split--media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.prose h2 { font-size: clamp(1.7rem,3.4vw,2.4rem); }
.prose h3 { font-size: 1.3rem; margin-top: 1.4rem; }
.prose p { color: var(--ink-soft); }

/* ---- Steps ("The Fello Way") ---- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding: 1.6rem; background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step__n { font-family: var(--font-display); width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .9rem; }
.step h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---- Stats band ---- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.2rem,4.5vw,3.2rem); color: var(--gold); line-height: 1; }
.stat__label { font-size: .95rem; color: #c5d6e2; margin-top: .35rem; }

/* ---- Testimonials ---- */
.testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.testimonial { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.testimonial__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: .7rem; font-size: .95rem; }
.testimonial p { font-size: .99rem; color: var(--ink); }
.testimonial__by { margin-top: auto; padding-top: 1rem; font-weight: 700; color: var(--navy); font-size: .95rem; }
.testimonial__by span { display: block; font-weight: 400; color: var(--ink-soft); font-size: .88rem; }

/* ---- Partners strip ---- */
.partners { display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; align-items: center; justify-content: center; }
.partners span { font-family: var(--font-display); color: #8aa7b8; font-size: 1.25rem; letter-spacing: .5px; }

/* ---- CTA band ---- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; border-radius: var(--radius-lg); padding: clamp(2.4rem,5vw,3.6rem); text-align: center; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(500px 300px at 85% 120%, rgba(209,159,42,.3), transparent 60%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color:#fff; font-size: clamp(1.7rem,3.6vw,2.6rem); }
.cta-band p { color:#cfe0ec; max-width: 52ch; margin-inline:auto; }

/* ---- Team ---- */
.team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.member { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.member__photo { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy), #12557f); display:grid; place-items:center; color: rgba(255,255,255,.5); font-family: var(--font-display); font-size: 2.6rem; }
.member__body { padding: 1.3rem 1.4rem 1.5rem; }
.member__body h3 { font-size: 1.25rem; margin-bottom: .1rem; }
.member__role { font-family: var(--font-display); color: var(--gold-deep); font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: .6rem; }
.member__body p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* ---- Blog ---- */
.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.post-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__tag { display:inline-block; background: var(--steel-soft); color: var(--navy); font-family: var(--font-display); font-size:.72rem; letter-spacing:1px; text-transform:uppercase; padding:.25rem .7rem; border-radius:999px; }
.post-card__body { padding: 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card__body h3 { font-size: 1.2rem; line-height:1.15; }
.post-card__meta { font-size:.83rem; color: var(--ink-soft); margin-top:auto; }
.post-card__excerpt { color: var(--ink-soft); font-size:.94rem; }

/* article */
.article { max-width: 760px; margin-inline:auto; }
.article__meta { color: var(--ink-soft); font-size:.95rem; margin-bottom: 1.5rem; }
.article p { color: #2c3841; }
.article h2 { font-size: 1.6rem; margin-top: 2rem; }
.article h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.article blockquote { border-left: 4px solid var(--gold); background: var(--bg-alt); margin: 1.6rem 0; padding: 1rem 1.4rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.1rem; color: var(--navy); }

/* ---- Contact ---- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); }
.info-row { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem; }
.info-row .ic { flex:none; width:44px; height:44px; border-radius:12px; background: var(--bg-alt); color: var(--navy); display:grid; place-items:center; }
.info-row .ic svg { width:20px; height:20px; }
.info-row h4 { font-family: var(--font-body); font-weight:700; color: var(--navy); margin:0 0 .15rem; }
.info-row p { margin:0; color: var(--ink-soft); font-size:.97rem; }
.form { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem,3vw,2rem); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 1rem; }
.field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color: var(--navy); }
.field input, .field select, .field textarea {
  width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; background: var(--bg-alt); transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--navy); background:#fff; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-deep); color: #b9cdda; padding-top: clamp(3rem,6vw,4.5rem); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.5rem; }
.site-footer img { height: 38px; margin-bottom: 1rem; }
.site-footer h4 { color:#fff; font-family: var(--font-body); font-weight:700; font-size:.95rem; letter-spacing:.5px; text-transform:uppercase; margin-bottom:1rem; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.site-footer a { color:#b9cdda; font-size:.95rem; }
.site-footer a:hover { color: var(--gold); }
.footer-tag { font-size:.96rem; max-width: 34ch; color:#9db8c9; }
.footer-contact li { display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding: 1.4rem 0; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; font-size:.86rem; color:#8aa7b8; }
.footer-bottom a { color:#8aa7b8; }

/* ---- Utilities ---- */
.center { text-align:center; }
.mt-2 { margin-top: 2rem; }
/* legacy .reveal hidden-state removed: the [data-io] system owns reveals now,
   and keeping opacity:0 here blanked content for reduced-motion / no-JS users */

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__aside { order: 2; }
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); gap: 1.8rem 1rem; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .nav__menu, .nav__cta .btn { display: none; }
  .nav__toggle { display: block; }
  .nav[data-open="true"] .nav__menu {
    display: flex; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column;
    align-items: stretch; background:#fff; border-bottom:1px solid var(--line); padding: .8rem; gap:.2rem; box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .dropdown__panel { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding-left:1rem; }
  .grid--2, .grid--3, .grid--4, .values, .steps, .testimonials, .team-grid, .post-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PREMIUM ELEVATION LAYER
   Motion, depth, and refinement layered over the base system.
   All original; standard UI-motion patterns. Respects reduced-motion (bottom).
   ========================================================================== */

:root {
  --shadow-glow: 0 0 0 1px rgba(12,67,106,.04), 0 20px 45px -20px rgba(8,48,79,.35);
  --ease-out: cubic-bezier(.16,.84,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
}

/* ---- Page load fade ---- */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn .5s ease both; }

/* ---- Universal reveal-on-scroll (JS auto-tags elements) ---- */
@keyframes fadeUp { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } }
[data-io] { opacity: 0; }
/* fill-mode backwards + explicit opacity: hides during stagger delay, but releases
   transform/filter back to the cascade after the animation so hover lifts and JS tilt work */
[data-io].io-in { opacity: 1; animation: fadeUp .72s var(--ease-out) backwards; animation-delay: var(--io-delay, 0ms); }

/* ---- HERO: living gradient + staggered entrance ---- */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: screen; }
.hero__bg .b1 { width: 46vw; height: 46vw; left: -8vw; top: -14vw; background: radial-gradient(circle at 30% 30%, #1f6fa8, transparent 62%); animation: drift1 18s var(--ease) infinite alternate; }
.hero__bg .b2 { width: 40vw; height: 40vw; right: -6vw; top: -6vw; background: radial-gradient(circle at 60% 40%, #d19f2a, transparent 60%); opacity: .4; animation: drift2 22s var(--ease) infinite alternate; }
.hero__bg .b3 { width: 38vw; height: 38vw; left: 30%; bottom: -22vw; background: radial-gradient(circle at 50% 50%, #0e5c93, transparent 62%); animation: drift3 20s var(--ease) infinite alternate; }
.hero__bg .grain { position:absolute; inset:0; opacity:.5; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 3px 3px; }
@keyframes drift1 { to { transform: translate(8vw, 6vw) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-6vw, 8vw) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-4vw, -6vw) scale(1.2); } }
.hero .container { position: relative; z-index: 1; }
.hero h1 { animation: fadeUp .9s var(--ease-out) .05s both; letter-spacing: -.5px; }
.hero .eyebrow { animation: fadeUp .9s var(--ease-out) both; }
.hero__sub { animation: fadeUp .9s var(--ease-out) .16s both; }
.hero .btn-row { animation: fadeUp .9s var(--ease-out) .26s both; }
.hero__aside { animation: fadeUp 1s var(--ease-out) .38s both; }
.hero__bg { transform: translateY(calc(var(--sy, 0) * .15px)); }

/* ---- Elevated buttons: sheen sweep + press ---- */
.btn { position: relative; overflow: hidden; }
.btn--primary::after, .btn--navy::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease-out);
}
.btn--primary:hover::after, .btn--navy:hover::after { left: 140%; }
.btn:active { transform: translateY(0) scale(.98); }

/* ---- Elevated cards: gradient ring + glow lift ---- */
.card { position: relative; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(209,159,42,.6), rgba(12,67,106,.15) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__icon { transition: transform .35s var(--ease-spring); }
.card:hover .card__icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); }

/* ---- Stat counters ---- */
.stat__num { font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.stats > div { transition: transform .4s var(--ease-out); }
.stats > div:hover { transform: translateY(-3px); }

/* ---- Elevated page hero (subpages) ---- */
.pagehero__inner > * { animation: fadeUp .8s var(--ease-out) both; }
.pagehero__inner > .eyebrow { animation-delay: 0s; }
.pagehero__inner > h1 { animation-delay: .08s; }
.pagehero__inner > p { animation-delay: .16s; }
.pagehero__inner > .btn-row { animation-delay: .24s; }
.pagehero::before { content:""; position:absolute; inset:0; background: radial-gradient(520px 300px at 12% 120%, rgba(31,111,168,.35), transparent 60%); }

/* ---- Partner marquee ---- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 3.4rem; padding-right: 3.4rem; align-items: center; animation: scrollX 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); color: #7f9db0; font-size: 1.35rem; letter-spacing: .5px; white-space: nowrap; transition: color .3s var(--ease-out); }
.marquee__track span:hover { color: var(--navy); }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---- Testimonials: quote mark + lift ---- */
.testimonial { position: relative; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.testimonial::before { content: "\201C"; position: absolute; top: -.35em; right: .2em; font-family: var(--font-display); font-size: 6rem; color: rgba(12,67,106,.06); line-height: 1; }
.testimonial:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--steel); }

/* ---- CTA band: slow animated sheen ---- */
.cta-band::before {
  content:""; position:absolute; inset:0; opacity:.5;
  background: conic-gradient(from 180deg at 70% 120%, rgba(209,159,42,.25), transparent 40%, transparent 70%, rgba(31,111,168,.25));
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-band > * { position: relative; z-index: 1; }

/* ==========================================================================
   PREMIUM FORMS: floating labels, focus motion, submit loader + success reveal
   ========================================================================== */
.form { position: relative; overflow: hidden; }
.ff { position: relative; margin-bottom: 1.15rem; }
.ff input, .ff select, .ff textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-alt); font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 1.5rem .95rem .55rem; transition: border-color .25s var(--ease-out), background .25s, box-shadow .25s;
}
.ff textarea { min-height: 118px; resize: vertical; padding-top: 1.6rem; }
.ff label { position: absolute; left: .98rem; right: .95rem; top: .95rem; color: var(--ink-soft); font-size: 1rem; pointer-events: none; transform-origin: left top; transition: transform .2s var(--ease-out), color .2s var(--ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff input:focus, .ff select:focus, .ff textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(12,67,106,.08); }
.ff input:focus + label, .ff select:focus + label, .ff textarea:focus + label,
.ff input:not(:placeholder-shown) + label, .ff textarea:not(:placeholder-shown) + label,
.ff select[data-filled="true"] + label { transform: translateY(-.65rem) scale(.76); color: var(--navy); }
.ff::after { content:""; position:absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--gold); border-radius: 2px; transition: left .28s var(--ease-out), right .28s var(--ease-out); }
.ff:focus-within::after { left: 2%; right: 2%; }
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px){ .ff-row { grid-template-columns: 1fr; } }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content:""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
.btn--primary.is-loading::before { border-color: rgba(8,48,79,.35); border-top-color: var(--navy-deep); }

.form__success { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .4rem; padding: 2rem; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s; }
.form.is-sent .form__success { opacity: 1; visibility: visible; transform: none; }
.form.is-sent .form__fields { opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .35s; pointer-events: none; }
.form__success h3 { color: var(--navy); font-size: 1.5rem; margin: .6rem 0 .2rem; }
.form__success p { color: var(--ink-soft); margin: 0; max-width: 34ch; }
.form__check { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(209,159,42,.4); animation: popIn .5s var(--ease-spring) both; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.form__check svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.form.is-sent .form__check svg { animation: drawCheck .5s var(--ease-out) .25s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ---- Scroll progress bar (JS-driven width) ---- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width .1s linear; }

/* ---- Reduced motion: turn it all off ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-io] { opacity: 1 !important; }
  .marquee__track { animation: none !important; }
  body { animation: none !important; }
}

/* ==========================================================================
   ROAD BAND: a Fello semi-truck drives across the screen
   ========================================================================== */
.roadband { position: relative; overflow: hidden; background: linear-gradient(180deg, #eef4f8 0%, #dfeaf1 100%); }
.roadband__sky { position: absolute; inset: 0; background: radial-gradient(600px 200px at 80% 0%, rgba(209,159,42,.14), transparent 60%); }
.road { position: relative; height: 172px; }
.road__surface { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg, #2a343d 0%, #1d252c 100%); }
.road__surface::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.12); }
.road__line { position: absolute; left: 0; right: 0; bottom: 27px; height: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 30px, transparent 30px 64px); animation: roadDash 1s linear infinite; opacity: .95; }
@keyframes roadDash { to { background-position: 64px 0; } }
.road__truck { position: absolute; bottom: 40px; left: 0; width: 216px; will-change: transform; animation: drive 7.5s linear infinite; }
.road__truck svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 8px rgba(0,0,0,.28)); }
@keyframes drive { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } }
.wheel { transform-box: fill-box; transform-origin: center; animation: roll .55s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
@media (max-width: 640px){ .road { height: 140px; } .road__truck { width: 168px; bottom: 34px; } }

@media (prefers-reduced-motion: reduce) {
  .road__truck { animation: none !important; transform: translateX(8vw); }
  .road__line { animation: none !important; }
  .wheel { animation: none !important; }
}

/* ==========================================================================
   V3 CINEMA LAYER
   Drastic design + motion upgrade. Layered over v1/v2; later cascade wins.
   ========================================================================== */

:root {
  --gold-bright: #f2c14e;
  --shadow-xl: 0 40px 90px -30px rgba(8,48,79,.35), 0 18px 36px -18px rgba(8,48,79,.25);
}

/* ---- Global polish ---- */
::selection { background: var(--gold); color: var(--navy-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 8px; border: 3px solid var(--bg-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--navy-deep); }

/* ---- Typography scale-up ---- */
.hero h1 { font-size: clamp(3rem, 6.6vw, 5.4rem); line-height: 1.02; letter-spacing: -1.5px; }
.pagehero h1 { letter-spacing: -1px; }
.section-title { letter-spacing: -.6px; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.24rem); }

/* ---- Gradient text accent ---- */
.grad {
  background: linear-gradient(100deg, var(--gold-bright) 10%, var(--gold) 55%, #e8b84a 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal;
}

/* ---- Word-stagger headline reveal (JS splits, or hand-authored) ----
   Class is .split-words, NOT .split: .split is the two-column layout utility. */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.split-words .w > span { display: inline-block; transform: translateY(112%); animation: wordUp .8s var(--ease-out) forwards; animation-delay: calc(var(--wi, 0) * .075s + .12s); }
@keyframes wordUp { to { transform: none; } }
.hero h1.split-words { animation: none; }
.pagehero__inner > h1.split-words { animation: none; }

/* ---- Aurora hero ---- */
.hero { isolation: isolate; }
.hero__bg .aurora { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; opacity: .55; will-change: transform; }
.hero__bg .a1 { width: 56vw; height: 56vw; left: -12vw; top: -18vw; background: conic-gradient(from 90deg at 50% 50%, #1f6fa8, #0e5c93 40%, #d19f2a 72%, #1f6fa8); animation: aur1 26s linear infinite; }
.hero__bg .a2 { width: 44vw; height: 44vw; right: -10vw; top: -8vw; background: radial-gradient(circle at 35% 35%, rgba(242,193,78,.85), rgba(209,159,42,.15) 60%, transparent 75%); opacity: .38; animation: aur2 19s ease-in-out infinite alternate; }
.hero__bg .a3 { width: 50vw; height: 50vw; left: 26%; bottom: -30vw; background: radial-gradient(circle at 50% 40%, #1a7ab8, transparent 65%); opacity: .5; animation: aur3 23s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: rotate(360deg); } }
@keyframes aur2 { to { transform: translate(-5vw, 7vw) scale(1.18); } }
@keyframes aur3 { to { transform: translate(6vw, -6vw) scale(1.12); } }
.hero__grid {
  position: absolute; inset: -1px;
  background-image: linear-gradient(rgba(175,200,213,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(175,200,213,.10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 90% at 60% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(80% 90% at 60% 30%, #000 30%, transparent 75%);
  animation: gridShift 30s linear infinite;
}
@keyframes gridShift { to { background-position: 56px 56px; } }
.hero__inner { padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(5rem, 10vw, 8.5rem); }

/* scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 1.3rem; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; display: flex; justify-content: center; padding-top: 8px; }
.scroll-cue::before { content: ""; width: 3px; height: 9px; border-radius: 2px; background: var(--gold); animation: cueDrop 1.7s var(--ease-out) infinite; }
@keyframes cueDrop { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }

/* glassier promise card */
.hero__aside { background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.22); backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow-xl); }

/* ---- Nav: gold underline slide ---- */
.nav__menu > li > a { position: relative; }
.nav__menu > li > a::after {
  content: ""; position: absolute; left: .85rem; bottom: .32rem; width: calc(100% - 1.7rem); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease-out);
}
.nav__menu > li > a:hover::after, .nav__menu > li > a:focus-visible::after { transform: scaleX(1); }

/* ---- Section atmosphere (cascades to every page) ---- */
.section--alt {
  background-color: var(--bg-alt);
  background-image: linear-gradient(rgba(12,67,106,.033) 1px, transparent 1px), linear-gradient(90deg, rgba(12,67,106,.033) 1px, transparent 1px);
  background-size: 44px 44px;
}
.section--navy {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(209,159,42,.16), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(31,111,168,.35), transparent 60%),
    linear-gradient(160deg, #0a3a5c, #08304f 60%, #0c436a);
}

/* ---- Reveal v3: blur-fade (backwards fill so hover/tilt transforms work after reveal) ---- */
[data-io].io-in { opacity: 1; animation: fadeUpBlur .85s var(--ease-out) backwards; animation-delay: var(--io-delay, 0ms); }
@keyframes fadeUpBlur {
  0% { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- Cards: cursor spotlight + 3D tilt hooks ---- */
.card, .testimonial, .member, .post-card { position: relative; }
.card::after, .testimonial::after, .member::after, .post-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .35s var(--ease-out);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(209,159,42,.13), transparent 65%);
}
.card:hover::after, .testimonial:hover::after, .member:hover::after, .post-card:hover::after { opacity: 1; }
.is-tilting { transition: box-shadow .35s var(--ease-out), border-color .35s var(--ease-out) !important; will-change: transform; }

/* ---- Stats: gradient numerals ---- */
.stat__num {
  background: linear-gradient(135deg, #ffd873, var(--gold) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- CTA band: gold inner ring ---- */
.cta-band { box-shadow: inset 0 0 0 1.5px rgba(209,159,42,.28), var(--shadow-lg); }

/* ---- Footer: gradient hairline ---- */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ==========================================================================
   V3 ROADSCAPE: scroll-driven truck in a living landscape
   ========================================================================== */
.roadband { background: linear-gradient(180deg, #d8e8f2 0%, #e9f1f6 46%, #f6e9cf 100%); }
.scene { position: relative; height: 250px; overflow: hidden; }
.sun { position: absolute; right: 12%; top: 22px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #ffe9ad, rgba(242,193,78,.55) 45%, transparent 70%); filter: blur(2px); animation: sunPulse 6s ease-in-out infinite alternate; }
@keyframes sunPulse { to { transform: scale(1.12); opacity: .88; } }
.cloud { position: absolute; height: 22px; border-radius: 20px; background: rgba(255,255,255,.9); filter: blur(6px); }
.cloud.c1 { width: 150px; top: 40px; left: -170px; animation: cloudMove 44s linear infinite; }
.cloud.c2 { width: 100px; top: 82px; left: -120px; animation: cloudMove 58s linear infinite; animation-delay: -18s; }
.cloud.c3 { width: 190px; top: 18px; left: -210px; animation: cloudMove 72s linear infinite; animation-delay: -40s; opacity: .7; }
@keyframes cloudMove { to { transform: translateX(calc(100vw + 280px)); } }
.skyline { position: absolute; left: 0; right: 0; bottom: 52px; width: 100%; height: 120px; color: #b3cbd9; opacity: .85; }
.roadband .road { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; }
.roadband .road__surface { height: 58px; }
.roadband .road__line { bottom: 26px; }
.roadband .road__truck { width: 232px; bottom: 40px; }
.road__truck svg { overflow: visible; } /* lets exhaust puffs rise past the viewBox instead of clipping */
/* JS-driven mode: physics-correct (ground static, wheels roll only while moving) */
.roadband.js .road__line { animation: none; }
.roadband.js .wheel { animation-play-state: paused; }
.roadband.js.is-moving .wheel { animation-play-state: running; }
.puff { fill: rgba(90,105,115,.4); transform-box: fill-box; transform-origin: center; opacity: 0; animation: puffUp 1.9s ease-out infinite; }
.puff.p2 { animation-delay: .63s; } .puff.p3 { animation-delay: 1.26s; }
@keyframes puffUp { 0% { opacity: .7; transform: translate(0,0) scale(.5); } 100% { opacity: 0; transform: translate(-15px,-24px) scale(2.6); } }
@media (max-width: 640px) { .scene { height: 190px; } .roadband .road__truck { width: 170px; bottom: 36px; } .sun { width: 90px; height: 90px; } }

/* ==========================================================================
   V3 NETWORK BAND: animated nationwide route
   ========================================================================== */
.network svg { width: 100%; height: auto; display: block; }
.route-base { fill: none; stroke: rgba(12,67,106,.18); stroke-width: 2.5; }
.network[data-io] .route-base { stroke-dasharray: 1; stroke-dashoffset: 1; }
.network.io-in .route-base { animation: drawRoute 2.2s var(--ease-out) .2s forwards; }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
.route-dash { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 14; animation: routeFlow 1.15s linear infinite; opacity: .85; }
@keyframes routeFlow { to { stroke-dashoffset: -24; } }
.city .dot { fill: var(--navy); }
.city .ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ping 2.8s ease-out infinite; animation-delay: calc(var(--ci, 0) * .4s); }
@keyframes ping { 0% { transform: scale(.4); opacity: .85; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
.city text { font: 700 14px 'Open Sans', sans-serif; fill: var(--navy); }
.ship { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(209,159,42,.85)); }
.network__cities { display: none; }
@media (max-width: 640px) {
  .city text { display: none; }
  .network__cities { display: block; text-align: center; font-family: var(--font-display); color: var(--navy); letter-spacing: 1px; font-size: .95rem; margin-top: .8rem; }
}

/* ==========================================================================
   V4 HERO REFINEMENT: editorial hierarchy, less visual noise
   ========================================================================== */
.hero__setup { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.15rem); line-height: 1.32; color: #c9dcea; letter-spacing: -.2px; max-width: 30ch; animation: fadeUp .9s var(--ease-out) .05s both; }
.hero__punch { display: block; margin-top: .4em; font-size: clamp(2.6rem, 5.3vw, 4.5rem); line-height: 1.04; letter-spacing: -1.5px; }
.hero h1 { margin-bottom: .55em; }
.hero__aside { padding: 1.9rem 1.8rem; }
.hero__aside h3 { font-size: 1.28rem; margin-bottom: 1.15rem; }
.hero__aside .eyebrow { margin-bottom: .45rem; font-size: .72rem; }
.hero__values { gap: 1.05rem; }
.hero__values li { font-size: .95rem; line-height: 1.5; align-items: center; color: #d7e5ef; }
.hero__values .dot { width: 30px; height: 30px; border-radius: 8px; }
.hero__values .dot svg { width: 16px; height: 16px; }
.hero__bg .grain { opacity: .3; }
.hero__grid { opacity: .55; }
@media (max-width: 800px) { .hero__punch { font-size: clamp(2.3rem, 9vw, 3rem); } }

/* ---- Stat spin-up pop ---- */
.stat__num.counting { animation: statPop .55s var(--ease-spring) both; }
@keyframes statPop { 0% { transform: scale(.82); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stat__num.counting { animation: none !important; } }

/* ---- Nested nav flyout: second-level submenu expands on hover ---- */
.dropdown__panel li { position: relative; }
.dropdown__panel .has-sub > a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dropdown__panel .has-sub > a .caret { transform: rotate(-90deg); width: .55rem; height: .55rem; opacity: .6; }
.dropdown__sub {
  position: absolute; top: -0.5rem; left: calc(100% + 4px); min-width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .5rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
}
.dropdown__panel .has-sub:hover > .dropdown__sub,
.dropdown__panel .has-sub:focus-within > .dropdown__sub { opacity: 1; visibility: visible; transform: translateX(0); }
.dropdown__sub a { display: block; padding: .6rem .8rem; font-weight: 500; border-radius: 7px; }
@media (max-width: 800px) {
  .nav[data-open="true"] .dropdown__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 1rem; }
  .dropdown__panel .has-sub > a .caret { transform: none; }
}

/* ---- Proof scroller: horizontal snap carousel for customer stories ---- */
.proofscroll { position: relative; }
.proofscroll__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82vw);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .4rem .2rem 1.2rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.proofscroll__track::-webkit-scrollbar { display: none; }
.proofscroll__track > .card { scroll-snap-align: start; }
.proofscroll__nav { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .5rem; }
.proofscroll__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--ease-out), color .25s, border-color .25s, transform .25s var(--ease-out);
}
.proofscroll__btn:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); transform: translateY(-2px); }
.proofscroll__btn:disabled { opacity: .35; pointer-events: none; }
.proofscroll__btn svg { width: 20px; height: 20px; }

/* ---- V3 reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .split-words .w > span { transform: none !important; animation: none !important; }
  .ship, .city .ring { display: none; }
  .route-dash { animation: none !important; }
  .network[data-io] .route-base { stroke-dasharray: none; stroke-dashoffset: 0; }
  .cloud, .sun, .puff, .hero__bg .aurora, .hero__grid, .scroll-cue::before { animation: none !important; }
}