/* ============================================================================
   THE COGENT  -  v3 design system  ("Dark & Gradient", 2026-10)
   ----------------------------------------------------------------------------
   Violet-tinted near-black canvas, off-white ink, and the Cogent brand
   gradient (#383070 -> #E34576 -> #F29C48) as the signature: CTAs, stat
   tiles, gradient-bordered cards, headline emphasis, dividers and glows.
   Type: Outfit (display) + Plus Jakarta Sans (text), self-hosted variable fonts.

   Load order on every page:
     bootstrap.min.css  ->  legacy-light.css (tokenised style.css)  ->  this file
   Content, links, URLs and meta are never touched by this file.

   Shape system (documented, used everywhere):
     buttons / chips / pills  -> full pill  (--r-pill)
     cards / panels / media   -> --r-lg (20px), large panels --r-xl (28px)
     inputs                   -> --r-sm (12px)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. FONTS (self-hosted, variable, latin subset)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/fonts/Outfit-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/fonts/PlusJakartaSans-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("/fonts/PlusJakartaSans-italic.woff2") format("woff2"); }

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --paper:     #08080F;          /* page canvas, violet-tinted near-black */
  --surface:   #11111B;          /* cards, panels */
  --surface-2: #181826;          /* raised tiles, inputs */
  --surface-3: #222234;
  --line:   rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --line-3: rgba(255,255,255,.22);

  --ink:   #F6F5FB;              /* headings, primary text */
  --ink-2: #B9B8CC;              /* body text            (AA on surface: 9.8:1) */
  --ink-3: #8A89A0;              /* muted / captions     (AA on surface: 5.6:1) */
  --ink-rgb: 246,245,251;

  /* Brand */
  --purple: #383070;
  --violet: #7C6CF0;
  --pink:   #E34576;
  --orange: #F29C48;
  --accent: #F2628F;             /* solid pink for links on dark (AA 5.9:1) */
  --grad:      linear-gradient(95deg, #383070 0%, #E34576 52%, #F29C48 100%);   /* the brand gradient */
  --grad-2:    linear-gradient(95deg, #5B4FB0 0%, #E8517F 50%, #F7A23B 100%);   /* brighter, for buttons + tiles */
  --grad-text: linear-gradient(95deg, #9A8BFF 0%, #F0568A 48%, #F9A84F 100%);   /* lifted for text on dark */
  --grad-line: linear-gradient(90deg, rgba(124,108,240,.0), rgba(124,108,240,.7) 20%, rgba(227,69,118,.9) 50%, rgba(242,156,72,.7) 80%, rgba(242,156,72,0));
  --grad-soft: linear-gradient(135deg, rgba(91,79,176,.16), rgba(227,69,118,.12) 50%, rgba(242,156,72,.10));
  --grad-border: linear-gradient(135deg, rgba(124,108,240,.65), rgba(227,69,118,.55) 50%, rgba(242,156,72,.55));

  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --font-head: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t1: 160ms; --t2: 260ms; --t3: 480ms;

  /* deep shadows + brand glow */
  --sh-xs: 0 1px 2px rgba(0,0,0,.3);
  --sh-sm: 0 4px 14px -4px rgba(0,0,0,.45);
  --sh:    0 24px 50px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02);
  --sh-lg: 0 40px 90px -30px rgba(0,0,0,.8);
  --glow:  0 18px 46px -14px rgba(227,69,118,.55);
  --glow-lg: 0 28px 70px -20px rgba(227,69,118,.6);

  /* tokens consumed by CSS/legacy-light.css (the tokenised old stylesheet) */
  --lg-ink: var(--ink);
  --lg-ink-2: var(--ink-2);
  --lg-ink-rgb: var(--ink-rgb);
  --lg-paper-rgb: 8,8,15;
  --lg-surface: var(--surface);
  --lg-surface-2: var(--surface-2);
  --lg-line: var(--line-2);

  /* Bootstrap 5.3 variables -> light theme */
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink-2);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--line-2);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #FF8FB1;
}

/* ----------------------------------------------------------------------------
   1b. GLOBAL FONT  (old CSS sets Poppins on ~490 selectors; force the system,
       exempting icon fonts so glyphs keep rendering)
   -------------------------------------------------------------------------- */
/* Display elements (headings + their children, button-like classes) are excluded from the
   body-font sweep, then get the display font. The sweep's :not() chain is very specific, so
   anything it matches can't be overridden by a simple heading rule - hence the exclusion. */
body, body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not([class^="bi-"]):not([class*=" bi-"]):not(ion-icon):not(.material-icons):not(.material-symbols-outlined):not(:is(h1, h2, h3, h4, h5, h6, .v3-display, .header-btns, .hover-btn, .hero-btn, .purecounter, .accordion-button, [id="btnsubmits"])):not(:is(h1, h2, h3, h4, h5, h6, .v3-display, .header-btns, .hover-btn, .hero-btn, .accordion-button) *) {
  font-family: var(--font-body) !important;
}
:is(h1, h2, h3, h4, h5, .v3-display, .navbar-brand, .header-btns, .hover-btn, .hero-btn, .purecounter, .accordion-button, [id="btnsubmits"]),
:is(h1, h2, h3, h4, h5, h6, .v3-display, .header-btns, .hover-btn, .hero-btn, .accordion-button) *:not(i):not([class^="fa-"]):not([class*=" fa-"]):not([class^="bi-"]):not([class*=" bi-"]) {
  font-family: var(--font-head) !important;
}
h6, main h6 { font-family: var(--font-body) !important; }
i.fa, i.fas, i.far, i.fab, i.fal, i.fad,
[class^="fa-"], [class*=" fa-"], .fa, .fas, .far, .fab,
[class^="bi-"], [class*=" bi-"], ion-icon,
.material-icons, .material-symbols-outlined { font-family: inherit; }
.swiper-button-next::after, .swiper-button-prev::after { font-family: swiper-icons !important; }
.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free","FontAwesome" !important; font-weight: 900 !important; }
.far, .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; }
.fa-whatsapp, .fa-phone-alt, .fa-phone { font-family: "Font Awesome 6 Free","Font Awesome 6 Brands","FontAwesome" !important; }
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: "bootstrap-icons" !important; }

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
html, body { width: 100%; max-width: 100%; }
body {
  background: var(--paper) !important;
  color: var(--ink-2);
  font-size: 1rem; line-height: 1.7; letter-spacing: -.003em;
  margin: 0; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
main, footer, nav { position: relative; z-index: 1; }
p { margin-bottom: 0 !important; color: var(--ink-2); text-wrap: pretty; }
p, li, a, span, label, input, textarea, select, td { letter-spacing: 0 !important; word-spacing: .02em; }
li { text-wrap: pretty; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; transition: color var(--t2) var(--ease); }
a:hover { color: #FF8FB1; }
main nav { background: transparent !important; }   /* legacy `nav {background … !important}` must only hit the site header */
strong, b { color: var(--ink); font-weight: 700; }
.cursor, .cursor2 { display: none !important; }
::selection { background: rgba(227,69,118,.35); color: #fff; }
/* ambient aurora behind the whole page (fixed, non-interactive, no repaint on scroll) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% -5%, rgba(91,79,176,.20), transparent 70%),
    radial-gradient(45% 35% at 95% 0%, rgba(227,69,118,.13), transparent 70%),
    radial-gradient(50% 40% at 50% 110%, rgba(242,156,72,.07), transparent 70%);
}
hr { border: 0; height: 1px; background: var(--line-2); opacity: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
input, select, textarea, button { accent-color: var(--pink); }

main > .container, main > section > .container, main section > .container { max-width: var(--maxw); }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head); color: var(--ink); margin: 0;
  line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; font-weight: 700;
}
main h1, .hero h1 {
  font-weight: 700; font-size: clamp(2.3rem, 1.35rem + 3.2vw, 4.25rem);
  line-height: 1.04; letter-spacing: -.035em; color: var(--ink) !important; text-shadow: none !important;
}
main h2 { font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.85rem); letter-spacing: -.03em; line-height: 1.08; }
main h3 { font-weight: 600; font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); letter-spacing: -.015em; line-height: 1.25; }
main h4 { font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
main h5 { font-weight: 600; font-size: 1.05rem; }
main h6 { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--ink-2); letter-spacing: 0; }

/* brand gradient on the <span> the copy already uses for emphasis */
main h1 span, main h2 span, main h3 span, .hero h1 .hero-grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: .06em;
}
main h1 span *, main h2 span *, main h3 span * { -webkit-text-fill-color: inherit; }

main ul:not([class]) li::marker, main ol:not([class]) li::marker { color: var(--pink); }

/* ----------------------------------------------------------------------------
   4. NAVBAR  (white glass, 68px, one line on desktop)
   -------------------------------------------------------------------------- */
.navbar {
  background: rgba(8,8,15,.66) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid var(--line); padding: 0 !important;
  position: sticky; top: 0; z-index: 1030;
}
/* some pages wrap the nav include in <header>; let the navbar stick to the page, not the wrapper */
body > header:has(> .navbar), body > header:has(> nav) { display: contents; }
.navbar > .container { max-width: var(--maxw); display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; flex-wrap: nowrap; }
.navbar-brand { margin: 0; padding: 0; display: inline-flex; align-items: center; }
.navbar-brand img { height: 34px; width: auto; }
/* gradient hairline under the header */
.navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad-line); opacity: .55; pointer-events: none; }
.navbar-collapse { flex: 1 1 auto; }
.navbar .navbar-nav { margin: 0 auto !important; display: flex; align-items: center; gap: clamp(.1rem,.6vw,.45rem); flex-wrap: nowrap; }
.navbar .nav-item { padding: 0 !important; }
.navbar .nav-link {
  display: inline-flex; align-items: center; white-space: nowrap !important;
  color: var(--ink-2) !important; font-size: .93rem; font-weight: 500;
  padding: .5rem .8rem !important; border-radius: var(--r-pill);
  transition: color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.navbar .nav-link:hover, .navbar .nav-link:focus-visible, .navbar .nav-link.show { color: var(--ink) !important; background: var(--surface-2); }
.navbar .nav-link.active { color: var(--ink-2) !important; }
.navbar .dropdown-toggle::after { border: 0; width: .45em; height: .45em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.navbar .dropdown-menu {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: .45rem; margin-top: .55rem !important; min-width: 264px;
}
.navbar .dropdown-item { color: var(--ink-2); border-radius: 10px; padding: .6rem .85rem; font-size: .92rem; font-weight: 500; white-space: normal; transition: background var(--t1) var(--ease), color var(--t1) var(--ease); }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { color: var(--ink) !important; background: var(--surface-2) !important; }
.navbar-toggler { background: var(--surface) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-pill); padding: .5rem .7rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(227,69,118,.25); }
.navbar-toggler-icon { width: 1.25em; height: 1.25em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F6F5FB' stroke-width='2.2' stroke-linecap='round' d='M5 10h20M5 20h20'/%3E%3C/svg%3E") !important; }

/* header call CTA - gradient pill */
.navbar > .container > .d-lg-block { flex: 0 0 auto; }
.header-btns {
  background: var(--grad-2) !important; border: none; border-radius: var(--r-pill);
  padding: .62rem 1.2rem !important; box-shadow: var(--glow);
  transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease), filter var(--t2) var(--ease);
}
.header-btns a { color: #fff !important; font-weight: 600; font-size: .9rem; white-space: nowrap; letter-spacing: .005em; }
.header-btns:hover { transform: translateY(-1px); box-shadow: var(--glow-lg); filter: brightness(1.08); }
.header-btns:active { transform: scale(.97); }

@media (max-width: 991.98px) {
  .navbar > .container { flex-wrap: wrap; min-height: 62px; }
  .navbar-collapse { flex-basis: 100%; }
  .navbar .navbar-nav { gap: .15rem; align-items: stretch; padding: .5rem 0 1rem; }
  .navbar .nav-link { width: 100%; border-radius: var(--r-sm); padding: .75rem .9rem !important; font-size: 1rem; }
  .navbar .dropdown-menu { min-width: 0; width: 100%; box-shadow: none; border: 0; background: var(--surface-2); margin-top: .2rem !important; }
}

/* ----------------------------------------------------------------------------
   5. BUTTONS  (one system: gradient primary, glass outline secondary, both pills)
   -------------------------------------------------------------------------- */
.hover-btn, .counts button, .hero-btn--primary, .home-healthcare .hover-btn,
main .btn-primary, .clients-hero .hero-btn--primary {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head) !important; font-weight: 600; font-size: 1rem; letter-spacing: .005em;
  border: none; cursor: pointer; white-space: nowrap;
  background: var(--grad-2) !important; color: #fff !important; border-radius: var(--r-pill);
  padding: .95rem 1.75rem; box-shadow: var(--glow);
  transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
/* light sweep across the gradient on hover */
.hover-btn::after, .counts button::after, .hero-btn--primary::after, main .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%) -120% 0 / 220% 100% no-repeat, var(--grad-2);
  opacity: 0; transition: opacity var(--t2) var(--ease), background-position .7s var(--ease);
}
.hover-btn:hover, .counts button:hover, .hero-btn--primary:hover, main .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-lg); color: #fff !important; }
.hover-btn:hover::after, .counts button:hover::after, .hero-btn--primary:hover::after, main .btn-primary:hover::after { background-position: 120% 0, 0 0; }
.hover-btn:hover::after, .counts button:hover::after, .hero-btn--primary:hover::after, main .btn-primary:hover::after { opacity: 1; }
.hover-btn:active, .counts button:active, .hero-btn--primary:active, main .btn-primary:active { transform: translateY(0) scale(.98); }
.hover-btn::before { display: none !important; }
.counts button a, .hover-btn a, .hover-btn { color: #fff !important; }

.hero-btn--ghost, .hc-viewall, main .btn-outline-primary, main .btn-outline-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  font-family: var(--font-head) !important; font-weight: 600; font-size: 1rem;
  color: var(--ink) !important; background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line-3) !important; border-radius: var(--r-pill);
  padding: .95rem 1.6rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color var(--t2) var(--ease), transform var(--t1) var(--ease), background var(--t2) var(--ease);
}
.hero-btn--ghost:hover, .hc-viewall:hover, main .btn-outline-primary:hover, main .btn-outline-dark:hover { border-color: var(--accent) !important; background: rgba(227,69,118,.08) !important; transform: translateY(-2px); color: var(--ink) !important; }

/* gradient-border utility look, shared by featured cards (padding-box / border-box trick) */
.col-box:hover, .hc-card:hover, .post-slide:hover, .testimonial .t-link:hover, .home-ready .col-boxe:hover {
  border-color: transparent !important;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box !important;
}

/* ----------------------------------------------------------------------------
   6. HERO (home)  - asymmetric split, headline left, framed photo right
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(2.5rem,5vw,4.75rem) 0 clamp(1.5rem,3vw,2.5rem); isolation: isolate; overflow: clip; }
.hero > .container { width: 100%; max-width: var(--maxw); }   /* same gutters as the navbar and every other section */
/* the single brand glow on the page */
.hero::before {
  content: ""; position: absolute; z-index: -1; width: min(860px, 95vw); aspect-ratio: 1; right: -14%; top: -32%;
  background: radial-gradient(closest-side, rgba(227,69,118,.30), rgba(242,156,72,.14) 42%, rgba(91,79,176,.16) 68%, transparent);
  filter: blur(24px); pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: clamp(2rem,5vw,4.5rem); }
.hero-copy, .hero-copy h1, .hero-copy .hero-sub { text-align: left !important; min-width: 0; }
.hero-copy h1, .hero-copy .hero-sub { margin-inline: 0 !important; }

.hero-timecode {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .4rem .95rem .4rem .45rem; margin-bottom: 1.6rem; box-shadow: var(--sh-xs);
}
.hero-timecode .tc-rec { display: inline-flex; align-items: center; color: #fff; background: var(--grad-2); border-radius: var(--r-pill); padding: .2rem .7rem; font-weight: 600; }
.hero-timecode .tc-dot { color: var(--ink-3); }
.hero-timecode span:not(.tc-rec):not(.tc-dot) { color: var(--ink-2); }
.hero-kicker { display: none; }

.hero-copy h1 { margin: 0; max-width: 15ch; }
.hero-sub { margin-top: 1.4rem; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }
.hero-btn { font-size: 1rem; }

.hero-visual { position: relative; min-height: clamp(360px, 38vw, 500px); }
.hero-card { position: absolute; overflow: hidden; background: var(--surface-2); border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.hero-card--1 { padding: 1px; background: var(--grad-border); }
.hero-card--1 img { border-radius: calc(var(--r-xl) - 1px); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.hero-card--1 { width: 86%; height: 84%; right: 0; top: 0; z-index: 1; }
.hero-card--2 { width: 44%; height: 42%; left: 0; bottom: 0; z-index: 2; border: 6px solid var(--paper); border-radius: calc(var(--r-xl) + 6px); }
.hero-visual:hover .hero-card--1 img { transform: scale(1.04); }
.hero-chip {
  position: absolute; z-index: 4; display: flex; align-items: baseline; gap: .55rem;
  background: rgba(17,17,27,.72); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line-2); border-radius: var(--r-md); padding: .75rem 1.05rem; box-shadow: var(--sh), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-chip strong { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-chip span { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.hero-chip--a { top: 8%; left: 2%; }

@media (max-width: 991.98px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 18ch; }
  .hero-visual { min-height: 0; aspect-ratio: 4 / 3.2; width: 100%; max-width: 620px; }
}
@media (max-width: 575.98px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .hero-btn { width: 100%; }
  .hero-card--2 { border-width: 4px; }
}

/* ----------------------------------------------------------------------------
   7. TRUST / RATINGS STRIP
   -------------------------------------------------------------------------- */
.trust-strip { padding: clamp(1rem,2vw,1.75rem) 0 clamp(.5rem,1vw,1rem); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .75rem; }
.trust-row > a { color: inherit; display: flex; }
.trust-badge {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .55rem 1.15rem .55rem .6rem; box-shadow: var(--sh-xs);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
a:hover > .trust-badge { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: var(--line-2); }
.trust-logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; background: var(--surface-2); border-radius: 50%; color: var(--ink); }
.trust-meta { display: flex; flex-direction: column; line-height: 1.15; }
.trust-name { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink); }
.trust-stars { display: inline-flex; gap: 1px; margin-top: 3px; font-size: .72rem; color: #F7A23B; }
.trust-logo { background: #fff; }
.trust-score { display: inline-flex; align-items: baseline; gap: .2rem; margin-left: .2rem; padding-left: .8rem; border-left: 1px solid var(--line-2); }
.trust-score strong { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.trust-score span { font-size: .75rem; color: var(--ink-3); }
@media (max-width: 575.98px) { .trust-row > a, .trust-row > .trust-badge { flex: 1 1 100%; } .trust-badge { width: 100%; } }

/* ----------------------------------------------------------------------------
   8. SUCCESS HIGHLIGHTS  (.counts) - bento: copy panel + 4 varied stat tiles
   -------------------------------------------------------------------------- */
.counts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.75rem,4vw,3.25rem); box-shadow: var(--sh); }
.counts h2 { margin-bottom: 1.1rem; }
.counts p { color: var(--ink-2); margin-bottom: .9rem !important; max-width: 52ch; }
.counts .col-lg-7 > .row { --bs-gutter-x: .9rem; --bs-gutter-y: .9rem; row-gap: .9rem; }
.count-box {
  width: 100%; background: var(--surface-2); border: 0; border-radius: var(--r-lg);
  padding: clamp(1.4rem,2.5vw,2rem) 1.25rem; text-align: left; min-height: 150px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform var(--t2) var(--ease);
}
.count-box > .d-flex { justify-content: flex-start !important; }
.count-box .purecounter, .count-box h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem,1.6rem+1.8vw,3.4rem); letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.count-box h6, .count-box h6 b { color: var(--ink-2); margin-top: .6rem; font-weight: 600; font-size: .92rem; text-align: left !important; width: 100%; }
.counts button { font-size: 1rem !important; padding: .95rem 1.75rem !important; }
.counts button a { font-size: 1rem !important; }
/* tile variety: solid brand gradient, gradient-border tiles, gradient numerals */
.counts .col-lg-7 .row > :nth-child(1) .count-box { background: var(--grad-2); box-shadow: var(--glow); }
.counts .col-lg-7 .row > :nth-child(1) .count-box :is(.purecounter, h3, h6, h6 b) { color: #fff !important; -webkit-text-fill-color: #fff; }
.counts .col-lg-7 .row > :not(:nth-child(1)) .count-box { border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-border) border-box; }
.counts .col-lg-7 .row > :not(:nth-child(1)) .count-box :is(.purecounter, h3) { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.counts .col-lg-7 .row > :nth-child(4) .count-box { background: linear-gradient(160deg, rgba(91,79,176,.35), rgba(17,17,27,.9) 60%) padding-box, var(--grad-border) border-box; }
.count-box:hover { transform: translateY(-3px); }
@media (max-width: 991.98px) { .counts .col-lg-7 { margin-top: 1.5rem; } }

/* ----------------------------------------------------------------------------
   9. SERVICE CARDS  (.home-service-content / .col-box)
   -------------------------------------------------------------------------- */
.home-service-content { padding-block: var(--section-y); }
.home-service-content .row:first-child { margin-bottom: clamp(2rem,4vw,3.25rem); }
.home-service-content .row:first-child .col-12 { text-align: center !important; }
.home-service-content .row:first-child h2 { max-width: 22ch; margin-inline: auto; }
.home-service-content .row:first-child p { color: var(--ink-2); max-width: 62ch; margin-inline: auto; margin-top: 1.1rem; }
.home-service-content .container .row > .col-12 > h6 {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem; background: rgba(227,69,118,.08); padding: .3rem .8rem; border-radius: var(--r-pill);
}
.col-box {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0; height: 100%; overflow: hidden; box-shadow: var(--sh-xs);
  transition: transform var(--t3) var(--ease), box-shadow var(--t3) var(--ease), border-color var(--t3) var(--ease);
}
.col-box:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--line-2); }
.col-box img { border-radius: 0; margin: 0 0 1.25rem; width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform var(--t3) var(--ease); }
.col-box:hover img { transform: scale(1.04); }
.col-box h3 { margin: 0 1.4rem .55rem; color: var(--ink); }
.col-box p { color: var(--ink-2); font-size: .95rem; margin: 0 1.4rem 1.5rem !important; }
.col-box p a { color: var(--accent) !important; font-weight: 600; }
.hori hr, main hr { border: 0; height: 1px; width: 100%; background: var(--line-2); opacity: 1; margin-block: 2rem; }

/* ----------------------------------------------------------------------------
   10. BRAND WALL  (.home-trust)  - the page's single marquee
   -------------------------------------------------------------------------- */
.home-trust { padding-block: var(--section-y); overflow: hidden; }
.brands-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(2rem,4vw,3rem); }
.brands-eyebrow, .home-cases .hc-eyebrow, .clients-hero .brands-eyebrow {
  display: inline-flex; align-items: center; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: rgba(227,69,118,.1); padding: .3rem .8rem; border-radius: var(--r-pill); margin-bottom: .9rem;
}
.brands-head h2 { margin-bottom: .75rem; }
.brands-head p { color: var(--ink-3); font-size: 1.02rem; }
.brand-wall { display: flex; flex-direction: column; gap: .9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-lane { overflow: hidden; display: flex; }
.brand-track { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; width: max-content; will-change: transform; }
.brand-track--l1 { animation: brand-left 60s linear infinite; }
.brand-track--r2 { animation: brand-right 72s linear infinite; }
.brand-track--l3 { animation: brand-left 66s linear infinite; }
.brand-wall:hover .brand-track { animation-play-state: paused; }
@keyframes brand-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes brand-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.brand-item {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 172px; height: 92px; padding: 16px 22px; background: #FFFFFF; /* logos come in every colour: keep a white chip */
  border: 1px solid var(--line); border-radius: var(--r-md); transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.brand-item img { max-width: 100%; max-height: 100%; width: auto !important; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .8; transition: filter var(--t2) var(--ease), opacity var(--t2) var(--ease); }
.brand-item:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.brand-item:hover img { filter: none; opacity: 1; }
.brand-wall-cta { text-align: center; margin-top: clamp(1.75rem,3vw,2.5rem); }
@media (max-width: 575.98px) { .brand-item { width: 132px; height: 76px; padding: 12px 16px; } }

/* ----------------------------------------------------------------------------
   11. INDUSTRIES  (.home-healthcare carousel)
   -------------------------------------------------------------------------- */
.home-healthcare { padding-block: var(--section-y); }
.home-healthcare .row { align-items: center; }
.home-healthcare .col-md-4 { justify-content: center !important; }
.home-healthcare h2 { margin-bottom: .2rem; }
.home-healthcare .col-md-4 .hover-btn { margin-top: 1.75rem !important; }
.home-healthcare .circle { display: none; }
.home-healthcare #home-industry .post-slide, .home-healthcare .owl-carousel .post-slide { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 .45rem !important; transform: none !important; }
.home-healthcare .owl-carousel .img-box { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.home-healthcare .owl-carousel .img-box img { width: 100% !important; height: 360px !important; object-fit: cover; display: block; border-radius: 0 !important; border: none !important; transition: transform var(--t3) var(--ease); }
.home-healthcare .owl-carousel .img-box:hover img { transform: scale(1.05); }
.home-healthcare .owl-carousel .card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(15,16,32,.82)); }
.home-healthcare .owl-carousel .card-info h3, .home-healthcare .owl-carousel .card-info h2 { color: #fff !important; font-weight: 600; font-size: 1.15rem; margin: 0; }
.owl-carousel .owl-nav { margin-top: 1.25rem; display: flex; gap: .55rem; justify-content: flex-end; }
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
  width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--surface) !important;
  border: 1px solid var(--line-2) !important; color: var(--ink) !important; display: inline-flex !important; align-items: center; justify-content: center;
  transition: background var(--t2) var(--ease), color var(--t2) var(--ease);
}
.owl-carousel .owl-nav button:hover { background: var(--grad-2) !important; border-color: transparent !important; color: #fff !important; }
/* Owl Carousel 1.3.3 (the version the site loads) uses .owl-buttons */
.owl-theme .owl-controls .owl-buttons div, .owl-carousel .owl-buttons div {
  width: 48px; height: 48px; padding: 0 !important; margin: 0 .25rem; border-radius: 50% !important; opacity: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--surface) !important; border: 1px solid var(--line-2); color: var(--ink) !important;
  transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.owl-theme .owl-controls .owl-buttons div:hover, .owl-carousel .owl-buttons div:hover { background: var(--grad-2) !important; border-color: transparent; color: #fff !important; }
.owl-theme .owl-controls .owl-page span { background: var(--line-3) !important; opacity: 1 !important; }
.owl-theme .owl-controls .owl-page.active span { background: var(--grad-2) !important; width: 22px; border-radius: 99px; }
.owl-carousel .owl-nav button img, .owl-carousel .owl-nav button svg { filter: none; }

/* ----------------------------------------------------------------------------
   12. FEATURE CARDS  (.home-ready)
   -------------------------------------------------------------------------- */
.home-ready { padding-block: var(--section-y); }
.home-ready > .container { position: relative; background: radial-gradient(80% 120% at 0% 0%, rgba(91,79,176,.22), transparent 55%), radial-gradient(70% 110% at 100% 100%, rgba(242,156,72,.12), transparent 55%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(2rem,5vw,4rem); box-shadow: var(--sh); overflow: hidden; }
.home-ready > .container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.home-ready h4 { font-weight: 700; font-size: clamp(1.6rem,1.15rem+1.6vw,2.4rem); letter-spacing: -.03em; margin-bottom: .6rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.home-ready h2 { font-size: clamp(1rem,.92rem+.4vw,1.2rem); font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-bottom: 2.25rem; }
.home-ready .box, .home-ready .col-box, .home-ready .col-boxe {
  background: rgba(255,255,255,.03) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  padding: 1.6rem 1.45rem !important; height: 100%; color: var(--ink-2) !important; box-shadow: none !important;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.home-ready .box:hover, .home-ready .col-box:hover { background: var(--surface-2) !important; border-color: var(--line-2) !important; transform: translateY(-4px); }
.home-ready .col-boxe:hover { transform: translateY(-4px); }
.home-ready .col-boxe h3 { margin-bottom: .65rem; color: var(--ink) !important; padding-top: 0 !important; }
.home-ready .col-boxe h6, .home-ready .col-boxe .read-more-text { color: var(--ink-2) !important; font-family: var(--font-body) !important; font-weight: 400; font-size: .93rem; line-height: 1.65; }
.home-ready .read-more-btn { display: inline-block; margin-top: .8rem; color: var(--accent) !important; font-weight: 600; font-size: .88rem; background: none !important; }

/* ----------------------------------------------------------------------------
   13. BLOG CARDS  (.post-slide) + Swiper
   -------------------------------------------------------------------------- */
.post-slide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; overflow: hidden; height: auto; box-shadow: var(--sh-xs); transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.post-slide:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.post-slide img { border-radius: 0; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-slide h3, .post-slide h4 { margin: 1.1rem 1.25rem .5rem; font-size: 1.1rem; color: var(--ink); }
.post-slide h3 a, .post-slide h4 a { color: var(--ink); }
.post-slide p { color: var(--ink-2); font-size: .92rem; margin: 0 1.25rem 1.25rem !important; }
.swiper-button-next, .swiper-button-prev { color: var(--ink) !important; width: 46px !important; height: 46px !important; background: var(--surface); border: 1px solid var(--line-2); border-radius: 50%; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1rem !important; font-weight: 700; }
.swiper-pagination-bullet { background: var(--line-3); opacity: 1; }
.swiper-pagination-bullet-active { background: var(--grad-2); width: 22px; border-radius: 99px; }

/* ----------------------------------------------------------------------------
   14. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonial { padding-block: var(--section-y); overflow: hidden; }
.testimonial h2 { margin-bottom: .5rem; }
.testimonial h6 { color: var(--ink-3); }
.testimonial .mySwiper { padding: 1rem .25rem; }
.testimonial .swiper-wrapper { align-items: stretch; padding-block: .5rem; }
.testimonial .content, .testimonial .swiper-slide.content { background: transparent; border: none; box-shadow: none; padding: 0; height: auto; display: flex; }
.testimonial .t-link {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem,3vw,2rem); box-shadow: var(--sh-xs); text-decoration: none;
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.testimonial .t-link:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--line-2); }
.testimonial .t-link > img:first-child, .testimonial .content > img:first-child {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin: 0 0 1.1rem; flex: 0 0 auto; display: block;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(227,69,118,.35);
}
.testimonial .text-content { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.testimonial .text-content p { color: var(--ink-2); font-size: .97rem; line-height: 1.7; padding-top: 0 !important; }
.testimonial .text-content hr { width: 100%; margin: 1.2rem 0 1rem; }
.testimonial .text-content > img { margin: 0 0 .6rem; }
.testimonial .text-content h3 { font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-top: auto; line-height: 1.35; }
.testimonial .text-content h3 span { -webkit-text-fill-color: var(--ink-3); color: var(--ink-3); background: none; font-size: .86rem; font-weight: 500; }
.testimonial .t-link::after { content: none; }

/* ----------------------------------------------------------------------------
   15. CASE STUDY TEASERS  (.home-cases)
   -------------------------------------------------------------------------- */
.home-cases { padding-block: var(--section-y); }
.home-cases h2 { margin-bottom: .75rem; }
.home-cases > .container > .row:first-child p { color: var(--ink-2); max-width: 60ch; margin: 0; }
.hc-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--sh-xs); transition: transform var(--t3) var(--ease), box-shadow var(--t3) var(--ease); }
.hc-card:hover { transform: translateY(-6px); box-shadow: var(--sh); color: var(--ink); }
.hc-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); flex: 0 0 auto; }
.hc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3) var(--ease); }
.hc-card:hover .hc-thumb img { transform: scale(1.05); }
.hc-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.hc-tag { display: inline-block; align-self: flex-start; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(227,69,118,.08); padding: .25rem .65rem; border-radius: var(--r-pill); margin-bottom: .8rem; }
.hc-card h3 { font-weight: 600; font-size: 1.12rem; line-height: 1.35; margin-bottom: .6rem; color: var(--ink); }
.hc-meta { color: var(--ink-2); font-size: .9rem; margin-bottom: 1rem; }
.hc-go { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink); }
.hc-card:hover .hc-go { color: var(--accent); }

/* ----------------------------------------------------------------------------
   16. GRADIENT CTA BAND  (.home-take) - the one full-colour moment
   -------------------------------------------------------------------------- */
.home-take { padding-block: clamp(1.5rem,3vw,2.5rem) !important; background: transparent !important; }
.home-take > .container { position: relative; overflow: hidden; background: var(--grad); border-radius: var(--r-xl); padding: clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,4vw,3rem); box-shadow: var(--glow-lg); }
.home-take > .container::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 140% at 85% 0%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.home-take .row { position: relative; }
.home-take h4 { color: #fff !important; font-weight: 700; font-size: clamp(1.4rem,1.1rem+1.2vw,2rem); letter-spacing: -.025em; margin: 0; }
.home-take button { background: #fff !important; border: 0; border-radius: var(--r-pill); padding: .9rem 1.6rem; box-shadow: var(--sh); transition: transform var(--t1) var(--ease); }
.home-take button a { color: #1A1530 !important; font-family: var(--font-head) !important; font-weight: 600; white-space: nowrap; }
.home-take button:hover { transform: translateY(-2px); }

/* ----------------------------------------------------------------------------
   17. FAQ  - quiet accordion with hairline dividers
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--section-y); }
.faq h2 { text-align: center; margin-bottom: 2.25rem; }
.faq .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line-2); max-width: 880px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: .5rem clamp(.75rem,2vw,1.5rem); box-shadow: var(--sh-xs); }
.faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
.faq .accordion-item:last-child { border-bottom: 0 !important; }
.faq .accordion-button { background: transparent; color: var(--ink); font-weight: 600; font-size: 1.05rem; line-height: 1.45; padding: 1.25rem .25rem; box-shadow: none !important; border: 0 !important; outline: 0; letter-spacing: -.01em; }
.faq h2:not(.accordion-header) { color: var(--ink) !important; }
.faq .accordion-button:not(.collapsed) { color: var(--ink); background: transparent; box-shadow: none; }
.faq .accordion-button::after { background-image: none; content: "+"; font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink); transform: none; transition: transform var(--t2) var(--ease), background var(--t2) var(--ease), color var(--t2) var(--ease); }
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); background: var(--grad-2); color: #fff; }
.faq .accordion-button:not(.collapsed) { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.faq .accordion-button:not(.collapsed)::after { -webkit-text-fill-color: #fff; }
.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq .accordion-body { color: var(--ink-2); padding: 0 .25rem 1.35rem; }

/* ----------------------------------------------------------------------------
   18. MAP
   -------------------------------------------------------------------------- */
.home-map { padding-block: var(--section-y); text-align: center; }
.home-map h2 { margin-bottom: 2rem; }
.home-map iframe, .form + section iframe { width: 100%; border: 1px solid var(--line-2) !important; border-radius: var(--r-xl) !important; box-shadow: var(--sh); filter: invert(90%) hue-rotate(180deg) saturate(.7) contrast(.92); }

/* ----------------------------------------------------------------------------
   19. FORMS + ENQUIRY POPUP
   -------------------------------------------------------------------------- */
main input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), main select, main textarea,
.popup_form input:not([type=checkbox]):not([type=radio]):not([type=submit]), .popup_form select, .popup_form textarea {
  width: 100%; background: var(--surface-2) !important; border: 1px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important; color: var(--ink) !important; font-size: 1rem; padding: .85rem 1rem;
  transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
main input::placeholder, main textarea::placeholder, .popup_form input::placeholder, .popup_form textarea::placeholder { color: var(--ink-3) !important; opacity: 1; }
main input:focus, main select:focus, main textarea:focus, .popup_form input:focus, .popup_form select:focus, .popup_form textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(227,69,118,.2) !important; }
main select option, .popup_form select option { background: var(--surface); color: var(--ink); }
main label, .popup_form label { color: var(--ink); font-weight: 600; font-size: .9rem; }

.popup_form .overlay, #overlay { position: fixed; inset: 0; z-index: 1050; background: rgba(4,4,10,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.popup_form .form-container, #formContainer {
  position: fixed; z-index: 1051; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(640px,92vw); max-height: 92vh; overflow-y: auto;
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-xl) !important;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) !important; padding: clamp(1.5rem,3vw,2.4rem) clamp(1.25rem,3vw,2.2rem) !important;
}
.popup_form .form-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--grad); }
.popup_form .close-btn, .popup_form .close-btn.btn-danger, .popup_form span.close-btn {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; min-width: 40px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--surface-2) !important; border: 0 !important; border-radius: 50% !important;
  color: transparent !important; font-size: 0 !important; line-height: 0 !important; box-shadow: none !important; cursor: pointer;
  transition: background var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.popup_form .close-btn::before { content: "\00d7" !important; font-size: 24px !important; line-height: 1 !important; font-weight: 400; color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }
.popup_form .close-btn:hover { background: var(--pink) !important; transform: rotate(90deg); }
.popup_form .close-btn:hover::before { color: #fff !important; -webkit-text-fill-color: #fff; }
.popup_form h5 { font-weight: 700; color: var(--ink); font-size: clamp(1.3rem,1.05rem+1vw,1.65rem); letter-spacing: -.025em; line-height: 1.2; margin: 0 2.75rem 1.5rem 0 !important; }
.popup_form .fields { margin-bottom: .8rem; }
.popup_form .row { --bs-gutter-x: .8rem; }
.popup_form textarea { min-height: 96px; resize: vertical; }
.popup_form .input-group, .form .box .input-group { flex-wrap: nowrap; }
.popup_form .input-group-text, .popup_form #basic-addon1, .form .box .input-group-text, .form .box #basic-addon1 {
  background: var(--surface-3) !important; border: 1px solid var(--line-2) !important; border-right: 0 !important;
  border-radius: var(--r-sm) 0 0 var(--r-sm) !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent);
  font-family: var(--font-head) !important; font-weight: 600; font-size: 1rem; padding: 0 .95rem !important; display: inline-flex; align-items: center; white-space: nowrap;
}
.popup_form .input-group .numbersOnly, .form .box .input-group .numbersOnly { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.popup_form #sum-question, .form .box #sum-question { font-family: var(--font-head) !important; font-weight: 600; color: var(--ink) !important; font-size: 1rem; }
.popup_form #btnsubmits, .form .box #btnsubmits, main button[type=submit]:not(.accordion-button) {
  width: 100%; background: var(--grad-2) !important; color: #fff !important; font-family: var(--font-head) !important; font-weight: 600; font-size: 1.02rem;
  border: none; border-radius: var(--r-pill); padding: 1rem; margin-top: .4rem; box-shadow: var(--glow);
  transition: transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease), filter var(--t2) var(--ease);
}
.popup_form #btnsubmits:hover, .form .box #btnsubmits:hover, main button[type=submit]:not(.accordion-button):hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--glow-lg); }
.popup_form #regen-sum, .form .box #regen-sum {
  width: 100%; background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-3) !important;
  border-radius: var(--r-pill); font-family: var(--font-head) !important; font-weight: 600; font-size: .9rem; padding: .8rem;
  transition: border-color var(--t2) var(--ease);
}
.popup_form #regen-sum:hover, .form .box #regen-sum:hover { border-color: var(--accent) !important; }

/* ----------------------------------------------------------------------------
   20. CONTACT PAGE  (.form / .box / .check-social)
   -------------------------------------------------------------------------- */
.form h1, .form h2, .form h3, .check-social h2, .form .box h5 { font-family: var(--font-head) !important; }
.form { padding-block: var(--section-y) !important; margin: 0 !important; }
.form .p-1, .form .p-lg-5 { padding: 0 !important; }
.form > .container > .row, .form .p-lg-5 > .row { align-items: stretch; }
.form h1 { font-size: clamp(2.3rem,1.5rem+2.6vw,3.6rem) !important; color: var(--ink) !important; letter-spacing: -.035em; margin-bottom: 1rem; }
.form > .container .col-lg-6:first-child > p, .form .p-lg-5 .col-lg-6:first-child > p { color: var(--ink-2) !important; font-size: 1.06rem; line-height: 1.7; max-width: 46ch; margin-bottom: 2rem !important; }
.form .col-lg-6:first-child .row { --bs-gutter-x: .9rem; }
.form .col-lg-6:first-child .row > [class*="col-"] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.3rem !important; margin: 0 0 .9rem 0 !important; }
.form h6 { color: var(--ink-3) !important; font-weight: 700 !important; font-size: .74rem !important; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .55rem !important; }
.form h6 img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }
.form .col-lg-6:first-child a { display: block; color: var(--ink) !important; font-size: 1rem; font-weight: 500; margin-bottom: .2rem; }
.form .col-lg-6:first-child a:hover { color: var(--accent) !important; }
.form .box { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-xl) !important; padding: clamp(1.5rem,3vw,2.5rem) !important; box-shadow: var(--sh); position: relative; overflow: hidden; }
.form .box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--grad); }
.form .box .fields { margin-bottom: .85rem; }
.form .box .row { --bs-gutter-x: .8rem; }
.form .box textarea, .form .box #floatingTextarea { min-height: 110px; resize: vertical; }
.check-social { padding-block: var(--section-y) !important; }
.check-social h2 { margin-bottom: 1.5rem; }
.check-social .d-flex a { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 50%; transition: background var(--t2) var(--ease), transform var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.check-social .d-flex a:hover { background: var(--grad-2); border-color: transparent; transform: translateY(-3px); box-shadow: var(--glow); }
.check-social .d-flex a svg { width: 22px; height: 22px; }
.check-social .d-flex a svg path { fill: var(--ink); transition: fill var(--t2) var(--ease); }
.check-social .d-flex a:hover svg path { fill: #fff; }

/* ----------------------------------------------------------------------------
   21. OUR CLIENTS PAGE
   -------------------------------------------------------------------------- */
.clients-hero { position: relative; text-align: center; padding: clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem); overflow: clip; isolation: isolate; }
.clients-hero::before { content: ""; position: absolute; z-index: -1; width: min(760px,90vw); aspect-ratio: 1; left: 50%; top: -55%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(227,69,118,.16), rgba(242,156,72,.10) 50%, transparent); filter: blur(20px); pointer-events: none; }
.clients-hero h1 { margin: 0 auto .9rem; max-width: 18ch; }
.clients-hero p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; max-width: 60ch; margin: 0 auto; }
.clients-hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.clients-grid-section { padding-block: clamp(2.5rem,5vw,4rem); }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; }
.clients-grid .client-cell { margin: 0; display: flex; align-items: center; justify-content: center; height: 120px; padding: 20px 26px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.clients-grid .client-cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter var(--t2) var(--ease), opacity var(--t2) var(--ease); }
.clients-grid .client-cell:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.clients-grid .client-cell:hover img { filter: none; opacity: 1; }
.clients-cta { padding-block: var(--section-y); }
.clients-cta > .container { position: relative; overflow: hidden; text-align: center; background: radial-gradient(80% 130% at 0% 0%, rgba(91,79,176,.25), transparent 55%), radial-gradient(80% 130% at 100% 100%, rgba(242,156,72,.15), transparent 55%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(2.5rem,6vw,4.5rem); box-shadow: var(--sh); }
.clients-cta > .container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.clients-cta h2 { margin-bottom: .75rem; }
.clients-cta p { color: var(--ink-2); margin-bottom: 1.75rem !important; }
@media (max-width: 575.98px) { .clients-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .clients-grid .client-cell { height: 96px; padding: 14px 16px; } }

/* ----------------------------------------------------------------------------
   22. GENERIC INNER-PAGE DEFAULTS
       Every page section gets the light treatment even before page polish:
       consistent rhythm, rounded media, light cards, readable text.
   -------------------------------------------------------------------------- */
main > section, main > div > section { position: relative; }
:where(main section) img { border-radius: var(--r-lg); }   /* zero specificity: components override freely */
main .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); color: var(--ink-2); }
main .card-title, main .card h3, main .card h4, main .card h5 { color: var(--ink); }
main table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
main th { background: var(--grad-soft), var(--surface-2); color: var(--ink); font-weight: 600; }
main th, main td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
main tr:last-child td { border-bottom: 0; }
main blockquote { border-left: 3px solid var(--pink); padding: .25rem 0 .25rem 1.25rem; color: var(--ink); }
main .badge { border-radius: var(--r-pill); }
main .nav-tabs, main .nav-pills { gap: .4rem; border: 0; }
main .nav-tabs .nav-link, main .nav-pills .nav-link { border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); background: var(--surface); }
main .nav-tabs .nav-link.active, main .nav-pills .nav-link.active { background: var(--grad-2); color: #fff; border-color: transparent; }
/* section headers on inner pages: gradient rule under the first h2 of a section */
main section > .container > .row:first-child > [class*="col"] > h2:only-of-type::after,
main section > .container > h2:first-child::after { content: ""; display: block; width: 64px; height: 3px; margin-top: .9rem; border-radius: 3px; background: var(--grad-2); margin-inline: var(--rule-mx, 0); }
/* centred headings centre their rule; a page that left-aligns such a heading sets --rule-mx: 0 */
.text-center > h2, .text-center > .section-title > h2 { --rule-mx: auto; }
.accordion-header::after, .accordion h2::after { content: none !important; }

/* ----------------------------------------------------------------------------
   23. FOOTER  (dark, compact). Self-contained between the @cf markers so
       footer.php can inject just this block on pages without this stylesheet.
   -------------------------------------------------------------------------- */
/* @cf-start */
footer.cf {
  --cf-bg: #0B0B14;
  --cf-line: var(--line, rgba(255,255,255,.07));
  --cf-line-2: var(--line-2, rgba(255,255,255,.13));
  --cf-ink: var(--ink, #F6F5FB);
  --cf-ink-2: var(--ink-2, #B9B8CC);
  --cf-ink-3: var(--ink-3, #8A89A0);
  --cf-accent: var(--accent, #F2628F);
  --cf-grad: var(--grad, linear-gradient(95deg, #383070 0%, #E34576 52%, #F29C48 100%));
  --cf-head: var(--font-head, "Outfit", system-ui, sans-serif);
  --cf-body: var(--font-body, "Plus Jakarta Sans", system-ui, sans-serif);
  --cf-ease: var(--ease, cubic-bezier(.16,1,.3,1));
  position: relative; z-index: 1; margin-top: clamp(2rem,4vw,3rem);
  background: var(--cf-bg); border-top: 1px solid var(--cf-line);
  color: var(--cf-ink-2); font-family: var(--cf-body); font-size: 14px; line-height: 1.6;
}
footer.cf::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 3px; background: var(--cf-grad); }
footer.cf p { margin: 0 !important; color: inherit; }
footer.cf a { text-decoration: none; }
footer.cf b { font-weight: 600; color: var(--cf-ink); }
footer.cf .cf-ico { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.125em; }
footer.cf a:focus-visible, footer.cf summary:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 3px; border-radius: 6px; }
footer.cf .cf-logo { display: block; width: 150px; height: auto; margin-bottom: .85rem; }

footer.cf .cf-cta { border-bottom: 1px solid var(--cf-line); background: radial-gradient(60% 160% at 0% 50%, rgba(91,79,176,.18), transparent 60%), radial-gradient(50% 160% at 100% 50%, rgba(227,69,118,.12), transparent 60%); }
footer.cf .cf-cta-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; padding-top: 1.6rem; padding-bottom: 1.6rem; }
footer.cf .cf-cta-title { font-family: var(--cf-head) !important; font-weight: 700; font-size: clamp(1.3rem,1.05rem+.9vw,1.75rem) !important; line-height: 1.25; color: var(--cf-ink) !important; letter-spacing: -.02em !important; }
footer.cf .cf-cta-title span { font-family: var(--cf-body) !important; font-weight: 400; font-size: .95rem !important; color: var(--cf-ink-3); margin-left: .6rem; letter-spacing: 0; }
footer.cf .cf-cta-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
footer.cf .cf-btn { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; height: 44px; padding: 0 1.15rem; border-radius: 999px; font-family: var(--cf-head) !important; font-weight: 600; font-size: .92rem; line-height: 1; transition: transform .2s var(--cf-ease), background .2s var(--cf-ease), border-color .2s var(--cf-ease); }
footer.cf .cf-btn-primary { background: var(--grad-2, linear-gradient(95deg, #5B4FB0, #E8517F 50%, #F7A23B)); color: #fff; box-shadow: 0 14px 34px -14px rgba(227,69,118,.6); }
footer.cf .cf-btn-primary:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
footer.cf .cf-btn-ghost { color: var(--cf-ink); border: 1px solid var(--cf-line-2); background: rgba(255,255,255,.03); }
footer.cf .cf-btn-ghost .cf-ico { color: #1FAF57; }
footer.cf .cf-btn-ghost:hover { color: var(--cf-ink); border-color: #1FAF57; transform: translateY(-1px); }

footer.cf .cf-main { padding: 2.75rem 0 1.75rem; }
footer.cf .cf-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
footer.cf .cf-tagline { color: var(--cf-ink-3); font-size: 13.5px; line-height: 1.6; max-width: 280px; }
footer.cf .cf-social { display: flex; gap: .45rem; margin-top: 1rem; }
footer.cf .cf-social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--cf-ink-2); font-size: 14px; border: 1px solid var(--cf-line-2); transition: color .2s var(--cf-ease), border-color .2s var(--cf-ease), background .2s var(--cf-ease); }
footer.cf .cf-social a:hover { color: #fff; border-color: transparent; background: var(--grad-2, #E34576); }
footer.cf details.cf-col > summary { list-style: none; cursor: default; display: block; }
footer.cf details.cf-col > summary::-webkit-details-marker { display: none; }
footer.cf h4.cf-h { color: var(--cf-ink); font-family: var(--cf-head) !important; font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: .02em; text-transform: none; margin: 0 0 .7rem; padding: 0; border: 0; }
footer.cf .cf-links { list-style: none; margin: 0; padding: 0; }
footer.cf .cf-links li { list-style: none; margin: 0; padding: 0; line-height: 1.95; }
footer.cf .cf-links a { color: var(--cf-ink-2); font-size: 14px; font-weight: 400; transition: color .15s var(--cf-ease); }
footer.cf .cf-links a:hover { color: var(--cf-accent); }
footer.cf .cf-hiring { margin-top: .5rem !important; font-size: 12.5px; line-height: 1.5; color: var(--cf-ink-3); }
footer.cf .cf-hiring a { color: var(--cf-ink); font-weight: 600; white-space: nowrap; }
footer.cf .cf-hiring a:hover { color: var(--cf-accent); }
footer.cf .cf-reach { display: grid; grid-template-columns: auto minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr); gap: .5rem 1.75rem; align-items: start; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--cf-line); font-size: 13px; line-height: 1.55; }
footer.cf .cf-reach-label { font-family: var(--cf-head); font-weight: 600; font-size: 13px; color: var(--cf-ink); line-height: 1.55; white-space: nowrap; }
footer.cf .cf-ri { display: flex; gap: .5rem; align-items: flex-start; color: var(--cf-ink-3); }
footer.cf .cf-ri > .cf-ico { color: var(--cf-accent); margin-top: .22rem; font-size: 12px; }
footer.cf .cf-ri a { color: var(--cf-ink-2); transition: color .15s var(--cf-ease); }
footer.cf .cf-ri a:hover { color: var(--cf-accent); }
footer.cf .cf-ph a { white-space: nowrap; margin-right: .75rem; }
footer.cf .cf-ph a:last-child { margin-right: 0; }
footer.cf .cf-bottom { border-top: 1px solid var(--cf-line); background: #07070D; }
footer.cf .cf-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; flex-wrap: wrap; min-height: 52px; padding-top: .6rem; padding-bottom: .6rem; }
footer.cf .cf-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
footer.cf .cf-legal a, footer.cf .cf-copy, footer.cf .cf-copy a { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--cf-ink-3); line-height: 1.6; }
footer.cf .cf-legal a:hover { color: var(--cf-ink); }
footer.cf .cf-copy a { cursor: default; letter-spacing: 0; }
@media (max-width: 991.98px) {
  footer.cf .cf-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  footer.cf .cf-brand { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; }
  footer.cf .cf-logo { margin-bottom: 0; }
  footer.cf .cf-social { margin-top: 0; margin-left: auto; }
  footer.cf .cf-reach { grid-template-columns: 1fr 1fr; }
  footer.cf .cf-reach-label { grid-column: 1 / -1; }
  footer.cf .cf-cta-title span { display: block; margin: .2rem 0 0; }
}
@media (max-width: 767.98px) {
  footer.cf .cf-cta-row { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  footer.cf .cf-main { padding: 1.75rem 0 1.25rem; }
  footer.cf .cf-grid { grid-template-columns: 1fr; gap: 0; }
  footer.cf .cf-brand { display: block; margin-bottom: 1rem; }
  footer.cf .cf-social { margin: .85rem 0 0; }
  footer.cf details.cf-col { border-top: 1px solid var(--cf-line); }
  footer.cf details.cf-col:last-child { border-bottom: 1px solid var(--cf-line); }
  footer.cf details.cf-col > summary { cursor: pointer; position: relative; padding: .9rem 0; }
  footer.cf details.cf-col > summary h4.cf-h { margin: 0; }
  footer.cf details.cf-col > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--cf-ink-3); border-bottom: 1.5px solid var(--cf-ink-3); transform: rotate(45deg); transition: transform .2s var(--cf-ease); }
  footer.cf details.cf-col[open] > summary::after { transform: rotate(-135deg); margin-top: -1px; }
  footer.cf details.cf-col > ul, footer.cf details.cf-col > .cf-hiring { padding-bottom: .8rem; }
  footer.cf details.cf-col > ul + .cf-hiring { margin-top: -.4rem !important; }
  footer.cf .cf-reach { grid-template-columns: 1fr; gap: .45rem; margin-top: 1.1rem; padding-top: 0; border-top: 0; }
  footer.cf .cf-bottom-row { flex-direction: column; align-items: flex-start; justify-content: center; padding-bottom: 5rem; }
}
@media (max-width: 420px) { footer.cf .cf-cta-actions, footer.cf .cf-btn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { footer.cf * { transition: none !important; } }
/* @cf-end */

/* ----------------------------------------------------------------------------
   24. FLOATING + STICKY CTAs
   -------------------------------------------------------------------------- */
.float-btn { box-shadow: var(--sh); width: 54px !important; height: 54px !important; }
.whatsapp-float { background: #1FAF57 !important; }
/* Icons drawn with CSS masks (official Simple Icons / Tabler SVGs) so they render even on pages
   that don't load Font Awesome; the empty <i> placeholder is then not needed. */
.float-btn > i { display: none !important; }
.float-btn::before { content: ""; width: 26px; height: 26px; background: #fff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.whatsapp-float { --ico: url("/Images/icons/whatsapp.svg"); }
.call-float { --ico: url("/Images/icons/phone.svg"); }
.call-float::before { width: 24px; height: 24px; }
.call-float { background: var(--grad-2) !important; }
.sticky-button { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: rgba(8,8,15,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.sticky-button button { width: 100%; background: transparent; border: none; padding: .95rem; }
.sticky-button button a { color: var(--ink) !important; font-family: var(--font-head) !important; font-weight: 600; }
.sticky-button .col-6:last-child button { background: var(--grad-2); }
.sticky-button .col-6:last-child button a, .sticky-button .whatsapp-track-btn { color: #fff !important; }

/* ----------------------------------------------------------------------------
   25. MOTION  (modern, CSS-only, all motivated, all reduced-motion safe)
   -------------------------------------------------------------------------- */
/* Smooth cross-page navigation (Chrome/Edge 126+, Safari 18.2+; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }

.wow { opacity: 1; visibility: visible !important; }
html.cg-io .cg-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* hero entrance: copy rises, visual settles */
  .hero-copy > * { animation: v3-rise .9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .hero-visual { animation: v3-settle 1.1s var(--ease) .1s both; }

  /* header gains depth once the page scrolls (scroll-driven, no JS) */
  @supports (animation-timeline: scroll()) {
    .navbar { animation: v3-nav-shadow linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
  /* sections reveal as they enter the viewport (scroll-driven, no JS) */
  @supports (animation-timeline: view()) {
    main > section:not(.hero) > .container,
    main > .container > section > *,
    main > section > .container-fluid,
    .reveal-v3 {
      animation: v3-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 38%;
    }
  }
}
/* Entrance motion is transform-only: content is painted (and counted for LCP) from the first frame. */
@keyframes v3-rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes v3-settle { from { transform: translateY(18px) scale(.985); } to { transform: none; } }
@keyframes v3-reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes v3-nav-shadow { to { box-shadow: 0 10px 34px -12px rgba(0,0,0,.6); background: rgba(8,8,15,.86); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .brand-track, .hero-marquee-track { animation: none !important; }
}
@media (hover: none) {
  .col-box:hover, .post-slide:hover, .home-ready .box:hover, .count-box:hover, .hc-card:hover, .testimonial .t-link:hover { transform: none; }
}

/* ----------------------------------------------------------------------------
   26. SECTION RHYTHM  - one consistent gap between sections, never doubled.
   Each section only pads its TOP by --gap (bottom 0), so section A's bottom
   + section B's top can no longer stack. Sections that paint their own
   background keep the gap inside on both sides and sit one gap away from
   their neighbours. Wins over page stylesheets on purpose (:not(#…) + !important).
   -------------------------------------------------------------------------- */
:root { --gap: clamp(3rem, 5.5vw, 5.5rem); --section-y: var(--gap); }

main > :is(section, div, article, aside):not(#v3-rhythm),
main > div:not(#v3-rhythm) > section { padding-bottom: 0 !important; }
main > :is(section, div, article, aside):not(:first-child):not(#v3-rhythm),
main > div:not(#v3-rhythm) > section:not(:first-child),
main > div:not(:first-child):not(#v3-rhythm) > section:first-child { padding-top: var(--gap) !important; }
main > div:not(:first-child):not(#v3-rhythm) > section:first-child { margin-top: 0 !important; }

/* wrappers that only group sections add no space of their own */
main > div:has(> section):not(#v3-rhythm) { padding-block: 0 !important; margin-block: 0 !important; }

/* sections with their own background: gap inside (both sides) + gap outside (top) */
main > :is(section, div)[style*="background"]:not(#v3-rhythm),
main > div > section[style*="background"]:not(#v3-rhythm),
main > :is(.e-what, .ppc-bg, .sc-bleed, .video_video, .v3-band, .healthcare-leaders):not(#v3-rhythm) { padding-block: var(--gap) !important; }
main > :is(section, div)[style*="background"]:not(:first-child):not(#v3-rhythm),
main > div > section[style*="background"]:not(:first-child):not(#v3-rhythm),
main > :is(.e-what, .ppc-bg, .sc-bleed, .video_video, .v3-band, .healthcare-leaders):not(:first-child):not(#v3-rhythm) { margin-top: var(--gap) !important; }

/* divider lines between sections (div.line-hr, div.hori, hr) sit in the MIDDLE of the one gap:
   pushed down half a gap, then pulling the next section up by the same amount. A hidden
   divider (display:none) therefore changes nothing. */
main > :is(div.line-hr, div.hori, hr, hr.sc-rule):not(:first-child):not(#v3-rhythm):not(#v3-divider) {
  padding: 0 !important; margin-top: calc(var(--gap) / 2) !important; margin-bottom: calc(var(--gap) / -2) !important;
}
main > :is(div.line-hr, div.hori) > hr { margin: 0 !important; }

/* the page ends one gap above the footer */
main > :last-child:not([style*="background"]):not(#v3-rhythm) { padding-bottom: var(--gap) !important; }
main > :is(section, div, article, aside) { margin-bottom: 0 !important; }
main > :is(section, div, article, aside):not([style*="background"]):not(.e-what, .ppc-bg, .sc-bleed, .video_video, .v3-band, .healthcare-leaders):not(:first-child):not(#v3-rhythm) { margin-top: 0 !important; }
main + footer.cf, main ~ footer.cf { margin-top: 0 !important; }

/* Bootstrap spacing utilities on a section's outer container would re-add space */
main > section > .container:is(.py-5, .py-4, .py-lg-5, .pt-5, .pb-5, .mt-5, .mb-5):not([class*="panel"]):not(#v3-rhythm):not(#v3-util) { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

/* ----------------------------------------------------------------------------
   27. RESPONSIVE RHYTHM
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) { .counts .count-box { margin-bottom: 0; } }
@media (max-width: 575.98px) {
  main h2 { letter-spacing: -.025em; } .counts { border-radius: var(--r-lg); }
  .container, .container-fluid, .container-sm, .container-md { padding-left: 16px; padding-right: 16px; }
}