/* ==== site.css (layout & components) ==== */

/* Base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }
img,video,iframe{ max-width:100%; height:auto; }

/* Container widths:
   - mobile: ~94%
   - >=900px (tablet/desktop): 80%, capped at 1200px */
.container{
  width:min(94%, 1200px);
  margin-inline:auto;
  padding: clamp(16px, 2vw, 28px);
  background:var(--surface);
  box-shadow: var(--shadow-1);
  border-radius:12px;
}
@media(min-width:900px){
  .container{ width:min(80%, 1200px); }
}

/* Progress bar (top of viewport) */
#scroll-progress{
  position:fixed; inset:0 0 auto 0;
  height:3px; background:var(--progress);
  transform-origin:0 50%;
  transform:scaleX(0);
  z-index:2000;
}

/* Header */
:root{ --header-h: clamp(56px, 6vw, 80px);
	   --header-height: var(--header-h);
 }
.site-header{
  position:sticky; top:0; z-index:1500;
  background:var(--header-bg);
  box-shadow:0 1px 0 var(--border);
}
.site-header.scrolled{ box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.site-header__inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-inline: clamp(12px, 4vw, 28px);
}

/* Brand */
.brand{ display:inline-flex; align-items:center; gap:.6rem; min-width:0; }
.brand img{ height: clamp(28px, 5vw, 44px); width:auto; display:block; }

/* Toggle */
.nav-toggle{
  display:none;
  width:44px; height:36px; border:0; border-radius:10px;
  background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle .bar{
  display:block; width:22px; height:2px; background:var(--text);
  position:relative; border-radius:2px;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:inherit; border-radius:2px;
}
.nav-toggle .bar::before{ top:-6px; }
.nav-toggle .bar::after { top: 6px; }
.nav-toggle.active .bar{ background:transparent; }
.nav-toggle.active .bar::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle.active .bar::after { transform:translateY(-6px) rotate(-45deg); }
.nav-toggle.active .bar::after { transform:translateY(-6px) rotate(-45deg); }

/* Nav (desktop) */
.site-nav{ isolation:isolate; display: flex; align-items: center; gap: .75rem; }
.site-nav a:focus-visible {
  outline: 2px solid #2b7bc8;
  outline-offset: 2px;
  border-radius: 4px;
}
.site-nav .menu{ list-style:none; margin:0; padding:0; display:flex; gap:.25rem; }
.site-nav .menu > li{ position:relative; }
.site-nav .menu > li > a{ display:block; padding:.7rem .9rem; border-radius:10px; color:var(--text); font-weight:600; }
.menu > li > a:hover,
.menu > li > a.active{ background:rgba(10,99,184,.10); color:var(--brand-700); }


/* Submenu (desktop hover/focus) */
.has-submenu > a{ padding-right:2rem; }
.has-submenu > a::after{
  content:"▾"; font-size:.75rem; margin-left:.4rem; color:var(--muted);
}
.site-nav .submenu{
  position:absolute; top: calc(100% + 8px); left:0;
  min-width: 220px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow: var(--shadow-2);
  padding:.5rem; display:none; transform-origin: top; transform: scaleY(0.98);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.site-nav .submenu li a{ display:block; padding:.55rem .7rem; border-radius:8px; color:var(--text); font-weight:600; }
.submenu li a:hover{ background:rgba(10,99,184,.10); color:var(--brand-700); }
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu{ display:block; }
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.site-nav.open .submenu { /* shown on mobile when drawer open */
  opacity: 1;
  transform: scaleY(1);
}

/* Mobile drawer */
@media(max-width:900px){
  .nav-toggle{ display:inline-flex; z-index:1600; }
  .site-nav{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(88vw, 380px); height:100dvh; overflow:auto;
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-12px 0 30px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .28s ease;
    z-index:1550;
    padding-top: var(--header-current, var(--header-h));
  }
  .site-nav.open{ transform:translateX(0); }
  .site-nav .menu{ flex-direction:column; gap:.25rem; padding:1rem; }
  .site-nav .submenu{ position:static; display:block; border:none; box-shadow:none; padding:.25rem 0 .5rem 1rem; }
  .site-nav .submenu li a{ padding:.5rem .5rem; }
}

/* Backdrop (clickable) */
.backdrop{
  position:fixed; inset:0; background:var(--overlay);
  opacity:0; transition:opacity .2s ease;
  z-index:1400;
}
.backdrop.show{ opacity:1; }
[hidden]{ display:none !important; }

/* Lock scroll when drawer is open */
html.nav-open, /* Body lock when menu open */ body.nav-open { position: fixed; inset: 0; width: 100%; overflow: hidden; }


/* Headings */
h1,h2,h3{ line-height:1.2; margin: 0 0 .5em; }
h1{ font-size: clamp(28px, 1.4vw + 22px, 34px); }
h2{ font-size: clamp(22px, 1vw + 18px, 28px); }

/* Utilities */
hr{ border:0; border-top:1px solid var(--border); margin:1.25rem 0; }
blockquote{ margin:1rem 0; padding: .5rem 1rem; border-left:4px solid var(--brand-600); background:rgba(10,99,184,.06); }


/* ===== Desktop dropdown: remove hover gap + keep open while crossing ===== */
@media (min-width: 901px) {
  /* Make the parent a positioning context */
  .site-nav .menu > li.has-submenu { position: relative; margin: 0; padding: 0; list-style:none;}

  /* Submenu sits flush under the parent item (no margin gap) */
  .site-nav .submenu {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);   /* -1px if your top link has a bottom border; use 100% if not */
    margin: 0;               /* kill any default margins that create gaps */
    z-index: 1000;           /* keep it above header content */
  }

  /* Invisible “mouse bridge” directly under the parent link so :hover never breaks */
  .site-nav .menu > li.has-submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;            /* adjust if you like more forgiveness */
  }

  /* If your submenu had margin-top in earlier CSS, force it off */
  .site-nav .submenu { margin-top: 0 !important; }

  /* Optional: ensure header and inner wrappers don't clip the dropdown */
  .site-header, .site-header__inner { overflow: visible; }
}

/* If you use the subtle scale/opacity animation, keep it but ensure pointer-events work */
.site-nav .submenu {
  pointer-events: none;      /* default hidden state */
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.site-nav.open .submenu {    /* mobile drawer case */
  pointer-events: auto;
}
.has-submenu.open > .submenu { 
    opacity: 1; 
    transform: scaleY(1); 
    pointer-events: auto; 
  }
.site-nav .submenu a { display: block; }
.site-nav li { list-style-type: none !important; }

/* Screen-reader only (hide visually, keep accessible) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 0) !important; /* fallback */
  clip-path: inset(50%) !important;    /* modern */
  white-space: nowrap !important;
  border: 0 !important;
}

/* Responsive video embeds (Vimeo/YouTube/etc.)  -------------------------- */
.video {
  position: relative;
  width: 100%;
  margin: 1rem 0;
  background: #000;               /* hides letterbox edges */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--elev-2, 0 6px 20px rgba(0,0,0,.12));
}

/* Fallback: 16:9 aspect ratio using padding hack */
.video::before {
  content: "";
  display: block;
  padding-top: 56.25%;            /* 9 / 16 = 0.5625 */
}

/* Make the iframe fill the box */
.video iframe,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Use native aspect-ratio when supported (preferred) */
@supports (aspect-ratio: 16/9) {
  .video { aspect-ratio: 16/9; }
  .video::before { display: none; padding: 0; }
}

/* Optional: constrain super-wide screens to our content width */
.video { max-width: var(--content-max, 1120px); margin-inline: auto; }


/* ===== Testimonials / Carousel ===== */
.testimonials { margin-block: clamp(24px, 3vw, 48px); }
.testimonials h1 { margin-bottom: clamp(12px, 2vw, 16px); }

/* ==== Testimonials Carousel (no drift) ==== */
.carousel { position: relative; overflow: hidden; }
/* Track: no gaps; transition on transform only */
.carousel-track {
  display: flex;
  gap: 0;                     /* important: no inter-slide gap */
  transition: transform 420ms ease;
  will-change: transform;
  transform: translate3d(0,0,0); 
}
/* Each slide is exactly one “viewport” wide */
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;     /* padding stays inside that 100% */
  padding: 1.25rem;           /* put spacing inside slides */
  transform: translate3d(0,0,0);
}
.carousel-slide blockquote {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--surface, #eef5fb);
  border-left: 4px solid var(--brand-600, #145da0);
  border-radius: .5rem;
}
.carousel .cite { margin: .75rem 0 0; color: #555; }

/* controls/dots (keep yours or use these) */
.carousel-controls {
  position: absolute; inset: auto 1rem 1rem 1rem;
  display: flex; justify-content: space-between; pointer-events: none;
}
.carousel-prev, .carousel-next {
  pointer-events: auto;
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  display: grid; place-items: center; cursor: pointer;
}
.carousel-prev { position: absolute; left: 1rem; bottom: 1rem; }
.carousel-next { position: absolute; right: 1rem; bottom: 1rem; }

.carousel-dots {
  display: flex; justify-content: center; gap: .5rem; margin-top: .75rem;
}
.carousel-dots button {
  width: 10px; height: 10px; border-radius: 999px; border: 0;
  background: #cfd8e3; cursor: pointer;
}
.carousel-dots button.active { background: var(--brand-600, #145da0); }


/* Full testimonials list */
.testimonials-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 2vw, 20px);
}
.testimonials-list li {
  background: var(--surface, #fff);
  border-radius: 14px;
  padding: clamp(14px, 2vw, 20px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.testimonials-list blockquote { margin: 0 0 .35rem; }
.testimonials-list footer { opacity: .75; font-weight: 600; }



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

/* Desktop search bar in header */
.site-search {
  margin-left: auto; /* push to the right end */
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line,#e7e7e7);
  border-radius: 999px; padding: .4rem .6rem; min-width: 260px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.site-search input[type="search"]{
  border: 0; outline: 0; background: transparent;
  width: 100%; font: inherit; color: var(--text,#1b1f23);
}
.site-search .search-submit{
  display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--brand-10,#eef6ff); cursor: pointer;
}
.site-search .search-submit:hover{ background: var(--brand-20,#e2f0ff); }

/* Mobile: hide full search, show icon button */
.search-toggle{
  margin-left: auto;
  background: transparent; border: 0; display: none; color: #0b3b63; cursor: pointer;
}
@media (max-width: 900px){
  .site-header .site-search { display: none; }
  .search-toggle{ display: inline-grid; /* … */ }
}

/* Mobile overlay search bar (open state) */
@media (max-width: 900px){
  .site-header .site-search { display: none; }
  .site-header .site-search.open{
    position: fixed; left: 0; right: 0; top: var(--header-height,64px);
    z-index: 1001; display: flex;
    margin: 0; border-radius: 0;
    padding: .75rem 1rem; min-width: 0;
    background: #fff; border-top: 1px solid #e6e9ee; border-bottom: 1px solid #e6e9ee;
  }
}
/* Search results page */
.search-results { display: grid; gap: 1rem; }
.search-result {
  padding: 1rem 1.25rem; border-radius: 12px;
  border: 1px solid #e7ebf0; background: #fff;
  box-shadow: 0 1px 6px rgba(5,25,45,.04);
}
.search-result h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: #0b3b63; }
.search-result p { margin: 0; color: #414b57; }
.search-result mark {
  background: #fff3c4; color: inherit; padding: 0 .15em; border-radius: 3px;
}
.auth-wrap { display:grid; place-items:center; min-height:40vh; }
.auth-card {
  width:min(560px, 92%);
  background:#fff; border:1px solid var(--border,#e7ebf0);
  border-radius:14px; padding:clamp(16px,2.5vw,28px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.auth-card h1 { margin:0 0 .25rem; }
.auth-card .muted { color:#6b7280; margin:0 0 1rem; }
.auth-error {
  background:#fff3f3; color:#b42318;
  border:1px solid #ffd6d6; border-radius:10px;
  padding:.6rem .75rem; margin:.25rem 0 1rem;
}
.auth-form { display:flex; gap:.5rem; }
.auth-form input {
  flex:1; min-width:0;
  padding:.7rem .9rem; border:1px solid var(--line,#e7e7e7);
  border-radius:10px; font:inherit;
}
.auth-form button {
  padding:.7rem 1rem; border:0; border-radius:10px;
  background:var(--brand-600,#145da0); color:#fff; font-weight:600; cursor:pointer;
}
.auth-form button:hover{ background:var(--brand-700,#0d4e8b); }

/* Remove header text search (we're using an icon button now) */
.site-header .site-search { display: none !important; }
.search-toggle { display: none !important; }

/* Round icon button used for the Search action in header */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border, #e6eaef);
  background: #fff;
  color: var(--text, #1b1f23);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.icon-btn:hover { background: #f7f9fb; border-color: #dfe6ee; }
.icon-btn:active { transform: translateY(1px); }

/* Align the search icon to the right end of the nav row */
.site-nav { display: flex; align-items: center; gap: .5rem; }
.site-nav .menu { margin: 0; }
.search-btn { margin-left: auto; }

/* In the mobile drawer it should be full-width and comfy to tap */
@media (max-width: 900px) {
  .search-btn {
    margin-left: 0;
    width: 100%; height: 44px;
    border-radius: 10px;
  }
}

/* Obfuscation UI */
.obfuscated { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.reveal-btn {
  appearance: none;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e9ee);
  border-radius: 999px;
  padding: .45rem .8rem;
  font: inherit;
  color: var(--text, #1b1f23);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.reveal-btn:hover { background: var(--brand-10, #eef6ff); border-color: var(--brand-20, #e2f0ff); }

.revealed-link { font-weight: 600; color: var(--brand-700, #0a63b8); }
.revealed-link:hover { text-decoration: underline; }


.alert { padding:.75rem 1rem; border-radius:8px; margin:0 0 1rem; }
.alert.success { background:#eefbf1; border:1px solid #cce9d5; color:#175c2c; }
.alert.error   { background:#fff4f4; border:1px solid #f2caca; color:#8b2121; }

.contact-form .form-row { margin-bottom: .75rem; }
.contact-form input, .contact-form textarea { width:100%; padding:.6rem .7rem; border:1px solid #d9e1ea; border-radius:8px; }
.contact-form label { display:block; margin-bottom:.3rem; font-weight:600; }
.contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn { display:inline-block; padding:.6rem 1rem; border:0; border-radius:999px; background:#1059a6; color:#fff; cursor:pointer; }
.btn:hover { background:#0d4a88; }

.logout-inline .btn.link.sm { background:none;border:0;padding:0;font:inherit;cursor:pointer;color:inherit;text-decoration:underline; }

/* Content links = blue; nav stays black via .site-nav rules */
.container a:not(.button) {
  color: var(--link, #0b69d0);
}
.container a:not(.button):hover {
  color: var(--link-hover, #0a58b5);
  text-decoration: underline;
}

/* (keep) nav links black/charcoal */
.site-nav .menu > li > a,
.site-nav .submenu li a {
  color: var(--text, #1c2430);
}
/* --- Search page fixes (content form only) --- */
.container .site-search {
  display: flex;               /* ensure flex in case header rules changed */
  align-items: center;
  overflow: hidden;            /* clip the inner button to the pill */
}

.container .site-search input[type="search"] {
  flex: 1 1 auto;
  min-height: 40px;            /* keep the pill tall enough */
}

.container .site-search .search-submit {
  width: auto;                 /* let text size it */
  height: auto;
  padding: .45rem .8rem;       /* comfy pill */
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;         /* keep “Search” on one line */
  background: var(--brand-10, #eef6ff);
}
/* --- Mobile drawer layout fix --- */
@media (max-width: 900px){
  .site-nav{
    display: flex;                 /* switch from row to column */
    flex-direction: column;
    align-items: stretch;
    padding: .75rem;
  }

  .site-nav .menu{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
    padding: .25rem 0;
  }

  /* Full-width tappable rows */
  .site-nav .menu > li > a{
    display: block;
    width: 100%;
    padding: .9rem 1rem;
    border-radius: 10px;
  }

  /* Submenu stays inline and indented */
  .site-nav .submenu{
    position: static;
    display: block;
    border: none; box-shadow: none;
    padding: .25rem 0 .5rem 1rem;
  }

  /* Make the search button a full-width row inside the drawer */
  .site-nav .search-btn{
    align-self: stretch;
    width: 100%;
    height: 44px;
    border-radius: 10px;
    margin: .5rem 0 0;
  }
}


/* ---- Section blocks ---- */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  padding: clamp(16px, 2.2vw, 28px);
  margin-block: clamp(14px, 2vw, 22px);
}
.section--alt {
  background: linear-gradient(180deg, #fff, color-mix(in srgb, #fff 88%, var(--bg)));
}
.section--tight { padding: clamp(12px, 1.4vw, 18px); }

/* Edge fade separator between sections */
.edge-fade {
  height: 18px; margin: 8px 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent);
  border-radius: 12px;
  opacity: .4;
}

/* Lift-on-hover utility (apply to .card, .search-result, etc.) */
.lift { transition: transform .14s ease, box-shadow .18s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }

/* Make existing cards use lift without changing markup */
.search-result { box-shadow: var(--elev-1); }
.search-result.lift:hover { box-shadow: var(--elev-2); }

/* Testimonials slides feel a touch more “cardy” on hover */
.carousel-slide .lift { will-change: transform; }

/* Sticky header: add glassy feel when scrolled */
.site-header.scrolled {
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  box-shadow: 0 6px 18px rgba(12,22,36,.08);
}

/* Soft outline on focus for interactive elements inside content */
.container :is(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reveal-on-scroll (graceful, a11y aware) */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lift, .reveal { transition: none !important; transform: none !important; }
}




/* Feature list (unstyled UL → tidy grid) */
.feature-list { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .5rem; }
.feature-list li { display: flex; gap: .55rem; align-items: flex-start; }

/* Generic bullet list spacing */
.bullet-list { margin: .5rem 0; display: grid; gap: .4rem; }

/* Steps: nice counters that work with emojis too */
.steps { margin: .5rem 0; padding-left: 1.25rem; }
.steps li { margin: .25rem 0; }

/* Facts (definition list) */
.facts { margin: .75rem 0; }
.facts dt { font-weight: 700; margin-top: .75rem; }
.facts dd { margin: .25rem 0 0 0; color: #414b57; }

/* Subtle highlight line for short callouts */
.highlight {
  display: inline-block;
  padding: .25rem .4rem;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--brand-600, #0a63b8) 10%, #fff) 60%);
  border-radius: 6px;
}

/* Consistent appearance: no reveal animations anywhere */
.reveal,
.reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Lightweight, consistent section elevation */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(12,22,36,.06); /* gentle, performant */
}

/* Optional: tiny hover “lift” only for pointer devices (no effect on touch) */
@media (hover: hover) and (pointer: fine) {
  .lift { transition: transform .1s ease, box-shadow .15s ease; }
  .lift:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(12,22,36,.10); }
}

/* No backdrop blur — identical look on mobile & desktop */
.site-header.scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(12,22,36,.08);
}

/* Testimonials intro */
.testimonials-intro { display: grid; gap: .6rem; }
.stat-card {
  display: grid; gap: .15rem; align-content: start;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, #fff 88%, var(--bg)));
  border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem 1rem; box-shadow: 0 6px 18px rgba(12,22,36,.06);
  max-width: 420px;
}
.stat-value { font-size: clamp(28px, 3.2vw + 12px, 40px); font-weight: 800; line-height: 1; color: var(--brand-700, #0a63b8); }
.stat-label { font-weight: 700; }
.stat-sub   { color: #6b7280; font-size: .95rem; }

/* Skeleton / loading state */
#testimonials-list .skeleton {
  padding: .9rem 1rem; border: 1px dashed #d7dee7; border-radius: 12px; color: #6b7280;
}

/* Ensure each testimonial reads like a card (you already have base styles) */
.testimonials-list li blockquote { margin: 0 0 .35rem; }
.testimonials-list li footer { opacity: .8; font-weight: 600; }

/* Unlock UI: spinner + progress */
.btn.loading .btn-label { opacity: .9; }
.btn .spinner {
  display: none;
  width: 16px; height: 16px;
  margin-left: .5rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.btn.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.unlock-ui { margin-top: .5rem; display: grid; gap: .4rem; }
.unlock-progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #e9eff6; border: 1px solid #dfe6ee;
}
.unlock-progress .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--progress, #1a73e8), #6aa9ff);
  width: 0; transition: width .25s ease;
}
.unlock-status { font-size: .95rem; color: #475569; }

/* --- Training drawers --- */
.drawer-list { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.drawer {
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 4px rgba(12,22,36,.04);
  overflow: clip;
}
.drawer summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem; font-weight: 700;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer .chev::before { content: "▸"; display: inline-block; transition: transform .15s ease; }
.drawer[open] .chev::before { transform: rotate(90deg); }

.drawer .drawer-panel { padding: .75rem 1rem 1rem; border-top: 1px solid var(--border, #e6e9ef); }

/* Use your existing responsive video styles */
.video { max-width: 100%; }

/* --- Training FAQ styling --- */
.faq h3 { margin: 0 0 .5rem; }
.faq .muted { color: #6b7280; margin: 0 0 .6rem; }

.faq-list { margin: 0; padding: 0; }
.faq-list dt {
  font-weight: 700;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border, #e6e9ef);
  position: relative;
}
.faq-list dt:first-of-type {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.faq-list dd {
  margin: .35rem 0 0 0;
  color: #414b57;
}

.faq-steps { margin: .35rem 0 0 1.2rem; }
.faq-steps li { margin: .15rem 0; }

/* Subtle Q/A bullets (decorative) */
.faq-list dt::before {
  content: "Q";
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-right: .4rem;
  border-radius: 999px; font-size: .75rem; font-weight: 800;
  color: #0a63b8; background: #eaf3ff;
}
.faq-list dd::before { content: "A: "; font-weight: 700; color: #0a63b8; }

/* Drawer CTA spacing */
.faq-cta { margin-top: 1rem; }


/* ===========================
   Compact mobile spacing
   =========================== */
@media (max-width: 520px){

  /* Page chrome */
  .site-header__inner { padding-inline: 12px; }
  .container { padding: 12px; }

  /* Section cards */
  .section {
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(12,22,36,.05);
  }
  .section > * { margin-block: .5rem; }
  .section > :first-child { margin-top: 0; }
  .section > :last-child { margin-bottom: 0; }

  /* Headings */
  h1 { font-size: clamp(22px, 5.5vw, 30px); margin-bottom: .35rem; }
  h2 { font-size: clamp(18px, 4.6vw, 24px); }
  h3 { font-size: clamp(16px, 4vw, 20px); }

  /* Drawers (Training) */
  .drawer-list { gap: .4rem; }
  .drawer { border-radius: 10px; }
  .drawer summary { padding: .6rem .8rem; }
  .drawer .drawer-panel { padding: .6rem .8rem .8rem; }

  /* Lists in content */
  .feature-list, .bullet-list { gap: .35rem; }
  .steps { padding-left: 1rem; }
  .facts dt { margin-top: .6rem; }

  /* Videos & figures */
  section > figure img, .video { border-radius: 10px; }

  /* Testimonials */
  .testimonials .carousel-slide { padding: .9rem; }
  .stat-card { padding: .6rem .8rem; }

  /* Buttons & icon buttons */
  .icon-btn { width: 34px; height: 34px; }
  .btn { padding: .55rem .9rem; border-radius: 10px; }

  /* Contact unlock progress */
  .unlock-ui { gap: .3rem; }
  .unlock-progress { height: 6px; }
}

/* Slightly tighter tablet too */
@media (min-width: 521px) and (max-width: 900px){
  .container { padding: 14px; }
  .section   { padding: 14px 16px; }
  .drawer summary { padding: .65rem .9rem; }
  .drawer .drawer-panel { padding: .7rem .9rem 1rem; }
}


/* Kill any earlier pseudo-element badges */
.faq-list dt::before,
.faq-list dd::before { content: none !important; }

/* Reset any leftover layout from earlier attempts */
.faq-list dt,
.faq-list dd {
  display: block !important;
  margin: 0;
  padding: 0 !important;
  line-height: 1.5;
}

/* Keep your dividers/spacing on questions */
.faq-list dt {
  font-weight: 700;
  margin-top: .9rem;
  padding-top: .9rem !important;
  border-top: 1px solid var(--border, #e6e9ef);
}
.faq-list dt:first-of-type { margin-top: 0; padding-top: 0 !important; border-top: 0; }

.faq-list dd { margin: .35rem 0 0 0; color: #414b57; }

/* Inline Q/A badge */
.qa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-right: .5rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 800; line-height: 1;
  color: #0a63b8; background: #eaf3ff;
  vertical-align: text-top;      /* keeps baseline tidy */
}

/* Ordered steps inside an answer */
.faq-steps { margin: .35rem 0 0 1.25rem; }
@media (max-width: 520px){ .faq-steps { margin-left: 1rem; } }