/* =============================================================================
   SERVICEBIRD — POLISH LAYER
   -----------------------------------------------------------------------------
   Loaded last, after style / animations / responsive / live. Everything here is
   ADDITIVE finish: micro-interactions, depth, easing and consistency on the
   primitives that repeat across every page and section. It changes no layout,
   so it cannot break a working page — pull the one <link> and the site reverts.

   The reference for "finished" is the Air Spider Delivery build: gradient CTAs
   with a light sweep and a spring lift, eyebrows with a live dot, one card-hover
   language everywhere, and reveals that arrive with intent rather than a fade.
   None of it is copied; the techniques are re-cut in Servicebird's blue palette.

   Contents
     01. Motion — reveal + global easing
     02. Buttons — the whole .btn family
     03. Eyebrows, section labels, gradient words
     04. Cards — one hover language for every card on the site
     05. Sector bubbles & chips
     06. Navigation finish
     07. Form controls
     08. Footer links
     09. Finishing — focus rings, selection, scrollbar, media
============================================================================= */

/* ============================================================ 01. MOTION */
/* The reveal system already adds .is-in on scroll. This refines HOW it lands:
   a touch of spring and a hair of blur, so content resolves into focus rather
   than simply appearing. Kept subtle — 0.66s, small travel. */
[data-anim] {
  transition:
    opacity .66s var(--ease-spring),
    transform .66s var(--ease-spring);
  transition-delay: var(--d, 0ms);
}
/* NOTE: an earlier build added `filter: blur(5px)` here on top of the base
   opacity/transform reveal. It made icons, logos and the sector row read as
   blurred/"broken" (and force-composited every reveal element, which let the
   buttons' negative-z sweep escape their rounded clip). Removed — the base
   reveal in style.css (opacity + transform) is enough. */

/* Headline words settle with a gentle overshoot instead of a straight slide. */
.reveal-words .w > span { transition: transform .62s var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { filter: none !important; transition: none !important; }
}

/* =========================================================== 02. BUTTONS */
/* One button system, three surfaces (primary / secondary / on-dark), all with
   the same behaviour: a diagonal light sweep on hover, a spring lift with a
   micro-scale, a real press state, and the trailing arrow nudging forward. */
.btn {
  isolation: isolate;
  letter-spacing: .005em;
  transition:
    transform .42s var(--ease-spring),
    box-shadow .42s var(--ease-spring),
    background .3s ease,
    border-color .3s ease,
    color .3s ease;
}

/* Replace the old horizontal wipe with a cleaner diagonal sweep that sits
   behind the label (z-index:-1) and never tints the text. */
.btn::after {
  display: none !important;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .12s; }

/* Primary — a blue gradient with depth instead of a flat fill. */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 48%, #1E40AF 100%) !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18), 0 6px 16px rgba(37, 99, 235, 0.22) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4C86FF 0%, #2563EB 48%, #1E40AF 100%) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.24), 0 10px 24px rgba(37, 99, 235, 0.28) !important;
}
.btn-primary:active {
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
}

/* Secondary — clean white card surface with subtle outline */
.btn-secondary {
  background: #FFFFFF !important;
  border-color: var(--border-main, #E2E8F0) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
.btn-secondary:hover {
  border-color: var(--brand-blue-vibrant, #2563EB) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px);
}
.btn-secondary:active {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

/* The trailing arrow leans forward as the button lifts. Works for both inline
   <svg> icons and the sprite <use> arrow, on every button on the site. */
.btn svg { transition: transform .42s var(--ease-spring); }
.btn:hover svg { transform: translateX(4px); }

/* Service-page and section CTAs share the same arrow behaviour. */
.svc-btn svg,
.sb-dive__cta svg,
.sb-tint__cta svg { transition: transform .42s var(--ease-spring); }
.svc-btn:hover svg,
.sb-dive__cta:hover svg { transform: translateX(4px); }

/* ======================================= 03. EYEBROWS & SECTION LABELS */
/* The little uppercase kickers get a live dot and a hair more presence, so a
   section announces itself the way the Air Spider eyebrows do. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.section-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-blue-vibrant);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, .45);
  animation: sbLabelDot 2.1s var(--ease-spring) infinite;
}
/* On dark bands the dot goes to the sky tint so it stays visible. */
.sb-on-dark .section-label::before,
.sb-flow .section-label::before { background: #7DA8FF; }
@keyframes sbLabelDot {
  0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 0   rgba(37, 99, 235, .45); }
  50%      { opacity: .5;  transform: scale(.72); box-shadow: 0 0 0 5px rgba(37, 99, 235, 0);   }
}
@media (prefers-reduced-motion: reduce) {
  .section-label::before { animation: none; }
}

/* Gradient headline words: give .text-gradient real depth and a highlight. */
.text-gradient {
  background: linear-gradient(120deg, #2563EB 0%, #4C86FF 45%, #00C389 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.highlight-blue {
  background: linear-gradient(120deg, #2563EB 0%, #4C86FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ============================================================= 04. CARDS */
/* One hover language for every card primitive on the site. Before this, each
   card type lifted a different distance with a different shadow and easing;
   now they all rise on the same spring to the same elevation. Individual card
   components keep their own accent treatments — this only unifies the motion. */
.sb-svc-card,
.hero-trust-card,
.hero-stats-card,
.provider-feature-row,
.contact-info-card,
.contact-form-glass-card,
.pillar-card-modern {
  transition:
    transform .5s var(--ease-spring),
    box-shadow .5s var(--ease-spring),
    border-color .5s var(--ease-spring);
}

.hero-trust-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.sb-svc-card:hover     { transform: translateY(-8px); }

/* The stat tiles in the hero card get a gentle individual response. */
.stat-item-box { transition: transform .45s var(--ease-spring); }
.stat-item-box:hover { transform: translateY(-4px); }

/* ==================================== 05. SECTOR BUBBLES & TRUST CHIPS */
.sector-bubble {
  transition:
    transform .42s var(--ease-spring),
    box-shadow .42s var(--ease-spring),
    border-color .42s var(--ease-spring),
    color .42s var(--ease-spring);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Brand wash rises from the bottom on hover — the same move the services and
   sectors grids use, so the homepage sector row now matches them. */
.sector-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #2563EB 0%, #4C86FF 100%);
  transform: translateY(101%);
  transition: transform .5s var(--ease-spring);
}
.sector-bubble:hover {
  transform: translateY(-5px);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 16px 32px -12px rgba(37, 99, 235, .5);
}
.sector-bubble:hover::before { transform: translateY(0); }
.sector-bubble:hover svg { color: #FFFFFF; }
.sector-bubble svg { transition: color .42s var(--ease-spring); }

.benefit-row-card {
  transition:
    transform .4s var(--ease-spring),
    box-shadow .4s var(--ease-spring),
    border-color .4s var(--ease-spring);
}
.benefit-row-card:hover {
  transform: translateX(7px);
  box-shadow: var(--shadow-card);
  border-color: rgba(37, 99, 235, .28);
}

/* ==================================================== 06. NAVIGATION & NAVBAR */
.navbar {
  padding: 16px 0 !important;
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar.scrolled {
  padding: 12px 0 !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08) !important;
}

.navbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.navbar-logo-wrap {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.navbar .sb-logo,
.navbar .navbar-logo {
  height: 44px !important;
  max-width: 210px !important;
  display: flex !important;
  align-items: center !important;
}

.navbar .sb-logo img,
.navbar .navbar-logo img {
  height: 44px !important;
  max-width: 210px !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

.nav-dropdown-wrapper {
  flex-shrink: 0 !important;
}

.nav-link {
  position: relative;
  transition: all .24s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 8px 16px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--text-body, #334155) !important;
  border-radius: 999px !important;
  gap: 5px !important;
  letter-spacing: -0.01em !important;
}

.nav-link:hover {
  color: var(--brand-blue-vibrant, #2563EB) !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

.nav-link.active {
  color: var(--brand-blue-vibrant, #2563EB) !important;
  background: rgba(37, 99, 235, 0.1) !important;
  font-weight: 700 !important;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2563EB, #00C389);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .34s var(--ease-spring);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active::after { transform: scaleX(1); opacity: .55; }

.nav-cta-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.nav-cta-btn .sb-signin-btn,
.nav-cta-btn .nav-link {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}

.nav-cta-btn .btn,
.btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.nav-cta-btn .btn {
  padding: 10px 22px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22) !important;
}

.btn-sm {
  padding: 8px 18px !important;
  font-size: 0.865rem !important;
}

@media (max-width: 1200px) {
  .nav-links,
  .nav-cta-btn,
  .nav-svc-wrapper .nav-mega,
  .nav-mega-wrapper {
    display: none !important;
  }
  .hamburger-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* The navbar CTA gets the primary-button sweep too (it uses .btn already, but
   pin its lift so it feels anchored in the bar). */
.navbar.scrolled { box-shadow: 0 6px 24px -8px rgba(15, 23, 42, .1); }

/* Dropdown panel: a softer entrance. */
.nav-dropdown-menu { transition: opacity .3s var(--ease-spring), transform .3s var(--ease-spring), visibility .3s; }

/* ==================================================== 07. FORM CONTROLS */
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .25s var(--ease-spring);
}
.form-input-modern:focus,
.form-select-modern:focus,
.form-textarea-modern:focus {
  border-color: var(--brand-blue-vibrant);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
  outline: none;
}
/* The whole field lifts a hair on focus so the active field is unmistakable. */
.form-group-modern:focus-within { transform: translateY(-1px); }
.form-group-modern { transition: transform .25s var(--ease-spring); }

/* Radio options read as selectable pills. */
.radio-option { transition: color .25s ease; }

/* ==================================================== 08. FOOTER LINKS */
.footer-nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: color .28s ease, transform .28s var(--ease-spring);
}
.footer-nav-list a:hover {
  color: #FFFFFF;
  transform: translateX(4px);
}
.social-circle-link {
  transition: transform .4s var(--ease-spring), background .3s ease, border-color .3s ease;
}
.social-circle-link:hover {
  transform: translateY(-4px) scale(1.06);
}

/* ==================================================== 09. FINISHING */
/* Consistent, on-brand focus ring for keyboard users across the whole site —
   invisible to mouse users, loud to keyboards. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.svc-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .55);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Text selection carries the brand rather than the OS default blue. */
::selection { background: rgba(37, 99, 235, .18); color: var(--text-heading); }

/* A slim, on-brand scrollbar on the desktop (WebKit/Blink). */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: #C7D2E4 transparent; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #C7D2E4;
    border: 3px solid var(--bg-main, #fff);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: #9FB2D8; }
}

/* Images inside rounded frames should never poke past the corner radius. */
img { max-width: 100%; }

/* The back-to-top control matches the button spring. */
.back-to-top-btn {
  transition: transform .4s var(--ease-spring), opacity .4s ease, box-shadow .4s ease, background .3s ease;
}
.back-to-top-btn:hover { transform: translateY(-4px) scale(1.06); }

/* =============================================================================
   COHESION PASS — grounding the dark panels + smoothing section transitions
   -----------------------------------------------------------------------------
   The recurring "cut and pasted" feeling comes from dark navy panels dropped
   onto a light page with nothing to tie them in: several had box-shadow:none,
   so they hard-cut against white. The reference build (Air Spider) uses dark
   panels too, but every one carries a big soft ambient shadow and a light inner
   edge, and its full-width dark bands fade into the sections above and below.
   This section applies that same discipline everywhere at once.
============================================================================= */

/* Shared "premium dark panel" grounding: a large soft ambient shadow so the
   panel sits ON the page rather than being pasted over it, plus a 1px inner
   highlight that catches light along the top edge. */
.sb-dive__art,
.sb-work,
.sb-match__card,
.sb-preview,
.sb-phone__device {
  box-shadow:
    0 2px 6px rgba(7, 22, 52, .10),
    0 30px 70px -24px rgba(7, 22, 52, .45),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* The deep-dive card: the hard vertical seam between the light copy and the
   dark scene was the tell. Round the whole card generously, lift it, and let
   the dark scene carry an inner top highlight so the join reads as one object. */
.sb-dive {
  box-shadow:
    0 2px 8px rgba(7, 22, 52, .06),
    0 34px 80px -30px rgba(7, 22, 52, .30) !important;
}
/* A soft glow bleeds from the scene into the copy side, so the seam dissolves
   instead of cutting. Sits under the content, above the panel background. */
.sb-dive__art::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 64px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(7, 22, 52, .0), rgba(7, 22, 52, .18));
  transform: scaleX(-1);
  pointer-events: none;
}

/* Full-width dark section (How Servicebird Works): fade its top and bottom
   edges into the white sections around it so it no longer hard-cuts. The bands
   are 56px tall and sit above the section content. */
.sb-flow { isolation: isolate; }
.sb-flow::before,
.sb-flow::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 72px;
  z-index: 0;
  pointer-events: none;
}
.sb-flow::before { top: 0;    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); opacity: .06; }
.sb-flow::after  { bottom: 0; background: linear-gradient(0deg,   #FFFFFF 0%, rgba(255,255,255,0) 100%); opacity: .06; }

/* Give the matching-engine band and the Who-We-Are band a hair of tint at the
   seams so the light bands and dark panels share a family rather than colliding.
   Purely additive gradients over the existing background. */
.sb-engine { position: relative; isolation: isolate; }

/* =============================================================================
   MATCHING ENGINE — REDESIGN: from a static form to a live verification system
   -----------------------------------------------------------------------------
   The complaint was that it read as a form plus a dark box. This adds the
   "live" behaviour it was missing: a scanning beam that sweeps the criteria
   while a match runs, criteria that pulse as each is checked, a result card
   that assembles rather than snaps, and a soft grounded card instead of a hard
   dark rectangle.
============================================================================= */

/* An animated hairline "scan" that runs down the criteria chain while the
   engine is checking, reading as the system working through the list. */
.sb-match__chain { position: relative; overflow: hidden; }
.sb-match__chain::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(22, 87, 240, .14), rgba(22, 87, 240, 0));
  transform: translateY(-120%);
  pointer-events: none;
  opacity: 0;
}
.sb-match[data-match-state="running"] .sb-match__chain::after {
  opacity: 1;
  animation: sbScan 1.9s var(--sb-ease, ease) infinite;
}
@keyframes sbScan {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(320%); }
}

/* Each criterion row lifts and brightens the instant it is checked, then holds
   a settled state — so the list visibly progresses rather than sitting still. */
.sb-match__crit {
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  transition:
    background .3s var(--sb-ease, ease),
    transform .35s var(--sb-ease, ease),
    color .3s var(--sb-ease, ease);
}
.sb-match__crit[data-state="checking"] {
  background: rgba(22, 87, 240, .06);
  transform: translateX(4px);
}
.sb-match__crit[data-state="verified"] {
  background: rgba(0, 195, 137, .05);
}

/* The dark result card: grounded (shared shadow above) and it now assembles —
   scales up from 97% with a slight rise as it enters, instead of snapping in. */
.sb-match__card {
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition:
    opacity .5s var(--sb-ease, ease),
    transform .6s var(--ease-spring, ease);
}
.sb-match__card.is-in {
  transform: none;
  opacity: 1;
}
/* Its compliance signal chips stagger in once the card has assembled. */
.sb-match__signals span {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .45s var(--ease-spring, ease);
}
.sb-match__card.is-in .sb-match__signals span { opacity: 1; transform: none; }
.sb-match__card.is-in .sb-match__signals span:nth-child(1) { transition-delay: .18s; }
.sb-match__card.is-in .sb-match__signals span:nth-child(2) { transition-delay: .24s; }
.sb-match__card.is-in .sb-match__signals span:nth-child(3) { transition-delay: .30s; }
.sb-match__card.is-in .sb-match__signals span:nth-child(4) { transition-delay: .36s; }
.sb-match__card.is-in .sb-match__signals span:nth-child(5) { transition-delay: .42s; }
.sb-match__card.is-in .sb-match__signals span:nth-child(6) { transition-delay: .48s; }
.sb-match__card.is-in .sb-match__signals span:nth-child(7) { transition-delay: .54s; }

/* The engine band gets a faint moving grid in the background — the same quiet
   tech texture the service-page heroes use — so the whole band feels alive
   rather than a flat panel with a form on it. */
.sb-engine__bg::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(rgba(22, 87, 240, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 87, 240, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  animation: sbEngineGrid 30s linear infinite;
}
@keyframes sbEngineGrid { to { transform: translate3d(58px, 58px, 0); } }

/* The live-state pill actually pulses while running. */
.sb-match__engine i {
  transition: background .3s ease;
}
.sb-match[data-match-state="running"] .sb-match__engine i {
  animation: sbEnginePip 1s ease-in-out infinite;
}
@keyframes sbEnginePip { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* =============================================================================
   HOW SERVICEBIRD WORKS — more depth on the pipeline
   -----------------------------------------------------------------------------
   The pipeline tiles were flat frosted shapes. This gives the live tile a
   breathing glow and the connectors a travelling pulse, so the section reads as
   an active process rather than a static diagram.
============================================================================= */
.sb-pipe__tile { position: relative; }
.sb-pipe__stage.is-live .sb-pipe__tile::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 134, 255, .5), transparent 68%);
  animation: sbTileGlow 2.4s ease-in-out infinite;
}
@keyframes sbTileGlow {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: .9; transform: scale(1.08); }
}

/* A travelling pulse rides each already-filled connector, so the finished part
   of the pipeline keeps a sense of flow. */
.sb-pipe__link i { position: relative; overflow: hidden; }
.sb-pipe__stage.is-done .sb-pipe__link i::after,
.sb-pipe__stage.is-live .sb-pipe__link i::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: translateX(-100%);
  animation: sbLinkPulse 2.2s linear infinite;
}
@keyframes sbLinkPulse { to { transform: translateX(320%); } }

/* =============================================================================
   THE WORKFLOW — richer, less "broken"
   -----------------------------------------------------------------------------
   Grounded above. This adds the central platform disc a live orbit and the two
   feed rails a clearer travelling packet, so "one platform, two sides" reads as
   a system moving work between the two lanes.
============================================================================= */
.sb-work { position: relative; }
/* A faint orbit ring around the platform disc, always turning. */
.sb-work__disc::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(76, 134, 255, .34);
  animation: sbOrbit 18s linear infinite;
  pointer-events: none;
}
@keyframes sbOrbit { to { transform: rotate(360deg); } }

/* =============================================================================
   SECTORS ROW — depth to match the rest
============================================================================= */
/* The homepage sector bubbles already got a hover wash in the polish layer;
   here they get a settled resting elevation so the row reads as cards, not
   flat chips, before any interaction. */
.sb-sectors .sb-sector,
.sectors-pill-grid .sector-bubble {
  box-shadow: 0 1px 2px rgba(7, 22, 52, .05), 0 6px 16px -10px rgba(7, 22, 52, .18);
}

@media (prefers-reduced-motion: reduce) {
  .sb-match__chain::after,
  .sb-engine__bg::after,
  .sb-match[data-match-state="running"] .sb-match__engine i,
  .sb-pipe__stage.is-live .sb-pipe__tile::before,
  .sb-pipe__link i::after,
  .sb-work__disc::after { animation: none !important; }
  .sb-match__card,
  .sb-match__signals span { opacity: 1 !important; transform: none !important; }
}

/* Even sector-card heights so wrapping labels (Local Authorities, Government
   Departments) don't leave rows visibly uneven on narrow screens. */
.sb-sectors .sb-sector,
.sectors-pill-grid .sector-bubble { min-height: 58px; }
@media (max-width: 620px) {
  .sb-sectors .sb-sector,
  .sectors-pill-grid .sector-bubble { min-height: 62px; align-items: center; }
}

/* =============================================================================
   PAGE HEADER REDESIGN  (.svc-hero)
   -----------------------------------------------------------------------------
   The old header was an 850px-tall dark block with all text in a single column
   on the left and a wide empty space on the right — the "odd" look. It now runs
   two columns: the message and actions on the left, a live platform panel on
   the right (the "app/platform visual" the brief asks for, communicating the
   concept in a few seconds). Soft mesh blobs add depth so nothing reads flat.
============================================================================= */
.svc-hero { padding-bottom: clamp(52px, 6vw, 84px); }

.svc-hero__mesh { position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .6; }
.svc-hero__mesh i { position: absolute; display: block; border-radius: 50%; }
.svc-hero__mesh i:nth-child(1) {
  width: 42vw; height: 42vw; left: -6%; top: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--svc-accent-2) 60%, transparent), transparent 68%);
  animation: svcBlobA 19s ease-in-out infinite;
}
.svc-hero__mesh i:nth-child(2) {
  width: 40vw; height: 40vw; right: -8%; bottom: -18%;
  background: radial-gradient(circle, rgba(0, 195, 137, .5), transparent 70%);
  animation: svcBlobB 23s ease-in-out infinite;
}
@keyframes svcBlobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7%,8%) scale(1.14); } }
@keyframes svcBlobB { 0%,100% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(-8%,6%) scale(.92); } }

.svc-hero__layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}
.svc-hero__layout > * { min-width: 0; }
.svc-hero__in { max-width: none !important; }

.svc-hero .svc-hero__facts { margin-top: clamp(26px, 3vw, 36px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svc-hero .svc-fact { padding: 14px 16px; }
.svc-hero .svc-fact b { font-size: .95rem; }

/* --------------------------------------------------- the live platform panel */
.svc-hero__visual { position: relative; }
.svc-panel {
  position: relative; z-index: 2;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 34px 70px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
}
.svc-panel__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}
.svc-panel__dots { display: inline-flex; gap: 5px; }
.svc-panel__dots i { width: 9px; height: 9px; border-radius: 50%; }
.svc-panel__dots i:nth-child(1) { background: #FF5F57; }
.svc-panel__dots i:nth-child(2) { background: #FEBC2E; }
.svc-panel__dots i:nth-child(3) { background: #28C840; }
.svc-panel__title { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.8); }
.svc-panel__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, monospace); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #7DF0C6; padding: 5px 11px; border-radius: 999px;
  background: rgba(0, 195, 137, .14); border: 1px solid rgba(0, 195, 137, .32);
}
.svc-panel__live b { width: 6px; height: 6px; border-radius: 50%; background: #00C389; animation: svcPip 1.6s ease-in-out infinite; }
@keyframes svcPip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }

.svc-panel__body { padding: clamp(16px, 2vw, 22px); display: grid; gap: 15px; }
.svc-panel__req { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-panel__req-k { font-family: var(--font-mono, monospace); font-size: .625rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.svc-panel__req-v { font-size: .8125rem; font-weight: 700; color: #fff; padding: 6px 12px; border-radius: 999px; background: rgba(76, 134, 255, .18); border: 1px solid rgba(76, 134, 255, .34); max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.svc-panel__flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; }
.svc-panel__node { display: grid; justify-items: center; gap: 6px; }
.svc-panel__node > svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.svc-panel__node--hub > svg { background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-2)); border-color: transparent; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--svc-accent) 80%, transparent); }
.svc-panel__node--pro > svg { border-color: rgba(0,195,137,.5); }
.svc-panel__node em { font-style: normal; font-size: .625rem; font-weight: 600; color: rgba(255,255,255,.62); }
.svc-panel__wire { position: relative; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.svc-panel__wire i { position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--svc-accent-2), transparent); transform: translateX(-120%); animation: svcWire 2.2s linear infinite; }
.svc-panel__wire:nth-of-type(4) i { animation-delay: 1.1s; }
@keyframes svcWire { to { transform: translateX(260%); } }

.svc-panel__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc-panel__checks li { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.85); }
.svc-panel__checks svg { width: 16px; height: 16px; flex: 0 0 auto; color: #00C389; padding: 3px; border-radius: 50%; background: rgba(0,195,137,.16); opacity: 0; transform: scale(.4); animation: svcTick .5s ease forwards; }
.svc-panel__checks li:nth-child(1) svg { animation-delay: .5s; }
.svc-panel__checks li:nth-child(2) svg { animation-delay: .9s; }
.svc-panel__checks li:nth-child(3) svg { animation-delay: 1.3s; }
.svc-panel__checks li:nth-child(4) svg { animation-delay: 1.7s; }
@keyframes svcTick { to { opacity: 1; transform: scale(1); } }

.svc-panel__result {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: 14px;
  background: rgba(0, 195, 137, .12); border: 1px solid rgba(0, 195, 137, .32);
  opacity: 0; transform: translateY(8px); animation: svcResult .6s ease 2s forwards;
}
.svc-panel__result-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(0,195,137,.2); color: #7DF0C6; }
.svc-panel__result-ic svg { width: 19px; height: 19px; }
.svc-panel__result b { display: block; font-size: .875rem; font-weight: 700; color: #fff; }
.svc-panel__result small { display: block; font-size: .75rem; color: rgba(255,255,255,.6); }
@keyframes svcResult { to { opacity: 1; transform: none; } }

.svc-hero__chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--sb-ink, #071634);
  font-size: .75rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5);
}
.svc-hero__chip svg { width: 15px; height: 15px; }
.svc-hero__chip--a { top: 8%; left: -5%; color: var(--svc-accent); animation: svcChip 5.2s ease-in-out infinite; }
.svc-hero__chip--b { bottom: 10%; right: -3%; color: #058A62; animation: svcChip 5.2s ease-in-out infinite -2.4s; }
@keyframes svcChip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 980px) {
  .svc-hero__layout { grid-template-columns: 1fr; gap: 40px; }
  .svc-hero__visual { max-width: 460px; margin: 0 auto; width: 100%; }
  .svc-hero__chip--a { left: 0; }
  .svc-hero__chip--b { right: 0; }
}
@media (max-width: 600px) {
  .svc-hero .svc-hero__facts { grid-template-columns: 1fr; }
  .svc-panel__checks { grid-template-columns: 1fr; }
  .svc-hero__chip { font-size: .6875rem; padding: 7px 11px; }
  .svc-hero__chip--b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero__mesh i, .svc-panel__wire i, .svc-panel__live b, .svc-hero__chip { animation: none !important; }
  .svc-panel__checks svg, .svc-panel__result { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* =============================================================================
   APP DOWNLOAD BADGES  (.app-badges)
   -----------------------------------------------------------------------------
   Custom-built badge buttons (our own SVG glyphs + text), not the copyrighted
   store artwork. They sit under the social row in the footer and animate on
   hover, focus and press. Swap the hrefs for real store URLs when the apps ship.
============================================================================= */
.app-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.app-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 10px 15px;
  min-width: 158px;
  border-radius: 13px;
  background: #0A0F1C;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .42s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    box-shadow .42s var(--ease-spring, cubic-bezier(.16,1,.3,1)),
    border-color .3s ease, background .3s ease;
}
/* Diagonal light sweep on hover, same language as the site's buttons. */
.app-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .28) 50%, transparent 78%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-spring, ease);
}
.app-badge:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(255, 255, 255, .45);
  background: #0E1424;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .6);
}
.app-badge:hover::after { transform: translateX(130%); }
.app-badge:active { transform: translateY(-1px) scale(.99); transition-duration: .12s; }
.app-badge:focus-visible { outline: 3px solid rgba(76, 134, 255, .6); outline-offset: 3px; }

.app-badge__ic {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  color: #FFFFFF;
}
.app-badge__ic svg { width: 24px; height: 24px; transition: transform .5s var(--ease-spring, ease); }
.app-badge:hover .app-badge__ic svg { transform: scale(1.1); }

.app-badge__txt { position: relative; z-index: 1; display: grid; line-height: 1.15; text-align: left; }
.app-badge__txt small { font-size: .5625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.app-badge__txt b { font-family: var(--font-heading, sans-serif); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: #FFFFFF; }

@media (max-width: 380px) {
  .app-badge { min-width: 0; flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .app-badge, .app-badge::after, .app-badge__ic svg { transition: none !important; }
}

/* Head Office Registration & ICO Badges */
.footer-reg-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.footer-reg-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 12px;
  border-radius: 12px;
  background: #0A0F1C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease, background 0.3s ease;
}

.footer-reg-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
}

.footer-reg-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
  background: #0E1424;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}

.footer-reg-badge:hover::after {
  transform: translateX(130%);
}

.footer-reg-badge .app-badge__ic {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-reg-badge .app-badge__txt {
  position: relative;
  z-index: 1;
  display: grid;
  line-height: 1.2;
  text-align: left;
}

.footer-reg-badge .app-badge__txt small {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.footer-reg-badge .app-badge__txt b {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

/* =============================================================================
   FOOTER ANIMATED WATERMARK WORDMARK (Air Spider Delivery Flash Standard)
   ============================================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(650px circle at var(--mouse-x, 50%) var(--mouse-y, 80%), rgba(37, 99, 235, 0.12), transparent 50%);
  opacity: 0.8;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.ftr__word,
.sb-footer-wordmark {
  text-align: center;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(2.24rem, 9.44vw, 7.36rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  margin-top: clamp(20px, 2.8vw, 35px);
  margin-bottom: clamp(5px, 1vw, 11px);
  position: relative;
  transform: translateY(var(--p, 0px));
  transition: -webkit-text-stroke 0.4s ease, filter 0.4s ease, transform 0.2s linear;
}

.sb-footer-wordmark__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.3) 0%, rgba(0, 195, 137, 0.16) 45%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: sbAuraBreathe 6s ease-in-out infinite alternate;
}

@keyframes sbAuraBreathe {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.sb-footer-wordmark__text {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.18) 22%,
    rgba(76, 134, 255, 0.88) 42%,
    rgba(255, 255, 255, 1) 50%,
    rgba(0, 225, 160, 0.95) 58%,
    rgba(255, 255, 255, 0.18) 78%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sbWordmarkShimmer 6.5s ease-in-out infinite;
}

.sb-footer-wordmark__tm {
  font-size: 0.42em;
  vertical-align: super;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 2px;
  opacity: 0.85;
}

@keyframes sbWordmarkShimmer {
  0% {
    background-position: 140% 0;
  }
  50% {
    background-position: 0% 0;
  }
  100% {
    background-position: -140% 0;
  }
}

.site-footer:hover .sb-footer-wordmark {
  -webkit-text-stroke: 1.5px rgba(76, 134, 255, 0.45);
  filter: drop-shadow(0 0 32px rgba(37, 99, 235, 0.35));
}

/* Accreditations & Quality Standards Grid (ATC, IACUS, ISO 17100, ISO 9001, Oxford Innovation) */
.footer-accred-box {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-accred-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.footer-accred-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.footer-accred-item {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  overflow: hidden;
  cursor: pointer;
  transform: perspective(600px) rotateX(0deg) translateY(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.footer-accred-item--wide {
  grid-column: 1 / -1;
  height: 54px;
  padding: 8px 16px;
}

.footer-accred-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 90%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.footer-accred-item:hover {
  transform: perspective(600px) translateY(-5px) scale(1.05);
  background: #FFFFFF;
  border-color: #3B82F6;
  box-shadow: 0 14px 32px -4px rgba(37, 99, 235, 0.55), 0 0 20px rgba(59, 130, 246, 0.45), inset 0 0 0 1px #60A5FA;
}

.footer-accred-item:hover::before {
  animation: sbAccredShine 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.footer-accred-item img,
.footer-accred-item svg {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.footer-accred-item--wide img,
.footer-accred-item--wide svg {
  max-height: 38px;
}

.footer-accred-item:hover img,
.footer-accred-item:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.35));
}

@keyframes sbAccredShine {
  0% {
    left: -140%;
  }
  100% {
    left: 220%;
  }
}

/* =============================================================================
   WORDMARK FLYING BIRD ANIMATION (Takes off above 's' & lands on 'TM')
   ============================================================================= */
.sb-footer-wordmark {
  position: relative;
  overflow: visible !important;
}

.sb-wordmark-flight-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.sb-wordmark-bird-flyer {
  position: absolute;
  top: 10%;
  left: 3.5%;
  width: clamp(27px, 4.16vw, 51px);
  height: clamp(24px, 3.68vw, 45px);
  animation: sbBirdFlyWordmark 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center center;
  filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.65));
}

.sb-wordmark-bird-body {
  position: relative;
  width: 100%;
  height: 100%;
}

.sb-wordmark-bird-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sb-wm-wing-flap {
  transform-origin: 220px 240px;
  animation: sbWmWingFlapping 0.22s ease-in-out infinite alternate;
}

.sb-wordmark-bird-trail {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 14px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.8));
  filter: blur(2px);
  opacity: 0;
  animation: sbWmTrailPulse 10s infinite;
}

@keyframes sbWmWingFlapping {
  0% {
    transform: rotate(0deg) scaleY(1);
  }
  100% {
    transform: rotate(-36deg) scaleY(0.7);
  }
}

@keyframes sbBirdFlyWordmark {
  /* 1. Resting / perched gracefully above the initial letter 's' */
  0%, 10% {
    left: 3.5%;
    top: 8%;
    transform: translateY(0) rotate(0deg) scale(0.95);
  }
  /* 2. Take-off burst: leaping up above the 's' */
  14% {
    left: 7.5%;
    top: -24%;
    transform: translateY(-8px) rotate(-14deg) scale(1.06);
  }
  /* 3. Swoop across 'e-r-v' */
  26% {
    left: 28%;
    top: -38%;
    transform: translateY(4px) rotate(6deg) scale(1.08);
  }
  /* 4. Undulating flight wave over 'i-c-e-b' */
  42% {
    left: 52%;
    top: -46%;
    transform: translateY(-8px) rotate(-4deg) scale(1.1);
  }
  /* 5. Smooth descending banking over 'i-r-d' */
  58% {
    left: 74%;
    top: -32%;
    transform: translateY(6px) rotate(8deg) scale(1.06);
  }
  /* 6. Flare and glide down towards 'TM' */
  68% {
    left: 89.5%;
    top: -12%;
    transform: translateY(-2px) rotate(-6deg) scale(1);
  }
  /* 7. Perched proud and snug right on top of the 'TM' */
  74%, 92% {
    left: 91.8%;
    top: 6%;
    transform: translateY(0) rotate(0deg) scale(0.95);
  }
  /* 8. Flutter wings and fast take-off cycle back to 's' */
  95% {
    left: 88%;
    top: -28%;
    transform: translateY(-12px) rotate(-16deg) scale(0.85);
    opacity: 0.9;
  }
  99.5% {
    left: 3.5%;
    top: -22%;
    transform: translateY(-6px) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  100% {
    left: 3.5%;
    top: 8%;
    transform: translateY(0) rotate(0deg) scale(0.95);
    opacity: 1;
  }
}

@keyframes sbWmTrailPulse {
  0%, 11%, 74%, 100% {
    opacity: 0;
    transform: scaleX(0.5);
  }
  16%, 66% {
    opacity: 0.9;
    transform: scaleX(1.8) translateX(-10px);
  }
}

/* Alternating automated flash sweep on store & reg badges */
.app-badge,
.footer-reg-badge {
  animation: sbBadgeAutoGleam 9s infinite ease-in-out;
}
.app-badges a:nth-child(2),
.footer-reg-badges .footer-reg-badge:nth-child(2) {
  animation-delay: 4.5s;
}

@keyframes sbBadgeAutoGleam {
  0%, 75%, 100% {
    border-color: rgba(255, 255, 255, 0.2);
  }
  85% {
    border-color: rgba(76, 134, 255, 0.55);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-footer-wordmark__text,
  .sb-footer-wordmark__glow,
  .sb-wordmark-bird-flyer,
  .sb-wm-wing-flap,
  .app-badge,
  .footer-reg-badge {
    animation: none !important;
  }
}

/* =============================================================================
   HERO STORY  (.hero-story) — replaces the bird
   -----------------------------------------------------------------------------
   Four beats of the service-user journey, on light cards over the light hero.
   One clock writes data-story-scene="0..3"; the matching scene and caption show.
   Inner animations loop, so whichever beat is on screen always feels alive.
============================================================================= */
.hero-story {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 40px;
}
.hero-story__stage {
  position: relative;
  height: 300px;
}
.hero-story__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97);
  transition: opacity .6s var(--ease-spring, ease), transform .7s var(--ease-spring, ease), visibility .6s;
}
.hero-story[data-story-scene="0"] [data-story-scene-el="0"],
.hero-story[data-story-scene="1"] [data-story-scene-el="1"],
.hero-story[data-story-scene="2"] [data-story-scene-el="2"],
.hero-story[data-story-scene="3"] [data-story-scene-el="3"] {
  opacity: 1; visibility: visible; transform: none;
}

/* --- shared bits ---------------------------------------------------------- */
.hs-card {
  position: relative;
  width: 340px;
  max-width: 88vw;
  background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 30px 60px -26px rgba(15,23,42,.28);
  padding: 20px;
}
.hs-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.hs-card__who { display: grid; line-height: 1.2; }
.hs-card__who b { font-size: .95rem; font-weight: 800; color: var(--text-heading, #0F172A); }
.hs-card__who small { font-size: .75rem; color: var(--text-subtle, #64748B); }
.hs-avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
}
.hs-avatar svg { width: 22px; height: 22px; }
.hs-avatar--you { background: linear-gradient(135deg, #4C86FF, #2563EB); }
.hs-avatar--rep { background: linear-gradient(135deg, #2563EB, #1E40AF); }
.hs-avatar--pro { background: linear-gradient(135deg, #00C389, #059669); }
.hs-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; color: #059669; }
.hs-live i { width: 7px; height: 7px; border-radius: 50%; background: #00C389; animation: hsPip 1.5s ease-in-out infinite; }
@keyframes hsPip { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 12px 20px; border-radius: 12px;
  font-family: var(--font-heading, sans-serif); font-size: .875rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  box-shadow: 0 10px 22px -8px rgba(37,99,235,.55);
}
.hs-btn svg { width: 16px; height: 16px; }
.hs-btn--pulse { animation: hsBtnPulse 2s var(--ease-spring, ease) infinite; }
@keyframes hsBtnPulse { 0%,100%{box-shadow:0 10px 22px -8px rgba(37,99,235,.55)} 50%{box-shadow:0 10px 30px -6px rgba(37,99,235,.85)} }
.hs-btn--ok { background: linear-gradient(135deg, #00C389, #059669); box-shadow: 0 10px 22px -8px rgba(0,195,137,.5); animation: hsBtnPulse 2s ease infinite; }

.hs-float {
  position: absolute; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #2563EB;
  background: #fff; border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 12px 26px -12px rgba(15,23,42,.35);
  animation: hsFloat 4.5s ease-in-out infinite;
}
.hs-float svg { width: 21px; height: 21px; }
.hs-float--globe { top: 4%; right: 6%; color: #2563EB; }
.hs-float--phone { bottom: 6%; left: 4%; color: #059669; animation-delay: -2s; }
@keyframes hsFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* --- Beat 1: request form ------------------------------------------------- */
.hs-field { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border-subtle, #EEF2F6); }
.hs-field__k { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle, #64748B); min-width: 66px; }
.hs-field__v { font-size: .875rem; font-weight: 600; color: var(--text-heading, #0F172A); }
.hs-type { position: relative; overflow: hidden; white-space: nowrap; }
.hs-type::before { content: "Amara N."; }
.hs-type--2::before { content: "Manchester, UK"; }
.hero-story[data-story-scene="0"] .hs-type { width: 0; animation: hsType 1.3s steps(12) .3s forwards; }
.hero-story[data-story-scene="0"] .hs-type--2 { animation-delay: 1.5s; animation-duration: 1.4s; }
@keyframes hsType { to { width: 8.2em; } }
.hs-chip { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; color: #2563EB; padding: 5px 12px; border-radius: 999px; background: rgba(37,99,235,.1); }

/* --- Beat 2: chat --------------------------------------------------------- */
.hs-msg { max-width: 84%; margin-bottom: 9px; padding: 11px 14px; border-radius: 14px; font-size: .8125rem; line-height: 1.5; }
.hs-msg--in { background: var(--bg-subtle, #F1F5F9); color: var(--text-main, #0F172A); border-bottom-left-radius: 5px; }
.hero-story[data-story-scene="1"] .hs-msg { opacity: 0; transform: translateY(8px); animation: hsMsgIn .5s var(--ease-spring, ease) forwards; }
.hero-story[data-story-scene="1"] .hs-msg--in { animation-delay: .35s; }
.hero-story[data-story-scene="1"] .hs-msg--2 { animation-delay: 1.1s; }
.hero-story[data-story-scene="1"] .hs-reply { opacity: 0; animation: hsMsgIn .5s ease 1.8s forwards; }
@keyframes hsMsgIn { to { opacity: 1; transform: none; } }
.hs-reply { display: flex; justify-content: flex-end; margin-top: 4px; }

/* --- Beat 3: matching ----------------------------------------------------- */
.hs-match { position: relative; width: 190px; height: 150px; margin: 0 auto 6px; }
.hs-match__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2563EB, #1E40AF); box-shadow: 0 14px 30px -10px rgba(37,99,235,.6); z-index: 2;
}
.hs-match__hub svg { width: 26px; height: 26px; }
.hs-ring { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 1.5px solid rgba(37,99,235,.4); animation: hsRing 2.4s ease-out infinite; }
.hs-ring--2 { animation-delay: 1.2s; }
@keyframes hsRing { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.6);opacity:0} }
.hs-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #00C389; box-shadow: 0 0 0 4px rgba(0,195,137,.16); }
.hs-dot--1 { left: 6%;  top: 16%; animation: hsBlink 1.6s ease infinite; }
.hs-dot--2 { right: 4%; top: 30%; background:#4C86FF; box-shadow:0 0 0 4px rgba(76,134,255,.16); animation: hsBlink 1.6s ease .4s infinite; }
.hs-dot--3 { left: 12%; bottom: 12%; background:#F5A524; box-shadow:0 0 0 4px rgba(245,165,36,.16); animation: hsBlink 1.6s ease .8s infinite; }
.hs-dot--4 { right: 10%; bottom: 8%; animation: hsBlink 1.6s ease 1.2s infinite; }
@keyframes hsBlink { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
.hs-card--matched { display: flex; align-items: center; gap: 12px; width: 340px; padding: 15px 18px; }
.hero-story[data-story-scene="2"] .hs-card--matched { opacity: 0; transform: translateY(10px); animation: hsMsgIn .55s var(--ease-spring, ease) 1s forwards; }
.hs-tick { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #00C389; }
.hs-tick svg { width: 16px; height: 16px; }

/* --- Beat 4: solved ------------------------------------------------------- */
.hs-solve { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hs-person { display: grid; justify-items: center; gap: 8px; }
.hs-person em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--text-muted, #475569); }
.hs-person .hs-avatar { width: 56px; height: 56px; border-radius: 18px; }
.hs-person .hs-avatar svg { width: 27px; height: 27px; }
.hs-bridge { position: relative; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px; }
.hs-bridge i { width: 4px; border-radius: 2px; background: linear-gradient(180deg, #4C86FF, #00C389); }
.hero-story[data-story-scene="3"] .hs-bridge i { animation: hsWave 1s ease-in-out infinite alternate; }
.hs-bridge i:nth-child(1){height:14px;animation-delay:-.05s} .hs-bridge i:nth-child(2){height:26px;animation-delay:-.5s}
.hs-bridge i:nth-child(3){height:18px;animation-delay:-.2s} .hs-bridge i:nth-child(4){height:32px;animation-delay:-.7s}
.hs-bridge i:nth-child(5){height:20px;animation-delay:-.3s} .hs-bridge i:nth-child(6){height:28px;animation-delay:-.6s}
.hs-bridge i:nth-child(7){height:16px;animation-delay:-.15s} .hs-bridge i:nth-child(8){height:24px;animation-delay:-.45s}
@keyframes hsWave { from{transform:scaleY(.5)} to{transform:scaleY(1)} }
.hs-bridge__lbl { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 700; color: #059669; background: rgba(0,195,137,.12); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hs-happy {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 11px 20px; border-radius: 999px; color: #059669;
  background: rgba(0,195,137,.12); border: 1px solid rgba(0,195,137,.3);
  font-weight: 800; font-size: .95rem;
}
.hs-happy svg { width: 22px; height: 22px; color: #E5484D; }
.hero-story[data-story-scene="3"] .hs-happy { animation: hsPop .6s var(--ease-spring, ease) .5s both; }
.hero-story[data-story-scene="3"] .hs-happy svg { animation: hsHeart 1.4s ease-in-out infinite .9s; }
@keyframes hsPop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none} }
@keyframes hsHeart { 0%,100%{transform:scale(1)} 30%{transform:scale(1.25)} 45%{transform:scale(1.05)} }

/* --- caption + progress --------------------------------------------------- */
.hero-story__cap {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px; padding: 14px 18px;
  border-radius: 18px; background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: var(--shadow-card, 0 4px 20px -2px rgba(15,23,42,.06));
}
.hero-story__n { font-family: var(--font-mono, monospace); font-size: 1.4rem; font-weight: 800; color: #2563EB; letter-spacing: -.03em; }
.hero-story__text { flex: 1 1 auto; display: grid; text-align: left; min-width: 0; }
.hero-story__text b { font-size: .95rem; font-weight: 800; color: var(--text-heading, #0F172A); }
.hero-story__text small { font-size: .8rem; color: var(--text-muted, #475569); }
.hero-story__steps { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.hero-story__steps i { width: 8px; height: 8px; border-radius: 999px; background: var(--border-main, #CBD5E1); transition: width .4s var(--ease-spring, ease), background .4s ease; }
.hero-story[data-story-scene="0"] [data-story-step]:nth-child(1),
.hero-story[data-story-scene="1"] [data-story-step]:nth-child(2),
.hero-story[data-story-scene="2"] [data-story-step]:nth-child(3),
.hero-story[data-story-scene="3"] [data-story-step]:nth-child(4) { width: 22px; background: linear-gradient(90deg,#2563EB,#00C389); }

@media (max-width: 560px) {
  .hero-story { max-width: 100%; }
  .hero-story__stage { height: 320px; }
  .hs-card, .hs-card--matched { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-btn--pulse, .hs-btn--ok, .hs-float, .hs-live i, .hs-ring, .hs-dot, .hs-bridge i, .hs-happy svg,
  .hero-story[data-story-scene] .hs-type { animation: none !important; }
  .hs-type { width: 8.2em !important; }
  .hero-story[data-story-scene] .hs-msg, .hero-story[data-story-scene] .hs-reply,
  .hero-story[data-story-scene] .hs-card--matched, .hero-story[data-story-scene] .hs-happy { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* =============================================================================
   SECTION BACKGROUNDS — varied, illustrated, colour-combined
   -----------------------------------------------------------------------------
   The light sections were all plain white, which read as flat. Each now gets
   its own gentle brand-tinted wash and a subtle illustrated layer (soft blobs,
   a dot field, faint waves), the way the reference sites vary their sections.
   All washes are low-opacity so body text keeps full contrast, and each is a
   background layer behind the content — no layout changes.
============================================================================= */
/* =============================================================================
   UNIFIED HOMEPAGE SECTION SURFACES & RHYTHMIC COHESION
   (Standardized on clean white #FFFFFF & soft neutral #F8FAFC, mirroring Airspider)
   -----------------------------------------------------------------------------
   All light sections share clean white (#FFFFFF) or soft neutral canvas (#F8FAFC).
   Eliminates all jarring color shifts, noisy dot grids, diagonal weaves, and floating blobs.
============================================================================= */
/* =============================================================================
   GLOBAL LIVING AMBIENT BACKGROUND ANIMATION CANVAS
   Smoothly drifting glowing ambient gradient orbs across the entire website.
   Fixed to the viewport and placed behind all content so it NEVER gets sliced or cut off!
============================================================================= */
.sb-live-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sb-live-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.70;
  pointer-events: none;
  will-change: transform;
}

/* 1. Top-Left Azure Glow (Hero to Services) */
.sb-live-blob--1 {
  top: 4%;
  left: -8%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.30) 0%, rgba(37, 99, 235, 0.08) 55%, transparent 75%);
  animation: sbLiveDrift1 20s ease-in-out infinite alternate;
}

/* 2. Upper-Right Emerald Mint Glow (Services to Engine) */
.sb-live-blob--2 {
  top: 25%;
  right: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, rgba(0, 195, 137, 0.06) 55%, transparent 75%);
  animation: sbLiveDrift2 24s ease-in-out infinite alternate;
}

/* 3. Mid-Left Violet Glow (Who We Are) */
.sb-live-blob--3 {
  top: 48%;
  left: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.26) 0%, rgba(124, 58, 237, 0.06) 55%, transparent 75%);
  animation: sbLiveDrift3 22s ease-in-out infinite alternate;
}

/* 4. Lower-Right Cyan Glow (Organisations to Providers) */
.sb-live-blob--4 {
  top: 70%;
  right: -8%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.28) 0%, rgba(37, 99, 235, 0.06) 55%, transparent 75%);
  animation: sbLiveDrift4 26s ease-in-out infinite alternate;
}

/* 5. Bottom-Left Indigo Glow (Contact CTA & Footer) */
.sb-live-blob--5 {
  bottom: 2%;
  left: -6%;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.25) 0%, rgba(37, 99, 235, 0.05) 55%, transparent 75%);
  animation: sbLiveDrift5 25s ease-in-out infinite alternate;
}

@keyframes sbLiveDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, 80px) scale(1.12); }
  100% { transform: translate(-30px, 140px) scale(0.96); }
}

@keyframes sbLiveDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-70px, -60px) scale(1.15); }
  100% { transform: translate(40px, -120px) scale(0.92); }
}

@keyframes sbLiveDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(80px, -50px) scale(1.1); }
  100% { transform: translate(-40px, 90px) scale(0.95); }
}

@keyframes sbLiveDrift4 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60px, 60px) scale(1.14); }
  100% { transform: translate(30px, 110px) scale(0.94); }
}

@keyframes sbLiveDrift5 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, -60px) scale(1.08); }
  100% { transform: translate(-30px, -90px) scale(0.96); }
}

/* =============================================================================
   SEAMLESS UNIFIED HOMEPAGE CANVAS
   All sections are transparent so the global living ambient background system
   flows uninterrupted across the entire page with ZERO cuts and ZERO seams.
============================================================================= */
main {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.hero-section.hero-j {
  position: relative;
  text-align: center;
  background: transparent !important;
  padding-top: clamp(100px, 10vw, 136px) !important;
  padding-bottom: clamp(24px, 3vw, 36px) !important;
}

.trustband {
  padding: clamp(20px, 2.5vw, 30px) 0 !important;
  background: transparent !important;
  border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.sb-ai {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.dive-section,
.services-section {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
}

.how-it-works-section,
.sb-engine {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
  border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.who-we-are-section {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
}

.organisations-section {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
  border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  overflow: visible !important;
}

.providers-section {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
}

.contact-cta {
  padding: clamp(56px, 7vw, 90px) 0 !important;
  background: transparent !important;
}

.dive-section::before,
.dive-section::after,
.sb-engine::before,
.sb-engine::after,
.sb-engine__bg,
.sb-engine__bg::after,
.who-we-are-section::before,
.who-we-are-section::after,
.organisations-section::before,
.organisations-section::after,
.providers-section::before,
.providers-section::after,
.contact-cta::before,
.contact-cta::after {
  display: none !important;
}

/* =============================================================================
   OUR SERVICES — MERGED MEGA DROPDOWN  (.nav-mega / .nav-mega--svc)
   -----------------------------------------------------------------------------
   One panel under a single "Our Services" nav entry. A left rail lists the live
   service + linking pipeline; the right shows the wider "coming soon" public-
   sector marketplace. Opens on hover and on keyboard focus, consistent with the
   existing nav dropdown. (Former separate "Products Coming Soon" entry folded in
   here so the bar carries one services item and the logo/CTA keep their room.)
============================================================================= */
.nav-svc-wrapper {
  position: static;
  display: inline-flex;
  align-items: center;
}

.nav-mega {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px;
  background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 40px 80px -30px rgba(15,23,42,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(0.16, 1, 0.3, 1), transform .26s cubic-bezier(0.16, 1, 0.3, 1), visibility .22s;
  z-index: 200;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.35) rgba(241, 245, 249, 0.7);
}

.nav-mega::-webkit-scrollbar {
  width: 6px;
}

.nav-mega::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.7);
  border-radius: 999px;
}

.nav-mega::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.35);
  border-radius: 999px;
}

.nav-mega::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.6);
}

/* Generous, seamless hover bridge across the navbar gap so the panel NEVER closes when moving the cursor */
.nav-mega::before {
  content: "";
  position: absolute;
  left: -80px;
  right: -80px;
  top: -45px;
  height: 50px;
  z-index: 10;
  pointer-events: auto;
}

.nav-svc-wrapper:hover .nav-mega,
.nav-svc-wrapper:focus-within .nav-mega,
.nav-svc-wrapper.is-open .nav-mega,
.nav-mega:hover,
.nav-mega-wrapper:hover .nav-mega,
.nav-mega-wrapper:focus-within .nav-mega {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Two-column shell: fixed left rail + fluid marketplace grid. */
.nav-mega--svc {
  width: min(1060px, calc(100vw - 40px));
  max-height: calc(100vh - 80px) !important;
}
.nav-mega__cols {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 26px;
  align-items: start;
}
.nav-mega__rail {
  border-right: 1px solid var(--border-subtle, #EEF2F6);
  padding-right: 24px;
}
.nav-mega__rail .dropdown-section-title { padding: 6px 4px; }
.nav-mega__rail .dropdown-card-active { margin: 2px 0 4px; }
.nav-mega__rail .dropdown-item-soon { padding: 9px 10px; }
.nav-mega__main { min-width: 0; }

/* Intro band */
.nav-mega__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge title" "badge sub";
  column-gap: 14px; align-items: center;
  padding: 4px 6px 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #EEF2F6);
}
.nav-mega__badge {
  grid-area: badge; align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--brand-blue-subtle, rgba(37,99,235,.08));
  color: var(--brand-blue-vibrant, #2563EB);
  font-family: var(--font-mono, monospace); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.nav-mega__badge i { width: 7px; height: 7px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 3px rgba(245,165,36,.18); }
.nav-mega__intro b { grid-area: title; font-family: var(--font-heading, sans-serif); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-heading, #0F172A); }
.nav-mega__intro small { grid-area: sub; font-size: .8125rem; color: var(--text-muted, #475569); }

/* Category grid */
.nav-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; }
.nav-mega__cat { padding: 10px; border-radius: 14px; transition: background .25s ease; }
.nav-mega__cat:hover { background: var(--bg-subtle, #F8FAFC); }
.nav-mega__cat-h {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; font-weight: 800; color: var(--text-heading, #0F172A);
  letter-spacing: -.01em; margin-bottom: 8px;
}
.nav-mega__ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-blue-subtle, rgba(37,99,235,.08));
  color: var(--brand-blue-vibrant, #2563EB);
  transition: transform .4s var(--ease-spring, ease), background .3s ease, color .3s ease;
}
.nav-mega__ic svg { width: 18px; height: 18px; }
.nav-mega__cat:hover .nav-mega__ic { transform: rotate(-6deg) scale(1.08); background: var(--brand-blue-vibrant, #2563EB); color: #fff; }
.nav-mega__cat ul { list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: 2px; }
.nav-mega__cat li {
  position: relative; font-size: .8125rem; line-height: 1.5; color: var(--text-muted, #475569);
  padding: 3px 0 3px 14px; transition: color .2s ease;
}
.nav-mega__cat li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #CBD5E1; transition: background .2s ease; }
.nav-mega__cat li:hover { color: var(--text-heading, #0F172A); }
.nav-mega__cat li:hover::before { background: var(--brand-blue-vibrant, #2563EB); }

/* Footer line */
.nav-mega__foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle, #EEF2F6);
  text-align: center;
  font-size: .8125rem; font-weight: 600; color: var(--text-muted, #475569);
}

/* Mobile: the mega menu is desktop-nav only; the drawer lists Our Services as a
   simple link. */
@media (max-width: 1200px) {
  .nav-svc-wrapper .nav-mega,
  .nav-mega-wrapper { display: none !important; }
}
@media (max-width: 1120px) {
  .nav-mega--svc { width: calc(100vw - 32px); }
  .nav-mega__cols { grid-template-columns: 300px 1fr; gap: 20px; }
  .nav-mega__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega { transition: opacity .01ms, visibility .01ms; }
}

/* Mobile drawer "Products Coming Soon" entry */
.mnav-soon { display: inline-flex !important; align-items: center; gap: 10px; }
.mnav-soon span { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C2740A; background: rgba(245,165,36,.14); border: 1px solid rgba(245,165,36,.34); padding: 3px 9px; border-radius: 999px; }

/* =============================================================================
   HERO — 5-STEP JOURNEY  (.hero-j / .j5)
   -----------------------------------------------------------------------------
   Headline -> five illustrated, animated steps with dashed connectors ->
   CTAs -> trust bar. Light, brand-blue, calm. Structure follows the reference
   layout; the artwork and copy are original Servicebird.
============================================================================= */
.hero-section.hero-j {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center;
  background:
    radial-gradient(120% 60% at 50% -8%, #EAF1FF 0%, rgba(234,241,255,0) 62%),
    linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 78%);
  padding-top: clamp(116px, 12vw, 158px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
/* Faint world-map dot field behind the journey, like the reference. */
.hero-j__map {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(37,99,235,.08) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(80% 60% at 50% 42%, #000, transparent 78%);
}

.hero-j__head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); }
.hero-j__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid var(--border-main,#E2E8F0); box-shadow: 0 2px 8px rgba(15,23,42,.05);
  font-size: .8125rem; font-weight: 700; color: var(--brand-blue-vibrant,#2563EB); margin-bottom: 20px;
}
.hero-j__eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #00C389; box-shadow: 0 0 0 3px rgba(0,195,137,.16); }
.hero-j__title { font-family: var(--font-heading,sans-serif); font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--text-heading,#0F172A); margin: 0 0 16px; }
.hero-j__sub { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--text-muted,#475569); max-width: 60ch; margin: 0 auto; }

/* ---- the journey grid ---- */
.j5 {
  --j5-arrow: clamp(12px, 2.2vw, 36px);
  --j5-cols: minmax(0,1fr) var(--j5-arrow) minmax(0,1fr) var(--j5-arrow) minmax(0,1fr) var(--j5-arrow) minmax(0,1fr);
  position: relative;
}
.j5.j5--4 {
  --j5-arrow: clamp(12px, 2.2vw, 36px);
  --j5-cols: minmax(0,1fr) var(--j5-arrow) minmax(0,1fr) var(--j5-arrow) minmax(0,1fr) var(--j5-arrow) minmax(0,1fr);
}
.j5__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--j5-cols); align-items: end; }
.j5__step { min-width: 0; }
.j5__scene { position: relative; }
.j5__scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.j5__halo { fill: #E7EFFF; }

/* dashed animated connector between scenes */
.j5__arrow { align-self: center; position: relative; height: 2px; }
.j5__arrow span { position: absolute; inset: 0; border-top: 2px dashed #B9CBEE; }
.j5__arrow::after { content: ""; position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; border-top: 2px solid #B9CBEE; border-right: 2px solid #B9CBEE; transform: translateY(-50%) rotate(45deg); }
.j5__arrow span::before { content: ""; position: absolute; top: -2px; left: 0; width: 22%; border-top: 2px solid #2563EB; animation: j5flow 2.4s linear infinite; }
@keyframes j5flow { from { left: -22%; } to { left: 100%; } }

/* captions row, aligned to the same columns */
.j5__caps { display: grid; grid-template-columns: var(--j5-cols); margin-top: 16px; }
.j5__cap { min-width: 0; padding: 0 6px; text-align: center; }
.j5__cap:nth-of-type(1){grid-column:1}
.j5__cap:nth-of-type(2){grid-column:3}
.j5__cap:nth-of-type(3){grid-column:5}
.j5__cap:nth-of-type(4){grid-column:7}
.j5__cap:nth-of-type(5){grid-column:9}
.j5__num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#2563EB,#4C86FF); color: #fff; font-family: var(--font-mono,monospace); font-size: .85rem; font-weight: 800; margin: 0 auto 10px auto; box-shadow: 0 8px 18px -8px rgba(37,99,235,.6); }
.j5__cap b { display: block; font-family: var(--font-heading,sans-serif); font-size: .95rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-heading,#0F172A); margin-bottom: 6px; line-height: 1.3; }
.j5__cap small { display: block; font-size: .8125rem; line-height: 1.5; color: var(--text-muted,#475569); }

/* ---- CTAs + trust bar ---- */
.hero-j__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(34px,4.5vw,52px); }
.hero-j__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-top: clamp(26px,3vw,38px); padding: 16px 26px;
  background: #FFFFFF; border: 1px solid var(--border-main,#E2E8F0); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15,23,42,.05); width: fit-content; margin-inline: auto; max-width: 100%;
}
.hero-j__trust span { display: inline-flex; align-items: center; gap: 9px; font-size: .8125rem; font-weight: 700; color: var(--text-heading,#0F172A); }
.hero-j__trust .ht-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-blue-subtle,rgba(37,99,235,.08)); color: var(--brand-blue-vibrant,#2563EB); }
.hero-j__trust .ht-ic svg { width: 15px; height: 15px; }

/* ============================ SCENE ANIMATIONS ============================ */
@media (prefers-reduced-motion: no-preference) {
  .j5-float { animation: j5float 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .j5-rise  { animation: j5rise 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
  .j5-plane { animation: j5plane 6s ease-in-out infinite; transform-box: fill-box; }
  .j5-btn   { animation: j5btn 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .j5-type  { animation: j5type 3.4s ease-in-out infinite; }
  .j5-type--2 { animation-delay: .6s; }
  .j5-pop   { animation: j5pop 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .j5-dot   { animation: j5dot 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .j5-badge { animation: j5pin 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .j5-pin   { animation: j5pin 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
  .j5-shake { animation: j5shake 2.4s ease-in-out infinite; transform-box: fill-box; }
  .j5-bubble{ animation: j5pop 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .j5-heart { animation: j5heart 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes j5float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes j5rise  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes j5plane { 0%{transform:translate(0,0);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translate(-16px,-10px);opacity:0} }
@keyframes j5btn   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.04);opacity:.9} }
@keyframes j5type  { 0%{width:0} 45%,100%{width:44px} }
@keyframes j5pop   { 0%,70%,100%{transform:scale(1)} 82%{transform:scale(1.12)} }
@keyframes j5dot   { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(-3px);opacity:1} }
@keyframes j5check { to{opacity:1;transform:scale(1)} }
@keyframes j5wave  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-16deg)} 75%{transform:rotate(14deg)} }
@keyframes j5pin   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes j5shake { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-2px)} 60%{transform:translateY(1px)} }
@keyframes j5heart { 0%,100%{transform:scale(1)} 30%{transform:scale(1.22)} 45%{transform:scale(1.05)} }

/* ---- responsive journey layout ---- */
@media (max-width: 1080px) {
  .j5, .j5.j5--4 { --j5-arrow: clamp(8px, 1.5vw, 18px); }
  .j5__cap b { font-size: .875rem; }
  .j5__cap small { font-size: .75rem; }
}

@media (max-width: 860px) {
  .j5, .j5.j5--4 {
    display: block;
    max-width: 520px;
    margin: 0 auto;
  }
  .j5__arrow {
    display: none !important;
  }
  .j5__row,
  .j5.j5--4 .j5__row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .j5__step {
    min-width: 0 !important;
    width: 100% !important;
  }
  .j5__scene {
    max-width: 190px !important;
    margin: 0 auto !important;
  }
  .j5__scene svg {
    width: 100% !important;
    height: auto !important;
  }
  .j5__caps,
  .j5.j5--4 .j5__caps {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 480px !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .j5__cap,
  .j5__cap:nth-of-type(1),
  .j5__cap:nth-of-type(2),
  .j5__cap:nth-of-type(3),
  .j5__cap:nth-of-type(4),
  .j5__cap:nth-of-type(5) {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    gap: 14px !important;
    text-align: left !important;
    align-items: start !important;
    padding: 14px 16px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border-main, #E2E8F0) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .j5__num {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
  }
  .j5__cap b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.95rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.35 !important;
    color: var(--text-heading, #0F172A) !important;
  }
  .j5__cap small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: var(--text-muted, #475569) !important;
  }
}

@media (max-width: 520px) {
  .hero-j__trust { border-radius: 22px; gap: 12px 18px; }
  .hero-j__cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .j5__row,
  .j5.j5--4 .j5__row {
    max-width: 310px !important;
    gap: 8px !important;
  }
  .j5__scene {
    max-width: 145px !important;
  }
  .j5__caps,
  .j5.j5--4 .j5__caps {
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .j5__cap,
  .j5__cap:nth-of-type(1),
  .j5__cap:nth-of-type(2),
  .j5__cap:nth-of-type(3),
  .j5__cap:nth-of-type(4) {
    padding: 12px 14px !important;
    gap: 10px !important;
    grid-template-columns: 32px 1fr !important;
  }
  .j5__num {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
  }
  .j5__cap b {
    font-size: 0.875rem !important;
  }
  .j5__cap small {
    font-size: 0.775rem !important;
  }
}

/* =============================================================================
/* =============================================================================
   TRUST BAND — public-sector settings rail (under the hero)
============================================================================= */
.trustband { padding: clamp(28px, 4vw, 46px) 0; background: #FFFFFF; border: none !important; overflow: hidden; }
.trustband__lead { text-align: center; font-family: var(--font-mono,monospace); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle,#64748B); margin: 0 0 22px; }
.trustband__viewport { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; }
.trustband__track { 
  display: flex !important; 
  width: max-content !important; 
  gap: 44px !important; 
  align-items: center !important; 
  animation: trustScroll 28s linear infinite !important;
  will-change: transform;
}
@keyframes trustScroll { 
  0% { transform: translateX(0); } 
  100% { transform: translateX(-50%); } 
}
.trustband__item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: #1E293B; white-space: nowrap; opacity: .85; transition: color .3s ease; }
.trustband__item:hover { color: var(--brand-blue-vibrant,#2563EB); }
.trustband__item svg { width: 26px; height: 26px; color: var(--brand-blue-vibrant,#2563EB); opacity: .9; }
@media (max-width: 600px) { .trustband__item { font-size: .95rem; } .trustband__track { gap: 32px; } }

/* ===== CLEAN HOMEPAGE COMPONENTS (rebuild) ===== */

/* =============================================================================
   CLEAN HOMEPAGE COMPONENTS (replace the stripped animated widgets)
============================================================================= */

/* --- Active service feature: copy + delivery methods + photo -------------- */
.svc-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  padding: clamp(28px, 3.5vw, 44px);
  background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  border-radius: 26px;
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 30px 66px -30px rgba(15,23,42,.26);
}
.svc-feature > * { min-width: 0; }
.svc-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.svc-feature__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #059669; margin-bottom: 14px;
}
.svc-feature__brand i { width: 8px; height: 8px; border-radius: 50%; background: #00C389; box-shadow: 0 0 0 3px rgba(0,195,137,.16); }
.svc-feature__h { font-family: var(--font-heading, sans-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; color: var(--text-heading, #0F172A); margin: 0 0 14px; }
.svc-feature__p { font-size: 1rem; line-height: 1.7; color: var(--text-muted, #475569); margin: 0 0 22px; }
.svc-feature__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc-feature__list li { display: flex; align-items: center; gap: 11px; font-size: .9375rem; font-weight: 600; color: var(--text-heading, #0F172A); }
.svc-feature__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-blue-subtle, rgba(37,99,235,.08)); color: var(--brand-blue-vibrant, #2563EB); }
.svc-feature__ic svg { width: 19px; height: 19px; }
.svc-feature__actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.svc-feature__media { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.svc-feature__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.6; object-fit: cover; border-radius: 20px; border: 1px solid var(--border-main, #E2E8F0); box-shadow: 0 30px 60px -28px rgba(15,23,42,.3); }
.svc-feature__chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.96); border: 1px solid var(--border-main, #E2E8F0); box-shadow: 0 14px 30px -14px rgba(15,23,42,.4); font-size: .72rem; font-weight: 700; color: #059669; }
.svc-feature__chip svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .svc-feature { grid-template-columns: 1fr; }
  .svc-feature__media { order: -1; }
}
@media (max-width: 520px) { .svc-feature__list { grid-template-columns: 1fr; } }

/* --- Provider onboarding: clean static card ------------------------------- */
.prov-card {
  background: #FFFFFF; border: 1px solid var(--border-main, #E2E8F0);
  border-radius: 24px; padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 26px 56px -30px rgba(15,23,42,.24);
  display: grid; gap: 6px;
}
.prov-card__eyebrow { font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-blue-vibrant, #2563EB); margin-bottom: 10px; }
.prov-card__item { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start; padding: 15px 0; border-top: 1px solid var(--border-subtle, #EEF2F6); }
.prov-card__item:first-of-type { border-top: none; }
.prov-card__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-blue-subtle, rgba(37,99,235,.08)); color: var(--brand-blue-vibrant, #2563EB); transition: transform .4s var(--ease-spring, ease); }
.prov-card__ic svg { width: 21px; height: 21px; }
.prov-card__item:hover .prov-card__ic { transform: translateY(-3px); }
.prov-card__item b { display: block; font-size: .975rem; font-weight: 700; color: var(--text-heading, #0F172A); margin-bottom: 3px; }
.prov-card__item small { display: block; font-size: .8625rem; line-height: 1.55; color: var(--text-muted, #475569); }

/* --- How it works: four clean step cards on a light band ------------------ */
.how-lite {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(64px, 8vw, 108px) 0;
  background:
    radial-gradient(120% 70% at 82% -10%, rgba(37,99,235,.06) 0%, rgba(37,99,235,0) 58%),
    linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
}
.how-lite__steps {
  list-style: none; margin: clamp(34px, 4vw, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.how-lite__step {
  position: relative; background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0); border-radius: 20px;
  padding: 26px 22px 24px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04), 0 24px 50px -34px rgba(15,23,42,.24);
  transition: transform .4s var(--ease-spring, ease), box-shadow .4s ease, border-color .3s ease;
}
.how-lite__step:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 32px 60px -30px rgba(37,99,235,.4);
}
/* dashed connector between cards */
.how-lite__step:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; right: -13px; width: 26px; height: 2px;
  background-image: linear-gradient(90deg, #B9CBEE 0 6px, transparent 6px 11px);
  background-size: 11px 2px;
}
.how-lite__no {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-mono, monospace); font-size: 1.05rem; font-weight: 800;
  color: rgba(37,99,235,.18);
}
.how-lite__ic {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2563EB, #4C86FF); color: #fff; margin-bottom: 18px;
  box-shadow: 0 14px 26px -12px rgba(37,99,235,.6);
  transition: transform .45s var(--ease-spring, ease);
}
.how-lite__step:hover .how-lite__ic { transform: rotate(-6deg) scale(1.06); }
.how-lite__ic svg { width: 25px; height: 25px; }
.how-lite__step b { display: block; font-family: var(--font-heading, sans-serif); font-size: 1.075rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-heading, #0F172A); margin-bottom: 7px; }
.how-lite__step > span:last-child { display: block; font-size: .875rem; line-height: 1.6; color: var(--text-muted, #475569); }
.how-lite__signals {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: clamp(30px, 3.5vw, 44px);
}
.how-lite__signals span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--border-main, #E2E8F0);
  font-size: .8125rem; font-weight: 700; color: var(--text-heading, #0F172A);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.how-lite__signals span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #00C389; }
@media (max-width: 960px) {
  .how-lite__steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .how-lite__step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .how-lite__steps { grid-template-columns: 1fr; } }

/* =============================================================================
   ONE PLATFORM, POWERED BY AI  (.sb-ai)
   Desktop (Requester) + mobile app (Freelancer), joined by AI matching.
   Composition follows the reference: centred head -> device cluster ->
   feature checks -> pill -> CTA. Colourful light band.
============================================================================= */
.sb-ai {
  position: relative;
  overflow: visible;
  padding: clamp(66px, 8vw, 116px) 0;
  background: #FFFFFF !important;
}
.sb-ai__bg {
  display: none !important;
}
.sb-ai .container {
  overflow: visible;
}
.sb-ai__head { max-width: 760px; margin: 0 auto clamp(34px, 5vw, 60px); text-align: center; }
.sb-ai__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid var(--border-main,#E2E8F0); box-shadow: 0 2px 8px rgba(15,23,42,.05);
  font-family: var(--font-mono,monospace); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-blue-vibrant,#2563EB); margin-bottom: 18px;
}
.sb-ai__eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.sb-ai__head h2 { font-family: var(--font-heading,sans-serif); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--text-heading,#0F172A); margin: 0 0 16px; }
.sb-ai__head p { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.7; color: var(--text-muted,#475569); margin: 0 auto; max-width: 64ch; }

/* ---- device cluster ---- */
.sb-ai__stage {
  position: relative;
  max-width: 940px;
  margin: clamp(36px, 4.8vw, 52px) auto clamp(52px, 6.5vw, 76px);
  padding-bottom: 0;
  z-index: 1;
}

.sb-ai__stage::before,
.sb-ai__stage::after {
  display: none !important;
}

.sb-ai__desktop {
  position: relative;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  transition: transform 0.4s ease;
}

.sb-ai__desktop::before,
.sb-ai__desktop::after {
  display: none !important;
  content: none !important;
}

.sb-ai__desktop-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1.5px solid var(--border-main, #E2E8F0);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 28px 56px -24px rgba(37, 99, 235, 0.22) !important;
  transform: translateZ(0);
}

.sb-ai__chrome { display: flex; gap: 7px; align-items: center; padding: 11px 16px; background: #F1F5FA; border-bottom: 1px solid var(--border-main,#E7EDF5); }
.sb-ai__chrome i { width: 11px; height: 11px; border-radius: 50%; background: #CBD5E1; }
.sb-ai__chrome i:nth-child(1){ background:#FF5F57 } .sb-ai__chrome i:nth-child(2){ background:#FEBC2E } .sb-ai__chrome i:nth-child(3){ background:#28C840 }
.sb-ai__desktop-frame img,
.sb-ai__desktop img { display: block; width: 100%; height: auto; }

/* Phone Mockup — Natural, balanced overlap at bottom-right corner of desktop */
.sb-ai__phone {
  position: absolute;
  right: clamp(10px, 2.5vw, 32px);
  bottom: -22px;
  z-index: 3;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: clamp(130px, 19.5vw, 210px);
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-ai__phone::before,
.sb-ai__phone::after {
  display: none !important;
  content: none !important;
}

.sb-ai__phone:hover {
  transform: translateY(-5px) scale(1.02);
}

.sb-ai__phone-frame {
  position: relative;
  border-radius: clamp(22px, 3vw, 30px);
  overflow: hidden;
  background: #0B1528;
  padding: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.14), 0 28px 56px -20px rgba(37, 99, 235, 0.35) !important;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.sb-phone-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: clamp(16px, 2.4vw, 24px);
  overflow: hidden;
  background: #0F172A;
  cursor: pointer;
}

.sb-phone-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.03) translateY(4px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.sb-phone-slide.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  z-index: 2;
}

.sb-phone-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.sb-ai__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 5px;
  border-radius: 999px;
  background: #1E293B;
  z-index: 6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sb-phone-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sb-phone-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.3s ease;
}

.sb-phone-dot.is-active {
  width: 13px;
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E;
}

/* Floating moving tags for Desktop and Phone */
.sb-ai__tag {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
  font-family: var(--font-heading, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-heading, #0F172A);
  white-space: nowrap;
  pointer-events: none;
}
.sb-ai__tag svg {
  width: 15px;
  height: 15px;
  animation: sbAiTagIconPulse 2.4s ease-in-out infinite;
}

@keyframes sbAiTagIconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.sb-ai__tag--desktop {
  top: -24px;
  left: 8px;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  animation: sbAiTagFloatDesktop 5.2s ease-in-out infinite;
}
.sb-ai__tag--desktop svg { color: var(--brand-blue-vibrant, #2563EB); }

@keyframes sbAiTagFloatDesktop {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  }
  25% {
    transform: translateY(-6px) translateX(-4px) rotate(-1.2deg);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24), 0 4px 8px rgba(15, 23, 42, 0.08);
  }
  50% {
    transform: translateY(-2px) translateX(3px) rotate(0.9deg);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18), 0 3px 6px rgba(15, 23, 42, 0.06);
  }
  75% {
    transform: translateY(-7px) translateX(2px) rotate(-0.6deg);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.26), 0 5px 10px rgba(15, 23, 42, 0.08);
  }
}

.sb-ai__tag--phone {
  top: -26px;
  left: 50%;
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
  animation: sbAiTagFloatPhone 4.8s ease-in-out infinite;
}
.sb-ai__tag--phone svg { color: #059669; }

@keyframes sbAiTagFloatPhone {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
  }
  25% {
    transform: translateX(calc(-50% + 5px)) translateY(-7px) rotate(1.4deg);
    box-shadow: 0 15px 30px rgba(5, 150, 105, 0.26), 0 4px 8px rgba(15, 23, 42, 0.08);
  }
  50% {
    transform: translateX(calc(-50% - 4px)) translateY(-2px) rotate(-1deg);
    box-shadow: 0 10px 22px rgba(5, 150, 105, 0.20), 0 3px 6px rgba(15, 23, 42, 0.06);
  }
  75% {
    transform: translateX(calc(-50% - 5px)) translateY(-8px) rotate(0.8deg);
    box-shadow: 0 16px 32px rgba(5, 150, 105, 0.28), 0 5px 10px rgba(15, 23, 42, 0.09);
  }
}

.sb-ai__badge {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: -18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35), 0 2px 6px rgba(37, 99, 235, 0.25);
  animation: sbAiFloatBadge 4.8s ease-in-out infinite;
}
.sb-ai__badge svg { width: 18px; height: 18px; }
@keyframes sbAiFloatBadge {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.03); }
}

/* ---- feature checks ---- */
.sb-ai__checks {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 780px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  position: relative;
  z-index: 2;
}
.sb-ai__checks li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: clamp(1rem,1.3vw,1.15rem);
  font-weight: 700;
  color: var(--text-heading,#0F172A);
  transition: transform 0.25s ease;
}
.sb-ai__checks li:hover {
  transform: translateX(4px);
}
.sb-ai__checks svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 8px;
  background: var(--brand-blue-subtle,rgba(37,99,235,.10));
  color: var(--brand-blue-vibrant,#2563EB);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
  transition: transform 0.25s ease, background 0.25s ease;
}
.sb-ai__checks li:hover svg {
  transform: scale(1.1);
  background: rgba(37, 99, 235, 0.18);
}

/* ---- pill + cta ---- */
.sb-ai__pill {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
  margin: clamp(28px,3.5vw,40px) auto 0; width: fit-content; max-width: 100%;
}
.sb-ai__pill span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid var(--border-main,#E2E8F0); box-shadow: 0 2px 8px rgba(15,23,42,.05);
  font-size: .82rem; font-weight: 700; color: var(--text-heading,#0F172A);
}
.sb-ai__pill svg { width: 16px; height: 16px; color: var(--brand-blue-vibrant,#2563EB); }
.sb-ai__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(26px,3vw,38px); }

@media (max-width: 640px) {
  .sb-ai__checks { grid-template-columns: 1fr; max-width: 420px; }
  .sb-ai__cta .btn { width: 100%; justify-content: center; }
  .sb-ai__badge { left: 8px; bottom: 12px; padding: 8px 12px; font-size: .72rem; }
}

/* --- Translation & Interpretation animated scene (homepage; renamed from
       .svc-scene, which collided with the service-page scene of the same name) */
.ti-scene {
  position: relative; width: 100%;
  aspect-ratio: 4 / 3.4;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F4F8FF 60%, #EAF1FF 100%);
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 30px 60px -28px rgba(15,23,42,.3);
  display: grid; place-items: center;
}
.ti-scene svg { width: 92%; height: auto; display: block; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .svcs-globe { animation: svcsSpin 26s linear infinite; }
  .svcs-orbit { animation: svcsSpinR 30s linear infinite; }
  .svcs-pill  { animation: svcsPop 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .svcs-orbit .svcs-pill:nth-child(3){animation-delay:.4s}
  .svcs-orbit .svcs-pill:nth-child(4){animation-delay:.8s}
  .svcs-orbit .svcs-pill:nth-child(5){animation-delay:1.2s}
  .svcs-orbit .svcs-pill:nth-child(6){animation-delay:1.6s}
  .svcs-orbit .svcs-pill:nth-child(7){animation-delay:2s}
  .svcs-rise  { animation: svcsRise 5s ease-in-out infinite; transform-box: fill-box; }
  .svcs-float { animation: svcsFloat 4.4s ease-in-out infinite; transform-box: fill-box; }
  .svcs-pulse { animation: svcsPulse 2.6s ease-in-out infinite; transform-box: fill-box; }
}
@keyframes svcsSpin  { to { transform: rotate(360deg); } }
@keyframes svcsSpinR { to { transform: rotate(-360deg); } }
@keyframes svcsPop   { 0%,72%,100%{ transform: scale(1) } 84%{ transform: scale(1.14) } }
@keyframes svcsRise  { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-5px) } }
@keyframes svcsFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
@keyframes svcsPulse { 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* --- Dual "I'm a Client / I'm a Freelancer" choice cards -------------------- */
.sb-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 760px;
  margin: clamp(30px, 4vw, 44px) auto 0;
  overflow: visible !important;
  clip-path: none !important;
}
.sb-choice__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  text-decoration: none;
  border: 1.5px solid transparent;
  overflow: visible !important;
  clip-path: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sb-choice__txt b {
  display: block;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.sb-choice__txt small {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  margin-top: 3px;
}
.sb-choice__go {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}
.sb-choice__go svg {
  width: 20px;
  height: 20px;
}
.sb-choice__card:hover {
  transform: translateY(-3px);
}
.sb-choice__card:hover .sb-choice__go {
  transform: translateX(4px);
}

/* Client — vibrant brand blue gradient, clean light glow with NO black shelf */
.sb-choice__card--client {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22) !important;
}
.sb-choice__card--client .sb-choice__txt b { color: #fff !important; }
.sb-choice__card--client .sb-choice__txt small { color: #DBEAFE !important; }
.sb-choice__card--client .sb-choice__go { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
.sb-choice__card--client:hover {
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.32) !important;
}
.sb-choice__card--client:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.20) !important;
}

/* Freelancer — clean white surface, crisp border, subtle soft shadow */
.sb-choice__card--free {
  background: #FFFFFF !important;
  border: 1.5px solid var(--border-main, #E2E8F0) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
.sb-choice__card--free .sb-choice__txt b { color: var(--text-heading, #0F172A) !important; }
.sb-choice__card--free .sb-choice__txt small { color: var(--text-muted, #64748B) !important; }
.sb-choice__card--free .sb-choice__go { background: var(--bg-subtle, #F1F5F9) !important; color: var(--text-heading, #0F172A) !important; }
.sb-choice__card--free:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09) !important;
}
.sb-choice__card--free:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

.sb-choice__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 20px auto 0;
  font-size: .95rem;
  font-weight: 700;
  color: #059669;
}
.sb-choice__trust svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  .sb-choice { grid-template-columns: 1fr; max-width: 420px; }
  .sb-choice__trust { text-align: center; }
}

/* =============================================================================
   THE CONNECTION BRIDGE — .sb-bridge  (Who We Are, under the headline)

   Built in code rather than dropped in as a flat illustration: the labels stay
   selectable/translatable, the artwork is sharp at any DPI, and the whole thing
   weighs a few KB instead of a few hundred.

   Motion budget is deliberately small and, critically, the sequential
   highlight on the 01–06 steps animates ONLY opacity/box-shadow — never
   transform — so it cannot fight the pointer-tilt handler the way the old
   "Emphasis" readout strip did. Every loop is behind
   prefers-reduced-motion: no-preference; the entrance uses the shared
   [data-anim] observer, so no new JavaScript ships for this section.

   Every selector below is new (.sb-bridge* / .sbb-*). Nothing above is touched.
============================================================================= */
.sb-bridge {
  position: relative;
  margin: clamp(32px, 4.2vw, 54px) 0 clamp(34px, 4.4vw, 52px);
  padding: clamp(26px, 3.4vw, 46px) clamp(18px, 2.8vw, 40px) clamp(28px, 3.6vw, 44px);
  border-radius: clamp(22px, 2.4vw, 32px);
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(76, 134, 255, .09) 0%, rgba(76, 134, 255, 0) 58%),
    radial-gradient(80% 70% at 92% 8%, rgba(139, 92, 246, .1) 0%, rgba(139, 92, 246, 0) 60%),
    radial-gradient(90% 80% at 50% 108%, rgba(0, 195, 137, .1) 0%, rgba(0, 195, 137, 0) 62%),
    linear-gradient(180deg, #FDFDFF 0%, #F7F8FF 46%, #FFFFFF 100%);
  border: 1px solid rgba(99, 102, 241, .16);
  box-shadow: 0 34px 70px -34px rgba(15, 23, 42, .22), inset 0 1px 0 #FFFFFF;
}
/* faint dot field, like the reference panels */
.sb-bridge::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(rgba(99, 102, 241, .075) 1.3px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 0%, #000, transparent 74%);
          mask-image: radial-gradient(100% 70% at 50% 0%, #000, transparent 74%);
}
.sb-bridge > * { position: relative; z-index: 1; }

/* --- Tier 1: the stage ---------------------------------------------------- */
.sb-bridge__stage {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 350px) 1fr;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
}
.sb-bridge__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.sb-bridge__badge {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 11px 18px 11px 14px; border-radius: 999px;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(.82rem, 1.05vw, .95rem); font-weight: 800; letter-spacing: -.01em;
  line-height: 1.25; color: #FFFFFF;
}
.sb-bridge__badge svg { flex: 0 0 auto; width: 19px; height: 19px; color: rgba(255,255,255,.9); }
.sb-bridge__badge--blue {
  background: linear-gradient(120deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%);
  box-shadow: 0 16px 30px -14px rgba(29, 78, 216, .68);
}
.sb-bridge__badge--emerald {
  background: linear-gradient(120deg, #047857 0%, #059669 55%, #10B981 100%);
  box-shadow: 0 16px 30px -14px rgba(4, 120, 87, .62);
}

/* side lists (Government Departments… / Skill & Experience Verified…) */
.sb-bridge__list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.sb-bridge__list li {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .3);
  font-size: clamp(.8rem, .98vw, .9rem); font-weight: 650;
  color: var(--text-main, #0F172A);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.sb-bridge__list li svg { flex: 0 0 auto; width: 18px; height: 18px; }
.sb-bridge__list li span { min-width: 0; }
.sb-bridge__list--blue li svg { color: var(--brand-blue-vibrant, #2563EB); }
.sb-bridge__list--emerald li svg { color: var(--brand-emerald, #059669); }
.sb-bridge__list li:hover {
  background: #FFFFFF;
  border-color: rgba(99, 102, 241, .34);
  box-shadow: 0 14px 26px -16px rgba(37, 99, 235, .4);
}

/* verified professional cards (the floating chips in reference 1) */
.sb-bridge__cards { display: grid; gap: 10px; width: 100%; }
.sb-bridge__pcard {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px; text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 14px 28px -20px rgba(15, 23, 42, .42);
}
.sb-bridge__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #EEF3FF 0%, #E6F7F0 100%);
  border: 1px solid rgba(37, 99, 235, .14);
  color: var(--brand-blue, #1E40AF);
}
.sb-bridge__avatar svg { width: 20px; height: 20px; }
.sb-bridge__pmeta { flex: 1 1 auto; min-width: 0; display: block; }
.sb-bridge__pmeta b {
  display: block; font-family: var(--font-heading, sans-serif);
  font-size: .82rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  color: var(--text-heading, #0F172A);
}
.sb-bridge__stars {
  display: block; margin-top: 2px; font-size: .72rem; letter-spacing: .12em;
  color: #F59E0B; line-height: 1;
}
.sb-bridge__ptick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(5, 150, 105, .1); color: var(--brand-emerald, #059669);
}
.sb-bridge__ptick svg { width: 16px; height: 16px; }

/* --- Tier 1: the hub + circulating arcs ---------------------------------- */
.sb-bridge__core {
  position: relative; width: 100%; max-width: 350px;
  margin: 0 auto; aspect-ratio: 1 / 1;
}
.sb-bridge__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-bridge__hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 53%; aspect-ratio: 1 / 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 8px;
  background: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #F6F9FF 70%, #EEF3FF 100%);
  border: 1px solid rgba(37, 99, 235, .18);
  box-shadow: 0 22px 46px -20px rgba(15, 23, 42, .34), inset 0 1px 0 #FFFFFF;
}
.sb-bridge__shield { display: block; width: 34%; max-width: 44px; color: var(--brand-emerald, #059669); }
.sb-bridge__shield svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(5,150,105,.4)); }
.sb-bridge__hub b {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(.86rem, 1.35vw, 1.08rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.18;
  color: var(--text-heading, #0F172A);
}

/* --- Tier 2: the five-beat summary strip (reference 1) ------------------- */
.sb-bridge__strip {
  list-style: none; margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: 10px;
}
.sb-bridge__strip li {
  position: relative; flex: 1 1 150px; max-width: 210px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 14px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .4);
  transition: transform .4s var(--ease-spring, ease), box-shadow .4s ease, border-color .3s ease;
}
.sb-bridge__strip li:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .34);
  box-shadow: 0 20px 36px -20px rgba(37, 99, 235, .46);
}
/* the → connectors from the reference; dropped once the row wraps */
.sb-bridge__strip li + li::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 8px;
  transform: translateY(-50%);
  background: var(--brand-blue-vibrant, #2563EB);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%, 0 62%, 46% 50%, 0 38%);
          clip-path: polygon(0 0, 100% 50%, 0 100%, 0 62%, 46% 50%, 0 38%);
  opacity: .5;
}
.sb-bridge__sic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, #EEF3FF 0%, #E9F0FF 100%);
  border: 1px solid rgba(37, 99, 235, .16);
  color: var(--brand-blue-vibrant, #2563EB);
}
.sb-bridge__sic svg { width: 21px; height: 21px; }
.sb-bridge__strip b {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(.76rem, .95vw, .86rem); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.25;
  color: var(--text-heading, #0F172A);
}

/* --- Tier 3: the 01–06 journey (reference 2) ----------------------------- */
.sb-bridge__flow {
  list-style: none; margin: clamp(26px, 3.2vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.sb-bridge__step {
  --sbb-c: #2563EB;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 18px 15px 20px; border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .42);
  overflow: hidden;
}
.sb-bridge__step:nth-child(1) { --sbb-c: #2563EB; }
.sb-bridge__step:nth-child(2) { --sbb-c: #14B8A6; }
.sb-bridge__step:nth-child(3) { --sbb-c: #6366F1; }
.sb-bridge__step:nth-child(4) { --sbb-c: #A855F7; }
.sb-bridge__step:nth-child(5) { --sbb-c: #EC4899; }
.sb-bridge__step:nth-child(6) { --sbb-c: #F59E0B; }

.sb-bridge__no {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--font-mono, monospace);
  font-size: .8rem; font-weight: 700; color: #FFFFFF;
  background: var(--sbb-c);
  box-shadow: 0 8px 18px -8px var(--sbb-c);
}
/* Two lines reserved so the icon, copy and bar sit on the same baseline in all
   six cards — "Collaborate & Deliver" wraps and used to push its own row 16px
   below the other five. */
.sb-bridge__step > b {
  min-height: calc(2 * 1.22em);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(.78rem, .95vw, .88rem); font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.22;
  color: var(--text-heading, #0F172A);
}
.sb-bridge__fic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: #F6F8FF;
  background: color-mix(in srgb, var(--sbb-c) 11%, #FFFFFF);
  border: 1px solid #E2E8F0;
  border-color: color-mix(in srgb, var(--sbb-c) 26%, #FFFFFF);
  color: var(--sbb-c);
}
.sb-bridge__fic svg { width: 20px; height: 20px; }
.sb-bridge__ftxt {
  font-size: clamp(.74rem, .9vw, .82rem); font-weight: 500; line-height: 1.5;
  color: var(--text-muted, #475569);
}
.sb-bridge__bar {
  display: block; width: 100%; height: 4px; margin-top: auto;
  border-radius: 999px; background: var(--sbb-c); opacity: .3;
  transform-origin: left center;
}
/* the sequential glow — opacity + box-shadow only, never transform */
.sb-bridge__step::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--sbb-c), 0 20px 38px -18px var(--sbb-c);
}
.sb-bridge__step:hover { border-color: #CBD5E1; border-color: color-mix(in srgb, var(--sbb-c) 40%, #FFFFFF); }
.sb-bridge__step:hover::after { opacity: .55; }

/* the dotted progress rail under the six steps */
.sb-bridge__rail {
  display: grid; grid-template-columns: repeat(6, 1fr);
  align-items: center; gap: 12px;
  margin-top: 14px; padding: 0 6px;
  position: relative;
}
.sb-bridge__rail::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #2563EB, #14B8A6, #6366F1, #A855F7, #EC4899, #F59E0B);
  opacity: .3; border-radius: 999px;
}
.sb-bridge__rail i {
  position: relative; justify-self: center;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid #CBD5E1;
}
.sb-bridge__rail i:nth-child(1) { border-color: #2563EB; }
.sb-bridge__rail i:nth-child(2) { border-color: #14B8A6; }
.sb-bridge__rail i:nth-child(3) { border-color: #6366F1; }
.sb-bridge__rail i:nth-child(4) { border-color: #A855F7; }
.sb-bridge__rail i:nth-child(5) { border-color: #EC4899; }
.sb-bridge__rail i:nth-child(6) { border-color: #F59E0B; }

/* --- Tier 4: trust pill + benefit rail ----------------------------------- */
.sb-bridge__trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  width: -moz-fit-content; width: fit-content;
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  padding: 12px 24px; border-radius: 999px;
  background: linear-gradient(120deg, #E9FBF2 0%, #DFF7EC 55%, #E7F6FF 100%);
  border: 1px solid rgba(4, 120, 87, .22);
  box-shadow: 0 14px 30px -20px rgba(4, 120, 87, .48);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(.85rem, 1.1vw, 1rem); font-weight: 800; letter-spacing: -.01em;
  color: #044E3C;                       /* 8.4:1 on the pill — AA at any size */
}
.sb-bridge__trust > svg {
  width: 20px; height: 20px; padding: 3px; border-radius: 50%;
  background: var(--brand-emerald, #059669); color: #FFFFFF;
}
.sb-bridge__trust i { font-style: normal; color: rgba(4, 78, 60, .45); }

.sb-bridge__bens {
  list-style: none; padding: 0;
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.sb-bridge__bens li {
  flex: 1 1 168px; max-width: 230px;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .4);
  transition: transform .4s var(--ease-spring, ease), box-shadow .4s ease;
}
.sb-bridge__bens li:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -20px rgba(15, 23, 42, .44); }
.sb-bridge__bens b {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(.74rem, .92vw, .83rem); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.28;
  color: var(--text-heading, #0F172A);
}
.sb-bridge__bic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
}
.sb-bridge__bic svg { width: 19px; height: 19px; }
.sb-bridge__bic--blue   { background: rgba(37, 99, 235, .11);  color: #1D4ED8; }
.sb-bridge__bic--sky    { background: rgba(14, 165, 233, .12); color: #0369A1; }
.sb-bridge__bic--teal   { background: rgba(20, 184, 166, .13); color: #0F766E; }
.sb-bridge__bic--amber  { background: rgba(245, 158, 11, .14); color: #B45309; }
.sb-bridge__bic--indigo { background: rgba(99, 102, 241, .12); color: #4338CA; }

/* --- Motion (opt-in only) ------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .sbb-glow  { animation: sbbBreathe 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .sbb-spin  { animation: sbbSpin 34s linear infinite; transform-box: fill-box; transform-origin: center; }

  /* one bright segment riding each arc: request out, professional back */
  .sbb-comet--out  { animation: sbbComet 3.6s linear infinite; }
  .sbb-comet--back { animation: sbbComet 3.6s linear infinite 1.8s; }
  .sbb-dots        { animation: sbbStream 1.2s linear infinite; }
  .sbb-dots--slow  { animation: sbbStream 1.6s linear infinite; }
  .sbb-head--out   { animation: sbbHead 3.6s ease-in-out infinite; }
  .sbb-head--back  { animation: sbbHead 3.6s ease-in-out infinite 1.8s; }
  .sbb-tick        { animation: sbbDraw 3.6s ease-in-out infinite; }

  /* the walk down the six steps — 1.4s per card, 8.4s round trip */
  .sb-bridge__step::after {
    animation: sbbWalk 8.4s ease-in-out infinite;
    animation-delay: calc(var(--sbb-i, 0) * 1.4s);
  }
  .sb-bridge__bar {
    animation: sbbBar 8.4s ease-in-out infinite;
    animation-delay: calc(var(--sbb-i, 0) * 1.4s);
  }
  .sb-bridge__rail i { animation: sbbDot 8.4s ease-in-out infinite; }
  .sb-bridge__rail i:nth-child(1) { animation-delay: 0s; }
  .sb-bridge__rail i:nth-child(2) { animation-delay: 1.4s; }
  .sb-bridge__rail i:nth-child(3) { animation-delay: 2.8s; }
  .sb-bridge__rail i:nth-child(4) { animation-delay: 4.2s; }
  .sb-bridge__rail i:nth-child(5) { animation-delay: 5.6s; }
  .sb-bridge__rail i:nth-child(6) { animation-delay: 7s; }

  .sb-bridge__pcard { animation: sbbFloat 5.4s ease-in-out infinite; }
  .sb-bridge__pcard:nth-child(2) { animation-delay: .5s; }
  .sb-bridge__pcard:nth-child(3) { animation-delay: 1s; }
}

@keyframes sbbBreathe { 0%, 100% { opacity: .7;  transform: scale(.95); }
                        50%      { opacity: 1;   transform: scale(1.04); } }
@keyframes sbbSpin    { to { transform: rotate(360deg); } }
@keyframes sbbComet   { from { stroke-dashoffset: 494; } to { stroke-dashoffset: 0; } }
@keyframes sbbStream  { from { stroke-dashoffset: 15; }  to { stroke-dashoffset: 0; } }
@keyframes sbbHead    { 0%, 62% { opacity: .45; } 82% { opacity: 1; } 100% { opacity: .45; } }
@keyframes sbbDraw    { 0%, 24% { stroke-dasharray: 16; stroke-dashoffset: 16; }
                        56%, 100% { stroke-dasharray: 16; stroke-dashoffset: 0; } }
@keyframes sbbWalk    { 0%, 100% { opacity: 0; } 6%, 15% { opacity: .5; } 21% { opacity: 0; } }
@keyframes sbbBar     { 0%, 100% { opacity: .3; transform: scaleX(.4); }
                        7%, 16%  { opacity: 1;  transform: scaleX(1); }
                        22%      { opacity: .3; transform: scaleX(.4); } }
@keyframes sbbDot     { 0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); background: #FFFFFF; }
                        8%, 16%  { box-shadow: 0 0 0 5px rgba(99,102,241,.16); background: currentColor; } }
@keyframes sbbFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .sb-bridge__flow { grid-template-columns: repeat(3, 1fr); }
  .sb-bridge__rail { display: none; }
}
@media (max-width: 980px) {
  .sb-bridge__stage { grid-template-columns: 1fr; gap: clamp(20px, 3.4vw, 30px); justify-items: center; }
  .sb-bridge__side { width: 100%; max-width: 520px; }
  .sb-bridge__list { grid-template-columns: 1fr 1fr; }
  .sb-bridge__cards { grid-template-columns: 1fr 1fr; }
  .sb-bridge__core { max-width: 290px; order: -1; }
  /* the loop reads top-to-bottom once the columns stack */
  .sb-bridge__arcs { transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .sb-bridge { padding-left: 16px; padding-right: 16px; }
  .sb-bridge__flow { grid-template-columns: repeat(2, 1fr); }
  .sb-bridge__strip li + li::before { content: none; }
  .sb-bridge__strip li { flex: 1 1 132px; padding: 14px 11px; }
}
@media (max-width: 560px) {
  .sb-bridge__list { grid-template-columns: 1fr; }
  .sb-bridge__cards { grid-template-columns: 1fr; }
  .sb-bridge__core { max-width: 250px; }
  .sb-bridge__flow { grid-template-columns: 1fr; }
  .sb-bridge__step { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 15px 14px 16px; }
  .sb-bridge__step > b { flex: 1 1 auto; }
  .sb-bridge__fic { order: -1; }
  .sb-bridge__ftxt { flex: 1 1 100%; }
  .sb-bridge__bar { flex: 1 1 100%; }
  .sb-bridge__trust { padding: 12px 18px; gap: 8px; }
  .sb-bridge__bens li { flex: 1 1 100%; max-width: none; }
}

/* =============================================================================
   WHO WE ARE — two-sided marketplace scene  (.wwa)  — pure markup, animated
============================================================================= */
.wwa { margin-top: clamp(30px, 4vw, 52px); margin-bottom: clamp(40px, 6vw, 72px); }
.who-we-are-section .sb-emph { margin-top: clamp(16px, 3vw, 32px); }
.wwa__stage {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(10px, 2vw, 30px);
  max-width: 1040px; margin: 0 auto;
}
.wwa__party { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.wwa__scene { width: 100%; max-width: 260px; }
.wwa__scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.wwa__tag {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  padding: 10px 18px; border-radius: 999px; color: #fff;
  font-family: var(--font-heading, sans-serif); font-size: clamp(.82rem,1.2vw,.95rem); font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 16px 30px -14px rgba(15,23,42,.4);
}
.wwa__tag svg { width: 18px; height: 18px; }
.wwa__tag--blue  { background: linear-gradient(120deg,#2563EB,#1D4ED8); }
.wwa__tag--green { background: linear-gradient(120deg,#0B2159,#14307E); }

/* centre hub */
.wwa__hub { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wwa__ring { position: relative; width: clamp(180px, 22vw, 230px); aspect-ratio: 1; display: grid; place-items: center; }
.wwa__cycle { position: absolute; inset: 0; width: 100%; height: 100%; }
.wwa__shield {
  position: relative; z-index: 2; width: clamp(64px, 7.5vw, 84px); height: clamp(64px,7.5vw,84px);
  display: grid; place-items: center; filter: drop-shadow(0 14px 24px rgba(4,120,87,.35));
  animation: wwaShield 3.6s ease-in-out infinite; transform-origin: center;
}
.wwa__shield svg { width: 100%; height: 100%; }
.wwa__hub-label {
  text-align: center; max-width: 200px;
  font-family: var(--font-heading, sans-serif); font-size: clamp(.82rem,1.1vw,.95rem); font-weight: 800;
  letter-spacing: -.01em; color: var(--text-heading,#0F172A); line-height: 1.25;
}

/* verified profile cards over the right side — kept inside the column */
.wwa__cards { position: absolute; top: 0; right: 0; display: grid; gap: 8px; z-index: 3; pointer-events: none; max-width: 150px; }
.wwa__vcard {
  display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.97);
  border: 1px solid var(--border-main,#E2E8F0); box-shadow: 0 16px 30px -16px rgba(15,23,42,.4);
  font-size: .68rem; font-weight: 800; color: var(--text-heading,#0F172A);
  animation: wwaCardIn .6s var(--ease-spring, ease) both, wwaFloat 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * .18s + .3s), calc(var(--i) * .4s);
}
.wwa__av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.wwa__av--b { background: linear-gradient(135deg,#F5A524,#EA580C); }
.wwa__av--c { background: linear-gradient(135deg,#10B981,#047857); }
.wwa__stars { color: #F5A524; font-size: .6rem; letter-spacing: .5px; }
.wwa__vch { width: 16px; height: 16px; }

/* five-step flow strip */
.wwa__flow {
  list-style: none; margin: clamp(34px,4.5vw,56px) auto 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px;
  max-width: 1080px;
}
.wwa__fstep {
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  flex: 1 1 0; min-width: 120px; max-width: 190px;
  padding: 18px 12px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid var(--border-main,#E2E8F0);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  transition: transform .4s var(--ease-spring,ease), box-shadow .4s ease, border-color .3s ease;
}
.wwa__fstep:hover { transform: translateY(-5px); border-color: rgba(37,99,235,.34); box-shadow: 0 24px 44px -26px rgba(37,99,235,.5); }
.wwa__fic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg,#2563EB,#4C86FF); color:#fff; box-shadow: 0 12px 22px -10px rgba(37,99,235,.6); }
.wwa__fstep:nth-child(3) .wwa__fic { background: linear-gradient(135deg,#10B981,#047857); box-shadow:0 12px 22px -10px rgba(4,120,87,.55); }
.wwa__fstep:nth-child(7) .wwa__fic { background: linear-gradient(135deg,#7C3AED,#5B21B6); box-shadow:0 12px 22px -10px rgba(124,58,237,.55); }
.wwa__fstep:nth-child(9) .wwa__fic { background: linear-gradient(135deg,#F5A524,#EA580C); box-shadow:0 12px 22px -10px rgba(234,88,12,.55); }
.wwa__fic svg { width: 23px; height: 23px; }
.wwa__fstep b { font-family: var(--font-heading,sans-serif); font-size: .82rem; font-weight: 800; letter-spacing:-.01em; color: var(--text-heading,#0F172A); line-height:1.25; }
.wwa__farrow { display: grid; place-items: center; color: #93C5FD; flex: 0 0 auto; }
.wwa__farrow svg { width: 22px; height: 22px; animation: wwaNudge 1.8s ease-in-out infinite; }

/* trust pill */
.wwa__trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; max-width: 100%; margin: clamp(28px,3.5vw,40px) auto 0;
  padding: 12px 26px; border-radius: 999px;
  background: linear-gradient(120deg, rgba(0,195,137,.14), rgba(37,99,235,.10));
  border: 1px solid rgba(0,195,137,.34);
  font-family: var(--font-heading,sans-serif); font-weight: 800; color: var(--sb-green-dark,#047857);
  font-size: clamp(.85rem,1.2vw,1rem);
}
.wwa__trust svg { width: 22px; height: 22px; }
.wwa__trust i { color: #94A3B8; font-style: normal; }
.wwa__trust span { color: var(--text-heading,#0F172A); }

/* ---- animations ---- */
@media (prefers-reduced-motion: no-preference) {
  .wwa-rise  { animation: wwaRise 5.5s ease-in-out infinite; transform-box: fill-box; }
  .wwa-flag  { animation: wwaWave 3.4s ease-in-out infinite; transform-box: fill-box; }
  .wwa-tab   { animation: wwaTab 4.4s ease-in-out infinite; transform-box: fill-box; }
  .wwa-type  { animation: wwaRise 3.2s ease-in-out infinite; transform-box: fill-box; }
  .wwa-glow  { animation: wwaGlow 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .wwa-flow-b{ stroke-dashoffset: 0; animation: wwaDashB 1.4s linear infinite; }
  .wwa-flow-g{ stroke-dashoffset: 0; animation: wwaDashG 1.4s linear infinite; }
  .wwa-ring { animation: wwaSpin 7s linear infinite; }
  .wwa-dot  { animation: wwaSpin 7s linear infinite; }
}
@keyframes wwaSpin { to { transform: rotate(360deg); } }
@keyframes wwaRise  { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
@keyframes wwaWave  { 0%,100%{ transform: rotate(0) } 50%{ transform: rotate(-7deg) } }
@keyframes wwaTab   { 0%,100%{ transform: rotate(0) } 50%{ transform: rotate(3deg) } }
@keyframes wwaGlow  { 0%,100%{ transform: scale(1); opacity:.85 } 50%{ transform: scale(1.05); opacity:1 } }
@keyframes wwaShield{ 0%,100%{ transform: translateY(0) scale(1) } 50%{ transform: translateY(-4px) scale(1.04) } }
@keyframes wwaDashB { to { stroke-dashoffset: -48; } }
@keyframes wwaDashG { to { stroke-dashoffset: -48; } }
@keyframes wwaNudge { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(3px) } }
@keyframes wwaFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-5px) } }
@keyframes wwaCardIn{ from { opacity:0; transform: translateX(14px) scale(.9) } to { opacity:1; transform: none } }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .wwa__stage { grid-template-columns: 1fr; gap: 6px; max-width: 380px; }
  .wwa__hub { order: 0; margin: 4px auto; width: clamp(180px,60vw,220px); }
  .wwa__party--pro .wwa__cards { position: static; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; right: 0; }
  .wwa__cards { right: 0; }
}
@media (max-width: 760px) {
  .wwa__flow { gap: 8px; }
  .wwa__farrow { display: none; }
  .wwa__fstep { flex: 1 1 40%; min-width: 130px; max-width: none; }
}
@media (max-width: 460px) {
  .wwa__fstep { flex-basis: 100%; flex-direction: row; justify-content: flex-start; text-align: left; }
}

/* --- How it works: give the four cards relevant motion ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* icons gently breathe, staggered per step */
  .how-lite__step .how-lite__ic { animation: hlBob 3.4s ease-in-out infinite; transform-origin: center; }
  .how-lite__step:nth-child(1) .how-lite__ic { animation-delay: 0s; }
  .how-lite__step:nth-child(2) .how-lite__ic { animation-delay: .5s; }
  .how-lite__step:nth-child(3) .how-lite__ic { animation-delay: 1s; }
  .how-lite__step:nth-child(4) .how-lite__ic { animation-delay: 1.5s; }
  /* dashed connector flows left -> right like a live pipeline */
  .how-lite__step:not(:last-child)::after { animation: hlFlow .9s linear infinite; }
  /* soft ring that pulses out of each icon in sequence */
  .how-lite__ic::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(37,99,235,.45); animation: hlRing 3.4s ease-out infinite;
  }
  .how-lite__step:nth-child(2) .how-lite__ic::after { animation-delay: .5s; }
  .how-lite__step:nth-child(3) .how-lite__ic::after { animation-delay: 1s; }
  .how-lite__step:nth-child(4) .how-lite__ic::after { animation-delay: 1.5s; }
}
.how-lite__ic { position: relative; }
@keyframes hlBob  { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-5px) } }
@keyframes hlFlow { to { background-position-x: 11px; } }
@keyframes hlRing { 0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.4) } 70%,100%{ box-shadow: 0 0 0 14px rgba(37,99,235,0) } }

/* Guard against horizontal scroll from off-canvas fixed elements (mobile
   drawer) and marquees. `clip` contains overflow without creating a scroll
   container, so it does not break the sticky navbar the way `hidden` can. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* =============================================================================
   HOW IT WORKS — animated matching scene  (.hiw-scene)
============================================================================= */
.hiw-scene {
  max-width: 940px; margin: clamp(30px,4vw,50px) auto clamp(34px,4.5vw,56px);
  padding: clamp(22px,3vw,34px);
  border-radius: 24px;
  background:
    radial-gradient(90% 120% at 50% 0%, #FFFFFF 0%, #F5F9FF 70%);
  border: 1px solid var(--border-main,#E2E8F0);
  box-shadow: 0 2px 10px rgba(15,23,42,.05), 0 34px 70px -40px rgba(15,23,42,.3);
}
.hiw-scene__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px,3vw,38px); }
.hiw-scene__grid > * { min-width: 0; }

/* requirement card */
.hiw-req { background: #FFFFFF; border: 1px solid var(--border-main,#E2E8F0); border-radius: 16px; padding: 16px 18px; box-shadow: 0 14px 30px -20px rgba(15,23,42,.35); }
.hiw-req__h { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono,monospace); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-blue-vibrant,#2563EB); margin-bottom: 12px; }
.hiw-req__h svg { width: 16px; height: 16px; }
.hiw-req ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hiw-req li { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--text-muted,#64748B); font-weight: 600; }
.hiw-req li svg { width: 17px; height: 17px; color: var(--brand-blue-vibrant,#2563EB); flex: 0 0 auto; }
.hiw-req li b { margin-left: auto; color: var(--text-heading,#0F172A); font-weight: 700; }

/* radar hub */
.hiw-hub { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hiw-hub svg { width: clamp(150px,20vw,190px); height: auto; }
.hiw-hub__label { display: inline-grid; font-family: var(--font-mono,monospace); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.hiw-lbl { grid-area: 1/1; white-space: nowrap; }
.hiw-lbl--live { color: var(--brand-blue-vibrant,#2563EB); }

/* professionals = the three pipeline stages */
.hiw-pros { display: grid; gap: 9px; }
.hiw-pro { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
.hiw-pro__txt { min-width: 0; }
.hiw-pro__txt b { display: block; font-size: .85rem; font-weight: 800; color: var(--text-heading,#0F172A); line-height: 1.15; }
.hiw-pro__txt small { display: block; font-size: .72rem; color: var(--text-muted,#64748B); }
.hiw-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.hiw-av--b { background: linear-gradient(135deg,#8B5CF6,#6D28D9); }
.hiw-av--c { background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
/* status badge on the right of each card */
.hiw-pro__stat { width: 24px; height: 24px; margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; }
.hiw-pro__stat svg { width: 22px; height: 22px; }
.hiw-pro__chk { transform: scale(0); opacity: 0; }
.hiw-pro__spin { opacity: .35; }

/* ---- PIPELINE: the active stage flows down the 3 cards (6s loop, no JS) ----
   Best match (0–30%) -> Processing (36–60%) -> Delivered (66–90%), then loop.
   Each card glows in its accent while active and settles once "done". */
@media (prefers-reduced-motion: no-preference) {
  .hiw-pulse { transform-box: fill-box; transform-origin: center; animation: hiwPulse 3s ease-out infinite; fill: none; stroke-width: 2; }
  .hiw-sweep { animation: wwaSpin 4s linear infinite; }
  .hiw-req li { opacity: 0; animation: hiwFade .5s ease forwards; animation-delay: calc(var(--i) * .35s + .3s); }

  .hiw-pro--s0 { animation: hiwStGreen 6s ease-in-out infinite; }
  .hiw-pro--s1 { animation: hiwStViolet 6s ease-in-out infinite; }
  .hiw-pro--s2 { animation: hiwStBlue 6s ease-in-out infinite; }
  .hiw-pro--s0 .hiw-av { animation: hiwAvPop 6s ease-in-out infinite; }
  .hiw-pro--s0 .hiw-pro__chk { animation: hiwChk0 6s ease-in-out infinite; }
  .hiw-pro--s2 .hiw-pro__chk { animation: hiwChk2 6s ease-in-out infinite; }
  /* spinner rotates continuously, but only lights up during the processing stage */
  .hiw-pro--s1 .hiw-pro__spin { transform-box: fill-box; transform-origin: center; animation: hiwSpin 1s linear infinite, hiwProc 6s ease-in-out infinite; }
}
/* reduced-motion / no-JS: show every stage resolved */
@media (prefers-reduced-motion: reduce) { .hiw-pro__chk { transform: scale(1); opacity: 1; } .hiw-pro__spin { opacity: 1; } }

@keyframes hiwPulse { 0%{ transform: scale(.5); opacity: .9 } 100%{ transform: scale(2.7); opacity: 0 } }
@keyframes hiwFade  { to { opacity: 1 } }
@keyframes hiwSpin  { to { transform: rotate(360deg); } }

/* card 1 — Best match (green): active 0–30%, then holds a soft green */
@keyframes hiwStGreen {
  0%      { border-color: var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
  8%,26%  { border-color: rgba(0,195,137,.75); box-shadow: 0 0 0 3px rgba(0,195,137,.24), 0 20px 38px -18px rgba(4,120,87,.55); }
  40%,96% { border-color: rgba(0,195,137,.4); box-shadow: 0 12px 26px -20px rgba(4,120,87,.3); }
  100%    { border-color: var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
}
/* card 2 — Processing (violet): idle, then active 36–60% */
@keyframes hiwStViolet {
  0%,30%  { border-color: var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
  40%,58% { border-color: rgba(124,58,237,.75); box-shadow: 0 0 0 3px rgba(124,58,237,.22), 0 20px 38px -18px rgba(109,40,217,.5); }
  70%,96% { border-color: rgba(124,58,237,.4); box-shadow: 0 12px 26px -20px rgba(109,40,217,.3); }
  100%    { border-color: var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
}
/* card 3 — Delivered (blue): idle, then active 66–90% */
@keyframes hiwStBlue {
  0%,60%  { border-color: var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
  70%,88% { border-color: rgba(37,99,235,.75); box-shadow: 0 0 0 3px rgba(37,99,235,.22), 0 20px 38px -18px rgba(37,99,235,.5); }
  96%     { border-color: rgba(37,99,235,.4); box-shadow: 0 12px 26px -20px rgba(37,99,235,.3); }
  100%    { border-color: var(--border-main,#E2E8F0); box-shadow: 0 12px 26px -20px rgba(15,23,42,.3); }
}
/* green check pops when stage 1 resolves, then stays for the rest of the loop */
@keyframes hiwChk0 { 0%{ transform: scale(0); opacity: 0 } 12%{ transform: scale(1.25); opacity: 1 } 18%,96%{ transform: scale(1); opacity: 1 } 100%{ transform: scale(0); opacity: 0 } }
/* blue check pops when stage 3 (delivered) resolves */
@keyframes hiwChk2 { 0%,68%{ transform: scale(0); opacity: 0 } 76%{ transform: scale(1.25); opacity: 1 } 82%,96%{ transform: scale(1); opacity: 1 } 100%{ transform: scale(0); opacity: 0 } }
/* processing spinner brightens only while stage 2 is active */
@keyframes hiwProc { 0%,32%{ opacity: .3 } 40%,58%{ opacity: 1 } 66%,100%{ opacity: .3 } }
@keyframes hiwAvPop { 0%{ transform: scale(1) } 10%{ transform: scale(1.14) } 22%,100%{ transform: scale(1) } }

@media (max-width: 820px) {
  .hiw-scene__grid { grid-template-columns: 1fr; justify-items: center; gap: 18px; max-width: 360px; margin: 0 auto; }
  .hiw-req, .hiw-pros { width: 100%; }
}

/* =============================================================================
   WHO WE ARE — 7 emphasis cards, upgraded to premium + always-animated
   (scoped to the section so it wins over the base .sb-emph rules)
============================================================================= */
.who-we-are-section .sb-emph { gap: clamp(18px, 2vw, 24px); }
.who-we-are-section .sb-emph__card {
  padding: clamp(24px, 2.6vw, 30px);
  border-radius: 20px;
  border: 1px solid var(--border-main, #E6ECF5);
  box-shadow: 0 2px 10px rgba(15,23,42,.05), 0 26px 50px -34px rgba(15,23,42,.22);
}
/* animated gradient accent bar along the top, grows on hover */
.who-we-are-section .sb-emph__card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-spring, ease);
  z-index: 1;
}
.who-we-are-section .sb-emph__card:hover::after { transform: scaleX(1); }
.who-we-are-section .sb-emph__card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--c1) 40%, #E6ECF5);
  box-shadow: 0 2px 10px rgba(15,23,42,.06), 0 34px 60px -30px color-mix(in srgb, var(--c1) 55%, transparent);
}

/* gradient icon tile + continuous breathing + pulse ring */
.who-we-are-section .sb-emph__ic {
  position: relative;
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--c1) 65%, transparent);
}
.who-we-are-section .sb-emph__ic svg { width: 24px; height: 24px; }
.who-we-are-section .sb-emph__ic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--c1);
}
.who-we-are-section .sb-emph__card:hover .sb-emph__ic {
  transform: rotate(-8deg) scale(1.08);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
}
.who-we-are-section .sb-emph__no { font-size: 2.2rem; color: color-mix(in srgb, var(--c1) 14%, #EEF2F8); }
.who-we-are-section .sb-emph__card:hover .sb-emph__no { color: color-mix(in srgb, var(--c1) 30%, transparent); }

/* coloured tag dots */
.who-we-are-section .sb-emph__tags span { position: relative; padding-left: 20px; }
.who-we-are-section .sb-emph__tags span::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--c1);
}

/* per-card colour + staggered breathing/pulse */
.who-we-are-section .sb-emph__card:nth-child(1){ --c1:#2563EB; --c2:#4C86FF; }
.who-we-are-section .sb-emph__card:nth-child(2){ --c1:#10B981; --c2:#047857; }
.who-we-are-section .sb-emph__card:nth-child(3){ --c1:#7C3AED; --c2:#5B21B6; }
.who-we-are-section .sb-emph__card:nth-child(4){ --c1:#F5A524; --c2:#EA580C; }
.who-we-are-section .sb-emph__card:nth-child(5){ --c1:#06B6D4; --c2:#0891B2; }
.who-we-are-section .sb-emph__card:nth-child(6){ --c1:#F43F5E; --c2:#E11D48; }
.who-we-are-section .sb-emph__card:nth-child(7){ --c1:#3B82F6; --c2:#1D4ED8; }

@media (prefers-reduced-motion: no-preference) {
  .who-we-are-section .sb-emph__ic { animation: emphBob 3.6s ease-in-out infinite; }
  .who-we-are-section .sb-emph__ic::after { animation: emphRing 3.6s ease-out infinite; }
  .who-we-are-section .sb-emph__card:nth-child(2) .sb-emph__ic,
  .who-we-are-section .sb-emph__card:nth-child(2) .sb-emph__ic::after { animation-delay: .3s; }
  .who-we-are-section .sb-emph__card:nth-child(3) .sb-emph__ic,
  .who-we-are-section .sb-emph__card:nth-child(3) .sb-emph__ic::after { animation-delay: .6s; }
  .who-we-are-section .sb-emph__card:nth-child(4) .sb-emph__ic,
  .who-we-are-section .sb-emph__card:nth-child(4) .sb-emph__ic::after { animation-delay: .9s; }
  .who-we-are-section .sb-emph__card:nth-child(5) .sb-emph__ic,
  .who-we-are-section .sb-emph__card:nth-child(5) .sb-emph__ic::after { animation-delay: 1.2s; }
  .who-we-are-section .sb-emph__card:nth-child(6) .sb-emph__ic,
  .who-we-are-section .sb-emph__card:nth-child(6) .sb-emph__ic::after { animation-delay: 1.5s; }
  .who-we-are-section .sb-emph__card:nth-child(7) .sb-emph__ic,
  .who-we-are-section .sb-emph__card:nth-child(7) .sb-emph__ic::after { animation-delay: 1.8s; }
}
@keyframes emphBob  { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-5px) } }
@keyframes emphRing { 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--c1) 40%, transparent) } 70%,100%{ box-shadow: 0 0 0 13px transparent } }

/* =============================================================================
   NO DARK LAYERS BEHIND IMAGES / BUTTONS  (client: transparent backgrounds)
============================================================================= */
/* Organisations phone: light bezel instead of the dark device frame */
.sb-phone__device {
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 30px 64px -30px rgba(15,23,42,.34),
              inset 0 0 0 1px var(--border-main,#E2E8F0) !important;
}
.sb-phone__island { background: #E2E8F0 !important; height: 6px !important; top: 12px !important; width: 30% !important; }
.sb-phone__screen { background: #FFFFFF !important; }

/* Buttons: remove the pseudo-layer behind the pill entirely — the gradient fill
   and shadow are the whole button, nothing sits behind it. */
.btn { isolation: auto !important; }
.btn::after { display: none !important; content: none !important; }

/* =============================================================================
   REMOVE DARK/BLACK SHADOWS + ANIMATE THE DEVICE IMAGES  (client request)
   Every image/button floats on a transparent background with only a faint,
   non-black shadow; the AI-section devices now move.
============================================================================= */
/* buttons: clean soft elevation, zero black shadows */
.btn-primary {
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18), 0 6px 16px rgba(37, 99, 235, 0.22) !important;
}
.btn-secondary { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important; }
.btn-primary:hover { box-shadow: 0 4px 10px rgba(37, 99, 235, 0.24), 0 10px 24px rgba(37, 99, 235, 0.28) !important; }

/* AI section devices: Enhanced subtle 3D-like float animations */
.sb-ai__desktop {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.sb-ai__desktop-frame {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 32px 68px -28px rgba(37, 99, 235, 0.28) !important;
}
.sb-ai__phone {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.sb-ai__phone-frame {
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12), 0 28px 56px -20px rgba(37, 99, 235, 0.35) !important;
}
.sb-phone__device {
  box-shadow: 0 18px 44px -32px rgba(37,99,235,.20),
              inset 0 0 0 1px var(--border-main,#E2E8F0) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .sb-ai__desktop { animation: aiFloatA 7.5s ease-in-out infinite; }
  .sb-ai__phone   { animation: aiFloatB 6.2s ease-in-out infinite; }
}
@keyframes aiFloatA { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
@keyframes aiFloatB { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }

/* =============================================================================
   FOR PUBLIC-SECTOR ORGANISATIONS — BigLanguage-style stacked feature cards
   (.opi-*)  copy left + animated collage right; sticky-stack on scroll.
============================================================================= */
.opi-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vw, 36px);
  margin-top: clamp(30px, 4vw, 48px);
  position: relative;
  overflow: visible !important;
}
.opi-card {
  position: sticky !important;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 12px rgba(15,23,42,.06), 0 40px 80px -46px rgba(37,99,235,.4);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.opi-card:nth-child(1) {
  top: clamp(76px, 10vh, 96px) !important;
  z-index: 1;
}
.opi-card:nth-child(2) {
  top: clamp(96px, 13vh, 126px) !important;
  z-index: 2;
}
.opi-card__copy { min-width: 0; }
.opi-card--blue { background: linear-gradient(145deg, #2563EB 0%, #1D4ED8 58%, #1E40AF 100%); color: #fff; }
.opi-card--light { background: linear-gradient(150deg, #FFFFFF 0%, #EEF4FF 100%); border: 1px solid var(--border-main,#E2E8F0); }

.opi-card__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.16);
  font-family: var(--font-mono,monospace); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.opi-card__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #7FE7C4; }
.opi-card__eyebrow--dark { background: var(--brand-blue-subtle,rgba(37,99,235,.1)); color: var(--brand-blue-vibrant,#2563EB); }
.opi-card__eyebrow--dark i { background: #2563EB; }
.opi-card h3 { font-family: var(--font-heading,sans-serif); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 14px; }
.opi-card--blue h3 { color: #fff; }
.opi-card--light h3 { color: var(--text-heading,#0F172A); }
.opi-card__copy p { font-size: 1rem; line-height: 1.65; margin: 0 0 22px; }
.opi-card--blue p { color: rgba(255,255,255,.9); }

/* sector chips (card 1) */
.opi-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.opi-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: .84rem; font-weight: 700;
  transition: background .3s ease, transform .3s var(--ease-spring,ease);
}
.opi-chips li:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }
.opi-chips svg { width: 16px; height: 16px; }

/* benefits checklist (card 2) */
.opi-benefits { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.opi-benefits li { display: flex; align-items: center; gap: 11px; font-size: .92rem; font-weight: 600; color: var(--text-heading,#0F172A); }
.opi-benefits svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--brand-blue-subtle,rgba(37,99,235,.1)); color: var(--brand-blue-vibrant,#2563EB); }

/* ---- animated collage ---- */
.opi-art { position: relative; min-height: clamp(260px, 30vw, 340px); }
.opi-cord { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.opi-cord__line { animation: opiDash 1.2s linear infinite; }
@keyframes opiDash { to { stroke-dashoffset: -28; } }

.opi-tile {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: clamp(160px, 20vw, 200px); display: grid; gap: 9px;
  padding: 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 50px -24px rgba(15,23,42,.4);
  animation: opiFloat 5.5s ease-in-out infinite;
}
.opi-tile__bar { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--text-heading,#0F172A); font-size: .9rem; }
.opi-tile__bar i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563EB, #4C86FF);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.opi-tile__bar i svg {
  width: 14px;
  height: 14px;
  color: #FFFFFF;
}
.opi-tile__row { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--text-muted,#64748B); }
.opi-tile__row svg { width: 15px; height: 15px; color: var(--brand-blue-vibrant,#2563EB); }
.opi-tile__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; padding: 7px 12px; border-radius: 999px; background: #E9FBF3; color: #059669; font-size: .78rem; font-weight: 800; width: fit-content; }
.opi-tile__go svg { width: 15px; height: 15px; }
.opi-tile__go svg path { stroke: #059669; }

.opi-bubble {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; background: #fff;
  box-shadow: 0 16px 30px -16px rgba(15,23,42,.4);
  font-size: .74rem; font-weight: 800; color: var(--text-heading,#0F172A);
  animation: opiFloat 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s);
}
.opi-bubble svg { width: 15px; height: 15px; color: var(--brand-blue-vibrant,#2563EB); }
.opi-bubble--1 { top: 6%; left: 2%; }
.opi-bubble--1 svg { color: #059669; }
.opi-bubble--2 { top: 40%; right: 0%; }
.opi-bubble--2 svg { color: #F59E0B; }
.opi-bubble--3 { bottom: 6%; left: 8%; }
.opi-bubble--3 svg { color: #2563EB; }

/* card 2 collage */
.opi-orbit { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -20px rgba(15,23,42,.35); animation: opiFloat 5.5s ease-in-out infinite; }
.opi-orbit svg { width: 46px; height: 46px; }
.opi-orbit--shield { width: 84px; height: 84px; top: 20%; left: 26%; }
.opi-orbit--net { width: 72px; height: 72px; bottom: 16%; right: 20%; animation-delay: .8s; }
.opi-mini {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--border-main,#E2E8F0);
  box-shadow: 0 14px 28px -16px rgba(15,23,42,.35);
  font-size: .74rem; font-weight: 800; color: var(--text-heading,#0F172A);
  animation: opiFloat 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .6s);
}
.opi-mini svg { width: 16px; height: 16px; padding: 3px; border-radius: 5px; background: #E9FBF3; color: #059669; }
.opi-mini--1 { top: 4%; right: 6%; }
.opi-mini--2 { bottom: 8%; left: 4%; }

@keyframes opiFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.opi-tile { animation-name: opiFloatC; }
@keyframes opiFloatC { 0%,100%{ transform: translate(-50%,-50%) } 50%{ transform: translate(-50%,calc(-50% - 8px)) } }
@media (prefers-reduced-motion: reduce) {
  .opi-cord__line, .opi-tile, .opi-bubble, .opi-orbit, .opi-mini { animation: none; }
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .opi-stack {
    position: relative !important;
    overflow: visible !important;
    padding-bottom: 40px !important;
  }
  .opi-card {
    position: sticky !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: clamp(22px, 4vw, 32px) !important;
    border-radius: 24px !important;
    margin-bottom: 32px !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  }
  .opi-card:nth-child(1) {
    top: clamp(68px, 10vh, 88px) !important;
    z-index: 1 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 20px 50px -20px rgba(37, 99, 235, 0.3) !important;
  }
  .opi-card:nth-child(2) {
    top: clamp(84px, 13vh, 108px) !important;
    z-index: 2 !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12), 0 30px 60px -20px rgba(37, 99, 235, 0.45) !important;
    margin-bottom: 0 !important;
  }
  .opi-benefits {
    grid-template-columns: 1fr !important;
  }
  .opi-art {
    min-height: 260px !important;
    order: 2 !important;
  }
}
@media (max-width: 460px) {
  .opi-card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  .opi-card:nth-child(1) {
    top: clamp(60px, 9vh, 76px) !important;
  }
  .opi-card:nth-child(2) {
    top: clamp(74px, 11vh, 92px) !important;
  }
  .opi-art {
    min-height: 220px !important;
  }
  .opi-bubble,
  .opi-mini {
    font-size: .68rem !important;
    padding: 6px 10px !important;
  }
}

/* =============================================================================
   FOR SERVICE PROVIDERS — animated Servicebird-bird scene  (.prov-scene)
   The header bird floats with the brief §8 journey (register -> compliance
   checks -> service opportunities) orbiting it. All transparent, no dark box.
============================================================================= */
.prov-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 34vw, 400px);
  padding: 10px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Super-soft blue/emerald aura that slowly & smoothly fades into the white background */
.prov-scene__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 95%);
  height: min(440px, 90%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.10) 0%, rgba(59, 130, 246, 0.06) 30%, rgba(0, 195, 137, 0.03) 50%, rgba(255, 255, 255, 0) 70%) !important;
  filter: blur(40px);
  animation: provGlow 7s ease-in-out infinite alternate;
}

.prov-scene::before {
  display: none !important;
}

.prov-scene__trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .7; pointer-events: none; overflow: visible; }
.prov-trail__line { animation: provDash 1.3s linear infinite; }
.prov-scene__bird {
  position: relative; z-index: 2;
  width: clamp(180px, 24vw, 255px) !important; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 14px 22px rgba(37,99,235,.18));
}
/* ---- the living bird: breathes, blinks, flutters its wing & tail ---- */
@media (prefers-reduced-motion: no-preference) {
  .sb-bird__all     { animation: birdBob 4.6s ease-in-out infinite; transform-origin: 150px 200px; transform-box: view-box; }
  .sb-bird__breathe { animation: birdBreathe 3.6s ease-in-out infinite; transform-origin: 150px 150px; transform-box: view-box; }
  .sb-bird__wing    { animation: birdWing 3s ease-in-out infinite; transform-origin: 150px 130px; transform-box: view-box; }
  .sb-bird__tail    { animation: birdTail 4s ease-in-out infinite; transform-origin: 88px 150px; transform-box: view-box; }
  .sb-bird__head    { animation: birdHead 6.5s ease-in-out infinite; transform-origin: 205px 100px; transform-box: view-box; }
  .sb-bird__eye     { animation: birdBlink 5s ease-in-out infinite; transform-origin: 212px 88px; transform-box: view-box; }
}
@keyframes birdBob     { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
@keyframes birdBreathe { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.02) } }
@keyframes birdWing    { 0%,100%{ transform: rotate(0) } 45%{ transform: rotate(-11deg) } }
@keyframes birdTail    { 0%,100%{ transform: rotate(0) } 50%{ transform: rotate(5deg) } }
@keyframes birdHead    { 0%,86%,100%{ transform: rotate(0) } 91%,96%{ transform: rotate(-5deg) } }
@keyframes birdBlink   { 0%,92%,100%{ transform: scaleY(1) } 95%{ transform: scaleY(.08) } }
.prov-scene__badge {
  position: absolute; z-index: 4; top: 20%; right: 12%;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; background: #fff;
  box-shadow: 0 16px 30px -16px rgba(15,23,42,.4);
  font-size: .76rem; font-weight: 800; color: var(--text-heading,#0F172A);
  animation: provPop .6s var(--ease-spring,ease) both .5s, provFloat 4.4s ease-in-out infinite 1.1s;
}
.prov-scene__badge svg { width: 18px; height: 18px; }

.prov-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-main,#E2E8F0); box-shadow: 0 16px 32px -18px rgba(15,23,42,.38);
  font-size: .8rem; font-weight: 800; color: var(--text-heading,#0F172A); white-space: nowrap;
  animation: provPop .55s var(--ease-spring,ease) both, provFloat 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * .28s + .2s), calc(var(--i) * .5s + .8s);
}
.prov-chip__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.prov-chip__ic svg { width: 16px; height: 16px; }
.prov-chip__ic--blue { background: linear-gradient(135deg,#2563EB,#4C86FF); }
.prov-chip__ic--green { background: linear-gradient(135deg,#10B981,#047857); }
.prov-chip__ic--amber { background: linear-gradient(135deg,#F5A524,#EA580C); }
.prov-chip--1 { top: 4%; left: 0; }
.prov-chip--2 { top: 46%; right: 0; }
.prov-chip--3 { bottom: 2%; left: 6%; }

@keyframes provFly   { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-10px) rotate(-1.5deg) } }
@keyframes provGlow  { 0%,100%{ transform: scale(1); opacity: .85 } 50%{ transform: scale(1.06); opacity: 1 } }
@keyframes provFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
@keyframes provPop   { from { opacity: 0; transform: scale(.8) } to { opacity: 1; transform: scale(1) } }
@keyframes provDash  { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) {
  .prov-scene__bird, .prov-scene__glow, .prov-scene__badge, .prov-chip, .prov-trail__line { animation: none; }
}
@media (max-width: 860px) {
  .prov-scene { min-height: 320px; margin-top: 8px; }
  .prov-chip--1 { left: 0; } .prov-chip--2 { right: 0; }
}
@media (max-width: 460px) {
  .prov-chip { font-size: .72rem; padding: 7px 11px; }
  .prov-chip--1 { top: 2%; } .prov-chip--3 { bottom: 0; }
}

/* =============================================================================
   HOMEPAGE CLOSING CONTACT CTA  (.contact-cta) — links to the full Contact page
============================================================================= */
.contact-cta { padding: clamp(40px, 6vw, 80px) 0; }
.contact-cta__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr .95fr; align-items: center; gap: clamp(26px, 4vw, 56px);
  padding: clamp(30px, 4.5vw, 64px);
  border-radius: 30px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #1E3A8A 100%);
  color: #fff;
  box-shadow: 0 30px 70px -40px rgba(37,99,235,.6);
}
.contact-cta__glow { position: absolute; top: -40%; right: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); z-index: -1; }
.section-label--light { color: #BFD4FF !important; }
.text-gradient-light { background: linear-gradient(90deg,#FFFFFF 0%,#93E9CE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.contact-cta__text h2 { color: #fff; }
.contact-cta__text p { color: rgba(255,255,255,.9); font-size: 1.02rem; line-height: 1.65; margin: 14px 0 26px; max-width: 52ch; }
.contact-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-white { background: #fff; color: #1D4ED8; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important; }
.btn-white:hover { background: #F1F5FF; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16) !important; }
.btn-ghost-light { background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-ghost-light:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.contact-cta__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-cta__facts li { display: flex; align-items: center; gap: 13px; }
.contact-cta__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.contact-cta__ic svg { width: 20px; height: 20px; }
.contact-cta__facts b { display: block; font-size: .82rem; font-weight: 800; color: #fff; }
.contact-cta__facts small { display: block; font-size: .82rem; color: rgba(255,255,255,.82); }
@media (max-width: 820px) {
  .contact-cta__panel { grid-template-columns: 1fr; gap: 28px; padding: 30px; }
  .contact-cta__btns .btn { flex: 1 1 auto; justify-content: center; }
}

/* =============================================================================
   CONTACT PAGE (.cpage-*) — 2026/2027 Executive Unified Contact Hub
============================================================================= */
.cpage-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(120px, 14vw, 160px) 0 clamp(40px, 5vw, 68px);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(37, 99, 235, 0.07) 0%, rgba(37, 99, 235, 0) 70%),
    linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid #EEF2F6;
}
.cpage-hero__inner { max-width: 780px; margin: 0 auto; }
.cpage-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: #FFFFFF; border: 1.5px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-blue-vibrant, #2563EB); margin-bottom: 18px;
}
.cpage-hero__eyebrow i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00C389; box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.18);
  display: inline-block;
}
.cpage-hero h1 {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.035em;
  color: var(--text-heading, #0F172A); margin: 0 0 16px;
}
.cpage-hero p {
  font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.65;
  color: var(--text-muted, #475569); max-width: 62ch; margin: 0 auto 24px;
}
.cpage-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cpage-hero__chips span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--border-main, #E2E8F0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  font-size: 0.8125rem; font-weight: 700; color: var(--text-heading, #0F172A);
}
.cpage-hero__chips svg { width: 16px; height: 16px; color: #059669; }

.cpage-main {
  padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 9vw, 120px);
  background: #FFFFFF;
}
.cpage-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
}

/* Left: Unified Sidebar Operations Card */
.cpage-aside { position: sticky; top: 96px; }
.cpage-sidebar-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-main, #E2E8F0);
  border-radius: 24px;
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05), 0 24px 50px -28px rgba(37, 99, 235, 0.12);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cpage-sidebar-head {
  border-bottom: 1px solid #EEF2F6;
  padding-bottom: 18px;
}
.cpage-sidebar-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-blue-vibrant, #2563EB);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cpage-sidebar-badge i.radar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 6px #10B981;
  display: inline-block;
  animation: miniPulseDot 1.4s infinite;
}
.cpage-sidebar-head h3 {
  font-family: var(--font-heading, sans-serif);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading, #0F172A);
  margin: 0 0 6px;
}
.cpage-sidebar-head p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted, #64748B);
  margin: 0;
}

.cpage-channel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cpage-channel-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid #EEF2F6;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cpage-channel-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.cpage-channel-ic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
.cpage-channel-ic svg { width: 20px; height: 20px; }
.cpage-channel-ic--blue { background: linear-gradient(135deg, #2563EB, #4C86FF); }
.cpage-channel-ic--green { background: linear-gradient(135deg, #10B981, #047857); }
.cpage-channel-ic--amber { background: linear-gradient(135deg, #F5A524, #EA580C); }

.cpage-channel-body { flex: 1 1 auto; min-width: 0; }
.cpage-channel-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.cpage-channel-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748B);
  display: block;
}
.cpage-status-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}
.cpage-status-pill--blue {
  background: #EFF6FF;
  color: #1E40AF;
  border-color: #BFDBFE;
}
.cpage-channel-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-heading, #0F172A);
  margin-top: 1px;
}
.cpage-channel-link {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--brand-blue-vibrant, #2563EB);
  text-decoration: none;
  margin-top: 1px;
  transition: color 0.2s ease;
}
.cpage-channel-link:hover {
  text-decoration: underline;
  color: #1D4ED8;
}
.cpage-channel-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted, #64748B);
  margin-top: 3px;
  line-height: 1.4;
}

/* Bottom Assurance Box */
.cpage-sidebar-assurance {
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, #0B2159 0%, #152B66 50%, #1D4ED8 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px -8px rgba(11, 33, 89, 0.4);
}
.cpage-assurance-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #93C5FD;
  margin-bottom: 8px;
}
.cpage-sidebar-assurance p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 12px;
}
.cpage-assurance-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.cpage-assurance-checks span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFFFFF;
}
.cpage-assurance-checks svg {
  width: 14px;
  height: 14px;
  color: #34D399;
  flex-shrink: 0;
}

/* Right: Form Card */
.cpage-formcard {
  background: #FFFFFF;
  border: 1.5px solid var(--border-main, #E2E8F0);
  border-radius: 24px;
  padding: clamp(24px, 3.2vw, 40px);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05), 0 30px 60px -30px rgba(37, 99, 235, 0.14);
}
.cpage-formcard h2 {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading, #0F172A);
  margin: 0 0 6px;
}
.cpage-formcard__sub {
  font-size: 0.95rem;
  color: var(--text-muted, #64748B);
  margin: 0 0 24px;
}
.cpage-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.cpage-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.cpage-field label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-heading, #0F172A);
  margin-bottom: 7px;
}
.cpage-field input, .cpage-field select, .cpage-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-main, #E2E8F0);
  background: #F8FAFC;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text-heading, #0F172A);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.cpage-field input::placeholder, .cpage-field textarea::placeholder { color: #94A3B8; }
.cpage-field input:focus, .cpage-field select:focus, .cpage-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue-vibrant, #2563EB);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.cpage-field textarea { resize: vertical; min-height: 120px; }
.cpage-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.cpage-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-main, #E2E8F0);
  background: #F8FAFC;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-heading, #0F172A);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cpage-radio input { accent-color: #2563EB; }
.cpage-radio:has(input:checked) {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.08);
  color: #1D4ED8;
  font-weight: 700;
}
.cpage-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.cpage-form__actions .btn-primary { flex: 1; min-width: 200px; }

@media (max-width: 900px) {
  .cpage-grid { grid-template-columns: 1fr; }
  .cpage-aside { position: static; }
}
@media (max-width: 540px) {
  .cpage-form__row { grid-template-columns: 1fr; gap: 0; }
  .cpage-form__actions .btn { flex: 1 1 auto; justify-content: center; }
}

.sb-orbs, .sb-orb { display: none !important; }

/* =============================================================================
   SERVICE-PAGE HERO — full-bleed background PHOTO + dark scrim + overlaid text
   (Air Spider style). Each service loads its own image from
   /assets/images/services/<slug>.svg — one per service, so translation gets a
   globe and language glyphs, transport gets a route and vehicle, care gets a
   home and heart, and so on. The artwork sits at --svc-hero-img-opacity
   (default .22, i.e. the 20-25% wash we want) over the themed gradient, and
   the scrim above it stays dark on the left where the headline sits and clears
   toward the right so the illustration is actually visible. When no image is
   present the themed dark gradient shows, so the hero is never empty.
============================================================================= */
.svc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(140px, 17vw, 208px) 0 clamp(56px, 8vw, 96px) !important;
  background: linear-gradient(158deg, #08152F 0%, #0B2159 52%, #061029 100%) !important;
  --svc-hero-img-opacity: .34;
}
.svc-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
  opacity: 0.34 !important;
  transform: scale(1.04); animation: svcHeroZoom 22s ease-in-out infinite alternate;
}
.svc-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,12,26,.88) 0%, rgba(6,12,26,.70) 40%, rgba(6,12,26,.30) 74%, rgba(6,12,26,.14) 100%),
    linear-gradient(180deg, rgba(6,12,26,.40) 0%, rgba(6,12,26,0) 32%, rgba(6,12,26,.48) 100%);
}
/* accent glow that tints the scrim per service */
.svc-page--green  .svc-hero__scrim::after,
.svc-page--blue   .svc-hero__scrim::after,
.svc-page--amber  .svc-hero__scrim::after,
.svc-page--violet .svc-hero__scrim::after,
.svc-page--rose   .svc-hero__scrim::after,
.svc-page--cyan   .svc-hero__scrim::after { content:""; position:absolute; inset:0; opacity:.32; }
.svc-page--green  .svc-hero__scrim::after { background: radial-gradient(60% 60% at 8% 12%, rgba(0,195,137,.35), transparent 60%); }
.svc-page--blue   .svc-hero__scrim::after { background: radial-gradient(60% 60% at 8% 12%, rgba(37,99,235,.4), transparent 60%); }
.svc-page--amber  .svc-hero__scrim::after { background: radial-gradient(60% 60% at 8% 12%, rgba(245,165,36,.32), transparent 60%); }
.svc-page--violet .svc-hero__scrim::after { background: radial-gradient(60% 60% at 8% 12%, rgba(124,58,237,.34), transparent 60%); }
.svc-page--rose   .svc-hero__scrim::after { background: radial-gradient(60% 60% at 8% 12%, rgba(244,63,94,.3), transparent 60%); }
.svc-page--cyan   .svc-hero__scrim::after { background: radial-gradient(60% 60% at 8% 12%, rgba(6,182,212,.32), transparent 60%); }
.svc-hero .container { position: relative; z-index: 2; }
.svc-hero__in { max-width: 700px; }
@keyframes svcHeroZoom { 0%{ transform: scale(1.04) } 100%{ transform: scale(1.12) } }
@media (prefers-reduced-motion: reduce) { .svc-hero__photo { animation: none; } }

/* domiciliary-care uses .svc-page--teal, which was missing from the glow list
   above, so that hero alone had no accent tint over its artwork. */
.svc-page--teal .svc-hero__scrim::after { content:""; position:absolute; inset:0; opacity:.32; background: radial-gradient(60% 60% at 8% 12%, rgba(56,189,248,.34), transparent 60%); }

/* =============================================================================
   SERVICE FLOW — Centered Processing Logo Watermark & Processing Animations
   ============================================================================= */
.svc-flow {
  position: relative;
  overflow: hidden;
  background: var(--sb-navy) !important;
  color: var(--sb-on-navy) !important;
  padding: clamp(64px, 8vw, 112px) 0 !important;
}

.svc-flow__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  overflow: hidden;
  background:
    radial-gradient(58% 50% at 14% 10%, color-mix(in srgb, var(--svc-accent-2) 34%, transparent), transparent 62%),
    radial-gradient(54% 46% at 88% 88%, rgba(0, 195, 137, .22), transparent 64%) !important;
}

/* Sized larger, perfectly centered Servicebird emblem */
.svc-flow__bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, 80vw);
  height: min(360px, 52vw);
  background-image: url('../images/servicebird-bird.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.14;
  filter: drop-shadow(0 0 35px var(--svc-accent-2)) brightness(1.8);
  animation: svcFlowLogoPulse 5s ease-in-out infinite alternate;
  z-index: 0;
}

/* Ambient processing radar ring */
.svc-flow__bg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 88vw);
  height: min(620px, 88vw);
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 80px rgba(76, 134, 255, 0.12) inset, 0 0 60px rgba(0, 195, 137, 0.08);
  animation: svcFlowRadar 20s linear infinite;
  z-index: 0;
}

@keyframes svcFlowLogoPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.10;
    filter: drop-shadow(0 0 15px var(--svc-accent-2)) brightness(1.4);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.18;
    filter: drop-shadow(0 0 48px var(--svc-accent-2)) brightness(2.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.10;
    filter: drop-shadow(0 0 15px var(--svc-accent-2)) brightness(1.4);
  }
}

@keyframes svcFlowRadar {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-flow__bg::before,
  .svc-flow__bg::after {
    animation: none !important;
  }
}

/* =============================================================================
   SERVICE PIPELINE — icon centring, scale, and the "processing" animation
   -----------------------------------------------------------------------------
   The icon inside .svc-step__tile was rendering hard against the top edge of
   the tile instead of centred. Cause: servicebird-live.css styled the step copy
   with a bare `.svc-step span`, which also matches .svc-step__tile and
   .svc-step__no; at 0,1,1 it outranked their own 0,1,0 declarations and
   replaced display:grid with display:block, so the svg fell back to sitting on
   a text baseline. That selector is now scoped at source; the rules below
   restate the geometry defensively, size the icon up, and drive the pipeline as
   a repeating four-stage process so the section reads as work moving through
   the platform rather than four static badges.
============================================================================= */
.svc-step__tile {
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  width: 78px; height: 78px;
  margin: 0 auto 18px !important;
  border-radius: 24px;
  line-height: 0;          /* kills the inline-svg baseline gap */
  overflow: visible;
}
/* the icon: larger, optically centred, and the only in-flow child */
.svc-step__tile > svg {
  grid-area: 1 / 1;
  width: 36px !important; height: 36px !important;
  display: block;
  margin: 0 auto;
  overflow: visible;
  transform-origin: 50% 50%;
}
/* the 01-04 badge is absolute, so keep it out of the grid flow and restore the
   small mono type that `.svc-step span` had been overriding */
.svc-step__no {
  display: grid !important;
  place-items: center !important;
  font-size: .625rem !important;
  line-height: 1 !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--sb-ink) !important;
}

/* --------------------------------------------------------- processing cycle */
/* One 6.4s loop, four 1.6s stages. Each tile lights, its icon pulses, then a
   packet of light travels the rail to the next stage. Starts only once the step
   has been revealed by the IntersectionObserver, so it never runs off-screen. */
.svc-step__tile::after {
  content: ""; position: absolute; inset: -7px;
  border-radius: 30px; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--svc-accent-2) 75%, transparent);
  opacity: 0; transform: scale(.86);
}
.svc-step.is-in .svc-step__tile::after { animation: svcStageRing 6.4s linear infinite; }
.svc-step.is-in .svc-step__tile > svg   { animation: svcStageIcon 6.4s ease-in-out infinite; }
.svc-step.is-in .svc-step__link::after  { animation: svcStagePacket 6.4s linear infinite; }

.svc-step:nth-child(1) .svc-step__tile::after,
.svc-step:nth-child(1) .svc-step__tile > svg { animation-delay: 0s; }
.svc-step:nth-child(2) .svc-step__tile::after,
.svc-step:nth-child(2) .svc-step__tile > svg { animation-delay: 1.6s; }
.svc-step:nth-child(3) .svc-step__tile::after,
.svc-step:nth-child(3) .svc-step__tile > svg { animation-delay: 3.2s; }
.svc-step:nth-child(4) .svc-step__tile::after,
.svc-step:nth-child(4) .svc-step__tile > svg { animation-delay: 4.8s; }

/* the packet leaves a stage 0.8s after it lights, i.e. mid-stage */
/* rail geometry follows the tile: it is now 78px, so the vertical centre is 39px
   and the horizontal run has to clear 39px + a 5px breather on each side */
.svc-step__link {
  overflow: visible;
  top: 39px;
  left: calc(50% + 44px);
  width: calc(100% - 88px + clamp(14px, 2vw, 26px));
}
.svc-step__link::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 30px; height: 6px; margin-top: -3px;
  border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #FFFFFF);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--svc-accent-2) 60%, transparent);
  opacity: 0;
}
.svc-step:nth-child(1) .svc-step__link::after { animation-delay: .8s; }
.svc-step:nth-child(2) .svc-step__link::after { animation-delay: 2.4s; }
.svc-step:nth-child(3) .svc-step__link::after { animation-delay: 4s; }

@keyframes svcStageRing {
  0%              { opacity: 0;  transform: scale(.86); }
  5%              { opacity: .95; transform: scale(1); }
  19%             { opacity: 0;  transform: scale(1.26); }
  100%            { opacity: 0;  transform: scale(1.26); }
}
@keyframes svcStageIcon {
  0%, 25%, 100%   { transform: scale(1); }
  6%              { transform: scale(1.16); }
  14%             { transform: scale(1); }
}
@keyframes svcStagePacket {
  0%              { left: -12%; opacity: 0; }
  4%              { opacity: .95; }
  15%             { left: 100%; opacity: 0; }
  100%            { left: 100%; opacity: 0; }
}

@media (max-width: 560px) {
  .svc-step__tile { width: 58px; height: 58px; border-radius: 19px; margin: 0 !important; }
  .svc-step__tile > svg { width: 28px !important; height: 28px !important; }
  .svc-step__tile::after { inset: -5px; border-radius: 23px; }
  /* centre the vertical rail under a 58px tile column (was 25px against 52px).
     width/height must be restated here: the desktop rule above lives in this
     later stylesheet, so without it that calc() width would win on mobile too
     and the rail would stay horizontal. */
  .svc-step__link { left: 28px; top: 58px; width: 2px; height: calc(100% - 58px); }
  /* the rail turns vertical on a phone, so the horizontal packet no longer
     applies — the ring and icon pulse alone carry the processing read */
  .svc-step.is-in .svc-step__link::after { animation: none; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-step__tile::after,
  .svc-step__tile > svg,
  .svc-step__link::after { animation: none !important; opacity: 0; transform: none; }
  .svc-step__tile > svg { opacity: 1; }
}

/* =============================================================================
   ENTERPRISE AUTHENTICATION SUITE (Login, Register, OTP Verification & Dashboard)
   High-end SaaS aesthetics matching Servicebird's design language
============================================================================= */

/* Page Wrapper & Auth Section */
.sb-auth-page {
  background: #F8FAFC;
}

.sb-auth-section {
  position: relative;
  background: #F8FAFC;
  padding-top: clamp(130px, 12vw, 168px);
  padding-bottom: clamp(64px, 8vw, 110px);
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sb-auth-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Split Screen Layout */
.sb-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: #FFFFFF;
  border: 1px solid var(--border-main, #E2E8F0);
  border-radius: 28px;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.8);
  overflow: hidden;
}

.sb-auth-grid--centered {
  grid-template-columns: 1fr;
  max-width: 540px;
  margin: 0 auto;
}

/* Left Showcase Panel */
.sb-auth-showcase {
  background: linear-gradient(150deg, #0B2159 0%, #0F2C74 45%, #1D4ED8 100%);
  padding: clamp(36px, 5vw, 56px);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.sb-auth-showcase::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 137, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.sb-auth-showcase::after {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.sb-auth-showcase__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 5vw, 48px);
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.sb-auth-showcase__content {
  position: relative;
  z-index: 1;
}

.sb-auth-showcase__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7FE7C4;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.sb-auth-showcase h2 {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}

.sb-auth-showcase p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 32px;
}

/* Showcase Highlights */
.sb-auth-highlights {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.sb-auth-highlights li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.sb-auth-highlights li i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 195, 137, 0.2);
  border: 1px solid rgba(0, 195, 137, 0.4);
  color: #00C389;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-style: normal;
}

.sb-auth-highlights li i svg {
  width: 14px;
  height: 14px;
}

.sb-auth-showcase__footer {
  position: relative;
  z-index: 1;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Right Form Card */
.sb-auth-form-card {
  padding: clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFFFFF;
}

.sb-auth-header {
  margin-bottom: 28px;
}

.sb-auth-header h1 {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: var(--text-heading, #0F172A);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.sb-auth-header p {
  color: var(--text-muted, #64748B);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}

/* Enhanced Interactive Role Selector Cards */
.sb-role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.sb-role-card {
  position: relative;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px 16px;
  background: #F8FAFC;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}

.sb-role-card:hover {
  border-color: #CBD5E1;
  background: #FFFFFF;
  transform: translateY(-1px);
}

.sb-role-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sb-role-card.is-active,
.sb-role-card:has(input:checked) {
  border-color: #2563EB;
  background: #EFF6FF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 4px 12px rgba(37, 99, 235, 0.08);
}

.sb-role-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sb-role-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: grid;
  place-items: center;
  color: #2563EB;
  transition: all 0.2s ease;
}

.sb-role-card:has(input:checked) .sb-role-card__icon {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}

.sb-role-card__radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.sb-role-card:has(input:checked) .sb-role-card__radio-dot {
  border-color: #2563EB;
  background: #2563EB;
}

.sb-role-card:has(input:checked) .sb-role-card__radio-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}

.sb-role-card__title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
  margin-top: 4px;
}

.sb-role-card__desc {
  font-size: 0.76rem;
  color: #64748B;
  line-height: 1.35;
}

/* Form Fields */
.sb-auth-form {
  display: grid;
  gap: 16px;
}

.sb-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-form-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-heading, #0F172A);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sb-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sb-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #94A3B8;
  pointer-events: none;
  transition: color 0.2s ease;
}

.sb-input,
.sb-select {
  width: 100%;
  padding: 12px 16px;
  padding-left: 42px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-heading, #0F172A);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.sb-input:hover,
.sb-select:hover {
  border-color: #CBD5E1;
  background: #FFFFFF;
}

.sb-input:focus,
.sb-select:focus {
  outline: none;
  border-color: #2563EB;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.sb-input-wrap:focus-within .sb-input-icon {
  color: #2563EB;
}

.sb-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding-right: 40px;
}

.sb-textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
  padding-top: 12px;
}

.sb-input-wrap--textarea {
  align-items: flex-start;
}

.sb-input-icon--top {
  top: 14px;
}

.sb-toggle-password {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.sb-toggle-password:hover {
  color: #2563EB;
}

/* Password Strength Meter */
.sb-password-meter {
  margin-top: 6px;
}

.sb-meter-track {
  height: 5px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.sb-meter-fill {
  height: 100%;
  width: 0%;
  background: #EF4444;
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}

.sb-meter-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
}

.sb-reqs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: #94A3B8;
}

.sb-req-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.sb-req-item.req-met {
  color: #059669;
  font-weight: 700;
}

.sb-req-item.req-met::before {
  content: "✓";
  color: #059669;
}

/* 6-Digit OTP Box Grid */
.sb-otp-wrap {
  text-align: center;
  margin: 16px 0 24px;
}

.sb-otp-inputs {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
  margin: 20px 0;
}

.sb-otp-box {
  width: clamp(44px, 11vw, 56px);
  height: clamp(52px, 13vw, 64px);
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 800;
  border-radius: 14px;
  border: 2px solid #CBD5E1;
  background: #F8FAFC;
  color: #1D4ED8;
  transition: all 0.2s ease;
  outline: none;
}

.sb-otp-box:focus {
  border-color: #2563EB;
  background: #EFF6FF;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
  transform: translateY(-2px);
}

.sb-otp-meta {
  font-size: 0.88rem;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sb-resend-btn {
  background: none;
  border: none;
  color: #2563EB;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.sb-resend-btn:disabled,
.sb-resend-btn.btn-disabled {
  color: #94A3B8;
  cursor: not-allowed;
  text-decoration: none;
}

/* Alerts & Notifications */
.sb-alert {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sb-alert--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.sb-alert--success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.sb-alert--info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.sb-alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Submit Buttons with Loading State */
.sb-auth-btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: #FFFFFF;
  border: none;
  font-size: 0.96rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  position: relative;
  overflow: hidden;
}

.sb-auth-btn:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.sb-auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.sb-auth-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.sb-auth-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid #FFFFFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sbBtnSpin 0.7s linear infinite;
}

@keyframes sbBtnSpin {
  to { transform: rotate(360deg); }
}

/* =============================================================================
   SERVICEBIRD ULTRA SAAS DASHBOARD (2027)
   ============================================================================= */
.sb-dash-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 16px 0;
  margin-bottom: 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

.sb-dash-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sb-user-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

/* Dashboard Hero Welcome Banner */
.sb-dash-hero {
  background: linear-gradient(135deg, #0B2159 0%, #1D4ED8 50%, #2563EB 100%) !important;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 40px);
  color: #FFFFFF !important;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -8px rgba(11, 33, 89, 0.35), 0 6px 18px rgba(37, 99, 235, 0.22);
}

.sb-dash-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.22) 0%, rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}

.sb-dash-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}

.sb-dash-hero__badge i.radar-dot,
.sb-dash-hero__badge i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  font-style: normal;
  animation: miniPulseDot 1.4s infinite;
}

.sb-dash-hero__title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800;
  color: #FFFFFF !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
}

.sb-dash-hero__title span {
  color: #FFFFFF !important;
}

.sb-dash-hero__desc {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.95rem;
  margin: 0;
  max-width: 620px;
  line-height: 1.5;
}

.sb-dash-hero__btn {
  background: #FFFFFF !important;
  color: #1E40AF !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sb-dash-hero__btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background: #F8FAFC !important;
  color: #2563EB !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

/* Dashboard 4 Metric Stats Cards */
.sb-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.sb-stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
}

.sb-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
}

.sb-stat-card--blue::before { background: linear-gradient(90deg, #2563EB, #60A5FA); }
.sb-stat-card--green::before { background: linear-gradient(90deg, #059669, #34D399); }
.sb-stat-card--purple::before { background: linear-gradient(90deg, #7C3AED, #A855F7); }
.sb-stat-card--amber::before { background: linear-gradient(90deg, #D97706, #FBBF24); }

.sb-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.04);
  border-color: rgba(37, 99, 235, 0.35);
}

.sb-stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sb-stat-card__lbl {
  font-size: 0.82rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sb-stat-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.sb-stat-card__icon svg { width: 17px; height: 17px; }
.sb-stat-card__icon.blue { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.sb-stat-card__icon.green { background: rgba(5, 150, 105, 0.1); color: #059669; }
.sb-stat-card__icon.purple { background: rgba(124, 58, 237, 0.1); color: #7C3AED; }
.sb-stat-card__icon.amber { background: rgba(217, 119, 6, 0.1); color: #D97706; }

.sb-stat-card__val {
  font-size: 2.1rem;
  font-weight: 800;
  font-family: var(--font-heading, sans-serif);
  line-height: 1.1;
  margin: 6px 0;
}

.sb-stat-card__val.val-blue { color: #2563EB; }
.sb-stat-card__val.val-green { color: #00B87A; }
.sb-stat-card__val.val-purple { color: #7C3AED; }
.sb-stat-card__val.val-amber { color: #0F172A; }

.sb-stat-card__sub {
  font-size: 0.82rem;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.sb-stat-card__sub.sub-green { color: #059669; font-weight: 700; }
.sb-stat-card__sub .dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: #10B981;
}

/* Dashboard Interactive Requirement Rows */
.sb-req-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid #EEF2F6;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-req-item:hover {
  background: #FFFFFF;
  transform: translateX(6px);
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.sb-status-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sb-status-pill.confirmed { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.sb-status-pill.matching { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.sb-status-pill.delivered { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }

/* Dashboard Quick Action Buttons */
.sb-quick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  text-decoration: none;
  color: #0F172A;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-quick-btn:hover {
  background: #FFFFFF;
  border-color: #2563EB;
  color: #2563EB;
  transform: translateY(-2.5px);
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.18);
}

.sb-quick-btn svg {
  transition: transform 0.25s ease;
}

.sb-quick-btn:hover svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .sb-auth-section {
    padding-top: clamp(110px, 12vw, 136px);
    padding-bottom: clamp(44px, 6vw, 72px);
    min-height: auto;
  }
  .sb-auth-grid {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .sb-auth-showcase {
    display: none;
  }
  .sb-auth-card {
    padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px);
  }
}

@media (max-width: 640px) {
  .sb-auth-section {
    padding-top: 104px;
    padding-bottom: 48px;
  }
  .sb-auth-container {
    padding: 0 12px;
  }
  .sb-auth-grid {
    border-radius: 18px;
  }
  .sb-auth-card {
    padding: 24px 16px;
  }
  .sb-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 20px;
  }
  .sb-auth-tab {
    padding: 10px 8px;
    font-size: 0.82rem;
    justify-content: center;
    gap: 6px;
  }
  .sb-auth-title {
    font-size: 1.35rem;
  }
  .sb-auth-subtitle {
    font-size: 0.85rem;
    margin-bottom: 20px;
  }
  .sb-login-actions-wrap {
    flex-direction: column;
    gap: 12px;
  }
  .sb-client-wa-btn {
    width: 100%;
    justify-content: center;
  }
  .sb-auth-btn {
    width: 100%;
    justify-content: center;
  }
  .sb-form-input,
  .sb-input {
    font-size: 16px !important; /* Prevents auto-zoom on iOS safari */
  }
}

/* ==========================================================================
   ANIMATED SPEED STREAM & FLIGHT RAIN PARTICLES
   ========================================================================== */
.sb-auth-rain-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

.hero-rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.hero-j {
  position: relative;
  overflow: hidden;
}

.hero-j .container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   INTERACTIVE MINI SERVICEBIRD SHOWCASE & FLIGHT STAGE (AUTH PAGES)
   ========================================================================== */
.sb-auth-bird-stage {
  position: relative;
  width: 100%;
  height: 230px;
  margin: 20px 0 10px;
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.3) 0%, rgba(11, 33, 89, 0.2) 60%, transparent 100%);
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 30px rgba(37, 99, 235, 0.2), 0 12px 28px rgba(11, 33, 89, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sb-auth-bird-stage:hover {
  border-color: rgba(127, 231, 196, 0.4);
  box-shadow: inset 0 0 40px rgba(37, 99, 235, 0.3), 0 16px 36px rgba(11, 33, 89, 0.45);
}

.sb-auth-flight-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sb-mini-bird-wrap {
  position: relative;
  width: 160px;
  height: 140px;
  z-index: 3;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 12px 20px rgba(11, 33, 89, 0.6));
  animation: miniBirdFloating 4s ease-in-out infinite alternate;
}

@keyframes miniBirdFloating {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
  100% { transform: translateY(4px) rotate(-1deg); }
}

.sb-mini-bird-wrap.barrel-roll {
  animation: miniBarrelRoll 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes miniBarrelRoll {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Wing flap animations */
.sb-mini-bird-wrap .anim-wing-flap-left {
  transform-origin: 280px 270px;
  animation: miniWingFlap 0.45s ease-in-out infinite alternate;
}

.sb-mini-bird-wrap .anim-wing-flap-right {
  transform-origin: 450px 310px;
  animation: miniWingFlapRight 0.45s ease-in-out infinite alternate;
}

@keyframes miniWingFlap {
  0% { transform: rotate(0deg) scaleY(1); }
  100% { transform: rotate(12deg) scaleY(0.85); }
}

@keyframes miniWingFlapRight {
  0% { transform: rotate(0deg) scaleY(1); }
  100% { transform: rotate(-10deg) scaleY(0.88); }
}

/* Floating Live Activity Badges on Auth Stage */
.sb-mini-activity-pill {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  font-family: var(--font-heading, sans-serif);
  font-size: 0.73rem;
  font-weight: 700;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: miniPillBob 3.5s ease-in-out infinite alternate;
}

.sb-mini-activity-pill--1 {
  top: 14px;
  left: 14px;
  animation-delay: 0s;
}

.sb-mini-activity-pill--2 {
  bottom: 14px;
  right: 14px;
  animation-delay: -1.8s;
}

.sb-mini-activity-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sb-mini-activity-pill .pill-dot.green {
  background: #00C389;
  box-shadow: 0 0 10px #00C389;
  animation: miniPulseDot 1.5s infinite;
}

.sb-mini-activity-pill .pill-dot.purple {
  background: #A855F7;
  box-shadow: 0 0 10px #A855F7;
  animation: miniPulseDot 1.5s infinite 0.75s;
}

@keyframes miniPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes miniPillBob {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-6px) scale(1.02); }
}

/* Mini Speech Bubble */
.sb-mini-speech {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  background: rgba(37, 99, 235, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.sb-auth-bird-stage:hover .sb-mini-speech,
.sb-mini-speech.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   USER PROFILE & SETTINGS SUITE (AVATAR UPLOADER, PASSWORD CHANGE & MODAL)
   ============================================================================= */
.sb-user-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sb-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.sb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  overflow: hidden;
  border: 2px solid #FFFFFF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.sb-avatar img[src]:not([src=""]) {
  display: block;
}

.sb-avatar-wrap:hover .sb-avatar {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

.sb-avatar-camera-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0F172A;
  color: #FFFFFF;
  border: 1.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.sb-avatar-camera-badge svg {
  width: 10px;
  height: 10px;
}

/* User Settings Header Action Buttons */
.sb-dash-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-btn-profile-settings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sb-btn-profile-settings:hover {
  background: #FFFFFF;
  border-color: #2563EB;
  color: #2563EB;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  transform: translateY(-1.5px);
}

/* Profile & Security Modal Overlay */
.sb-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 99999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-modal-overlay.is-open {
  display: flex !important;
  opacity: 1 !important;
}

.sb-modal-box {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 620px !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-modal-overlay.is-open .sb-modal-box {
  transform: scale(1) translateY(0) !important;
}

.sb-modal-header {
  padding: 22px 28px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #EEF2F6 !important;
}

.sb-modal-title {
  font-family: var(--font-heading, sans-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 !important;
}

.sb-modal-close-btn {
  background: #F1F5F9 !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.sb-modal-close-btn:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  transform: rotate(90deg) !important;
}

.sb-modal-tabs {
  display: flex !important;
  padding: 8px 24px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #EEF2F6 !important;
  gap: 8px !important;
}

.sb-modal-tab-btn {
  padding: 9px 16px !important;
  border: none !important;
  background: transparent !important;
  color: #64748B !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sb-modal-tab-btn:hover {
  color: #0F172A !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.sb-modal-tab-btn.is-active {
  background: #FFFFFF !important;
  color: #2563EB !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.sb-modal-body {
  padding: 24px 28px 28px !important;
  overflow-y: auto !important;
}

.sb-modal-pane {
  display: none !important;
}

.sb-modal-pane.is-active {
  display: block !important;
  animation: sbFadeSlideIn 0.3s ease forwards !important;
}

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

/* Avatar Photo Upload Box */
.sb-photo-uploader-box {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 16px 20px !important;
  background: #F8FAFC !important;
  border: 1.5px dashed #CBD5E1 !important;
  border-radius: 18px !important;
  margin-bottom: 20px !important;
}

.sb-photo-preview-large {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.sb-photo-preview-large img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: none;
}

.sb-photo-preview-large img[src]:not([src=""]) {
  display: block !important;
}

/* Dynamic Toast Notification */
.sb-toast-notify {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 100000 !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  padding: 14px 22px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transform: translateY(100px) !important;
  opacity: 0 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  pointer-events: none !important;
}

.sb-toast-notify.is-shown {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.sb-toast-notify .toast-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
}

/* -----------------------------------------------------------------------------
   TM Trademark Super Script Symbol
----------------------------------------------------------------------------- */
.sb-tm-mark {
  font-size: 0.58em !important;
  vertical-align: super !important;
  margin-left: 2px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  opacity: 0.85 !important;
  line-height: 1 !important;
}

/* -----------------------------------------------------------------------------
   Footer Accreditations Row
/* -----------------------------------------------------------------------------
   Footer Accreditations Row — Sleek Public Sector Standards Bar
----------------------------------------------------------------------------- */
.footer-accreditations-row {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}
.footer-accreditations-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}
.footer-accred-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00C389;
  box-shadow: 0 0 8px rgba(0, 195, 137, 0.6);
}
.footer-accreditations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.footer-accreditation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-accreditation-item:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
}
.footer-accreditation-item .accred-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #60A5FA;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.footer-accreditation-item:hover .accred-badge {
  transform: scale(1.08);
}
.footer-accreditation-item .accred-badge--emerald {
  background: rgba(0, 195, 137, 0.14);
  border-color: rgba(0, 195, 137, 0.25);
  color: #00C389;
}
.footer-accreditation-item .accred-badge--purple {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.25);
  color: #C084FC;
}
.footer-accreditation-item .accred-badge--amber {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.25);
  color: #FBBF24;
}
.footer-accreditation-item .accred-badge svg {
  width: 18px;
  height: 18px;
}
.footer-accreditation-item .accred-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.footer-accreditation-item .accred-text strong {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.footer-accreditation-item .accred-text small {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

/* -----------------------------------------------------------------------------
   Client WhatsApp Floating Assistant
----------------------------------------------------------------------------- */
.sb-whatsapp-widget {
  position: fixed;
  bottom: 26px;
  left: 26px;
  z-index: 99990;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.sb-whatsapp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-whatsapp-toggle:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px -2px rgba(37, 211, 102, 0.55), 0 6px 16px rgba(0, 0, 0, 0.2);
}
.sb-whatsapp-badge {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sb-whatsapp-popup {
  position: absolute;
  bottom: 64px;
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom left;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-whatsapp-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.sb-whatsapp-head {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
  color: #FFFFFF;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.sb-whatsapp-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-whatsapp-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.sb-whatsapp-head p {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.82);
}
.sb-whatsapp-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.sb-whatsapp-close:hover {
  color: #FFFFFF;
}
.sb-whatsapp-body {
  padding: 16px;
  background: #EFEAE2;
  background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: 14px 14px;
}
.sb-whatsapp-msg {
  background: #FFFFFF;
  border-radius: 12px 12px 12px 2px;
  padding: 10px 14px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #1E293B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}
.sb-whatsapp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-whatsapp-chip {
  display: block;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0F172A;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sb-whatsapp-chip:hover {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
  transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   "Our Advisory Professionals" Section & Being Constructed Box
----------------------------------------------------------------------------- */
.sb-advisory-wrapper {
  margin-top: 48px;
}
.sb-advisory-panel {
  background: #FFFFFF;
  border: 1.5px solid var(--border-main, #E2E8F0);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06);
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}
.sb-advisory-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563EB, #7C3AED, #10B981);
}
.sb-advisory-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #B45309;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sb-advisory-state-badge i.radar-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  animation: miniPulseDot 1.2s infinite;
}

/* -----------------------------------------------------------------------------
   Role-Based Portal Tabs on Login Page
----------------------------------------------------------------------------- */
.sb-portal-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #F1F5F9;
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 22px;
}
.sb-portal-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.sb-portal-tab.is-active {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.sb-portal-tab:hover:not(.is-active) {
  color: #0F172A;
}

/* -----------------------------------------------------------------------------
   CV / Credentials Upload Box on Registration Page
----------------------------------------------------------------------------- */
.sb-cv-uploader-wrap {
  margin-top: 14px;
}
.sb-cv-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 18px;
  background: #F8FAFC;
  border: 2px dashed #CBD5E1;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}
.sb-cv-drop-zone:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}
.sb-cv-drop-zone.has-file {
  border-color: #10B981;
  background: #ECFDF5;
}
.sb-cv-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.sb-cv-drop-zone.has-file .sb-cv-icon-box {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}
.sb-cv-label-txt {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 4px;
}
.sb-cv-help-txt {
  font-size: 0.78rem;
  color: #64748B;
}
.sb-cv-hidden-input {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Sign In Dual Portal Dropdown in Navbar
----------------------------------------------------------------------------- */
.sb-signin-dropdown {
  position: relative;
  display: inline-block;
}
.sb-signin-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-main, #E2E8F0);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-signin-dropdown:hover .sb-signin-menu,
.sb-signin-dropdown:focus-within .sb-signin-menu,
.sb-signin-dropdown.is-open .sb-signin-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sb-signin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #0F172A;
  transition: background 0.15s ease;
}
.sb-signin-item:hover {
  background: #F8FAFC;
}
.sb-signin-ic {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-signin-ic--blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
}
.sb-signin-ic--green {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.sb-signin-item strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}
.sb-signin-item small {
  display: block;
  font-size: 0.75rem;
  color: #64748B;
  margin-top: 2px;
}

/* =============================================================================
   LEGAL & STANDARDS HERO — Background Photo, Scrim, Grid & Badge Enhancements
   ============================================================================= */
.legal-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(130px, 15vw, 185px) 0 clamp(52px, 7vw, 88px) !important;
  background: linear-gradient(158deg, #08152F 0%, #0B2159 52%, #061029 100%) !important;
  color: #FFFFFF !important;
}

.legal-hero__photo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  opacity: 0.28 !important;
  transform: scale(1.04) !important;
  animation: legalHeroZoom 24s ease-in-out infinite alternate !important;
  filter: saturate(1.15) contrast(1.05) !important;
}

@keyframes legalHeroZoom {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.11); }
}

@media (prefers-reduced-motion: reduce) {
  .legal-hero__photo {
    animation: none !important;
  }
}

.legal-hero__scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(8, 21, 47, 0.92) 0%, rgba(8, 21, 47, 0.78) 45%, rgba(8, 21, 47, 0.45) 80%, rgba(8, 21, 47, 0.25) 100%),
    linear-gradient(180deg, rgba(8, 21, 47, 0.50) 0%, rgba(8, 21, 47, 0) 35%, rgba(8, 21, 47, 0.65) 100%) !important;
}

.legal-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    radial-gradient(60% 60% at 12% 16%, rgba(37, 99, 235, 0.45), transparent 65%),
    radial-gradient(50% 50% at 88% 84%, rgba(0, 195, 137, 0.25), transparent 60%);
}

.legal-hero__grid {
  position: absolute !important;
  inset: -40% -10% !important;
  z-index: 1 !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  animation: svcGrid 28s linear infinite !important;
}

.legal-hero .container {
  position: relative !important;
  z-index: 2 !important;
}

.legal-hero__in {
  max-width: 780px !important;
}

.legal-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.16) !important;
  border: 1px solid rgba(76, 134, 255, 0.35) !important;
  color: #93C5FD !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.legal-hero__badge svg {
  width: 15px !important;
  height: 15px !important;
  color: #60A5FA !important;
}

/* =============================================================================
   CLIENT WHATSAPP CHATBOT HIGHLIGHT SECTION & CARD (Clients Only · 01204 323232)
   ============================================================================= */
.opi-card--whatsapp {
  background: linear-gradient(145deg, #091F18 0%, #0B253A 55%, #071526 100%) !important;
  border: 1px solid rgba(0, 195, 137, 0.38) !important;
  box-shadow: 0 20px 48px -12px rgba(0, 195, 137, 0.18), 0 0 0 1px rgba(0, 195, 137, 0.12) !important;
  color: #FFFFFF !important;
  margin-top: 24px;
}

.opi-card__eyebrow--whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 195, 137, 0.15) !important;
  border: 1px solid rgba(0, 195, 137, 0.35) !important;
  color: #7FE7C4 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
}

.wa-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 10px #25D366;
  animation: waPulse 1.8s infinite ease-in-out;
}

@keyframes waPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #25D366; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.opi-card--whatsapp h3 {
  color: #FFFFFF !important;
}

.opi-card--whatsapp p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.wa-client-bot-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 20px;
  margin-top: 20px;
}

.wa-bot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wa-bot-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.wa-online-beacon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid #091F18;
}

.wa-bot-header strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}

.wa-bot-header small {
  display: block;
  font-size: 0.78rem;
  color: #7FE7C4;
}

.wa-bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.wa-bot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #E2E8F0;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.wa-bot-chip:hover {
  background: rgba(0, 195, 137, 0.2);
  border-color: #00C389;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.wa-bot-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-whatsapp-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 13px 22px !important;
  border-radius: 12px !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35) !important;
  transition: all 0.25s ease !important;
}

.btn-whatsapp-primary:hover {
  background: linear-gradient(135deg, #2ae06d 0%, #16a090 100%) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5) !important;
  transform: translateY(-2px) !important;
  color: #FFFFFF !important;
}

.wa-bot-note {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* Chat Mockup Window */
.wa-mockup-window {
  width: 100%;
  max-width: 380px;
  background: #0B141B;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
}

.wa-mockup-bar {
  background: #1F2C34;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wa-mockup-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wa-mockup-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #25D366;
  color: #0B141B;
  font-weight: 800;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
}

.wa-mockup-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #E9EDEF;
  line-height: 1.2;
}

.wa-mockup-status {
  font-size: 0.7rem;
  color: #8696A0;
}

.wa-shield-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 195, 137, 0.12);
  color: #00C389;
  border: 1px solid rgba(0, 195, 137, 0.25);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
}

.wa-shield-pill svg {
  width: 12px;
  height: 12px;
}

.wa-mockup-body {
  padding: 16px;
  background-color: #0B141B;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wa-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  position: relative;
}

.wa-bubble p {
  margin: 0 0 4px 0 !important;
}

.wa-bubble-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.65rem;
  opacity: 0.7;
}

.wa-bubble-time svg {
  width: 12px;
  height: 9px;
}

.wa-bubble--in {
  align-self: flex-start;
  background: #1F2C34;
  color: #E9EDEF;
  border-top-left-radius: 2px;
}

.wa-bubble--out {
  align-self: flex-end;
  background: #005C4B;
  color: #E9EDEF;
  border-top-right-radius: 2px;
}

.wa-bubble--highlight {
  background: #08332A;
  border: 1px solid rgba(0, 195, 137, 0.3);
  color: #7FE7C4;
}

.wa-bubble--highlight strong {
  color: #FFFFFF;
}

/* Public Sector Dedicated Page Banner */
.public-sector-whatsapp-card {
  background: linear-gradient(135deg, #081D17 0%, #0B253A 60%, #071526 100%);
  border: 1px solid rgba(0, 195, 137, 0.35);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 48px -12px rgba(0, 195, 137, 0.15);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .public-sector-whatsapp-card {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

.ps-wa-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 195, 137, 0.15);
  border: 1px solid rgba(0, 195, 137, 0.35);
  color: #7FE7C4;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ps-wa-copy h2 {
  font-size: 1.85rem;
  color: #FFFFFF;
  margin-bottom: 14px;
}

.ps-wa-copy p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  margin-bottom: 24px;
}

.ps-wa-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.ps-wa-note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   CLIENT PORTAL WHATSAPP CHATBOT ASSIST (Login Page Client Portal Only)
   ============================================================================= */
.sb-login-actions-wrap {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 540px) {
  .sb-login-actions-wrap {
    flex-direction: column;
  }
}

.sb-client-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: 12px;
  text-decoration: none;
  color: #065F46;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
  position: relative;
}

.sb-client-wa-btn.is-hidden {
  display: none !important;
}

.sb-client-wa-btn:hover {
  background: #DCFCE7;
  border-color: #22C55E;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.22);
}

.sb-client-wa-logo {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
  animation: waLogoBob 2.8s ease-in-out infinite alternate;
}

@keyframes waLogoBob {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-2px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.sb-client-wa-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22C55E;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 6px #22C55E;
  animation: waPulseDot 1.6s infinite ease-in-out;
}

@keyframes waPulseDot {
  0%   { transform: scale(0.9); opacity: 0.8; }
  50%  { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #22C55E; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.sb-client-wa-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.sb-client-wa-anim-text {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-block;
  background: linear-gradient(90deg, #059669 0%, #10B981 40%, #047857 70%, #059669 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: waTextShimmer 2.6s ease-in-out infinite alternate;
}

@keyframes waTextShimmer {
  0%   { background-position: 0% 50%; transform: translateX(0); }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; transform: translateX(1px); }
}

.sb-client-wa-number {
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  color: #065F46;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.sb-uk-tag {
  display: inline-block;
  padding: 1px 4px;
  background: #E2E8F0;
  color: #0F172A;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.sb-login-actions-wrap .sb-auth-btn {
  margin-top: 0 !important;
  flex: 1;
}

/* =============================================================================
   OUR ADVISORY PROFESSIONALS — CTA BUTTON & BEING CONSTRUCTED PAGE
   ============================================================================= */
.sb-advisory-wrapper {
  margin-top: clamp(32px, 4vw, 44px);
  margin-bottom: clamp(36px, 4.5vw, 52px);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.sb-advisory-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
  color: var(--text-heading, #0F172A) !important;
  font-family: var(--font-heading, sans-serif) !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.12), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sb-advisory-cta-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  border-color: var(--brand-blue-vibrant, #2563EB) !important;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  color: var(--brand-blue-vibrant, #2563EB) !important;
}

.sb-advisory-cta-btn svg {
  transition: transform 0.3s ease;
}

.sb-advisory-cta-btn:hover svg.sb-advisory-arrow {
  transform: translateX(4px);
}

/* Being Constructed Page Styling */
.sb-construction-page {
  background: #090E1A;
  color: #F8FAFC;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.sb-const-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 14, 26, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sb-const-main {
  flex: 1;
  padding: clamp(48px, 7vw, 84px) 20px clamp(60px, 8vw, 96px);
  display: flex;
  align-items: center;
}

.sb-const-badge-wrap {
  margin-bottom: 20px;
}

.sb-const-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  color: #FBBF24;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.sb-const-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  animation: waPulseDot 1.5s infinite ease-in-out;
}

.sb-const-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0 0 14px;
}

.sb-const-subtitle {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #60A5FA;
  margin: 0 0 18px;
}

.sb-const-desc {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: #94A3B8;
  max-width: 66ch;
  margin: 0 auto clamp(36px, 5vw, 48px);
}

/* Animated Blueprint Stage */
.sb-const-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 48px);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(37, 99, 235, 0.15);
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 36px);
}

.sb-const-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.sb-const-scanner {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #38BDF8 50%, transparent 100%);
  box-shadow: 0 0 14px #38BDF8;
  animation: sbConstScan 3.6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes sbConstScan {
  0%   { top: 0%; opacity: 0.3; }
  50%  { opacity: 1; }
  100% { top: 98%; opacity: 0.3; }
}

.sb-const-hub {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-const-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(59, 130, 246, 0.4);
}

.sb-const-ring--1 {
  width: 110px;
  height: 110px;
  animation: svcsSpin 16s linear infinite;
}

.sb-const-ring--2 {
  width: 84px;
  height: 84px;
  border-color: rgba(16, 185, 129, 0.4);
  border-style: dotted;
  animation: svcsSpinR 12s linear infinite;
}

.sb-const-center-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
  animation: sbAiFloatBadge 3.8s ease-in-out infinite;
}

.sb-const-progress-box {
  max-width: 520px;
  margin: 0 auto;
}

.sb-const-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #CBD5E1;
  margin-bottom: 8px;
}

.sb-const-percent {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: #34D399;
}

.sb-const-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
}

.sb-const-progress-fill {
  width: 85%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB 0%, #38BDF8 60%, #10B981 100%);
  box-shadow: 0 0 12px #38BDF8;
  animation: sbProgressPulse 2.8s ease-in-out infinite alternate;
}

@keyframes sbProgressPulse {
  0%   { opacity: 0.85; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1.25); }
}

/* 3 Pillars */
.sb-const-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: clamp(32px, 4vw, 44px);
  text-align: left;
}

.sb-const-pcard {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px 20px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.sb-const-pcard:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.sb-const-pcard__ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.18);
  color: #60A5FA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.sb-const-pcard__ic svg {
  width: 22px;
  height: 22px;
}

.sb-const-pcard h3 {
  font-family: var(--font-heading, sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.sb-const-pcard p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #94A3B8;
  margin: 0 0 14px;
}

.sb-const-pcard__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  color: #FBBF24;
}

.dot-amber {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 6px #F59E0B;
  display: inline-block;
}

/* Notice box */
.sb-const-notice {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  margin-bottom: clamp(32px, 4vw, 44px);
}

.sb-const-notice__ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.2);
  color: #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-const-notice__txt {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #CBD5E1;
}

.sb-const-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sb-const-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 14, 26, 0.9);
  position: relative;
  z-index: 10;
}

@media (max-width: 768px) {
  .sb-const-pillars {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   FINAL POLISH MOBILE-FIRST RESPONSIVE OVERRIDES (2026/2027 ENTERPRISE STANDARD)
   ============================================================================= */
html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
  position: relative !important;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
video,
canvas,
svg {
  max-width: 100% !important;
  height: auto;
}

/* Universal Touch Target Dimensions (>= 44x44px) */
button:not(.hamburger-toggle),
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-pill,
.back-to-top-btn,
.mobile-nav-links a,
.sb-signin-btn,
.portal-tab-btn,
.tab-btn {
  min-height: 44px !important;
  min-width: 44px !important;
  touch-action: manipulation;
}

.hamburger-toggle {
  display: none !important;
}

/* Mobile Form Inputs (Prevents iOS Safari auto-zoom) */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .form-input,
  .sb-input,
  .sb-select,
  .sb-textarea {
    font-size: 16px !important;
    min-height: 46px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .checkbox-label,
  .radio-label,
  .form-check-label {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .navbar-inner {
    padding: 0 4px !important;
  }

  .hamburger-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* Small Screens (<= 480px down to 320px) */
@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Full Width Buttons */
  .btn,
  .btn-lg {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Single Column Form Rows */
  .form-row-2col,
  .form-row-grid,
  .sb-form-row--2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 5 Accreditation Logos (Clean 2-Col + Wide Banner) */
  .footer-accred-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .footer-accred-item {
    height: 52px !important;
    padding: 6px 10px !important;
  }

  .footer-accred-item--wide {
    height: 50px !important;
    padding: 6px 14px !important;
  }

  .footer-accred-item img,
  .footer-accred-item svg {
    max-height: 38px !important;
  }

  .footer-accred-item--wide img,
  .footer-accred-item--wide svg {
    max-height: 32px !important;
  }

  /* Wordmark & Flying Bird Responsive Scaling */
  .ftr__word,
  .sb-footer-wordmark {
    font-size: clamp(2rem, 8.8vw, 4.2rem) !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
  }

  .sb-footer-wordmark__glow {
    width: 60% !important;
    height: 70px !important;
  }

  .sb-wordmark-bird-flyer {
    width: clamp(22px, 3.8vw, 36px) !important;
    height: clamp(18px, 3.2vw, 32px) !important;
  }
}

@media (max-width: 360px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar-logo-wrap img {
    max-width: 115px !important;
  }

  .footer-accred-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .footer-accred-item {
    height: 48px !important;
    padding: 4px 8px !important;
  }

  .footer-accred-item--wide {
    height: 46px !important;
    padding: 4px 10px !important;
  }

  .footer-accred-item img,
  .footer-accred-item svg {
    max-height: 34px !important;
  }

  .footer-accred-item--wide img,
  .footer-accred-item--wide svg {
    max-height: 28px !important;
  }
}

/* =============================================================================
   HOW IT RUNS PIPELINE (.svc-flow / .svc-steps) MOBILE PERFECTION
   ============================================================================= */
@media (max-width: 900px) {
  .svc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 32px !important;
    column-gap: 20px !important;
  }
  .svc-step:nth-child(2n) .svc-step__link {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .svc-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 32px !important;
  }

  .svc-step {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-items: start !important;
    text-align: left !important;
    padding-bottom: 26px !important;
    position: relative !important;
  }

  .svc-step:last-child {
    padding-bottom: 0 !important;
  }

  .svc-step__tile {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    margin: 0 !important;
  }

  .svc-step__tile svg {
    width: 22px !important;
    height: 22px !important;
  }

  .svc-step__no {
    width: 22px !important;
    height: 22px !important;
    top: -7px !important;
    left: -7px !important;
  }

  .svc-step > b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #FFFFFF !important;
  }

  .svc-step > span:not([class]) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .svc-step__link {
    top: 56px !important;
    left: 25px !important;
    width: 2px !important;
    height: calc(100% - 56px) !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .svc-step:last-child .svc-step__link {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .svc-step {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  .svc-step__tile {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .svc-step__tile svg {
    width: 20px !important;
    height: 20px !important;
  }

  .svc-step__link {
    left: 21px !important;
    top: 48px !important;
    height: calc(100% - 48px) !important;
  }
}

/* =============================================================================
   CONTACT & FREELANCER APPLICATION DUAL-TAB SYSTEM
   ============================================================================= */
.cpage-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #F1F5F9;
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid var(--border-main, #E2E8F0);
}

.cpage-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-muted, #64748B);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 44px;
}

.cpage-tab-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.cpage-tab-btn:hover {
  color: var(--text-heading, #0F172A);
  background: rgba(255, 255, 255, 0.6);
}

.cpage-tab-btn.is-active {
  background: #FFFFFF;
  color: var(--brand-blue-vibrant, #2563EB);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.cpage-tab-btn--freelancer.is-active {
  color: var(--brand-emerald-dark, #059669);
}

/* CV Drag & Drop Upload Zone */
.cpage-cv-uploader {
  position: relative;
  border: 2px dashed #CBD5E1;
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  background: #F8FAFC;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cpage-cv-uploader:hover,
.cpage-cv-uploader.is-dragover {
  border-color: var(--brand-blue-vibrant, #2563EB);
  background: #EFF6FF;
}

.cpage-cv-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

.cpage-cv-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-blue-vibrant, #2563EB);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}

.cpage-cv-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-heading, #0F172A);
  margin-bottom: 4px;
}

.cpage-cv-hint {
  font-size: 0.78rem;
  color: var(--text-muted, #64748B);
}

.cpage-cv-selected-name {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-blue-vibrant, #2563EB);
  display: none;
}

/* Compliance Badges Checkbox Grid */
.cpage-checks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.cpage-check-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid var(--border-main, #E2E8F0);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-heading, #0F172A);
  transition: all 0.2s ease;
}

.cpage-check-pill:hover {
  border-color: var(--brand-blue-vibrant, #2563EB);
  background: #EFF6FF;
}

.cpage-check-pill input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand-blue-vibrant, #2563EB);
  cursor: pointer;
}

@media (max-width: 560px) {
  .cpage-tabs {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cpage-checks-grid {
    grid-template-columns: 1fr;
  }
}

/* Enhanced High-Conversion Submit Buttons */
.cpage-submit-btn {
  width: 100% !important;
  min-height: 52px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.cpage-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.45) !important;
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
}

.cpage-submit-btn--freelancer {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35) !important;
}

.cpage-submit-btn--freelancer:hover {
  background: linear-gradient(135deg, #047857 0%, #065F46 100%) !important;
  box-shadow: 0 6px 22px rgba(5, 150, 105, 0.45) !important;
}

.cpage-form__sublink {
  text-align: center;
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-muted, #64748B);
}

.cpage-form__sublink a {
  color: var(--brand-blue-vibrant, #2563EB);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}

.cpage-form__sublink a:hover {
  text-decoration: underline;
}

/* 20% Dimension Reduction for Footer Logo Wordmark */
.footer-brand-logo,
.site-footer .sb-logo img,
.site-footer .footer-brand-logo-bird {
  height: 33px !important;
  max-height: 33px !important;
  width: auto !important;
}

/* =============================================================================
   OFFICIAL CORPORATE & ICO COMPLIANCE DISCLOSURE CARDS
   ============================================================================= */
.footer-compliance-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
  margin-bottom: 28px;
  padding-top: 0;
  border-top: none !important;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-compliance-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.footer-compliance-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(96, 165, 250, 0.3);
  transform: translateY(-2px);
}

.footer-compliance-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.footer-compliance-card__content {
  flex: 1;
}

.footer-compliance-card__tag {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93C5FD;
  margin-bottom: 4px;
}

.footer-compliance-card p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.footer-compliance-card strong {
  color: #FFFFFF;
  font-weight: 700;
}

@media (max-width: 860px) {
  .footer-compliance-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}