/* ═══════════════════════════════════════════════════════════════════════
   WEGO MEDIKA INDONESIA — DESIGN SYSTEM
   Palette unchanged (brand blue 0D77BD / navy 073C5F / near-black 031826).
   Typography: Hanken Grotesk (display) + Be Vietnam Pro (text).
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand ── */
  --blue-50:#EAF3FA; --blue-100:#CFE4F2; --blue-200:#90C6EB; --blue-400:#2896D6;
  --blue-600:#0D77BD; --blue-700:#095E97; --blue-800:#073C5F;
  --sky-50:#F2F6F7; --gray-50:#F7F9FC; --gray-100:#EEF2F7; --gray-200:#DDE4EE;
  --gray-400:#98A2B3; --gray-600:#667085; --gray-800:#2C3A4A; --gray-900:#031826;
  --white:#fff; --card-tint:#FAFAFA;

  /* ── Surfaces & hairlines ── */
  --surface:#fff;
  --surface-sunken:#F7F9FC;
  --hairline:rgba(3,24,38,.08);
  --hairline-strong:rgba(3,24,38,.14);
  --hairline-dark:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.72);

  /* ── Fluid type scale ── */
  --t-display: clamp(2.6rem, 1.5rem + 4.4vw, 4.4rem);
  --t-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.35rem);
  --t-h2:      clamp(1.85rem, 1.35rem + 2.1vw, 2.85rem);
  --t-h3:      clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-body-lg: clamp(1rem, .96rem + .2vw, 1.12rem);
  --t-body:    .975rem;
  --t-sm:      .875rem;
  --t-xs:      .78rem;

  /* ── Rhythm ── */
  --sp-section: clamp(4.5rem, 2.8rem + 6vw, 8rem);
  --sp-gutter:  clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --shell: 1240px;

  /* ── Radii ── */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:100px;

  /* ── Elevation: ambient + direct, tinted with brand navy ── */
  --e-1: 0 1px 2px rgba(3,24,38,.04), 0 2px 8px rgba(3,24,38,.04);
  --e-2: 0 2px 4px rgba(3,24,38,.04), 0 8px 20px rgba(3,24,38,.06);
  --e-3: 0 4px 10px rgba(3,24,38,.05), 0 18px 40px rgba(3,24,38,.09);
  --e-4: 0 8px 20px rgba(3,24,38,.08), 0 32px 68px rgba(3,24,38,.14);
  --e-blue: 0 6px 16px rgba(13,119,189,.22), 0 18px 40px rgba(13,119,189,.16);
  --sh-btn: 0 4px 12px rgba(13,119,189,.24), 0 12px 28px rgba(13,119,189,.16);

  /* ── Motion ── */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.18s; --dur:.32s; --dur-slow:.7s;

  /* ── Texture ── */
  --grain: 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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ══════════════════════ BASE ══════════════════════ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family:'Be Vietnam Pro','Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--gray-800); background:var(--white);
  font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip; /* clip, unlike hidden, does not break position:sticky on the nav */
}
h1,h2,h3,h4,.nav-links a,.mob-menu a,.btn-p,.btn-s,.btn-w,.btn-solid-white,.btn-outline-white,
.hs-num,.pc-body h3,.value-card h3,.why-card h3,.vmm-card h3,.pos-card h3,.abt-stat-n,.cat-heading {
  font-family:'Hanken Grotesk',-apple-system,sans-serif;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; }
::selection { background:var(--blue-600); color:#fff; }

/* Accessible focus — visible only for keyboard users */
:focus-visible {
  outline:2px solid var(--blue-400); outline-offset:3px; border-radius:4px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }

/* Custom scrollbar */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:var(--gray-50); }
::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:100px; border:3px solid var(--gray-50); }
::-webkit-scrollbar-thumb:hover { background:var(--blue-200); }

/* ══════════════════════ UTILITIES ══════════════════════ */

/* Scroll-reveal — universal. Add .reveal (or .reveal-group on a parent).
   fill-mode is `backwards`, not `both`, so once the run finishes the element
   drops back to its own styles and card hover transforms still work. */
.reveal { opacity:0; }
.reveal.in { opacity:1; animation:revealUp .85s var(--ease-out) backwards; }
.reveal-group > * { opacity:0; }
.reveal-group.in > * { opacity:1; animation:revealUp .8s var(--ease-out) backwards; }
@keyframes revealUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }

/* Film grain — applied to every dark surface for tactile depth */
.why-sec::after, .partners-sec::after, .about-sec::after, .apply-in::after, footer::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--grain); opacity:.12; mix-blend-mode:overlay;
}

/* Scroll progress bar */
.scroll-prog {
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:400;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue-800),var(--blue-600) 45%,var(--blue-200));
  will-change:transform;
}

/* ══════════════════════ INTRO SPLASH ══════════════════════ */
/* Visible by default — script.js dismisses it. The <head> inline script stamps
   .splash-seen on <html> for repeat visits within the session. */
/* Light ground on purpose: the logo is two-tone (blue plate + knocked-out white
   heart), so any single-colour recolour collapses the mark into a solid block.
   Shown at its own colours instead, over a soft brand-blue wash. */
.splash {
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-gutter);
  background:
    radial-gradient(110% 80% at 50% 40%, rgba(13,119,189,.13), transparent 64%),
    linear-gradient(168deg, #fff 0%, var(--sky-50) 52%, var(--blue-50) 100%);
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.splash::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.05; mix-blend-mode:multiply;
}
.splash.gone { opacity:0; visibility:hidden; }
html.splash-seen .splash { display:none; }

.splash-in { position:relative; z-index:1; text-align:center; width:min(660px,100%); }
.splash-welcome {
  font-family:'Hanken Grotesk',sans-serif;
  font-size:clamp(.78rem, .7rem + .4vw, 1rem); font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--blue-600);
  margin-bottom:1.6rem; padding-left:.34em;  /* offsets the trailing letter-space */
  animation:splashUp .9s var(--ease-out) .08s backwards;
}
.splash-logo {
  width:min(540px,88%); height:auto; margin:0 auto;
  animation:splashUp 1s var(--ease-out) .26s backwards;
}
.splash-bar {
  width:110px; height:2px; margin:2.9rem auto 0; border-radius:2px;
  background:rgba(3,24,38,.1); overflow:hidden;
  animation:splashUp .9s var(--ease-out) .48s backwards;
}
.splash-bar span {
  display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--blue-700));
  transform:scaleX(0); transform-origin:0 50%;
  animation:splashBar 2.2s var(--ease-io) forwards;
}
@keyframes splashUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes splashBar { to { transform:scaleX(1); } }

/* Hold the hero entrance at frame 0 while the splash covers it — script.js drops
   .splash-active on dismiss and the staggered reveal plays into view. */
html.splash-active .hero-ey,
html.splash-active .hero-content h1,
html.splash-active .hero-desc,
html.splash-active .hero-acts,
html.splash-active .hero-scroll,
html.splash-active .hero-stats-float { animation-play-state:paused; }

/* ══════════════════════ TOPBAR ══════════════════════ */
.topbar { background:var(--gray-900); padding:9px var(--sp-gutter); position:relative; overflow:hidden; }
.topbar::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(600px 100px at 80% 50%, rgba(13,119,189,.4), transparent 70%);
}
.topbar-inner { max-width:var(--shell); margin:0 auto; display:flex; justify-content:flex-end; gap:1.75rem; position:relative; }
.topbar-inner a { display:flex; align-items:center; gap:7px; font-size:var(--t-xs); font-weight:500; color:rgba(255,255,255,.66); text-decoration:none; cursor:pointer; transition:color var(--dur-fast); }
.topbar-inner a:hover { color:#fff; }
.topbar-inner svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
@media (max-width:900px) { .topbar { display:none; } }

/* ══════════════════════ NAV — floating glass pill ══════════════════════ */
nav { position:sticky; top:0; z-index:200; padding:14px var(--sp-gutter); }
nav::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 30%, rgba(255,255,255,0));
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
nav.scrolled::before { opacity:1; }
.nav-inner {
  max-width:var(--shell); margin:0 auto; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:0 10px 0 22px; border-radius:var(--r-pill);
  background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--hairline);
  box-shadow:var(--e-1);
  transition:height var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
nav.scrolled .nav-inner { height:60px; box-shadow:var(--e-3); background:rgba(255,255,255,.85); }

.nav-logo { cursor:pointer; display:flex; align-items:center; flex-shrink:0; transition:transform var(--dur) var(--ease-out); }
.nav-logo:hover { transform:scale(1.03); }
.nav-logo img { height:38px; width:auto; }
.nav-links { display:flex; align-items:center; gap:.35rem; }
.nav-links > a {
  position:relative; text-decoration:none; font-size:var(--t-sm); font-weight:600;
  color:var(--gray-600); cursor:pointer; padding:10px 14px; border-radius:var(--r-pill);
  transition:color var(--dur-fast) ease;
}
.nav-links > a::after {
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--blue-600); border-radius:2px;
  transform:scaleX(0); transform-origin:50%;
  transition:transform var(--dur) var(--ease-out);
}
.nav-links > a:hover { color:var(--gray-900); }
.nav-links > a:hover::after { transform:scaleX(.55); }
.nav-links > a.active { color:var(--blue-600); }
.nav-links > a.active::after { transform:scaleX(1); }
.nav-links > a.nav-cta::after { display:none; }

.nav-cta {
  background:var(--blue-600)!important; color:#fff!important;
  padding:11px 24px!important; margin-left:.5rem; font-weight:600;
  box-shadow:var(--sh-btn);
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.nav-cta:hover { background:var(--blue-700)!important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(13,119,189,.34); }

/* Language switcher — flags only. Inactive flags are desaturated so the current
   language reads at a glance without needing a text label. */
.lang-switch { display:flex; align-items:center; gap:3px; background:var(--gray-100); border-radius:var(--r-pill); padding:4px; margin-left:.5rem; }
.lang-btn {
  border:none; background:none; cursor:pointer; padding:4px; line-height:0;
  border-radius:var(--r-pill);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.lang-btn .flag {
  width:26px; height:auto; border-radius:3px; display:block;
  opacity:.45; filter:saturate(.3);
  box-shadow:0 0 0 1px var(--hairline-strong);
  transition:opacity var(--dur-fast), filter var(--dur-fast), box-shadow var(--dur-fast);
}
.lang-btn:hover { transform:translateY(-1px); }
.lang-btn:hover .flag { opacity:.9; filter:none; }
.lang-btn.active .flag {
  opacity:1; filter:none;
  box-shadow:0 0 0 2px var(--blue-600), 0 2px 6px rgba(13,119,189,.32);
}
.mob-lang-switch { display:flex; justify-content:center; gap:14px; padding:16px 0 2px; }
.mob-lang-switch .lang-btn { padding:6px; }
.mob-lang-switch .flag { width:34px; border-radius:4px; }

/* Hamburger → X */
.hamburger { display:none; cursor:pointer; border:none; background:none; padding:10px; margin-right:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--gray-900); border-radius:2px; transition:transform var(--dur) var(--ease-out), opacity var(--dur-fast); }
.hamburger span + span { margin-top:5px; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu — floating card */
.mob-menu {
  position:fixed; top:92px; left:var(--sp-gutter); right:var(--sp-gutter); z-index:199;
  background:rgba(255,255,255,.96); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:1.25rem 1.5rem; box-shadow:var(--e-4);
  flex-direction:column; gap:.25rem;
  display:flex;
  opacity:0; visibility:hidden; transform:translateY(-12px) scale(.98);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.mob-menu.open { opacity:1; visibility:visible; transform:none; }
.mob-menu a { font-size:15px; font-weight:600; color:var(--gray-800); text-decoration:none; padding:12px 4px; border-bottom:1px solid var(--gray-100); cursor:pointer; transition:color var(--dur-fast), padding-left var(--dur-fast); }
.mob-menu a:hover { color:var(--blue-600); padding-left:10px; }
.mob-menu a:last-of-type { border:none; }

/* ══════════════════════ PAGES + TRANSITION ══════════════════════ */
.page { display:none; }
.page.active { display:block; animation:pageIn .55s var(--ease-out) backwards; }
@keyframes pageIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ══════════════════════ SHARED LAYOUT ══════════════════════ */
.page-head {
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,var(--sky-50) 0%,var(--blue-50) 100%);
  padding:clamp(3rem,2rem + 4vw,5.5rem) var(--sp-gutter) clamp(3rem,2rem + 3vw,4.5rem);
  border-bottom:1px solid var(--hairline);
}
.page-head::before {
  content:''; position:absolute; width:700px; height:700px; border-radius:50%;
  top:-55%; right:-8%; pointer-events:none;
  background:radial-gradient(circle, rgba(13,119,189,.13), transparent 62%);
}
.page-head-inner { max-width:var(--shell); margin:0 auto; position:relative; }
.breadcrumb { font-size:var(--t-sm); color:var(--gray-600); margin-bottom:1.1rem; }
.breadcrumb span { color:var(--blue-600); cursor:pointer; font-weight:500; transition:color var(--dur-fast); }
.breadcrumb span:hover { text-decoration:underline; }
.page-head h1 {
  font-weight:800; font-size:var(--t-h1); color:var(--gray-900);
  letter-spacing:-.03em; line-height:1.08; margin-bottom:.85rem;
}
.page-head p { font-size:var(--t-body-lg); color:var(--gray-600); max-width:600px; line-height:1.7; }

section { padding:var(--sp-section) var(--sp-gutter); }
.sec-inner { max-width:var(--shell); margin:0 auto; position:relative; z-index:1; }

/* Eyebrow — small caps with a leading rule */
.eyebrow, .abt-ey {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:1rem;
}
.eyebrow::before, .abt-ey::before {
  content:''; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-200)); flex-shrink:0;
}
.sec-title {
  font-weight:800; font-size:var(--t-h2); color:var(--gray-900);
  line-height:1.12; letter-spacing:-.03em; margin-bottom:1.1rem; text-wrap:balance;
}
.sec-desc { font-size:var(--t-body-lg); color:var(--gray-600); max-width:600px; line-height:1.72; }
.sec-hd { margin-bottom:clamp(2.25rem,1.5rem + 2vw,3.5rem); }
.sec-hd.center { text-align:center; max-width:660px; margin-left:auto; margin-right:auto; }
.sec-hd.center .eyebrow { justify-content:center; }
.sec-hd.center .sec-desc { margin-left:auto; margin-right:auto; }

/* ══════════════════════ BUTTONS ══════════════════════ */
.btn-p,.btn-s,.btn-w,.btn-solid-white,.btn-outline-white {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--r-pill);
  font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; border:none; cursor:pointer; font-family:'Hanken Grotesk',sans-serif;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
             background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space:nowrap;
}
.btn-p svg,.btn-s svg,.btn-w svg,.btn-solid-white svg,.btn-outline-white svg {
  transition:transform var(--dur) var(--ease-out); flex-shrink:0;
}
.btn-p:hover svg,.btn-s:hover svg,.btn-w:hover svg,.btn-solid-white:hover svg,.btn-outline-white:hover svg { transform:translateX(4px); }

.btn-p { background:var(--blue-600); color:#fff; box-shadow:var(--sh-btn); }
.btn-p:hover { background:var(--blue-700); transform:translateY(-2px); box-shadow:0 10px 26px rgba(13,119,189,.34); }
.btn-p:active { transform:translateY(0); }

.btn-s { background:#fff; color:var(--gray-900); border:1.5px solid var(--gray-200); box-shadow:var(--e-1); }
.btn-s:hover { border-color:var(--blue-400); color:var(--blue-600); transform:translateY(-2px); box-shadow:var(--e-2); }

.btn-w { background:#fff; color:var(--blue-800); }
.btn-w:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22); }

.btn-solid-white { background:#fff; color:var(--gray-900); box-shadow:0 6px 20px rgba(0,0,0,.22); }
.btn-solid-white:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.3); }

.btn-outline-white { background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.34); backdrop-filter:blur(6px); }
.btn-outline-white:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.7); transform:translateY(-2px); }

/* ══════════════════════ HERO ══════════════════════ */
.hero-banner {
  position:relative; margin:14px 14px 0; border-radius:var(--r-xl); overflow:hidden;
  min-height:clamp(540px,80vh,760px); display:flex; background:var(--gray-900);
}
.hero-bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:heroZoom 22s var(--ease-io) infinite alternate;
}
@keyframes heroZoom { from { transform:scale(1); } to { transform:scale(1.09); } }
/* Copy sits on the right, so the scrim is darkest on the right and opens up left. */
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(266deg, rgba(3,24,38,.95) 0%, rgba(3,24,38,.82) 34%, rgba(3,24,38,.42) 66%, rgba(3,24,38,.14) 100%),
    radial-gradient(120% 90% at 92% 55%, rgba(13,119,189,.4), transparent 58%);
}
.hero-overlay::after {
  content:''; position:absolute; inset:0; background-image:var(--grain); opacity:.14; mix-blend-mode:overlay;
}
.hero-content {
  position:relative; z-index:2; width:100%; max-width:calc(var(--shell) + 4rem);
  margin:0 auto; padding:clamp(3rem,2rem + 4vw,5rem) clamp(1.75rem,1rem + 3vw,4rem);
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-end; text-align:right;
}
.hero-content > * { max-width:640px; }

.hero-ey {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
  color:#fff; font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 18px; border-radius:var(--r-pill); margin-bottom:1.75rem; width:fit-content;
}
.hero-ey::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--blue-200); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(144,198,235,.8); animation:pulseDot 2.4s var(--ease-io) infinite;
}
@keyframes pulseDot {
  0% { box-shadow:0 0 0 0 rgba(144,198,235,.7); }
  70% { box-shadow:0 0 0 10px rgba(144,198,235,0); }
  100% { box-shadow:0 0 0 0 rgba(144,198,235,0); }
}
.hero-content h1 {
  font-weight:800; font-size:var(--t-display); line-height:1.03; color:#fff;
  letter-spacing:-.035em; margin-bottom:1.5rem; text-wrap:balance;
}
.hero-content h1 em {
  font-style:italic; font-weight:800;
  background:linear-gradient(100deg,var(--blue-200),#fff 55%,var(--blue-200));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-desc {
  font-family:'Be Vietnam Pro',sans-serif; font-size:var(--t-body-lg);
  color:rgba(255,255,255,.8); line-height:1.78; margin-bottom:2.5rem; max-width:520px;
}
.hero-acts { display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }

/* Staggered hero entrance */
.hero-ey, .hero-content h1, .hero-desc, .hero-acts {
  animation:heroUp .95s var(--ease-out) backwards;
}
.hero-content h1 { animation-delay:.1s; }
.hero-desc      { animation-delay:.2s; }
.hero-acts      { animation-delay:.3s; }
@keyframes heroUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

/* Scroll cue — parked left, opposite the right-aligned copy and CTAs. */
.hero-scroll {
  position:absolute; left:clamp(1.5rem,1rem + 2vw,3.5rem); bottom:2.25rem; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(255,255,255,.55);
  animation:heroUp 1s var(--ease-out) .55s backwards;
}
.hero-scroll span {
  writing-mode:vertical-rl;
  font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
}
.hero-scroll::after {
  content:''; width:1px; height:52px;
  background:linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  animation:scrollLine 2.2s var(--ease-io) infinite;
}
@keyframes scrollLine { 0%,100% { transform:scaleY(.35); transform-origin:top; opacity:.4; } 50% { transform:scaleY(1); transform-origin:top; opacity:1; } }
@media (max-width:900px) { .hero-scroll { display:none; } }

/* ══════════════════════ FLOATING STATS ══════════════════════ */
.hero-stats-float {
  max-width:1120px; margin:-52px auto 0; position:relative; z-index:5;
  background:rgba(255,255,255,.9); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-lg); box-shadow:var(--e-4);
  padding:2rem 2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  animation:heroUp 1s var(--ease-out) .45s backwards;
}
.hero-stats-float > div {
  display:flex; flex-direction:column; align-items:center; position:relative;
}
.hero-stats-float > div + div::before {
  content:''; position:absolute; left:0; top:12%; bottom:12%; width:1px;
  background:linear-gradient(to bottom, transparent, var(--gray-200) 25%, var(--gray-200) 75%, transparent);
}
.hs-num {
  font-size:clamp(2rem,1.4rem + 1.8vw,2.6rem); font-weight:800; color:var(--gray-900);
  line-height:1; margin-bottom:8px; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.hs-num span { color:var(--blue-600); }  /* the trailing "+" */
.hs-num .cnt { color:inherit; }
.hs-lbl { font-size:var(--t-sm); color:var(--gray-600); text-align:center; font-weight:500; }

/* ══════════════════════ DARK SECTION: WHY ══════════════════════ */
.why-sec { background:var(--gray-900); position:relative; overflow:hidden; }
.why-sec::before {
  content:''; position:absolute; width:900px; height:900px; border-radius:50%;
  top:-45%; right:-12%; pointer-events:none;
  background:radial-gradient(circle, rgba(13,119,189,.32), transparent 62%);
}
.why-hd .eyebrow { color:var(--blue-200); }
.why-hd .eyebrow::before { background:linear-gradient(90deg,var(--blue-200),transparent); }
.why-hd .sec-title { color:#fff; }
.why-hd .sec-desc { color:rgba(255,255,255,.68); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; position:relative; z-index:1; }
.why-card {
  background:var(--card-tint); border-radius:var(--r-md); padding:2rem 1.75rem 2.25rem;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.why-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(13,119,189,.09), transparent 45%);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.why-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.why-card:hover::before { opacity:1; }
.why-ic {
  width:56px; height:56px; background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.75rem; position:relative;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.why-card:hover .why-ic { background:var(--blue-600); border-color:var(--blue-600); transform:translateY(-2px) rotate(-4deg); }
.why-ic svg { width:26px; height:26px; stroke:var(--blue-600); fill:none; stroke-width:1.7; transition:stroke var(--dur) var(--ease-out); }
.why-card:hover .why-ic svg { stroke:#fff; }
.why-card h3 { font-size:var(--t-h3); font-weight:700; letter-spacing:-.02em; color:var(--blue-800); margin-bottom:.65rem; line-height:1.3; }
.why-card p { font-size:var(--t-sm); color:var(--gray-600); line-height:1.7; }

/* ── Credentials: certifications + recognition (inside the dark Why section) ── */
.cred {
  position:relative; z-index:1;
  margin-top:clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-top:clamp(2.75rem, 2rem + 2vw, 4rem);
  border-top:1px solid var(--hairline-dark);
}
.cred-hd { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.5rem 3rem; align-items:end; margin-bottom:2.25rem; }
.cred-hd .eyebrow { color:var(--blue-200); }
.cred-hd .eyebrow::before { background:linear-gradient(90deg,var(--blue-200),transparent); }
.cred-title {
  font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(1.7rem, 1.25rem + 1.7vw, 2.45rem); line-height:1.12; letter-spacing:-.03em;
}
.cred-desc { color:rgba(255,255,255,.68); font-size:var(--t-body); line-height:1.7; max-width:46ch; }

.cred-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.cred-card {
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(150px,240px) minmax(0,1fr); gap:clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items:center;
  padding:clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background:linear-gradient(155deg,#fff 0%,var(--card-tint) 55%,var(--blue-50) 100%);
  border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(0,0,0,.28);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cred-card::before {
  content:''; position:absolute; z-index:-1; width:340px; height:340px; border-radius:50%;
  right:-120px; top:-150px; pointer-events:none;
  background:radial-gradient(circle, rgba(13,119,189,.14), transparent 65%);
}
.cred-card:hover { transform:translateY(-6px); box-shadow:0 32px 70px rgba(0,0,0,.36); }

/* The fanned pair of certificate pages */
.cred-doc {
  position:relative; display:block; width:100%; aspect-ratio:1/1.32;
  border:0; padding:0; background:none; cursor:zoom-in; border-radius:var(--r-xs);
}
.cred-doc img {
  position:absolute; inset:6% 8% 0; width:84%; height:94%; object-fit:cover; object-position:top;
  background:#fff; border-radius:6px; border:1px solid var(--gray-200);
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cred-doc .cd-back { transform:rotate(7deg) translate(8%,2%); box-shadow:var(--e-2); filter:saturate(.85); }
.cred-doc .cd-front { transform:rotate(-3deg); box-shadow:var(--e-4); }
.cred-card:hover .cd-back { transform:rotate(10deg) translate(13%,1%); }
.cred-card:hover .cd-front { transform:rotate(-1deg) translateY(-4px); }
.cd-zoom {
  position:absolute; right:2%; bottom:-4%; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-600); box-shadow:var(--e-blue); border:3px solid #fff;
  transition:transform var(--dur) var(--ease-spring);
}
.cd-zoom svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; }
.cred-card:hover .cd-zoom { transform:scale(1.1); }
.cred-doc:focus-visible { outline:3px solid var(--blue-400); outline-offset:6px; }

.cred-body { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.cred-kicker {
  display:inline-flex; white-space:nowrap; max-width:100%; align-items:center; gap:7px; margin-bottom:.9rem;
  padding:5px 12px 5px 9px; border-radius:var(--r-pill);
  background:var(--blue-50); border:1px solid var(--blue-100); color:var(--blue-700);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.cred-kicker svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.cred-name {
  font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:var(--blue-800);
  font-size:clamp(1.85rem, 1.35rem + 1.6vw, 2.6rem); line-height:1; letter-spacing:-.035em;
}
.cred-full { margin-top:.5rem; font-size:var(--t-sm); font-weight:600; color:var(--gray-600); line-height:1.5; }
.cred-meta { width:100%; margin:1.25rem 0 1.5rem; border-top:1px solid var(--hairline); }
.cred-meta > div { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--hairline); }
.cred-meta dt { font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600); padding-top:.12rem; }
.cred-meta dd { font-size:var(--t-sm); font-weight:600; color:var(--gray-900); line-height:1.45; overflow-wrap:anywhere; }
.cred-btn {
  display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:auto;
  padding:10px 10px 10px 20px; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--blue-600); color:#fff; box-shadow:var(--sh-btn);
  font:700 var(--t-sm) 'Hanken Grotesk',sans-serif;
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cred-btn:hover { background:var(--blue-700); transform:translateY(-2px); }
.cred-count {
  min-width:26px; height:26px; padding:0 7px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.2); font-size:var(--t-xs);
}

/* Recognition row */
.recog { margin-top:clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.recog-title { font-family:'Hanken Grotesk',sans-serif; font-weight:700; color:#fff; font-size:var(--t-h3); letter-spacing:-.02em; margin-bottom:1.25rem; }
.recog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.recog-card {
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:zoom-in; color:#fff; font:inherit;
  background:rgba(255,255,255,.06); border:1px solid var(--hairline-dark); border-radius:var(--r-md); overflow:hidden;
  transition:background var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out);
}
.recog-card:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); transform:translateY(-5px); }
.recog-card:focus-visible { outline:3px solid var(--blue-400); outline-offset:3px; }
.rc-img { display:block; aspect-ratio:16/10; overflow:hidden; background:#fff; }
.rc-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.recog-card:hover .rc-img img { transform:scale(1.04); }
.rc-img--photo img { object-position:center 18%; }
.rc-body { display:flex; flex-direction:column; gap:4px; padding:1.1rem 1.25rem 1.35rem; }
.rc-date { font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-200); }
.rc-body strong { font-family:'Hanken Grotesk',sans-serif; font-size:var(--t-body); font-weight:700; line-height:1.35; }
.rc-body small { font-size:var(--t-xs); color:rgba(255,255,255,.65); line-height:1.5; }

/* Wide screens: the meta rows sit side by side under the title */
@media (min-width:901px) {
  .cred-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2rem; }
  .cred-meta > div { grid-template-columns:1fr; gap:.3rem; padding:1rem 0; border-bottom:0; }
}
@media (max-width:760px) {
  .cred-hd { grid-template-columns:1fr; align-items:start; }
  .recog-grid { grid-template-columns:1fr; }
  .recog-card { flex-direction:row; align-items:center; }
  .rc-img { flex:0 0 38%; align-self:stretch; aspect-ratio:auto; }
}
@media (max-width:600px) {
  .cred-card { grid-template-columns:1fr; }
  .cred-doc { width:62%; margin:0 auto .5rem; }
  .cred-meta > div { grid-template-columns:1fr; gap:.2rem; }
}

/* Certificate viewer (native <dialog>, shares .modal-ov overlay) */
.cert-box {
  background:#fff; border-radius:var(--r-lg); width:min(900px,100%); max-height:92dvh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 40px 90px rgba(3,24,38,.45);
  animation:modalIn .45s var(--ease-out) backwards;
}
.cert-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px 16px 12px 24px; border-bottom:1px solid var(--gray-200); }
.cert-top h2 { font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.15rem; color:var(--gray-900); letter-spacing:-.02em; line-height:1.25; }
.cert-top p { font-size:var(--t-xs); color:var(--gray-600); margin-top:2px; }
.cert-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:12px 24px; border-bottom:1px solid var(--gray-100); }
.cert-tab {
  min-height:38px; padding:7px 16px; border-radius:var(--r-pill); cursor:pointer;
  border:1.5px solid var(--gray-200); background:#fff; color:var(--gray-800);
  font:600 var(--t-sm) 'Be Vietnam Pro',sans-serif;
  transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.cert-tab:hover { border-color:var(--blue-400); color:var(--blue-600); }
.cert-tab[aria-selected="true"] { background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.cert-stage { flex:1; min-height:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:1.5rem; background:var(--gray-100); }
.cert-stage img { display:block; max-width:100%; max-height:calc(92dvh - 250px); width:auto; height:auto; background:#fff; border-radius:4px; box-shadow:var(--e-3); }
.cert-foot { display:flex; justify-content:flex-end; padding:12px 24px; border-top:1px solid var(--gray-200); }
.cert-full { display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:var(--t-sm); font-weight:600; color:var(--blue-700); text-decoration:none; }
.cert-full:hover { color:var(--blue-600); text-decoration:underline; }
.cert-full svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
@media (max-width:600px) {
  .modal-ov.cert-ov { padding:.75rem; }
  .cert-stage { padding:1rem; }
  .cert-stage img { max-height:none; }
}

/* ══════════════════════ VALUES ══════════════════════ */
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.value-card {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md); padding:1.85rem 1.6rem;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out),
             box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.value-card.in-view { opacity:1; transform:translateY(0); }
.value-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-200));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease-out);
}
.value-card:hover { box-shadow:var(--e-3); transform:translateY(-6px); border-color:transparent; }
.value-card:hover::before { transform:scaleX(1); }
.value-ic {
  width:48px; height:48px; background:var(--blue-50); border-radius:var(--r-xs);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.35rem;
  transition:background var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.value-card:hover .value-ic { background:var(--blue-600); transform:translateY(-2px) scale(1.06); }
.value-ic svg { width:22px; height:22px; stroke:var(--blue-600); fill:none; stroke-width:1.8; transition:stroke var(--dur); }
.value-card:hover .value-ic svg { stroke:#fff; }
.value-card { display:flex; flex-direction:column; }
.value-card h3 { font-size:var(--t-h3); font-weight:800; letter-spacing:-.02em; color:var(--blue-800); line-height:1.2; margin-bottom:.55rem; }
.value-tag { font-size:var(--t-body); font-weight:600; color:var(--gray-800); line-height:1.45; margin-bottom:1.1rem; }
.value-pts { list-style:none; margin:auto 0 0; padding:1rem 0 0; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:.45rem; }
.value-pts li { position:relative; padding-left:1.1rem; font-size:var(--t-sm); color:var(--gray-600); line-height:1.55; }
.value-pts li::before { content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--blue-600); }

/* ══════════════════════ DARK SECTION: BRANDS ══════════════════════ */
.partners-sec { background:var(--blue-800); padding:var(--sp-section) var(--sp-gutter); position:relative; overflow:hidden; }
.partners-sec::before {
  content:''; position:absolute; width:1000px; height:1000px; border-radius:50%;
  bottom:-55%; left:-15%; pointer-events:none;
  background:radial-gradient(circle, rgba(40,150,214,.28), transparent 60%);
}
.partners-in { max-width:var(--shell); margin:0 auto; position:relative; z-index:1; }
.partners-hd { text-align:center; margin-bottom:3rem; }
.partners-hd .eyebrow { color:var(--blue-200); justify-content:center; }
.partners-hd .eyebrow::before { background:linear-gradient(90deg,var(--blue-200),transparent); }
.partners-hd h2 { font-weight:800; font-size:var(--t-h2); color:#fff; line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
.partners-hd p { font-size:var(--t-body-lg); color:rgba(255,255,255,.66); max-width:620px; margin:1rem auto 0; line-height:1.72; }
.partners-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.partner-card {
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11); border-radius:var(--r-md);
  padding:2.25rem 1.5rem 1.75rem; display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; position:relative; overflow:hidden;
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out),
             background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.partner-card.in-view { opacity:1; transform:translateY(0); }
.partner-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(144,198,235,.22), transparent 60%);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.partner-card:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.3); }
.partner-card:hover::before { opacity:1; }
.partner-logo-wrap {
  width:88px; height:88px; border-radius:var(--r-sm); background:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.35rem;
  overflow:hidden; padding:12px; position:relative; z-index:1;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform var(--dur) var(--ease-spring);
}
.partner-card:hover .partner-logo-wrap { transform:translateY(-3px) scale(1.07); }
.partner-logo-wrap img { width:100%; height:100%; object-fit:contain; }
.partner-card h3 { font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:.5rem; letter-spacing:-.02em; position:relative; z-index:1; }
.partner-card p { font-size:var(--t-sm); color:rgba(255,255,255,.64); line-height:1.65; margin-bottom:1.35rem; flex:1; position:relative; z-index:1; }
.partner-tag {
  display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.88); font-size:var(--t-xs); font-weight:600;
  padding:5px 14px; border-radius:var(--r-pill); position:relative; z-index:1;
}
.partner-link {
  display:block; margin-top:14px; font-size:var(--t-sm); font-weight:700; color:var(--blue-200);
  position:relative; z-index:1; transition:transform var(--dur) var(--ease-out);
}
.partner-card:hover .partner-link { transform:translateX(4px); }

.partners-note { text-align:center; margin-top:3rem; }
.partners-note p { font-size:var(--t-body); color:rgba(255,255,255,.55); margin-bottom:1.75rem; }
.partners-note a { color:var(--blue-200); font-weight:600; cursor:pointer; text-decoration:none; }
.partners-note a:hover { text-decoration:underline; }

/* ══════════════════════ LOGO WALLS ══════════════════════ */
.logo-wall-sec { border-top:1px solid var(--hairline); }
.logo-wall-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2.75rem; }
.logo-wall-item {
  width:190px; height:104px; background:#fff;
  border:1px solid var(--gray-200); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; padding:1.35rem 1.85rem;
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out),
             box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.logo-wall-item.in-view { opacity:1; transform:translateY(0); }
.logo-wall-item:hover { box-shadow:var(--e-3); border-color:var(--blue-100); transform:translateY(-5px); }
.logo-wall-item img {
  max-width:100%; max-height:100%; object-fit:contain;
  filter:grayscale(100%); opacity:.55;
  transition:filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.logo-wall-item:hover img { filter:grayscale(0%); opacity:1; }

/* ══════════════════════ DARK SECTION: ABOUT ══════════════════════ */
.about-sec {
  background:var(--blue-800); padding:var(--sp-section) var(--sp-gutter);
  color:#fff; position:relative; overflow:hidden;
}
.about-sec::before {
  content:''; position:absolute; width:900px; height:900px; border-radius:50%;
  top:-40%; left:-18%; pointer-events:none;
  background:radial-gradient(circle, rgba(40,150,214,.26), transparent 62%);
}
.about-in {
  max-width:var(--shell); margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2.5rem,1.5rem + 4vw,5rem); align-items:center;
}
.abt-ey { color:var(--blue-200); }
.abt-ey::before { background:linear-gradient(90deg,var(--blue-200),transparent); }
.about-sec h2 { font-weight:800; font-size:var(--t-h2); line-height:1.12; letter-spacing:-.03em; margin-bottom:1.35rem; color:#fff; text-wrap:balance; }
.about-sec h2 em {
  font-style:italic;
  background:linear-gradient(100deg,var(--blue-200),#fff 60%,var(--blue-200));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.about-in > div > p { font-size:var(--t-body-lg); color:rgba(255,255,255,.76); line-height:1.78; margin-bottom:2.25rem; }
.abt-vals { display:flex; flex-direction:column; gap:.85rem; }
.abt-val {
  display:flex; align-items:flex-start; gap:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-sm); padding:1.15rem 1.35rem;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.abt-val:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); transform:translateX(5px); }
.abt-vi { width:40px; height:40px; border-radius:10px; background:rgba(144,198,235,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.abt-vi svg { width:19px; height:19px; stroke:var(--blue-200); fill:none; stroke-width:2; }
.abt-val h4 { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:4px; letter-spacing:-.01em; }
.abt-val p { font-size:var(--t-sm); color:rgba(255,255,255,.66); line-height:1.6; }

.abt-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.abt-stat {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); border-radius:var(--r-md);
  padding:1.75rem 1.25rem; text-align:center;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.abt-stat:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); transform:translateY(-4px); }
.abt-stat-n {
  font-size:clamp(2rem,1.5rem + 1.6vw,2.6rem); font-weight:800; color:#fff;
  line-height:1; margin-bottom:8px; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.abt-stat-n span { color:var(--blue-200); }  /* the trailing "+" */
.abt-stat-n .cnt { color:inherit; }
.abt-stat-l { font-size:var(--t-xs); color:rgba(255,255,255,.62); font-weight:600; text-transform:uppercase; letter-spacing:.09em; }

/* ══════════════════════ CTA ══════════════════════ */
.cta-sec { padding:var(--sp-section) var(--sp-gutter); }
.cta-in {
  max-width:var(--shell); margin:0 auto; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--blue-50) 0%,var(--sky-50) 55%,var(--blue-50) 100%);
  border:1px solid var(--blue-100); border-radius:var(--r-xl);
  padding:clamp(3rem,2rem + 4vw,5.5rem) clamp(1.75rem,1rem + 3vw,4rem); text-align:center;
}
.cta-in::before {
  content:''; position:absolute; width:640px; height:640px; border-radius:50%;
  top:-60%; left:50%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(13,119,189,.16), transparent 62%);
}
.cta-in > * { position:relative; z-index:1; }
.cta-in h2 { font-weight:800; font-size:var(--t-h2); color:var(--gray-900); line-height:1.12; margin-bottom:1.1rem; letter-spacing:-.03em; text-wrap:balance; }
.cta-in p { font-size:var(--t-body-lg); color:var(--gray-600); max-width:540px; margin:0 auto 2.75rem; line-height:1.72; }
.cta-acts { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Email / phone button family — email is the primary CTA (filled brand blue),
   phone the secondary (white outline). Used on light grounds. */
.email-btn,.tel-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:15px 32px; border-radius:var(--r-pill);
  font-family:'Hanken Grotesk',sans-serif; font-size:.95rem; font-weight:600;
  text-decoration:none; border:none; cursor:pointer;
  transition:background var(--dur-fast), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast);
}
.email-btn { background:var(--blue-600); color:#fff; box-shadow:var(--sh-btn); }
.email-btn:hover { background:var(--blue-700); transform:translateY(-2px); box-shadow:var(--e-blue); }
.email-btn svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; flex-shrink:0; }
.tel-btn { background:#fff; color:var(--gray-900); border:1.5px solid var(--gray-200); box-shadow:var(--e-1); }
.tel-btn:hover { border-color:var(--blue-400); color:var(--blue-600); transform:translateY(-2px); box-shadow:var(--e-2); }
.tel-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }

/* ══════════════════════ PRODUCTS PAGE ══════════════════════ */
.cat-wrap {
  max-width:var(--shell); margin:0 auto;
  padding:clamp(2rem,1.5rem + 2vw,3.5rem) var(--sp-gutter) var(--sp-section);
  display:grid; grid-template-columns:260px 1fr; gap:2.5rem; align-items:start;
}
/* Sticky AND its own scroll container. Without the overflow the sidebar just pinned
   itself while the page scrolled underneath, so scrolling over the category list
   visibly moved the product grid instead. `overscroll-behavior:contain` stops the
   scroll chaining to the page once the list bottoms out. The 6px padding/-6px margin
   pair gives the cards' shadow room to render inside the clipping box without
   shifting them: content sits at exactly the same x as before. */
.sidebar {
  position:sticky; top:110px;
  max-height:calc(100vh - 110px - 1.5rem);
  overflow-y:auto; overscroll-behavior:contain;
  padding-inline:6px; margin-inline:-6px;
  scrollbar-width:thin; scrollbar-color:var(--gray-200) transparent;
}
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:100px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:var(--blue-200); }
.sb-block {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md);
  padding:1.35rem; margin-bottom:1.1rem; box-shadow:var(--e-1);
}
.sb-block h3 { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--gray-400); margin-bottom:1.1rem; }
.srch-box {
  display:flex; align-items:center; gap:10px; background:var(--gray-50);
  border:1.5px solid var(--gray-200); border-radius:var(--r-pill); padding:10px 16px;
  transition:border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.srch-box:focus-within { border-color:var(--blue-400); background:#fff; box-shadow:0 0 0 4px rgba(40,150,214,.12); }
.srch-box svg { width:16px; height:16px; stroke:var(--gray-400); fill:none; stroke-width:2; flex-shrink:0; }
.srch-box input { border:none; background:none; outline:none; font-size:var(--t-sm); color:var(--gray-800); width:100%; font-family:inherit; }

.cat-list { list-style:none; }
.cat-item {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-radius:var(--r-xs); font-size:var(--t-sm); font-weight:600;
  color:var(--gray-600); cursor:pointer; margin-bottom:3px;
  transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cat-item:hover { background:var(--blue-50); color:var(--blue-600); transform:translateX(3px); }
.cat-item.active { background:var(--blue-600); color:#fff; box-shadow:0 4px 12px rgba(13,119,189,.26); }
.cat-cnt { font-size:var(--t-xs); font-weight:700; background:var(--gray-100); color:var(--gray-600); padding:2px 9px; border-radius:var(--r-pill); flex-shrink:0; transition:background var(--dur-fast), color var(--dur-fast); }
.cat-item:hover .cat-cnt { background:#fff; }
.cat-item.active .cat-cnt { background:rgba(255,255,255,.22); color:#fff; }

.help-blk {
  background:linear-gradient(160deg,var(--blue-600),var(--blue-800));
  border-radius:var(--r-md); padding:1.5rem; position:relative; overflow:hidden;
  box-shadow:var(--e-blue);
}
.help-blk::before {
  content:''; position:absolute; width:260px; height:260px; border-radius:50%;
  top:-45%; right:-30%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
}
.help-blk h4 { font-family:'Hanken Grotesk',sans-serif; font-size:1.02rem; font-weight:700; color:#fff; margin-bottom:8px; position:relative; }
.help-blk p { font-size:var(--t-sm); color:rgba(255,255,255,.78); line-height:1.6; margin-bottom:16px; position:relative; }
.help-email {
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#fff; color:var(--blue-800); padding:11px; border-radius:var(--r-pill);
  font-size:var(--t-sm); font-weight:700; text-decoration:none; position:relative;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.help-email:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.22); }
.help-email svg { width:16px; height:16px; stroke:var(--blue-600); fill:none; stroke-width:2; flex-shrink:0; }
/* Phone line under the email button — plain link, not a second button. */
.help-tel {
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px;
  font-size:var(--t-xs); font-weight:600; color:rgba(255,255,255,.8);
  text-decoration:none; position:relative; transition:color var(--dur-fast);
}
.help-tel:hover { color:#fff; }
.help-tel svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }

.cat-main { min-width:0; }
.toolbar { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.75rem; flex-wrap:wrap; gap:1rem; padding-bottom:1.25rem; border-bottom:1px solid var(--hairline); }
.cat-heading { font-weight:800; font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); color:var(--gray-900); margin-bottom:6px; letter-spacing:-.025em; }
.res-cnt { font-size:var(--t-sm); color:var(--gray-600); }
.res-cnt strong { color:var(--blue-600); font-weight:700; }

.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:1.35rem; }
.prod-card {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  animation:cardIn .5s var(--ease-out) backwards;
}
@keyframes cardIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.prod-card:hover { box-shadow:var(--e-3); transform:translateY(-6px); border-color:transparent; }
.pc-img {
  /* Source shots have white backgrounds, so keep this near-white or they letterbox. */
  background:linear-gradient(160deg,#fff 0%,var(--gray-50) 55%,var(--blue-50) 100%);
  height:168px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:1rem;
}
.pc-img img { max-width:100%; max-height:100%; object-fit:contain; transition:transform .55s var(--ease-out); }
.prod-card:hover .pc-img img { transform:scale(1.09); }
.pc-img .fbk { width:52px; height:52px; stroke:var(--blue-200); fill:none; stroke-width:1.5; }
.pc-badge {
  position:absolute; top:11px; right:11px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:4px 11px; font-size:10px; font-weight:800; color:var(--blue-800); letter-spacing:.07em;
}
.pc-body { padding:1.15rem 1.2rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.pc-body h3 { font-size:.925rem; font-weight:700; color:var(--gray-900); margin-bottom:5px; line-height:1.4; letter-spacing:-.01em; }
.pc-cat { font-size:var(--t-xs); color:var(--gray-400); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:14px; }
.pc-acts { display:flex; gap:8px; margin-top:auto; }
.bmail {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--blue-600); color:#fff; padding:9px 10px; border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:700; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.bmail:hover { background:var(--blue-700); transform:translateY(-1px); }
.bmail svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2; flex-shrink:0; }
.btel {
  display:flex; align-items:center; justify-content:center; padding:9px 12px;
  border:1.5px solid var(--gray-200); border-radius:var(--r-pill); color:var(--gray-600);
  text-decoration:none; transition:all var(--dur-fast);
}
.btel:hover { border-color:var(--blue-400); color:var(--blue-600); transform:translateY(-1px); }
.btel svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

.empty-st { text-align:center; padding:4.5rem 2rem; background:var(--gray-50); border:1.5px dashed var(--gray-200); border-radius:var(--r-lg); }
.empty-st svg { width:52px; height:52px; stroke:var(--blue-200); fill:none; stroke-width:1.5; margin:0 auto 1.25rem; }
.empty-st h3 { font-family:'Hanken Grotesk',sans-serif; font-size:1.2rem; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.empty-st p { font-size:var(--t-sm); color:var(--gray-600); max-width:400px; margin:0 auto 1.5rem; line-height:1.65; }
.empty-email {
  display:inline-flex; align-items:center; gap:8px; background:var(--blue-600); color:#fff;
  padding:12px 26px; border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:600;
  text-decoration:none; box-shadow:var(--sh-btn); transition:background var(--dur-fast), transform var(--dur-fast);
}
.empty-email:hover { background:var(--blue-700); transform:translateY(-2px); }

/* Footnote under the product grid — points at the principal's own catalogue
   for anything we don't list, plus a fallback to our own contact page. */
.cat-note {
  display:flex; align-items:flex-start; gap:1.15rem; flex-wrap:wrap;
  margin-top:2rem; padding:1.5rem 1.6rem;
  background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-md);
}
.cat-note-ic {
  width:38px; height:38px; border-radius:11px; background:#fff; border:1px solid var(--blue-100);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cat-note-ic svg { width:19px; height:19px; stroke:var(--blue-600); fill:none; stroke-width:2; }
.cat-note-body { flex:1; min-width:min(100%,260px); }
.cat-note-body h4 {
  font-family:'Hanken Grotesk',sans-serif; font-size:1rem; font-weight:700;
  color:var(--gray-900); margin-bottom:5px; letter-spacing:-.01em;
}
.cat-note-body p { font-size:var(--t-sm); color:var(--gray-600); line-height:1.65; }
.cat-note-acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cat-note-link {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--blue-600); color:#fff; padding:11px 20px; border-radius:var(--r-pill);
  font-size:var(--t-sm); font-weight:600; text-decoration:none; box-shadow:var(--sh-btn);
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cat-note-link:hover { background:var(--blue-700); transform:translateY(-2px); }
.cat-note-link svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2; flex-shrink:0; }
.cat-note-alt {
  display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer;
  padding:11px 18px; border-radius:var(--r-pill); border:1.5px solid var(--blue-200);
  font-size:var(--t-sm); font-weight:600; color:var(--blue-700); text-decoration:none;
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cat-note-alt:hover { background:#fff; border-color:var(--blue-400); transform:translateY(-2px); }

/* ══════════════════════ MODAL ══════════════════════ */
.modal-ov {
  position:fixed; inset:0; background:rgba(3,24,38,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; z-index:500; padding:1.5rem;
}
.modal-ov.open { display:flex; animation:fadeIn .3s ease backwards; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal {
  background:#fff; border-radius:var(--r-lg); max-width:580px; width:100%;
  max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 40px 90px rgba(3,24,38,.4);
  animation:modalIn .45s var(--ease-out) backwards;
}
@keyframes modalIn { from { opacity:0; transform:translateY(28px) scale(.97); } to { opacity:1; transform:none; } }
.modal-x {
  position:absolute; top:16px; right:16px; width:38px; height:38px; border:none;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:var(--e-2);
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.modal-x:hover { background:var(--gray-900); transform:rotate(90deg); }
.modal-x:hover svg { stroke:#fff; }
.modal-x svg { width:18px; height:18px; stroke:var(--gray-800); stroke-width:2.2; fill:none; transition:stroke var(--dur-fast); }
.modal-img {
  background:linear-gradient(160deg,#fff 0%,var(--gray-50) 55%,var(--blue-50) 100%); height:250px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden;
}
.modal-img img { max-width:100%; max-height:100%; object-fit:contain; padding:1.5rem; }
.modal-img .fbk { width:64px; height:64px; stroke:var(--blue-200); fill:none; stroke-width:1.4; }
.modal-body { padding:2rem; }
.m-badge {
  display:inline-block; background:var(--blue-50); color:var(--blue-800);
  font-size:var(--t-xs); font-weight:800; letter-spacing:.08em;
  padding:5px 13px; border-radius:var(--r-pill); margin-bottom:12px;
}
.modal-body h2 { font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.6rem; color:var(--gray-900); line-height:1.2; margin-bottom:6px; letter-spacing:-.03em; }
.m-cat { font-size:var(--t-xs); color:var(--gray-400); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:1.75rem; }
.m-sec { margin-bottom:1.5rem; }
.m-sec h4 { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--gray-400); margin-bottom:9px; }
.m-sec p { font-size:var(--t-sm); color:var(--gray-600); line-height:1.75; }
.specs-soon {
  display:flex; align-items:center; gap:10px; background:var(--gray-50);
  border:1.5px dashed var(--gray-200); border-radius:var(--r-xs);
  padding:13px 16px; font-size:var(--t-sm); color:var(--gray-600);
}
.specs-soon svg { width:17px; height:17px; stroke:var(--blue-400); fill:none; stroke-width:2; flex-shrink:0; }
/* Per-product link out to the principal's official catalogue entry. */
.m-catalog {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--blue-200); background:var(--blue-50); color:var(--blue-700);
  font-size:var(--t-sm); font-weight:600; text-decoration:none;
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.m-catalog:hover { background:#fff; border-color:var(--blue-400); transform:translateY(-2px); }
.m-catalog svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.m-catalog-note { font-size:var(--t-xs); color:var(--gray-400); line-height:1.6; margin-top:9px; }

.m-acts { display:flex; gap:10px; margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid var(--hairline); }
.m-email,.m-tel {
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border-radius:var(--r-pill); font-family:'Hanken Grotesk',sans-serif;
  font-size:var(--t-sm); font-weight:600; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast);
}
.m-email { background:var(--blue-600); color:#fff; box-shadow:var(--sh-btn); }
.m-email:hover { background:var(--blue-700); transform:translateY(-2px); }
.m-email svg { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
.m-tel { background:#fff; color:var(--gray-900); border:1.5px solid var(--gray-200); }
.m-tel:hover { border-color:var(--blue-400); color:var(--blue-600); transform:translateY(-2px); }
.m-tel svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* ══════════════════════ LOCATIONS ══════════════════════ */
.loc-wrap { max-width:var(--shell); margin:0 auto; padding:clamp(2.5rem,2rem + 2vw,4rem) var(--sp-gutter) var(--sp-section); }
.loc-group { margin-bottom:clamp(2.5rem,2rem + 2vw,4rem); }
.loc-group:last-child { margin-bottom:0; }
.loc-group-hd { display:flex; align-items:center; gap:12px; margin-bottom:1.75rem; padding-bottom:1rem; border-bottom:1px solid var(--hairline); }
.loc-group-hd svg { width:20px; height:20px; stroke:var(--blue-600); fill:none; stroke-width:2; flex-shrink:0; }
.loc-group-hd h2 { font-weight:800; font-size:1.4rem; color:var(--gray-900); letter-spacing:-.025em; }
.loc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.35rem; }
.loc-card {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md); overflow:hidden;
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.loc-card.in-view { opacity:1; transform:translateY(0); }
.loc-card:hover { box-shadow:var(--e-3); transform:translateY(-6px); border-color:transparent; }
.loc-img { height:265px; background:linear-gradient(160deg,var(--gray-50),var(--blue-50)); overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* Source photos mix portrait and landscape; cover keeps every card framed the same. */
.loc-img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--ease-out); }
.loc-card:hover .loc-img img { transform:scale(1.06); }
.loc-body { padding:1.4rem 1.5rem 1.55rem; }
.loc-badge {
  display:inline-block; font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-600); background:var(--blue-50); padding:4px 12px; border-radius:var(--r-pill); margin-bottom:12px;
}
.loc-card h3 { font-family:'Hanken Grotesk',sans-serif; font-size:1.15rem; font-weight:700; color:var(--gray-900); margin-bottom:8px; letter-spacing:-.02em; }
.loc-card p { font-size:var(--t-sm); color:var(--gray-600); line-height:1.7; }
/* Head Office reads as a featured card: full row, image beside the detail. */
.loc-hq { grid-column:1/-1; display:grid; grid-template-columns:1.1fr 1fr; }
.loc-hq .loc-img { height:clamp(300px,30vw,420px); }
.loc-hq .loc-img img { object-fit:cover; }
.loc-hq .loc-body { padding:clamp(1.75rem,1rem + 2vw,3rem); display:flex; flex-direction:column; justify-content:center; }
.loc-hq .loc-badge { background:var(--blue-600); color:#fff; align-self:flex-start; }
.loc-hq h3 { font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin-bottom:12px; }
.loc-hq p { font-size:var(--t-body); }
@media (max-width:760px) {
  .loc-hq { grid-template-columns:1fr; }
  .loc-hq .loc-img { height:260px; }
}

/* National coverage map — opens the page before the office listings. */
/* The coverage map artwork is full-bleed navy with its own margins baked in,
   so the card carries no padding — a white gutter would read as a mat board. */
.branch-map-card {
  background:var(--blue-800); border:1px solid var(--gray-200);
  border-radius:var(--r-lg); overflow:hidden; line-height:0; box-shadow:var(--e-2);
  transition:box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.branch-map-card:hover { box-shadow:var(--e-4); transform:translateY(-4px); }
.branch-map-card img { width:100%; height:auto; display:block; }

/* Text-only location card — the warehouse has no published photos, so it reads
   as a tinted plate with the mark on the left instead of an empty image well. */
.loc-plain {
  display:flex; align-items:center; gap:clamp(1.25rem,.8rem + 1.6vw,2.25rem);
  background:linear-gradient(140deg,var(--gray-50),var(--blue-50));
  border:1px solid var(--gray-200); border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  transition:box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.loc-plain:hover { box-shadow:var(--e-3); transform:translateY(-4px); border-color:transparent; }
.loc-plain-ic {
  flex-shrink:0; width:clamp(56px,3rem + 2vw,74px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--blue-100); border-radius:var(--r-md);
  box-shadow:var(--e-1);
}
.loc-plain-ic svg { width:50%; height:50%; stroke:var(--blue-600); fill:none; stroke-width:1.8; }

/* Branch offices: a photo-less list (user asked to drop the building photos) */
.loc-list {
  list-style:none; margin:0; padding:0;
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); overflow:hidden;
}
.loc-row {
  display:grid; grid-template-columns:auto minmax(150px,.42fr) minmax(0,1fr); align-items:center;
  gap:clamp(1rem,.6rem + 1.4vw,2rem); padding:1.35rem clamp(1.25rem,.9rem + 1.4vw,2rem);
  transition:background var(--dur-fast);
}
.loc-row + .loc-row { border-top:1px solid var(--hairline); }
.loc-row:hover { background:var(--gray-50); }
.loc-row-ic {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-sm);
  transition:background var(--dur-fast), border-color var(--dur-fast);
}
.loc-row-ic svg { width:22px; height:22px; stroke:var(--blue-600); fill:none; stroke-width:1.8; transition:stroke var(--dur-fast); }
.loc-row:hover .loc-row-ic { background:var(--blue-600); border-color:var(--blue-600); }
.loc-row:hover .loc-row-ic svg { stroke:#fff; }
.loc-row-city h3 { font-family:'Hanken Grotesk',sans-serif; font-size:1.15rem; font-weight:700; color:var(--gray-900); letter-spacing:-.02em; line-height:1.25; }
.loc-row-city span { display:block; margin-top:2px; font-size:var(--t-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600); }
.loc-row-addr { font-size:var(--t-sm); color:var(--gray-600); line-height:1.7; }
@media (max-width:600px) {
  .loc-row { grid-template-columns:auto minmax(0,1fr); align-items:start; row-gap:.5rem; }
  .loc-row-addr { grid-column:2; }
  .loc-row-ic { width:42px; height:42px; }
}
.loc-plain-body h3 {
  font-family:'Hanken Grotesk',sans-serif; font-weight:800;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem); color:var(--gray-900);
  margin-bottom:10px; letter-spacing:-.025em;
}
.loc-plain-addr { font-size:var(--t-body); color:var(--gray-600); line-height:1.75; }
@media (max-width:600px) {
  .loc-plain { flex-direction:column; align-items:flex-start; text-align:left; }
  .loc-plain-addr br { display:none; }
}

/* ══════════════════════ CONTACT ══════════════════════ */
.contact-wrap {
  max-width:var(--shell); margin:0 auto;
  padding:clamp(2.5rem,2rem + 2vw,4rem) var(--sp-gutter);
  display:grid; grid-template-columns:1fr 1.1fr; gap:2.5rem; align-items:start;
}
.info-card,.form-card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:2rem; box-shadow:var(--e-1); }
.info-card h2,.form-card h2 { font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.4rem; color:var(--gray-900); margin-bottom:1.5rem; letter-spacing:-.025em; }
.info-item { display:flex; align-items:flex-start; gap:15px; padding:15px 0; border-bottom:1px solid var(--gray-100); }
.info-item:last-of-type { border:none; }
.ii-ic { width:44px; height:44px; border-radius:12px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--dur-fast); }
.info-item:hover .ii-ic { background:var(--blue-100); }
.ii-ic svg { width:20px; height:20px; stroke:var(--blue-600); fill:none; stroke-width:1.8; }
.ii-lbl { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--gray-400); margin-bottom:4px; }
.ii-val { font-size:var(--t-body); color:var(--gray-800); font-weight:500; line-height:1.55; }
.ii-val a { color:var(--blue-600); text-decoration:none; }
.ii-val a:hover { text-decoration:underline; }
.socials-row { display:flex; gap:10px; margin-top:10px; }
.soc-btn {
  width:42px; height:42px; border-radius:12px; background:var(--blue-50); border:1px solid var(--blue-100);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.soc-btn:hover { background:var(--blue-600); border-color:var(--blue-600); transform:translateY(-3px); box-shadow:var(--sh-btn); }
.soc-btn svg { width:18px; height:18px; transition:fill var(--dur-fast), stroke var(--dur-fast); }
.soc-btn.soc-line svg { fill:none; stroke:var(--blue-600); stroke-width:1.8; }
.soc-btn.soc-line:hover svg { stroke:#fff; }
.big-email {
  display:flex; align-items:center; justify-content:center; gap:11px; background:var(--blue-600); color:#fff;
  padding:15px; border-radius:var(--r-pill); font-family:'Hanken Grotesk',sans-serif;
  font-size:.95rem; font-weight:600; text-decoration:none; margin-top:1.75rem;
  box-shadow:var(--sh-btn);
  transition:background var(--dur-fast), transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.big-email:hover { background:var(--blue-700); transform:translateY(-2px); box-shadow:var(--e-blue); }
.big-email svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:2; }
.big-tel {
  display:flex; align-items:center; justify-content:center; gap:11px; background:#fff; color:var(--gray-900);
  padding:15px; border-radius:var(--r-pill); font-family:'Hanken Grotesk',sans-serif;
  font-size:.95rem; font-weight:600; text-decoration:none; margin-top:12px;
  border:1.5px solid var(--gray-200); box-shadow:var(--e-1);
  transition:border-color var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.big-tel:hover { border-color:var(--blue-400); color:var(--blue-600); transform:translateY(-2px); box-shadow:var(--e-2); }
.big-tel svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; }

.form-sub { font-size:var(--t-sm); color:var(--gray-600); margin-bottom:1.75rem; line-height:1.65; }
.field { margin-bottom:1.15rem; }
.field label { display:block; font-size:var(--t-sm); font-weight:600; color:var(--gray-800); margin-bottom:7px; }
.field input,.field textarea {
  width:100%; border:1.5px solid var(--gray-200); border-radius:var(--r-xs);
  padding:13px 15px; font-size:var(--t-sm); font-family:inherit; color:var(--gray-800);
  background:var(--gray-50); outline:none;
  transition:border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field input::placeholder,.field textarea::placeholder { color:var(--gray-400); }
.field input:focus,.field textarea:focus { border-color:var(--blue-400); background:#fff; box-shadow:0 0 0 4px rgba(40,150,214,.12); }
.field textarea { resize:vertical; min-height:118px; }
/* Only one action left — the form composes an email, so it spans the row. */
.form-acts { display:flex; gap:10px; margin-top:1.5rem; }
.f-email {
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border-radius:var(--r-pill); font-family:'Hanken Grotesk',sans-serif;
  font-size:var(--t-sm); font-weight:600; cursor:pointer;
  background:var(--blue-600); color:#fff; border:none; box-shadow:var(--sh-btn);
  transition:background var(--dur-fast), transform var(--dur) var(--ease-out);
}
.f-email:hover { background:var(--blue-700); transform:translateY(-2px); }
.f-email svg { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
.form-note { font-size:var(--t-xs); color:var(--gray-400); margin-top:14px; line-height:1.6; }

.map-sec { max-width:var(--shell); margin:0 auto; padding:0 var(--sp-gutter) var(--sp-section); }
.map-hd { display:flex; align-items:center; gap:11px; margin-bottom:1.35rem; }
.map-hd svg { width:22px; height:22px; stroke:var(--blue-600); fill:none; stroke-width:2; }
.map-hd h2 { font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.4rem; color:var(--gray-900); letter-spacing:-.025em; }
.map-frame { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--gray-200); box-shadow:var(--e-3); line-height:0; }
.map-frame iframe { width:100%; height:440px; border:0; display:block; }

/* ══════════════════════ CAREER ══════════════════════ */
/* auto-fit rather than a fixed 3 — the Motto card was dropped, so the row
   holds two cards and must not leave an empty third column. */
.vmm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.vmm-card {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md); padding:2rem;
  position:relative; overflow:hidden;
  transition:box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur);
}
.vmm-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-200));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease-out);
}
.vmm-card:hover { box-shadow:var(--e-3); transform:translateY(-6px); border-color:transparent; }
.vmm-card:hover::before { transform:scaleX(1); }
.vmm-ic { width:48px; height:48px; background:var(--blue-50); border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; margin-bottom:1.35rem; transition:background var(--dur), transform var(--dur) var(--ease-spring); }
.vmm-card:hover .vmm-ic { background:var(--blue-600); transform:scale(1.06); }
.vmm-ic svg { width:22px; height:22px; stroke:var(--blue-600); fill:none; stroke-width:1.8; transition:stroke var(--dur); }
.vmm-card:hover .vmm-ic svg { stroke:#fff; }
.vmm-card h3 { font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--blue-600); margin-bottom:.75rem; }
.vmm-card p { font-size:var(--t-body); color:var(--gray-600); line-height:1.72; }
.vmm-card p em { font-style:italic; color:var(--blue-800); font-weight:600; }

.pos-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.pos-card {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-md); padding:2rem;
  display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur);
}
.pos-card:hover { box-shadow:var(--e-3); transform:translateY(-6px); border-color:transparent; }
.pos-top { display:flex; align-items:center; gap:15px; margin-bottom:1.15rem; }
.pos-ic { width:52px; height:52px; border-radius:14px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--dur), transform var(--dur) var(--ease-spring); }
.pos-card:hover .pos-ic { background:var(--blue-600); transform:scale(1.05); }
.pos-ic svg { width:24px; height:24px; stroke:var(--blue-600); fill:none; stroke-width:1.7; transition:stroke var(--dur); }
.pos-card:hover .pos-ic svg { stroke:#fff; }
.pos-card h3 { font-size:1.2rem; font-weight:700; color:var(--gray-900); letter-spacing:-.02em; }
.pos-tag { font-size:var(--t-xs); color:var(--blue-600); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.pos-card p { font-size:var(--t-sm); color:var(--gray-600); line-height:1.7; margin-bottom:1.35rem; flex:1; }
.pos-meta { display:flex; gap:8px; margin-bottom:1.35rem; flex-wrap:wrap; }
.pos-chip { font-size:var(--t-xs); font-weight:600; color:var(--gray-600); background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--r-pill); padding:5px 13px; display:inline-flex; align-items:center; gap:6px; }
.pos-chip svg { width:13px; height:13px; stroke:var(--gray-400); fill:none; stroke-width:2; }
.pos-apply {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--blue-600); color:#fff; padding:12px 24px; border-radius:var(--r-pill);
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--t-sm); font-weight:600;
  text-decoration:none; align-self:flex-start; box-shadow:var(--sh-btn);
  transition:background var(--dur-fast), transform var(--dur) var(--ease-out);
}
.pos-apply:hover { background:var(--blue-700); transform:translateY(-2px); }
.pos-apply svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; transition:transform var(--dur) var(--ease-out); }
.pos-apply:hover svg { transform:translateX(4px); }

.apply-sec { padding:0 var(--sp-gutter) var(--sp-section); }
.apply-in {
  max-width:var(--shell); margin:0 auto; background:var(--blue-800); border-radius:var(--r-xl);
  padding:clamp(2.25rem,1.5rem + 3vw,3.75rem); display:grid; grid-template-columns:1.4fr 1fr;
  gap:2.5rem; align-items:center; position:relative; overflow:hidden;
}
.apply-in::before {
  content:''; position:absolute; width:700px; height:700px; border-radius:50%;
  top:-70%; right:-15%; pointer-events:none;
  background:radial-gradient(circle, rgba(40,150,214,.3), transparent 62%);
}
.apply-in > div { position:relative; z-index:1; }
.apply-in h2 { font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem); color:#fff; line-height:1.18; margin-bottom:.85rem; letter-spacing:-.03em; }
.apply-in > div > p { font-size:var(--t-body); color:rgba(255,255,255,.76); line-height:1.72; }
.apply-in > div > p a { color:var(--blue-200); font-weight:600; text-decoration:none; }
.apply-in > div > p a:hover { text-decoration:underline; }
.apply-acts { display:flex; flex-direction:column; gap:12px; }
/* Sits on the dark navy apply band, so primary is solid white and secondary a ghost outline. */
.a-email,.a-tel {
  display:flex; align-items:center; justify-content:center; gap:11px; padding:15px;
  border-radius:var(--r-pill); font-family:'Hanken Grotesk',sans-serif;
  font-size:.95rem; font-weight:600; text-decoration:none;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.a-email { background:#fff; color:var(--blue-800); }
.a-email:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.a-email svg { width:18px; height:18px; stroke:var(--blue-800); fill:none; stroke-width:2; }
.a-tel { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.32); }
.a-tel:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.a-tel svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

/* ══════════════════════ FOOTER ══════════════════════ */
footer {
  background:var(--blue-600); color:#fff;
  padding:clamp(3.5rem,2.5rem + 3vw,5rem) var(--sp-gutter) 2rem;
  position:relative; overflow:hidden;
}
footer::before {
  content:''; position:absolute; width:900px; height:900px; border-radius:50%;
  top:-60%; right:-10%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.13), transparent 62%);
}
.ft-in { max-width:var(--shell); margin:0 auto; position:relative; z-index:1; }
.ft-top { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:2rem; }
/* The mark is two-tone (blue plate + knocked-out white heart), so recolouring it
   white flattens it into a blank block. It sits on its own white plate instead,
   which also gives it separation from the blue footer. */
.ft-logo {
  display:inline-flex; align-items:center; margin-bottom:1.5rem;
  background:#fff; border-radius:var(--r-sm); padding:13px 18px;
  box-shadow:0 4px 16px rgba(3,24,38,.18);
}
.ft-logo img { height:52px; width:auto; display:block; }
.ft-brand p { font-size:var(--t-sm); color:rgba(255,255,255,.6); line-height:1.75; margin-bottom:1.5rem; max-width:300px; }
.ft-ci { display:flex; align-items:flex-start; gap:10px; font-size:var(--t-sm); color:rgba(255,255,255,.68); margin-bottom:10px; line-height:1.6; }
.ft-ci svg { width:15px; height:15px; stroke:var(--blue-200); fill:none; stroke-width:2; flex-shrink:0; margin-top:4px; }
.ft-col h4 { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.5); margin-bottom:1.15rem; }
.ft-col a {
  display:block; font-size:var(--t-sm); color:rgba(255,255,255,.72); text-decoration:none;
  margin-bottom:10px; cursor:pointer; width:fit-content;
  transition:color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.ft-col a:hover { color:#fff; transform:translateX(4px); }
.ft-bot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.ft-copy { font-size:var(--t-xs); color:rgba(255,255,255,.5); }
.ft-soc { display:flex; gap:10px; }
.ft-soc a {
  width:38px; height:38px; border-radius:var(--r-pill); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.ft-soc a:hover { background:#fff; border-color:#fff; transform:translateY(-3px); }
.ft-soc a svg { width:16px; height:16px; fill:rgba(255,255,255,.85); transition:fill var(--dur-fast); }
.ft-soc a:hover svg { fill:var(--blue-600); }

/* ══════════════════════ FLOATING ACTIONS ══════════════════════ */
.fab-stack {
  position:fixed; right:clamp(1rem,.5rem + 1.5vw,1.75rem); bottom:clamp(1rem,.5rem + 1.5vw,1.75rem);
  z-index:300; display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.fab {
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:var(--e-3);
  transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur-fast), opacity var(--dur), visibility var(--dur);
}
.fab-email { background:var(--blue-600); position:relative; }
.fab-email svg { width:25px; height:25px; stroke:#fff; fill:none; stroke-width:2; }
.fab-email::before {
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue-600);
  animation:fabPing 2.6s var(--ease-io) infinite; z-index:-1;
}
@keyframes fabPing { 0% { transform:scale(1); opacity:.55; } 70%,100% { transform:scale(1.7); opacity:0; } }
.fab-top { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border:1px solid var(--hairline); width:46px; height:46px; opacity:0; visibility:hidden; transform:translateY(10px); }
.fab-top.show { opacity:1; visibility:visible; transform:none; }
.fab-top svg { width:20px; height:20px; stroke:var(--gray-900); fill:none; stroke-width:2.2; }
.fab-top:hover { background:var(--gray-900); }
.fab-top:hover svg { stroke:#fff; }
/* Placed last so the lift wins over the variants' own transforms. */
.fab:hover, .fab-top.show:hover { transform:translateY(-4px) scale(1.06); }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width:1080px) {
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .partners-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .nav-links { display:none; }
  .hamburger { display:block; }
  .nav-inner { height:62px; padding:0 6px 0 18px; }
  nav.scrolled .nav-inner { height:58px; }
  .mob-menu { top:86px; }
  .hero-banner { min-height:520px; margin:10px 10px 0; border-radius:26px; }
  .hero-stats-float { grid-template-columns:repeat(2,1fr); margin-top:-36px; padding:1.75rem 1.5rem; gap:1.75rem 1rem; }
  .hero-stats-float > div:nth-child(odd)::before { display:none; }
  .about-in { grid-template-columns:1fr; gap:2.5rem; }
  .cat-wrap { grid-template-columns:1fr; gap:1.75rem; }
  .sidebar { position:static; max-height:none; overflow:visible; padding-inline:0; margin-inline:0; }
  .contact-wrap { grid-template-columns:1fr; gap:1.75rem; }
  .vmm-grid { grid-template-columns:1fr; }
  .pos-grid { grid-template-columns:1fr; }
  .apply-in { grid-template-columns:1fr; gap:1.75rem; }
  .ft-top { grid-template-columns:1fr 1fr; gap:2.5rem 2rem; }
  .ft-brand { grid-column:1/-1; }
}
@media (max-width:600px) {
  .hero-banner { min-height:480px; }
  /* Narrow screens put copy over the bright glass, so darken top-to-bottom instead. */
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(3,24,38,.9) 0%, rgba(3,24,38,.76) 45%, rgba(3,24,38,.92) 100%),
      radial-gradient(120% 70% at 90% 40%, rgba(13,119,189,.38), transparent 60%);
  }
  .hero-stats-float { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .partners-grid { grid-template-columns:1fr; }
  .abt-stats { grid-template-columns:1fr 1fr; }
  .ft-top { grid-template-columns:1fr; }
  .ft-brand { grid-column:auto; }
  .map-frame iframe { height:320px; }
  .prod-grid { grid-template-columns:1fr 1fr; gap:1rem; }
  .info-card,.form-card { padding:1.5rem; }
  .modal-body { padding:1.5rem; }
  .m-acts { flex-direction:column; }
  .cta-acts { flex-direction:column; }
  .cta-acts > * { width:100%; }
  .hero-acts { flex-direction:column; align-items:stretch; }
  .hero-acts > * { width:100%; }
}
@media (max-width:400px) { .prod-grid { grid-template-columns:1fr; } }

/* ══════════════════════ CATALOG & WAYFINDING REFINEMENTS ══════════════════════ */
[hidden] { display:none!important; }
#about { scroll-margin-top:110px; }
.hero-content { padding-bottom:6.5rem; }
.hero-stats-float { width:calc(100% - 2 * var(--sp-gutter)); }
.quick-links {
  max-width:var(--shell); margin:0 auto; padding:2.5rem var(--sp-gutter) 3rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
}
.quick-links a {
  display:flex; align-items:center; gap:1rem; padding:1.35rem;
  border:1px solid var(--gray-200); border-radius:var(--r-md); text-decoration:none;
  background:var(--white); transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.quick-links a:hover { background:var(--blue-50); border-color:var(--blue-200); transform:translateY(-3px); }
.quick-icon { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:var(--r-sm); background:var(--blue-50); color:var(--blue-600); }
.quick-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
.quick-links strong { display:block; font-family:'Hanken Grotesk',sans-serif; font-size:1.05rem; color:var(--gray-900); line-height:1.3; }
.quick-links small { display:block; font-size:var(--t-xs); color:var(--gray-600); margin-top:5px; line-height:1.5; }
.quick-arrow { margin-left:auto; color:var(--blue-600); font-size:1.3rem; }

#page-products { background:var(--gray-50); }
#page-products .page-head { padding:2.5rem var(--sp-gutter) 3.5rem; }
#page-products .page-head p { max-width:760px; }
.cat-wrap { grid-template-columns:230px minmax(0,1fr); column-gap:2rem; row-gap:2rem; padding-top:0; }
.catalog-search { grid-column:1/-1; position:relative; margin-top:-1.5rem; padding:1.5rem 1.75rem; border:1px solid var(--gray-200); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--e-2); }
.catalog-search > label { display:block; color:var(--gray-900); font-family:'Hanken Grotesk',sans-serif; font-weight:700; margin-bottom:.7rem; }
.catalog-search .srch-box { min-height:58px; padding:5px 10px 5px 20px; border-radius:var(--r-sm); }
.catalog-search .srch-box > svg { width:21px; height:21px; stroke:var(--blue-600); }
.catalog-search input { min-width:0; font-size:1rem; min-height:44px; }
.catalog-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.search-clear { width:44px; height:44px; flex-shrink:0; background:transparent; color:var(--gray-600); border:0; border-radius:var(--r-xs); font-size:1.5rem; cursor:pointer; }
.search-clear:hover { background:var(--blue-50); color:var(--blue-600); }
.cat-item { width:100%; border:0; background:transparent; font-family:inherit; text-align:left; min-height:46px; }
.cat-item:hover { background:var(--blue-50); }
.cat-item.active { background:var(--blue-600); }
.sb-block { padding:1rem; box-shadow:none; }
.sb-block h3 { color:var(--gray-600); padding:5px 12px; }
.mobile-category { display:none; }
.toolbar { margin-bottom:0; padding-bottom:1rem; }
.catalog-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.sort-control { display:flex; align-items:center; gap:.75rem; margin-left:auto; font-size:var(--t-xs); color:var(--gray-600); }
.sort-control select,.mobile-category select { min-height:44px; padding:10px 30px 10px 12px; border:1px solid var(--gray-200); border-radius:var(--r-xs); color:var(--gray-800); background:var(--white); font:inherit; cursor:pointer; }
.reset-filters { min-height:44px; padding:8px 0; background:none; border:0; font:600 var(--t-sm) 'Hanken Grotesk',sans-serif; color:var(--blue-700); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.prod-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.prod-card { box-shadow:var(--e-1); }
.prod-card:hover,.prod-card:focus-within { border-color:var(--blue-200); box-shadow:var(--e-3); }
.pc-img { height:200px; padding:2.5rem 1.2rem 1.2rem; background:var(--white); border-bottom:1px solid var(--gray-100); }
.pc-badge { right:auto; left:14px; top:12px; background:var(--blue-50); border:0; }
.pc-body { padding:1.25rem; }
.pc-body h3 { font-size:1rem; line-height:1.45; overflow-wrap:anywhere; }
.pc-cat { color:var(--gray-600); margin-bottom:.75rem; }
.pc-details { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; min-height:44px; margin-top:auto; margin-bottom:.75rem; padding:8px 18px; border:0; border-radius:var(--r-pill); background:var(--blue-50); color:var(--blue-700); font:800 var(--t-sm) 'Hanken Grotesk',sans-serif; cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast); }
.pc-details:hover { background:var(--blue-100); color:var(--blue-800); }
.pc-acts { margin-top:0; }
.bmail,.btel { min-height:44px; }
.empty-st { background:var(--white); }
.empty-st .btn-s { margin:0 .5rem .75rem; }
.empty-st .empty-email { margin-bottom:.75rem; }
.res-cnt { overflow-wrap:anywhere; }

/* Native dialog keeps keyboard focus inside, with a persistent close control. */
.modal-ov { width:100%; height:100dvh; max-width:none; max-height:none; margin:0; border:0; color:var(--gray-800); }
.modal-ov::backdrop { background:transparent; }
.modal { max-width:1000px; max-height:90dvh; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; overscroll-behavior:contain; }
.modal-top { position:sticky; top:0; z-index:3; grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px; padding:10px 18px 10px 26px; background:var(--white); border-bottom:1px solid var(--gray-200); font:700 var(--t-sm) 'Hanken Grotesk',sans-serif; color:var(--gray-600); }
.modal-x { position:static; width:44px; height:44px; background:var(--gray-50); box-shadow:none; flex-shrink:0; }
.modal-img { position:sticky; top:66px; height:360px; margin:1.5rem 0 1.5rem 1.5rem; border:1px solid var(--gray-100); border-radius:var(--r-md); background:var(--white); }
.modal-body { min-width:0; }
.modal-body h2 { padding-right:.25rem; overflow-wrap:anywhere; }
.m-sec p { overflow-wrap:anywhere; }
.m-cat,.m-sec h4 { color:var(--gray-600); }
.m-acts { position:sticky; bottom:0; background:var(--white); padding:1rem 0; margin-bottom:0; }

@media (min-width:901px) and (max-width:1120px) {
  .nav-links > a { padding:10px 8px; font-size:.8rem; }
  .nav-inner { gap:.5rem; padding-left:16px; }
  .nav-links { gap:0; }
  .nav-cta { padding:11px 14px!important; }
  .lang-switch { margin-left:0; }
  .nav-logo img { height:32px; }
  .prod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick-links a { padding:1rem; gap:.65rem; }
}
@media (max-width:900px) {
  .cat-wrap { grid-template-columns:1fr; gap:1.25rem; }
  .catalog-search { padding:1.25rem; }
  .sidebar .category-block,.sidebar .help-blk { display:none; }
  .mobile-category { display:flex; align-items:center; gap:1rem; }
  .mobile-category label { font-size:var(--t-sm); font-weight:600; }
  .mobile-category select { flex:1; min-width:0; font-size:1rem; }
  .prod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick-links { gap:.75rem; }
  .quick-links a { padding:1rem; flex-wrap:wrap; gap:.65rem; }
  .quick-links a > span:nth-child(2) { width:100%; order:2; }
  .quick-arrow { align-self:flex-start; }
  .mob-menu { max-height:calc(100dvh - 100px); overflow:auto; }
}
@media (max-width:600px) {
  .hero-content { align-items:flex-start; text-align:left; padding:2.5rem 1.5rem 5rem; }
  .hero-content h1 { font-size:clamp(2.35rem,8vw,3rem); }
  .hero-ey { font-size:.65rem; letter-spacing:.06em; padding:8px 12px; }
  .hero-desc { font-size:.9rem; line-height:1.75; margin-bottom:1.75rem; }
  .hero-acts { width:100%; }
  .hero-acts > * { white-space:normal; }
  .quick-links { grid-template-columns:1fr; padding-top:1.5rem; padding-bottom:2rem; }
  .quick-links a { flex-wrap:nowrap; padding:1rem 1.2rem; gap:1rem; }
  .quick-links a > span:nth-child(2) { width:auto; order:0; }
  .quick-arrow { align-self:center; }
  .quick-links strong { font-size:1rem; }
  #page-products .page-head { padding-top:2rem; padding-bottom:3rem; }
  .catalog-search { padding:1rem; border-radius:var(--r-md); }
  .catalog-search .srch-box { padding-left:12px; gap:8px; }
  .catalog-search input { font-size:1rem; }
  .prod-grid { grid-template-columns:1fr; gap:1.25rem; }
  .pc-img { height:230px; }
  .pc-body { padding:1.25rem; }
  .modal-ov { padding:.65rem; }
  .modal { display:block; max-height:95dvh; border-radius:var(--r-md); }
  .modal-img { position:static; height:230px; margin:1rem; }
  .modal-body { padding:1.25rem; }
  .modal-body h2 { font-size:1.4rem; }
  .m-acts { bottom:0; flex-direction:row; gap:8px; }
  .modal-top { padding-left:20px; }
  .loc-grid { grid-template-columns:minmax(0,1fr); }
  .fab-stack { right:.8rem; bottom:.8rem; }
  .fab-email { width:46px; height:46px; }
  .fab-email::before { animation:none; }
}

/* ══════════════════════ REDUCED MOTION ══════════════════════ */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .reveal,.reveal-group > *,.value-card,.partner-card,.logo-wall-item,.loc-card { opacity:1!important; transform:none!important; }
  .hero-bg { animation:none; }
}

/* ══════════════════════ PRINT ══════════════════════ */
@media print {
  nav,.topbar,.mob-menu,.fab-stack,.scroll-prog,.hero-scroll { display:none!important; }
  .page { display:block!important; }
  body { color:#000; }
}