/* Ready 4 Life — Base Styles
   Notes:
   - Mobile-first, calm + warm
   - Uses system fonts for speed
   - Updated: hero split (text left / video right), wider hero on desktop,
     colourful larger highlight pills, accessibility tab (slide-out) styling.
*/

:root{
  --bg: #ffffff;
  --ink: #0b1220;
  --muted: #526072;
  --soft: #f6f8fb;
  --line: #e6edf5;

  /* Brand colours */
  --brand: #0ea5a4;
  --brand2:#2563eb;
  --warm:#f59e0b;
  --warm2:#fb7185;
  --paper:#fff7ed;

  --shadow: 0 18px 45px rgba(2, 6, 23, 0.10);
  --shadow2: 0 10px 25px rgba(2, 6, 23, 0.08);
  --radius: 22px;

  --ease: cubic-bezier(.2,.8,.2,1);

  /* Font scaling */
  --fontScale: 1;

  /* Shared type hierarchy */
  --typeH1: clamp(30px, 4vw, 52px);
  --typeH2: clamp(24px, 2.6vw, 32px);
  --typeBody: 16px;
  --lhBody: 1.72;

  /* Pill glow animation */
  --pillGrad: linear-gradient(90deg,
    rgba(14,165,164,0.22),
    rgba(37,99,235,0.20),
    rgba(245,158,11,0.20),
    rgba(251,113,133,0.18),
    rgba(14,165,164,0.22)
  );
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

/* Slightly larger base typography (still accessible) */
html{ font-size: 16px; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;

  /* Warm aesthetic layer */
  background:
    radial-gradient(ellipse at 10% 0%, rgba(245,158,11,0.10), transparent 55%),
    radial-gradient(ellipse at 95% 10%, rgba(251,113,133,0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(246,248,251,1) 100%);

  font-size: 16px;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: white;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{ left: 16px; }

header.site-header{
  position: sticky;
  top: 0;
  z-index: 1201;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid var(--line);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  flex-wrap: nowrap;
}

.brand{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}
.brand img{
  width: 160px;
  height: 76px;
  object-fit: contain;
  display: block;
}
.nav-links{
  display: none;
  gap: 14px;
  align-items: center;
  flex-wrap: nowrap;
}
.nav-links a{
  font-size: 13px;
  color: #111111;
  padding: 7px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.nav-links a[aria-current="page"]{
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
}

.nav-cta{
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  cursor: pointer;
  font-weight: 650;
  font-size: 14px;
}
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}
.btn.ghost{
  background: var(--soft);
}
.btn.small{
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 12px;
}

.mobile-toggle{ display: inline-flex; }
.mobile-menu{
  display: none;
  border-top: 1px solid var(--line);
}
.mobile-menu a{
  display: block;
  padding: 12px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom: 0; }

@media (min-width: 900px){
  .nav-links{ display: flex; }
  .mobile-toggle{ display: none; }
  .mobile-menu{ display: none !important; }
  .nav{ gap: 8px; }
  .nav-cta{ gap: 8px; flex-wrap: nowrap; }
}

main{ padding-bottom: 60px; }

/* ---------- Intro Overlay ---------- */
.intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;

  /* Prevent intro flash on refresh */
  display:none;
}
.intro-overlay.intro-ready{ display:block; }

.intro-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.intro-layer{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 56px;
  text-align: center;
}

.intro-logo{
  width: 240px;
  height: 240px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.35));
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms ease;
}

.intro-title{
  margin-top: 16px;
  color: white;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 3.2vw, 34px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease 120ms, transform 700ms ease 120ms;
}

.intro-sub{
  margin-top: 10px;
  color: rgba(255,255,255,0.85);
  max-width: 720px;
  font-size: clamp(14px, 1.8vw, 18px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease 240ms, transform 700ms ease 240ms;
}

.intro-actions{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease 360ms, transform 700ms ease 360ms;
}
.intro-actions .btn{
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: white;
}
.intro-actions .btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent;
}

.intro-ready .intro-logo,
.intro-ready .intro-title,
.intro-ready .intro-sub,
.intro-ready .intro-actions{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.intro-hide{
  animation: introFade 700ms ease forwards;
}
@keyframes introFade{
  to{ opacity: 0; visibility: hidden; }
}

/* Intro bottom branding */
.intro-layer-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 24px 18px;
  pointer-events: none;
}
.intro-bottom-wrap{
  pointer-events: auto;
  width: min(1220px, 100%);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 12px;
}
.intro-tagline{
  margin: 0;
  color: #fff;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  min-height: 2.2em;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: clamp(28px, 8vw, 46px);
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 4px 10px rgba(0,0,0,0.45),
    0 16px 34px rgba(0,0,0,0.55),
    0 0 30px rgba(150,220,255,0.25);
  background: linear-gradient(180deg, rgba(5,10,20,0.20), rgba(5,10,20,0.36));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
}
.intro-tagline::after{
  content: '';
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.12em;
  vertical-align: -0.08em;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 12px rgba(255,255,255,0.75);
  animation: introCaretBlink 1s steps(1, end) infinite;
}
.intro-tagline.is-complete::after{ opacity: 0; animation: none; }

@keyframes introCaretBlink { 50% { opacity: 0; } }

@media (min-width: 921px){
  .intro-tagline{
    max-width: none;
    min-height: auto;
    white-space: nowrap;
    font-size: clamp(36px, 4vw, 62px);
  }
}
.intro-logo-bottom{
  max-width: 210px;
  opacity: 0.92;
  filter: drop-shadow(0 10px 18px rgba(2,6,23,0.35));
}

/* ---------- Hero ---------- */
.hero{
  padding: 34px 0 18px;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(14,165,164,0.12), transparent 50%),
    radial-gradient(ellipse at 85% 0%, rgba(37,99,235,0.10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 45%, var(--soft) 100%);
}

/* Use more of the PC width for HERO only (keeps other sections tidy) */
@media (min-width: 1100px){
  .hero .container{
    width: min(1360px, calc(100% - 72px));
  }
}

.hero-grid{
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.hero-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-media{
  position: relative;
  min-height: 220px;
  background: #0b1220;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-media video,
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
}
.hero-media .overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(14,165,164,0.22), transparent 55%),
    radial-gradient(ellipse at 82% 10%, rgba(37,99,235,0.20), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,0.08) 0%, rgba(2,6,23,0.58) 100%);
}

.hero-copy{ padding: 22px; }

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 999px;
}
/* Hide the kicker pill above the H1 */
.kicker{ display:none !important; }

.h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;

  /* scale with toolbar buttons */
  font-size: calc(44px * var(--fontScale));
}
@media (max-width: 900px){
  .h1{ font-size: calc(36px * var(--fontScale)); }
}

.lead{
  margin: 0;
  color: var(--muted);
  font-size: calc(17px * var(--fontScale));
  max-width: 60ch;
}

.hero-actions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Hero split layout (text left, video right) */
.hero-split{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 26px;
  align-items: stretch;
}

/* LEFT: remove background box behind H1/text */
.hero-left{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;

  display:flex;
  flex-direction: column;
  gap: 10px;

  max-width: 720px;
}

/* CTA */
.hero-cta{
  margin-top: 14px;
}

/* RIGHT: vertically centre video on desktop */
.hero-right{
  display:flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Mobile order: header -> text -> pills -> video? (you said mobile is fine)
   Your HTML currently does: video first, text second.
   We keep that as-is, but we ensure pills feel anchored under text on mobile. */
@media (max-width: 980px){
  .hero-split{ grid-template-columns: 1fr; }
  .hero-left{ order: 2; }
  .hero-right{ order: 1; }
}

/* Hero homepage video (show true size; no forced aspect box; avoid black bars) */
.hero-video-wrap{
  position: relative;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: transparent;              /* was #0b1220 */
  box-shadow: var(--shadow2);

  width: 100%;
  max-width: 720px;                     /* keeps it big but controlled */
}
@media (min-width: 1100px){
  .hero-video-wrap{ max-width: 860px; } /* bigger on desktop */
}

.hero-video{
  width: 100%;
  height: auto;                         /* keeps natural ratio */
  display:block;
  background: transparent;
}

/* Sound button */
.hero-video-audio{
  position:absolute;
  left: 16px;
  bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(2,6,23,0.55);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.hero-video-audio:focus-visible{ outline-color: rgba(245,158,11,0.7); }

/* ---------- NEW: Hero highlight pills bar (bigger + colourful + animated glow) ---------- */
.hero-pills{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow2);
  padding: 14px 14px;
  position: relative;
  overflow: hidden;
}

/* animated glow layer */
.hero-pills:before{
  content:"";
  position:absolute;
  inset: -2px;
  background: var(--pillGrad);
  background-size: 220% 100%;
  opacity: 0.55;
  filter: blur(16px);
  animation: pillGlow 5.5s linear infinite;
  pointer-events: none;
}
@keyframes pillGlow{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* keep content above glow */
.hero-pills > *{ position: relative; z-index: 1; }

.hero-pills .chips{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0;
}

.hero-pills .chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 16px;                  /* bigger */
  border-radius: 999px;
  border: 1px solid rgba(230,237,245,0.95);
  background: rgba(255,255,255,0.88);
  color: var(--ink);
  font-weight: 750;
  font-size: 14px;
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
}

/* add colour variation per chip */
.hero-pills .chip:nth-child(1){
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.10);
}
.hero-pills .chip:nth-child(2){
  border-color: rgba(14,165,164,0.30);
  background: rgba(14,165,164,0.10);
}
.hero-pills .chip:nth-child(3){
  border-color: rgba(37,99,235,0.28);
  background: rgba(37,99,235,0.08);
}
.hero-pills .chip:nth-child(4){
  border-color: rgba(251,113,133,0.28);
  background: rgba(251,113,133,0.08);
}

/* Mobile: ensure pills sit comfortably after text */
@media (max-width: 980px){
  .hero-pills{
    margin-top: 14px;
  }
}

/* ---------- Original chips (used elsewhere) ---------- */
.chips{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.75);
  color: var(--muted);
  font-size: 13px;
}
.chip{
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.25);
}
.chip:nth-child(2), .chip:nth-child(4){
  background: rgba(14,165,164,0.10);
  border-color: rgba(14,165,164,0.22);
}

/* ---------- Sections ---------- */
.section{ padding: 34px 0; }

.section.alt{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(14,165,164,0.08), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(37,99,235,0.07), transparent 55%),
    var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.core-values-highlight{
  background:
    radial-gradient(ellipse at 10% 0%, rgba(245,158,11,0.14), transparent 50%),
    radial-gradient(ellipse at 90% 0%, rgba(14,165,164,0.12), transparent 55%),
    #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.values-carousel{
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 14px 30px rgba(15,23,42,0.08);
  transition: background 300ms ease;
}

.values-carousel-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.values-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.16);
}

.values-progress{
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
}
.values-progress span{
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(37,99,235,.8), rgba(14,165,164,.85));
}

.value-slide{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  padding: 18px;
  transform: translateY(8px);
  opacity: .4;
}
.value-slide.is-entered{
  transform: translateY(0);
  opacity: 1;
  transition: transform 280ms ease, opacity 280ms ease;
}

.value-slide-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.value-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(135deg, #6d28d9, #2563eb);
}

.value-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(15,23,42,.12);
}

.value-slide h3{
  margin: 12px 0 10px;
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.03em;
}

.value-slide ul{
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.values-carousel-controls{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.values-dots{
  display: flex;
  gap: 8px;
}
.values-dots button{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(15,23,42,.28);
  cursor: pointer;
}
.values-dots button.active{
  width: 26px;
  background: rgba(15,23,42,.74);
}

.values-carousel.is-theme-1{ background: linear-gradient(135deg, #e9def7, #dbeafe); }
.values-carousel.is-theme-2{ background: linear-gradient(135deg, #c8f5eb, #d6f5ff); }
.values-carousel.is-theme-3{ background: linear-gradient(135deg, #d9f5fb, #dff6ef); }
.values-carousel.is-theme-4{ background: linear-gradient(135deg, #ffd7e3, #ffe8ee); }
.values-carousel.is-theme-5{ background: linear-gradient(135deg, #fff3bf, #ffe4a6); }

@keyframes valuesProgress{
  from{ width: 0%; }
  to{ width: 100%; }
}

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 16px;
}
.section-head h2{
  margin: 0;
  font-size: var(--typeH2);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.section-head p{
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
  font-size: 14px;
}
.section-head .right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.grid3{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px){
  .grid3{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(2,6,23,0.05);
}
.card h3{ margin: 0 0 8px; letter-spacing: -0.02em; }
.card p{ margin: 0; color: var(--muted); font-size: 14px; }

.services-hero{
  padding-top: 40px;
}

.services-hero-layout{
  display: grid;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 960px){
  .services-hero-layout{ grid-template-columns: 1.05fr 0.95fr; }
}

.services-hero-content h1{
  margin: 12px 0 12px;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.services-hero-content p{
  margin: 0;
  color: var(--muted);
  max-width: 74ch;
  font-size: clamp(16px, 2vw, 19px);
}

.services-hero-content .row{
  margin-top: 18px;
}

.confidence-inline{
  margin-top: 18px;
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}
@media (min-width: 780px){
  .confidence-inline{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.services-hero-media{
  margin: 0;
  border-radius: calc(var(--radius) + 2px);
  background: radial-gradient(ellipse at center, rgba(14,165,164,0.12), rgba(255,255,255,0) 68%);
  padding: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.services-hero-media img{
  max-width: min(420px, 100%);
  width: 100%;
  height: auto;
  transform-origin: center;
  animation: floatyImage 6s ease-in-out infinite;
}
.services-hero-media figcaption{
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@keyframes floatyImage{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  font-size: 13px;
  color: var(--muted);
  box-shadow: 0 8px 18px rgba(2,6,23,0.04);
}

.stats{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .stats{ grid-template-columns: repeat(4, 1fr); }
}
.stat{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow2);
}
.stat .num{
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 28px;
  line-height: 1;
}
.stat .lbl{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.quote{
  border-left: 5px solid transparent;
  border-image: linear-gradient(180deg, var(--brand), var(--brand2)) 1;
  padding-left: 14px;
}
.quote p{ margin: 0 0 6px; }
.quote small{ color: var(--muted); }

.footer{
  border-top: 1px solid var(--line);
  padding: 16px 0;
  color: var(--muted);
  font-size: 13px;
}
.footer-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px){
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-col{
  text-align: left;
  align-self: start;
}
.footer-brand{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-logo{
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
}
.footer-title{ color: var(--ink); }
.footer-note{ margin-top: 8px; }
.footer-links{
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.footer-bottom{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--ink); }

.form{ display: grid; gap: 10px; }
.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  font-size: 14px;
}
textarea.input{ min-height: 120px; resize: vertical; }
.hint{ color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* Utility */
.row{ display: flex; gap: 10px; flex-wrap: wrap; }
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.75);
  color: var(--muted);
  font-size: 13px;
}

/* Premium motion */
@media (prefers-reduced-motion: no-preference){
  .card, .hero-card, .badge, .btn{
    transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background 260ms var(--ease), border-color 260ms var(--ease);
  }
  .card:hover, .hero-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: #d7e4f2;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(0); }
}

/* ---------- WOW / Interactive Enhancements ---------- */
.glass{
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(230,237,245,0.9);
  backdrop-filter: blur(10px);
}

.services{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .services{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services > .service-card:only-child{ grid-column: 1 / -1; }
}
.service-card{
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
}
.service-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(ellipse at 20% 15%, rgba(14,165,164,0.18), transparent 55%),
              radial-gradient(ellipse at 85% 0%, rgba(37,99,235,0.14), transparent 60%);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.service-card:hover:before{ opacity: 1; }
.service-card .icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow2);
  position: relative;
  z-index: 1;
}
.service-card h3, .service-card p, .service-card .actions{
  position: relative;
  z-index: 1;
}
.service-card h3{ margin: 12px 0 8px; }
.service-card p{ margin:0; color: var(--muted); font-size: 14px; }
.service-points{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.service-card .actions{
  margin-top: auto;
  padding-top: 14px;
  display:grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-card .actions .link{
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.service-card .actions .link:hover,
.service-card .actions .link:focus-visible{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border-color: transparent;
}
.service-card .actions .link:hover span,
.service-card .actions .link:focus-visible span{
  color: rgba(255,255,255,0.92);
}


.confidence-band{
  padding: 24px 0 10px;
}
.confidence-grid{
  display: grid;
  gap: 18px;
}
@media (min-width: 900px){
  .confidence-grid{ grid-template-columns: 0.95fr 1.05fr; align-items: start; }
}
.confidence-grid h2{
  margin: 6px 0 0;
  letter-spacing: -0.03em;
  font-size: clamp(26px, 3.8vw, 40px);
}
.confidence-grid ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
  color: var(--muted);
}

.services-sell-layer{
  background: linear-gradient(180deg, rgba(246,248,251,0.55) 0%, rgba(255,255,255,0) 100%);
}
.sell-columns{
  display: grid;
  gap: 20px;
}
@media (min-width: 900px){
  .sell-columns{ grid-template-columns: 1fr 1fr; }
}
.sell-columns h3{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.tick-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tick-list li{
  position: relative;
  padding-left: 18px;
  color: var(--muted);
}
.tick-list li:before{
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 900;
}

.faq-section .acc-panel{
  padding: 0 16px 16px;
  color: var(--muted);
}
.faq-section .acc-panel p{ margin: 0; }

.services-cta-strip{
  text-align: center;
  padding-top: clamp(34px, 5vw, 52px);
  padding-bottom: 46px;
}
.services-cta-strip h2{
  margin: 0;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: -0.03em;
}
.services-cta-strip p{
  margin: 10px auto 0;
  max-width: 70ch;
  color: var(--muted);
}
.services-cta-strip .row{
  margin-top: 16px;
  justify-content: center;
}

.services-interactive{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  background: white;
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.service-tabs{
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
  background: rgba(246,248,251,0.9);
}
@media (min-width: 760px){
  .service-tabs{ grid-template-columns: repeat(3, 1fr); }
}

.service-tab{
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.service-tab:last-child{ border-right: 0; }
.service-tab.is-active{
  color: var(--ink);
  background: white;
}

.service-panel{
  padding: 18px;
  display: grid;
  gap: 16px;
}
@media (min-width: 900px){
  .service-panel{ grid-template-columns: 1fr 0.9fr; align-items: center; }
}

.service-label{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand2);
  font-weight: 800;
}
.service-panel h3{
  margin: 8px 0;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 3.2vw, 32px);
}
.service-panel p{ margin: 0; color: var(--muted); }

.service-panel-media{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 16px;
}
.service-panel-media img{ width: 100%; height: auto; display:block; }

.services-timeline{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.services-timeline li{
  position: relative;
  padding-left: 18px;
  color: var(--muted);
}
.services-timeline li:before{
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.services-timeline strong{ color: var(--ink); }

.floaty{
  animation: floatyImage 5.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .services-hero-media img,
  .floaty{
    animation: none;
  }
}
.link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight: 750;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
}
.link:hover{ text-decoration:none; border-color:#d7e4f2; box-shadow: var(--shadow2); }
.link span{ color: var(--muted); font-weight: 700; }

.service-media{
  margin: 10px 0 10px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(246,248,251,0.8);
}
.service-media img{ width:100%; height:auto; display:block; }

.slider{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow2);
  overflow: hidden;
}
.slides{
  display:flex;
  transition: transform 420ms var(--ease);
}
.slide{
  min-width: 100%;
  padding: 22px;
}
.slide blockquote{
  margin:0;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.slide small{
  display:block;
  margin-top: 10px;
  color: var(--muted);
}
.slider-nav{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: rgba(246,248,251,0.7);
}
.dots{ display:flex; gap:8px; align-items:center; }
.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d7e4f2;
  border: 1px solid #cfe0f1;
}
.dot.active{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent;
}

.accordion{ display:grid; gap: 10px; }
.acc-item{
  border: 1px solid var(--line);
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(2,6,23,0.04);
}
.acc-btn{
  width: 100%;
  text-align: left;
  padding: 16px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  font-weight: 800;
}
.acc-btn span{ color: var(--muted); font-weight: 800; }
.acc-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms var(--ease);
  border-top: 1px solid var(--line);
  background: rgba(246,248,251,0.7);
}
.acc-panel .inner{
  padding: 14px 16px;
  color: var(--muted);
  font-size: 14px;
}

.map-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.map-top{
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(246,248,251,0.7);
}
.map-body{
  position: relative;
  height: 260px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(14,165,164,0.16), transparent 60%),
    radial-gradient(ellipse at 80% 10%, rgba(37,99,235,0.12), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}
.ping{
  position:absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.25);
}
.ping:after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  opacity: 0;
  transform: scale(0.6);
  animation: ping 1600ms var(--ease) infinite;
}
@keyframes ping{
  0%{ opacity:0; transform: scale(0.55); }
  25%{ opacity:0.8; }
  100%{ opacity:0; transform: scale(1.2); }
}
.ping.mcr{ left: 55%; top: 46%; }
.ping.sal{ left: 52%; top: 52%; opacity: 0.8; }
.ping.trf{ left: 58%; top: 54%; opacity: 0.75; }
.ping.stk{ left: 62%; top: 60%; opacity: 0.7; }

.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  width: min(380px, calc(100% - 32px));
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 14px;
  display:none;
}
.toast .row{ justify-content: space-between; align-items:center; }
.toast p{ margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.toast.show{ display:block; animation: toastIn 520ms var(--ease) both; }
@keyframes toastIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.reveal{ opacity: 1; transform: translateY(0); }
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

/* ---------- Accessibility Upgrades ---------- */
:focus-visible{
  outline: 3px solid rgba(37,99,235,0.55);
  outline-offset: 3px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
a, button, input, select, textarea{ min-height: 44px; }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* High contrast mode */
body.high-contrast{
  --bg:#ffffff;
  --ink:#000000;
  --muted:#1f2937;
  --soft:#ffffff;
  --line:#111827;
}
body.high-contrast .hero,
body.high-contrast .section.alt{
  background: #ffffff;
}
body.high-contrast .badge,
body.high-contrast .card,
body.high-contrast .service-card,
body.high-contrast .stat,
body.high-contrast .slider,
body.high-contrast .map-card{
  border-color: #111827;
}

/* OLD navbar toolbar (if present) — keep hidden; we use slide-out tab instead */
.a11y-toolbar{ display:none !important; }

/* NEW: Slide-out accessibility tab (rectangle, not a round button)
   - Place just below navbar, right side.
   - JS can toggle: body.a11y-open OR .a11y-panel.open
*/
.a11y-dock{
  position: fixed;
  top: 86px;                 /* just under header */
  right: 0;
  z-index: 600;
  display:flex;
  align-items: stretch;
  pointer-events: none;      /* let children decide */
}
@media (max-width: 540px){
  .a11y-dock{ top: 74px; }
}

.a11y-tab{
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-right: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-weight: 850;
  font-size: 13px;

  /* rectangle look */
  border-radius: 10px 0 0 10px;
  box-shadow: var(--shadow2);
  cursor: pointer;
  min-height: 44px;
}

.a11y-panel{
  pointer-events: auto;
  width: 280px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  border-radius: 0 0 0 14px;
  overflow:hidden;

  transform: translateX(100%);
  transition: transform 260ms var(--ease);
}

.a11y-panel .a11y-panel-head{
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(246,248,251,0.75);
}
.a11y-panel .a11y-panel-head strong{
  font-size: 13px;
  letter-spacing: -0.01em;
}
.a11y-panel .a11y-panel-body{
  padding: 12px;
  display:grid;
  gap: 10px;
}

.a11y-panel .a11y-btn{
  width: 100%;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.90);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.a11y-panel .a11y-btn:hover{ box-shadow: var(--shadow2); }

body.a11y-open .a11y-panel,
.a11y-panel.open{
  transform: translateX(0);
}

/* If you want the tab to sit tighter on very wide screens */
@media (min-width: 1400px){
  .a11y-dock{ right: 10px; }
  .a11y-panel{ border-radius: 14px; }
  .a11y-tab{ border-radius: 10px; border-right: 1px solid var(--line); }
}

/* ---------- Modal / Lightbox (Accessible Dialog) ---------- */
.backdrop{
  position: fixed; inset: 0;
  background: rgba(2,6,23,0.62);
  backdrop-filter: blur(6px);
  z-index: 1200;
  display:none;
}
.backdrop.show{ display:block; }

.dialog{
  position: fixed; inset: 0;
  z-index: 1300;
  display:none;
  place-items: center;
  padding: 18px;
}
.dialog.show{ display:grid; }

.dialog-card{
  width: min(860px, 100%);
  border-radius: 26px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dialog-head{
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display:flex; justify-content: space-between; align-items:center; gap: 12px;
  background: rgba(246,248,251,0.8);
}
.dialog-title{ margin:0; font-size: 18px; letter-spacing: -0.02em; }
.dialog-body{ padding: 18px; display:grid; gap: 14px; }
.dialog-grid{ display:grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px){
  .dialog-grid{ grid-template-columns: 1.1fr 0.9fr; }
}
.dialog-side{
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 18px;
  padding: 14px;
}
.dialog-side ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.dialog-side li{ margin: 6px 0; }

.video-frame{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b1220;
}
.video-frame video{ width: 100%; height: auto; display:block; }

/* ---------- Sticky WhatsApp CTA ---------- */
.sticky-cta{
  display: flex;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  gap: 10px;
  align-items:center;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
}
.sticky-cta.show{ display:flex; animation: toastIn 520ms var(--ease) both; }
.sticky-cta .dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.sticky-cta strong{ font-size: 13px; }
.sticky-cta span{ font-size: 12px; color: var(--muted); }

@media (max-width: 700px){
  .sticky-cta{
    left: 12px;
    right: 12px;
    bottom: 88px;
    border-radius: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* ---------- Timeline ---------- */
.timeline{
  display:grid;
  gap: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.tl-row{
  display:grid;
  gap: 12px;
  grid-template-columns: 44px 1fr;
  padding: 16px 16px;
  border-top: 1px solid var(--line);
}
.tl-row:first-child{ border-top: 0; }
.tl-step{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  color: white; font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow2);
}
.tl-title{ margin: 0; font-weight: 900; letter-spacing: -0.02em; }
.tl-text{ margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.tl-row.active{
  background:
    radial-gradient(ellipse at 20% 30%, rgba(14,165,164,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(37,99,235,0.08), transparent 55%),
    rgba(246,248,251,0.65);
}

/* ---------- Services page v4 redesign ---------- */

.services-accent{ color: var(--brand2); }
.services-eyebrow{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 12px;
}


/* Keep hero eyebrow text consistent on Outcomes/Careers/Resources pages */
.page-hero .services-eyebrow{
  margin: 0;
  color: rgba(236,243,255,0.92);
}
.services-hero-v4{ min-height: clamp(360px, 48vw, 520px); padding: 0; position: relative; overflow: hidden; }
.services-hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(11,18,32,0.78) 0%, rgba(11,18,32,0.52) 55%, rgba(11,18,32,0.40) 100%);
}
.services-hero-grid-v4{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  align-items: center;
  min-height: clamp(360px, 48vw, 520px);
  padding-top: 0;
  padding-bottom: 0;
}
.services-hero-content-wrap{
  max-width: min(1180px, 100%);
  text-align: left;
  display: grid;
  align-content: center;
  gap: 14px;
}

.services-hero-v4 h1{
  margin: 0;
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: none;
  color: #ffffff;
}
.services-lead{
  margin: 0;
  line-height: 1.45;
  max-width: 68ch;
  color: rgba(255,255,255,0.92);
  font-size: clamp(16px, 2vw, 20px);
}
.services-inline-metrics{
  margin-top: 16px;
  display:grid;
  gap:10px;
}
.services-inline-metrics span{ color: rgba(255,255,255,0.9); font-size: 14px; }
.services-inline-metrics strong{ color: #ffffff; }
.services-hero-content-wrap .row{
  margin-top: 0;
  gap: 12px;
}
.services-hero-content-wrap .services-highlight-cards{
  margin-top: 0;
}
.services-hero-actions-panel{
  display: grid;
  gap: 20px;
  width: 100%;
  margin-top: 10px;
}
.services-hero-actions-panel .row{
  justify-content: flex-start;
  margin-top: 4px;
}
.services-hero-actions-panel .services-highlight-cards{
  justify-self: start;
  width: min(100%, 760px);
  margin-top: 6px;
}
.services-hero-content-wrap .btn{
  min-height: 44px;
}
@media (min-width: 1100px){
  .services-hero-v4 h1{ white-space: normal; }
}

@media (min-width: 980px){
  .services-hero-content-wrap{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .services-hero-actions-panel{
    gap: 24px;
    margin-top: 14px;
  }
  .services-hero-actions-panel .row{
    justify-content: flex-start;
  }
  .services-hero-actions-panel .services-highlight-cards{
    justify-self: start;
    width: min(100%, 760px);
    gap: 14px;
  }
}

@media (max-width: 759px){
  .services-hero-grid-v4{
    gap: 22px;
    min-height: clamp(360px, 48vw, 520px);
    padding-top: 0;
    padding-bottom: 0;
  }
  .services-hero-content-wrap{
    gap: 12px;
  }
  .services-hero-actions-panel{
    margin-top: 6px;
    gap: 16px;
  }
  .services-hero-actions-panel .row{
    justify-content: flex-start;
    margin-top: 0;
  }
  .services-hero-actions-panel .services-highlight-cards{
    justify-self: stretch;
    margin-top: 2px;
  }
}
@media (min-width: 760px){
  .services-inline-metrics{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.services-trust-strip{
  padding-top: clamp(34px, 5vw, 52px);
  padding-bottom: clamp(34px, 5vw, 52px);
}
.services-trust-grid{
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(26px, 4.2vw, 40px) clamp(20px, 3.6vw, 44px);
  display:grid;
  gap: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 20px;
  text-align: center;
  border: 1px solid #dbe7ff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}
.services-trust-grid p{ margin: 0; }
.services-trust-title{
  margin: 0;
  font-size: var(--typeH2);
  letter-spacing: -0.03em;
  color: #111111;
  min-height: 1.25em;
  justify-self: center;
}
.services-trust-copy{
  margin: 0 auto;
  color: #111111;
  font-size: clamp(17px, 2vw, 21px);
  max-width: 52ch;
  min-height: 1.4em;
  white-space: normal;
  justify-self: center;
}
.services-trust-title,
.services-trust-copy{
  position: relative;
}
.services-trust-title:after,
.services-trust-copy:after{
  content: '';
  display: inline-block;
  width: 0.09em;
  height: 1.05em;
  background: #111111;
  margin-left: 4px;
  vertical-align: -0.1em;
  animation: trustCaretBlink 0.8s steps(1) infinite;
}
.services-trust-title.typed-complete:after,
.services-trust-copy.typed-complete:after{
  opacity: 0;
}
@keyframes trustCaretBlink{
  0%, 45%{ opacity: 1; }
  46%, 100%{ opacity: 0; }
}

.service-row{
  display:grid;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.service-row img{ width: min(440px, 100%); height:auto; }
.service-row h3{ margin: 0 0 4px; letter-spacing: -0.02em; font-size: clamp(24px,3.2vw,34px); line-height: 1.12; }
.service-row p{ margin:0 0 10px; color: var(--muted); }
@media (min-width: 980px){
  .service-row{ grid-template-columns: 0.9fr 1.1fr; }
  .service-row.reverse{ grid-template-columns: 1.1fr 0.9fr; }
  .service-row.reverse img{ order: 2; }
  .service-row.reverse > div{ order: 1; }
}

.service-row > div:last-child{
  justify-self: stretch;
  max-width: none;
}

.service-row-content{
  align-self: start;
}
.service-row p,
.service-row .tick-list li{
  line-height: 1.6;
}

.service-row .tick-list{
  gap: 6px;
}
.service-row .tick-list li{
  font-size: 15px;
}

.services-support-copy{
  margin-top: 18px;
  max-width: none;
}
.services-support-copy p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.75;
}
.services-support-copy p:last-child{
  margin-bottom: 0;
}

.services-process-band{
  background: linear-gradient(180deg, rgba(246,248,251,0.78) 0%, rgba(255,255,255,0) 100%);
}
.services-process-band h2{
  margin: 8px 0 0;
  letter-spacing: -0.03em;
  font-size: var(--typeH2);
  max-width: none;
}
.services-journey-cards{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 12px;
}
.services-journey-cards li{
  border: 1px solid rgba(210,224,242,0.95);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(244,249,255,0.96));
  box-shadow: var(--shadow2);
}
.services-step{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.services-journey-cards h3{
  margin: 10px 0 6px;
  font-size: 20px;
  color: #1d4ed8;
}
.services-journey-cards p{
  margin: 0;
  color: var(--muted);
}
@media (min-width: 980px){
  .services-journey-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.services-outcomes{
  padding-top: 40px;
}
.services-outcomes-grid{
  display:grid;
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 900px){
  .services-outcomes-grid{ grid-template-columns: 1fr 1fr; }
}
.services-outcomes-grid article{
  border: 1px solid rgba(214,226,242,0.95);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.92);
}
.services-outcomes-grid h3{
  margin: 0 0 6px;
  font-size: 20px;
  color: #1d4ed8;
}
.services-outcomes-grid p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.faq-minimal .acc-item{
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.services-cta-strip h2{
  margin: 0;
  font-size: clamp(30px, 4.5vw, 48px);
  letter-spacing: -0.03em;
}
.services-cta-strip p{
  margin: 10px auto 0;
  max-width: 66ch;
  color: var(--muted);
}
.services-cta-subline{ max-width: none; }
@media (min-width: 1200px){
  .services-cta-subline{ white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce){
  .services-hero-visual img{ animation: none; }
}

/* ---------- Services page v5 refinements ---------- */
.services-page .section{
  border-top: 1px solid rgba(230,237,245,0.9);
}
.services-page .section:first-of-type{ border-top: 0; }

.services-page .services-hero-v4{
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(246,248,251,0.55) 100%);
}
.services-page .services-trust-strip{
  background: #ffffff;
}
.services-page #services-list{
  background: linear-gradient(180deg, #ffffff 0%, rgba(248,251,255,0.8) 100%);
}
.services-page .services-process-band{
  background: linear-gradient(180deg, rgba(243,248,255,0.95) 0%, rgba(255,255,255,0.95) 100%);
}
.services-page .services-outcomes,
.services-page .faq-section,
.services-page .services-cta-strip{
  background: #ffffff;
}

.services-highlight-cards{
  margin-top: 18px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  perspective: 1100px;
}
@media (min-width: 760px){
  .services-highlight-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .services-highlight-cards{ grid-template-columns: repeat(3, minmax(190px, 1fr)); max-width: 980px; }
}
.highlight-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,249,255,0.96));
  display: grid;
  gap: 2px;
  box-shadow: var(--shadow2);
  transform-style: preserve-3d;
  animation: rotateCard 8s ease-in-out infinite;
}
.highlight-card:nth-child(2){ animation-delay: 1.2s; }
.highlight-card:nth-child(3){ animation-delay: 2.4s; }
.highlight-card strong{ font-size: 15px; line-height: 1.2; }
.highlight-card span{ color: var(--muted); font-size: 14px; line-height: 1.35; }
@keyframes rotateCard{
  0%, 85%, 100%{ transform: rotateY(0deg) translateY(0); }
  40%{ transform: rotateY(7deg) translateY(-2px); }
}

.placeholder-box{
  width: 100%;
  min-height: 220px;
  border-radius: 20px;
  border: 1px dashed #c9d8ea;
  background:
    radial-gradient(circle at 16% 24%, rgba(160,186,229,0.55) 0 36px, transparent 37px),
    radial-gradient(circle at 30% 34%, rgba(156,227,226,0.5) 0 24px, transparent 25px),
    radial-gradient(circle at 82% 20%, rgba(220,220,195,0.55) 0 34px, transparent 35px),
    linear-gradient(145deg, #dce8f6, #d0edf3);
  display: grid;
  place-items: center;
  color: #53657a;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  position: relative;
}
.placeholder-box[data-site-media-kind="image"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.placeholder-box[data-site-media-kind="image"].has-media{
  border-style: solid;
  border-color: rgba(11,18,32,.10);
}
.placeholder-box[data-site-media-kind="image"].has-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,.04), rgba(11,18,32,.14));
  pointer-events: none;
}
.hero-placeholder{
  min-height: 280px;
  width: min(560px, 100%);
  animation: floatyImage 6s ease-in-out infinite;
}
.service-placeholder{
  width: min(440px, 100%);
  margin: 0 auto;
}

.service-row img{ display:none; }

.services-page .reveal{
  opacity: 1;
  transform: none;
}
.services-page .reveal.is-visible{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .highlight-card,
  .hero-placeholder{ animation: none; }
  .services-trust-title:after,
  .services-trust-copy:after{ animation: none; opacity: 0; }
}

/* ---------- Services page v6 alignment + palette refinements ---------- */
.services-page .section{
  border-top: 0;
}

/* Bring backgrounds back in line with global site feel */
.services-page .services-hero-v4,
.services-page .services-trust-strip,
.services-page #services-list,
.services-page .services-process-band,
.services-page .services-outcomes,
.services-page .faq-section,
.services-page .services-cta-strip{
  background: transparent;
}

.services-page .services-trust-strip{
  background: #ffffff;
}
/* Keep service rows visually aligned across all three services */
@media (min-width: 980px){
  .services-page .service-row,
  .services-page .service-row.reverse{
    grid-template-columns: 0.9fr 1.1fr;
  }
  .services-page .service-row.reverse .service-placeholder,
  .services-page .service-row.reverse > div{
    order: initial;
  }
}

.services-page .service-row{
  align-items: center;
}
.services-page .service-placeholder{
  min-height: 240px;
  width: min(460px, 100%);
}

/* Blue text accents for headings/titles */
.services-page .services-blue-title,
.services-page .service-row h3{
  color: #1d4ed8;
}
.services-page .services-trust-grid .services-accent,
.services-page .services-eyebrow{
  color: #2563eb;
}

.services-hero-v4 .btn.ghost{ background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.services-hero-v4 .services-eyebrow{ color: rgba(236,243,255,0.92); }

/* Section color separation to match style used across site */
.services-page #services-list{
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.services-page .services-process-band{
  background: linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%);
}
.services-page .services-outcomes{
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.services-page .faq-section{
  background: #ffffff;
}
.services-page .services-cta-strip{
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

/* Sitewide accessibility panel sizing/placement to match homepage */
.a11y-tab{
  position: fixed;
  right: 0;
  top: 110px;
  z-index: 9999;
  border-radius: 10px 0 0 10px;
  padding: 12px 14px;
  min-width: 132px;
  border: 1px solid var(--line);
  border-right: none;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow2);
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
}

.a11y-panel{
  position: fixed;
  right: -340px;
  top: 110px;
  width: 340px;
  z-index: 10000;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: var(--shadow2);
  padding: 14px;
  transition: right .28s ease;
  transform: none;
}
.a11y-panel.open{ right: 0; }
.a11y-panel .row{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.a11y-panel .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.a11y-panel .a11y-btn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}

.a11y-panel .a11y-reset-link{
  margin-top: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.a11y-panel .a11y-reset-link:hover{ color: var(--ink); }
.a11y-panel .hint{
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Cookie consent */
.cookie-consent{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 10020;
  width: min(350px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.97);
  box-shadow: var(--shadow2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.cookie-consent.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-consent p{
  margin: 0;
  max-width: 31ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
}
.cookie-consent a{
  color: var(--brand2);
  font-weight: 700;
}
.cookie-consent [data-cookie-accept]{
  justify-self: end;
}

@media (max-width: 560px){
  .cookie-consent{
    left: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    grid-template-columns: 1fr;
  }
  .cookie-consent [data-cookie-accept]{ justify-self: start; }
}

@media (min-width: 390px) and (max-width: 700px){
  .cookie-consent{
    left: 12px;
    right: auto;
    bottom: 12px;
    width: min(43vw, 210px);
    padding: 10px 12px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cookie-consent p{
    max-width: none;
    font-size: 12px;
    line-height: 1.35;
  }

  .cookie-consent [data-cookie-accept]{
    justify-self: stretch;
    width: 100%;
  }

  .sticky-cta{
    left: auto;
    right: 12px;
    bottom: 12px;
    width: min(46vw, 220px);
    min-height: 56px;
    border-radius: 18px;
    padding: 10px 34px 10px 12px;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .sticky-cta .dot{
    display: none;
  }

  .sticky-cta > div{
    min-width: 0;
    flex: 1 1 auto;
  }

  .sticky-cta strong{
    display: block;
    font-size: 12px;
    line-height: 1.2;
  }

  .sticky-cta span{
    display: none;
  }

  .sticky-cta .btn{
    width: auto;
    flex: 0 0 auto;
    min-height: 36px;
    max-width: calc(100% - 84px);
    margin-left: auto;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .sticky-cta button{
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 1;
    overflow: hidden;
    text-indent: -9999px;
  }

  .sticky-cta button::before{
    content: "\00d7";
    text-indent: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
  }
}

@media (max-width: 389px){
  .cookie-consent{
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .sticky-cta{
    left: 12px;
    right: 12px;
    bottom: 112px;
    min-height: 54px;
    padding: 10px 34px 10px 12px;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .sticky-cta .dot,
  .sticky-cta span{
    display: none;
  }

  .sticky-cta > div{
    min-width: 0;
    flex: 1 1 auto;
  }

  .sticky-cta strong{
    font-size: 12px;
    line-height: 1.2;
  }

  .sticky-cta .btn{
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    max-width: calc(100% - 84px);
    margin-left: auto;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .sticky-cta button{
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }

  .sticky-cta button::before{
    content: "\00d7";
    text-indent: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
  }
}

/* ---------- Final responsive hardening ---------- */
html,
body{
  max-width: 100%;
  overflow-x: hidden;
}

main{
  overflow-x: hidden;
}

img,
svg,
canvas,
iframe{
  max-width: 100%;
}

video{
  max-width: 100%;
  display: block;
}

input,
select,
textarea,
button{
  max-width: 100%;
}

.card,
.panel,
.meta,
.small,
.tiny{
  overflow-wrap: anywhere;
}

.btn{
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 899px){
  .nav{
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: center;
  }

  .brand{
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand > div{
    min-width: 0;
  }

  .brand img{
    width: clamp(120px, 34vw, 150px);
    height: auto;
    max-height: 64px;
  }

  .nav-cta{
    margin-left: auto;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .mobile-menu{
    margin-top: 6px;
  }
}

@media (max-width: 640px){
  .container{
    width: min(1120px, calc(100% - 24px));
  }

  .nav-cta{
    width: 100%;
    justify-content: stretch;
  }

  .nav-cta > *{
    flex: 1 1 0;
    min-width: 0;
  }

  .nav-cta .btn{
    width: 100%;
    min-height: 40px;
  }

  .brand img{
    width: clamp(108px, 32vw, 132px);
    max-height: 56px;
  }

  .section{
    padding: 26px 0;
  }

  .section-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .section-head .right{
    width: 100%;
  }

  .hero-copy{
    padding: 18px;
  }

  .hero-video-wrap{
    max-width: 100%;
  }

  .intro-layer{
    padding: 24px 16px;
  }

  .intro-logo{
    width: min(180px, 45vw);
    height: auto;
  }

  .hero-pills{
    padding: 12px;
  }

  .hero-pills .chip{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px){
  .a11y-tab{
    top: 96px;
    min-width: 112px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .a11y-panel{
    top: 96px;
    width: calc(100vw - 24px);
    max-width: 340px;
    right: -110vw;
    border-radius: 14px 0 0 14px;
  }

  .sticky-cta{
    gap: 8px;
  }

  .sticky-cta .btn{
    width: auto;
  }

  .sticky-cta button{
    width: 24px;
  }

  .services-hero-content-wrap .row,
  .hero-actions,
  .row{
    width: 100%;
  }
}