/* ============================================
   Rohoffe — Main Stylesheet (Light theme)
   ============================================ */

@import url("./tokens.css");

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
input, select, textarea { font: inherit; }

/* ---------- Headings & text ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--navy-900);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: var(--t-lg); }
p  { color: var(--ink-700); font-weight: 400; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 400; font-size: var(--t-xs); letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-500);
}
/* Eyebrow uses TWO faded lines — represents shipping & speed (wake motif) */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 11px;
  flex: none;
  background-image:
    linear-gradient(to right, var(--gold-500), var(--gold-300)),
    linear-gradient(to right, transparent, var(--gold-500));
  background-position: 0 3px, 12px 8px;
  background-size: 34px 1.8px, 22px 1.4px;
  background-repeat: no-repeat;
}
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.sec { padding: var(--s-9) 0; }
.sec-alt { background: var(--navy-50); }
.sec-head { max-width: 720px; margin-bottom: var(--s-7); }
.sec-head h2 { margin: var(--s-3) 0; }
.sec-head p { font-size: var(--t-md); color: var(--ink-700); }
.sec-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head.center .eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 400; font-size: var(--t-sm); letter-spacing: .01em;
  padding: .9em 1.5em; border-radius: var(--radius-pill);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .3s, color .3s, border-color .3s;
  text-align: center; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
  background: var(--navy-800); color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--navy-900); transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn-gold {
  background: var(--grad-gold); color: #241500;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(220, 153, 41, .75);
}
.btn-outline {
  background: var(--white); color: var(--navy-800);
  border: 1.5px solid var(--navy-100);
}
.btn-outline:hover {
  border-color: var(--navy-800); transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-ghost {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1); border-color: var(--gold-300);
  transform: translateY(-2px);
}

/* ---------- Header / Nav (transparent over hero → solid on scroll) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, padding .35s, box-shadow .35s;
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--navy-100);
  box-shadow: 0 6px 24px -16px rgba(7,11,58,.18);
  padding: 10px 0;
}
/* Goes transparent again while a full-bleed media banner is pinned under it (mobile) */
.site-header.over-media {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.navbar {
  display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  height: 38px; width: auto; flex: none;
  /* logo keeps its real colours in EVERY state; a soft light plate keeps it
     legible over the dark hero while the header is transparent */
  background: rgba(255,255,255,.92);
  border-radius: 9px;
  padding: 6px 11px;
  transition: background .35s, padding .35s;
}
.site-header.scrolled .brand .mark { background: transparent; padding: 0; }
.brand .name {
  font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em;
  color: var(--navy-900);
}
.brand .name b { color: var(--gold-500); font-weight: 400; }
.mark-lg { height: 48px !important; }

/* Everything after .brand inside .navbar gets pushed to the right */
.navlinks {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto;
}
.navlinks a {
  font-weight: 400; font-size: var(--t-sm);
  color: rgba(255,255,255,.82); padding: 6px 0; position: relative;
  transition: color .25s;
}
.navlinks a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--grad-gold);
  transition: width .3s var(--ease);
}
.navlinks a:hover, .navlinks a.active { color: #fff; }
.navlinks a:hover::after, .navlinks a.active::after { width: 100%; }
/* solid header → dark links */
.site-header.scrolled .navlinks a { color: var(--ink-700); }
.site-header.scrolled .navlinks a:hover,
.site-header.scrolled .navlinks a.active { color: var(--navy-900); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
/* Compact header CTAs — smaller than section buttons */
.nav-cta .btn {
  font-size: .8125rem;          /* 13px */
  padding: .55em 1.05em;
  letter-spacing: .005em;
}
.nav-cta .btn svg { width: 14px; height: 14px; }
/* outline CTA: white on the transparent header, navy on the solid header */
.nav-cta .btn-outline {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.45);
}
.nav-cta .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.site-header.scrolled .nav-cta .btn-outline {
  background: var(--white); color: var(--navy-800); border-color: var(--navy-100);
}
.site-header.scrolled .nav-cta .btn-outline:hover { border-color: var(--navy-800); }
.burger {
  display: none; flex-direction: column; gap: 5px; padding: 8px;
}
.burger span {
  width: 22px; height: 2px; background: #fff;
  transition: transform .3s, opacity .3s, background .3s;
}
.site-header.scrolled .burger span { background: var(--navy-800); }
/* burger morphs into an X while the mobile menu is open */
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mega menu (Services) ---------- */
.nav-item { position: static; display: flex; align-items: center; }
a.nav-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.nav-trigger:focus { outline: none; }
a.nav-trigger:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 4px; }
.nav-trigger .caret { width: 14px; height: 14px; opacity: .7; transition: transform .3s var(--ease); }
.has-mega.open .nav-trigger .caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--navy-100);
  box-shadow: 0 34px 60px -34px rgba(7, 11, 58, .4);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .34s var(--ease), visibility 0s linear .34s;
}
.has-mega.open .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .3s var(--ease), transform .34s var(--ease), visibility 0s;
}
.mega-inner { padding: 32px clamp(26px, 3.2vw, 56px) 40px; }
.mega-head { margin-bottom: 20px; }
.mega-head .eyebrow { margin-bottom: 6px; }
.mega-head h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); color: var(--navy-900); letter-spacing: -.02em; }
.mega-body { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: stretch; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.mega-card {
  display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: center;
  padding: 11px 13px; border-radius: 12px;
  transition: background .2s var(--ease);
}
.mega-card:hover { background: var(--navy-50); }
.mega-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--navy-50); color: var(--navy-800);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.mega-card:hover .mega-ic { background: var(--navy-800); color: var(--gold-300); }
.mega-ic svg { width: 20px; height: 20px; }
.mega-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-txt b { font-weight: 400; font-size: .94rem; color: var(--navy-900); letter-spacing: -.01em; }
.mega-txt i { font-style: normal; font-size: .78rem; color: var(--ink-500); line-height: 1.35; }

.mega-feature {
  background: var(--navy-900); color: #fff;
  border-radius: 16px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 13px;
}
.mega-feature-ey { color: var(--gold-300); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.mega-feature p { color: rgba(255, 255, 255, .78); font-size: .85rem; line-height: 1.55; }
.mega-feature-link { color: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; }
.mega-feature-link:hover { color: var(--gold-300); }
.mega-feature-link svg { width: 15px; height: 15px; }
.mega-feature .mega-feature-cta { margin-top: auto; justify-content: center; width: 100%; }
.mega-all { color: var(--gold-500); font-size: .8rem; text-align: center; }
.mega-all:hover { text-decoration: underline; }

/* header turns solid while the mega is open (so it reads over the hero) */
.site-header.mega-open {
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--navy-100);
}
.site-header.mega-open .navlinks a { color: var(--ink-700); }
.site-header.mega-open .navlinks a:hover, .site-header.mega-open .navlinks a.active { color: var(--navy-900); }
.site-header.mega-open .brand .mark { background: transparent; padding: 0; }
.site-header.mega-open .burger span { background: var(--navy-800); }
.site-header.mega-open .nav-cta .btn-outline { background: var(--white); color: var(--navy-800); border-color: var(--navy-100); }
/* shield mega links from the top-nav link colour + underline rules
   (needs 4 classes to beat .site-header.mega-open .navlinks a) */
.site-header .mega a::after { display: none; }
.site-header .navlinks .mega .mega-all { color: var(--gold-500); }
.site-header .navlinks .mega .mega-all:hover { text-decoration: underline; }

/* ---------- Hero (image slider + rotating title) ---------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: flex-end;
  overflow: hidden;
  /* bottom inset == the wrap's left inset (clamp) so the title sits equidistant from left & bottom */
  padding: 140px 0 clamp(22px, 2.6vw, 40px);
  background: var(--navy-900);
  color: var(--white);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.9s ease;
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  animation: kenburns 13s ease-out forwards;   /* slow zoom-in while active */
}
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.16); } }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg,
    rgba(7,11,58,.86) 0%, rgba(12,21,119,.60) 42%,
    rgba(7,11,58,.50) 70%, rgba(220,153,41,.18) 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2; opacity: .04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* rotating title */
.hero-title { color: var(--white); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.hero-title.swapping { opacity: 0; transform: translateY(16px); }
.hero-title em {
  font-style: normal; font-weight: 400;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* slide indicators */
.hero-dots {
  display: flex; gap: 10px; margin-top: var(--s-6); position: relative; z-index: 6;
}
.hero-dots button {
  width: 30px; height: 4px; border-radius: 3px; border: none; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.35); transition: background .3s, width .3s;
}
.hero-dots button.is-active { background: var(--gold-300); width: 46px; }
@media (prefers-reduced-motion: reduce) { .hero-slide.is-active { animation: none; } }

/* hero breaks out of the centred 1400px container → title hugs the left with a modest inset */
.hero .wrap {
  position: relative; z-index: 5;
  max-width: none; margin: 0;
  padding-left: clamp(22px, 2.6vw, 40px);
  padding-right: clamp(22px, 2.6vw, 40px);
}
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-7);
  align-items: center;
}
.hero-copy { max-width: 760px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(243,211,93,.4);
  border-radius: var(--radius-pill);
  padding: 6px 16px 6px 8px;
  font-size: var(--t-xs); font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-300); background: rgba(243,211,93,.08);
  margin-bottom: var(--s-5);
}
.hero-tag b {
  background: var(--grad-gold); color: #241500;
  border-radius: 40px; padding: 3px 10px;
  font-size: var(--t-xs); letter-spacing: .04em;
}
.hero h1 { color: var(--white); }
.hero h1 em {
  font-style: normal; font-weight: 400;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .sub {
  font-size: var(--t-md); color: rgba(255,255,255,.82);
  max-width: 540px; margin: var(--s-5) 0 var(--s-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero side card */
.hero-card {
  background: linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(243,211,93,.25);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
/* (removed top gold line on .hero-card) */
.hero-card h4 { color: var(--white); font-size: var(--t-md); margin-bottom: 4px; }
.hero-card .small { font-size: var(--t-sm); color: rgba(255,255,255,.65); margin-bottom: var(--s-4); }
.ops-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid rgba(243,211,93,.16);
}
.ops-row:first-of-type { border-top: 0; }
.ops-row .lab {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-sm); color: rgba(255,255,255,.92); font-weight: 400;
}
.ops-row .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 4px rgba(243,211,93,.18);
  animation: pulse 2.4s infinite;
}
.ops-row:nth-child(2) .dot { animation-delay: .6s; }
.ops-row:nth-child(3) .dot { animation-delay: 1.2s; }
.ops-row:nth-child(4) .dot { animation-delay: 1.8s; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(243,211,93,.18); }
  50%      { box-shadow: 0 0 0 9px rgba(243,211,93,.02); }
}
.ops-row .val {
  font-size: var(--t-xs); font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-300);
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--navy-900); color: var(--white);
  border-top: 1px solid rgba(243,211,93,.18);
  border-bottom: 1px solid rgba(243,211,93,.18);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.trust-item:last-child { border-right: 0; }
.trust-item .v {
  font-size: var(--t-2xl); font-weight: 400; line-height: 1;
  color: var(--gold-300); letter-spacing: -.02em;
}
.trust-item .l {
  font-size: var(--t-sm); color: rgba(255,255,255,.7);
}

/* ---------- Coverage → Metrics parallax dissolve ----------
   The Coverage section pins to the top and then DISAPPEARS as you scroll —
   fading to transparent and drifting gently upward (parallax) — revealing
   the "By the numbers" panel underneath. No hard edge, no dead gap.
   Driven by JS (--cov-* vars); falls back to plain flow w/o motion. */
.stack-reveal { position: relative; z-index: 0; background: var(--white); }
.stack-reveal .ports {
  position: sticky;
  top: 0;
  z-index: 2;                 /* rides ON TOP, then dissolves away to reveal metrics */
  min-height: 100vh;          /* fills the view, then fades + lifts on scroll */
  display: grid;
  align-items: center;
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
  opacity: var(--cov-opacity, 1);
  transform: translateY(var(--cov-y, 0)) scale(var(--cov-scale, 1));
  transform-origin: 50% 35%;
  will-change: opacity, transform;
}
/* Reduced motion → no pin/fade; sections fall back to plain stacked flow */
@media (prefers-reduced-motion: reduce) {
  .stack-reveal .ports { position: static; min-height: 0; opacity: 1; transform: none; }
}

/* ---------- Metrics (sticky scroll — globe rises to centre) ---------- */
.metrics-wrap {
  position: relative;
  z-index: 1;                 /* sits BENEATH coverage; revealed as coverage fades */
  height: 220vh;              /* total scroll budget: 100vh pinned + ~120vh travel */
  background: var(--white);   /* matches the globe image's white background — no seam */
}
.metrics-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.metrics-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 0;
  max-width: 960px;
  margin: 0 auto;
}
.metric {
  text-align: center;
  padding: 6px 28px;
  border-right: 1px solid rgba(43, 50, 131, .18);
}
.metric:nth-child(3n) { border-right: none; }
.metric .mv {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  color: var(--navy-900);
  letter-spacing: -.03em;
  line-height: 1;
}
.metric .mv .plus { color: var(--gold-500); }
.metric .ml {
  font-size: var(--t-sm);
  color: var(--ink-500);
  margin-top: 12px;
}

/* Globe — starts LOW (only top peeking from the bottom) + slightly larger,
   then rises UP to centred while turning gently, as you scroll the pinned section. */
.metrics-globe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(116vh, 1060px);
  height: min(116vh, 1060px);
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--globe-y, 100vh)))
             scale(var(--globe-scale, 1.15))
             rotate(var(--globe-rot, -6deg));
  transform-origin: 50% 50%;
  will-change: transform;
}
.metrics-globe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* soft circular edge so the sphere fades into the white section (no seam) */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 72%);
  /* generated earth is dark — lighten it so the dark stats stay readable */
  filter: grayscale(1) brightness(1.5) contrast(.82);
  opacity: .6;
}

/* Dotted shipping routes that arc OUTSIDE the globe, drawing to their
   destinations as you scroll (revealed by a scroll-driven mask). */
.globe-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* mask reveal: each route draws from the hub outward as --route-reveal → 0 */
#routeReveal path {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--route-reveal, 1);
}
.globe-routes .routes path {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 2 13;                 /* dotted track */
}
.globe-routes .route-dots circle {
  fill: var(--gold-500);
  opacity: var(--route-dots-opacity, 0);
}
.globe-routes .hub-dot {
  fill: var(--gold-300);
  stroke: var(--gold-500);
  stroke-width: 2;
  opacity: var(--route-opacity, 0);
}
.globe-routes .hub-ring {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 2;
  transform-origin: 500px 500px;
  opacity: var(--route-opacity, 0);
  animation: hubpulse 2.6s ease-out infinite;
}
@keyframes hubpulse {
  0%   { r: 10; opacity: calc(var(--route-opacity, 0) * .8); }
  100% { r: 50; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .metrics-globe { transform: translate(-50%, -50%) scale(.95); }
  #routeReveal path { stroke-dashoffset: 0; }
  .globe-routes .route-dots circle,
  .globe-routes .hub-dot { opacity: .9; }
  .globe-routes .hub-ring { display: none; }
}

/* ---------- Services grid ---------- */
.services { background: var(--navy-50); }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.svc-card {
  background: var(--white);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius);
  padding: var(--s-6);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s;
  display: flex; flex-direction: column;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.svc-num {
  font-size: var(--t-sm); font-weight: 400; letter-spacing: .1em;
  color: var(--gold-500); opacity: .8;
}
.svc-ico {
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--gold-50);
  display: grid; place-items: center;
  margin: var(--s-4) 0 var(--s-5);
  transition: background .4s, transform .4s var(--ease);
}
.svc-card:hover .svc-ico {
  background: var(--grad-gold); transform: rotate(-4deg);
}
.svc-ico svg {
  width: 25px; height: 25px; stroke: var(--gold-500);
  transition: stroke .4s;
}
.svc-card:hover .svc-ico svg { stroke: #241500; }
.svc-card h3 {
  font-size: var(--t-lg); color: var(--navy-900); margin-bottom: 8px;
}
.svc-card p {
  font-size: var(--t-sm); color: var(--ink-700); flex-grow: 1;
}
.svc-card .more {
  margin-top: var(--s-4);
  font-size: var(--t-xs); font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy-800);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .3s, color .3s;
}
.svc-card:hover .more {
  gap: 11px; color: var(--gold-500);
}

/* ---------- Services 2-col: list left, sticky scroll-synced image right ---------- */
.services-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-8);
  align-items: start;
}
.services-list { display: flex; flex-direction: column; }
.svc-item {
  display: flex; gap: 22px; align-items: center;
  padding: var(--s-6) 0;
  min-height: 32vh;               /* taller rows → you scroll more per service (slower) */
  border-top: 1px solid var(--navy-100);
  opacity: .38;
  transition: opacity .55s var(--ease);
}
.svc-item:first-child { border-top: none; }
.svc-item.is-active { opacity: 1; }
.svc-item .svc-num {
  flex: none; padding-top: 6px; opacity: 1;
}
.svc-item-body h3 {
  font-size: var(--t-xl); color: var(--navy-900); margin-bottom: 8px;
}
.svc-item-body p {
  font-size: var(--t-base); color: var(--ink-700); max-width: 46ch;
}
.svc-item .more {
  margin-top: var(--s-4);
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-800);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .3s, color .3s;
}
.svc-item.is-active .more { color: var(--gold-500); }
.svc-item .more:hover { gap: 11px; }
.services-all { align-self: flex-start; margin-top: var(--s-6); }

.services-media { position: sticky; top: 96px; }
.services-media-inner {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy-100);
}
.svc-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.1s var(--ease), transform 9s linear;
}
.svc-photo.is-active { opacity: 1; transform: scale(1); }

/* ---------- Wan Hai featured block ---------- */
.wanhai {
  background: var(--navy-900); color: var(--white); overflow: hidden;
  position: relative;
}
.wanhai::before {
  content: ""; position: absolute; right: -200px; top: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,153,41,.18), transparent 60%);
}
.wanhai .wrap { position: relative; z-index: 2; }
.wanhai-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s-8); align-items: center;
}
.wanhai h2 { color: var(--white); }
.wanhai .lead {
  font-size: var(--t-md); color: rgba(255,255,255,.78);
  margin: var(--s-4) 0 var(--s-6);
}
.wanhai-list {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 22px; margin-bottom: var(--s-6);
}
.wanhai-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--t-sm); color: rgba(255,255,255,.85);
}
.wanhai-list svg {
  width: 18px; height: 18px; stroke: var(--gold-300);
  flex: none; margin-top: 3px;
}
.wanhai-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.wanhai-visual {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 440px;
  background: radial-gradient(120% 100% at 0% 0%, #1C2378 0%, #0A0F4D 60%);
  border: 1px solid rgba(243,211,93,.22);
}
.wanhai-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* navy gradient so the photo blends into the dark Wan Hai block */
.wanhai-visual::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7,11,58,.32) 0%, rgba(7,11,58,.10) 38%, rgba(7,11,58,.58) 100%);
  pointer-events: none;
}
.wanhai-badge {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  background: rgba(7,11,58,.7);
  border: 1px solid rgba(243,211,93,.3);
  backdrop-filter: blur(8px);
  border-radius: 12px; padding: 12px 18px;
}
.wanhai-badge .bn {
  font-size: 1.5rem; font-weight: 400; color: var(--gold-300); line-height: 1;
}
.wanhai-badge .bl {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-top: 4px;
}

/* ---------- Ports / map ---------- */
.ports { background: var(--white); }
.ports-grid {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s-8);
  align-items: center;
}
.atoll-map {
  position: relative; height: 540px;
  display: flex; justify-content: center;
}
.atoll-map svg { height: 100%; overflow: visible; }

/* Interactive Maldives coverage map (Leaflet) */
.coverage-map {
  aspect-ratio: 3 / 4;            /* matches the "What we do" image (.services-media-inner) */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--navy-100);
  background: var(--navy-900);
  z-index: 0;
}
.coverage-map .leaflet-control-attribution {
  font-size: 10px; background: rgba(255,255,255,.8);
}
/* gold base-name tooltips */
.leaflet-tooltip.map-tip {
  background: var(--navy-900);
  color: #fff;
  border: 1px solid var(--gold-500);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 400;
  box-shadow: var(--shadow);
}
.leaflet-tooltip.map-tip::before { border-right-color: var(--gold-500); }
/* Maldives map — clean solid silhouette */
.maldives-outline path {
  fill: var(--ink-300);
  fill-opacity: .85;
  stroke: var(--ink-500);
  stroke-opacity: .35;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

/* Pill-style hub markers */
.hub-pill .halo {
  fill: var(--gold-500);
  fill-opacity: .14;
}
.hub-pill .core { fill: var(--gold-500); }
.hub-pill .ring {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.5;
  transform-origin: center;
  animation: ringpulse 3s ease-out infinite;
}
.hub-pill-2 .ring { animation-delay: 1s; }
.hub-pill-3 .ring { animation-delay: 2s; }

.hub-pill .pill-bg,
.hub-pill .pill-point {
  fill: var(--white);
}
.hub-pill .pill-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  fill: var(--navy-900);
  letter-spacing: -.005em;
  pointer-events: none;
}

@keyframes ringpulse {
  0%   { r: 9;  opacity: .85; }
  100% { r: 28; opacity: 0; }
}
.port-cards { display: flex; flex-direction: column; gap: 14px; }
.port-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius);
  background: var(--white);
  transition: .4s var(--ease);
}
.port-card:hover {
  border-color: var(--gold-300);
  transform: translateX(6px);
  box-shadow: var(--shadow);
}
.port-card .pin {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-marine);
  display: grid; place-items: center; flex: none;
  border: 1px solid rgba(243,211,93,.25);
}
.port-card .pin svg { width: 20px; height: 20px; stroke: var(--gold-300); }
.port-card h4 { color: var(--navy-900); font-size: var(--t-md); }
.port-card .role {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 400; margin-bottom: 4px;
}
.port-card p { font-size: var(--t-sm); color: var(--ink-700); }

/* ---------- Why — auto-scrolling marquee (one row) ---------- */
.why { background: var(--navy-50); overflow: hidden; }
.why-marquee {
  margin-top: var(--s-7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  overflow: hidden;
}
.why-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: whymarquee 46s linear infinite;
}
.why-marquee:hover .why-track { animation-play-state: paused; }
.why-card {
  flex: 0 0 360px;
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--navy-100);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.why-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-300);
  box-shadow: var(--shadow);
}
.why-card .wn {
  color: var(--gold-500); font-size: var(--t-md);
  font-weight: 400; opacity: .55;
}
.why-card h4 {
  color: var(--navy-900); font-size: var(--t-md); margin: 10px 0 8px;
}
.why-card p { font-size: var(--t-sm); color: var(--ink-700); }
@keyframes whymarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 9px)); } /* half the track (one set) + half the gap */
}
@media (prefers-reduced-motion: reduce) {
  .why-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--grad-marine); color: var(--white);
  padding: var(--s-8) 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; right: -100px; bottom: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,211,93,.18), transparent 60%);
}
.cta-grid {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-6); flex-wrap: wrap; position: relative; z-index: 2;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.78); margin-top: 6px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer (link columns + connect + big wordmark) ---------- */
.site-footer {
  background: var(--navy-900); color: var(--white);
  padding: var(--s-9) 0 0;
  position: relative; overflow: hidden;
}
/* extra breathing room on the sides of the footer content */
.site-footer .wrap { padding-left: var(--s-8); padding-right: var(--s-8); }
.foot-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.5fr 1.1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
.foot-col h5 {
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-300); margin-bottom: var(--s-5); font-weight: 400;
}
.foot-col a {
  display: block; font-size: var(--t-sm);
  color: rgba(255,255,255,.65); padding: 7px 0;
  transition: color .25s, padding-left .25s;
}
.foot-col a:hover { color: var(--gold-300); padding-left: 5px; }

.foot-meta {
  display: flex; flex-direction: column; gap: 12px;
  font-size: var(--t-sm); color: rgba(255,255,255,.72);
}
.foot-meta-row { display: flex; align-items: flex-start; gap: 11px; }
.foot-meta svg { width: 16px; height: 16px; stroke: var(--gold-300); flex: none; margin-top: 2px; }
.foot-meta a { color: rgba(255,255,255,.72); transition: color .25s; }
.foot-meta a:hover { color: var(--gold-300); }

/* social icon buttons */
.social-row { display: flex; gap: 12px; flex-wrap: wrap; }
.social-row a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; color: rgba(255,255,255,.82);
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.social-row a:hover {
  background: var(--grad-gold); border-color: transparent; color: #241500;
  transform: translateY(-3px);
}
.social-row svg { width: 18px; height: 18px; }

.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--s-5) 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: var(--t-xs); color: rgba(255,255,255,.55);
}
.foot-bottom a { color: rgba(255,255,255,.55); }
.foot-bottom a:hover { color: var(--gold-300); }
.foot-legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* big brand wordmark watermark at the very bottom */
.foot-watermark {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(3.5rem, 20.5vw, 18rem);
  line-height: .72; letter-spacing: .02em; text-align: center;
  /* Cursor spotlight: only the area under the mouse lightens; everywhere else
     blends into the #070B3A footer. --mx/--my are set by JS on mousemove. */
  color: transparent;
  background-image: radial-gradient(circle 220px at var(--mx, -400px) var(--my, -400px),
                      #404a92 0%, #1d2459 34%, #080d3c 62%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: var(--s-5) 0 -.1em;
  user-select: none; white-space: nowrap; cursor: default;
}

/* ---------- WhatsApp floating button ---------- */
.wa-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .55);
  z-index: 95; transition: transform .3s var(--ease);
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); }
.wa-fab svg { width: 30px; height: 30px; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }
.reveal.d6 { transition-delay: .48s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid, .wanhai-grid, .ports-grid { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .svc-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: 0; }
  .metrics-grid { max-width: 640px; gap: 44px 0; }
  .metric { padding: 6px 18px; }
  .atoll-map { height: 420px; }
  .coverage-map { aspect-ratio: 16 / 10; }   /* matches the mobile "What we do" image */
  /* overlap-stack pin is for the wide 2-col layout only — once Coverage stacks
     (map + copy) it's taller than the screen, so revert to normal flow. */
  .stack-reveal .ports {
    position: static;
    min-height: 0;
    display: block;
    padding-bottom: var(--s-7);
    transform: none;
    opacity: 1;
  }
  .foot-top { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .sec { padding: var(--s-8) 0; }
}
@media (max-width: 680px) {
  .navlinks {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch; text-align: left;   /* full-width rows, left-aligned text */
    background: var(--white); padding: 20px var(--gutter); gap: 16px;
    border-bottom: 1px solid var(--navy-100);
    box-shadow: var(--shadow);
    /* if the menu (esp. expanded Services) is taller than the screen, scroll it */
    max-height: calc(100dvh - 58px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .navlinks.open { display: flex; }
  /* dropdown has a white background → force dark links regardless of header state */
  .navlinks a, .site-header.scrolled .navlinks a { color: var(--ink-700); }
  .navlinks a:hover, .navlinks a.active { color: var(--navy-900); }
  /* Mega → mobile accordion (tap Services to expand the service list) */
  .nav-item, .nav-item.has-mega { display: block; width: 100%; align-items: stretch; }
  a.nav-trigger { display: flex; justify-content: space-between; width: 100%; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; box-shadow: none; border-top: none;
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease);
  }
  .has-mega.open .mega { max-height: 1600px; }
  .mega-inner { padding: 4px 0 6px; }
  .mega-head { display: none; }
  .mega-body { grid-template-columns: 1fr; gap: 12px; }
  .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .mega-card { padding: 9px 4px; }
  .mega-ic { width: 34px; height: 34px; }
  .mega-ic svg { width: 18px; height: 18px; }
  .mega-txt i { display: none; }                 /* descriptions off for a compact list */
  .mega-feature { padding: 16px; gap: 10px; margin-top: 4px; }
  .burger { display: flex; }
  .nav-cta .btn-primary, .nav-cta .btn-gold { display: none; }
  /* symmetric header on mobile: logo left inset == top inset; button + burger right-aligned with the same right inset */
  .site-header { padding-top: 18px; padding-bottom: 18px; }
  .site-header.scrolled { padding-top: 14px; padding-bottom: 14px; }
  .site-header .wrap { padding-left: 18px; padding-right: 18px; }
  .site-header.scrolled .wrap { padding-left: 14px; padding-right: 14px; }
  .navbar { justify-content: space-between; gap: 12px; }
  .svc-grid, .wanhai-list, .trust-grid {
    grid-template-columns: 1fr;
  }
  /* Smaller logo on phones */
  .brand .mark { height: 28px; padding: 5px 9px; }
  /* Services → stacked; image becomes a full-bleed 400px banner that tucks
     under the (transparent) header, while the list scrolls beneath it.
     No section padding so the banner sits flush under the trust strip and the
     list sits flush against the Wan Hai section below. */
  .sec.services { padding: 0; }
  .services-split { grid-template-columns: 1fr; gap: var(--s-5); }
  .services-media {
    order: -1; position: sticky; top: 0;
    width: 100vw; margin-left: calc(50% - 50vw);
  }
  .services-media-inner {
    aspect-ratio: auto; height: 400px;
    border-radius: 0; box-shadow: none;
  }
  .services-media-inner::after {              /* top scrim so the header reads over the photo */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
    background: linear-gradient(to bottom, rgba(7, 11, 58, .5), transparent);
    z-index: 2; pointer-events: none;
  }
  .svc-item { gap: 14px; padding: var(--s-5) 0; min-height: auto; opacity: 1; }
  .svc-item-body h3 { font-size: var(--t-lg); }
  /* no scroll-driven text highlight on phones — all items read fully (image still swaps) */
  .svc-item .more, .svc-item.is-active .more { color: var(--navy-800); }
  /* Coverage map → 400px tall on phones (matches the services banner) */
  .coverage-map { height: 400px; aspect-ratio: auto; }
  /* Why marquee cards fit the phone width */
  .why-card { flex-basis: 78vw; max-width: 330px; }
  .trust-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .trust-item:last-child { border-bottom: 0; }
  /* Metrics → 2 columns on mobile, no section padding */
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .metric { padding: 4px 8px; }
  .metric:nth-child(3n) { border-right: 1px solid rgba(43, 50, 131, .18); }
  .metric:nth-child(2n) { border-right: none; }
  .metrics-content.wrap { padding-left: 0; padding-right: 0; }
  .metrics-wrap { height: 200vh; }
  .metrics-globe { width: min(135vw, 620px); height: min(135vw, 620px); }
  .sec { padding: var(--s-7) 0; }
  .hero { padding: 118px 0 clamp(22px, 2.6vw, 40px); min-height: 84vh; }
  .hero h1, .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-dots { margin-top: var(--s-5); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top .foot-contact { grid-column: 1 / -1; }
  .site-footer .wrap { padding-left: var(--s-5); padding-right: var(--s-5); }
  .cta-grid { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   INNER PAGES — shared components
   ============================================================ */

/* ---------- Page hero (compact) ---------- */
.page-hero {
  position: relative;
  padding: 150px 0 64px;
  background:
    linear-gradient(120deg, rgba(7,11,58,.92) 0%, rgba(12,21,119,.78) 55%, rgba(43,50,131,.6) 100%),
    var(--navy-900);
  color: var(--white);
  overflow: hidden;
}
.page-hero.has-photo {
  background:
    linear-gradient(120deg, rgba(7,11,58,.9) 0%, rgba(12,21,119,.66) 55%, rgba(7,11,58,.5) 100%),
    var(--ph, none) center center / cover no-repeat,
    var(--navy-900);
}
.page-hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,153,41,.18), transparent 60%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--gold-300); }
.page-hero h1 {
  color: var(--white); margin: var(--s-3) 0 var(--s-4);
  max-width: 18ch;
}
.page-hero .lede {
  font-size: var(--t-md); color: rgba(255,255,255,.82); max-width: 60ch;
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: var(--t-sm); color: rgba(255,255,255,.6); margin-bottom: var(--s-3);
}
.breadcrumb a { color: rgba(255,255,255,.75); transition: color .25s; }
.breadcrumb a:hover { color: var(--gold-300); }
.breadcrumb span { opacity: .5; }

/* ---------- Prose / rich content ---------- */
.prose { max-width: 72ch; margin-inline: auto; }   /* centered column, text stays left for readability */
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-2xl); color: var(--navy-900); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-xl); color: var(--navy-900); margin-top: var(--s-6); }
.prose p { color: var(--ink-700); font-size: var(--t-md); }
.prose a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-500); }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--ink-700); }
.prose li { margin-top: 8px; }
.prose strong { color: var(--navy-900); }

.lede { font-size: var(--t-lg); color: var(--ink-700); max-width: 64ch; line-height: 1.5; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: grid; gap: 12px; }
.checklist.cols-2 { grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--t-base); color: var(--ink-700);
}
.checklist li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--gold-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23DC9929' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}

/* ---------- Generic card grid ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.info-card {
  background: var(--white); border: 1px solid var(--navy-100);
  border-radius: var(--radius); padding: var(--s-6);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.info-card:hover { transform: translateY(-5px); border-color: var(--gold-300); box-shadow: var(--shadow); }
.info-card .ic {
  width: 48px; height: 48px; border-radius: 12px; background: var(--gold-50);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.info-card .ic svg { width: 24px; height: 24px; stroke: var(--gold-500); }
.info-card h3 { font-size: var(--t-lg); color: var(--navy-900); margin-bottom: 8px; }
.info-card p { font-size: var(--t-sm); color: var(--ink-700); }
.info-card .num { font-size: var(--t-sm); color: var(--gold-500); letter-spacing: .1em; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--white); border: 1px solid var(--navy-100);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-md); color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%232B3283' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item .faq-body { padding: 0 var(--s-6) var(--s-5); color: var(--ink-700); font-size: var(--t-base); }
.faq-item .faq-body p + p { margin-top: 12px; }

/* ---------- Contact form ---------- */
.contact-grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-8); align-items: start;
}
.contact-info h2 { color: var(--navy-900); margin-bottom: var(--s-4); }
.ci-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--navy-100); }
.ci-row:first-of-type { border-top: none; }
.ci-row .cic { width: 42px; height: 42px; border-radius: 11px; background: var(--gold-50); display: grid; place-items: center; flex: none; }
.ci-row .cic svg { width: 20px; height: 20px; stroke: var(--gold-500); }
.ci-row .lbl { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.ci-row .val { font-size: var(--t-md); color: var(--navy-900); }
.ci-row a.val:hover { color: var(--gold-500); }

.form-card {
  background: var(--white); border: 1px solid var(--navy-100);
  border-radius: var(--radius-lg); padding: var(--s-7); box-shadow: var(--shadow);
}
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-sm); color: var(--ink-700); font-weight: 500; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--navy-100); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: var(--t-base); color: var(--navy-900);
  background: var(--off); transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(43,50,131,.12); background: var(--white);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hp { position: absolute; left: -9999px; }   /* honeypot */
.form-msg { margin-top: 14px; font-size: var(--t-sm); border-radius: var(--radius-sm); padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s, padding .3s; }
.form-msg.show { padding: 12px 14px; max-height: 120px; }
.form-msg.ok { background: #E9F7EF; color: #1c7a45; }
.form-msg.err { background: #FBEAEA; color: #b3261e; }

/* ---------- Clients / partners ---------- */
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.client-logo {
  background: var(--white); border: 1px solid var(--navy-100);
  border-radius: var(--radius); aspect-ratio: 3 / 2;
  display: grid; place-items: center; padding: var(--s-5);
  color: var(--ink-500); font-size: var(--t-md); text-align: center;
  transition: border-color .3s, transform .3s var(--ease);
}
.client-logo:hover { border-color: var(--gold-300); transform: translateY(-4px); }
.client-logo img { max-width: 100%; max-height: 70px; object-fit: contain; }

/* ---------- Wan Hai partner band ---------- */
.partner-band {
  background: var(--navy-900); color: var(--white);
  border-radius: var(--radius-lg); padding: var(--s-7);
  display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.partner-band .wh-flag {
  flex: none; border-radius: var(--radius);
  background: var(--white); display: grid; place-items: center;
  padding: 18px 26px;
}
.partner-band .wh-flag img { height: 46px; width: auto; max-width: 280px; display: block; }
@media (max-width: 680px) {
  .partner-band .wh-flag { padding: 14px 18px; }
  .partner-band .wh-flag img { height: 36px; max-width: 220px; }
}

/* ---------- Inner page section helpers ---------- */
/* Centered by default so single-column text sections sit balanced (no empty
   space hugging the right on wide screens). */
.section-head { max-width: 760px; margin: 0 auto var(--s-7); text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { color: var(--navy-900); margin: var(--s-3) 0; }
.section-head p { font-size: var(--t-md); color: var(--ink-700); }
.bg-alt { background: var(--navy-50); }

/* ---------- Inner pages responsive ---------- */
@media (max-width: 1024px) {
  .card-grid, .card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .page-hero { padding: 120px 0 48px; }
  .card-grid, .card-grid.cols-2, .card-grid.cols-4,
  .checklist.cols-2 { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .frow { grid-template-columns: 1fr; }
  .form-card { padding: var(--s-5); }
}