/* ================================================================
   SAMTEC Solutions — Premium Enterprise Design System v4.0 "Deep Ocean"
   Logo Colors (verified against logo.png): Navy/Indigo #1E2070 +
   Cyan Blue #29ABE2, on white — a strict two-tone brand, no third
   hue anywhere in the mark.

   --accent used to be #F58220 (orange) — never actually in the logo,
   and now fully retired sitewide. It's redefined below as a deep,
   saturated cyan (blue-xdk → blue-dk) instead: dark enough to keep
   white button/badge text safely above WCAG AA contrast (the orange
   it replaces measured well under 4.5:1 in several spots), while
   staying unmistakably "the logo's TEC cyan" rather than an unrelated
   invented hue. Every literal orange rgba() glow/shadow value in this
   file has been repointed to navy, so decorative ambient glows read
   as a navy+cyan duotone throughout — the logo's own two tones used
   as ambient light instead of a third, off-brand color. --navy-md is
   used separately as a solid "third tone" for alternating icon/avatar
   rotations (see --rot-3) — distinct from --accent by being flat
   rather than a gradient, so a 3-item rotation still reads as 3
   visually distinct options instead of 3 near-identical blue gradients.
   Inspiration: Microsoft Azure · Cisco · IBM · Cloudflare
   ================================================================ */

/* ───────────────────────────────────────────────────────────────
   1. CSS DESIGN TOKENS
─────────────────────────────────────────────────────────────── */
:root {
  /* Brand — directly from logo */
  --navy:         #1E2070;
  --navy-dk:      #13154D;
  --navy-md:      #272991;
  --navy-lt:      #EDEDF8;
  --blue:         #29ABE2;
  --blue-dk:      #1A8BBF;
  --blue-xdk:     #116E99;
  --blue-lt:      #E3F5FB;
  --blue-xlt:     #F0FAFD;
  --accent:       #1A8BBF; /* was #F58220 (orange) — now blue-dk, see file header */
  --accent-dk:    #116E99; /* was #D4690F — now blue-xdk */
  --accent-lt:    #E3F5FB; /* was #FEF0E0 — now blue-lt */

  /* Brief palette — used by the newer premium components (hero, header) */
  --hx-primary:   #2E2A72;
  --hx-secondary: #36A4D9;
  --hx-accent:    #59D8FF;
  --hx-dark:      #0B1020;

  /* On-brand "third tone" for alternating icon/avatar rotations (replaces
     the off-brand orange --accent below). A flat richer indigo rather than
     another navy→cyan gradient — the other two rotation slots are already
     both dark-to-cyan diagonals, so a third one would blur together with
     them; a solid tone reads as clearly distinct while staying entirely
     within the logo's own two-hue family, and keeps white icon/text at a
     safe ~11.6:1 contrast (a navy→light-cyan gradient dropped as low as
     1.65:1 at its lightest point). */
  --rot-3:        var(--navy-md);
  --rot-3-shadow: rgba(39,41,145,.45);

  /* Semantic status */
  --success:  #059669;
  --warning:  #D97706;
  --error:    #DC2626;
  --info:     #0284C7;

  /* Neutral backgrounds */
  --white:    #FFFFFF;
  --off-wh:   #F9FAFD;
  --bg-alt:   #F1F5FB;
  --surface:  #FFFFFF;
  --border:   #E2E8F0;
  --border-s: #C8D2DF;

  /* Typography */
  --h:        #0B0C42;
  --body:     #374151;
  --muted:    #6B7280;
  --light:    #9CA3AF;

  /* Footer */
  --foot-bg:  #090A38;
  --foot-s:   #10134A;
  --foot-t:   #9CA3C8;
  --foot-l:   #C5CCDF;

  /* Gradients */
  --g-hero:   linear-gradient(140deg, #090A38 0%, #1E2070 55%, #1A8BBF 100%);
  --g-brand:  linear-gradient(135deg, #1E2070 0%, #29ABE2 100%);
  --g-blue:   linear-gradient(135deg, #1A8BBF 0%, #29ABE2 100%);
  --g-accent: linear-gradient(135deg, #1A8BBF 0%, #116E99 100%);
  --g-light:  linear-gradient(135deg, #F9FAFD 0%, #E3F5FB 100%);
  --g-cta:    linear-gradient(135deg, #13154D 0%, #1E2070 50%, #1A8BBF 100%);

  /* Shadows (navy-tinted for brand coherence) */
  --s0: 0 1px 3px rgba(30,32,112,.06);
  --s1: 0 2px 10px rgba(30,32,112,.09), 0 1px 3px rgba(0,0,0,.04);
  --s2: 0 6px 24px rgba(30,32,112,.11), 0 2px 8px rgba(0,0,0,.05);
  --s3: 0 16px 48px rgba(30,32,112,.14), 0 4px 16px rgba(0,0,0,.07);
  --s4: 0 24px 64px rgba(30,32,112,.18), 0 8px 24px rgba(0,0,0,.09);
  --s-accent: 0 8px 24px rgba(26,139,191,.30);
  --s-blue:   0 8px 24px rgba(41,171,226,.28);
  --s-nav:    0 2px 24px rgba(30,32,112,.10), 0 1px 4px rgba(0,0,0,.05);

  /* Border radius */
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 20px;
  --r5: 24px;
  --rp: 50px;
  --rf: 9999px;

  /* Font — Sora (display/headings) + Manrope (body/UI). Replaces the old
     Space Grotesk + Inter pairing. 'Poppins' is deliberately NOT in this
     fallback list even though style-starter.css's leftover `* { font-family:
     'Poppins' }` reset used to reference it — that font was never actually
     loaded anywhere on the site, so any element it touched was silently
     rendering in the browser's generic system font instead. See the `*`
     override further down that neutralizes that rule. */
  --ff: 'Manrope', system-ui, -apple-system, sans-serif;
  --ff-display: 'Sora', var(--ff);

  /* Transitions */
  --e:  cubic-bezier(0.4, 0, 0.2, 1);
  --t1: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t2: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t3: 0.40s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── DARK MODE ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --white:    #0D0E40;
  --off-wh:   #0A0B36;
  --bg-alt:   #0B0C3A;
  --surface:  #121460;
  --border:   rgba(255,255,255,.09);
  --border-s: rgba(255,255,255,.14);
  --h:        #E8EAFF;
  --body:     #B0BADB;
  --muted:    #7E8AAA;
  --light:    #5A6590;
  --navy-lt:  rgba(30,32,112,.30);
  --blue-lt:  rgba(41,171,226,.12);
  --blue-xlt: rgba(41,171,226,.06);
  --s1: 0 2px 10px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.15);
  --s2: 0 6px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18);
  --s3: 0 16px 48px rgba(0,0,0,.40), 0 4px 16px rgba(0,0,0,.20);
}


/* ───────────────────────────────────────────────────────────────
   2. BASE / RESETS
─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Neutralizes style-starter.css's `* { font-family: 'Poppins' }` reset —
   that rule matches every element directly (not by inheritance), so it was
   overriding body's intended font on any element with no other font rule of
   its own. Poppins was never loaded via a <link> or @font-face anywhere on
   the site, so those elements were silently falling back further to the
   browser's generic system font. `inherit` restores normal CSS inheritance
   from body/ancestors so var(--ff) actually reaches everywhere it should. */
* { font-family: inherit; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--ff);
  color: var(--body);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  color: var(--h);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { color: var(--body); }

a { color: var(--blue); transition: color var(--t1); }
a:hover { color: var(--blue-dk); }

img { max-width: 100%; height: auto; }

/* Radius image utility */
.radius-image {
  border-radius: var(--r4);
  box-shadow: var(--s2);
}

/* Utility: bg sections */
.bg-alt-section { background: var(--bg-alt); }


/* ───────────────────────────────────────────────────────────────
   3. BUTTON SYSTEM
─────────────────────────────────────────────────────────────── */
/* Override existing btn-style */
.btn, .btn-style, .btn.btn-style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.875rem;
  font-family: var(--ff);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  border-radius: var(--r4);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--t2);
  position: relative;
  overflow: hidden;
}

.btn-style, .btn.btn-style {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff !important;
}

.btn-style:hover, .btn.btn-style:hover {
  background: var(--navy-dk);
  border-color: var(--navy-dk);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30,32,112,.28);
}

/* Accent (orange CTA) */
.btn-accent, .btn.btn-accent {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r4);
  font-weight: 600;
  font-size: .875rem;
  padding: .625rem 1.375rem;
}

.btn-accent:hover, .btn.btn-accent:hover {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--s-accent);
}

/* Ghost white (on dark backgrounds) */
.btn-ghost-white {
  background: rgba(255,255,255,.10) !important;
  border: 2px solid rgba(255,255,255,.30) !important;
  color: #fff !important;
  border-radius: var(--r4);
  font-size: .9rem;
  font-weight: 600;
  padding: .75rem 1.875rem;
}

.btn-ghost-white:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
  transform: translateY(-2px);
}


/* ───────────────────────────────────────────────────────────────
   4. HEADER — NEXUS NAVIGATION SYSTEM. Prefix: nx-
   White top utility bar (collapses on scroll) + a white floating
   rounded navbar that shrinks and deepens its shadow once scrolled.
   Premium mega menus for Services / Solutions, a command-palette
   search and a fullscreen white mobile drawer with an inline search
   bar and accordion submenus.
─────────────────────────────────────────────────────────────── */
.nx-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: block;
  height: auto;
  align-items: initial;
}

/* ── Top bar ──────────────────────────────────────────────────
   Collapses to zero height once the page scrolls past the
   threshold, restoring seamlessly when scrolled back to top. */
.nx-topbar {
  position: relative;
  max-height: calc(40px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
  background: linear-gradient(90deg, var(--hx-primary) 0%, var(--hx-secondary) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: max-height .45s var(--e), opacity .35s var(--e), border-color .35s var(--e);
}
.nx-header.is-scrolled .nx-topbar { max-height: 0; opacity: 0; border-bottom-color: transparent; }

.nx-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 40px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
  padding: 0 1.75rem;
}

.nx-tb-left { justify-self: start; display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.nx-tb-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding-block: 8px; /* the text alone is only ~20px tall — this widens the tap target without changing how it looks */
  font-size: .8rem; font-weight: 500;
  color: rgba(255,255,255,.88);
  text-decoration: none; white-space: nowrap;
  transition: color .25s var(--e);
}
a.nx-tb-item:hover { color: #fff; }
.nx-tb-item svg { flex-shrink: 0; color: var(--hx-accent); }

.nx-tb-center {
  justify-self: center;
  font-size: .8rem; font-weight: 600;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-align: center;
}

.nx-tb-social { justify-self: end; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nx-tb-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: .72rem;
  transition: all .25s var(--e);
}
.nx-tb-social a:hover { background: #fff; border-color: #fff; color: var(--hx-primary); transform: translateY(-2px); }

/* ── Floating navbar ────────────────────────────────────────── */
.nx-navbar-wrap { padding: 10px clamp(10px, 2.5vw, 24px) 0; transition: padding .4s var(--e); }
.nx-header.is-scrolled .nx-navbar-wrap { padding-top: 8px; }

.nx-navbar {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(30,32,112,.06);
  box-shadow: 0 10px 34px -14px rgba(30,32,112,.18), 0 2px 10px rgba(30,32,112,.06);
  transition: box-shadow .4s var(--e);
}
.nx-header.is-scrolled .nx-navbar { box-shadow: 0 18px 42px -14px rgba(30,32,112,.24), 0 4px 14px rgba(30,32,112,.09); }

.nx-navbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 78px;
  padding: 0 1.75rem;
  transition: height .4s var(--e);
}
.nx-header.is-scrolled .nx-navbar-inner { height: 62px; }

/* ── Logo ───────────────────────────────────────────────────── */
.nx-logo { display: inline-flex; align-items: center; flex-shrink: 0; padding-right: clamp(14px, 2.5vw, 32px); }
.nx-logo img { height: 42px; width: auto; display: block; transition: height .4s var(--e); }
.nx-header.is-scrolled .nx-logo img { height: 34px; }

/* ── Nav ────────────────────────────────────────────────────── */
.nx-nav { position: relative; display: flex; align-items: center; min-width: 0; }
.nx-nav-list { position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }

.nx-nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  font-family: var(--ff);
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  color: var(--body);
  background: none; border: none; border-radius: 10px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .3s var(--e), background .3s var(--e);
}
.nx-nav-link:hover { color: var(--hx-primary); background: rgba(54,164,217,.07); }
.nx-nav-link.is-active { color: var(--hx-primary); }
.nx-nav-link:focus-visible { outline: 2px solid var(--hx-secondary); outline-offset: 2px; }

/* ── "Shop" nav link — points off-site to shop.samtec.lk, so it's styled as
   a standout pill (not plain text) to read as a distinct destination rather
   than just another page on this site. ── */
.nx-nav-link--shop {
  color: #fff;
  background: linear-gradient(135deg, var(--hx-secondary) 0%, var(--hx-accent) 100%);
  padding-right: 12px;
  box-shadow: 0 8px 18px -8px rgba(54,164,217,.55);
}
.nx-nav-link--shop:hover { color: #fff; background: linear-gradient(135deg, var(--hx-primary) 0%, var(--hx-secondary) 100%); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(54,164,217,.65); }
.nx-nav-link--shop i:first-child { font-size: .8rem; }
.nx-nav-link-badge {
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.28); color: #fff;
  padding: 2px 6px; border-radius: 999px;
}

.nx-chevron { width: 9px; height: 9px; transition: transform .3s var(--e); }
.nx-nav-link[aria-expanded="true"] .nx-chevron { transform: rotate(180deg); }

.nx-nav-indicator {
  position: absolute;
  left: 0; bottom: 2px;
  height: 3px; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hx-secondary), var(--hx-accent));
  box-shadow: 0 0 10px rgba(54,164,217,.5);
  opacity: 0;
  transform: translateX(0);
  transition: transform .35s var(--e), width .35s var(--e), opacity .25s var(--e);
  pointer-events: none;
  z-index: 1;
}
.nx-nav-indicator.is-visible { opacity: 1; }

/* ── Actions ────────────────────────────────────────────────── */
.nx-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 10px; flex-shrink: 0; }

.nx-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(30,32,112,.045);
  border: 1px solid rgba(30,32,112,.08);
  color: var(--hx-primary);
  font-size: 15px;
  cursor: pointer;
  transition: all .3s var(--e);
}
.nx-icon-btn:hover { background: rgba(54,164,217,.12); border-color: rgba(54,164,217,.35); color: var(--hx-secondary); transform: translateY(-2px); }

.nx-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(135deg, var(--hx-primary) 0%, var(--hx-secondary) 100%);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(46,42,114,.45);
  transition: transform .3s var(--e), box-shadow .3s var(--e);
}
.nx-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .6s var(--e);
}
.nx-cta:hover::before { transform: translateX(130%); }
.nx-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(46,42,114,.55); }
.nx-cta svg { position: relative; transition: transform .3s var(--e); }
.nx-cta:hover svg { transform: translateX(4px); }

/* Burger — asymmetric "signal" bars morph into an X */
.nx-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(30,32,112,.045);
  border: 1px solid rgba(30,32,112,.08);
  cursor: pointer;
  flex-shrink: 0;
}
.nx-burger-box { position: relative; display: block; width: 20px; height: 16px; margin: 0 auto; }
.nx-burger-bar { position: absolute; left: 0; height: 2px; border-radius: 2px; background: var(--hx-primary); transition: all .35s var(--e); }
.nx-burger-bar:nth-child(1) { top: 0;    width: 20px; }
.nx-burger-bar:nth-child(2) { top: 7px;  width: 13px; }
.nx-burger-bar:nth-child(3) { top: 14px; width: 20px; }
.nx-burger[aria-expanded="true"] .nx-burger-bar:nth-child(1) { top: 7px; width: 20px; transform: rotate(45deg); }
.nx-burger[aria-expanded="true"] .nx-burger-bar:nth-child(2) { opacity: 0; width: 0; left: 10px; }
.nx-burger[aria-expanded="true"] .nx-burger-bar:nth-child(3) { top: 7px; width: 20px; transform: rotate(-45deg); }

/* ── Scrim (behind mega menus / search) ────────────────────── */
.nx-scrim {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(11,16,32,.4);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--e), visibility .4s;
}
.nx-scrim.is-active { opacity: 1; visibility: visible; }

/* ── Mega menus ─────────────────────────────────────────────── */
.nx-megazone { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; z-index: 5; padding: 0 clamp(10px, 2.5vw, 24px); }
.nx-mega {
  position: absolute;
  top: 10px;
  width: min(1080px, 100%);
  opacity: 0; visibility: hidden;
  transform: translateY(-14px) scale(.98);
  pointer-events: none;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(30,32,112,.08);
  box-shadow: 0 30px 70px -20px rgba(30,32,112,.28), 0 8px 24px rgba(30,32,112,.08);
  overflow: hidden;
  transition: opacity .35s var(--e), transform .35s var(--e), visibility .35s;
}
.nx-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }

.nx-mega-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; padding: 16px 32px 12px; }

.nx-mega-head { margin-bottom: 10px; }
.nx-mega-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--hx-secondary); margin-bottom: 5px;
}
.nx-mega-title { font-family: var(--ff); font-size: 1.08rem; font-weight: 800; color: var(--h); letter-spacing: -.01em; margin-bottom: 3px; }
.nx-mega-desc { font-size: .8rem; color: var(--muted); max-width: 46ch; }

/* Solutions has 6 cards vs. Services' 4 — 3 columns for Solutions resolves
   both grids to 2 rows so the two mega panels render at equal, compact height. */
.nx-mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
#nxMegaSolutions .nx-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nx-mega-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid rgba(30,32,112,.07);
  background: rgba(30,32,112,.015);
  text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: background .3s var(--e), border-color .3s var(--e), transform .3s var(--e), opacity .4s var(--e), box-shadow .3s var(--e);
}
.nx-mega.is-open .nx-mega-card { opacity: 1; transform: translateY(0); }
.nx-mega.is-open .nx-mega-card:nth-child(1) { transition-delay: .04s; }
.nx-mega.is-open .nx-mega-card:nth-child(2) { transition-delay: .08s; }
.nx-mega.is-open .nx-mega-card:nth-child(3) { transition-delay: .12s; }
.nx-mega.is-open .nx-mega-card:nth-child(4) { transition-delay: .16s; }
.nx-mega.is-open .nx-mega-card:nth-child(5) { transition-delay: .20s; }
.nx-mega.is-open .nx-mega-card:nth-child(6) { transition-delay: .24s; }
.nx-mega-card:hover { background: rgba(54,164,217,.07); border-color: rgba(54,164,217,.28); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(30,32,112,.2); }

.nx-mega-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(46,42,114,.09), rgba(54,164,217,.16));
  border: 1px solid rgba(54,164,217,.24);
  color: var(--hx-secondary); font-size: .82rem;
  transition: all .3s var(--e);
}
.nx-mega-card:hover .nx-mega-icon { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent)); border-color: transparent; color: #fff; }

.nx-mega-card-body { min-width: 0; }
.nx-mega-card-title {
  display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--h); margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-mega-card-desc {
  display: block;
  font-size: .72rem; color: var(--muted); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-mega-card-arrow { opacity: 0; transform: translateX(-4px); transition: all .3s var(--e); color: var(--hx-secondary); font-size: .7rem; flex-shrink: 0; }
.nx-mega-card:hover .nx-mega-card-arrow { opacity: 1; transform: translateX(0); }

.nx-mega-promo {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(160deg, var(--hx-primary) 0%, var(--hx-secondary) 130%);
  display: flex; flex-direction: column;
}
.nx-mega-promo::before {
  content: ''; position: absolute; width: 190px; height: 190px; border-radius: 50%;
  right: -55px; top: -60px; filter: blur(55px);
  background: radial-gradient(circle, var(--hx-accent), transparent 70%);
  opacity: .55;
}
.nx-mega-promo-icon {
  position: relative; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  color: #fff; font-size: .9rem; margin-bottom: 8px;
}
.nx-mega-promo-title { position: relative; font-family: var(--ff); font-size: .92rem; font-weight: 800; color: #fff; margin-bottom: 5px; }
.nx-mega-promo-text { position: relative; font-size: .76rem; color: rgba(255,255,255,.85); line-height: 1.4; margin-bottom: 10px; flex: 1; }
.nx-mega-promo-cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: .8rem;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px;
  width: fit-content;
  transition: all .3s var(--e);
}
.nx-mega-promo-cta:hover { border-color: #fff; gap: 11px; }

.nx-mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 32px;
  border-top: 1px solid rgba(30,32,112,.07);
  background: rgba(30,32,112,.015);
}
.nx-mega-foot-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nx-mega-foot-links a { font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: color .3s var(--e); }
.nx-mega-foot-links a:hover { color: var(--hx-primary); }
.nx-mega-foot-links a.nx-mega-foot-shop { display: inline-flex; align-items: center; gap: 6px; color: var(--hx-secondary); }
.nx-mega-foot-links a.nx-mega-foot-shop:hover { color: var(--hx-primary); }
.nx-mega-foot-cta { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--hx-secondary); text-decoration: none; white-space: nowrap; transition: gap .3s var(--e); }
.nx-mega-foot-cta:hover { gap: 10px; }

/* ── Search — command-palette overlay ──────────────────────── */
.nx-search {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: min(14vh, 130px) 1.25rem 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--e), visibility .3s;
}
.nx-search.is-open { opacity: 1; visibility: visible; }

.nx-search-panel {
  position: relative;
  width: 100%; max-width: 620px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(30,32,112,.08);
  box-shadow: 0 40px 100px -20px rgba(30,32,112,.35);
  padding: 30px;
  transform: translateY(-18px) scale(.97);
  transition: transform .35s var(--e);
}
.nx-search.is-open .nx-search-panel { transform: translateY(0) scale(1); }

.nx-search-close {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(30,32,112,.045); border: 1px solid rgba(30,32,112,.08);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s var(--e);
}
.nx-search-close:hover { background: rgba(54,164,217,.12); color: var(--hx-secondary); }

.nx-search-form { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(30,32,112,.1); padding-bottom: 18px; }
.nx-search-form svg { color: var(--hx-secondary); flex-shrink: 0; }
.nx-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--h); font-family: var(--ff); font-size: 1.15rem; font-weight: 500; }
.nx-search-input::placeholder { color: var(--light); }

.nx-search-quick { margin-top: 20px; }
.nx-search-quick-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 12px; }
.nx-search-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nx-search-quick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(30,32,112,.025);
  border: 1px solid rgba(30,32,112,.06);
  color: var(--body);
  text-decoration: none; font-size: .84rem; font-weight: 500;
  transition: all .3s var(--e);
}
.nx-search-quick-item i { color: var(--hx-secondary); font-size: .8rem; width: 16px; text-align: center; }
.nx-search-quick-item:hover { background: rgba(54,164,217,.08); border-color: rgba(54,164,217,.3); color: var(--hx-primary); }
.nx-search-quick-item.is-hidden { display: none; }

/* ── Mobile drawer — white, brand-accented, fullscreen slide-in ── */
body.nx-lock { overflow: hidden; }

.nx-drawer {
  position: fixed; inset: 0; z-index: 1300;
  background: linear-gradient(160deg, #ffffff 0%, #f7faff 45%, #eef4fb 100%);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .5s var(--e), visibility .5s;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.nx-drawer.is-open { transform: translateX(0); visibility: visible; }

.nx-drawer-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nx-drawer-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.nx-drawer-orb--a { width: 300px; height: 300px; left: -12%; top: -8%; background: radial-gradient(circle, rgba(54,164,217,.22), transparent 70%); }
.nx-drawer-orb--b { width: 280px; height: 280px; right: -14%; top: 26%; background: radial-gradient(circle, rgba(46,42,114,.14), transparent 70%); }
.nx-drawer-orb--c { width: 320px; height: 320px; left: 6%; bottom: -16%; background: radial-gradient(circle, rgba(89,216,255,.16), transparent 70%); }

.nx-drawer-top {
  position: relative; z-index: 1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(1.1rem, env(safe-area-inset-top)) 1.4rem 0;
}
.nx-drawer-logo img { height: 30px; width: auto; display: block; }
.nx-drawer-top-actions { display: flex; align-items: center; gap: 8px; }
.nx-drawer-close {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(30,32,112,.045); border: 1px solid rgba(30,32,112,.08);
  color: var(--hx-primary); display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; transition: all .3s var(--e);
}
.nx-drawer-close:hover { background: rgba(54,164,217,.12); border-color: rgba(54,164,217,.3); }
.nx-drawer-close:active { transform: scale(.9); }

/* Search bar — the first prominent element in the drawer */
.nx-drawer-search { position: relative; z-index: 1; flex-shrink: 0; padding: 1rem 1.4rem 0; }
.nx-drawer-search-box {
  display: flex; align-items: center; gap: .7rem;
  background: #fff;
  border: 1.5px solid rgba(30,32,112,.1);
  border-radius: 14px;
  padding: .75rem 1rem;
  box-shadow: 0 4px 14px rgba(30,32,112,.06);
}
.nx-drawer-search-box svg { color: var(--hx-secondary); flex-shrink: 0; }
.nx-drawer-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--ff); font-size: .95rem; color: var(--h); }
.nx-drawer-search-input::placeholder { color: var(--light); }

/* Collapsed until the visitor types a query — then eases open smoothly. */
.nx-drawer-search-results {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .4s var(--e), opacity .3s var(--e), margin-top .4s var(--e);
}
.nx-drawer-search-results.is-active { max-height: 320px; opacity: 1; margin-top: .6rem; }
.nx-drawer-search-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: rgba(30,32,112,.03);
  text-decoration: none; color: var(--body); font-size: .85rem; font-weight: 500;
  transition: all .25s var(--e);
}
.nx-drawer-search-item i { color: var(--hx-secondary); width: 14px; text-align: center; }
.nx-drawer-search-item:hover { background: rgba(54,164,217,.09); color: var(--hx-primary); }
.nx-drawer-search-item.is-hidden { display: none; }

.nx-drawer-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.nx-drawer-cta {
  display: flex; align-items: center; gap: 14px;
  margin: 1rem 1.4rem 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--hx-primary) 0%, var(--hx-secondary) 100%);
  box-shadow: 0 16px 34px -10px rgba(46,42,114,.4);
  text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--e) .05s, transform .45s var(--e) .05s;
}
.nx-drawer.is-open .nx-drawer-cta { opacity: 1; transform: translateY(0); }
.nx-drawer-cta:active { transform: scale(.97); }
.nx-drawer-cta-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: #fff; font-size: 1.05rem;
}
.nx-drawer-cta-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nx-drawer-cta-text strong { font-family: var(--ff); font-size: 1rem; color: #fff; }
.nx-drawer-cta-text small { font-size: .78rem; color: rgba(255,255,255,.8); font-weight: 600; }
.nx-drawer-cta-arrow { color: #fff; font-size: .9rem; transition: transform .3s var(--e); }
.nx-drawer-cta:hover .nx-drawer-cta-arrow { transform: translateX(4px); }

/* ── Secondary drawer CTA — the online store, sitting right under "Get a
   Quote" with its own cyan gradient so the two reads as distinct actions
   (enquire vs. buy) instead of two copies of the same button. ── */
.nx-drawer-cta--shop {
  margin-top: .6rem;
  background: linear-gradient(135deg, var(--hx-secondary) 0%, var(--hx-accent) 100%);
  box-shadow: 0 16px 34px -10px rgba(54,164,217,.45);
}

.nx-drawer-nav { padding: 1.1rem 1.4rem 0; }
.nx-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nx-drawer-item-wrap { opacity: 0; transform: translateY(16px); transition: opacity .4s var(--e), transform .4s var(--e); }
.nx-drawer.is-open .nx-drawer-item-wrap { opacity: 1; transform: translateY(0); }

.nx-drawer-item {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  background: none; border: none;
  font-family: var(--ff);
  font-size: 1.02rem; font-weight: 600;
  color: var(--h);
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--e), color .3s var(--e);
}
.nx-drawer-item:hover { background: rgba(54,164,217,.07); }
.nx-drawer-item:active { transform: scale(.98); }
.nx-drawer-item.is-active { color: var(--hx-primary); background: rgba(54,164,217,.09); }
.nx-drawer-item.is-active::before {
  content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--hx-secondary), var(--hx-accent));
}
.nx-drawer-item-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(54,164,217,.09); color: var(--hx-secondary); font-size: 1rem;
  transition: all .3s var(--e);
}
.nx-drawer-item:hover .nx-drawer-item-icon,
.nx-drawer-item.is-active .nx-drawer-item-icon,
.nx-drawer-acc-trigger.is-open .nx-drawer-item-icon {
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent)); color: #fff;
}
.nx-drawer-item-label { flex: 1; text-align: left; }

/* ── "Shop" item in the mobile nav list — same treatment as the desktop
   pill (cyan icon chip + a small external-link glyph) so it still reads as
   the off-site store even without the standalone CTA card above. ── */
.nx-drawer-item--shop .nx-drawer-item-icon { background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent)); color: #fff; }
.nx-drawer-item-ext { flex-shrink: 0; font-size: .78rem; color: var(--light); }
.nx-drawer-acc-chevron { flex-shrink: 0; width: 12px; height: 12px; color: var(--light); transition: transform .3s var(--e); }
.nx-drawer-acc-trigger.is-open .nx-drawer-acc-chevron { transform: rotate(180deg); color: var(--hx-secondary); }
.nx-drawer-acc-trigger.is-open { background: rgba(54,164,217,.07); }

.nx-drawer-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--e); }
.nx-drawer-acc-panel.is-open { grid-template-rows: 1fr; }
.nx-drawer-acc-inner { overflow: hidden; min-height: 0; }
.nx-drawer-acc-cards { padding: 6px .1rem 14px; display: flex; flex-direction: column; gap: 8px; }

.nx-drawer-acc-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid rgba(30,32,112,.07);
  box-shadow: 0 2px 10px rgba(30,32,112,.05);
  text-decoration: none;
  transition: all .3s var(--e);
}
.nx-drawer-acc-card:hover { border-color: rgba(54,164,217,.3); box-shadow: 0 6px 18px rgba(54,164,217,.14); }
.nx-drawer-acc-card:active { transform: scale(.98); }
.nx-drawer-acc-card-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(54,164,217,.1); color: var(--hx-secondary); font-size: .88rem;
}
.nx-drawer-acc-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-drawer-acc-card-title { font-size: .86rem; font-weight: 700; color: var(--h); }
.nx-drawer-acc-card-desc {
  font-size: .74rem; color: var(--muted); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nx-drawer-acc-card-arrow { flex-shrink: 0; color: var(--light); font-size: .68rem; }

.nx-drawer-acc-viewall {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; margin-top: 2px;
  border-radius: 15px;
  border: 1.5px dashed rgba(54,164,217,.35);
  color: var(--hx-secondary); font-weight: 700; font-size: .84rem;
  text-decoration: none;
  transition: all .3s var(--e);
}
.nx-drawer-acc-viewall:hover { background: rgba(54,164,217,.07); border-color: rgba(54,164,217,.55); }

.nx-drawer-bottom {
  position: relative; z-index: 1; flex-shrink: 0;
  margin-top: 1.1rem;
  padding: 1.1rem 1.4rem max(1.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(30,32,112,.08);
}
.nx-drawer-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.nx-drawer-contact a { display: flex; align-items: center; gap: 11px; color: var(--body); text-decoration: none; font-size: .88rem; font-weight: 500; }
.nx-drawer-contact a svg { color: var(--hx-secondary); flex-shrink: 0; }

.nx-drawer-social { display: flex; gap: 10px; }
.nx-drawer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(30,32,112,.045); border: 1px solid rgba(30,32,112,.08);
  color: var(--hx-primary); display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--e);
}
.nx-drawer-social a:hover { background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent)); border-color: transparent; color: #fff; }
.nx-drawer-social a:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .nx-topbar, .nx-navbar, .nx-navbar-inner, .nx-logo img, .nx-nav-indicator, .nx-mega, .nx-mega-card,
  .nx-drawer, .nx-drawer-item-wrap, .nx-drawer-cta, .nx-drawer-acc-panel { transition: none !important; animation: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1320px) {
  .nx-mega-promo { display: none; }
  .nx-mega-body { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .nx-nav { display: none; }
  .nx-megazone { display: none; }
  .nx-cta { display: none; }
  .nx-burger { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
  /* Keep the top bar on mobile too, but always as a single row: instead of
     wrapping onto a second line, the row scrolls horizontally if the
     contact links + social icons don't all fit on very narrow phones.
     Still collapses away on scroll via the same .is-scrolled transition. */
  .nx-topbar { max-height: calc(44px + env(safe-area-inset-top)); }
  .nx-topbar-inner {
    display: flex;
    height: 44px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nx-topbar-inner::-webkit-scrollbar { display: none; }
  .nx-tb-left { flex-wrap: nowrap; flex-shrink: 0; gap: 14px; }
  .nx-tb-item { font-size: .74rem; flex-shrink: 0; }
  .nx-tb-center { display: none; }
  .nx-tb-social { flex-shrink: 0; justify-content: flex-start; margin-left: auto; }
}

@media (max-width: 640px) {
  .nx-navbar-wrap { padding: 8px 8px 0; }
  .nx-header.is-scrolled .nx-navbar-wrap { padding-top: 6px; }
  .nx-navbar-inner { height: 58px; padding: 0 1rem; }
  .nx-header.is-scrolled .nx-navbar-inner { height: 52px; }
  .nx-logo img { height: 30px; }
  .nx-header.is-scrolled .nx-logo img { height: 26px; }
  .nx-actions { gap: 6px; }
  .nx-icon-btn { width: 40px; height: 40px; font-size: 14px; }
  .nx-burger { width: 42px; height: 42px; }
  .nx-search { padding-top: 10vh; }
  .nx-search-quick-grid { grid-template-columns: 1fr; }
  .nx-search-panel { padding: 22px; }
}

@media (max-width: 400px) {
  .nx-actions { gap: 4px; }
  .nx-icon-btn { width: 38px; height: 38px; font-size: 13px; }
  .nx-burger { width: 38px; height: 38px; }
  .nx-drawer-top-actions { gap: 6px; }
  .nx-drawer-close { width: 38px; height: 38px; font-size: 13px; }
  .nx-drawer-top { padding: max(1rem, env(safe-area-inset-top)) 1.1rem 0; }
  .nx-drawer-search { padding: .85rem 1.1rem 0; }
  .nx-drawer-cta { margin: .85rem 1.1rem 0; padding: 13px 14px; }
  .nx-drawer-nav { padding: .85rem 1.1rem 0; }
  .nx-drawer-bottom { padding: .85rem 1.1rem max(1.4rem, env(safe-area-inset-bottom)); }
  .nx-drawer-item { font-size: .95rem; padding: 11px 12px; }
  .nx-drawer-item-icon { width: 36px; height: 36px; font-size: .9rem; }
}


/* ───────────────────────────────────────────────────────────────
   5. INNER PAGE BANNER / PAGE HERO
─────────────────────────────────────────────────────────────── */
.inner-banner {
  background: var(--g-hero) !important;
  padding: 8.75rem 0 3.5rem !important;
  position: relative;
  overflow: hidden;
}

/* Subtle geometric decorative rings */
.inner-banner::before {
  content: '';
  position: absolute;
  right: -8%;
  top: -40%;
  width: 500px;
  height: 500px;
  border-radius: var(--rf);
  border: 80px solid rgba(41,171,226,.07);
  pointer-events: none;
}

.inner-banner::after {
  content: '';
  position: absolute;
  left: 5%;
  bottom: -30%;
  width: 300px;
  height: 300px;
  border-radius: var(--rf);
  border: 50px solid rgba(30,32,112,.07);
  pointer-events: none;
}

.w3l-breadcrumb {
  position: relative;
  z-index: 1;
}

.inner-text-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.03em;
  margin-bottom: .875rem;
  line-height: 1.15 !important;
}

/* Breadcrumb */
.breadcrumbs-custom-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs-custom-path li a {
  color: rgba(255,255,255,.70);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t1);
}

.breadcrumbs-custom-path li a:hover {
  color: #fff;
}

.breadcrumbs-custom-path li.active {
  color: var(--blue);
  font-size: .85rem;
  font-weight: 500;
}

.breadcrumbs-custom-path .fa-angle-right {
  color: rgba(255,255,255,.35);
  font-size: .75rem;
}


/* ───────────────────────────────────────────────────────────────
   6. SECTION HEADINGS
─────────────────────────────────────────────────────────────── */
.small-title {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue) !important;
  position: relative;
}

.title-style {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--h) !important;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.title-main { text-align: center; }


/* ───────────────────────────────────────────────────────────────
   7. SERVICE CARDS (.box-wrap)
─────────────────────────────────────────────────────────────── */
.box-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  padding: 2rem 1.875rem;
  height: 100%;
  box-shadow: var(--s1);
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
  position: relative;
  overflow: hidden;
}

/* Top accent bar */
.box-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-brand);
  border-radius: var(--r4) var(--r4) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t2);
}

.box-wrap:hover::before { transform: scaleX(1); }

.box-wrap:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: var(--blue-lt);
}

/* Icon circle */
.box-wrap .icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-lt);
  border-radius: var(--r3);
  margin-bottom: 1.25rem;
  transition: background var(--t2), box-shadow var(--t2);
}

.box-wrap .icon i {
  font-size: 1.375rem;
  color: var(--blue);
  transition: color var(--t2);
}

.box-wrap:hover .icon {
  background: var(--g-brand);
  box-shadow: var(--s-blue);
}

.box-wrap:hover .icon i { color: #fff; }

/* Card text */
.box-wrap h4, .box-wrap h5 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .625rem;
}

.box-wrap h4 a, .box-wrap h5 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t1);
}

.box-wrap h4 a:hover, .box-wrap h5 a:hover { color: var(--blue); }

.box-wrap p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.box-wrap p.limited { /* services listing truncate hint */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read more link */
.box-wrap .read {
  display: inline-flex;
  align-items: center;
  font-size: .84rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: gap var(--t1), color var(--t1);
  gap: .3rem;
}

.box-wrap .read::after {
  content: '→';
  display: inline-block;
  transition: transform var(--t2);
}

.box-wrap .read:hover { color: var(--navy); }
.box-wrap .read:hover::after { transform: translateX(4px); }

/* Clients box-wrap variant (name only) */
.box-wrap h4:only-child {
  margin-bottom: 0;
  font-size: 1rem;
  text-align: center;
}



/* ───────────────────────────────────────────────────────────────
   9. PROJECT CARDS (.blog-card-single)
─────────────────────────────────────────────────────────────── */
.blog-card-single {
  border-radius: var(--r4);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--s1);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--t2), box-shadow var(--t2);
}

.blog-card-single:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
}

.blog-card-single .grids5-info { overflow: hidden; flex: 1; display: flex; flex-direction: column; }

.blog-card-single .grids5-info > a { display: block; overflow: hidden; flex-shrink: 0; }

.blog-card-single .grids5-info img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .5s var(--e);
  display: block;
}

.blog-card-single:hover .grids5-info img { transform: scale(1.05); }

.blog-card-single .blog-info {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-single .blog-info h4 {
  font-size: 1.025rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .5rem;
  line-height: 1.35;
}

.blog-card-single .blog-info h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t1);
}

.blog-card-single .blog-info h4 a:hover { color: var(--blue); }

.blog-card-single .blog-info p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.blog-card-single .date-text {
  font-size: .8rem;
  color: var(--blue) !important;
  font-weight: 600;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: .375rem;
}


/* ───────────────────────────────────────────────────────────────
   10. STATS STRIP (.samtec-stats)
─────────────────────────────────────────────────────────────── */
.samtec-stats {
  background: var(--g-brand) !important;
  padding: 3.5rem 0 !important;
  position: relative;
  overflow: hidden;
}

.samtec-stats::before {
  content: '';
  position: absolute;
  right: -5%;
  top: -60%;
  width: 400px;
  height: 400px;
  border-radius: var(--rf);
  border: 60px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.samtec-stats .stat-number {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff !important;
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15rem;
}

.samtec-stats .stat-label {
  color: rgba(255,255,255,.75) !important;
  font-size: .875rem;
  font-weight: 500;
  margin-top: .5rem;
  letter-spacing: .01em;
}

/* Vertical dividers on desktop */
@media (min-width: 768px) {
  .samtec-stats .col-md-3:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.15);
  }
}


/* ───────────────────────────────────────────────────────────────
   12. WHY CHOOSE US / ABOUT SECTION
─────────────────────────────────────────────────────────────── */
.grids_info {
  padding: 1.25rem;
  background: var(--bg-alt);
  border-radius: var(--r3);
  border: 1px solid var(--border);
  transition: background var(--t2), border-color var(--t2);
}

.grids_info:hover {
  background: var(--blue-lt);
  border-color: var(--blue);
}

.grids_info i {
  font-size: 1.75rem;
  color: var(--blue);
  flex-shrink: 0;
}

.grids_info .detail h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .25rem;
}

.grids_info .detail p {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* About page checklist */
.list-about-2 { list-style: none; padding: 0; margin: 0; }

.list-about-2 li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  color: var(--body);
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}

.list-about-2 li:last-child { border-bottom: none; }

.list-about-2 li i {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: .2rem;
  font-size: 1rem;
}


/* ───────────────────────────────────────────────────────────────
   13. TESTIMONIALS (.w3l-index4)
─────────────────────────────────────────────────────────────── */
.w3l-index4 {
  background: var(--g-hero) !important;
  position: relative;
  overflow: hidden;
}

.w3l-index4::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9,10,56,.35);
  z-index: 0;
}

.w3l-index4 > .container { position: relative; z-index: 1; }

.w3l-index4 .title-main,
.w3l-index4 .small-title,
.w3l-index4 .title-style {
  position: relative;
  z-index: 1;
}

.w3l-index4 .small-title { color: var(--blue) !important; }
.w3l-index4 .title-style { color: #fff !important; }

.w3l-index4 .quote {
  font-size: 1.05rem !important;
  font-style: italic;
  color: rgba(255,255,255,.92) !important;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

.w3l-index4 .source {
  color: var(--blue) !important;
  font-weight: 600;
  font-size: .875rem;
  position: relative;
  z-index: 1;
}

/* Decorative quote mark */
.w3l-index4 .content-slider::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8rem;
  color: rgba(41,171,226,.12);
  font-family: Georgia, serif;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}

.w3l-index4 .content-slider { position: relative; }


/* ───────────────────────────────────────────────────────────────
   14. TECHNOLOGY PARTNERS MARQUEE
─────────────────────────────────────────────────────────────── */
.samtec-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: .5rem 0;
}

/* Fade edges */
.samtec-marquee::before,
.samtec-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.samtec-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), transparent);
}

.samtec-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--white), transparent);
}

[data-theme="dark"] .samtec-marquee::before {
  background: linear-gradient(90deg, var(--white), transparent);
}

[data-theme="dark"] .samtec-marquee::after {
  background: linear-gradient(270deg, var(--white), transparent);
}

.samtec-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: samtecMarquee 32s linear infinite;
}

.samtec-marquee:hover .samtec-marquee-track {
  animation-play-state: paused;
}

.samtec-marquee-track a {
  display: inline-flex;
  text-decoration: none;
}

.samtec-marquee-track img {
  height: 48px;
  width: auto;
  margin: 0 2.5rem;
  filter: grayscale(100%) opacity(.6);
  transition: filter var(--t2), transform var(--t2);
  object-fit: contain;
}

.samtec-marquee-track img:hover {
  filter: grayscale(0%) opacity(1) drop-shadow(0 6px 14px rgba(41,171,226,.35));
  transform: scale(1.1) translateY(-3px);
}

/* A partner logo file that isn't actually on disk (see layouts/footer.php's
   marquee-img error handler) swaps to this wordmark chip instead of the
   browser's broken-image icon — reads as an intentional "logo bar" design
   rather than a missing asset. */
.samtec-marquee-track .tp-logo-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; margin: 0 2.5rem; padding: 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-family: var(--ff-display);
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  color: var(--muted); white-space: nowrap;
  transition: color var(--t2), border-color var(--t2), transform var(--t2), box-shadow var(--t2);
}
.samtec-marquee-track .tp-logo-fallback:hover {
  color: var(--blue-dk); border-color: var(--blue-dk);
  box-shadow: var(--s-accent);
  transform: scale(1.06) translateY(-3px);
}

/* A content photo (hero banner, about photo, team photo) that 404s swaps
   to this branded panel (see layouts/footer.php) instead of the browser's
   broken-image icon — the swapped-in element keeps the original <img>'s
   own classes (.wcs-image / .pgb-img / .ab-image / .tm-photo), so its
   sizing, aspect-ratio, radius, shadow and border all still apply; this
   rule only adds the icon-on-pattern fill those classes don't already set. */
div.img-fallback {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(41,171,226,.16), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(30,32,112,.14), transparent 55%),
    var(--g-light);
  overflow: hidden;
}
.img-fallback::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(30,32,112,.14) 1px, transparent 1px);
  background-size: 20px 20px;
}
.img-fallback i {
  position: relative;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--blue-dk);
  opacity: .3;
}

@keyframes samtecMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ───────────────────────────────────────────────────────────────
   15. CTA / CONTENT SECTIONS (.w3l-content1)
─────────────────────────────────────────────────────────────── */
.w3l-content1 {
  background: var(--g-cta) !important;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
}

.w3l-content1::before {
  content: '';
  position: absolute;
  right: -5%;
  top: -40%;
  width: 600px;
  height: 600px;
  border-radius: var(--rf);
  border: 80px solid rgba(255,255,255,.04);
  pointer-events: none;
}

.w3l-content1::after {
  content: '';
  position: absolute;
  right: 5%;
  bottom: -30%;
  width: 300px;
  height: 300px;
  border-radius: var(--rf);
  border: 50px solid rgba(41,171,226,.08);
  pointer-events: none;
}

.w3l-content1 .title-style { color: #fff !important; }

.w3l-content1 .text-light,
.w3l-content1 .text-white { color: rgba(255,255,255,.85) !important; }

.w3l-content1 .row { position: relative; z-index: 1; }


/* ───────────────────────────────────────────────────────────────
   16. CONTACT INFO ITEMS
─────────────────────────────────────────────────────────────── */
.contact-address {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--s1);
  transition: box-shadow var(--t2), border-color var(--t2);
}

.contact-address:hover {
  box-shadow: var(--s2);
  border-color: var(--blue);
}

.contact-icon i {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-lt);
  border-radius: var(--r2);
  font-size: 1.125rem;
  color: var(--blue);
  flex-shrink: 0;
}

.contact-text {
  font-size: .875rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .25rem;
}

.contact-para { color: var(--muted); font-size: .9rem; margin: 0; }

/* Contact footer info in old pages */
.href1, .href2 {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.href1 a, .href2 a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

/* Map */
.map-w3layouts {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
  border-radius: var(--r4);
  box-shadow: var(--s2);
}

.map-contact { padding: 0 0 3rem; }


/* ───────────────────────────────────────────────────────────────
   18. FORMS
─────────────────────────────────────────────────────────────── */
.form-control {
  font-family: var(--ff);
  font-size: .9rem;
  color: var(--body);
  background: var(--surface);
  border: 1.5px solid var(--border-s);
  border-radius: var(--r2);
  padding: .75rem 1rem;
  transition: border-color var(--t1), box-shadow var(--t1);
  height: auto;
}

.form-control:focus {
  color: var(--body);
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(41,171,226,.15);
  outline: none;
}

.form-control::placeholder { color: var(--light); }

textarea.form-control {
  min-height: 130px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

[data-theme="dark"] .form-control {
  background: var(--surface);
  border-color: var(--border-s);
  color: var(--body);
}


/* ───────────────────────────────────────────────────────────────
   19. HOME HERO SLIDER
─────────────────────────────────────────────────────────────── */
/* Override all slide backgrounds with on-brand gradient */
.slider { position: relative; }

.slider .slide,
.slider .slide:nth-child(1),
.slider .slide:nth-child(2),
.slider .slide:nth-child(3),
.slider .slide:nth-child(4),
.slider .slide:nth-child(5),
.slider .slide:nth-child(6) {
  background: var(--g-hero) !important;
}

/* Geometric decorative shape (right side) */
.slider .slide::before {
  content: '';
  position: absolute;
  right: 3%;
  top: 10%;
  width: 420px;
  height: 420px;
  border-radius: var(--rf);
  border: 70px solid rgba(41,171,226,.08);
  pointer-events: none;
  z-index: 0;
}

.slider .slide::after {
  content: '';
  position: absolute;
  right: 10%;
  top: 25%;
  width: 200px;
  height: 200px;
  border-radius: var(--rf);
  border: 36px solid rgba(30,32,112,.08);
  pointer-events: none;
  z-index: 0;
}

/* Remove old animated pan */
.slider .slide .bg-layer {
  background: none !important;
  animation: none !important;
  position: relative;
  z-index: 1;
}

/* Slide eyebrow badge */
.slider .slide .content h6 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue) !important;
  background: rgba(41,171,226,.13);
  display: inline-block;
  padding: .45rem 1.1rem;
  border-radius: var(--rp);
  border: 1px solid rgba(41,171,226,.28);
  margin-bottom: 1.5rem;
}

.slider .slide .content h3 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff !important;
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin-bottom: 2rem;
}

.slider .slide .content .btn-style {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r4) !important;
  padding: .875rem 2rem !important;
  font-size: .95rem !important;
  box-shadow: var(--s-accent);
}

.slider .slide .content .btn-style:hover {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
  transform: translateY(-2px) !important;
}

/* Content fade-in animations */
.slider .slide .content h6,
.slider .slide .content h3,
.slider .slide .content .btn {
  opacity: 0;
  transform: translateY(24px);
}

.slider .slide.current .content h6 {
  animation: smtFadeUp .8s ease forwards .10s;
}

.slider .slide.current .content h3 {
  animation: smtFadeUp .8s ease forwards .28s;
}

.slider .slide.current .content .btn,
.slider .slide.current .content .btn-style {
  animation: smtFadeUp .8s ease forwards .46s;
}

@keyframes smtFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Slider nav buttons */
.buttons {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  z-index: 10;
  display: flex;
  gap: .75rem;
}

.buttons button {
  width: 44px;
  height: 44px;
  border-radius: var(--rf);
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t2);
  backdrop-filter: blur(4px);
}

.buttons button:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  transform: scale(1.08);
}


/* ───────────────────────────────────────────────────────────────
   20. FOOTER — "Signal Deck" (rebuilt). Prefix: ft-
─────────────────────────────────────────────────────────────── */
.ft {
  background: var(--foot-bg);
  position: relative;
  overflow: hidden;
}

/* Glowing gradient hairline seams the footer to the CTA band above it */
.ft::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41,171,226,.55) 25%, rgba(89,216,255,.45) 55%, transparent 85%);
  z-index: 2;
  pointer-events: none;
}

/* ── Restrained background: one static grid + one soft glow + one breathing watermark ── */
.ft-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Static, restrained — a soft ambient glow with no drift/pulse animation,
   so the dark footer reads as premium/engineering rather than sci-fi. */
.ft-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -220px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  background: radial-gradient(circle, rgba(41,171,226,.22), transparent 70%);
}

/* Fine engineering/blueprint grid — the only "technical" texture in the
   footer, kept at extremely low opacity per design brief. */
.ft-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 35%, transparent 90%);
}

/* ── Top: brand + link columns, laid out on CSS Grid ── */
.ft-top {
  position: relative;
  z-index: 1;
  padding: 5.5rem 0 4rem;
}

.ft-layout {
  display: grid;
  grid-template-columns: 1.3fr .9fr .9fr 1.1fr;
  gap: 3rem;
}

.ft-layout > * + * {
  border-left: 1px solid rgba(255,255,255,.07);
  padding-left: 3rem;
}

/* Logo — light pill so the navy wordmark stays legible on the dark footer */
.ft-logo {
  display: inline-flex;
  background: rgba(255,255,255,.96);
  padding: .6rem 1.15rem;
  border-radius: var(--r2);
  margin-bottom: 1.4rem;
  transition: box-shadow var(--t2), transform var(--t2);
}
.ft-logo:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(41,171,226,.14), var(--s-blue); }
.ft-logo img { height: 38px; width: auto; display: block; }

.ft-tagline {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1rem;
}

.ft-desc {
  font-size: .875rem;
  color: var(--foot-t);
  line-height: 1.75;
  margin: 0 0 1.75rem;
  max-width: 320px;
}

.ft-social { display: flex; gap: .625rem; }

.ft-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rf);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--foot-l);
  font-size: .9rem;
  text-decoration: none;
  transition: all var(--t2);
}
.ft-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); box-shadow: var(--s-blue); }
.ft-social a.is-facebook:hover  { background: #1877F2; border-color: #1877F2; box-shadow: 0 8px 20px rgba(24,119,242,.4); }
.ft-social a.is-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; box-shadow: 0 8px 20px rgba(220,39,67,.4); }
.ft-social a.is-whatsapp:hover  { background: #25D366; border-color: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,.4); }
.ft-social a.is-google:hover    { background: #4285F4; border-color: #4285F4; box-shadow: 0 8px 20px rgba(66,133,244,.4); }
.ft-social a.is-youtube:hover   { background: #FF0000; border-color: #FF0000; box-shadow: 0 8px 20px rgba(255,0,0,.35); }
.ft-social a.is-linkedin:hover  { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 8px 20px rgba(10,102,194,.4); }
.ft-social a.is-tiktok:hover    { background: #010101; border-color: #010101; box-shadow: 0 8px 20px rgba(0,0,0,.4); }

/* ── Newsletter signup — lives in the contact strip as a 5th compact
   item, matching the icon + content rhythm of address/phone/WhatsApp/
   email; its status message floats below as a small popover so it never
   pushes the strip's height around. ── */
.ft-contactbar-item--newsletter { position: relative; }
.ft-newsletter-form { display: flex; align-items: center; gap: .5rem; }
.ft-newsletter-input {
  width: 170px; max-width: 100%;
  padding: .5rem .85rem;
  border-radius: var(--rf);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .8rem;
  font-family: inherit;
  transition: border-color var(--t2), background var(--t2);
}
.ft-newsletter-input::placeholder { color: var(--foot-t); }
.ft-newsletter-input:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,.1); }
.ft-newsletter-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rf);
  border: none;
  background: var(--g-blue);
  color: #fff;
  cursor: pointer;
  font-size: .75rem;
  transition: transform var(--t2), box-shadow var(--t2), opacity var(--t2);
}
.ft-newsletter-btn:hover { transform: translateY(-2px); box-shadow: var(--s-blue); }
.ft-newsletter-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.ft-newsletter-msg {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: .5rem .85rem;
  border-radius: var(--r2);
  background: var(--foot-s);
  border: 1px solid rgba(255,255,255,.1);
  font-size: .75rem; font-weight: 600; line-height: 1.4;
  box-shadow: var(--s2);
  z-index: 2;
}
.ft-newsletter-msg[hidden] { display: none; }
.ft-newsletter-msg.is-success { color: #6EE7B7; }
.ft-newsletter-msg.is-error { color: #FCA5A5; }

@media (max-width: 575px) {
  .ft-newsletter-input { width: 150px; }
}

/* Column index — a small engineering-register detail ("01", "02"...) */
.ft-col { position: relative; }
.ft-col-index {
  display: block;
  font-family: var(--ff-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(89,216,255,.45);
  margin-bottom: .5rem;
}

.ft-heading {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.375rem;
  padding-bottom: .75rem;
  position: relative;
}
.ft-heading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px; height: 2px;
  background: var(--g-blue);
  border-radius: var(--rf);
}

.ft-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .625rem; }
.ft-links li a {
  font-size: .875rem;
  color: var(--foot-l);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 400;
  transition: color var(--t1), gap var(--t1);
}
.ft-links li a::before { content: '›'; color: var(--blue); font-weight: 700; font-size: 1rem; transition: transform var(--t1); }
.ft-links li a:hover { color: #fff; gap: .625rem; }
.ft-links li a:hover::before { transform: translateX(3px); }

/* ── SAMTEC Online Store — visually separated shop promo, distinct panel
   inside the footer. Promotes shop.samtec.lk only; no product data here. ── */
.ft-shop {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  padding: 2.25rem 0;
}

.ft-shop-inner { display: flex; align-items: center; gap: 1.75rem; }

.ft-shop-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r3);
  background: rgba(41,171,226,.12);
  border: 1px solid rgba(41,171,226,.22);
  color: var(--blue);
  font-size: 1.35rem;
}

.ft-shop-text { flex: 1 1 auto; min-width: 0; }

.ft-shop-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hx-accent, #59D8FF);
  margin-bottom: .4rem;
}

.ft-shop-domain {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--foot-t);
  padding: .15rem .55rem;
  border-radius: var(--rf);
  border: 1px solid rgba(255,255,255,.14);
}

.ft-shop-title {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .3rem;
}

.ft-shop-desc { font-size: .85rem; color: var(--foot-t); line-height: 1.6; margin: 0; max-width: 640px; }

.ft-shop-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: var(--rf);
  background: var(--g-accent);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--s-accent);
  transition: all var(--t2);
}
.ft-shop-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,139,191,.4); }

@media (max-width: 767px) {
  .ft-shop-inner { flex-direction: column; text-align: center; }
  .ft-shop-domain { display: block; margin-top: .3rem; width: fit-content; margin-inline: auto; }
  .ft-shop-btn { width: 100%; justify-content: center; }
}

/* ── Contact strip — compact, admin-managed address/phone/WhatsApp/email ── */
.ft-contactbar { position: relative; z-index: 1; padding: 1.5rem 0; }

.ft-contactbar-inner {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}

.ft-contactbar-item { display: flex; align-items: center; gap: .625rem; }

.ft-contactbar-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--rf);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--blue);
  font-size: .75rem;
}

.ft-contactbar-item a, .ft-contactbar-item span {
  font-size: .8125rem;
  color: var(--foot-l);
  text-decoration: none;
  transition: color var(--t1);
}
.ft-contactbar-item a:hover { color: #fff; }

@media (max-width: 575px) {
  .ft-contactbar-inner { flex-direction: column; align-items: stretch; gap: .9rem; }
  .ft-contactbar-item { justify-content: center; }
}

/* ── Bottom bar ── */
.ft-bottom { position: relative; z-index: 1; padding: 1.5rem 0; }

.ft-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

.ft-copy { font-size: .82rem; color: var(--foot-t); margin: 0; }

.ft-legal { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; order: 2; }
.ft-legal a { font-size: .82rem; color: var(--foot-t); text-decoration: none; transition: color var(--t1); position: relative; }
.ft-legal a:hover { color: var(--blue); }
.ft-legal a:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -.6rem; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  transform: translateY(-50%);
}

.ft-credit {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: var(--foot-t);
  text-decoration: none;
  padding: .4rem .85rem;
  border-radius: var(--rf);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  transition: all var(--t2);
  order: 3;
}
.ft-credit i { color: var(--blue); font-size: .72rem; }
.ft-credit-brand { font-weight: 700; background: var(--g-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-credit:hover { border-color: rgba(41,171,226,.4); background: rgba(41,171,226,.09); color: var(--foot-l); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(41,171,226,.18); }

/* ── Responsive: tablet — collapse to 2 columns, brand + contact go full width ── */
@media (max-width: 991px) {
  .ft-layout { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-layout > * { border-left: none !important; padding-left: 0 !important; }
  .ft-brand { padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .ft-desc { max-width: 480px; }
}

/* ── Responsive: mobile — single column stack ── */
@media (max-width: 575px) {
  .ft-top { padding: 4rem 0 3rem; }
  .ft-layout { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .ft-col:not(:last-child) { padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .ft-bottom-inner { flex-direction: column; text-align: center; }
  .ft-legal { order: 2; justify-content: center; }
  .ft-credit { order: 3; }
}


/* ───────────────────────────────────────────────────────────────
   21. WHATSAPP FLOAT + BACK TO TOP
─────────────────────────────────────────────────────────────── */
/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: #25D366;
  border-radius: var(--rf);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float, 900);
  box-shadow: 0 6px 20px rgba(37,211,102,.40);
  transition: all var(--t2);
  text-decoration: none;
  padding: 0;
}

.whatsapp-float i {
  font-size: 24px;
  color: #fff;
}

.whatsapp-float:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,211,102,.50);
  background: #1aad55;
}

/* Back to top button — sized to match .whatsapp-float above it */
#movetop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: var(--g-brand);
  border: none;
  border-radius: var(--rf);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float, 900);
  box-shadow: var(--s-blue);
  transition: all var(--t2);
}

#movetop:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(41,171,226,.40);
}


/* ───────────────────────────────────────────────────────────────
   22. AOS / SCROLL ANIMATION OVERRIDE
─────────────────────────────────────────────────────────────── */
/* Slightly smoother AOS defaults */
[data-aos] {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ───────────────────────────────────────────────────────────────
   23. LEGACY OVERRIDES (keep old pages working)
─────────────────────────────────────────────────────────────── */
/* Remove old canvas.css glow effects if they sneak through */
.hero-logo img { filter: none !important; animation: none !important; }
.text-carousel-container { display: none !important; }

/* Old nav-fixed state override */


/* Hide old whatsapp btn inside header (replaced in new header) */



/* ───────────────────────────────────────────────────────────────
   24. REDUCED MOTION
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .samtec-marquee-track,
  .slider .slide .content h6,
  .slider .slide .content h3,
  .slider .slide .content .btn,
  .slider .slide .content .btn-style {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .samtec-marquee-track { animation-play-state: paused !important; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   25. RESPONSIVE
─────────────────────────────────────────────────────────────── */

/* ── X-Small / Mobile  < 576px ── */
@media (max-width: 575px) {
  .inner-banner { padding: 7.9rem 0 2.5rem !important; }
  .inner-text-title { font-size: 1.75rem !important; }

  .samtec-stats { padding: 2.5rem 0 !important; }
  .samtec-stats .col-6 { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0; }
  .samtec-stats .col-6:last-child,
  .samtec-stats .col-6:nth-last-child(2) { border-bottom: none; }

  .slider .slide::before { display: none; }
  .slider .slide::after { display: none; }

  .buttons { right: 1rem; bottom: 1.5rem; }

  .st-footer__main { padding: 3.5rem 0 2rem; }

  .whatsapp-float { width: 44px; height: 44px; bottom: 5rem; right: 1rem; }
  .whatsapp-float i { font-size: 22px; }
  #movetop { width: 44px; height: 44px; right: 1rem; bottom: 1rem; }

  .box-wrap { padding: 1.625rem 1.375rem; }
}

/* ── Small  576 – 767px ── */
@media (min-width: 576px) and (max-width: 767px) {
  .inner-banner { padding: 9.5rem 0 3rem !important; }

  .st-footer__main { padding: 4rem 0 2.5rem; }
  .st-footer__desc { max-width: 100%; }
}

/* ── Medium  768 – 991px ── */
@media (min-width: 768px) and (max-width: 991px) {
  

  .inner-banner::before { width: 320px; height: 320px; }

  .st-footer__main { padding: 4.5rem 0 3rem; }
}

/* ── Large  992px + (desktop) ── */


/* ── XL  1200px + ── */
@media (min-width: 1200px) {
  .slider .slide::before { width: 500px; height: 500px; }
}

/* ───────────────────────────────────────────────────────────────
   29. CTA BAND (rebuilt) — restrained: one glow, one grid, no ghost
   icon or pulsing rings. Prefix: ftc-
─────────────────────────────────────────────────────────────── */
.ftc {
  position: relative;
  overflow: hidden;
  padding: 3.75rem 0;
  background: linear-gradient(155deg, #090A38 0%, #13154D 38%, #1E2070 72%, #116E99 100%);
  isolation: isolate;
}

.ftc-glow {
  position: absolute;
  width: 560px; height: 560px;
  right: -14%; top: -30%;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  background: radial-gradient(circle, rgba(89,216,255,.28), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ftc-glow--b {
  right: auto; left: -12%; top: auto; bottom: -35%;
  width: 480px; height: 480px;
  opacity: .4;
  background: radial-gradient(circle, rgba(41,171,226,.24), transparent 70%);
}

.ftc-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 30%, transparent 80%);
}

.ftc .container { position: relative; z-index: 1; }

/* ── Elevated glass card that holds the CTA content, with blueprint-style
   corner brackets echoing the security/engineering brand ── */
.ftc-card {
  position: relative;
  padding: 1.85rem 3.75rem;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 80px -28px rgba(4,5,32,.6), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ftc-corner {
  position: absolute;
  width: 34px; height: 34px;
  border: 2px solid rgba(89,216,255,.55);
  pointer-events: none;
}
.ftc-corner--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 28px; }
.ftc-corner--br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 28px; }

.ftc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.ftc-text { max-width: 620px; }

.ftc-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--hx-accent);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .65rem;
}
.ftc-eyebrow i { font-size: .7rem; }

.ftc-title {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 .85rem;
}

.ftc-title-accent {
  background: linear-gradient(135deg, var(--hx-accent), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ftc-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0 0 .85rem;
}
.ftc-sub strong { color: #fff; }

.ftc-badge {
  display: inline-flex; align-items: center; gap: .65rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
  font-size: .875rem;
}
.ftc-badge i {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-accent), var(--blue));
  color: var(--navy-dk); font-size: .8rem;
}
.ftc-badge strong { color: #fff; }

.ftc-divider { flex-shrink: 0; align-self: stretch; width: 1px; background: rgba(255,255,255,.14); }

.ftc-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: .85rem; }

.ftc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.75rem;
  border-radius: var(--rf);
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all var(--t2);
}

.ftc-btn--primary {
  /* --g-blue (blue-dk→blue) drops as low as 2.6:1 for white text at its
     lighter end — under WCAG AA. --g-accent is the same darker cyan pairing
     already used for the admin panel's primary buttons (~4.6–5.7:1). */
  background: var(--g-accent);
  color: #fff;
  box-shadow: var(--s-accent);
}
.ftc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,139,191,.45); }

.ftc-btn--whatsapp { background: #25D366; color: #fff; }
.ftc-btn--whatsapp:hover { background: #1aad55; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.35); }

/* ── Responsive ── */
@media (max-width: 991px) {
  .ftc-card { padding: 1.75rem 2.25rem; }
  .ftc-inner { flex-direction: column; text-align: center; gap: 1.25rem; }
  .ftc-text { max-width: none; }
  .ftc-eyebrow { margin-left: auto; margin-right: auto; }
  .ftc-badge { margin: 0 auto; }
  .ftc-divider { width: 100%; height: 1px; }
  .ftc-actions { flex-direction: row; justify-content: center; }
}

@media (max-width: 575px) {
  .ftc { padding: 2.25rem 0; }
  .ftc-card { padding: 1.5rem 1.25rem; border-radius: 22px; }
  .ftc-corner { width: 24px; height: 24px; }
  .ftc-actions { flex-direction: column; width: 100%; }
  .ftc-btn { width: 100%; }
}


/* ================================================================
   SAMTEC HERO v5.0 — Edge-to-Edge Split Experience. Prefix: sh- (all hero elements)
   Left 70% full-bleed banner slider · Right 30% one-at-a-time service card carousel
   Zero outer padding — both columns align flush, edge-to-edge, no gaps
   Brand tokens scoped locally so this section owns the true brand palette
   ================================================================ */

.sh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  margin: 0;
  padding-top: 136px;
  background: linear-gradient(155deg, var(--hx-dark) 0%, #14123f 45%, var(--hx-primary) 100%);
}
@media (max-width: 768px) { .sh { padding-top: 152px; } }
@media (max-width: 640px) { .sh { padding-top: 126px; } }

.sh-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 0;
  align-items: stretch;
  width: 100%;
}

/* ── LEFT: full-bleed banner slider (70%) ── */
.sh-left { min-width: 0; position: relative; }

.sh-left .carousel,
.sh-left .carousel-inner,
.sh-left .carousel-item { height: 100%; }

.sh-slide {
  position: relative;
  width: 100%;
  height: clamp(560px, 88vh, 840px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.sh-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11,16,32,.95) 0%, rgba(11,16,32,.87) 38%, rgba(46,42,114,.58) 74%, rgba(54,164,217,.24) 100%);
}

.sh-slide__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 3rem 4.5rem;
}

.sh-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem .4rem .7rem;
  border-radius: var(--rf);
  background: rgba(89,216,255,.1);
  border: 1px solid rgba(89,216,255,.3);
  color: var(--hx-accent);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(6px);
}
.sh-kicker i { font-size: .72rem; }

.sh-sub {
  font-family: var(--ff-display);
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 1.15rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.3);
}

.sh-desc {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.72);
  max-width: 520px;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.sh-cta-group { display: flex; flex-wrap: wrap; gap: .9rem; }

.sh-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.75rem;
  border-radius: var(--r2);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  transition: all var(--t2);
}
.sh-btn--pri {
  background: linear-gradient(135deg, var(--hx-secondary) 0%, var(--hx-accent) 100%);
  color: var(--hx-dark);
  box-shadow: 0 10px 30px -6px rgba(89,216,255,.45);
}
.sh-btn--pri:hover { color: var(--hx-dark); transform: translateY(-2px); box-shadow: 0 16px 38px -6px rgba(89,216,255,.6); }
.sh-btn--sec {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(8px);
}
.sh-btn--sec:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(89,216,255,.5); transform: translateY(-2px); }

/* Ambient futuristic FX — one shared layer over every slide (grid, glow, streaks, particles) */
.sh-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.sh-fx-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(89,216,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,216,255,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 30% 45%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 65% 60% at 30% 45%, #000 35%, transparent 80%);
  opacity: .5;
  animation: shGridPan 44s linear infinite;
}
@keyframes shGridPan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 112px, 56px 112px; }
}

.sh-fx-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .45;
  animation: shGlowFloat 15s ease-in-out infinite;
}
.sh-fx-glow--a { width: 420px; height: 420px; left: -8%; top: 4%;  background: radial-gradient(circle, var(--hx-accent), transparent 70%); }
.sh-fx-glow--b { width: 380px; height: 380px; left: 55%; bottom: -8%; background: radial-gradient(circle, var(--hx-secondary), transparent 70%); animation-delay: -7.5s; }
@keyframes shGlowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(3%, -4%) scale(1.08); }
}

.sh-fx-streak {
  position: absolute;
  height: 1px;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(89,216,255,.55), transparent);
  opacity: 0;
  transform: translateX(-120%) rotate(-16deg);
  animation: shStreakSweep 9s ease-in infinite;
}
.sh-fx-streak--a { top: 18%; left: 0; animation-delay: 1s; }
.sh-fx-streak--b { top: 64%; left: 0; animation-delay: 5.5s; }
@keyframes shStreakSweep {
  0%   { transform: translateX(-120%) rotate(-16deg); opacity: 0; }
  8%   { opacity: .85; }
  35%  { opacity: 0; }
  100% { transform: translateX(220%) rotate(-16deg); opacity: 0; }
}

.sh-fx-particles { position: absolute; inset: 0; }
.sh-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--hx-accent);
  box-shadow: 0 0 8px 2px rgba(89,216,255,.65);
  opacity: 0;
  animation: shParticleFloat 11s ease-in-out infinite;
}
@keyframes shParticleFloat {
  0%   { transform: translateY(0) scale(.6);    opacity: 0; }
  15%  { opacity: .8; }
  50%  { transform: translateY(-38px) scale(1); opacity: .5; }
  85%  { opacity: .1; }
  100% { transform: translateY(-70px) scale(.5); opacity: 0; }
}
.sh-particle:nth-child(1) { left: 5%;  top: 78%; animation-delay: 0s;    animation-duration: 10s; }
.sh-particle:nth-child(2) { left: 12%; top: 28%; animation-delay: 1.2s; animation-duration: 12s; }
.sh-particle:nth-child(3) { left: 20%; top: 58%; animation-delay: 2.4s; animation-duration: 9s;  }
.sh-particle:nth-child(4) { left: 27%; top: 14%; animation-delay: .6s;  animation-duration: 13s; }
.sh-particle:nth-child(5) { left: 34%; top: 82%; animation-delay: 3.1s; animation-duration: 11s; }
.sh-particle:nth-child(6) { left: 41%; top: 42%; animation-delay: 1.8s; animation-duration: 14s; }
.sh-particle:nth-child(7) { left: 48%; top: 68%; animation-delay: 4s;   animation-duration: 10s; }
.sh-particle:nth-child(8) { left: 55%; top: 18%; animation-delay: 2.9s; animation-duration: 12s; }
.sh-particle:nth-child(9) { left: 62%; top: 52%; animation-delay: .3s;  animation-duration: 9s;  }
.sh-particle:nth-child(10) { left: 69%; top: 8%;  animation-delay: 3.6s; animation-duration: 15s; }
.sh-particle:nth-child(11) { left: 76%; top: 72%; animation-delay: 1.5s; animation-duration: 11s; }
.sh-particle:nth-child(12) { left: 83%; top: 36%; animation-delay: 2.1s; animation-duration: 13s; }
.sh-particle:nth-child(13) { left: 9%;  top: 48%; animation-delay: 4.4s; animation-duration: 10s; }
.sh-particle:nth-child(14) { left: 46%; top: 4%;  animation-delay: .9s;  animation-duration: 12s; }
.sh-particle:nth-child(15) { left: 60%; top: 88%; animation-delay: 3.3s; animation-duration: 9s;  }
.sh-particle:nth-child(16) { left: 88%; top: 60%; animation-delay: 1.1s; animation-duration: 14s; }

/* Floating stat badge — one per slide */
.sh-badge {
  position: absolute;
  right: 3rem;
  bottom: 6.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.2rem;
  background: rgba(11,16,32,.55);
  border: 1px solid rgba(89,216,255,.28);
  border-radius: var(--r3);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.5);
  animation: shBadgeFloat 5s ease-in-out infinite;
}
.sh-badge-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark);
  font-size: 1rem;
}
.sh-badge-value { display: block; font-family: var(--ff-display); font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.15; }
.sh-badge-label { display: block; font-size: .68rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .04em; }
@keyframes shBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.sh-nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: var(--r3);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  backdrop-filter: blur(10px);
  transition: all var(--t2);
}
.sh-nav:hover { background: rgba(89,216,255,.18); border-color: rgba(89,216,255,.5); color: var(--hx-accent); box-shadow: 0 0 24px rgba(89,216,255,.35); }
.sh-nav--prev { left: 1.5rem; }
.sh-nav--next { right: 1.5rem; }

/* ── Slide controls: overlaid bottom bar — progress · dots · counter ── */
.sh-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 4.5rem;
  background: linear-gradient(0deg, rgba(11,16,32,.65) 0%, transparent 100%);
}

.sh-progress { flex: 1; height: 3px; border-radius: var(--rf); background: rgba(255,255,255,.15); overflow: hidden; }
.sh-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--rf);
  background: linear-gradient(90deg, var(--hx-secondary), var(--hx-accent));
  animation: shProgressFill 6s linear forwards;
}
@keyframes shProgressFill { from { width: 0%; } to { width: 100%; } }
.sh:hover .sh-progress-fill { animation-play-state: paused; }

.sh-dots.carousel-indicators {
  position: static;
  margin: 0;
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}
.sh-dots [data-bs-slide-to] {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  opacity: 1;
  border: 0;
  margin: 0;
  text-indent: -9999px;
  transition: all var(--t2);
}
.sh-dots [data-bs-slide-to].active {
  width: 22px;
  border-radius: var(--rf);
  background: linear-gradient(90deg, var(--hx-secondary), var(--hx-accent));
}

.sh-counter {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  flex-shrink: 0;
  font-family: var(--ff-display);
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .03em;
}
.sh-counter-current { color: #fff; font-weight: 700; font-size: .95rem; }
.sh-counter-sep { opacity: .4; }

/* ── RIGHT: one-at-a-time service card carousel (30%) ── */
.sh-right { min-width: 0; position: relative; border-left: 1px solid rgba(255,255,255,.08); }

.sh-vcarousel { position: relative; width: 100%; height: 100%; overflow: hidden; }

.sh-vcarousel-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sh-vcarousel-fx::before,
.sh-vcarousel-fx::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .4;
}
.sh-vcarousel-fx::before { width: 300px; height: 300px; right: -12%; top: -6%;  background: radial-gradient(circle, var(--hx-secondary), transparent 70%); }
.sh-vcarousel-fx::after { width: 260px; height: 260px; left: -14%;  bottom: -8%; background: radial-gradient(circle, var(--hx-accent), transparent 70%); }

.sh-vcarousel-track { position: relative; width: 100%; height: 100%; }

.sh-vcard {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.75rem;
  background: linear-gradient(165deg, rgba(46,42,114,.94) 0%, rgba(11,16,32,.97) 62%, rgba(54,164,217,.4) 135%);
  backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.sh-vcard.is-active { opacity: 1; transform: translateY(0) scale(1); z-index: 2; pointer-events: auto; }

.sh-vcard-num {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-family: var(--ff-display);
  font-size: 4.5rem;
  font-weight: 700;
  color: rgba(255,255,255,.06);
  line-height: 1;
  z-index: 0;
  user-select: none;
}

.sh-vcard-icon {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--r3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark);
  font-size: 1.6rem;
  box-shadow: 0 0 30px rgba(89,216,255,.4), 0 12px 28px rgba(0,0,0,.35);
  margin-bottom: 1.75rem;
  transition: transform var(--t2);
}
.sh-vcard.is-active:hover .sh-vcard-icon { transform: scale(1.08) rotate(-4deg); }

.sh-vcard-title {
  position: relative;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: .85rem;
}

.sh-vcard-desc {
  position: relative;
  font-size: .9375rem;
  color: rgba(255,255,255,.68);
  line-height: 1.65;
  margin-bottom: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sh-vcard-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(89,216,255,.4);
  color: var(--hx-accent);
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  transition: all var(--t2);
}
.sh-vcard-cta i { transition: transform var(--t2); }
.sh-vcard-cta:hover { color: #fff; border-color: #fff; }
.sh-vcard-cta:hover i { transform: translateX(4px); }

.sh-vcarousel-progress {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  right: 2rem;
  z-index: 3;
  display: flex;
  gap: .4rem;
}
.sh-vprogress-bar {
  flex: 1;
  height: 3px;
  border-radius: var(--rf);
  background: rgba(255,255,255,.18);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.sh-vprogress-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--hx-secondary), var(--hx-accent)); }
.sh-vprogress-bar.is-done .sh-vprogress-fill { width: 100%; }
.sh-vprogress-bar.is-active .sh-vprogress-fill { animation: shVProgressFill 5s linear forwards; }
@keyframes shVProgressFill { from { width: 0%; } to { width: 100%; } }
.sh-right:hover .sh-vprogress-bar.is-active .sh-vprogress-fill { animation-play-state: paused; }

/* ── Responsive ── */
@media (max-width: 1279px) {
  /* Left/right padding cleared to at least the 50px nav-arrow's footprint
     (left:1.5rem + 50px wide) so slide text never renders under the arrows. */
  .sh-slide__content { padding: 2.75rem 5.25rem; }
  .sh-controls { padding: 1.25rem 3.25rem; }
  .sh-vcard { padding: 2.5rem 2.25rem; }
}

@keyframes shMobileIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
  .sh-grid { grid-template-columns: 1fr; }

  /* Right-hand service-card block (the desktop "30%" column) is dropped
     entirely on phones/tablets — the hero becomes one full-bleed banner. */
  .sh-right { display: none; }

  .sh-slide {
    height: clamp(600px, 92vh, 780px);
    height: clamp(600px, 92dvh, 780px);
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* Vignette tuned to stay light near the top (so the image reads) and dark
     toward the bottom (so text + the floating control pill stay legible). */
  .sh-slide__overlay {
    background: linear-gradient(180deg, rgba(11,16,32,.32) 0%, rgba(11,16,32,.4) 32%, rgba(11,16,32,.85) 74%, rgba(11,16,32,.97) 100%);
  }

  .sh-slide__content {
    max-width: 520px;
    margin: 0 auto;
    padding: 2.5rem 1.75rem 5.5rem;
  }

  /* Content fades/slides in fresh each time a slide becomes active. */
  .carousel-item.active .sh-slide__content { animation: shMobileIn .75s cubic-bezier(.4,0,.2,1) both; }

  .sh-kicker { margin: 0 auto 1.5rem; }
  .sh-sub { font-size: clamp(2rem, 7vw, 2.75rem); margin-bottom: 1rem; }
  .sh-desc { margin: 0 auto 2rem; font-size: 1rem; }
  .sh-cta-group { justify-content: center; }

  .sh-nav { display: none; }
  .sh-badge { display: none; }

  /* Bottom controls become a floating glass pill overlaid on the image —
     never stacked in flow, so it can't push extra height (or a mismatched
     background colour) in below the slide. */
  .sh-controls {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 1.5rem;
    transform: translateX(-50%);
    width: auto;
    padding: .6rem 1.15rem;
    gap: .85rem;
    background: rgba(11,16,32,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.55);
  }
  .sh-progress { display: none; }
  .sh-counter { padding-left: .85rem; border-left: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 479px) {
  .sh-slide {
    height: clamp(560px, 90vh, 700px);
    height: clamp(560px, 90dvh, 700px);
  }
  .sh-slide__content { padding: 2rem 1.25rem 5rem; }
  .sh-sub { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .sh-desc { font-size: .9375rem; }
  .sh-cta-group { flex-direction: column; align-items: stretch; }
  .sh-btn { justify-content: center; }
  .sh-controls { padding: .5rem 1rem; gap: .65rem; bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-fx-grid,
  .sh-fx-glow,
  .sh-fx-streak,
  .sh-particle,
  .sh-badge,
  .sh-slide__content,
  .sh-vcard { animation: none !important; transition-duration: .01ms !important; }
}

/* ================================================================
   PROMO VIDEO — full-bleed embed, no padding. Prefix: hv-
   ================================================================ */
.hv {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: var(--hx-dark);
}

.hv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: none;
}

.hv-frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 118%;
  min-height: 118%;
  border: 0;
  display: block;
  transform: translate(-50%, -50%);
}

/* Bottom scrim so the caption stays legible over any footage */
.hv-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(11,16,32,.75) 0%, rgba(11,16,32,.0) 32%);
}

/* Title/subtitle caption — fades in on start, then fades out and stays hidden */
.hv-caption {
  position: absolute;
  left: 1.75rem;
  bottom: 1.75rem;
  z-index: 2;
  max-width: min(640px, 86%);
  opacity: 0;
  animation: hvCaptionShow .8s ease forwards;
}

.hv-caption-title {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: .35rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.hv-caption-sub {
  display: block;
  font-size: clamp(.8125rem, 1.4vw, .975rem);
  font-weight: 500;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

@keyframes hvCaptionShow {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Facade poster — shown until the visitor actually presses play, at which
   point JS removes this and injects the real iframe in its place. */
.hv-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Central play control — the only interactive element until the video is loaded */
.hv-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(11,16,32,.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--t2), transform var(--t2), border-color var(--t2);
}

.hv-play-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 767px) {
  .hv-frame { aspect-ratio: 4 / 3; }
  .hv-caption { left: 1.1rem; bottom: 1.1rem; max-width: 90%; }
  .hv-play-btn { width: 60px; height: 60px; font-size: 1.15rem; }
}

/* ================================================================
   HOW WE WORK — four-step process rail. Prefix: hw-
   ================================================================ */
.hw {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--bg-alt);
}

.hw-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 8% 100%, rgba(41,171,226,.08), transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(30,32,112,.06), transparent 70%);
}

.hw .container { position: relative; z-index: 1; }

.hw-head {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.hw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hw-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.hw-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

.hw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.hw-step {
  position: relative;
  padding: 2.25rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  text-align: left;
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}

.hw-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}

/* Connector arrow between steps (desktop only) */
@media (min-width: 992px) {
  .hw-step:not(:last-child)::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 2.9rem;
    right: -1.6rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rf);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--blue-dk);
    font-size: .8rem;
  }
}

.hw-step-num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 0;
  font-family: var(--ff-display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(30,32,112,.05);
  line-height: 1;
  user-select: none;
}

.hw-step-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 10px 24px -10px rgba(46,42,114,.55);
  margin-bottom: 1.5rem;
  transition: transform var(--t2);
}

.hw-step:nth-child(2n) .hw-step-icon {
  background: var(--rot-3);
  box-shadow: 0 10px 24px -10px var(--rot-3-shadow);
}

.hw-step:hover .hw-step-icon { transform: scale(1.08) rotate(-4deg); }

.hw-step-title {
  position: relative;
  z-index: 1;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .65rem;
  line-height: 1.3;
}

.hw-step-desc {
  position: relative;
  z-index: 1;
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Dot indicators — carousel mode only (mobile) */
.hw-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.hw-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rf);
  background: var(--border-s);
  cursor: pointer;
  transition: all var(--t2);
}

.hw-dot.is-active {
  width: 24px;
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .hw-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Mobile: horizontal snap carousel, one card at a glance with a peek of the next */
@media (max-width: 767px) {
  .hw { padding: 4rem 0; }
  .hw-head { margin-bottom: 2.5rem; }

  .hw-steps {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.1rem;
    padding: .25rem .25rem 1.25rem;
  }
  .hw-steps::-webkit-scrollbar { display: none; }

  .hw-step {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 1.85rem 1.5rem;
  }

  .hw-step:not(:last-child)::after { display: none; }

  .hw-dots { display: flex; }
}

@media (max-width: 420px) {
  .hw-step { flex-basis: 88%; }
}

/* ================================================================
   INDUSTRIES WE SERVE — icon card grid. Prefix: iw-
   ================================================================ */
.iw {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--off-wh);
}

.iw-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(41,171,226,.08), transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(30,32,112,.06), transparent 70%);
}

.iw .container { position: relative; z-index: 1; }

.iw-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.iw-head-text { max-width: 640px; }

.iw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.iw-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.iw-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

.iw-head-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: var(--rf);
  background: var(--surface);
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transition: all var(--t2);
}

.iw-head-cta:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

.iw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.iw-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  text-decoration: none;
  transition: all var(--t2);
}

.iw-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}

.iw-card-ghost {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  z-index: 0;
  font-size: 6.5rem;
  color: rgba(30,32,112,.045);
  transform: rotate(-8deg);
  transition: transform var(--t3), color var(--t3);
}

.iw-card:hover .iw-card-ghost {
  transform: rotate(0deg) scale(1.08);
  color: rgba(41,171,226,.09);
}

.iw-card:nth-child(3n+2) .iw-card-icon {
  background: var(--rot-3);
  box-shadow: 0 10px 24px -10px var(--rot-3-shadow);
}

.iw-card:nth-child(3n+3) .iw-card-icon {
  background: linear-gradient(135deg, var(--blue-dk), var(--blue));
  box-shadow: 0 10px 24px -10px rgba(41,171,226,.5);
}

.iw-card-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 10px 24px -10px rgba(46,42,114,.55);
  margin-bottom: 1.5rem;
  transition: transform var(--t2);
}

.iw-card:hover .iw-card-icon { transform: scale(1.08) rotate(-4deg); }

.iw-card-title {
  position: relative;
  z-index: 1;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .65rem;
  line-height: 1.3;
}

.iw-card-desc {
  position: relative;
  z-index: 1;
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.iw-card-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--hx-secondary);
}
.iw-card-link i { transition: transform var(--t2); }
.iw-card:hover .iw-card-link i { transform: translateX(4px); }

/* Photo variant — admin-managed "Card Image" on each Industry (see
   Admin -> Industries) shown as a header photo, mirroring .cs-card--photo. */
.iw-card--photo { padding: 0 0 2rem; }
.iw-card--photo .iw-card-media { position: relative; height: 170px; margin-bottom: 1.5rem; overflow: hidden; border-radius: var(--r4) var(--r4) 0 0; }
.iw-card--photo .iw-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t3); }
.iw-card--photo:hover .iw-card-media img { transform: scale(1.08); }
.iw-card--photo .iw-card-icon {
  position: absolute; left: 1.5rem; top: 140px; margin-bottom: 0;
  border: 4px solid var(--surface);
}
.iw-card--photo .iw-card-body { position: relative; z-index: 1; padding: 2.25rem 1.75rem 0; display: flex; flex-direction: column; flex-grow: 1; }

/* Dot indicators — carousel mode only (mobile) */
.iw-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.iw-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rf);
  background: var(--border-s);
  cursor: pointer;
  transition: all var(--t2);
}

.iw-dot.is-active {
  width: 24px;
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .iw-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: horizontal snap carousel, one card at a glance with a peek of the next */
@media (max-width: 767px) {
  .iw { padding: 4rem 0; }
  .iw-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; }
  .iw-head-cta { width: 100%; justify-content: center; }

  .iw-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.1rem;
    padding: .25rem .25rem 1.25rem;
  }
  .iw-grid::-webkit-scrollbar { display: none; }

  .iw-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 1.85rem 1.5rem;
  }

  .iw-dots { display: flex; }
}

@media (max-width: 420px) {
  .iw-card { flex-basis: 88%; }
}

/* ================================================================
   FEATURED PROJECTS — portfolio card grid. Prefix: pw-
   ================================================================ */
.pw {
  position: relative;
  padding: 6rem 0;
  background: var(--white);
}

.pw-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.pw-head-text { max-width: 640px; }

.pw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.pw-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.pw-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

.pw-head-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: var(--rf);
  background: var(--surface);
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transition: all var(--t2);
}

.pw-head-cta:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

/* ── Carousel — always a horizontal snap track, on every device ── */
.pw-carousel-wrap { position: relative; }

.pw-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1.75rem;
  padding: .5rem .25rem 1.5rem;
}
.pw-grid::-webkit-scrollbar { display: none; }

.pw-card {
  flex: 0 0 calc(33.333% - 1.17rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}

.pw-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}

.pw-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pw-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t3);
}

.pw-card:hover .pw-card-media img { transform: scale(1.08); }

.pw-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,16,32,.75) 0%, rgba(11,16,32,0) 55%);
}

.pw-card-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: var(--rf);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.pw-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.75rem;
}

.pw-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--h);
  line-height: 1.35;
  margin-bottom: .65rem;
}

.pw-card-desc {
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.pw-card-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--hx-secondary);
}
.pw-card-link i { transition: transform var(--t2); }
.pw-card:hover .pw-card-link i { transform: translateX(4px); }

/* Dot indicators — visible on every device, carousel spans all breakpoints */
.pw-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.pw-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rf);
  background: var(--border-s);
  cursor: pointer;
  transition: all var(--t2);
}

.pw-dot.is-active {
  width: 24px;
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
}

/* Prev/next arrow controls — desktop & tablet (mouse-driven) */
.pw-nav {
  position: absolute;
  top: 34%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rf);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--s2);
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--t2);
}

.pw-nav:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: scale(1.06);
}

.pw-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.pw-nav--prev { left: -22px; }
.pw-nav--next { right: -22px; }

/* ── Responsive card widths — carousel stays a carousel at every size ── */
@media (max-width: 991px) {
  .pw-card { flex-basis: calc(50% - .9rem); }
}

@media (max-width: 767px) {
  .pw { padding: 4rem 0; }
  .pw-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; }
  .pw-head-cta { width: 100%; justify-content: center; }
  .pw-grid { gap: 1.1rem; padding: .25rem .25rem 1.25rem; }
  .pw-card { flex-basis: 82%; }
  .pw-nav { display: none; }
}

@media (max-width: 420px) {
  .pw-card { flex-basis: 88%; }
}

/* ================================================================
   CLIENT FEEDBACK — review carousel. Prefix: tf-
   ================================================================ */
.tf {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--bg-alt);
}

.tf-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(41,171,226,.08), transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(30,32,112,.06), transparent 70%);
}

.tf .container { position: relative; z-index: 1; }

.tf-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.tf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.tf-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.tf-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

/* ── Carousel — always a horizontal snap track, on every device ── */
.tf-carousel-wrap { position: relative; }

.tf-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1.75rem;
  padding: .5rem .25rem 1.5rem;
}
.tf-grid::-webkit-scrollbar { display: none; }

.tf-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 calc(33.333% - 1.17rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}

.tf-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}

.tf-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.tf-quote-icon {
  font-size: 1.75rem;
  color: var(--blue-lt);
}

.tf-stars {
  display: inline-flex;
  gap: .2rem;
  font-size: .8rem;
  color: #F5A623;
}

.tf-quote {
  position: relative;
  z-index: 1;
  font-size: .975rem;
  color: var(--body);
  line-height: 1.65;
  margin: 0 0 1.75rem;
  flex-grow: 1;
}

.tf-author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.tf-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rf);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.tf-card:nth-child(3n+2) .tf-avatar {
  background: var(--rot-3);
}
.tf-card:nth-child(3n+3) .tf-avatar {
  background: linear-gradient(135deg, var(--blue-dk), var(--blue));
}

.tf-author-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.tf-author-name {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--h);
  line-height: 1.3;
}

.tf-author-role {
  font-size: .8125rem;
  color: var(--muted);
}

.tf-role-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--c-primary-dark, var(--h));
  background: var(--c-sage, rgba(0,0,0,.05));
  border-radius: 50px;
  padding: .2rem .6rem;
  margin-top: .2rem;
  width: fit-content;
}
.tf-role-tag i { font-size: .625rem; opacity: .75; }

.tf-source-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rf);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: #4285F4;
  font-size: .9rem;
}

/* Dot indicators — visible on every device, carousel spans all breakpoints */
.tf-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}

.tf-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rf);
  background: var(--border-s);
  cursor: pointer;
  transition: all var(--t2);
}

.tf-dot.is-active {
  width: 24px;
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
}

/* Prev/next arrow controls — desktop & tablet (mouse-driven) */
.tf-nav {
  position: absolute;
  top: 34%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rf);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--s2);
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--t2);
}

.tf-nav:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: scale(1.06);
}

.tf-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.tf-nav--prev { left: -22px; }
.tf-nav--next { right: -22px; }

/* ── Review platform CTAs ── */
.tf-review-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.tf-review-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.6rem;
  border-radius: var(--rf);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all var(--t2);
}

.tf-review-btn--google {
  background: var(--surface);
  border-color: var(--border);
  color: var(--h);
}
.tf-review-btn--google i { color: #4285F4; }
.tf-review-btn--google:hover {
  border-color: #4285F4;
  color: #4285F4;
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

.tf-review-btn--facebook {
  background: var(--surface);
  border-color: var(--border);
  color: var(--h);
}
.tf-review-btn--facebook i { color: #1877F2; }
.tf-review-btn--facebook:hover {
  border-color: #1877F2;
  color: #1877F2;
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

.tf-review-btn--all {
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
}
.tf-review-btn--all:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

/* ── Responsive card widths — carousel stays a carousel at every size ── */
@media (max-width: 991px) {
  .tf-card { flex-basis: calc(50% - .9rem); }
}

@media (max-width: 767px) {
  .tf { padding: 4rem 0; }
  .tf-head { margin-bottom: 2.25rem; }
  .tf-grid { gap: 1.1rem; padding: .25rem .25rem 1.25rem; }
  .tf-card { flex-basis: 85%; padding: 1.85rem 1.5rem; }
  .tf-nav { display: none; }
  .tf-review-btn { width: 100%; justify-content: center; }
  .tf-review-cta { flex-direction: column; }
}

@media (max-width: 420px) {
  .tf-card { flex-basis: 90%; }
}

/* ================================================================
   SECURITY IN ACTION — video carousel. Prefix: sia-
   Reuses the "Client Feedback" carousel's own head/track/nav/dots
   classes (.tf-head, .tf-carousel-wrap, .tf-grid, .tf-nav, .tf-dots,
   .tf-dot) for layout/behaviour so this is one more instance of the
   same proven horizontal-scroll-snap carousel, not a new mechanism —
   only the card's own contents (video frame, poster, play control,
   caption) need their own rules below.
   ================================================================ */
.sia { position: relative; overflow: hidden; padding: 6rem 0; background: var(--surface); }
.sia-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(41,171,226,.07), transparent 70%),
    radial-gradient(ellipse 55% 50% at 0% 0%, rgba(30,32,112,.05), transparent 70%);
}
.sia .container { position: relative; z-index: 1; }

.sia-card {
  position: relative;
  flex: 0 0 calc(33.333% - 1.17rem);
  scroll-snap-align: start;
  border-radius: var(--r4);
  overflow: hidden;
  background: var(--h);
  box-shadow: var(--s1);
  transition: transform var(--t2), box-shadow var(--t2);
}
.sia-card:hover { transform: translateY(-6px); box-shadow: var(--s3); }

.sia-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0b0f1f;
}

.sia-poster,
.sia-card-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom scrim so the caption stays legible over any footage, same
   technique as the homepage hero promo video (.hv-scrim). */
.sia-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,9,26,.88) 0%, rgba(6,9,26,.15) 45%, rgba(6,9,26,0) 65%);
  pointer-events: none;
  z-index: 1;
}

.sia-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(11,16,32,.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--t2), transform var(--t2), border-color var(--t2), opacity var(--t2);
}
.sia-play-btn:hover { background: var(--blue); border-color: var(--blue); transform: translate(-50%, -50%) scale(1.08); }
/* Dimmed rather than hidden while playing — a fully invisible control has
   no way to be found again on a touchscreen, which has no hover state to
   reveal it. Hover/focus still bring it to full opacity as a nicety on
   devices that do have one. */
.sia-play-btn.is-playing { opacity: .55; }
.sia-card:hover .sia-play-btn.is-playing,
.sia-play-btn.is-playing:focus-visible { opacity: 1; }
.sia-play-btn .fa-pause { display: none; }
.sia-play-btn.is-playing .fa-play { display: none; }
.sia-play-btn.is-playing .fa-pause { display: inline; }

.sia-card-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1.4rem;
  pointer-events: none;
}

.sia-card-title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

@media (max-width: 991px) {
  .sia-card { flex-basis: calc(50% - .9rem); }
}

@media (max-width: 767px) {
  .sia { padding: 4rem 0; }
  .sia-card { flex-basis: 85%; }
}

@media (max-width: 420px) {
  .sia-card { flex-basis: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .sia-card { transition: none; }
  .sia-card:hover { transform: none; }
}

/* ================================================================
   MEET OUR TEAM. Prefix: tm-
   ================================================================ */
.tm {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--white);
}

.tm-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 100% 0%, rgba(41,171,226,.07), transparent 70%),
    radial-gradient(ellipse 55% 50% at 0% 100%, rgba(30,32,112,.06), transparent 70%);
}

.tm .container { position: relative; z-index: 1; }

.tm-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.tm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.tm-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.tm-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

.tm-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

.tm-card {
  flex: 0 0 calc(25% - 1.32rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}

.tm-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}

.tm-photo-wrap { margin-bottom: 1.25rem; }

.tm-photo {
  width: 104px;
  height: 104px;
  border-radius: var(--rf);
  object-fit: cover;
  display: block;
  box-shadow: var(--s1);
}

.tm-photo--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
  font-weight: 700;
  font-size: 2.25rem;
}

.tm-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--h);
  margin: 0 0 .25rem;
}

.tm-role {
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue-dk);
  margin: 0;
}

.tm-socials {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.tm-social-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rf);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
  transition: all var(--t2);
}

.tm-social-link:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--s2);
}

.tm-social-link.is-facebook:hover { background: #1877F2; }
.tm-social-link.is-linkedin:hover { background: #0A66C2; }
.tm-social-link.is-twitter:hover { background: #1DA1F2; }
.tm-social-link.is-instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

@media (max-width: 991px) {
  .tm-card { flex-basis: calc(33.333% - 1.17rem); }
}

@media (max-width: 767px) {
  .tm { padding: 4rem 0; }
  .tm-head { margin-bottom: 2.25rem; }
  .tm-card { flex-basis: calc(50% - .9rem); padding: 1.75rem 1.25rem; }
}

@media (max-width: 480px) {
  .tm-card { flex-basis: 100%; }
}

/* ================================================================
   TRUSTED BY: CLIENTS + TECHNOLOGY PARTNERS. Prefix: tp-
   (logo marquee reuses the existing .samtec-marquee component)
   ================================================================ */
.tp {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--white);
}

.tp-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 8% 0%, rgba(41,171,226,.08), transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(30,32,112,.07), transparent 70%);
  animation: tpBgDrift 16s ease-in-out infinite alternate;
}

@keyframes tpBgDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -2%) scale(1.05); }
}

.tp .container { position: relative; z-index: 1; }

.tp-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.tp-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.tp-eyebrow i { position: relative; }

.tp-eyebrow i::before {
  position: relative;
  z-index: 1;
}

.tp-eyebrow i::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--rf);
  background: var(--blue);
  opacity: .35;
  animation: tpPulseRing 2.2s ease-out infinite;
  z-index: 0;
}

@keyframes tpPulseRing {
  0%   { transform: scale(.4); opacity: .45; }
  100% { transform: scale(1.7); opacity: 0; }
}

.tp-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.tp-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

/* ── Clients row: name chips (logo shown when the client has one) ── */
.tp-clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.tp-clients-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--h);
  white-space: nowrap;
}
.tp-clients-label i { color: var(--blue-dk); font-size: 1.15rem; }

.tp-clients-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.tp-client-chip {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 2.1rem;
  border-radius: var(--rf);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--h);
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: var(--s1);
  transition: all var(--t2);
  opacity: 0;
  animation: tpChipIn .6s var(--e) forwards;
}

@keyframes tpChipIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tp-client-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--e);
}

.tp-client-chip:hover::before { transform: translateX(120%); }

.tp-client-chip:hover {
  border-color: transparent;
  background: var(--g-brand);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--s2);
}

.tp-client-chip--logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-left: 1.1rem;
}

.tp-client-logo {
  height: 42px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.tp-client-name { position: relative; }

/* ── Divider between the two trust groups ── */
.tp-divider {
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
}

.tp-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
  overflow: hidden;
}

.tp-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  z-index: 0;
  animation: tpDividerTravel 3.6s ease-in-out infinite;
}

@keyframes tpDividerTravel {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.tp-divider span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 1.25rem;
  background: var(--white);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .tp { padding: 4rem 0; }
  .tp-head { margin-bottom: 2.25rem; }
  .tp-clients { gap: 1rem; margin-bottom: 2.25rem; }
  .tp-client-chip { font-size: .95rem; padding: .75rem 1.5rem; }
  .tp-client-chip--logo { gap: .75rem; padding-left: .85rem; }
  .tp-client-logo { height: 32px; max-width: 100px; }
}

/* ================================================================
   TESTIMONIALS PAGE — dedicated /testimonials listing. Prefix: tsp-
   (hero reuses .pgb; cards echo the homepage .tf-card look, but
   wrap in a plain responsive grid instead of a horizontal carousel)
   ================================================================ */
.tsp-section {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--off-wh);
}

.tsp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%, rgba(41,171,226,.08), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(30,32,112,.06), transparent 70%);
}

.tsp-section .container { position: relative; z-index: 1; }

.tsp-head { max-width: 640px; margin: 0 auto 2.75rem; text-align: center; }

.tsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 1.1rem;
}

.tsp-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.tsp-sub { font-size: 1.0625rem; color: var(--muted); margin: 0; }

.tsp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; }

.tsp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}
.tsp-card:hover { transform: translateY(-6px); box-shadow: var(--s3); border-color: transparent; }

.tsp-card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }

.tsp-quote-icon { font-size: 1.75rem; color: var(--blue-lt); }

.tsp-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--rf);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
.tsp-tag--service { background: var(--blue-lt); color: var(--blue-dk); }
.tsp-tag--product { background: #FFF1E6; color: #B85C00; }

.tsp-stars { display: inline-flex; gap: .2rem; font-size: .78rem; color: #F5A623; margin-bottom: 1rem; }

.tsp-quote { font-size: .975rem; color: var(--body); line-height: 1.65; margin: 0 0 1.75rem; flex-grow: 1; }

.tsp-author { display: flex; align-items: center; gap: .85rem; }

.tsp-avatar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--rf);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.tsp-card:nth-child(3n+2) .tsp-avatar { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); }
.tsp-card:nth-child(3n+3) .tsp-avatar { background: linear-gradient(135deg, var(--blue-dk), var(--blue)); }

.tsp-author-name { display: block; font-weight: 700; color: var(--h); font-size: .9375rem; }
.tsp-author-role { display: block; font-size: .8125rem; color: var(--muted); }

.tsp-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--muted); }
.tsp-empty i { font-size: 2rem; margin-bottom: .75rem; display: block; color: var(--border); }

@media (max-width: 767px) {
  .tsp-section { padding: 4rem 0; }
  .tsp-head { margin-bottom: 2.25rem; }
  .tsp-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .tsp-card { padding: 1.85rem 1.5rem; }
}

/* ================================================================
   CORE SERVICES — premium card grid. Prefix: cs-
   ================================================================ */
.cs {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--off-wh);
}

.cs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%, rgba(41,171,226,.08), transparent 70%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(30,32,112,.07), transparent 70%);
}

.cs .container { position: relative; z-index: 1; }

.cs-head {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cs-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.cs-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
}

/* ── Featured spotlight card (service #1) ──────────────────────
   Full-width photo banner styled like the hero slides, so the
   section opens with the same premium navy/cyan visual language
   used across the header and hero, instead of a plain card grid. */
.cs-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  margin-bottom: 1.75rem;
  border-radius: var(--r4);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  box-shadow: var(--s2);
  transition: transform var(--t2), box-shadow var(--t2);
}
.cs-feature:hover { transform: translateY(-6px); box-shadow: var(--s4); }

.cs-feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11,16,32,.95) 0%, rgba(11,16,32,.86) 42%, rgba(46,42,114,.55) 76%, rgba(54,164,217,.22) 100%);
}

.cs-feature-num {
  position: absolute;
  top: 1.5rem; right: 2rem;
  z-index: 1;
  font-family: var(--ff-display);
  font-size: 5rem;
  font-weight: 700;
  color: rgba(255,255,255,.08);
  line-height: 1;
  user-select: none;
}

.cs-feature-body {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 2.75rem 3rem;
}

.cs-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark);
  font-size: 1.5rem;
  box-shadow: 0 0 30px rgba(89,216,255,.4), 0 12px 28px rgba(0,0,0,.35);
  margin-bottom: 1.25rem;
  transition: transform var(--t2);
}
.cs-feature:hover .cs-feature-icon { transform: scale(1.08) rotate(-4deg); }

.cs-feature-title {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: .65rem;
}

.cs-feature-desc {
  font-size: .975rem;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 1.5rem;
}

.cs-feature-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.cs-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 280px;
  padding: .4rem .85rem;
  border-radius: var(--rf);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-tag i { flex-shrink: 0; color: var(--hx-accent); font-size: .7rem; }

.cs-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: var(--rf);
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 8px 24px rgba(54,164,217,.35);
  transition: gap var(--t2), transform var(--t2);
}
.cs-feature:hover .cs-feature-cta { gap: .85rem; transform: translateX(2px); }

/* ── Remaining services: compact cards ── */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

.cs-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--s1);
  text-decoration: none;
  transition: all var(--t2);
}

.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}

.cs-card-num {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  z-index: 0;
  font-family: var(--ff-display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(30,32,112,.05);
  line-height: 1;
  user-select: none;
}

.cs-card-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 10px 24px -10px rgba(46,42,114,.55);
  margin-bottom: 1.5rem;
  transition: transform var(--t2);
}
.cs-card:hover .cs-card-icon { transform: scale(1.08) rotate(-4deg); }

.cs-card-title {
  position: relative;
  z-index: 1;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .65rem;
  line-height: 1.3;
}

.cs-card-desc {
  position: relative;
  z-index: 1;
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.cs-card-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--hx-secondary);
}
.cs-card-link i { transition: transform var(--t2); }
.cs-card:hover .cs-card-link i { transform: translateX(4px); }

/* Photo variant — used by the Industries grid only (Core Services keeps
   the plain icon-card look above); a header photo replaces the ghost
   number, with the icon floated as a badge over its bottom edge. */
.cs-card--photo { padding: 0 0 2rem; }
.cs-card--photo .cs-card-media { position: relative; height: 170px; margin-bottom: 2.25rem; overflow: hidden; border-radius: var(--r4) var(--r4) 0 0; }
.cs-card--photo .cs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t3); }
.cs-card--photo:hover .cs-card-media img { transform: scale(1.08); }
.cs-card--photo .cs-card-num { display: none; }
.cs-card--photo .cs-card-icon {
  position: absolute; left: 1.5rem; top: 140px; margin-bottom: 0;
  border: 4px solid var(--surface);
}
.cs-card--photo .cs-card-body { padding: 2.25rem 1.75rem 0; display: flex; flex-direction: column; flex-grow: 1; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .cs-feature { min-height: 0; }
  .cs-feature-body { padding: 2.25rem 1.5rem; max-width: none; }
  .cs-feature-num { font-size: 3.5rem; top: 1rem; right: 1.25rem; }
  .cs-feature-desc { max-width: none; }
}

@media (max-width: 479px) {
  .cs-feature-tags { gap: .45rem; }
  .cs-tag { max-width: 100%; }
  .cs-feature-cta { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  .cs { padding: 4rem 0; }
  .cs-head { margin-bottom: 2.5rem; }
  .cs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .cs-card { padding: 1.85rem 1.5rem; }
}

/* ================================================================
   SHOP ONLINE PROMO — premium dark CTA linking to shop.samtec.lk.
   Prefix: sop- (deliberately its own class set, distinct from the
   footer's shared .ftc-* CTA, so restyling one never touches the other)
   ================================================================ */
.sop {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  background: linear-gradient(135deg, var(--hx-dark) 0%, #14123f 50%, var(--hx-primary) 100%);
}

.sop-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sop-fx-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 90%);
}
.sop-fx-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: sopGlowDrift 16s ease-in-out infinite alternate; }
.sop-fx-glow--a { width: 380px; height: 380px; left: -6%; top: 10%; background: radial-gradient(circle, var(--hx-accent), transparent 70%); }
.sop-fx-glow--b { width: 420px; height: 420px; right: -8%; bottom: -10%; background: radial-gradient(circle, var(--hx-secondary), transparent 70%); animation-delay: -8s; }
@keyframes sopGlowDrift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4%, -4%) scale(1.15); } }

.sop .container { position: relative; z-index: 1; }

.sop-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; }

.sop-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }

.sop-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem .4rem .7rem; border-radius: var(--rf);
  background: rgba(89,216,255,.1); border: 1px solid rgba(89,216,255,.3);
  color: var(--hx-accent); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em;
}

.sop-live {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: var(--rf);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.78); font-weight: 600; font-size: .78rem;
}
.sop-live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--hx-accent);
  animation: sopLivePulse 2s ease-in-out infinite;
}
@keyframes sopLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(89,216,255,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(89,216,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(89,216,255,0); }
}

.sop-title {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 700; line-height: 1.18; color: #fff; margin-bottom: 1.1rem;
}
.sop-title-accent {
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sop-sub { font-size: 1.0625rem; color: rgba(255,255,255,.72); line-height: 1.7; max-width: 520px; margin-bottom: 1.75rem; }

.sop-features { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.25rem; }
.sop-feature {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--rf);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88); font-size: .85rem; font-weight: 600;
}
.sop-feature i { color: var(--hx-accent); }

.sop-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.sop-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.75rem; border-radius: var(--r2);
  font-weight: 700; font-size: .9375rem; text-decoration: none; transition: all var(--t2);
}
.sop-btn--pri {
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark); box-shadow: 0 10px 30px -6px rgba(89,216,255,.45);
}
.sop-btn--pri:hover { color: var(--hx-dark); transform: translateY(-2px); box-shadow: 0 16px 38px -6px rgba(89,216,255,.6); }
.sop-btn--sec { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.sop-btn--sec:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(89,216,255,.5); transform: translateY(-2px); }

/* Visual: browser-chrome address bar (shows the real shop.samtec.lk URL, links
   out to it) on top of a "shop by category" quick-links panel — each row is an
   actual link into shop.samtec.lk — plus a credibility stats strip below. */
.sop-visual { position: relative; }
.sop-shop-panel {
  position: relative; overflow: hidden; padding: 1.5rem;
  background: rgba(255,255,255,.04); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r5);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  transition: transform var(--t2), box-shadow var(--t2);
}
.sop-shop-panel:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }

/* 1px gradient ring around the panel — subtle premium accent, sits behind content */
.sop-shop-panel::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(89,216,255,.5), rgba(89,216,255,0) 35%, rgba(89,216,255,0) 65%, rgba(54,164,217,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Mock browser chrome — traffic-light dots + "shop.samtec.lk" address pill,
   purely decorative credibility cue (it's a real link to the shop). */
.sop-browser-chrome {
  display: flex; align-items: center; gap: .85rem;
  margin: -1.5rem -1.5rem 1.25rem; padding: .8rem 1rem;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r5) var(--r5) 0 0;
  text-decoration: none;
}
.sop-browser-dots { display: flex; gap: .4rem; flex-shrink: 0; }
.sop-browser-dots span { display: block; width: 9px; height: 9px; border-radius: 50%; }
.sop-browser-dots span:nth-child(1) { background: #ff5f57; }
.sop-browser-dots span:nth-child(2) { background: #febc2e; }
.sop-browser-dots span:nth-child(3) { background: #28c840; }
.sop-browser-address {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .4rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.85); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  transition: all var(--t2);
}
.sop-browser-address i { flex-shrink: 0; color: #28c840; font-size: .68rem; }
.sop-browser-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-browser-chrome:hover .sop-browser-address { background: rgba(89,216,255,.1); border-color: rgba(89,216,255,.35); color: #fff; }

.sop-shop-panel-head {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem;
  padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sop-shop-panel-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r2); background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark); font-size: 1rem;
}
.sop-shop-panel-title { font-weight: 700; color: #fff; font-size: .95rem; }

.sop-shop-links { display: flex; flex-direction: column; gap: .6rem; }
.sop-shop-link {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--r3);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #fff; text-decoration: none; transition: all var(--t2);
}
.sop-shop-link:hover { background: rgba(255,255,255,.09); border-color: rgba(89,216,255,.4); transform: translateX(6px); color: #fff; }
.sop-shop-link-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r2); background: rgba(89,216,255,.12); color: var(--hx-accent); font-size: .95rem;
}
.sop-shop-link-label { flex: 1; font-size: .875rem; font-weight: 700; }
.sop-shop-link-arrow { color: rgba(255,255,255,.35); font-size: .8rem; transition: transform var(--t2), color var(--t2); }
.sop-shop-link:hover .sop-shop-link-arrow { color: var(--hx-accent); transform: translateX(3px); }

.sop-stats { display: flex; gap: 1rem; margin-top: 1.25rem; }
.sop-stat {
  flex: 1; text-align: center; padding: 1.1rem .5rem; border-radius: var(--r3);
  background: rgba(255,255,255,.95); box-shadow: var(--s3);
  transition: transform var(--t2), box-shadow var(--t2);
}
.sop-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -10px rgba(0,0,0,.4); }
.sop-stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 auto .5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-secondary), var(--hx-accent));
  color: var(--hx-dark); font-size: .8rem;
}
.sop-stat-num { display: block; font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: var(--hx-dark); line-height: 1.2; }
.sop-stat-label { display: block; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }

@media (max-width: 991px) {
  .sop { padding: 5rem 0; }
  .sop-grid { grid-template-columns: 1fr; gap: 2.75rem; text-align: center; }
  .sop-badges { justify-content: center; }
  .sop-features { justify-content: center; }
  .sop-actions { justify-content: center; }
  .sop-sub { margin-left: auto; margin-right: auto; }
  .sop-visual { max-width: 480px; width: 100%; margin: 0 auto; }
}

@media (max-width: 767px) {
  .sop { padding: 4rem 0; }
  .sop-badges { margin-bottom: 1rem; }
  .sop-sub { font-size: 1rem; }
  .sop-features { gap: .6rem; margin-bottom: 1.85rem; }
  .sop-feature { font-size: .8rem; padding: .45rem .9rem; }
  .sop-visual { max-width: 440px; }
  .sop-shop-panel { padding: 1.25rem; }
  .sop-browser-chrome { margin: -1.25rem -1.25rem 1.1rem; padding: .7rem .85rem; }
  .sop-shop-link { padding: .75rem .85rem; }
}

@media (max-width: 640px) {
  .sop-actions { flex-direction: column; align-items: stretch; }
  .sop-btn { justify-content: center; }
}

@media (max-width: 479px) {
  .sop { padding: 3.25rem 0; }
  .sop-visual { max-width: 100%; }
  .sop-shop-panel { padding: 1rem; }
  .sop-browser-chrome { margin: -1rem -1rem 1rem; padding: .6rem .75rem; gap: .6rem; }
  .sop-browser-address { font-size: .7rem; padding: .35rem .75rem; }
  .sop-shop-panel-icon { width: 34px; height: 34px; font-size: .9rem; }
  .sop-shop-panel-title { font-size: .88rem; }
  .sop-shop-link { padding: .7rem .8rem; gap: .7rem; }
  .sop-shop-link-icon { width: 34px; height: 34px; font-size: .85rem; }
  .sop-shop-link-label { font-size: .8rem; }
  .sop-stats { gap: .6rem; }
  .sop-stat { padding: .8rem .35rem; }
  .sop-stat-icon { width: 26px; height: 26px; font-size: .7rem; margin-bottom: .35rem; }
  .sop-stat-num { font-size: 1rem; }
  .sop-stat-label { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sop-fx-glow,
  .sop-live-dot { animation: none !important; }
}

/* ================================================================
   WHY CHOOSE SAMTEC — engineering excellence split panel. Prefix: wcs-
   ================================================================ */
.wcs {
  position: relative;
  overflow: hidden;
  padding: 7rem 0;
  background: var(--white);
}

.wcs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 92% 8%, rgba(41,171,226,.09), transparent 70%),
    radial-gradient(ellipse 50% 45% at -5% 100%, rgba(30,32,112,.07), transparent 70%);
}

.wcs .container { position: relative; z-index: 1; }

.wcs-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4.5rem;
  align-items: center;
}

.wcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.wcs-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.22;
  margin-bottom: 1rem;
}

.wcs-desc {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2.25rem;
  max-width: 54ch;
}

.wcs-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.wcs-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}

.wcs-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--s2);
  border-color: transparent;
}

.wcs-feature-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 10px 22px -10px rgba(46,42,114,.55);
  transition: transform var(--t2);
}

.wcs-feature:nth-child(2) .wcs-feature-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  box-shadow: 0 10px 22px -10px rgba(30,32,112,.5);
}

.wcs-feature:hover .wcs-feature-icon { transform: scale(1.08) rotate(-4deg); }

.wcs-feature-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--h);
  margin-bottom: .3rem;
  line-height: 1.3;
}

.wcs-feature-body p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.wcs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.wcs-stat {
  flex: 1 1 25%;
  min-width: 110px;
  padding-right: 1rem;
  border-right: 1px solid var(--border);
}
.wcs-stat:last-child { border-right: none; padding-right: 0; }

.wcs-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: .6rem;
  border-radius: var(--r2);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .95rem;
}

.wcs-stat-num {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: .35rem;
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wcs-stat-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Media column ── */
.wcs-media {
  position: relative;
  isolation: isolate;
}

.wcs-media-glow {
  position: absolute;
  inset: -8%;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 20%, rgba(41,171,226,.30), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(30,32,112,.22), transparent 55%);
  filter: blur(50px);
  opacity: .85;
}

.wcs-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r5);
  box-shadow: var(--s4);
  border: 6px solid var(--surface);
}

.wcs-badge {
  position: absolute;
  left: -1.5rem;
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.35rem;
  background: var(--surface);
  border-radius: var(--r4);
  box-shadow: var(--s3);
  border: 1px solid var(--border);
}

.wcs-badge-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: #fff;
  font-size: 1.15rem;
  box-shadow: var(--s-accent);
}

.wcs-badge-value {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--h);
  line-height: 1.2;
}

.wcs-badge-label {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .wcs { padding: 5.5rem 0; }
  .wcs-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .wcs-media { order: -1; max-width: 420px; margin: 0 auto; }
  .wcs-desc { max-width: none; }
}

@media (max-width: 767px) {
  .wcs { padding: 4rem 0; }
  .wcs-features { grid-template-columns: 1fr; gap: 1rem; }
  .wcs-badge { left: 1rem; bottom: 1rem; padding: .8rem 1.1rem; gap: .65rem; }
  .wcs-badge-icon { width: 40px; height: 40px; font-size: 1rem; }
  .wcs-badge-value { font-size: 1.1rem; }
  .wcs-image { border-width: 4px; }
}

@media (max-width: 575px) {
  .wcs-stats { gap: 1.25rem 0; }
  .wcs-stat { flex: 1 1 45%; border-right: none; padding-right: 0; }
  .wcs-stat:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--border); }
  .wcs-media { max-width: 320px; }
  .wcs-badge { left: .5rem; bottom: .5rem; }
}

/* ================================================================
   ABOUT PAGE — premium redesign. Prefix: ab-
   ================================================================ */

/* Shared eyebrow/title/head, reused across every ab- section */
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--rf);
  background: var(--blue-lt);
  color: var(--blue-dk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ab-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--h);
  line-height: 1.2;
  margin-bottom: .85rem;
}

.ab-desc { font-size: 1.0625rem; color: var(--muted); line-height: 1.7; }

.ab-head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.ab-head .ab-sub { font-size: 1.0625rem; color: var(--muted); margin: 0; }

.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.75rem;
  border-radius: var(--rf);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: all var(--t2);
}
.ab-btn:hover { background: var(--navy-dk); color: #fff; transform: translateY(-2px); box-shadow: var(--s2); }

/* ================================================================
   PAGE BANNER (.pgb) — one shared, full-bleed premium banner used by
   every inner page (About, Services, Service detail, Industries,
   Contact, Quotation, Testimonials, FAQ, Privacy, Terms). Markup lives
   in app/views/partials/page-banner.php, rendered via the page_banner()
   helper — pages pass data only, never duplicate this markup/CSS.
   ================================================================ */
.pgb {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 55vh;
  padding: 8.5rem 0 3.5rem;
  background: var(--g-hero); /* shows briefly while the photo loads */
  isolation: isolate;
}

.pgb-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pgb-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06);
  animation: pgbZoom 20s ease-in-out infinite alternate;
}
@keyframes pgbZoom { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pgb-img { animation: none; transform: scale(1); } }

/* dark, elegant overlay — heavier lower-left where the text sits */
.pgb-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,10,56,.82) 0%, rgba(9,10,56,.62) 40%, rgba(9,10,56,.34) 75%),
    linear-gradient(0deg, rgba(9,10,56,.55) 0%, rgba(9,10,56,.1) 55%, transparent 85%);
}

/* faint engineering dot-grid for texture, low enough not to fight the photo */
.pgb-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.9), transparent 70%);
          mask-image: linear-gradient(100deg, rgba(0,0,0,.9), transparent 70%);
}

.pgb-inner { position: relative; z-index: 1; max-width: 720px; }

.pgb-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  font-size: .8125rem; color: rgba(255,255,255,.6);
}
.pgb-crumbs li { display: inline-flex; align-items: center; }
.pgb-crumbs li:not(:last-child)::after { content: '/'; margin: 0 .5rem; opacity: .5; }
.pgb-crumbs a { color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--t2); }
.pgb-crumbs a:hover { color: #fff; }
.pgb-crumbs li.is-current { color: var(--hx-accent); font-weight: 600; }

.pgb-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  padding: .4rem 1.05rem .4rem .4rem;
  border-radius: var(--rf);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
  color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.pgb-eyebrow i {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-accent), var(--blue));
  color: var(--navy-dk); font-size: .7rem;
}

.pgb-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.14;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,.3);
  margin-bottom: .9rem;
}
.pgb-accent {
  background: linear-gradient(135deg, var(--hx-accent), var(--blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.pgb-desc {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  max-width: 600px;
  margin-bottom: 1.85rem;
}

.pgb-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.pgb-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.75rem;
  border-radius: var(--rf);
  font-size: .95rem; font-weight: 700;
  text-decoration: none;
  transition: all var(--t2);
  white-space: nowrap;
}
.pgb-btn--primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-dk));
  color: #fff;
  box-shadow: 0 16px 32px -12px rgba(41,171,226,.6);
}
.pgb-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -10px rgba(41,171,226,.72); color: #fff; }
.pgb-btn--ghost {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.38);
  color: #fff;
  backdrop-filter: blur(8px);
}
.pgb-btn--ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); color: #fff; }
.pgb-btn i { transition: transform var(--t2); }
.pgb-btn:hover i { transform: translateX(3px); }

@media (max-width: 991px) {
  .pgb { min-height: 50vh; }
}

@media (max-width: 767px) {
  .pgb { min-height: 40vh; padding: 7.5rem 0 2.5rem; }
  .pgb-inner { max-width: 100%; }
  .pgb-desc { max-width: 100%; }
  .pgb-cta { flex-direction: column; align-items: stretch; }
  .pgb-btn { width: 100%; justify-content: center; padding: .9rem 1.25rem; white-space: normal; }
}

@media (max-width: 479px) {
  .pgb { min-height: 38vh; }
  .pgb-crumbs { display: none; }
}

/* ── Intro ── */
.ab-intro { position: relative; overflow: hidden; padding: 6rem 0; background: var(--white); }
.ab-intro-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 100% 0%, rgba(41,171,226,.07), transparent 70%);
}
.ab-intro .container { position: relative; z-index: 1; }

.ab-intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: center; }

.ab-features { display: grid; gap: 1.25rem; margin: 2rem 0 2.25rem; }
.ab-feature { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r3); transition: transform var(--t2), box-shadow var(--t2); }
.ab-feature:hover { transform: translateY(-4px); box-shadow: var(--s2); border-color: transparent; }
.ab-feature-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary));
  color: #fff; font-size: 1.2rem; box-shadow: 0 10px 22px -10px rgba(46,42,114,.55);
}
.ab-feature:nth-child(2) .ab-feature-icon { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); box-shadow: 0 10px 22px -10px rgba(30,32,112,.5); }
.ab-feature-body h3 { font-size: 1rem; font-weight: 700; color: var(--h); margin-bottom: .3rem; }
.ab-feature-body p { font-size: .875rem; color: var(--muted); line-height: 1.5; margin: 0; }

.ab-intro-media, .ab-contact-media { position: relative; isolation: isolate; }
.ab-media-glow {
  position: absolute; inset: -8%; z-index: -1;
  background: radial-gradient(circle at 30% 20%, rgba(41,171,226,.30), transparent 60%), radial-gradient(circle at 80% 85%, rgba(30,32,112,.22), transparent 55%);
  filter: blur(50px); opacity: .85;
}
.ab-image { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r5); box-shadow: var(--s4); border: 6px solid var(--surface); }

.ab-badge {
  position: absolute; left: -1.5rem; bottom: -1.5rem;
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.35rem; background: var(--surface); border-radius: var(--r4); box-shadow: var(--s3); border: 1px solid var(--border);
}
.ab-badge-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r3);
  background: linear-gradient(135deg, var(--accent), var(--accent-dk)); color: #fff; font-size: 1.15rem; box-shadow: var(--s-accent);
}
.ab-badge-value { display: block; font-family: var(--ff-display); font-size: 1.25rem; font-weight: 800; color: var(--h); line-height: 1.2; }
.ab-badge-label { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ── Stats band ── */
.ab-stats { padding: 3.5rem 0; background: var(--g-brand); }
.ab-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.ab-stat { border-right: 1px solid rgba(255,255,255,.18); }
.ab-stat:last-child { border-right: none; }
.ab-stat-num {
  display: block; font-family: var(--ff-display); font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800; color: #fff; line-height: 1;
}
.ab-stat-label { display: block; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .03em; }

/* ── Core values ── */
.ab-values { position: relative; overflow: hidden; padding: 6rem 0; background: var(--off-wh); }
.ab-values-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 10% 100%, rgba(41,171,226,.08), transparent 70%), radial-gradient(ellipse 50% 45% at 100% 0%, rgba(30,32,112,.06), transparent 70%);
}
.ab-values .container { position: relative; z-index: 1; }
.ab-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.ab-value-card {
  padding: 2.25rem 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4);
  box-shadow: var(--s1); text-align: left; transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}
.ab-value-card:hover { transform: translateY(-6px); box-shadow: var(--s3); border-color: transparent; }
.ab-value-icon {
  display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary)); color: #fff; font-size: 1.5rem;
  box-shadow: 0 10px 24px -10px rgba(46,42,114,.55); margin-bottom: 1.5rem; transition: transform var(--t2);
}
.ab-value-card:nth-child(2n) .ab-value-icon { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); box-shadow: 0 10px 24px -10px rgba(30,32,112,.5); }
.ab-value-card:hover .ab-value-icon { transform: scale(1.08) rotate(-4deg); }
.ab-value-title { font-size: 1.1875rem; font-weight: 700; color: var(--h); margin-bottom: .65rem; }
.ab-value-desc { font-size: .9375rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Dot indicators — mobile carousel mode only */
.ab-dots { display: none; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.5rem; }
.ab-dot { width: 8px; height: 8px; border-radius: var(--rf); background: var(--border-s); cursor: pointer; transition: all var(--t2); }
.ab-dot.is-active { width: 24px; background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary)); }

/* ── Vision & Mission ── */
.ab-vm { padding: 6rem 0; background: var(--white); }
.ab-vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.ab-vm-card { position: relative; overflow: hidden; padding: 2.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--s1); }
.ab-vm-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--hx-primary), var(--hx-secondary)); }
.ab-vm-card:nth-child(2)::before { background: linear-gradient(90deg, var(--accent), var(--accent-dk)); }
.ab-vm-icon {
  display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--r3);
  background: linear-gradient(135deg, var(--hx-primary), var(--hx-secondary)); color: #fff; font-size: 1.5rem; box-shadow: 0 10px 24px -10px rgba(46,42,114,.55); margin-bottom: 1.5rem;
}
.ab-vm-card:nth-child(2) .ab-vm-icon { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); box-shadow: 0 10px 24px -10px rgba(30,32,112,.5); }
.ab-vm-title { font-size: 1.375rem; font-weight: 700; color: var(--h); margin-bottom: 1rem; }
.ab-vm-card p { font-size: .9375rem; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }
.ab-vm-card p:last-child { margin-bottom: 0; }

/* ── Contact ── */
.ab-contact { position: relative; overflow: hidden; padding: 6rem 0; background: var(--off-wh); }
.ab-contact-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 100% 100%, rgba(41,171,226,.08), transparent 70%);
}
.ab-contact .container { position: relative; z-index: 1; }
.ab-contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: center; }
.ab-contact-list { list-style: none; padding: 0; margin: 1.75rem 0; display: flex; flex-direction: column; gap: 1.1rem; }
.ab-contact-list li { display: flex; align-items: center; gap: 1rem; }
.ab-contact-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r3);
  background: var(--blue-lt); color: var(--blue-dk); font-size: 1.05rem;
}
.ab-contact-list a, .ab-contact-list span { font-size: 1rem; color: var(--body); text-decoration: none; font-weight: 500; }
.ab-contact-list a:hover { color: var(--blue-dk); }
.ab-contact-media { display: flex; align-items: center; justify-content: center; padding: 3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r5); box-shadow: var(--s2); }
.ab-contact-logo { width: 100%; max-width: 260px; height: auto; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .ab-intro-grid, .ab-contact-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .ab-intro-media, .ab-contact-media { order: -1; max-width: 420px; margin: 0 auto; }
  .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-vm-grid { grid-template-columns: 1fr; }
  .ab-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .ab-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
  .ab-stat:nth-child(2n) { border-right: none; }
}

@media (max-width: 767px) {
  .ab-intro, .ab-values, .ab-vm, .ab-contact { padding: 4rem 0; }
  .ab-head { margin-bottom: 2.5rem; }
  .ab-features { grid-template-columns: 1fr; }
  .ab-badge { left: 1rem; bottom: 1rem; padding: .8rem 1.1rem; gap: .65rem; }

  /* Core Values → horizontal snap carousel */
  .ab-values-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.1rem;
    padding: .25rem .25rem 1.25rem;
  }
  .ab-values-grid::-webkit-scrollbar { display: none; }
  .ab-value-card { flex: 0 0 82%; scroll-snap-align: center; }
  .ab-dots { display: flex; }
}

@media (max-width: 420px) {
  .ab-value-card { flex-basis: 88%; }
}

@media (max-width: 575px) {
  .ab-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-image, .ab-intro-media { max-width: 320px; margin: 0 auto; }
}

/* ================================================================
   SERVICE DETAIL — overview split (banner reuses .pgb,
   features/related reuse .cs-*). Prefix: sv-
   ================================================================ */
.sv-overview { padding: 6rem 0; background: var(--white); }
.sv-overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: start; }

.sv-card { position: relative; overflow: hidden; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--s2); }
.sv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--g-accent); }
.sv-card-title { display: flex; align-items: center; gap: .75rem; font-size: 1.0625rem; font-weight: 700; color: var(--h); margin-bottom: 1.35rem; }
.sv-card-title i {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r2);
  background: var(--blue-lt); color: var(--blue-dk); font-size: .95rem;
}
/* "Ideal For" — a purpose-built checklist, not a generic tag/pill cloud:
   each entry reads as a confirmed fit (gradient check-badge + label) rather
   than a clickable filter chip, and sits as a compact 2-col grid so a
   6-item list doesn't tower over the CTA buttons below it in the sidebar
   card. Replaces the old .tp-client-chip reuse (a partner-marquee chip
   style, not designed for this content). */
.sv-ideal-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.sv-ideal-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .85rem;
  background: var(--blue-xlt);
  border: 1px solid transparent;
  border-radius: var(--r3);
  font-size: .875rem; font-weight: 600; color: var(--h); line-height: 1.3;
  transition: background var(--t2), border-color var(--t2), transform var(--t2);
}
.sv-ideal-item:hover { background: var(--blue-lt); border-color: rgba(41,171,226,.25); transform: translateX(2px); }
.sv-ideal-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dk));
  color: #fff; font-size: .6rem;
  box-shadow: 0 4px 10px -3px rgba(41,171,226,.55);
}

/* Side-by-side, compact CTA pair — used for the "Ideal For" card actions
   and every "sv-why-card" prompt (Contact/Quotation/Industries/Services
   pages' "Ready to discuss your project?" etc.). Smaller than the site's
   standard .ftc-btn/.ab-btn sizing so two buttons read as one balanced row
   instead of two stacked full-width bars. */
/* Google's reCAPTCHA widget renders a fixed 304x78px iframe regardless of
   its container's width — on narrow phones (contact/quotation form cards
   have real padding eating into the viewport) that's wider than the space
   available and it either overflows or forces horizontal scroll. Scale the
   widget down and shrink its wrapper to match so there's no leftover gap
   and nothing gets clipped. */
.g-recaptcha { transform-origin: 0 0; }
@media (max-width: 420px) {
  .g-recaptcha { transform: scale(.9); }
  .g-recaptcha > div { width: 273px !important; height: 70px !important; }
}
@media (max-width: 360px) {
  .g-recaptcha { transform: scale(.8); }
  .g-recaptcha > div { width: 243px !important; height: 62px !important; }
}
@media (max-width: 340px) {
  .g-recaptcha { transform: scale(.7); }
  .g-recaptcha > div { width: 213px !important; height: 55px !important; }
}

.sv-card-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: .65rem; }
.sv-card-actions .ftc-btn,
.sv-card-actions .ab-btn {
  flex: 1 1 auto;
  width: auto;
  justify-content: center;
  padding: .65rem 1.1rem;
  font-size: .8125rem;
}

@media (max-width: 767px) {
  .sv-overview { padding: 4rem 0; }
  .sv-overview-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 420px) {
  .sv-ideal-list { grid-template-columns: 1fr; }
}

/* ================================================================
   WHY WORK WITH SAMTEC — premium dark CTA band. Deliberately breaks the
   light/white rhythm of the sections above and below it (About/Contact/
   Quotation/Industries/Services index+detail all sit this between two
   light sections) using the exact same navy gradient + dot-grid + glow-orb
   language as the .pgb page banners, so it reads as "premium" without
   introducing a new, unrelated visual system. Reuses .ab-eyebrow/.ab-title/
   .ab-desc/.ab-feature* (shared with About's own light-background intro)
   scoped under .sv-why so that other usage is unaffected.
   ================================================================ */
.sv-why { position: relative; overflow: hidden; padding: 4.25rem 0; background: var(--g-hero); }
.sv-why-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 90%);
}
.sv-why::before,
.sv-why::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.sv-why::before { width: 420px; height: 420px; top: -140px; right: -100px; background: radial-gradient(circle, rgba(41,171,226,.38), transparent 70%); }
.sv-why::after  { width: 380px; height: 380px; bottom: -150px; left: -110px; background: radial-gradient(circle, rgba(30,32,112,.42), transparent 70%); }

.sv-why .container { position: relative; z-index: 1; }
.sv-why-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }

/* left column text, now on a dark background */
.sv-why .ab-eyebrow {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px);
}
.sv-why .ab-title { color: #fff; }
.sv-why .ab-desc { color: rgba(255,255,255,.78); }

/* Feature list becomes a 2-up grid of numbered, frosted-glass cards —
   more compact and editorial than a stack of full-width rows, and gives
   the icon/title real breathing room instead of competing for one line. */
.sv-why .ab-features {
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 1.35rem 0 0;
  counter-reset: sia-feature;
}
.sv-why .ab-feature {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 1rem 1.1rem .95rem;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  overflow: hidden;
  counter-increment: sia-feature;
  transition: transform var(--t2), box-shadow var(--t2), background var(--t2), border-color var(--t2);
}
.sv-why .ab-feature::before {
  content: counter(sia-feature, decimal-leading-zero);
  position: absolute;
  top: .5rem;
  right: .75rem;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: rgba(255,255,255,.1);
  line-height: 1;
  pointer-events: none;
}
.sv-why .ab-feature:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 24px 44px -22px rgba(0,0,0,.55);
}
.sv-why .ab-feature-icon {
  width: 38px; height: 38px; font-size: .95rem;
  box-shadow: 0 0 0 5px rgba(255,255,255,.06), 0 10px 22px -10px rgba(0,0,0,.5);
  transition: transform var(--t2), box-shadow var(--t2);
}
.sv-why .ab-feature:hover .ab-feature-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 10px 26px -8px rgba(0,0,0,.55);
}
.sv-why .ab-feature-body h3 { color: #fff; font-size: .9375rem; margin-bottom: .15rem; line-height: 1.25; }
.sv-why .ab-feature-body p { color: rgba(255,255,255,.7); font-size: .8125rem; line-height: 1.45; }

/* right card: a bright, elevated "spotlight" card floating on the dark band */
.sv-why-card { position: relative; overflow: hidden; text-align: center; padding: 2rem 2rem; background: var(--surface); border: 1px solid rgba(255,255,255,.5); border-radius: var(--r5); box-shadow: 0 30px 60px -20px rgba(9,10,56,.55); transition: transform var(--t2), box-shadow var(--t2); }
.sv-why-card:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -22px rgba(9,10,56,.6); }
.sv-why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #25D366, var(--hx-secondary)); }
.sv-why-card-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto 1.1rem; border-radius: var(--rf);
  background: #25D366; color: #fff; font-size: 1.5rem; box-shadow: 0 10px 24px -8px rgba(37,211,102,.5);
}
.sv-why-card-icon::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(37,211,102,.35);
  animation: siaPulseRing 2.4s ease-out infinite;
}
@keyframes siaPulseRing {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.sv-why-card-title { font-size: 1.25rem; font-weight: 700; color: var(--h); margin-bottom: .65rem; }
.sv-why-card-desc { font-size: .9375rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.75rem; }

@media (max-width: 991px) {
  .sv-why-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 767px) {
  .sv-why { padding: 3rem 0; }
  /* Stays 2-up rather than collapsing to one column per row — each card
     is short enough (icon + one-line title + short blurb) that stacking
     all 4 full-width made this the tallest section on the page on mobile. */
  .sv-why .ab-features { gap: .6rem; }
  .sv-why .ab-feature { padding: .85rem .9rem .8rem; }
}

@media (max-width: 420px) {
  .sv-why .ab-feature-body p { display: none; }
  .sv-why .ab-feature { align-items: center; flex-direction: row; gap: .65rem; padding: .7rem .85rem; }
  .sv-why .ab-feature-icon { width: 32px; height: 32px; font-size: .8rem; }
  .sv-why .ab-feature-body h3 { margin-bottom: 0; font-size: .85rem; }
  .sv-why .ab-feature::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-why-card-icon::after { animation: none; }
  .sv-why .ab-feature, .sv-why-card { transition: none; }
}

/* Related Services (services/show.php only) — snap carousel on mobile.
   Scoped to .cs-grid--carousel so the shared .cs-grid/.cs-card used on the
   homepage and this page's own Feature grid are unaffected. */
@media (max-width: 767px) {
  .cs-grid.cs-grid--carousel {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.1rem;
    padding: .25rem .25rem 1.25rem;
  }
  .cs-grid.cs-grid--carousel::-webkit-scrollbar { display: none; }
  .cs-grid.cs-grid--carousel .cs-card { flex: 0 0 82%; scroll-snap-align: center; }
}

@media (max-width: 420px) {
  .cs-grid.cs-grid--carousel .cs-card { flex-basis: 88%; }
}

/* ================================================================
   LEGAL PAGES (Privacy / Terms) — .pgb banner + document card.
   Prefix: lg-
   ================================================================ */
.lg-card { max-width: 840px; margin: 0 auto; padding: 3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--s2); }
.lg-meta { font-size: .875rem; color: var(--muted); margin-bottom: 1.5rem; }

.lg-notice {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.25rem; margin-bottom: 2.25rem;
  background: var(--accent-lt); border: 1px solid rgba(30,32,112,.25); border-radius: var(--r3);
  color: var(--accent-dk); font-size: .9rem; line-height: 1.5;
}
.lg-notice i { margin-top: .15rem; flex-shrink: 0; }

.lg-section { margin-bottom: 2rem; }
.lg-section:last-of-type { margin-bottom: 0; }
.lg-section-title { display: flex; align-items: center; gap: .75rem; font-size: 1.125rem; font-weight: 700; color: var(--h); margin-bottom: .65rem; }
.lg-section-title i {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r2); background: var(--blue-lt); color: var(--blue-dk); font-size: .9rem;
}
.lg-section p { color: var(--muted); line-height: 1.75; margin: 0; }
.lg-section p + p { margin-top: .85rem; }

.lg-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }

@media (max-width: 575px) {
  .lg-card { padding: 2rem 1.5rem; }
  .lg-footer-links { flex-direction: column; }
  .lg-footer-links .ab-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   PAGE PRELOADER — brand splash on load. Prefix: preloader-
   Near-black dark-blue backdrop with a light-blue (--hx-accent) glow —
   same badge + orbiting spark + tagline motion.
   ================================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #05061E 0%, #090A2E 55%, #0D0F3A 100%);
  transition: opacity .5s ease, visibility .5s ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Soft ambient glows — light-blue brand accent (var(--hx-accent)), echoing the
   glow treatment used on the .pgb page banners and .ftc CTA band. */
.preloader-bg,
.preloader-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.preloader-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.preloader-orb--a { width: 480px; height: 480px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(89,216,255,.22), transparent 70%); }
.preloader-orb--b { width: 380px; height: 380px; bottom: -140px; right: -100px; background: radial-gradient(circle, rgba(41,171,226,.14), transparent 70%); }

.preloader-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* Badge: white circle holding the logo, with a spark icon orbiting it — the
   outer element orbits while the inner icon counter-rotates at the same
   speed so the spark itself stays upright rather than spinning in place. */
.preloader-logo-circle {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(89,216,255,.5), 0 0 40px rgba(89,216,255,.35);
  animation: preloaderBreathe 1.8s ease-in-out infinite;
}

.preloader-logo { width: 68%; height: auto; display: block; }

/* Thin comet-style gradient ring — the primary "loading" read, layered
   under the orbiting spark for a fuller, more premium motion. */
.preloader-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--hx-accent) 60deg, transparent 130deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 6px rgba(89,216,255,.65));
  animation: preloaderOrbit 1.6s linear infinite;
}

.preloader-orbit {
  position: absolute;
  inset: -28px;
  animation: preloaderOrbit 2.6s linear infinite;
}
.preloader-orbit i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--hx-accent);
  font-size: 1.15rem;
  text-shadow: 0 0 12px rgba(89,216,255,.85);
  animation: preloaderCounterOrbit 2.6s linear infinite;
}

@keyframes preloaderBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(89,216,255,.5), 0 0 40px rgba(89,216,255,.35); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(89,216,255,0), 0 0 55px rgba(89,216,255,.55); }
}
@keyframes preloaderOrbit { to { transform: rotate(360deg); } }
@keyframes preloaderCounterOrbit { to { transform: translateX(-50%) rotate(-360deg); } }

.preloader-label {
  margin: 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .3px;
  color: rgba(255,255,255,.88);
  text-align: center;
  animation: preloaderPulse 1.8s ease-in-out infinite;
}

@keyframes preloaderPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

@media (max-width: 575.98px) {
  .preloader-logo-circle { width: 88px; height: 88px; }
  .preloader-ring { inset: -11px; }
  .preloader-orbit { inset: -22px; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity .01ms; }
  .preloader-logo-circle,
  .preloader-ring,
  .preloader-orbit,
  .preloader-orbit i,
  .preloader-label { animation: none !important; }
}


/* ───────────────────────────────────────────────────────────────
   ACCESSIBILITY — skip link + consistent keyboard focus states
   Added as part of a full a11y pass: the site previously had almost
   no visible focus indicator for keyboard users (only 3 rules touched
   :focus at all across this whole file), and no way to bypass the
   header/nav to reach page content.
─────────────────────────────────────────────────────────────── */
.nx-skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 10000;
  background: var(--navy, #1E2070);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.nx-skip-link:focus {
  top: 0;
  outline: 3px solid var(--blue, #29ABE2);
  outline-offset: 2px;
}

main#main-content:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue, #29ABE2);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}