/* ================================================================
   VECTOR INNOVATIONS LIMITED · main.css v7
   Fonts: Century Gothic (Jost fallback) + Jost
   Palette: Navy #0D1B2A · Gold #C9A96E · Red #C0392B · White #FFFFFF
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

/* ── Force a fixed light rendering scheme so browsers/OSes with a system
   dark theme never auto-invert or re-colour our brand palette; the design
   is deliberate and already tuned for contrast in every section ── */
:root { color-scheme: only light }

/* ── Variables ── */
:root {
  --N:  #0D1B2A;   /* deep navy */
  --N2: #152336;   /* navy mid  */
  --N3: #1E3349;   /* navy soft */
--G:  #C0392B;   /* primary red */
--G2: #E74C3C;   /* lighter red */
  --R:  #C0392B;   /* red       */
  --R2: #E74C3C;   /* red lt    */
  --W:  #FFFFFF;   /* white */
  --WW: #FFFFFF;
  --BL: rgba(13,27,42,.1);        /* border light bg */
  --BD: rgba(247,245,242,.09);    /* border dark bg  */
  --TM: #9aa6b2;                  /* text muted dark: solid, not translucent */
  --FD: 'Century Gothic', CenturyGothic, 'Jost', sans-serif;
  --FB: 'Century Gothic', CenturyGothic, 'Jost', sans-serif;
  --TS: .25s ease;
  --TF: .5s cubic-bezier(.4,0,.2,1);
  --SH: 0 8px 32px rgba(13,27,42,.12);
  --SL: 0 20px 60px rgba(13,27,42,.2);
}

/* ── Accessibility: skip-to-content link (WCAG 2.4.1) ── */
.skip-link {
  position:absolute; top:-100px; left:16px; z-index:10000;
  background:var(--WW); color:var(--N); font-family:var(--FB);
  font-size:.85rem; font-weight:700; padding:12px 20px; border-radius:6px;
  box-shadow:var(--SL); transition:top .2s ease;
}
.skip-link:focus { top:16px }

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:var(--FB); background:var(--W); color:var(--N); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased }
img  { display:block; max-width:100%; height:auto; -webkit-user-drag:none }
a    { text-decoration:none; color:inherit; touch-action:manipulation }
ul,ol { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; touch-action:manipulation }
input,textarea,select { font-family:inherit }

/* ── Print / security ── */
body { -webkit-user-select:none; user-select:none }
input,textarea { -webkit-user-select:text!important; user-select:text!important }
@media print { body { display:none!important } }

/* ── Type ── */
h1,h2 { font-family:var(--FD); font-weight:700; line-height:1.1; letter-spacing:-.01em; text-wrap:balance }
h1  { font-size:clamp(2.8rem,5.5vw,4.8rem) }
h2  { font-size:clamp(2rem,4vw,3.2rem) }
h3  { font-family:var(--FB); font-size:1rem; font-weight:700; line-height:1.3 }
h4  { font-family:var(--FB); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
p   { font-size:.94rem; line-height:1.8; color:#141414 }

/* ── Layout ── */
.container  { width:100%; max-width:1200px; margin:0 auto; padding:0 40px }
.pad        { padding:64px 0 }

/* ── Section label ── */
.sec-label { display:inline-flex; align-items:center; margin-bottom:14px }
.sec-label-text  { font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#64748b }


/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--FB); font-weight:700; font-size:.84rem; letter-spacing:.02em; padding:13px 28px; border-radius:6px; transition:all var(--TS); cursor:pointer; white-space:nowrap }
.btn svg { width:15px; height:15px; flex-shrink:0; transition:transform var(--TS) }
.btn:hover svg { transform:translateX(4px) }
.btn-lg { padding:15px 34px; font-size:.88rem }
.btn-gold { background:var(--G); color:var(--WW) }
.btn-gold:hover { background:var(--G2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(192,57,43,.4) }
.btn-outline { background:transparent; color:var(--W); border:1.5px solid rgba(247,245,242,.3) }
.btn-outline:hover { border-color:var(--W); background:rgba(247,245,242,.08) }
.no-select { user-select:none; -webkit-user-select:none }

/* ── Reveal animations ── */
.rv,.rv-l,.rv-r { opacity:0; transition:opacity .65s ease, transform .65s ease }
.rv { transform:translateY(30px) }
.rv-l { transform:translateX(-36px) }
.rv-r { transform:translateX(36px) }
.rv.visible,.rv-l.visible,.rv-r.visible { opacity:1; transform:none }
.d1{transition-delay:.05s}.d2{transition-delay:.13s}.d3{transition-delay:.21s}.d4{transition-delay:.29s}.d5{transition-delay:.37s}

/* ================================================================
   HEADER
================================================================ */
/* Unscrolled, #header sits directly over the hero photo with no
   background of its own, so its contrast used to depend entirely on
   how dark the hero-veil made the photo underneath. Now that the hero
   is deliberately brighter, that's no longer a safe assumption: a
   light patch of sky or a pale product behind the logo could wash the
   nav out. Giving the header its own permanent top-down scrim
   decouples navbar legibility from whatever the hero photo happens to
   be doing, without needing the full solid/blurred look reserved for
   the scrolled state. */
#header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background var(--TF), border-color var(--TF);
  border-bottom:1px solid transparent;
  background:linear-gradient(to bottom, rgba(13,27,42,.55) 0%, rgba(13,27,42,.28) 70%, transparent 100%);
}
#header.scrolled {
  background:rgba(13,27,42,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--BD);
}
#header .container { padding:0 40px }
.nav { display:flex; align-items:center; height:70px; gap:0 }
.nav-logo { display:flex; align-items:center; margin-right:auto; flex-shrink:0 }
.nav-logo-img { height:42px; width:auto; display:block; filter:drop-shadow(0 1px 6px rgba(13,27,42,.6)) }
.nav-links { display:flex; gap:28px; margin-right:24px }
.nav-links a { font-size:.82rem; font-weight:500; color:var(--WW); transition:color var(--TS); text-shadow:0 1px 6px rgba(13,27,42,.6) }
.nav-links a:hover { color:var(--W) }
.nav-right { display:flex; align-items:center; gap:12px }

/* Google Translate widget: strip Google's default chrome, keep just the dropdown */
.goog-te-banner-frame { display:none !important }
body { top:0 !important }
.lang-switch { display:flex; align-items:center }
.lang-switch .goog-te-gadget { font-family:inherit !important; font-size:0 !important; color:transparent !important }
.lang-switch .goog-te-gadget > span,
.lang-switch .goog-logo-link,
.lang-switch .goog-te-gadget-icon { display:none !important }
.lang-switch .goog-te-combo {
  font-family:var(--FB) !important; font-size:.78rem !important; font-weight:600;
  color:var(--WW); background:transparent; border:1.5px solid rgba(247,245,242,.3);
  border-radius:6px; padding:5px 8px; cursor:pointer;
}
.lang-switch .goog-te-combo:hover { border-color:var(--W) }
/* Google injects this on <html> when a translation is active; keep it from
   nudging the fixed header down */
.skiptranslate iframe { display:none !important }
.nav-phone-link { display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; color:var(--WW); transition:color var(--TS); text-shadow:0 1px 6px rgba(13,27,42,.6) }
.nav-phone-link svg { width:13px; height:13px }
.nav-phone-link:hover { color:var(--W) }
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; padding:12px; width:44px; height:44px; margin-left:14px; box-sizing:border-box }
.hamburger span { display:block; height:2px; background:var(--W); border-radius:2px; transition:all var(--TF); box-shadow:0 1px 4px rgba(13,27,42,.6) }
.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-drawer {
  display:flex; flex-direction:column;
  position:fixed; inset:0; z-index:99;
  background:var(--N); padding:90px 40px 48px;
  transform:translateX(100%); transition:transform var(--TF);
  pointer-events:none;
}
.mobile-drawer.open { transform:translateX(0); pointer-events:all }
.mobile-drawer a {
  font-family:var(--FD); font-size:2.2rem; font-weight:700;
  color:var(--WW); padding:14px 0;
  border-bottom:1px solid var(--BD); transition:color var(--TS);
}
.mobile-drawer a:hover { color:var(--G) }

/* ================================================================
   HERO
================================================================ */
#hero {
  position:relative; min-height:78vh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--N);
}
.hero-slides { position:absolute; inset:0; z-index:0 }
.hs {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 2s ease;
  filter:brightness(.92) saturate(.95);
}
.hs.active { opacity:1 }
.hero-veil {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(108deg, rgba(13,27,42,.72) 0%, rgba(13,27,42,.38) 40%, rgba(13,27,42,.08) 100%),
    linear-gradient(to top, rgba(13,27,42,.48) 0%, transparent 45%);
}
#hero .container { position:relative; z-index:2; padding-top:70px }
.hero-body { max-width:680px }
.hero-h1 { color:var(--W); margin-bottom:0; font-size:clamp(3.2rem,6.6vw,5.8rem); font-weight:800; text-shadow:0 2px 18px rgba(13,27,42,.55) }
.hero-h1 em { color:var(--G); font-style:italic }
.hero-tagline { font-family:var(--FD); font-size:clamp(1rem,1.8vw,1.2rem); font-style:italic; color:var(--WW); margin:14px 0 0; text-shadow:0 1px 10px rgba(13,27,42,.5) }
.hero-sub { font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--WW); margin:20px 0 38px; line-height:1.8; text-shadow:0 1px 8px rgba(13,27,42,.5) }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap }
.cta-short { display:none }

/* ================================================================
   SERVICE BAR
================================================================ */

.service-bar {
  background:var(--G);
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 0;
  position:relative;
  z-index:10;

  display:flex;
  justify-content:flex-start;

  scrollbar-width:none;
}

.service-bar::-webkit-scrollbar{
  display:none;
}

.service-bar-inner {
  display:flex;
  gap:24px;
  padding:0 20px;
  align-items:center;
  width:max-content;
  white-space:nowrap;
    animation:service-scroll 38s linear infinite;
  scroll-snap-type:x mandatory;
}
.service-bar:hover .service-bar-inner{
  animation-play-state:paused;
}
@keyframes service-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.service-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:7px 22px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--WW);
  border-right:1px solid rgba(255,255,255,.22);

  flex-shrink:0;
  scroll-snap-align:center;

  transition:background var(--TS);
}

.service-pill:last-child{
  border-right:none;
}

.service-pill svg{
  width:13px;
  height:13px;
  flex-shrink:0;
}

.service-pill:hover{
  background:rgba(255,255,255,.14);
}
/* ================================================================
   ABOUT · light bg, no photo, full-width
================================================================ */
#about { background:var(--W) }
.about-inner { max-width:none }
.about-inner h2 { margin:10px 0 20px; max-width:780px }
.about-inner .intro {
  font-size:1.05rem; line-height:1.85; max-width:640px;
  margin:0; color:#141414;
}

/* Intro paragraph + compliance badges side by side */
.about-top-row { display:flex; justify-content:space-between; align-items:flex-start; gap:48px; margin-bottom:44px }
.compliance-badges { display:flex; flex-direction:column; gap:10px; flex-shrink:0 }
.badge-pill {
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:999px;
  background:var(--WW); border:1.5px solid var(--BL);
  font-size:.76rem; font-weight:700; color:var(--N); white-space:nowrap;
  box-shadow:var(--SH);
  transition:border-color var(--TS), transform var(--TS);
}
.badge-pill:hover { border-color:var(--R); transform:translateY(-2px) }
.badge-pill svg {
  width:16px; height:16px; flex-shrink:0; color:var(--WW);
  background:var(--R); border-radius:50%; padding:3px; box-sizing:border-box;
}

/* Pillar cards: independent frosted-glass tiles over a soft gradient bed */
.pillars-wrap {
  background:
    radial-gradient(ellipse at top left, rgba(192,57,43,.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(192,57,43,.08), transparent 55%),
    var(--W);
  border-radius:20px; padding:32px; margin-bottom:44px;
}
.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.pillar {
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:14px; padding:26px 22px;
  box-shadow:0 8px 24px rgba(13,27,42,.06);
  transition:transform var(--TS), box-shadow var(--TS), background var(--TS);
}
.pillar:hover { transform:translateY(-4px); background:rgba(255,255,255,.75); box-shadow:var(--SH) }
.pillar h4 { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--R); margin-bottom:10px }
.pillar p  { font-size:.84rem; color:#141414; line-height:1.65; margin:0 }

/* ================================================================
   DARK SECTIONS (services, products, brands, contact)
================================================================ */
.sec-dark { background:linear-gradient(var(--N), var(--N)) }

.sec-head { text-align:center; max-width:600px; margin:0 auto 52px }
.sec-head h2 { color:var(--W); margin:10px 0 16px }
.sec-head p  { color:var(--WW) }
.sec-head .sec-label { display:flex; justify-content:center }

/* ── Services / Products shared card grid ── */
.svc-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--BD);
  border:1px solid var(--BD); border-radius:10px; overflow:hidden;
}
/* 6-card products layout: fills 2 even rows of 3, no centring needed */

.svc {
  background:
    radial-gradient(ellipse at top left, rgba(192,57,43,.16), transparent 60%),
    var(--N2);
  padding:32px 26px;
  display:flex; flex-direction:column; gap:13px;
  transition:background var(--TS); position:relative;
}
.svc::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--G); transform:scaleX(0); transition:transform var(--TS);
  transform-origin:left;
}
.svc:hover {
  background:
    radial-gradient(ellipse at top left, rgba(192,57,43,.26), transparent 60%),
    var(--N3);
}
.svc:hover::after { transform:scaleX(1) }
.svc-icon {
  width:40px; height:40px; border-radius:8px;
  background:var(--G); box-shadow:0 4px 14px rgba(192,57,43,.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--WW); flex-shrink:0;
}
.svc-icon svg { width:20px; height:20px }
.svc h3 { font-size:.97rem; color:var(--W); font-weight:700 }
.svc p  { font-size:.84rem; color:var(--WW); flex:1; line-height:1.7 }
.svc-features { display:flex; flex-direction:column; gap:8px }
.svc-features li { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--WW) }
.svc-features svg { width:13px; height:13px; color:var(--G2); flex-shrink:0 }
.svc-arrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.75rem; font-weight:700; letter-spacing:.05em;
  color:var(--G); margin-top:auto;
  transition:color var(--TS), gap var(--TS);
}
.svc-arrow svg { width:13px; height:13px; transition:transform var(--TS) }
.svc:hover .svc-arrow { color:var(--G2) }
.svc:hover .svc-arrow svg { transform:translateX(3px) }

/* ================================================================
   WHY US · light section
================================================================ */
#why { background:var(--W) }
.why-head { display:flex; align-items:center; gap:64px; margin-bottom:44px }
.why-head-text { max-width:620px }
.why-head h2 { margin:10px 0 18px }
.why-intro { font-size:.98rem; color:#141414; line-height:1.82; margin:0 }

/* Compact stats, sitting beside the intro to save vertical space */
.why-stats-inline { display:flex; flex-direction:column; gap:16px; flex-shrink:0 }
.wstat-inline {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:999px;
  background:var(--WW); border:1.5px solid var(--BL);
  box-shadow:var(--SH); width:fit-content;
  transition:border-color var(--TS), transform var(--TS);
}
.wstat-inline:hover { border-color:var(--R); transform:translateY(-2px) }
.wstat-inline-num { font-family:var(--FD); font-size:1.3rem; font-weight:800; color:var(--R); font-variant-numeric:tabular-nums }
.wstat-inline-label { font-size:.72rem; color:#64748b; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap }

/* Card grid: 4 reasons, 2x2 on desktop */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:44px }
.why-card {
  background:var(--WW); border:1px solid var(--BL); border-radius:14px;
  padding:28px 26px; transition:transform var(--TS), box-shadow var(--TS), border-color var(--TS);
}
.why-card:hover { transform:translateY(-4px); box-shadow:var(--SH); border-color:rgba(192,57,43,.3) }
.why-card h4 { text-transform:none; letter-spacing:0; font-size:.95rem; margin-bottom:8px; color:var(--N) }
.why-card p  { font-size:.82rem; color:#141414; margin:0; line-height:1.7 }

/* background-image (not just background-color) on top of the flat navy:
   some Android browsers' system-wide "force dark" re-colours pages using
   a heuristic that only touches plain background-color surfaces and
   leaves anything with a background-image alone, on the assumption it
   was deliberately designed. color-scheme:only light (in <head>) is the
   standards-compliant opt-out and works in Chrome/Samsung Internet/most
   modern browsers; this is a second line of defence for engines that
   don't fully honour it. The gradient is the same navy at both stops,
   so nothing changes visually. */
.brands-strip {
  background:linear-gradient(var(--N), var(--N));
  padding:44px 0; margin-top:44px;
}
.mq-eyebrow-wrap { display:flex; justify-content:center; margin-bottom:24px }
.brands-strip .mq-eyebrow-wrap { margin-bottom:24px }

@media (max-width:768px) {
  .why-head { flex-direction:column; align-items:flex-start; gap:24px }
}
@media (max-width:640px) {
  .why-grid { grid-template-columns:1fr }
  .why-stats-inline { flex-direction:row; flex-wrap:wrap; gap:16px 24px }
}

/* ================================================================
   MARQUEE · clients and brands
================================================================ */

.mq-outer {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 9%,black 91%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 9%,black 91%,transparent 100%);
}
.mq-track {
  display:flex; gap:14px; align-items:center;
  width:max-content;
  animation:mq-ltr 38s linear infinite;
}
.mq-track:hover { animation-play-state:paused }
.mq-track.mq-rtl { animation:mq-rtl 36s linear infinite }
.mq-track.mq-rtl:hover { animation-play-state:paused }
@keyframes mq-ltr { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes mq-rtl { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ── Client tiles (light bg) ── */
.mq-item {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:180px; height:90px;
  background:var(--WW); border:1.5px solid var(--BL); border-radius:10px;
  padding:16px; transition:all var(--TS); overflow:hidden; position:relative;
}
.mq-item:hover { border-color:var(--R); transform:translateY(-2px); box-shadow:0 0 0 3px rgba(192,57,43,.15), 0 6px 22px rgba(192,57,43,.22) }
/* fallback text */
.mq-fb {
  display:none; align-items:center; justify-content:center;
  width:100%; height:100%; text-align:center;
  font-family:var(--FD); font-size:1rem; font-weight:700; color:var(--N); letter-spacing:.02em;
}
.mq-fb.show { display:flex }

/* ── Brand tiles: solid red card, white inverted logo on top ── */
.mq-brand {
  width:158px;
  height:82px;
  background:linear-gradient(var(--G), var(--G));
  border:1px solid var(--G);
  border-radius:10px;
  box-shadow:0 4px 14px rgba(192,57,43,.25);
  transition:background var(--TS), transform var(--TS), box-shadow var(--TS);
}

.mq-brand:hover {
  border-color:var(--G2);
  background:linear-gradient(var(--G2), var(--G2));
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(192,57,43,.4);
}
.mq-brand img {
  max-width:100px;
  max-height:38px;
  filter:brightness(0) invert(1);
}
.mq-brand:hover img { filter:brightness(0) invert(1) }
.mq-brand .mq-fb { color:var(--WW); font-size:.88rem }


/* ================================================================
   CONTACT · dark section, no colour clash
================================================================ */
#contact { background:var(--N) }
.contact-top { text-align:center; margin-bottom:56px }
.contact-top .sec-label { justify-content:center }
.contact-top h2   { color:var(--W); margin:10px auto 14px; max-width:640px }
.contact-top p    { color:var(--WW); max-width:500px; margin:0 auto; font-size:.95rem }
.contact-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:stretch }
.contact-grid > .rv-l, .contact-grid > .rv-r { display:flex; min-width:0 }

/* info card */
.contact-card {
  background:rgba(247,245,242,.05); border:1px solid var(--BD);
  border-radius:12px; padding:34px;
  display:flex; flex-direction:column; width:100%;
}
.contact-card-title {
  font-family:var(--FD); font-size:1.2rem; color:var(--G);
  margin-bottom:26px; display:block;
}
.c-item-list { display:flex; flex-direction:column; flex:1; justify-content:space-between }
.c-item { display:flex; gap:14px; align-items:flex-start }
.c-item-icon {
  width:34px; height:34px; flex-shrink:0; border-radius:8px;
  background:var(--G); box-shadow:0 3px 10px rgba(192,57,43,.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--WW); margin-top:1px;
}
.c-item-icon svg { width:15px; height:15px }
.c-item h4 { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--G); margin-bottom:5px }
.c-item p  { font-size:.88rem; color:var(--WW); line-height:1.7; margin:0 }
.c-item a  { font-size:.88rem; color:var(--WW); line-height:1.9; display:block; transition:color var(--TS) }
.c-item a:hover { color:var(--G2) }
.c-tag {
  display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--G); border:1px solid var(--G); padding:1px 5px; border-radius:3px; margin-left:5px; vertical-align:middle;
}

/* form card */
.form-card {
  background:rgba(247,245,242,.06); border:1px solid var(--BD);
  border-radius:12px; padding:34px; width:100%;
}
.form-subtitle { color:var(--WW); font-size:.84rem; margin-bottom:26px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:16px }
.fg label { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--WW) }
.req   { color:var(--R2) }
.req-note { text-transform:none; letter-spacing:0; font-weight:400; color:#9aa6b2; font-size:.72rem }
.fc {
  background:rgba(247,245,242,.07); border:1.5px solid var(--BD);
  border-radius:6px; padding:11px 14px; color:var(--W); font-size:.88rem;
  outline:none; transition:border-color var(--TS); width:100%;
}
.fc::placeholder { color:#8b98a5 }
.fc:focus { border-color:var(--G) }
textarea.fc { min-height:112px; resize:vertical }
.fe { font-size:.7rem; color:var(--R2); min-height:14px }
.honeypot { display:none; position:absolute; opacity:0 }
.form-msg { margin-top:14px; font-size:.85rem; text-align:center; min-height:16px }

/* pill selector */
.svc-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:5px }
.svc-pill {
  padding:6px 13px; border-radius:999px;
  border:1.5px solid var(--BD); background:transparent;
  color:var(--WW); font-size:.75rem; font-weight:500;
  cursor:pointer; transition:all var(--TS);
  font-family:var(--FB);
}
.svc-pill:hover { border-color:var(--G); color:var(--G) }
.svc-pill.active { background:var(--G); border-color:var(--G); color:var(--WW); font-weight:700 }

/* ================================================================
   QUOTE MODAL
================================================================ */
.qm-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(13,27,42,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity var(--TS);
}
.qm-overlay.open { opacity:1; pointer-events:all }
.qm-panel {
  background:var(--N); border:1px solid var(--BD); border-radius:14px;
  width:100%; max-width:600px; max-height:88vh; overflow-y:auto;
  padding:38px 34px; position:relative;
  transform:translateY(24px) scale(.98); transition:transform var(--TS);
  box-shadow:var(--SL);
}
.qm-overlay.open .qm-panel { transform:translateY(0) scale(1) }
.qm-close {
  position:absolute; top:18px; right:18px; width:34px; height:34px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--WW); background:rgba(247,245,242,.06); transition:all var(--TS);
}
.qm-close:hover { color:var(--W); background:rgba(247,245,242,.14) }
.qm-close svg { width:16px; height:16px }
#qmTitle { font-family:var(--FD); font-size:1.5rem; color:var(--W); margin-bottom:6px; padding-right:30px }
.qm-sub { color:var(--WW); font-size:.85rem; line-height:1.6; margin-bottom:26px }
@media (max-width:640px) {
  .qm-panel { padding:28px 22px }
  .qm-panel .form-row { grid-template-columns:1fr }
}

/* ================================================================
   FOOTER
================================================================ */
footer {
  background:linear-gradient(var(--N2), var(--N2)); border-top:1px solid var(--BD);
  padding:72px 0 0;
}
.footer-top {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:52px; border-bottom:1px solid var(--BD);
}
.f-logo-wrap { display:flex; align-items:center; margin-bottom:13px }
.f-logo-img { height:48px; width:auto; display:block }
.f-brand > p { font-size:.83rem; color:var(--WW); line-height:1.8; margin-bottom:18px }
.f-socials { display:flex; gap:9px }
.f-social {
  width:34px; height:34px; border-radius:6px;
  background:rgba(247,245,242,.06); border:1px solid var(--BD);
  display:flex; align-items:center; justify-content:center;
  color:var(--WW); transition:all var(--TS);
}
.f-social svg { width:14px; height:14px }
.f-social:hover { background:var(--G); border-color:var(--G); color:var(--WW) }
.f-col h5 { font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--G); margin-bottom:17px }
.f-col li { margin-bottom:9px }
.f-col a {
  font-size:.83rem;
  color:var(--WW);
  transition:color var(--TS)
}
.f-col a:hover { color:var(--G) }
.f-contact-list { display:flex; flex-direction:column; gap:11px }
.f-contact-item { display:flex; gap:9px; align-items:flex-start }
.f-contact-item svg { width:13px; height:13px; color:var(--G); flex-shrink:0; margin-top:3px }
.f-contact-item span { font-size:.8rem; color:var(--WW); line-height:1.65 }
.footer-bottom {
  padding:20px 0;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.footer-bottom p { font-size:.74rem; color:#9aa6b2 }
.f-designed { margin-left:auto }
.f-designed a { color:var(--G); transition:color var(--TS) }
.f-designed a:hover { color:var(--G2) }
.f-bottom-links { display:flex; gap:16px }
.f-bottom-links a { font-size:.74rem; color:#9aa6b2; transition:color var(--TS) }
.f-bottom-links a:hover { color:var(--W) }

/* ================================================================
   CHAT WIDGET
================================================================ */
.chat-w { position:fixed; bottom:24px; right:24px; z-index:200 }
.chat-box {
  position:absolute; bottom:66px; right:0; width:296px;
  background:var(--N); border:1px solid var(--BD); border-radius:16px;
  box-shadow:0 20px 64px rgba(0,0,0,.55); overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.97); pointer-events:none;
  transition:all var(--TF);
}
.chat-box.open { opacity:1; transform:none; pointer-events:all }
.chat-box-head {
  display:flex; align-items:center; gap:11px;
  padding:15px 17px; background:var(--N2); border-bottom:1px solid var(--BD);
}
.chat-av {
  width:33px; height:33px; border-radius:50%; background:var(--G);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-av-img { width:17px; height:17px; display:block }
.chat-av-info h4   { font-size:.84rem; color:var(--W); margin:0 }
.chat-av-info span { font-size:.68rem; color:var(--TM) }
.chat-box-body { padding:15px }
.chat-msg {
  background:rgba(247,245,242,.07); border:1px solid var(--BD);
  border-radius:10px 10px 10px 2px;
  padding:10px 13px; font-size:.85rem; color:var(--W);
  line-height:1.5; margin-bottom:12px;
}
.chat-opts { display:flex; flex-direction:column; gap:6px }
.chat-opt {
  display:flex; align-items:center; gap:9px;
  padding:10px 13px; border-radius:8px;
  background:rgba(247,245,242,.06); border:1px solid var(--BD);
  color:var(--W); font-size:.82rem; font-weight:500; cursor:pointer;
  transition:all var(--TS); text-align:left;
}
.chat-opt svg { width:15px; height:15px; flex-shrink:0 }
.chat-opt:hover { border-color:var(--G); color:var(--G) }
.chat-opt.wa:hover { border-color:#25D366; color:#25D366 }
.chat-btn {
  width:52px; height:52px; border-radius:50%;
  background:var(--G); color:var(--WW);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(192,57,43,.45); cursor:pointer;
  position:relative; transition:transform var(--TS);
}
.chat-btn:hover { transform:scale(1.08) }
.chat-btn svg { width:22px; height:22px; position:absolute; transition:all var(--TF) }
.chat-open-ic  { opacity:1; transform:scale(1) }
.chat-close-ic { opacity:0; transform:rotate(-90deg) scale(.7) }
.chat-btn.active .chat-open-ic  { opacity:0; transform:rotate(90deg) scale(.7) }
.chat-btn.active .chat-close-ic { opacity:1; transform:none }
.chat-notif {
  position:absolute; top:0; right:0; width:17px; height:17px;
  border-radius:50%; background:var(--R); color:#fff;
  font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--N);
}

/* ── Back to top ── */
#stb {
  position:fixed; bottom:24px; left:24px; z-index:200;
  width:40px; height:40px; border-radius:50%;
  background:rgba(13,27,42,.82); border:1px solid var(--BD);
  color:var(--WW);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; cursor:pointer;
  transition:all var(--TS); backdrop-filter:blur(8px);
}
#stb svg { width:18px; height:18px }
#stb.show { opacity:1; pointer-events:all }
#stb:hover { border-color:var(--G); color:var(--G) }

/* ── Cookie ── */
.cookie {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  background:var(--N2); border-top:1px solid var(--BD);
  transform:translateY(100%); transition:transform var(--TF);
}
.cookie.show { transform:none }
.cookie-inner {
  max-width:1200px; margin:0 auto; padding:14px 40px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cookie p { font-size:.78rem; color:var(--TM); margin:0 }
.cookie a { color:var(--G) }
.cookie-ok {
  background:var(--G); color:var(--WW); font-weight:700; font-size:.76rem;
  padding:8px 20px; border-radius:6px; cursor:pointer;
  transition:background var(--TS); margin-left:auto; flex-shrink:0;
  font-family:var(--FB);
}
.cookie-ok:hover { background:var(--G2) }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:1100px) {
  .pillars      { grid-template-columns:repeat(2,1fr) }
  .about-top-row { flex-direction:column }
  .compliance-badges { flex-direction:row; flex-wrap:wrap }
  .svc-grid     { grid-template-columns:repeat(2,1fr) }
  .contact-grid { grid-template-columns:1fr; gap:28px }
  /* 2 columns, but re-paired so each row holds two similarly-tall
     blocks instead of source order (brand next to the 8-item Navigate
     list). Grid rows size to their tallest cell, so pairing a short
     block with a long list stretches the row and leaves a dead gap
     under the short one. Pairing brand+Contact (both short) and
     Navigate+Services (both 8 items) keeps both rows close in height. */
  .footer-top   {
    grid-template-columns:1fr 1fr; gap:32px 24px;
    align-items:start;
  }
  .footer-top > .f-brand      { order:1 }
  .footer-top > .f-col:nth-child(4) { order:2 } /* Contact */
  .footer-top > .f-col:nth-child(2) { order:3 } /* Navigate */
  .footer-top > .f-col:nth-child(3) { order:4 } /* Services */
}
@media (max-width:768px) {
  .pad { padding:64px 0 }
  .container { padding:0 20px }
  .nav-links,.nav-right { display:none }
  .hamburger { display:flex }
  /* On mobile the hero headline wraps across the full width instead of
     sitting in a left-hand column, so the desktop veil's left-to-right
     fade (dark for text, light to show the photo) no longer lines up
     with where the text actually is. Use a flatter top-to-bottom veil
     instead so contrast holds everywhere the text wraps. */
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(13,27,42,.6) 0%, rgba(13,27,42,.32) 40%, rgba(13,27,42,.55) 100%);
  }
  .mobile-drawer { display:flex }
  .svc-grid { grid-template-columns:1fr }
  .pillars  { grid-template-columns:1fr }
  /* Brand and Contact stay full-width; Navigate and Services share a
     row of their own so they only affect each other's height, not the
     whole footer. Both are 8-item lists, so pairing them is the one
     combination that doesn't create the dead-space row-height bug the
     ≤1100px tier had to work around with `order`. */
  .footer-top {
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "brand brand"
      "nav services"
      "contact contact";
    gap:32px 20px;
  }
  .footer-top > .f-brand             { grid-area:brand; order:initial }
  .footer-top > .f-col:nth-child(2)  { grid-area:nav }
  .footer-top > .f-col:nth-child(3)  { grid-area:services }
  .footer-top > .f-col:nth-child(4)  { grid-area:contact; order:initial }
  .f-designed { margin-left:0 }
  .form-row { grid-template-columns:1fr }
  .contact-card,.form-card { padding:22px }
  /* 16px minimum prevents iOS Safari from force-zooming the page on input focus */
  .fc, select.fc { font-size:16px }
  .mq-brand img{ opacity:1; }
  .service-bar{
    overflow-x:auto;
    }
  .service-bar-inner{
    display:flex;
    gap:18px;
    padding:0 16px;
    width:max-content;
    }
    .service-bar:hover .service-bar-inner{
        animation-play-state:paused;
        }
    
  .service-pill{
    flex-shrink:0;
    }
    @keyframes service-scroll{
        from{transform:translateX(0)}
        to{transform:translateX(-50%)}
        }
}

@media (max-width:480px) {
  .chat-box    { width:calc(100vw - 48px); right:-24px }
  .mq-item     { width:148px; height:76px }
  .mq-brand    { width:132px; height:68px }
  .tab-btn     { padding:10px 16px; font-size:.78rem; gap:6px; min-height:44px }
  .tab-btn svg { width:14px; height:14px }
  /* Hero CTAs: swap to the shorter label and shrink enough that both
     buttons sit on one line instead of stacking. */
  .cta-full  { display:none }
  .cta-short { display:inline }
  .hero-cta {
    flex-wrap:nowrap; gap:8px;
  }
  .hero-cta .btn {
    flex:1 1 0; min-width:0; justify-content:center;
    padding:12px 10px; font-size:.72rem; gap:5px;
  }
  .hero-cta .btn svg { width:13px; height:13px; flex-shrink:0 }
}

/* alias block removed · rules consolidated above */

/* ================================================================
   TABS · Services / Products combined section
================================================================ */
/* Wrapper: carries the margin the bar used to have, and hosts the
   edge-fade + swipe-hint that tell touch users the pill row scrolls
   sideways instead of the instinctive up/down. */
.tab-bar-wrap { position:relative; margin-bottom:40px }
.tab-bar {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(247,245,242,.07);
  border:1px solid rgba(247,245,242,.12);
  border-radius:12px; padding:5px;
  max-width:100%; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tab-bar::-webkit-scrollbar { display:none }
/* Right-edge fade: only shown while there's more to scroll to. Hidden
   the instant the bar fits fully or the user has scrolled to the end. */
.tab-bar-wrap::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:44px;
  background:linear-gradient(to right, transparent, var(--N) 85%);
  border-radius:0 12px 12px 0; pointer-events:none;
  opacity:0; transition:opacity .25s ease;
}
.tab-bar-wrap.is-scrollable:not(.at-end)::after { opacity:1 }
/* Animated chevron: nudges right to signal "swipe here", only while
   scrollable and still at the start; disappears on first scroll or
   after a few seconds so it never feels stuck or nagging. */
.tab-bar-hint {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--G); color:var(--WW);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; z-index:2;
  animation:tab-hint-nudge 1.4s ease-in-out infinite;
  transition:opacity .3s ease;
}
.tab-bar-hint svg { width:14px; height:14px }
.tab-bar-wrap.is-scrollable.show-hint .tab-bar-hint { opacity:1 }
@keyframes tab-hint-nudge {
  0%, 100% { transform:translateY(-50%) translateX(0) }
  50%      { transform:translateY(-50%) translateX(4px) }
}
/* Explicit text label under the bar. An icon alone is easy to miss or
   mistake for decoration; a word removes any ambiguity about whether
   the row scrolls. Stays up until the user actually scrolls the bar
   (no auto-hide timer) or clicks a tab, and is only shown at all if
   the bar is genuinely scrollable, since it's stale advice otherwise. */
.tab-bar-swipe-label {
  display:none; align-items:center; gap:6px;
  font-family:var(--FB); font-size:.72rem; font-weight:600;
  color:var(--G2); margin-top:9px; letter-spacing:.02em;
  opacity:0; transition:opacity .3s ease;
}
.tab-bar-swipe-label svg {
  width:14px; height:14px;
  animation:tab-hint-nudge 1.2s ease-in-out infinite;
}
.tab-bar-wrap.is-scrollable .tab-bar-swipe-label { display:inline-flex }
.tab-bar-wrap.is-scrollable.show-hint .tab-bar-swipe-label { opacity:1 }
@media (min-width:769px) {
  .tab-bar-wrap::after, .tab-bar-hint, .tab-bar-swipe-label { display:none }
}
.tab-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 26px; border-radius:8px;
  font-family:var(--FB); font-size:.86rem; font-weight:600;
  color:#c3cbd3; cursor:pointer;
  transition:all .28s ease; border:none; background:transparent;
  white-space:nowrap; line-height:1;
}
.tab-btn svg { width:16px; height:16px; flex-shrink:0; display:block }
.tab-btn:hover { color:var(--WW) }
.tab-btn.active {
  background:var(--G); color:var(--WW);
  box-shadow:0 4px 18px rgba(192,57,43,.35);
}
.tab-btn.active svg { opacity:1 }
.tab-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; border-radius:999px;
  font-size:.64rem; font-weight:800; padding:0 5px; line-height:1;
  background:rgba(247,245,242,.1); color:#c3cbd3;
  transition:all .28s ease;
}
.tab-btn.active .tab-count {
  background:rgba(13,27,42,.16); color:var(--N);
}

/* panel visibility */
.tab-panel {
  display:none;
  animation:tab-in .32s ease forwards;
}
.tab-panel.active { display:block }

@keyframes tab-in {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ================================================================
   GALLERY TAB · filter bar, grid, lightbox
================================================================ */
.gallery-filter {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:28px;
}
.filter-btn {
  padding:12px 20px; border-radius:999px; min-height:44px;
  font-family:var(--FB); font-size:.8rem; font-weight:600;
  color:#c3cbd3;
  background:rgba(247,245,242,.06);
  border:1px solid rgba(247,245,242,.14);
  cursor:pointer; transition:all .25s ease; white-space:nowrap;
}
.filter-btn:hover { color:var(--WW); border-color:rgba(247,245,242,.3) }
.filter-btn.active {
  background:var(--R); border-color:var(--R); color:var(--WW);
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.gallery-item {
  position:relative; overflow:hidden; border-radius:12px;
  aspect-ratio:4/3; cursor:pointer;
  border:1px solid rgba(247,245,242,.1);
}
.gallery-item img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.gallery-item:hover img { transform:scale(1.08) }
.gallery-overlay {
  position:absolute; inset:auto 0 0 0;
  padding:12px 14px 10px;
  background:linear-gradient(to top, rgba(13,27,42,.88), transparent);
  color:var(--WW); font-family:var(--FB); font-size:.76rem; font-weight:600;
  opacity:0; transform:translateY(6px);
  transition:all .3s ease;
}
.gallery-item:hover .gallery-overlay { opacity:1; transform:translateY(0) }
.gallery-item.is-hidden { display:none }

.lightbox-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(13,27,42,.96);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox-overlay.active { display:flex }
.lightbox-figure { max-width:min(90vw, 1100px); max-height:88vh; text-align:center }
.lightbox-img {
  max-width:100%; max-height:78vh; display:block; margin:0 auto;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-caption {
  color:var(--WW); font-family:var(--FB); font-size:.86rem;
  margin-top:16px;
}
.lightbox-close {
  position:absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:999px;
  background:rgba(247,245,242,.08); border:1px solid rgba(247,245,242,.18);
  color:var(--WW); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s ease;
}
.lightbox-close:hover { background:var(--R); border-color:var(--R) }
.lightbox-close svg { width:18px; height:18px }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  background:rgba(247,245,242,.08); border:1px solid rgba(247,245,242,.18);
  color:var(--WW); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s ease;
}
.lightbox-nav:hover { background:var(--R); border-color:var(--R) }
.lightbox-nav svg { width:22px; height:22px }
.lightbox-prev { left:24px }
.lightbox-next { right:24px }

@media (max-width:900px) {
  .gallery-grid { grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:640px) {
  .gallery-grid { grid-template-columns:repeat(2, 1fr); gap:10px }
  .lightbox-overlay { padding:16px }
  .lightbox-nav { width:44px; height:44px }
  .lightbox-nav svg { width:18px; height:18px }
  .lightbox-prev { left:8px }
  .lightbox-next { right:8px }
  .lightbox-close { top:12px; right:12px; width:44px; height:44px }
}


/* ══════════════════════════════════════════════════════════════
   NAV DROPDOWN · "Why Us" mega-link
   Desktop: hover/focus reveals panel. Mobile: handled by JS accordion.
══════════════════════════════════════════════════════════════ */
.nav-dropdown {
  position: relative;
}
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--WW);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--FB);
  transition: color .25s ease;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(13,27,42,.6);
}
.nav-drop-btn:hover,
.nav-dropdown.open .nav-drop-btn {
  color: var(--W);
  background: transparent;
}
.nav-drop-arrow {
  width: 13px; height: 13px; flex-shrink: 0;
  transition: transform .25s ease;
}
.nav-dropdown.open .nav-drop-arrow { transform: rotate(180deg) }

/* Panel */
.nav-drop-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 260px;
  background: var(--N);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.nav-dropdown.open .nav-drop-panel,
.nav-dropdown:focus-within .nav-drop-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Panel items */
.nav-drop-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: rgba(255,255,255,.75);
  transition: background .18s ease, color .18s ease;
  text-decoration: none;
}
.nav-drop-panel a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.ndp-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--G);
  display: flex; align-items: center; justify-content: center;
  color: var(--WW);
  transition: background .18s ease;
}
.nav-drop-panel a:hover .ndp-icon {
  background: var(--G2);
}
.ndp-icon svg { width: 16px; height: 16px }
.ndp-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2 }
.ndp-text strong { font-size: .85rem; font-weight: 600; color: #fff }
.ndp-text small  { font-size: .73rem; color: #c3cbd3 }

/* Divider between "Our Promise" and sub-items */
.nav-drop-panel a:nth-child(2) {
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 14px;
}

/* ── Mobile "Why Us" accordion group ── */
.mob-group { display: flex; flex-direction: column }
.mob-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--FD);
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(247,245,242,.65);
  padding: 14px 0;
  border-bottom: 1px solid rgba(247,245,242,.09);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: color .25s;
}
.mob-group-btn svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.mob-group-btn[aria-expanded="true"] { color: var(--G) }
.mob-group-btn[aria-expanded="true"] svg { transform: rotate(180deg) }
.mob-group-items {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.mob-group-items.open { max-height: 300px }
.mob-group-items a {
  font-family: var(--FD);
  font-size: 1.6rem;
  font-weight: 600;
  color: rgba(247,245,242,.45);
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid rgba(247,245,242,.06);
  transition: color .2s;
}
.mob-group-items a:hover { color: var(--G) }

/* ══════════════════════════════════════════════════════════════
   LOGO FALLBACK · 3-tier: local → thumbnail → SVG icon + name
   Applies to both .mq-item (clients) and .mq-brand (brands)
══════════════════════════════════════════════════════════════ */
/* The img inside a tile (tiers 1 and 2) */
.mq-item img.mq-logo,
.mq-brand img.mq-logo {
  max-width: 110px;
  max-height: 46px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Brands: brightness invert for dark bg */
.mq-brand img.mq-logo {
  max-width: 100px;
  max-height: 38px;
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
}

/* Tier 3: readable text, no icon (shown when both img tiers fail) */
.mq-text-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  text-align: center;
}
/* Clients: full org name is the headline, short code is a caption */
.mq-tf-full {
  font-family: var(--FB);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--N);
}
.mq-tf-code {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a97a6;
}
/* Brands: name only, larger, already recognisable as-is */
.mq-tf-name {
  font-family: var(--FD);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(247,245,242,.88);
}


/* ══════════════════════════════════════════════════════════════
   INNER PAGES · Privacy, Terms, 404
   Consistent with main design system
══════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.78rem; margin-bottom:20px; color:var(--WW) }
.breadcrumb a { color:var(--WW); text-decoration:none; transition:color .2s }
.breadcrumb a:hover { color:var(--G) }
.bc-sep { color:#9aa6b2; font-size:.7rem }

/* Inner page hero · dark navy, compact */
.inner-hero {
  background:var(--N);
  padding: 120px 0 56px;
}
.inner-hero-h1 {
  font-family:var(--FD);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:700;
  color:var(--W);
  line-height:1.1;
  margin-bottom:14px;
}
.inner-hero-sub {
  font-size:.95rem;
  color:var(--WW);
  max-width:560px;
  line-height:1.7;
}

/* Document container */
.inner-doc { max-width:760px }
.inner-meta { font-size:.82rem; color:#8a9aaa; margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--BL) }
.inner-meta strong { color:var(--N); font-weight:600 }

/* Numbered sections · same visual language as Why Us */
.inner-section {
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:18px 0;
  border-bottom:1px solid var(--BL);
}
.inner-section:first-of-type { border-top:1px solid var(--BL) }
.inner-sec-num {
  font-family:var(--FD);
  font-size:1.25rem;
  font-weight:700;
  color:var(--R);
  flex-shrink:0;
  min-width:28px;
  line-height:1.3;
  padding-top:2px;
}
.inner-sec-body h3 {
  font-family:var(--FB);
  font-size:.92rem;
  font-weight:700;
  color:var(--N);
  margin-bottom:6px;
  text-transform:none;
  letter-spacing:0;
  line-height:1.3;
}
.inner-sec-body p {
  font-size:.85rem;
  color:#141414;
  margin:0;
  line-height:1.7;
}
.inner-sec-body a {
  color:var(--R);
  text-decoration:none;
  font-weight:600;
  transition:color .2s;
}
.inner-sec-body a:hover { color:var(--N); text-decoration:underline }

/* ── 404 page ── */
.nf-page {
  min-height:100vh;
  background:var(--N);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 40px 80px;
  text-align:center;
}
.nf-inner { max-width:580px }
.nf-code {
  font-family:var(--FD);
  font-size:clamp(6rem,16vw,10rem);
  font-weight:800;
  color:var(--G);
  opacity:.18;
  line-height:1;
  margin-bottom:-10px;
}
.nf-h1 {
  font-family:var(--FD);
  font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--W);
  margin-bottom:14px;
}
.nf-sub {
  font-size:.9rem;
  color:var(--WW);
  line-height:1.75;
  margin-bottom:36px;
}
.nf-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:32px }
.nf-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:.78rem;
}
.nf-links span { color:#9aa6b2 }
.nf-links a { color:var(--WW); text-decoration:none; transition:color .2s }
.nf-links a:hover { color:var(--G) }

@media (max-width:600px) {
  .inner-hero { padding:100px 0 44px }
  .inner-section { gap:14px }
  .nf-page { padding:100px 24px 60px }
}

/* ================================================================
   LARGE SCREENS · big monitors, TVs
   Our clamp()-based headings top out around a 1200px viewport and
   never grow further, so on very wide displays (a TV viewed from a
   couch, an ultrawide monitor) the layout just sits centred with a
   lot of unused space either side and text reads proportionally
   small. This tier widens the content column and lets the display
   type scale a little further, without stretching body copy into
   uncomfortably long line lengths.
================================================================ */
@media (min-width:1600px) {
  .container { max-width:1400px }
  h1 { font-size:clamp(2.8rem,4vw,5.6rem) }
  h2 { font-size:clamp(2rem,3vw,3.6rem) }
  .hero-h1 { font-size:clamp(3.2rem,5vw,6.6rem) }
  .inner-hero-h1 { font-size:clamp(2rem,2.6vw,3.4rem) }
}