/* ─── TOKENS ─── */
:root {
  --navy:      #0B2545;
  --navy-d:    #061529;
  --navy-m:    #13376B;
  --blue:      #1565C0;
  --blue-l:    #2979D6;
  --blue-s:    rgba(21,101,192,.08);
  --white:     #FFFFFF;
  --off-white: #F5F7FA;
  --surface:   #EBF0F8;
  --text:      #1A2535;
  --dust:      #546E8A;
  --dust-l:    #8FA5BD;
  --rule:      #D0DCF0;
  --rule-d:    #B8CCE8;
  --ff-h: 'Manrope', system-ui, sans-serif;
  --ff-b: 'Plus Jakarta Sans', system-ui, sans-serif;
  --nav-h: 72px;
  --max: 1280px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-b);
  background: var(--off-white);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 5vw;
  transition: background .3s ease, box-shadow .3s ease, border-bottom .3s ease;
}
.nav--scrolled {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 16px rgba(11,37,69,.06);
  backdrop-filter: blur(12px);
}
.nav__logo img {
  height: 56px; width: auto;
  transition: filter .3s;
}
.nav__logo img.invert { filter: brightness(0) invert(1); }
.nav__links {
  display: flex; align-items: center; gap: 40px;
  margin-left: auto; list-style: none;
}
.nav__links a {
  font-family: var(--ff-h); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  transition: color .2s;
}
.nav--scrolled .nav__links a { color: var(--dust); }
.nav__links a:hover { color: var(--blue-l) !important; }
.nav__cta {
  margin-left: 36px;
  padding: 10px 24px;
  background: var(--blue);
  font-family: var(--ff-h); font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--white);
  transition: background .22s;
}
.nav__cta:hover { background: var(--blue-l); }
.nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; margin-left: 24px; }
.nav__burger span { width: 24px; height: 2px; background: var(--white); transition: background .3s; }
.nav--scrolled .nav__burger span { background: var(--text); }

/* ─── Nav dropdown ─── */
.nav__item { position: relative; }
.nav__item > a {
  display: flex; align-items: center; gap: 5px;
}
.nav__item > a .nav-chevron {
  width: 10px; height: 10px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s;
}
.nav__item--open > a .nav-chevron,
.nav__item:hover > a .nav-chevron { transform: rotate(180deg); }
/* Bridge pseudo-element covers the gap so hover isn't lost traversing to the dropdown */
.nav__item--has-dropdown::before {
  content: ''; position: absolute; top: 100%; left: -10px; right: -10px;
  height: 20px; z-index: 199;
}
.nav__dropdown {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 32px rgba(11,37,69,.12);
  list-style: none; padding: 8px 0;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  transform: translateX(-50%) translateY(6px);
  z-index: 200;
}
.nav__dropdown::before {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--rule);
  border-top: none;
}
.nav__dropdown::after {
  content: '';
  position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--white);
  border-top: none;
}
.nav__item:hover .nav__dropdown,
.nav__item--open .nav__dropdown {
  opacity: 1; visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown li a {
  display: block; padding: 10px 20px;
  font-family: var(--ff-h); font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--dust) !important; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav__dropdown li a:hover {
  background: var(--surface); color: var(--blue) !important;
}
.nav__dropdown li + li { border-top: 1px solid var(--rule); }

/* ─── HERO ─── */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(150deg, #061529 0%, #0B2545 50%, #091E40 100%);
}
.hero__mesh {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.hero__mesh svg { width: 100%; height: 100%; opacity: .10; }

/* ─── HERO SPLIT ─── */
.hero__layout {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 100vh;
  position: relative; z-index: 2;
  padding-top: var(--nav-h);
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 5vw 140px;
}
.hero__visual {
  position: relative; overflow: hidden;
  background: var(--navy-d);
}
.hero__visual svg,
.hero__visual img { width: 100%; height: 100%; display: block; object-fit: cover; }

.hero__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-h); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 24px;
}
.hero__label span { width: 40px; height: 1px; background: var(--blue-l); }
.hero__headline {
  font-family: var(--ff-h);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
  color: var(--white); text-wrap: balance;
  max-width: 700px; margin-bottom: 24px;
}
.hero__headline .hl { color: #62A8FF; }
.hero__sub {
  font-size: 1.05rem; line-height: 1.8;
  color: rgba(255,255,255,.55);
  max-width: 520px; margin-bottom: 48px;
}
.hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; background: var(--blue);
  font-family: var(--ff-h); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--white);
  transition: background .22s, transform .18s;
}
.btn-primary:hover { background: var(--blue-l); transform: translateY(-2px); }
.hero__ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border: 1px solid rgba(255,255,255,.28);
  font-family: var(--ff-h); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  transition: border-color .22s, color .22s;
}
.hero__ghost:hover { border-color: rgba(255,255,255,.7); color: var(--white); }
.hero__stats {
  display: flex; position: relative; z-index: 2;
  background: var(--white);
  border-top: 4px solid var(--blue);
  box-shadow: 0 -4px 32px rgba(11,37,69,.18);
}
.hero__stat {
  flex: 1; padding: 28px 36px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero__stat:last-child { border-right: none; }
.hero__stat-num {
  font-family: var(--ff-h); font-size: 2.1rem; font-weight: 800;
  color: var(--blue); line-height: 1;
  letter-spacing: -.03em;
}
.hero__stat-label {
  font-size: .72rem; color: var(--dust);
  letter-spacing: .05em; margin-top: 6px; font-weight: 600;
  text-transform: uppercase;
}

/* ─── SHARED ─── */
.section { padding: 96px 5vw; }
.section--navy { background: var(--navy); color: var(--white); }
.section--surface { background: var(--surface); }
.section--white { background: var(--white); }
.inner { max-width: var(--max); margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-h); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--blue); }
.eyebrow--light { color: #62A8FF; }
.eyebrow--light::before { background: #62A8FF; }
.section-title {
  font-family: var(--ff-h);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  text-wrap: balance; margin-bottom: 18px;
  color: var(--text);
}
.section--navy .section-title { color: var(--white); }
.section-sub {
  font-size: .98rem; line-height: 1.8; color: var(--dust);
  max-width: 580px;
}
.section--navy .section-sub { color: rgba(255,255,255,.5); }

/* ─── ABOUT: viewport-fit 2-col split ─── */
.about-vp {
  display: grid;
  grid-template-columns: 42fr 58fr;
  height: calc(100vh - var(--nav-h));
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: var(--white);
  margin: 0 5vw;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.about-img-hero {
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.about-img-hero svg,
.about-img-hero img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}
.mosaic-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px;
  background: rgba(6,21,41,.6);
  font-family: var(--ff-h); font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78);
  backdrop-filter: blur(4px);
}
.about-content-col {
  display: flex; flex-direction: column;
  padding: 44px 56px;
  border-left: 1px solid var(--rule);
  overflow: hidden;
}
.about-content-col > .eyebrow { margin-bottom: 12px; }
.about-content-col .section-title {
  font-size: 1.72rem; line-height: 1.28; margin-bottom: 14px;
}
.about-short-body {
  font-size: .88rem; line-height: 1.68; color: var(--dust); margin-bottom: 20px;
}
.about-short-body strong { color: var(--text); font-weight: 700; }
/* 2×2 card grid */
.hc-grid-2x2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
}
.hc-card-sm {
  padding: 22px 20px;
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px;
}
.hc-icon-wrap {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}
.hc-icon-wrap svg { width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.8; }
.hc-text { display: flex; flex-direction: column; gap: 5px; }
.hc-lbl {
  font-family: var(--ff-h); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.hc-val { font-size: .84rem; color: rgba(255,255,255,.88); line-height: 1.45; }
.hc-card--1 { background: var(--navy); }
.hc-card--2 { background: var(--blue); }
.hc-card--3 { background: var(--navy-m); }
.hc-card--4 { background: #07274C; }

/* ─── SERVICES ─── */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 56px;
}
.svc-card {
  cursor: pointer;
  background: var(--white); padding: 44px 36px;
  display: flex; flex-direction: column; gap: 18px;
  border-top: 3px solid transparent;
  transition: background .22s, border-color .22s;
  overflow: hidden;
}
.svc-card:hover { background: var(--surface); border-top-color: var(--blue); }
.svc-visual {
  width: calc(100% + 72px); margin: -44px -36px 0;
  height: 220px; overflow: hidden; position: relative;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.svc-visual svg,
.svc-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.svc-num {
  font-family: var(--ff-h); font-size: .65rem; font-weight: 700;
  letter-spacing: .15em; color: var(--blue); opacity: .5;
}
.svc-icon { color: var(--blue); }
.svc-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.svc-name {
  font-family: var(--ff-h); font-size: 1.1rem; font-weight: 700;
  color: var(--text); line-height: 1.25;
}
.svc-desc { font-size: .88rem; line-height: 1.75; color: var(--dust); flex: 1; }
.svc-link {
  font-family: var(--ff-h); font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; transition: gap .2s; text-decoration: none;
}
.svc-card:hover .svc-link { gap: 12px; }

/* ─── WHY ─── */
.why-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 56px;
}
.why-card {
  padding: 52px 48px; background: var(--navy-m);
  display: flex; flex-direction: column; gap: 14px;
  border-left: 3px solid transparent;
  transition: border-color .22s, background .22s;
}
.why-card:hover { border-left-color: #62A8FF; background: rgba(21,101,192,.12); }
.why-num {
  font-family: var(--ff-h); font-size: 2.5rem; font-weight: 800;
  color: var(--blue-l); opacity: .2; line-height: 1; letter-spacing: -.04em;
}
.why-title {
  font-family: var(--ff-h); font-size: 1.1rem; font-weight: 700; color: var(--white);
}
.why-desc { font-size: .9rem; line-height: 1.8; color: rgba(255,255,255,.5); }
/* Cards 2 and 3: white background, blue text */
.why-card:nth-child(2),
.why-card:nth-child(3) { background: var(--white); }
.why-card:nth-child(2) .why-num,
.why-card:nth-child(3) .why-num { color: var(--blue); opacity: .18; }
.why-card:nth-child(2) .why-title,
.why-card:nth-child(3) .why-title { color: var(--blue); }
.why-card:nth-child(2) .why-desc,
.why-card:nth-child(3) .why-desc { color: var(--dust); }
.why-card:nth-child(2):hover,
.why-card:nth-child(3):hover { background: var(--surface); border-left-color: var(--blue); }
/* Cards 1 and 4: number in white */
.why-card:nth-child(1) .why-num,
.why-card:nth-child(4) .why-num { color: var(--white); opacity: .55; }

/* ─── PROCESS ─── */
.process-track {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 56px; gap: 0;
  border: 1px solid var(--rule);
  background: var(--white);
}
.process-step {
  padding: 44px 32px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.process-step:last-child { border-right: none; }
.process-step::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--surface);
  transition: background .25s;
}
.process-step:hover::after { background: var(--blue); }
.ps-num {
  font-family: var(--ff-h); font-size: 2.2rem; font-weight: 800;
  color: var(--rule-d); line-height: 1; margin-bottom: 24px;
}
.ps-title {
  font-family: var(--ff-h); font-size: .95rem; font-weight: 700;
  color: var(--text); margin-bottom: 10px;
}
.ps-desc { font-size: .87rem; line-height: 1.75; color: var(--dust); }

/* ─── SECTORS ─── */
.sector-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px; margin-top: 52px;
}
.sector-card {
  position: relative; height: 200px; overflow: hidden; cursor: default;
}
.sector-card svg,
.sector-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sector-card-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 12px 14px;
  background: linear-gradient(transparent, rgba(6,21,41,.85));
  font-family: var(--ff-h); font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--white);
  transition: background .2s;
}
.sector-card:hover .sector-card-name { background: linear-gradient(transparent, rgba(6,21,41,.96)); }

/* ─── CLIENTS TICKER ─── */
.logo-ticker-wrap {
  overflow: hidden; margin-top: 56px;
  border: 1px solid var(--rule);
  padding: 0;
  position: relative;
}
.logo-ticker-wrap::before,
.logo-ticker-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2;
  pointer-events: none;
}
.logo-ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.logo-ticker-wrap::after  { right: 0; background: linear-gradient(to left, var(--white), transparent); }
.logo-ticker {
  display: flex; align-items: center;
  animation: ticker 22s linear infinite;
  width: max-content;
}
.logo-ticker:hover { animation-play-state: paused; }
.logo-ticker-item {
  flex-shrink: 0;
  padding: 36px 64px;
  border-right: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  min-width: 240px;
}
.logo-ticker-item svg { height: 48px; width: auto; display: block; }
.logo-ticker-item img { height: 56px; width: auto; max-width: 220px; object-fit: contain; display: block; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── CTA ─── */
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.cta-headline {
  font-family: var(--ff-h); font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800; line-height: 1.15; color: var(--white);
  max-width: 560px; text-wrap: balance;
}
.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border: 1px solid rgba(255,255,255,.3);
  font-family: var(--ff-h); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75);
  transition: all .22s;
}
.btn-outline:hover { border-color: var(--white); color: var(--white); }

/* ─── FOOTER ─── */
footer { background: var(--navy-d); color: rgba(255,255,255,.5); }
.footer-main {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 56px;
  padding: 72px 5vw 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  max-width: var(--max); margin: 0 auto;
}
.footer-brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand p { font-size: .86rem; line-height: 1.75; color: rgba(255,255,255,.38); max-width: 260px; }
.footer-col-title {
  font-family: var(--ff-h); font-size: .63rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.28);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: .86rem; transition: color .2s; }
.footer-col ul li a:hover { color: #62A8FF; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.fci { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; line-height: 1.6; }
.fci-icon { color: var(--blue-l); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 5vw; font-size: .76rem; flex-wrap: wrap; gap: 14px;
  max-width: var(--max); margin: 0 auto;
}
.footer-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.35); transition: color .2s; }
.footer-legal a:hover { color: rgba(255,255,255,.65); }
.footer-legal .sep { color: rgba(255,255,255,.15); }
.footer-dev { color: rgba(255,255,255,.32); font-size: .74rem; }
.footer-dev a { color: var(--blue-l); transition: color .2s; }
.footer-dev a:hover { color: var(--white); }

/* ─── FAB ─── */
.fab-scroll-btn {
  position: fixed; bottom: 90px; right: 24px; z-index: 300;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--text); color: var(--white); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(11,37,69,.25);
  opacity: 0; pointer-events: none;
  transition: background .2s, transform .2s, opacity .3s;
}
.fab-scroll-btn.visible { opacity: 1; pointer-events: auto; }
.fab-scroll-btn:hover { background: var(--blue); transform: translateY(-2px); }
.fab-scroll-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.fab-contact-wrap {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none; /* transparent container must not intercept clicks */
}
.fab-trigger { pointer-events: auto; }
/* buttons only receive clicks when the tray is open */
.fab-items.open .fab-btn { pointer-events: auto; }
.fab-items {
  display: flex; flex-direction: column-reverse; gap: 8px;
  transition: opacity .25s, transform .25s;
  opacity: 0; pointer-events: none; transform: translateY(10px);
}
.fab-items.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fab-item { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.fab-item-label {
  background: var(--navy); color: rgba(255,255,255,.9);
  padding: 6px 14px; border-radius: 4px;
  font-family: var(--ff-h); font-size: .72rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(11,37,69,.25); white-space: nowrap;
}
.fab-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s; text-decoration: none;
}
.fab-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
/* stroke-based icons (call, email, enquiry) */
.fab-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* WhatsApp uses filled path */
.fab-btn--wa svg { fill: currentColor; stroke: none; width: 24px; height: 24px; }
.fab-btn--call { background: #2E7D32; }
.fab-btn--wa   { background: #25D366; }
.fab-btn--email { background: var(--blue); }
.fab-btn--enquiry { background: #b8860b; }
.fab-trigger {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--blue); color: var(--white); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(21,101,192,.4);
  transition: background .2s, transform .25s;
}
.fab-trigger.open { background: var(--navy); transform: rotate(45deg); }
.fab-trigger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .about-vp { grid-template-columns: 1fr; height: auto; max-height: none; }
  .about-img-hero { height: 300px; }
  .about-content-col { padding: 40px 5vw; border-left: none; border-top: 1px solid var(--rule); }
  /* logo ticker — smaller on tablet */
  .logo-ticker-item { padding: 24px 40px; min-width: 180px; }
  .logo-ticker-item img { height: 44px; max-width: 160px; }
}
@media (max-width: 960px) {
  .hero__layout { grid-template-columns: 1fr; min-height: auto; }
  .hero__text { padding: 64px 5vw 80px; }
  .hero__visual { display: none; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .process-track { grid-template-columns: 1fr 1fr; }
  .process-step:nth-child(2) { border-right: none; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .sector-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--rule); }
  /* hero stats: 2 per row, last item full-width */
  /* hero: reduce min-height and padding on mobile */
  .hero__layout { min-height: auto; }
  .hero__text { padding: 56px 5vw 64px; }
  .hero__stats { flex-wrap: wrap; }
  .hero__stat { min-width: 50%; border-right: none; border-bottom: 1px solid var(--rule); }
  .hero__stat:last-child { min-width: 100%; border-bottom: none; }
  .about-img-hero { height: 240px; }
  .hc-grid-2x2 { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  /* logo ticker — compact on mobile */
  .logo-ticker-item { padding: 16px 24px; min-width: 140px; }
  .logo-ticker-item img { height: 36px; max-width: 130px; }
  .nav__links { display: none; }
  .nav__links.open {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--navy); padding: 0 0 32px;
    z-index: 99; overflow-y: auto; max-height: calc(100vh - var(--nav-h));
  }
  .nav__links.open > li > a {
    display: block; padding: 16px 5vw;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav__links.open .nav-chevron { display: none; }
  .nav__dropdown {
    position: static; transform: none !important;
    opacity: 1; visibility: visible; pointer-events: all;
    box-shadow: none; border: none; border-radius: 0;
    background: rgba(255,255,255,.04); padding: 0; min-width: 0;
  }
  .nav__dropdown::before, .nav__dropdown::after { display: none; }
  .nav__dropdown li { border-top: none !important; }
  .nav__dropdown li a {
    padding: 12px 5vw 12px calc(5vw + 16px) !important;
    color: rgba(255,255,255,.5) !important;
    font-size: .7rem !important; border-bottom: 1px solid rgba(255,255,255,.05) !important;
  }
  .nav__dropdown li a:hover { background: rgba(255,255,255,.04) !important; color: rgba(255,255,255,.9) !important; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-inner { flex-direction: column; }
  /* FAB labels — prevent overflow on very small screens */
  .fab-item-label { font-size: .66rem; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}