/* === Brand gradient palette (global) === */
:root{
  --brand-base-1: #12003c;
  --brand-base-2: #410025;
  --brand-overlay-1: rgba(35,114,104,.5);
  --brand-overlay-2: rgba(102,160,215,0);
  --brand-overlay-3: rgba(112,56,237,.5);
  --brand-grad-base: linear-gradient(89deg, var(--brand-base-1) 0%, var(--brand-base-2) 100%);
  --brand-grad-overlay: linear-gradient(45deg, var(--brand-overlay-1) 0%, var(--brand-overlay-2) 50%, var(--brand-overlay-3) 100%);
  --brand-grad-full: var(--brand-grad-overlay), var(--brand-grad-base);
  --muted: #6b7280;
  --surface: #ffffff;
  --text-on-dark: #fff;
  --footer: #0b0f1d; /* bluish black */
}

html, body { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#0f172a; background:#f7f8fc; font-size:15.5px; line-height:1.6; }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: clamp(18px, 2vw, 22px); }
.lead{ font-size:1.05rem; color:white; }

/* === NAVBAR === */
.navbar{
  background:#ffffffee !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.navbar-brand img{ height:40px; width:auto; }

/* top-level links: smooth + bold on hover/focus */
.navbar .nav-link {
  font-weight: 600; /* keep slightly bold at rest to avoid jump */
  transition: color .18s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: #3e84e0;   /* brand blue highlight instead of bolding */
  text-decoration: none;
}

/* caret icon + base spacing */
.navbar .dropdown-toggle::after{
  margin-left:.35rem;
  transition: transform .18s ease;
}

/* dropdown container: animate + GRADIENT BORDER + rounded */
.dropdown-menu{
  --scale:.98;
  opacity:0;
  transform: translateY(6px) scale(var(--scale));
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  visibility:hidden;
  display:block;

  padding:8px;
  border-radius:12px;
  border:1px solid transparent; /* needed for gradient border */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);

  /* gradient border using layered backgrounds (matches requested style) */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #3e84e0, #9c72fb) border-box;
}

/* open state (click) */
.dropdown.show .dropdown-menu,
.dropdown-menu.show{
  opacity:1; transform:translateY(0) scale(1); visibility:visible;
}

/* submenu items: rounded blocks + hover/active states */
.navbar .dropdown-item{
  padding:.45rem .8rem;
  border-radius:10px;
  transition: background-color .15s ease, color .15s ease;
}
.navbar .dropdown-item + .dropdown-item{ margin-top:4px; }

/* Hover: “darker white” block */
.navbar .dropdown-item:hover{
  background-color:#eff2f7;
  color:#0f172a;
  border-radius:10px;
}

/* Active/Clicked: use theme gradient instead of Bootstrap blue */
.navbar .dropdown-item:active,
.navbar .dropdown-item.active,
.navbar .dropdown-item:focus:active{
  background-image: var(--brand-grad-full) !important;
  color:#fff !important;
  border-radius:10px;
}

/* desktop only: open on hover, rotate caret, bold parent title */
@media (min-width:992px){
  .navbar .dropdown:hover > .dropdown-menu{
    opacity:1; transform:translateY(0) scale(1); visibility:visible;
  }
  .navbar .dropdown:hover > .dropdown-toggle::after,
  .navbar .dropdown .dropdown-toggle.show::after{
    transform: rotate(180deg);
  }
  .navbar .dropdown:hover > .nav-link,
  .navbar .dropdown .dropdown-toggle.show{
    font-weight:700; /* bold title when dropdown is hovered/open */
  }
}

/* === Utility bar === */
.util-bar{ background:#000; color:#fff; font-size:.74rem; }
.util-bar .container{ padding-top:2px; padding-bottom:2px; }

.util-bar .label{ color:rgba(255,255,255,.7); font-size:.74rem; }

.util-bar .btn-util{
  color:#fff;
  border:1px solid #fff;
  border-radius:999px;
  padding:.12rem .38rem;     /* smaller button */
  line-height:1;             /* tighter */
  font-weight:400;           /* not bold */
  font-size:.72rem;          /* smaller text */
  background:transparent;
}
.util-bar .btn-util:hover{ background:#fff; color:#0b0f1d; }

.util-bar .util-icon{
  color:#fff;
  opacity:.9;
  font-size:.80rem;          /* smaller icons */
  line-height:1;
}
.util-bar .util-icon:hover{ opacity:1; }

/* Hero divider */
:root{
  --divider-height: 2px;    /* line thickness */
  --divider-mt: 2px;        /* gap ABOVE the line (after hero) */
  --divider-mb: 2px;        /* gap BELOW the line */
}

.divider-gradient{
  height: var(--divider-height);
  width: 100%;
  background: linear-gradient(to right, #3e84e0, #9c72fb);
  margin: var(--divider-mt) 0 var(--divider-mb);
}

/* === Buttons === */
:root{
  --btn-ring: linear-gradient(to right, #3e84e0, #7159a8); /* hover border gradient */
}

.btn{
  position: relative;
  border-radius: 999px;
  border:1px solid transparent;                     /* enables gradient border ring */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  will-change: transform, box-shadow;
}
.btn-lg{ padding:.55rem 1rem; font-size:.95rem; }
.btn-compact{ padding:.4rem .8rem; font-size:.9rem; }
.fw-bold-btn{ font-weight:700; }

/* Keep label color stable on hover for all buttons by default */
.btn:hover, .btn:focus{ color: inherit; }

/* Gradient-filled button (brand gradient) */
.btn-gradient{
  color:#fff;
  background-image: var(--brand-grad-full);
  background-origin: padding-box;
  background-clip: padding-box;                      /* fill only */
}
.btn-gradient:hover,
.btn-gradient:focus{
  color:#fff;                                        /* do not change text color */
  /* add gradient border ring layer on hover */
  background-image:
    var(--brand-grad-full),                          /* fill (unchanged) */
    var(--btn-ring);                                 /* border ring */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 30px rgba(156,114,251,.6);
  transform: scale(1.04);
}

/* “Outline light” buttons are gradient by default with black text (no hover color change) */
.btn-outline-light{
  color:#0b1020;                                     /* black text */
  background-image: var(--btn-ring);                 /* gradient fill by default */
  background-origin: padding-box;
  background-clip: padding-box;
}
.btn-outline-light:hover,
.btn-outline-light:focus{
  color:#0b1020;                                     /* keep text color */
  /* same fill; add border ring + glow only */
  background-image:
    var(--btn-ring),                                 /* fill (unchanged) */
    var(--btn-ring);                                 /* border ring */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 30px rgba(156,114,251,.6);
  transform: scale(1.04);
}

/* Dark outline button (transparent fill, inherits text color) */
.btn-outline-primary{
  color: inherit;
  background: transparent;
  border:1px solid currentColor;                     /* visible outline at rest */
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color: inherit;                                    /* keep text color */
  background:
    linear-gradient(#0000,#0000),                    /* keep fill transparent */
    var(--btn-ring);                                 /* border ring */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;                         /* show gradient ring */
  box-shadow: 0 0 30px rgba(156,114,251,.6);
  transform: scale(1.03);
}

/* Active press state mirrors hover (slightly less scale) without color changes */
.btn:active{
  box-shadow: 0 0 30px rgba(156,114,251,.6);
  transform: scale(1.02);
}

/* Sections */
.section{ padding:64px 0; }
.section-sm{ padding:30px 0; }

/* Hero */
.hero{ padding:40px 0 0; background-image: var(--brand-grad-full); color:var(--text-on-dark); }
.hero .container{ max-width:85vw; } /* 85% width */
.hero .lead{ color:#fff; font-weight:600; } /* bold-ish for readability */
.hero-banner{ width:100%; opacity:0; transform: translateY(60px); transition: transform 1.1s ease, opacity 1.1s ease; }
.hero-banner.in{ opacity:1; transform: translateY(0); }

.section-shaded {
  background-image: var(--brand-grad-full);
  color: #fff;
  border-radius: 15px;
  width: 97vw;          /* 80% of viewport width */
  margin: 0 auto;       /* centers it, leaving equal whitespace */
  padding: 20px;        /* optional inner spacing */
}

.section-shaded a {
  color: #fff;
}

 /* Cards & icons */
.card {
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  background: #fff;
  border: 1px solid transparent;              /* needed for gradient ring */
  background-image:
    linear-gradient(#ffffff, #ffffff),         /* inner fill */
    linear-gradient(to right, #3e84e0, #7159a8); /* blue gradient border */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;                            /* <-- key: clip footer to radius */
}

.chip {border:1px solid rgba(255,255,255,.18); color:#e2e8f0; background:rgba(255,255,255,.06); padding:.35rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem;}
.chip i {opacity:.85}
/* Pair cards: left-accented border */
.card.pair { border-left:4px solid #2563eb; background:#fff; }
.card.pair.bad { border-left-color:#ef4444; }
.card.pair.good { border-left-color:#22c55e; }
.card.pair h6 { margin-bottom:.25rem; }

/* === Marquee (continuous loop) === */
.marquee{
  overflow: hidden;
  position: relative;
  padding: 0 36px;                 /* keeps arrow buttons fully visible */
}
.marquee-track{
  display: flex;
  align-items: center;
  gap: 32px;                       /* visual gap between logos */
  width: max-content;              /* shrink-wrap track */
  animation: marquee var(--marquee-duration, 23s) linear infinite;
  will-change: transform;
}
.marquee-track > a{ display: inline-flex; align-items: center; }
.marquee-track img{ height: 48px; width: auto; display: block; }

/* pause on hover (optional) */
.marquee:hover .marquee-track{ animation-play-state: paused; }

@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* half, because we’ll duplicate content */
}

/* About image + corners */
.about-stage{ position:relative; height:457px; display:flex; align-items:flex-end; justify-content:center; }
.about-stage img{ width:400px; height:457px; object-fit:cover; border-radius:18px; display:block; }
.corner-card{ position:absolute; width: 180px; }
.corner-card .card{ border-radius:14px; }
.corner-card.tl{ top:-20px; left:-20px; }
.corner-card.tr{ top:-20px; right:-20px; }
.corner-card.bl{ bottom:-20px; left:-20px; }
.corner-card.br{ bottom:-20px; right:-20px; }
.float-in-right{ opacity:0; transform: translateX(32px); transition: all .6s ease; }
.float-in-right.in{ opacity:1; transform: translateX(0); }

/* Services (image left, text right inside card) */
.service-card .card-body{ display:flex; align-items:center; gap:12px; }
.service-card .card-title{ margin-bottom:4px; }
.service-card .card-text{ margin-bottom:0; }

/* Industry tags (off-white, non-clickable) */
.tag-pill {
  display: inline-block;
  padding: 0.25rem 0.45rem;  /* reduced by ~50% */
  border-radius: 999px;
  background: #f3f4f6;
  color: #000;
  margin: 0.125rem 0.175rem 0.125rem 0; /* smaller spacing */
  font-size: 0.75rem; /* smaller text */
  font-weight: 600;
  user-select: none;
}

/* Why us (PNG icons left, text right) */
.why-card .card-body{ display:flex; align-items:flex-start; gap:12px; }
.why-icon{ width:44px; height:44px; flex:0 0 44px; object-fit:contain; }

/* Process images (full width) */
.process-img{ width:100%; height:auto; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.12); }

/* Timeline (kept for reference; removed content in this rev) */
.timeline { display:none; }

/* Chatbot UI + FAB */
#chatbot{ position:fixed; right:24px; bottom:88px; width:340px; max-width:calc(100vw - 32px); background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.2); display:none; overflow:hidden; z-index:1050; }
#chatbot .head{ padding:10px 14px; background-image: var(--brand-grad-full); color:#fff; }
#chatbot .body{ padding:12px; max-height:50vh; overflow:auto; }
#chatbot .input{ display:flex; gap:8px; padding:10px; border-top:1px solid #e5e7eb; }
#chatbot .input input{ flex:1; }
/* FAB: pill, small edge corner (bottom-left), blue gradient border + glow */
#chat-fab{
  position:fixed; right:24px; bottom:24px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.55rem .85rem;                 /* pill padding */
  min-height: 48px;                      /* comfortable tap target */
  border:1.5px solid transparent;        /* real border hidden; ring via bg */
  border-radius: 999px 999px 999px 12px; /* TL TR BR BL (edge corner at bottom-left) */
  background-image:
    linear-gradient(#000,#000),          /* black fill */
    var(--btn-ring, linear-gradient(to right,#3e84e0,#7159a8)); /* blue gradient border */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  color:#fff; font-weight:600;
  box-shadow:0 0 30px rgba(156,114,251,.6); /* glow */
  z-index:1040;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
}

/* Bigger white message icon + spacing */
#chat-fab i{
  font-size:1.35rem;                     /* bigger icon */
  line-height:1;
  color:#fff;
}
#chat-fab span{ line-height:1; }

/* Hover = expand only; no colour change, keep glow */
#chat-fab:hover{ transform: scale(1.06); box-shadow:0 0 30px rgba(156,114,251,.72); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #chat-fab{ transition:none; }
}

/* Avatars & small UI */
.avatar{ width:75px; height:75px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.05); }

/* Video strip (8 items, horizontal scroll) */
.scroll-x{ display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; padding-bottom:6px; }
.scroll-x::-webkit-scrollbar{ height:8px; }
.scroll-x > .vcard{ min-width:320px; max-width:320px; scroll-snap-align:start; }
.video-card{ position:relative; overflow:hidden; border-radius:14px; }
.video-card img{ width:100%; display:block; }
.play-badge{ position:absolute; left:10px; bottom:10px; background:#000000c0; color:#fff; border-radius:999px; padding:6px 10px; display:flex; align-items:center; gap:6px; font-size:.9rem; }

/* KPIs */
.kpi{ font-weight:700; font-size:1.2rem; }
[data-count]::after{ content: attr(data-suffix); margin-left:.1rem; }
.kpi-number{ font-size:2.6rem; font-weight:800; }

/* Reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: all .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* Stats section theme (colorized cards, white text) */
#stats .card{ background-image: linear-gradient(to right, #3e84e0, #7159a8); color:#fff; border:0; }

/* Insights smaller images + denser grid */
.card-img-top.sm{ height:140px; object-fit:cover; border-top-left-radius:12px; border-top-right-radius:12px; }

/* Footer */
footer{ background: var(--footer); color:#e5e7eb; }
footer a{ color:#c7d2fe; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* Utility */
.centered-btn{ text-align:center; }

/* Extra space below the 'Trusted by' label */
.trusted-label{ margin-bottom: 2rem !important; } /* was ~1rem (mb-3) */

/* ABOUT: KPI icon bullets (replacing the mini cards) */
.kpi-points{ margin-top:.5rem; }
.kpi-points .item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:.35rem;
}
.kpi-points .kpi-icon{ font-size:1.1rem; line-height:1.2; }
.kpi-points .item strong{ font-weight:800; }

/* Ensure the about image sits flush at the section bottom (kept) */
#about .about-stage{ height:457px; display:flex; align-items:flex-end; }
#about .about-stage img{ width:400px; height:457px; object-fit:cover; display:block; margin:0 !important; padding:0 !important; }

/* ABOUT: image flush with section bottom */
#about{ padding-bottom:0; } /* remove bottom padding added by .section */
#about .about-img-bottom{
  display:block;
  width:400px;
  height:457px;
  object-fit:cover;
  margin:0 !important;      /* ensure no extra bottom margin */
  padding:0 !important;
}

/* Hero banner: zoomed/cropped on mobile & tablet */
.hero{ overflow: hidden; }              /* prevent any overflow from cropping */

.hero-banner{                           /* desktop/default stays full-width */
  width: 100%;
  height: auto;
}

/* Tablet and down: crop with cover (appears zoomed) */
@media (max-width: 991.98px){
  .hero-banner{
    height: 160px;                      /* adjust: tablet hero height */
    object-fit: cover;                  /* crop instead of squish */
    object-position: center 20%;        /* nudge visible area if needed */
  }
}

/* Mobile: slightly shorter, can tweak focal point */
@media (max-width: 575.98px){
  .hero-banner{
    height: 100px;                      /* adjust: mobile hero height */
    object-position: center 30%;
  }
}

/* === Navbar dropdown behavior fixes === */

/* Desktop (≥992px): keep hover animation + display:block baseline */
@media (min-width: 992px){
  .dropdown-menu{
    --scale:.98;
    opacity:0;
    transform: translateY(6px) scale(var(--scale));
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    visibility:hidden;
    display:block; /* needed for hover-open animation on desktop */
  }
  .dropdown.show .dropdown-menu,
  .dropdown-menu.show{ opacity:1; transform:translateY(0) scale(1); visibility:visible; }
  .navbar .dropdown:hover > .dropdown-menu{
    opacity:1; transform:translateY(0) scale(1); visibility:visible;
  }
  .navbar .dropdown:hover > .dropdown-toggle::after,
  .navbar .dropdown .dropdown-toggle.show::after{ transform: rotate(180deg); }
}

/* Mobile & Tablet (<992px): collapsed by default; no space until opened */
@media (max-width: 991.98px){
  .navbar .dropdown-menu{
    display:none;              /* no layout space when closed */
    opacity:1;                 /* no fade needed on mobile */
    transform:none;
    visibility:visible;
    position: static;          /* stack within the flow */
    float:none;
    margin:0;
    padding:.25rem 0;
    border:0;
    box-shadow:none;
    background:transparent;    /* keep item hover/active styles only */
  }
  .navbar .dropdown-menu.show{ display:block; } /* only takes space when opened */

  /* rotate caret only when opened on mobile */
  .navbar .dropdown-toggle::after{ transition: transform .18s ease; }
  .navbar .dropdown.show > .dropdown-toggle::after{ transform: rotate(180deg); }
}

/* Inline SVG icon helper (no font dependency) */
.svg-icon{ width:1.1rem; height:1.1rem; flex:0 0 auto; display:inline-block; }
.svg-icon *{ fill: currentColor; } /* inherits from text-* utilities */

/* === Sticky combo: navbar + utility bar === */
#nav-wrap{
  position: sticky;
  top: 0;
  z-index: 1030;                 /* above content, below modals */
  background: transparent;       /* children handle their own backgrounds */
}

/* Smooth squeeze on scroll */
#nav-wrap .navbar{
  transition: padding .18s ease, min-height .18s ease, box-shadow .18s ease;
}
#nav-wrap .navbar-brand img{
  height:40px;                   /* default */
  width:auto;
  transition: height .18s ease;
}

/* Shrunk state applied by JS when scrolled */
#nav-wrap.is-shrunk .navbar{
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
#nav-wrap.is-shrunk .navbar-brand img{
  height:28px;                   /* smaller logo when shrunk */
}

/* Optional: tighten utility bar when shrunk (keep if you want even slimmer) */
#nav-wrap.is-shrunk .util-bar .container{
  padding-top: 1px;
  padding-bottom: 1px;
}

/* Navbar CTA: shrink when navbar is squeezed */
#nav-wrap .nav-cta{
  transition: padding .18s ease, font-size .18s ease, line-height .18s ease;
}

/* When scrolled (wrapper gets .is-shrunk via JS), make CTA smaller */
#nav-wrap.is-shrunk .nav-cta{
  padding: .28rem .6rem;   /* was from .btn-lg; now tighter */
  font-size: .82rem;       /* smaller text */
  line-height: 1.05;
}

/* Optional: tighten spacing around CTA to squeeze navbar a bit more */
#nav-wrap.is-shrunk .navbar .navbar-nav .nav-link{
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* === Utility bar shrinks with navbar === */
#nav-wrap .util-bar{
  transition: font-size .18s ease, padding .18s ease;
}
#nav-wrap .util-bar .label,
#nav-wrap .util-bar .btn-util,
#nav-wrap .util-bar .util-icon{
  transition: font-size .18s ease, padding .18s ease, border-width .18s ease;
}

/* When scrolled (wrapper has .is-shrunk), reduce font + icon sizes and tighten paddings */
#nav-wrap.is-shrunk .util-bar{
  font-size: .62rem;                 /* base text smaller */
}
#nav-wrap.is-shrunk .util-bar .container{
  padding-top: 0; padding-bottom: 0; /* thinner bar */
}
#nav-wrap.is-shrunk .util-bar .label{
  font-size: .62rem;                 /* labels smaller */
}
#nav-wrap.is-shrunk .util-bar .btn-util{
  padding: .06rem .26rem;            /* tighter buttons */
  font-size: .60rem;                 /* smaller button text */
  border-width: 1px;                 /* keep outline crisp */
  line-height: 1.02;
}
#nav-wrap.is-shrunk .util-bar .util-icon{
  font-size: .66rem;                 /* smaller social icons */
}

/* === Running glowing edge (video-style) ================================ */
/* disable any global ::after ring for this CTA only */
#hero-cta::after{ content:none !important; }

/* The glow under it */
.btn-edge-sweep .runner-glow{
  stroke: var(--edge-color);
  stroke-linecap: round;
  stroke-dasharray: var(--dash-len) 100;
  stroke-dashoffset: 0;
  animation: edgeDash var(--speed) linear infinite;
  opacity: .8;
}

/* Move the dash around the whole perimeter */
@keyframes edgeDash{
  to{ stroke-dashoffset: -100; }  /* pathLength=100 → one full loop */
}

/* Keep your hover magnify; no colour changes */
#hero-cta:hover,
#hero-cta:focus{
  transform: scale(1.04);
  box-shadow: 0 0 22px rgba(230, 57, 70, .35);
}
/* HERO CTA — black fill, white text, BLUE GRADIENT BORDER (always visible) */
#hero-cta::after{ content:none !important; } /* disable any global btn ring for this one */

#hero-cta{
  color:#fff !important;
  background-color:#000 !important;                 /* black fill */
  border:1.5px solid transparent !important;        /* real border hidden; gradient ring shows */
  border-radius:999px;

  /* gradient border ring + black fill (layered backgrounds) */
  background-image:
    linear-gradient(#000,#000),                     /* fill */
    linear-gradient(to right,#3e84e0,#7159a8);      /* blue gradient BORDER like btn-outline-hover */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;

  /* glow always on */
  box-shadow: 0 0 30px rgba(156,114,251,.6);

  /* hover = expand only (no color changes) */
  transition: transform .18s ease, box-shadow .18s ease;
}
#hero-cta:hover,
#hero-cta:focus{
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(156,114,251,.7);
}

/* === Fix: don't keep glow/expand after click (hover-only animation) === */

/* Global: hover animates, focus does not */
.btn:hover{
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(156,114,251,.7);
}
.btn:focus{
  transform: none !important;
  box-shadow: none !important;
}

/* Make sure previously combined rules ( :hover, :focus ) are overridden */
.btn-outline-light:focus,
.btn-outline-primary:focus,
.btn-gradient:focus,
#hero-cta:focus{
  transform: none !important;
  box-shadow: none !important;
}

/* Optional: brief press feedback without leaving it “stuck” */
.btn:active{
  transform: scale(0.99);
  box-shadow: none;
}

/* Footer pills (services) */
footer .svc-pills{
  display:flex; flex-wrap:wrap;
  gap:.45rem .55rem;
  margin-top:.25rem;
}
footer .svc-pills .pill{
  background:#5da8ff; color:#0b1020;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.85rem; line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  white-space:nowrap;
}

/* Footer pills — smaller size */
footer .svc-pills{ gap:.3rem .4rem; }                 /* tighter spacing */
footer .svc-pills .pill{
  padding:.16rem .44rem;                               /* smaller padding */
  font-size:.78rem;                                    /* smaller text */
  line-height:1;                                       /* tight line height */
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);               /* lighter shadow */
}

/* Optional: even smaller on mobile */
@media (max-width: 767.98px){
  footer .svc-pills .pill{
    padding:.14rem .38rem;
    font-size:.76rem;
  }
}

/* Compact contact block */
footer .contact-block .country{ margin-bottom:.5rem; }
footer .contact-block .line{
  display:flex; align-items:flex-start; gap:.35rem;
  line-height:1.35; margin-bottom:.15rem;
}
footer .contact-block i{ font-size:.95rem; line-height:1.1; }

@media (max-width: 767.98px){
  footer .svc-pills .pill{ font-size:.82rem; }
}

/* Chatbox should sit down to the FAB level */
#chatbot{ bottom:24px; }  /* was 88px */

/* Perfect round close button in header */
#chatbot .btn-chat-close{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  background: transparent;
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding:0;
  transition: transform .15s ease, background .15s ease;
}
#chatbot .btn-chat-close:hover{ transform: scale(1.05); background: rgba(255,255,255,.12); }

/* Quick reply buttons */
.chat-quick{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.chat-quick .qr-btn{
  background:#f1f5f9; color:#0b1020;
  border:1px solid #e5e7eb; border-radius:999px;
  padding:.22rem .6rem; font-size:.85rem; line-height:1;
}

/* Bot message bubble + privacy line */
.msg.bot{
  background:#f8fafc; border:1px solid #eef2f7; border-radius:12px;
  padding:.55rem .7rem; font-size:.92rem; color:#0b1020;
}
.privacy-note{ font-size:.8rem; color:#64748b; }

/* When chat opens, hide FAB (JS toggles display, this is just safety) */
#chatbot[open] + #chat-fab{ display:none; }

/* === Chat bubbles & quick replies === */
:root{ --chat-grad: linear-gradient(to right, #3e84e0, #7159a8); }

/* Bot bubble: sharp bottom-left corner */
#chatbot .msg.bot{
  background:#dfdfdf;
  border:1px solid #eef2f7;
  color:#0b1020;
  border-radius:12px 12px 12px 0; /* TL TR BR BL */
  padding:.55rem .7rem;
  max-width:85%;
}

/* User bubble (and replies): gradient + sharp bottom-right, right-aligned */
#chatbot .msg.user{
  background-image: var(--chat-grad);
  color:#fff;
  border-radius:12px 12px 0 12px; /* TL TR BR BL */
  padding:.55rem .7rem;
  margin-left:auto;
  max-width:85%;
}

/* Quick replies: one per line, same shape/colour as user bubble */
#chatbot .chat-quick{
  display:grid;
  grid-template-columns: 1fr;  /* each on its own line */
  gap:.4rem;
  margin-top:.5rem;
}
#chatbot .chat-quick .qr-btn{
  display:block; width:100%; text-align:left;
  background-image: var(--chat-grad);
  color:#fff;
  border:0;
  border-radius:12px 12px 0 12px; /* BR sharp */
  padding:.5rem .75rem;
  line-height:1.15;
  transition: transform .12s ease;
}
#chatbot .chat-quick .qr-btn:hover{ transform: scale(1.01); }

/* (Optional) smooth scroll when new messages append */
#chatbot .body{ scroll-behavior:smooth; }

/* === Alignments + active chatbox gradient border ======================= */
:root{
  /* define once if not already present */
  --chat-grad: linear-gradient(to right, #3e84e0, #7159a8);
  --btn-ring:  linear-gradient(to right, #3e84e0, #7159a8);
}

/* Chat body as a vertical stack */
#chatbot .body{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  scroll-behavior:smooth;
}

/* User message bubble: right side + right-aligned text */
#chatbot .body .msg.user{
  align-self:flex-end !important;         /* stick bubble to the right */
  display:inline-block;
  width:fit-content;
  max-width:85%;
  background-image: var(--chat-grad);
  color:#fff;
  border-radius:12px 12px 0 12px;         /* BR sharp */
  padding:.55rem .7rem;
  text-align:right !important;            /* text right aligned inside bubble */
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* Bot bubble (kept left) – BL sharp corner */
#chatbot .body .msg.bot{
  align-self:flex-start;
  background:#f8fafc;
  border:1px solid #eef2f7;
  color:#0b1020;
  border-radius:12px 12px 12px 0;
  padding:.55rem .7rem;
  max-width:85%;
}

/* Quick replies: one per line, right side, right-aligned text */
#chatbot .chat-quick{
  display:flex;
  flex-direction:column;                  /* one per line */
  align-items:flex-end;                   /* align the buttons to the right */
  gap:.4rem;
  margin-top:.5rem;
}
#chatbot .chat-quick .qr-btn{
  display:inline-block;                   /* autosize width to text */
  background-image: var(--chat-grad);
  color:#fff;
  border:0;
  border-radius:12px 12px 0 12px;         /* BR sharp */
  padding:.5rem .75rem;
  line-height:1.15;
  text-align:right !important;            /* right-aligned text */
  cursor:pointer;
  transition: transform .12s ease;
}
#chatbot .chat-quick .qr-btn:hover{ transform: scale(1.01); }

/* Whole chatbox gets a blue gradient border when active (open) */
#chatbot{
  border:1px solid #e5e7eb;               /* default (inactive) */
}
#chatbot[open]{
  border:1px solid transparent;
  background-image:
    linear-gradient(#ffffff,#ffffff),      /* inner fill */
    var(--btn-ring);                       /* gradient border */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 18px 50px rgba(0,0,0,.2), 0 0 30px rgba(156,114,251,.35);
}

/* ===== Footer: align social/newsletter block & increase icon spacing ===== */

/* Tweak here  */
:root{
  --footer-social-offset-md: 1.75rem;  /* md+ offset above "Follow us on" */
  --footer-social-offset-lg: 4.25rem;  /* lg+ a bit more */
}

/* Keep label close, push the whole block down on wider screens */
footer .footer-social{ gap:.5rem; }     /* label ↔ first icon spacing */
@media (min-width: 768px){
  footer .footer-social{ margin-top: var(--footer-social-offset-md) !important; }
  footer .footer-newsletter{ margin-top: .6rem !important; } /* space under icons */
}
@media (min-width: 1200px){
  footer .footer-social{ margin-top: var(--footer-social-offset-lg) !important; }
}

/* More gap BETWEEN icons only (not between label and first icon) */
footer .footer-social .social-link + .social-link{
  margin-left: .85rem;                   /* increase icon-to-icon spacing */
}

.card-footer,
.card-footer.bg-white {
  background-color: transparent !important;    /* let gradient edge show */
  border-top: 1px solid rgba(0,0,0,.06);       /* subtle separator line */
}
/* ==== Book Consultation page styles (moved from inline) ==== */
.hero-min{
  padding: 20px 0;
  background-image: var(--brand-grad-full);
  color: #fff;
}

/* utility: blue gradient border like index components */
.card-gradient{
  border:1px solid transparent;
  background-image:
    linear-gradient(#ffffff,#ffffff),
    linear-gradient(to right, #3e84e0, #7159a8);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.card-glow{
  box-shadow: 0 18px 50px rgba(0,0,0,.2), 0 0 30px rgba(156,114,251,.35);
  border-radius: 16px;
  overflow: hidden; /* keep rounded corners clean with gradient edges */
}

/* nicer list spacing on the benefits */
.lead-list li{
  margin-bottom: .45rem;
  display: flex;
  align-items: flex-start;
}
.lead-list li i{ line-height: 1.25; }

/* form cosmetics consistent with the site */
.form-label.required::after{
  content:" *";
  color:#e11d48; /* red asterisk */
  font-weight:700;
}
#consult-form .form-control,
#consult-form .form-select{
  border-radius: 10px;
  border-color: #e5e7eb;
}
#consult-form .form-control:focus,
#consult-form .form-select:focus{
  border-color: #9c72fb;
  box-shadow: 0 0 0 .2rem rgba(156,114,251,.15);
}

/* ==== Consultation page refinements ==== */

/* Auto height (ensure cards shrink to content even inside flex columns) */
.card.card-gradient.card-glow { height: auto; }

/* Normalized card headers with icon badge */
.card-hd{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

/* Square, rounded icon badge with brandable colors */
.ic{
  --ic-bg: rgba(62,132,224,.12);
  --ic-fg: #3e84e0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ic-bg);
  color: var(--ic-fg);
  flex: 0 0 36px;
}
.ic i{
  font-size: 1.15rem; /* consistent icon size */
  line-height: 1;
}

/* Color variants for different cards (you can mix & match) */
.ic.ic-blue   { --ic-bg: rgba(62,132,224,.12);  --ic-fg:#3e84e0; }  /* blue */
.ic.ic-purple { --ic-bg: rgba(156,114,251,.12); --ic-fg:#7159a8; }  /* purple */
.ic.ic-green  { --ic-bg: rgba(34,197,94,.12);   --ic-fg:#22c55e; }  /* green */
.ic.ic-orange { --ic-bg: rgba(251,146,60,.15);  --ic-fg:#fb923c; }  /* orange */

/* Lead list: consistent spacing & icon alignment */
.lead-list{
  margin: 0;
  padding: 0;
}
.lead-list li{
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-bottom: .45rem;
}

/* Normalize all Bootstrap icons used in lists */
.lead-list li i.bi{
  font-size: 1rem;          /* same size everywhere */
  line-height: 1;
  position: relative;
  top: .1rem;               /* gentle nudge to align with first text line */
}

/* Tighten long lines on smaller screens */
@media (max-width: 575.98px){
  .card-hd { gap: .5rem; }
  .ic { width: 32px; height: 32px; border-radius: 9px; }
  .ic i { font-size: 1.05rem; }
}
/* === Bullet icon alignment fix (strong specificity) === */
.lead-list { list-style: none; margin: 0; padding: 0; }

.lead-list > li{
  display: flex;
  align-items: flex-start;   /* text starts at same top line */
  gap: .5rem;
  line-height: 1.5;
}

.lead-list > li > i.bi{
  display: inline-block;
  font-size: 1.05rem;        /* normalize size across all icons */
  line-height: 1;
  position: relative;
  top: .18rem !important;    /* ↓ tiny nudge to sit on the baseline */
  flex: 0 0 auto;            /* don’t shrink */
  margin-right: .25rem;      /* keeps spacing even if me-2 changes */
}
/* ==== Shared themed forms (Contact + Booking) ==== */
.form-themed .form-label.required::after{
  content:" *";
  color:#e11d48;
  font-weight:700;
}
.form-themed .form-control,
.form-themed .form-select{
  border-radius: 10px;
  border-color: #e5e7eb;
}
.form-themed .form-control:focus,
.form-themed .form-select:focus{
  border-color: #9c72fb;
  box-shadow: 0 0 0 .2rem rgba(156,114,251,.15);
}
/* ABOUT PAGE - WHY US padding fix */
#about-page #why.section, #tools.section {
  padding: 20px !important;
}

/* ABOUT PAGE — fix CTA overflow pushing content off the right edge */
#about-page .section-sm {
  padding: 32px 0;               /* safe vertical spacing */
  overflow-x: hidden;            /* guard against any inner overflow */
}

#about-page .section-sm .container {
  overflow: hidden;              /* clip any children that try to bleed out */
}

#about-page .section-sm .section-shaded {
  margin-left: 0 !important;     /* cancel any global edge-to-edge treatment */
  margin-right: 0 !important;
  padding: 24px !important;      /* your desired internal padding */
  border-radius: 16px;           /* nice corners */
  max-width: 100%;
  box-sizing: border-box;
}

/* Safety nets in case inner elements use 100vw or negative margins */
#about-page .section-sm .section-shaded * {
  box-sizing: border-box;
  max-width: 100%;
}

/* If your theme applies negative margins to .row, ensure rows inside shaded block don’t overflow */
#about-page .section-sm .section-shaded .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Blog/credentials image grid fix */
.row.row-cols-lg-4 .col img {
  width: 100%;
  height: auto;
  object-fit: contain;   /* keeps logo/aspect intact */
  max-height: 120px;     /* keeps row balanced */
}
/* Tools section: blue gradient background */
.section-blue {
  background-image: linear-gradient(to right, #3e84e0, #7159a8);
  color: #fff;
  border-radius: 15px;
  padding: 64px 0;
}
.section-blue h2,
.section-blue p,
.section-blue .small {
  color: #fff !important; /* ensure text readable */
}

/* Newsletter CTA fixes */
.newsletter-form-wrapper{
  flex-shrink: 0;
  max-width: 380px; /* cap width so it doesn't push text */
  width: 100%;
}

.newsletter-cta .form-control-sm{
  font-size:.85rem;
  padding:.35rem .6rem;
  height:auto;
}

.newsletter-cta .btn-sm{
  padding:.35rem .9rem;
  font-size:.85rem;
}

.logo-secy {
  max-height: 60px;     /* adjust size (try 40–60px for balance) */
  width: auto;
  display: inline-block;
  margin: 0 auto;
  object-fit: contain;  /* ensures full logo fits without cropping */
}
/* Blue gradient border for logo row */
.logo-row {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,   /* inner white background */
    linear-gradient(to right, #3e84e0, #7159a8) border-box; /* blue gradient border */
}
/* Credentials logo row box */
.logo-row {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;  /* reduced padding inside box */
  margin-top: 1.25rem; /* more gap from the title */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #3e84e0, #7159a8) border-box;
}

/* Logo badges sizing */
.logo-badge {
  max-height: 64px;   /* keeps badges smaller and uniform */
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
/* Testimonial cards with theme gradient */
.testimonial-card{
  background-image: var(--brand-grad-full);
  color:#fff;
  border:0;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.testimonial-card .small{ color:rgba(255,255,255,.85); }

/* Marquee layout for testimonials (uses existing main.js marquee logic) */
.testimonials-marquee{
  overflow:hidden;
  padding: 6px 0;           /* slim top/bottom breathing room */
}
.testimonials-marquee .marquee-track{
  display:flex;
  gap:16px;                 /* space between cards */
  width:max-content;        /* required for smooth loop */
  will-change: transform;
}

/* Card width in the track */
.tcard{
  min-width:360px;
  max-width:360px;
}
@media (max-width: 767.98px){
  .tcard{
    min-width:280px;
    max-width:280px;
  }
}

/* Pause on hover (optional) */
.testimonials-marquee:hover .marquee-track{
  animation-play-state: paused;
}
/* Gradient background for security cards */
#security .card {
  background-image: var(--brand-grad-full);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

#security .card h6,
#security .card p,
#security .card .small {
  color: #fff !important;
}

#security .card i,
#security .card .svg-icon {
  color: #fff !important;
}
/* Ensure the strip actually scrolls */
#video-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px; /* small breathing room for scrollbar */
}

/* Card width (so there's something to scroll) */
#video-strip .vcard { min-width: 320px; max-width: 320px; }
@media (max-width: 767.98px){
  #video-strip .vcard { min-width: 260px; max-width: 260px; }
}

/* Scroll buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
.scroll-btn:hover { background: rgba(0,0,0,0.75); transform: translateY(-50%) scale(1.04); }
.scroll-btn.left { left: -8px; }
.scroll-btn.right { right: -8px; }

/* Keep arrows inside on small screens */
@media (max-width: 576px){
  .scroll-btn.left { left: 6px; }
  .scroll-btn.right { right: 6px; }
}

/* Video thumbnail black border */
.video-card img {
  width: 100%;
  display: block;
  border: 1px solid #000;   /* black border */
  border-radius: 12px;
}

#videoModal .btn-close:hover {
  background: rgba(255,255,255,0.2);
}
/* === Video Modal — centered, edge-to-edge black, keep Close btn === */
#videoModal .modal-dialog{
  /* restore Bootstrap’s centering (horizontal) */
  margin: .5rem auto !important;
  max-width: min(900px, 92vw);
  width: 100%;
}

/* Mobile: no margins, full viewport width/height */
@media (max-width: 576.98px){
  #videoModal .modal-dialog{
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;                 /* no outer gap */
  }
  #videoModal .modal-content{
    border-radius: 0 !important;
    background: #000 !important;
  }
  #videoModal .modal-header{
    padding: .5rem .5rem !important;      /* keep Close button, minimal chrome */
    background: transparent !important;
    border: 0 !important;
  }
  #videoModal .modal-body{
    padding: 0 !important;
  }
  /* Let the video fill width; height follows 16:9 from .ratio */
  #videoModal .ratio{
    width: 100% !important;
    background: #000 !important;
    border-radius: 0 !important;
  }
  #videoModal iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: #000;
  }
}

#videoModal .modal-content{
  background: #000 !important;   /* remove any white/grey card look */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff;
}

#videoModal .modal-header{
  /* keep header so your Close button shows, but make it invisible chrome */
  background: transparent !important;
  border: 0 !important;
  padding: .5rem .5rem !important;
}

#videoModal .modal-body{ padding: 0 !important; }

#videoModal .ratio{
  background: #000 !important;
  border-radius: 0 !important;
}

#videoModal iframe{
  display: block;
  width: 100%;
  height: 100%;
  background: #000; /* avoids any flash */
}

/* (Optional) keep your gradient Close button style */
#videoModal .btn.btn-gradient {
  line-height: 1.1;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
#videoModal .btn.btn-gradient:hover { transform: translateY(-1px); }

/* Play badge hover expand */
.video-card { position: relative; overflow: hidden; border-radius: 12px; }
.play-badge{
  position:absolute; left:10px; bottom:10px;
  background:#000000c0; color:#fff; border-radius:999px;
  padding:6px 10px; display:flex; align-items:center; gap:6px;
  font-size:.9rem; cursor: pointer; user-select:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.video-card:hover .play-badge,
.play-badge:hover{
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  background:#000000dd;
}
/* Gold gradient for shiny stars */
.star.full,
.star.half::before,
.rating {
  background: linear-gradient(45deg, #ffcc33, #ff9900, #ffcc33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;   /* for Firefox */
  text-fill-color: transparent;
}

/* Empty stars (grey) */
.star.empty { color: #bbb; }

/* Half star: base grey, left half shiny gold */
.star.half {
  color: #bbb; /* empty base */
  position: relative;
}
.star.half::before {
  content: "★";
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  background: linear-gradient(45deg, #ffcc33, #ff9900, #ffcc33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* ================================
   Hiring Stepper (Thinner Blue Arrows)
================================= */
.hiring-stepper{
  --step-gap: 20px;                            /* horizontal gap between steps */
  --circle-size: 56px;                         /* circle diameter */
  --arrowhead-size: 12px;                      /* smaller arrowhead */
  --tip-gap: 6px;                              /* distance before next circle */
  --line-thickness: 2px;                       /* thinner line */
  --arrow-thickness: 10px;                     /* arrowhead height (slimmer) */
  --step-grad: linear-gradient(90deg, #3E84E0, #7159A8);
  --circle-fill: var(--brand-grad-full, linear-gradient(125deg, #185E55, #41D0BD));
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:var(--step-gap);
}

.hiring-stepper .step{
  position:relative;
  flex:1 1 0;
  min-width:140px;
  text-align:center;
}

.hiring-stepper .circle{
  width:var(--circle-size);
  height:var(--circle-size);
  border-radius:50%;
  background:var(--circle-fill);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  font-size:1.4rem;
  box-shadow:0 4px 10px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.25);
  position:relative;
  z-index:2;
}

.hiring-stepper h5{
  font-size:1rem;
  font-weight:600;
  margin-top:4px;
  color:#0f172a;
}

/* Connector line */
.hiring-stepper .step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:calc(var(--circle-size)/2);
  left:50%;
  transform:translateY(-50%);
  width:calc(
    100% + var(--step-gap)
    - (var(--circle-size)/2)
    - var(--tip-gap)
    - var(--arrowhead-size)
  );
  height:var(--line-thickness);
  background:var(--step-grad);
  z-index:0;
}

/* Arrowhead */
.hiring-stepper .step:not(:last-child)::before{
  content:"";
  position:absolute;
  top:calc(var(--circle-size)/2);
  left:calc(
    150% + var(--step-gap)
    - (var(--circle-size)/2)
    - var(--tip-gap)
    - var(--arrowhead-size)
  );
  transform:translateY(-50%);
  width:var(--arrowhead-size);
  height:var(--arrow-thickness);
  background:var(--step-grad);
  -webkit-clip-path:polygon(0% 0%,0% 100%,100% 50%);
          clip-path:polygon(0% 0%,0% 100%,100% 50%);
  z-index:1;
}

/* Mobile: stack vertically, hide connectors */
@media(max-width:768px){
  .hiring-stepper{
    flex-direction:column;
    align-items:center;
  }
  .hiring-stepper .step{
    width:100%;
    max-width:420px;
  }
  .hiring-stepper .step::after,
  .hiring-stepper .step::before{
    display:none;
  }
}
/* WHY US icon styles */
.ic {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  width:42px;
  height:42px;
  border-radius:6px;
  flex-shrink:0;
  color:#fff;
}
.ic-green  { background: linear-gradient(135deg,#28a745,#6ddc8e); }
.ic-blue   { background: linear-gradient(135deg,#007bff,#66b2ff); }
.ic-purple { background: linear-gradient(135deg,#6f42c1,#b68cff); }
.ic-orange { background: linear-gradient(135deg,#fd7e14,#fdbb5a); }
.ic-pink   { background: linear-gradient(135deg,#e83e8c,#ff80c0); }
.ic-red    { background: linear-gradient(135deg,#dc3545,#ff6b6b); }

/* SERVICES section icons with theme gradient border + gradient icon */
.svc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: #fff;
  color: transparent; /* icon text transparent */
  background-clip: text;
  -webkit-background-clip: text;
  background-image: var(--brand-grad-full, linear-gradient(135deg,#185E55,#41D0BD));
  z-index: 0;
}

.svc-ic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px; /* border thickness */
  background: var(--brand-grad-full, linear-gradient(135deg,#185E55,#41D0BD));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
/* Service card titles with blue gradient text */
.service-card .card-title {
  background: linear-gradient(135deg, #3E84E0, #7159A8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
/* Make card links clean */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Default service card */
.service-card {
  border: 1px solid transparent;  /* keep width constant to avoid layout shift */
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,                    /* card bg */
    linear-gradient(135deg, #3E84E0, #7159A8) border-box;       /* gradient border */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
  position: relative; /* future-safe for pseudo-element tricks */
}

/* Hover: no border-width change → no push; add glow + subtle lift only */
.service-card:hover {
  border: 1px solid transparent;  /* SAME width as base */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #3E84E0, #7159A8) border-box;       /* keep border look */
  box-shadow: 0 0 16px rgba(62,132,224,0.35);
  transform: translateY(-3px);  /* lift without changing layout flow */
}

/* Ensure all service cards are same height */
#services .row {
  display: flex;
  flex-wrap: wrap;
}

#services .col {
  display: flex;
}

#services .service-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* ===== Newsletter Modal (SCOPED to #subscribe-modal) ===== */
#subscribe-modal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: none;                 /* toggled via .is-open */
  align-items: center;
  justify-content: center;
  z-index: 1050;
}
#subscribe-modal.modal-overlay.is-open { display: flex; }

/* Newsletter dialog ONLY (no global .modal-dialog) */
#subscribe-modal .modal-dialog {
  position: relative;
  width: min(560px, 92vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
  padding: 24px;
  animation: modalIn 180ms ease-out;
}
@media (max-width: 480px) {
  #subscribe-modal .modal-dialog { padding: 20px; border-radius: 14px; }
}

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

/* Focus glow just for newsletter dialog */
#subscribe-modal .modal-dialog:focus-within {
  box-shadow: 0 10px 40px rgba(62,132,224,0.28);
}

/* Mobile */
@media (max-width: 480px) {
  #subscribe-modal .modal-dialog { padding: 20px; border-radius: 14px; }
}

/* (Keep existing .modal-close, .subscribe-form … rules as-is) */

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: #334155;
  padding: 6px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.modal-close:hover {
  background: #f1f5f9;
}

.modal-body h3 {
  margin: 0 0 6px 0;
}
.modal-body p.small { color: #475569; }

.subscribe-form .input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.subscribe-form input[type="email"] {
  width: 100%;
  height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.subscribe-form input[type="email"]:focus {
  border-color: #3E84E0;
  box-shadow: 0 0 0 4px rgba(62,132,224,0.15);
}

/* Reuse your gradient button; ensure min-height matches input */
.subscribe-form .btn-gradient {
  min-height: 44px;
  border-radius: 10px;
  white-space: nowrap;
  padding: 0 16px;
}

.form-hint { color: #64748b; margin-top: 10px; }

/* Utility for screen-reader-only label */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Prevent page scroll when modal open */
body.modal-open { overflow: hidden; }

/* Match hover glow style from cards for consistency */
.modal-dialog:focus-within {
  box-shadow: 0 10px 40px rgba(62,132,224,0.28);
}

/* Mobile */
@media (max-width: 480px) {
  .modal-dialog { padding: 20px; border-radius: 14px; }
  .subscribe-form .input-row { grid-template-columns: 1fr; }
}
/* Tools & Expertise section fix */
#tools .row {
  align-items: center; /* vertically center columns */
}

#tools .col-lg-5 {
  display: flex;
  align-items: center;     /* center image vertically */
  justify-content: center; /* optional: center horizontally too */
}

#tools .col-lg-5 img {
  max-height: 100%;
  object-fit: contain; /* ensures image scales properly */
}
/* WHY choose Smart Outsource – colorful icon badges */
.why-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 12px;
  flex-shrink: 0;
}

.ic-blue   { background: linear-gradient(135deg,#3E84E0,#66b2ff); }
.ic-green  { background: linear-gradient(135deg,#28a745,#6ddc8e); }
.ic-red    { background: linear-gradient(135deg,#dc3545,#ff6b6b); }
.ic-orange { background: linear-gradient(135deg,#fd7e14,#fdbb5a); }
.ic-purple { background: linear-gradient(135deg,#6f42c1,#b68cff); }
.ic-pink   { background: linear-gradient(135deg,#e83e8c,#ff80c0); }

/* Card hover (optional, like other sections) */
#why .card {
  transition: all .25s ease;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
#why .card:hover {
  border: 2px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#3E84E0,#7159A8) border-box;
  box-shadow: 0 0 16px rgba(62,132,224,0.25);
  transform: translateY(-3px);
}
/* ===== Header behavior ===== */

/* Navbar: sticky at top; smooth shrink on scroll */
#site-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  backdrop-filter: saturate(160%) blur(6px);
  transition: padding 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Collapsed (scrolled) state */
#nav-wrap.nav-collapsed #site-navbar {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Util bar must NOT be sticky; just scroll away naturally */
.util-bar {
  position: static !important;
  top: auto !important;
  transform: none !important;
  height: auto !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Kill any old rules that collapsed util-bar on scroll */
#nav-wrap.scrolled .util-bar,
#nav-wrap.shrink .util-bar {
  transform: none !important;
  height: auto !important;
  opacity: 1 !important;
}

/* Prevent layout jump when dropdowns open near the sticky boundary */
#site-navbar .dropdown-menu {
  margin-top: 0.25rem;
}

/* (Optional) Keep brand logo from resizing too aggressively */
#site-navbar .navbar-brand img {
  height: 42px;
  width: auto;
  transition: transform 150ms ease;
}
#nav-wrap.nav-collapsed .navbar-brand img {
  transform: scale(0.95);
}
/* === INDUSTRIES: pill marquee tweaks === */
#industries .industries-marquee{
  width: 100%;                 /* occupy full width of the section/container */
  padding-left: 0;             /* align with section text */
  padding-right: 0;
}
#industries .industries-track{
  gap: 14px;                   /* tighter pill gap than logo marquee */
  align-items: center;
}
#industries .tag-pill{
  background: #ffffffe6;       /* readable on gradient */
  white-space: nowrap;
}

/* Hide any horizontal scrollbar just in case (cross-browser) */
#industries .industries-marquee{
  overflow: hidden;            /* already set by .marquee, re-assert */
}
#industries .industries-marquee::-webkit-scrollbar{ display: none; height: 0; }

/* === Security section: icon alignment fix === */
#security .card i.bi,
#security .card .svg-icon {
  font-size: 2rem !important;   /* slightly bigger, not overwhelming */
  width: 2rem !important;
  height: 2rem !important;
  flex-shrink: 0;
  margin: 0 0.5rem 0 0;         /* right gap only, no top margin */
  display: inline-flex;
  align-items: center;          /* vertical center with text */
  line-height: 1;               /* kill extra line spacing */
}
#security .card .svg-icon * {
  stroke-width: 1.1;
}

/* === Security section: normalize inline lock SVG size === */
#security .card .svg-icon {
  width: 2.2rem !important;    /* close match to 2rem <i> icons */
  height: 2.2rem !important;
  flex-shrink: 0;
  margin: 0 0.5rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#security .card .svg-icon rect,
#security .card .svg-icon path {
  transform: scale(1.35);      /* gentle boost only */
  transform-origin: center;
}

/* === KPI circular meters === */
.kpi-meter{
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
}
.kpi-meter .meter{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start at 12 o'clock */
}
.kpi-meter circle{
  fill: none;
  stroke-width: 12;
}
.kpi-meter circle.bg{
  stroke: #d7d7d7;
  opacity: .8;
}
.kpi-meter circle.progress{
  stroke: #7a88b1;
  stroke-linecap: butt;
  /* r=54 => circumference ~339; set initial (empty) */
  stroke-dasharray: 339;
  stroke-dashoffset: 339;
}
.kpi-meter .kpi-number{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

/* Slightly smaller on mobile */
@media (max-width: 575.98px){
  .kpi-meter{ width: 130px; height: 130px; }
  .kpi-meter .kpi-number{ font-size: 1.4rem; }
}

/* === INDUSTRIES: arrow controls for marquee === */
#industries .industries-marquee{
  position: relative;
  padding-left: 36px;   /* leave space for left ctrl */
  padding-right: 36px;  /* leave space for right ctrl */
}

#industries .industries-marquee .ctrl{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;                /* rounded buttons */
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background .18s ease, transform .12s ease;
}
#industries .industries-marquee .ctrl.left{  left: 4px; }
#industries .industries-marquee .ctrl.right{ right: 4px; }

#industries .industries-marquee .ctrl:hover{
  background: rgba(0,0,0,0.75);
  transform: translateY(-50%) scale(1.05);
}

@media (max-width: 576px){
  #industries .industries-marquee{ padding-left: 28px; padding-right: 28px; }
  #industries .industries-marquee .ctrl{ width: 32px; height: 32px; }
  #industries .industries-marquee .ctrl.left{ left: 6px; }
  #industries .industries-marquee .ctrl.right{ right: 6px; }
}

/* Chat bubbles & typing */
#chatbot .body { overflow:auto; max-height: 320px; padding: .75rem; }
#chatbot .msg { display:flex; margin-bottom:.5rem; }
#chatbot .msg-user { justify-content:flex-end; }
#chatbot .msg-user .bubble { background: #0d6efd; color: #fff; }
#chatbot .msg-assistant .bubble { background: rgba(255,255,255,.08); color:#fff; }
#chatbot .bubble { border-radius: 16px; padding: .5rem .75rem; max-width: 85%; }
#chatbot .typing { display:flex; gap:.25rem; align-items:center; padding:.25rem .5rem; opacity: .7; }
#chatbot .typing .dot { width:6px; height:6px; border-radius:50%; background:#bbb; display:inline-block; animation: t 1s infinite ease-in-out; }
#chatbot .typing .dot:nth-child(2){ animation-delay:.15s }
#chatbot .typing .dot:nth-child(3){ animation-delay:.3s }
@keyframes t { 0%,80%,100%{ transform:scale(0.6); opacity:.5 } 40%{ transform:scale(1); opacity:1 } }

/* === TALENT: align stars & first lines across all cards === */
#talent .card-sm .card-body.align-items-center {
  align-items: flex-start !important; /* override center vertical alignment */
}

/* Normalize avatar so baseline is consistent across cards */
#talent .card-sm .card-body > img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex: 0 0 64px; /* keep image from stretching or shrinking */
}

/* Tighten rating row so second line (name) aligns too */
#talent .card-sm .rating {
  line-height: 1;      /* consistent row height for stars */
  margin-top: 0;       /* avoid random top gaps */
  margin-bottom: 4px;  /* small consistent spacing to the name line */
}

/* Ensure text column doesn’t center itself vertically if nested flex exists */
#talent .card-sm .card-body > div {
  align-self: flex-start;
}
/* === Chatbot: SmartBot sender line + quick-start === */
#chatbot .body { overflow:auto; max-height: 320px; padding:.75rem; }

#chatbot .msg { display:flex; flex-direction:column; margin-bottom:.5rem; }
#chatbot .msg-user { align-items:flex-end; }
#chatbot .msg-assistant { align-items:flex-start; }

#chatbot .msg .sender {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  margin-bottom: 2px;  /* ensures message is on second line */
  opacity: .9;
}

#chatbot .bubble {
  border-radius: 16px;
  padding: .5rem .75rem;
  max-width: 85%;
}
#chatbot .msg-user .bubble { background:#0d6efd; color:#fff; }
#chatbot .msg-assistant .bubble { background: rgba(255,255,255,.08); color:#fff; }

/* Typing dots */
#chatbot .typing { display:flex; gap:.25rem; align-items:center; padding:.25rem .5rem; opacity:.7; }
#chatbot .typing .dot { width:6px; height:6px; border-radius:50%; background:#bbb; display:inline-block; animation:t 1s infinite ease-in-out; }
#chatbot .typing .dot:nth-child(2){ animation-delay:.15s }
#chatbot .typing .dot:nth-child(3){ animation-delay:.3s }
@keyframes t { 0%,80%,100%{ transform:scale(.6); opacity:.5 } 40%{ transform:scale(1); opacity:1 } }

/* Quick-start menu */
#chatbot .quick-start { display:flex; flex-wrap:wrap; gap:.5rem; padding:.25rem 0 .5rem; }
#chatbot .quick-start .qbtn {
  border:1px solid rgba(255,255,255,.35);
  background: transparent;
  color:#fff;
  border-radius:999px;
  padding:.375rem .75rem;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
}
#chatbot .quick-start .qbtn:hover { background:rgba(255,255,255,.08); }
#chatbot .input.d-none { display:none !important; }
/* Chatbot: explicit hidden class for the input row */
#chatbot .input.hidden { display: none !important; }

/* === INSIGHTS: full-card click, hover magnify + glow, and "Listen" pill === */
.card.insight-enhanced {
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform, box-shadow;
}
.card.insight-enhanced:hover,
.card.insight-enhanced:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 170, 255, .25), 0 2px 10px rgba(0,0,0,.25);
  outline: none;
}
.card.insight-enhanced .card-img-top {
  transition: transform .3s ease, filter .3s ease;
}
.card.insight-enhanced:hover .card-img-top {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* Right-side "Listen" visual (non-clickable; whole card is the button) */
.listen-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: inherit;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
}
.listen-pill i { font-size: .9em; line-height: 1; }

/* === INSIGHTS: gradient-border "Listen" pill + consistent meta-row alignment === */

/* Consistent meta row: same line-height, min-height, and centering */
.insight-meta-row {
  display: flex;
  align-items: center;               /* vertical centering inside the row */
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
  line-height: 1.2;                  /* lock line height to keep baselines equal */
  min-height: 28px;                  /* ensures same row height across cards */
  font-size: .875rem;                /* same size for both sides */
}
.insight-meta-row > * {
  display: inline-flex;              /* equal baseline behavior */
  align-items: center;
}

/* Left side (read time) */
.insight-meta-row .read-time {
  color: var(--bs-secondary-color, rgba(255,255,255,.65));
}

/* Right side pill: transparent background, theme gradient BORDER */
.listen-pill {
  --so-gradient: var(--brand-gradient, linear-gradient(135deg, #00c2ff, #7a5cff));
  border: 1px solid #000000;     /* real border needed for the trick below */
  border-radius: 999px;
  padding: .22rem .6rem;
  background:
    linear-gradient(#0000, #0000) padding-box,   /* transparent interior */
    var(--so-gradient) border-box;               /* gradient border */
  color: inherit;
  font-weight: 600;
  letter-spacing: .1px;
  user-select: none;
  pointer-events: none;               /* whole card remains the click target */
  line-height: 1;                     /* matches the row line-height */
}
.listen-pill i {
  font-size: 1em;
  line-height: 1;
  margin-right: .2rem;   /* tighter gap between icon and text */
  padding-top: 1px;      /* subtle nudge downwards */
  display: inline-block; /* so padding-top takes effect */
}

/* Keep hover/scale/glow from earlier solution (card is the button) */
.card.insight-enhanced:hover,
.card.insight-enhanced:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 170, 255, .25), 0 2px 10px rgba(0,0,0,.25);
  outline: none;
}

/* === Site Loader Overlay (fade in/out) === */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2048;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loader-bg, rgba(0, 0, 0, 0.85)); /* darker: less transparent */
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
  pointer-events: none;
}

.site-loader.is-visible {
  opacity: 1;
  visibility: visible;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.site-loader .loader-inner img {
  width: 128px;                         /* keep the GIF native size */
  height: 128px;
  display: block;
}

/* Respect user preference: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .site-loader { transition: none; }
}

/* Optional: brandy backdrop (uncomment to use gradient)
// .site-loader {
//   --loader-bg: linear-gradient(135deg, rgba(0,194,255,.18), rgba(122,92,255,.18));
//   backdrop-filter: blur(2px);
// }

/* === Hero reveal only after loader is gone === */
#hero {
  transition: opacity 260ms ease, transform 260ms ease;
}

body.loading #hero {
  opacity: 0;
  transform: translateY(6px); /* prevent early “entry” animation flicker */
}

body.hero-ready #hero {
  opacity: 1;
  transform: none;
}

/* Reduce motion preference: skip transforms */
@media (prefers-reduced-motion: reduce) {
  #hero { transition: opacity 200ms ease; }
  body.loading #hero { transform: none; }
}

/* === Accent Confidence Audio === */
// INSERT BELOW THIS LINE: end-of-file
#accent-audio .card { border-radius: 1rem; }
#accent-audio .eq{
  display: inline-grid;
  grid-template-columns: repeat(10, 6px);
  align-items: end;
  gap: 4px;
  width: 100px;
  height: 24px;
}
#accent-audio .eq span{
  display:block;
  width:6px;
  height:4px;
  background: linear-gradient(180deg, #8ab4ff, #6f42c1);
  border-radius:2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
  opacity:.7;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }
#accent-audio .eq span:nth-child(2){ animation-delay: .05s; }
#accent-audio .eq span:nth-child(3){ animation-delay: .1s; }
#accent-audio .eq span:nth-child(4){ animation-delay: .15s; }
#accent-audio .eq span:nth-child(5){ animation-delay: .2s; }
#accent-audio .eq span:nth-child(6){ animation-delay: .25s; }
#accent-audio .eq span:nth-child(7){ animation-delay: .3s; }
#accent-audio .eq span:nth-child(8){ animation-delay: .35s; }
#accent-audio .eq span:nth-child(9){ animation-delay: .4s; }
#accent-audio .eq span:nth-child(10){ animation-delay: .45s; }

@keyframes eqPlay{
  0%{ height:4px }
  35%{ height:24px }
  70%{ height:10px }
  100%{ height:4px }
}
@keyframes eqPause{
  0%,100%{ height:6px }
  50%{ height:8px }
}

/* === Accent Confidence Audio (minimal) === */
/* INSERT BELOW THIS LINE: end-of-file */
#accent-audio .card { border-radius: 1rem; }
#accent-audio .eq{
  display: inline-grid;
  grid-template-columns: repeat(10, 6px);
  align-items: end;
  gap: 4px;
  width: 100px;
  height: 24px;
}
#accent-audio .eq span{
  display:block;
  width:6px;
  height:4px;
  background: linear-gradient(180deg, #8ab4ff, #6f42c1);
  border-radius:2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
  opacity:.7;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }
#accent-audio .eq span:nth-child(2){ animation-delay: .05s; }
#accent-audio .eq span:nth-child(3){ animation-delay: .1s; }
#accent-audio .eq span:nth-child(4){ animation-delay: .15s; }
#accent-audio .eq span:nth-child(5){ animation-delay: .2s; }
#accent-audio .eq span:nth-child(6){ animation-delay: .25s; }
#accent-audio .eq span:nth-child(7){ animation-delay: .3s; }
#accent-audio .eq span:nth-child(8){ animation-delay: .35s; }
#accent-audio .eq span:nth-child(9){ animation-delay: .4s; }
#accent-audio .eq span:nth-child(10){ animation-delay: .45s; }

@keyframes eqPlay{
  0%{ height:4px }
  35%{ height:24px }
  70%{ height:10px }
  100%{ height:4px }
}
@keyframes eqPause{
  0%,100%{ height:6px }
  50%{ height:8px }
}
/* === Accent Audio (gradient + full-width visualizer + centered controls) === */
/* INSERT BELOW THIS LINE: end-of-file */
#aa-ctrls {
  position: absolute;
  inset: 0;                        /* fill card-body */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;            /* let clicks pass through to card; buttons will re-enable */
}
#aa-ctrls .btn { pointer-events: auto; } /* re-enable on the buttons only */

#accent-audio .card-body.aa-gradient{
  background-image: var(--brand-grad-full, linear-gradient(135deg,#3E84E0,#7159A8));
  color: #fff;
  min-height: 140px;
  border-radius: 1rem;
}

/* Visualizer spans the whole width */
#accent-audio .eq{
  width: 100%;
  height: 72px;
  display: grid;
  grid-template-columns: repeat(48, 1fr); /* many thin bars across width */
  align-items: end;
  gap: 4px;
  opacity: .85;
}
#accent-audio .eq span{
  display:block;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.9);  /* light bars on gradient */
  border-radius: 2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }
/* slight stagger via nth-child; enough to look organic without custom JS */
#accent-audio .eq span:nth-child(4n+1){ animation-delay: .00s; }
#accent-audio .eq span:nth-child(4n+2){ animation-delay: .08s; }
#accent-audio .eq span:nth-child(4n+3){ animation-delay: .16s; }
#accent-audio .eq span:nth-child(4n+4){ animation-delay: .24s; }

@keyframes eqPlay{
  0%{   height: 8px; }
  35%{  height: 72px; }
  70%{  height: 18px; }
  100%{ height: 8px; }
}
@keyframes eqPause{
  0%,100%{ height: 10px; }
  50%{    height: 14px; }
}

/* Buttons readable on gradient */
#accent-audio .btn.btn-light{
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* === Accent Audio (half height, no bars behind controls) === */
/* INSERT BELOW THIS LINE: end-of-file */

/* Card body: theme gradient + 3-column grid */
#accent-audio .card-body.aa-gradient{
  background-image: var(--brand-grad-full, linear-gradient(135deg,#3E84E0,#7159A8));
  color:#fff;
  min-height: 80px; /* ~half previous height */
  border-radius: 1rem;
}
#accent-audio .aa-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left bars | controls | right bars */
  align-items: center;
  gap: 12px;
}

/* Visualizers now half height */
#accent-audio .eq{
  height: 36px; /* half of 72px */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6px;      /* thin bars */
  align-items: end;
  gap: 4px;
  opacity: .9;
}
#accent-audio .eq span{
  display:block;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9); /* light bars on gradient */
  border-radius: 2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }

/* organic stagger */
#accent-audio .eq span:nth-child(4n+1){ animation-delay: .00s; }
#accent-audio .eq span:nth-child(4n+2){ animation-delay: .08s; }
#accent-audio .eq span:nth-child(4n+3){ animation-delay: .16s; }
#accent-audio .eq span:nth-child(4n+4){ animation-delay: .24s; }

/* Controls centered; timer beneath buttons */
#aa-ctrls { min-width: 280px; }
#aa-ctrls .btn.btn-light{ box-shadow: 0 6px 20px rgba(0,0,0,.15); }
#aa-time { line-height: 1; }

/* Half-height keyframes */
@keyframes eqPlay{
  0%{   height: 8px; }
  35%{  height: 36px; }
  70%{  height: 16px; }
  100%{ height: 8px; }
}
@keyframes eqPause{
  0%,100%{ height: 8px; }
  50%{    height: 12px; }
}
/* === Accent Audio: fix overlap & spacing === */
/* Place 3 columns explicitly and prevent overflow */
#accent-audio .aa-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* L | C | R */
  align-items: center;
  gap: 12px;
}

/* Make sure each area sits only in its own column */
#accent-audio .eq-left  { grid-column: 1; justify-content: flex-end; }
#accent-audio #aa-ctrls { grid-column: 2; position: relative; z-index: 2; } /* above bars */
#accent-audio .eq-right { grid-column: 3; justify-content: flex-start; }

/* Visualizer containers must not bleed into center */
#accent-audio .eq{
  width: 100%;
  max-width: 100%;
  overflow: hidden;            /* clamp bars to their column */
  height: 36px;                /* half height preserved */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6px;      /* thin bars */
  align-items: end;
  gap: 4px;
  opacity: .9;
}

/* Bars (unchanged behaviour) */
#accent-audio .eq span{
  display:block;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }
#accent-audio .eq span:nth-child(4n+1){ animation-delay: .00s; }
#accent-audio .eq span:nth-child(4n+2){ animation-delay: .08s; }
#accent-audio .eq span:nth-child(4n+3){ animation-delay: .16s; }
#accent-audio .eq span:nth-child(4n+4){ animation-delay: .24s; }

/* Gradient body (kept), half height overall */
#accent-audio .card-body.aa-gradient{
  background-image: var(--brand-grad-full, linear-gradient(135deg,#3E84E0,#7159A8));
  color:#fff;
  min-height: 80px;
  border-radius: 1rem;
}

/* Timer + buttons */
#aa-ctrls .btn.btn-light{ box-shadow: 0 6px 20px rgba(0,0,0,.15); }
#aa-ctrls .btn { white-space: nowrap; }
#aa-time { display:block; line-height:1; text-align:center; }

/* Keyframes (same half-height animation) */
@keyframes eqPlay{
  0%{   height: 8px; }
  35%{  height: 36px; }
  70%{  height: 16px; }
  100%{ height: 8px; }
}
@keyframes eqPause{
  0%,100%{ height: 8px; }
  50%{    height: 12px; }
}

/* === Accent Audio: single centered button, half-height, no overlap === */
#accent-audio .card-body.aa-gradient{
  background-image: var(--brand-grad-full, linear-gradient(135deg,#3E84E0,#7159A8));
  color:#fff;
  min-height: 80px;            /* half the previous height target */
  border-radius: 1rem;
}

/* Strict 3-column grid: Left bars | Center button+timer | Right bars */
#accent-audio .aa-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
}
#accent-audio .eq-left  { grid-column: 1; justify-self: stretch; }
#accent-audio #aa-ctrls { grid-column: 2; justify-self: center; position: relative; z-index: 2; }
#accent-audio .eq-right { grid-column: 3; justify-self: stretch; }

/* Side visualizers (half height) */
#accent-audio .eq{
  width: 100%;
  max-width: 100%;
  overflow: hidden;            /* clamp bars to column */
  height: 36px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6px;      /* thin bars */
  align-items: end;
  gap: 4px;
  opacity: .9;
}
#accent-audio .eq span{
  display:block;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }
#accent-audio .eq span:nth-child(4n+1){ animation-delay: .00s; }
#accent-audio .eq span:nth-child(4n+2){ animation-delay: .08s; }
#accent-audio .eq span:nth-child(4n+3){ animation-delay: .16s; }
#accent-audio .eq span:nth-child(4n+4){ animation-delay: .24s; }

/* Button + timer */
#accent-audio #aa-toggle.btn.btn-light{ box-shadow: 0 6px 20px rgba(0,0,0,.15); }
#accent-audio #aa-time{ line-height: 1; }

/* Half-height keyframes */
@keyframes eqPlay{
  0%{   height: 8px; }
  35%{  height: 36px; }
  70%{  height: 16px; }
  100%{ height: 8px; }
}
@keyframes eqPause{
  0%,100%{ height: 8px; }
  50%{    height: 12px; }
}
/* === Accent Audio: single centered button, side visualizers, half height === */
#accent-audio .card-body.aa-gradient{
  background-image: var(--brand-grad-full, linear-gradient(135deg,#3E84E0,#7159A8));
  color:#fff;
  min-height: 80px;
  border-radius: 1rem;
}

#accent-audio .aa-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* L | C | R */
  align-items: center;
  gap: 12px;
}

#accent-audio .eq-left  { grid-column: 1; justify-self: stretch; }
#accent-audio #aa-ctrls { grid-column: 2; justify-self: center; position: relative; z-index: 2; }
#accent-audio .eq-right { grid-column: 3; justify-self: stretch; }

#accent-audio .eq{
  width: 100%;
  max-width: 100%;
  overflow: hidden;            /* keep bars inside column */
  height: 36px;                /* half-height visualizer */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6px;      /* thin bars */
  align-items: end;
  gap: 4px;
  opacity: .9;
}

#accent-audio .eq span{
  display:block;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9); /* light bars on gradient */
  border-radius: 2px;
  transform-origin: bottom center;
  animation: eqPause 1s infinite;
}
#accent-audio .eq.playing span{ animation: eqPlay 0.8s infinite ease-in-out; }
#accent-audio .eq span:nth-child(4n+1){ animation-delay: .00s; }
#accent-audio .eq span:nth-child(4n+2){ animation-delay: .08s; }
#accent-audio .eq span:nth-child(4n+3){ animation-delay: .16s; }
#accent-audio .eq span:nth-child(4n+4){ animation-delay: .24s; }

#accent-audio #aa-toggle.btn.btn-light{ box-shadow: 0 6px 20px rgba(0,0,0,.15); }
#accent-audio #aa-time{ line-height: 1; }

/* Animations tuned for half height */
@keyframes eqPlay{
  0%{   height: 8px; }
  35%{  height: 36px; }
  70%{  height: 16px; }
  100%{ height: 8px; }
}
@keyframes eqPause{
  0%,100%{ height: 8px; }
  50%{    height: 12px; }
}
/* === Accent Audio (Left button, right visualizer, timer at end) === */
/* Card: emphasise left corners; keep overall rounding clean */
.aa-rounded-left {
  border-radius: 1rem;
  border-top-left-radius: 1.75rem;
  border-bottom-left-radius: 1.75rem;
}

/* Theme gradient background of the strip */
#aa-accent-placeholder{} /* no-op to anchor block */
#accent-audio .aa-gradient{
  background-image: var(--brand-grad-full, linear-gradient(135deg,#1f487e,#2b185a,#4a1774));
}

/* Round button size */
#accent-audio .aa-btn{
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
#accent-audio .aa-btn i { font-size: 1.5rem; line-height: 1; }

/* Full-width visualizer */
#accent-audio .eq{
  height: 36px;                 /* half-height look */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6px;       /* bar width */
  align-items: end;
  gap: 4px;
  overflow: hidden;
}

/* Bars: colour set via inline style from JS for a classy gradient sweep */
#accent-audio .eq span{
  display:block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  opacity: .9;
  transform-origin: bottom center;
  animation: aaEqPause 1s infinite;
}

/* Animate only while playing (JS toggles .playing) */
#accent-audio .eq.playing span{
  animation: aaEqPlay .9s infinite ease-in-out;
}
#accent-audio .eq.playing span:nth-child(3n+1){ animation-delay: .00s; }
#accent-audio .eq.playing span:nth-child(3n+2){ animation-delay: .10s; }
#accent-audio .eq.playing span:nth-child(3n+3){ animation-delay: .20s; }

@keyframes aaEqPlay{
  0%   { height: 10px }
  35%  { height: 36px }
  70%  { height: 16px }
  100% { height: 10px }
}
@keyframes aaEqPause{
  0%,100% { height: 10px }
  50%     { height: 14px }
}
/* === Accent Audio Tweaks: black icons + fully rounded card === */

/* Card: fully rounded (pill) */
#accent-audio .card.aa-rounded-left {
  border-radius: 9999px !important; /* fully rounded */
}

/* Force button icons to stay black regardless of state */
#accent-audio .aa-btn i {
  color: #000 !important;
}
/* === Accent Audio: round button with blue gradient glow border === */
#accent-audio .aa-btn {
  background-color: #fff;                  /* keep white background */
  border: 3px solid transparent;           /* space for gradient border */
  border-radius: 50% !important;           /* fully round */
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-image:
    linear-gradient(#fff, #fff),            /* button fill */
    linear-gradient(135deg,#3E84E0,#7159A8);/* glow border (same as Chat Now) */
  box-shadow: 0 0 12px rgba(62,132,224,0.6);/* soft glow */
}

#accent-audio .aa-btn:hover {
  box-shadow: 0 0 16px rgba(62,132,224,0.9);
  transform: scale(1.05);
  transition: all .2s ease;
}

#accent-audio .aa-btn i {
  color: #000 !important;                  /* always black icon */
}

/* ==== FAQ styles ==== */
.faq-card{
  border-radius: 16px;
  border: 1px solid transparent;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(to right, #3e84e0, #7159a8); /* gradient edge */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

/* Accordion cosmetics */
#faq .accordion-item{
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#faq .accordion-item:last-child{ border-bottom: 0; }

#faq .accordion-button{
  font-weight: 700;
  border-radius: 12px !important;
  padding: .9rem 1rem;
  background: #f8fafc;
  color: #0b1020;
  gap: .35rem;
}
#faq .accordion-button i{ font-size: 1.05rem; }

#faq .accordion-button:not(.collapsed){
  background-image: var(--brand-grad-full);
  color: #fff;
  box-shadow: none;
}
#faq .accordion-button:focus{ box-shadow: none; }

#faq .accordion-body{
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: .9rem 1rem 1.1rem 1rem;
  color: #0f172a;
}

/* Mobile spacing tweaks */
@media (max-width: 575.98px){
  #faq .accordion-button{ padding: .8rem .9rem; }
  #faq .accordion-body{ padding: .8rem .9rem 1rem; }
}

/* === Newsletter toast: balanced larger size === */
#nlToast{
  --bs-toast-max-width: 400px;
  font-size: 0.875rem;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(255,255,255,.2);
}

#nlToast .toast-body{
  padding: 2rem 2.25rem;
  line-height: 1.4;
}

#nlToast .btn-close{
  transform: scale(1.1);
}

/* === Integrated overrides: industry tint, chips, pairs, stats, logos === */
.hero-industry{
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(20,184,166,.28), transparent),
    radial-gradient(1000px 500px at 90% 0%, rgba(168,85,247,.22), transparent),
    linear-gradient(180deg, #0b1220 0%, #0b1220 70%);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.chip{border:1px solid rgba(255,255,255,.18); color:#e2e8f0; background:rgba(255,255,255,.06); padding:.35rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem;}
.chip i{opacity:.85}
.section-tint{background:linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%)}
.pair{border-left:4px solid #2563eb; background:#fff}
.pair.bad{border-left-color:#ef4444}
.pair.good{border-left-color:#22c55e}
.pair h6{margin-bottom:.25rem}
.ic-l{font-size:1.25rem; margin-right:.5rem; color:#2563eb}
.check-list i{color:#16a34a}
.stat-card{background:#0b1220; color:#c7d2fe; border:1px solid rgba(255,255,255,.08)}
.stat-card h3{color:#fff}
.logo-row img.logo-badge{filter:none; opacity:.95}

/* Ensure side accent survives any later border shorthands */
.card.pair {
  border-left-width: 4px !important;
  border-left-style: solid !important;
}
.card.pair h6 i { color: #2563eb; }
.card.pair.good h6 i { color: #22c55e; }
.card.pair.bad  h6 i { color: #ef4444; }

.card.p-3.h-100.border-start.border-4.border-danger-subtle h6 i {
  color: red;
}
.card.p-3.h-100.border-start.border-4.border-success-subtle h6 i {
  color: green;
}
/* === Payroll Savings Calculator (scoped) === */
#calculator-page .calc-card { border: 1px solid rgba(255,255,255,.08); }
#calculator-page .kpi-box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; padding: .75rem; }
#calculator-page .kpi-box .kpi-label { font-size: .85rem; color: #b9c3d8; }
#calculator-page .kpi-box.kpi-total { background: linear-gradient(90deg, rgba(62,132,224,.12), rgba(113,89,168,.12)); border-color: rgba(113,89,168,.25); }
#calculator-page .result-card { background: rgba(255,255,255,.04); border-radius: .9rem; }
/* ===== Payroll Savings Calculator (compact layout) ===== */
#calculator-page .calc-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start;
}
@media (max-width: 992px){
  #calculator-page .calc-wrap{ grid-template-columns:1fr; }
}
#calculator-page .section#savings-calculator .container{ padding-top:.5rem; padding-bottom:.5rem; }
#calculator-page .calc-card{ border:1px solid rgba(255,255,255,.08); border-radius:.9rem; }
#calculator-page .calc-card .card-body{ padding:1rem 1rem; }

/* compact form bits */
#calculator-page .form-label{ font-size:.85rem; }
#calculator-page .form-select.form-select-sm,
#calculator-page .form-control.form-control-sm{ padding:.35rem .5rem; font-size:.92rem; }
#calculator-page .add-on-pills{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.35rem 0 .25rem; }
#calculator-page .add-on-pills .pill{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:.25rem .5rem; border-radius:999px; font-size:.8rem; line-height:1.2;
  color:#d9e4ff; white-space:nowrap;
}

/* KPIs (tighter) */
#calculator-page .kpi-box{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:.6rem; padding:.5rem .6rem;
}
#calculator-page .kpi-box .kpi-label{ font-size:.78rem; color:#1d406d; }
#calculator-page .kpi-box .kpi-value{ font-weight:700; font-size:.95rem; }
#calculator-page .kpi-box.kpi-total{
  background:linear-gradient(90deg, rgba(62,132,224,.12), rgba(113,89,168,.12));
  border-color:rgba(113,89,168,.25);
}

/* Results panel fits beside form on laptops */
#calculator-page .result-list{ display:grid; grid-template-columns:1fr; gap:.6rem; }
#calculator-page .result-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:.8rem; padding:.75rem .9rem;
}
#calculator-page .result-top{ display:flex; align-items:center; gap:.6rem; }
#calculator-page .result-top .meta .title{ font-weight:600; }
#calculator-page .rank-badge{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background: var(--brand-grad-full); color:#fff; font-weight:800; font-size:.8rem;
}

/* Headline numbers: big, colorful, attention-grabbing */
#calculator-page .result-nums{ display:flex; align-items:baseline; gap:.6rem; margin-top:.35rem; flex-wrap:wrap; }
#calculator-page .save-pct{
  font-size:1.35rem; font-weight:900; letter-spacing:.5px;
  background:linear-gradient(90deg,#22c55e,#16a34a 50%,#22c55e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#calculator-page .save-amt {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff; /* white text */
  padding: .12rem .5rem;
  border-radius: .6rem;
  background: var(--btn-ring); /* purple brand gradient */
  border: none; /* let the gradient breathe */
  box-shadow: 0 6px 18px rgba(0,0,0,.25) inset;
}


/* Promote the leader visually */
#calculator-page .result-card.leader{
  background:linear-gradient(180deg, rgba(34,197,94,.10), rgba(34,197,94,.02));
  border-color:rgba(34,197,94,.35);
}

/* Remove old CSS-drawn flags */
#calculator-page .flag,
#calculator-page .flag::before,
#calculator-page .flag::after,
#calculator-page .flag-in,
#calculator-page .flag-ph,
#calculator-page .flag-bd {
  display: none !important;
  background: none !important;
  content: none !important;
  border: none !important;
}

/* New PNG flag style */
#calculator-page .flag-img {
  width: 28px;     /* consistent with your old flag size */
  height: 18px;    /* proportional */
  display: inline-block;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.2);
  object-fit: cover;
  margin: 0 8px;   /* spacing next to rank/title */
  vertical-align: middle;
}

/* ===== Calculator tweaks: equal heights + utilities ===== */
#savings-calculator .calc-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch; /* <-- make both columns same height */
}
@media (max-width: 992px){
  #savings-calculator .calc-wrap{ grid-template-columns: 1fr; }
}
#savings-calculator .calc-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}
#savings-calculator .calc-card .card-body{
  flex: 1;               /* <-- stretch the card bodies equally */
  display: flex;
  flex-direction: column;
}

/* hide helper (JS will toggle this) */
#savings-calculator .is-hidden{ display: none !important; }

/* Pre-note placeholder */
#savings-calculator .pre-note {
  display: block;
  background: rgba(62,132,224,.12);
  border: 1px solid rgba(62,132,224,.35);
  color: #1d406d;
  border-radius: 10px;
  padding: .6rem .75rem;
  margin-bottom: .6rem;
  font-size: .92rem;
}

/* === Bookings embed (book-consultation) === */
.booking-card {
  overflow: hidden;
  background: var(--brand-grad-full, linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #06b6d4 100%));
  color: #fff;
}

.booking-embed {
  width: 100%;
  height: 100%;
  min-height: 900px; /* desktop comfortable height */
  display: block;
  background: transparent;
}

.booking-embed iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  border: 0;
  background: transparent;
}

/* Tweak title row inside the card */
.booking-card .bi-calendar2-event {
  font-size: 1.1rem;
}

/* Small screens: give the iframe more vertical room */
@media (max-width: 576px) {
  .booking-embed { min-height: 1100px; }
}

/* Optional: if you use a CSP, ensure Bookings can render in an iframe.
   In HTTP headers (not CSS), avoid: X-Frame-Options: DENY/SAMEORIGIN.
   Allow frame-src to outlook.office.com in your CSP. */

/* === Bookings embed === */
.booking-card {
  overflow: hidden;
  background: var(--brand-grad-full,
    linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #06b6d4 100%));
  color: #fff;
}

.booking-embed {
  width: 100%;
  height: 100%;
  min-height: 900px; /* default desktop height */
  display: block;
}

.booking-embed iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  border: 0;
  background: transparent;
}

/* Extra height for small devices */
@media (max-width: 576px) {
  .booking-embed { min-height: 1100px; }
}
.booking-embed {
  width: 100%;
  min-height: 900px; /* enough vertical space for form */
  display: block;
}

.booking-embed iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}