/* ==========================================================================
   KEFI HEALTHCARE  ·  HOME PAGE
   Hero, about, services, advantage, why, stats, testimonials.
   #contact comes from service-pages.css.
   ========================================================================== */

:root{
  /* On the dark hero and stats bands the brand gradient loses contrast,
     so headings there use a light variant instead. */
  --grad-light: linear-gradient(110deg, #FFFFFF 0%, #F6D7EC 42%, #E9A8D6 100%);
  --hero-dark:  #1B0B2E;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
#hero{
  position:relative;
  margin-top: var(--nav-h);
  /* vh is the viewport with the phone's toolbars HIDDEN, so a 100vh hero
     is taller than the screen actually shows and the layout jumps as the
     toolbar slides away. svh is the small viewport, which stays put. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display:flex;
  isolation:isolate;
  overflow:hidden;
  background: var(--hero-dark);
}

/* ---- decorative layers ---- */
.hero-mesh{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.mesh-blob{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  opacity:.28;
  will-change: transform;
}
.mesh-blob:nth-child(1){
  width:520px; height:520px;
  top:-14%; right:-6%;
  background: radial-gradient(circle, rgba(187,62,151,.85), transparent 68%);
  animation: blob-a 19s ease-in-out infinite;
}
.mesh-blob:nth-child(2){
  width:440px; height:440px;
  bottom:-18%; left:-8%;
  background: radial-gradient(circle, rgba(90,46,145,.9), transparent 68%);
  animation: blob-b 23s ease-in-out infinite;
}
.mesh-blob:nth-child(3){
  width:360px; height:360px;
  top:34%; left:42%;
  background: radial-gradient(circle, rgba(221,96,178,.55), transparent 70%);
  animation: blob-c 27s ease-in-out infinite;
}
@keyframes blob-a{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,44px) scale(1.12)} }
@keyframes blob-b{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(56px,-40px) scale(1.09)} }
@keyframes blob-c{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-38px,-30px) scale(1.16)} }

.hero-grid{
  position:absolute; inset:0; z-index:4;
  opacity:.55;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 120px 100%, 100% 120px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 78%);
}

.hero-particles{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
  overflow:hidden;
}
.hero-particles span,
.stats-particles span{
  position:absolute;
  display:block;
  border-radius:50%;
  background:#fff;
  opacity:.28;
  animation: particle-rise linear infinite;
}
@keyframes particle-rise{
  0%   { transform: translateY(0) scale(1);    opacity:0; }
  12%  { opacity:.4; }
  88%  { opacity:.24; }
  100% { transform: translateY(-190px) scale(.5); opacity:0; }
}

/* ---- swiper shell ---- */
.hero-swiper{
  position:absolute; inset:0;
  z-index:1;
  width:100%;
  height:100%;
}
.hero-slide{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute; inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.06);
  transition: transform 9s linear;
}
.swiper-slide-active .hero-bg{ transform: scale(1.16); }

/* Lighter than before so the photograph reads across the whole section,
   with a stronger wash only behind the copy so it stays legible. */
.hero-bg-overlay{
  position:absolute; inset:0;
  z-index:1;
  background:
    linear-gradient(100deg, rgba(18,7,32,.90) 0%, rgba(20,8,36,.62) 38%,
                    rgba(24,10,42,.22) 68%, rgba(24,10,42,.12) 100%),
    linear-gradient(200deg, rgba(90,46,145,.30) 0%, rgba(187,62,151,.18) 100%);
}

.hero-slide > .container{
  position:relative;
  z-index:6;
  width:100%;
  padding-block: clamp(80px, 10vw, 130px);
}

/* ---- copy ---- */
.hero-content{ max-width: 640px; }

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 18px 9px 14px;
  margin-bottom:26px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-head);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: rgba(255,255,255,.92);
}
.hero-badge i{ color: #F0A8D8; font-size:.86em; }

.hero-title{
  font-family: var(--font-head);
  font-size: clamp(2.35rem, 1.3rem + 4.1vw, 4.3rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.035em;
  color:#fff;
  margin:0 0 22px;
  text-shadow: 0 18px 48px rgba(12,4,24,.5);
}
.hero-title .accent{ display:inline-block; }
/* the shared .gradient-text would be too dark against the hero */
.hero-title .gradient-text{
  background: var(--grad-light);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.hero-desc{
  font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
  line-height:1.78;
  color: rgba(255,255,255,.76);
  max-width:56ch;
  margin:0 0 36px;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* This page writes class="btn-primary" without the .btn base class, so the
   shared button geometry has to be restated here. */
#hero .btn-primary,
#about .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px 36px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  transition: transform var(--t), box-shadow var(--t), background-position .5s var(--ease);
}
#hero .btn-primary i,
#about .btn-primary i{ font-size:.86em; }

/* hero buttons override the light-band styling from service-pages.css */
#hero .btn-primary{
  background: var(--grad);
  background-size:170% 100%;
  color:#fff;
  box-shadow: 0 18px 38px -16px rgba(187,62,151,.95);
}
#hero .btn-primary:hover{
  color:#fff;
  background-position:100% 0;
  transform: translateY(-3px);
}
#hero .btn-outline{
  background: rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#hero .btn-outline::before{ display:none; }
#hero .btn-outline:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  color:#fff;
}
#hero .btn-outline:hover i{ transform:none; }

/* ---- slide bullets + scroll hint ---- */
.hero-swiper-nav{
  position:absolute;
  left:50%;
  bottom:30px;
  z-index:8;
  display:flex;
  gap:10px;
  transform: translateX(-50%);
}
.swiper-bullet{
  width:9px; height:9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.34);
  cursor:pointer;
  transition: width .4s var(--ease-out), background .35s var(--ease);
}
.swiper-bullet.active{
  width:30px;
  background: var(--grad-light);
}

.hero-scroll-hint{
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:8;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:9px;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.55);
}
/* Sits above the call button rather than colliding with it. */
@media (min-width:1200px){
  .hero-scroll-hint{
    display:flex;
    left:auto;
    right:34px;
    bottom:112px;
    transform:none;
  }
}
.scroll-line{
  position:relative;
  width:1px; height:44px;
  background: rgba(255,255,255,.22);
  overflow:hidden;
}
.scroll-line::after{
  content:"";
  position:absolute;
  top:-44px; left:0;
  width:1px; height:44px;
  background: linear-gradient(to bottom, transparent, #fff);
  animation: scroll-drop 2.1s var(--ease-out) infinite;
}
@keyframes scroll-drop{ to{ transform: translateY(88px) } }

/* ==========================================================================
   2. ABOUT   (content leads, imagery answers on the right)
   ========================================================================== */
#about{
  position:relative;
  padding-block: clamp(70px, 8.5vw, 118px);
  background: var(--paper-2);
  border-bottom:1px solid var(--line-2);
}

.about-grid{
  display:grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px, 5vw, 78px);
  align-items:center;
}
/* copy first, pictures second */
.about-content{ order:1; }
.about-image-stack{ order:2; }

.about-content h2{ margin:0 0 20px; }
.about-content > p{
  color: var(--ink-3);
  margin:0 0 1.1rem;
  max-width:56ch;
}

/* the four claims become a ruled checklist rather than boxed pills */
.about-features{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:0 clamp(20px, 2.6vw, 36px);
  margin:32px 0 36px;
  border-top:1px solid var(--line);
}
.feature-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
  font-family: var(--font-head);
  font-weight:650;
  color: var(--ink);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.feature-chip i{
  flex:0 0 26px;
  width:26px; height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: var(--grad-soft);
  color: var(--plum);
  font-size:.74rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.feature-chip:hover{ color: var(--plum); padding-left:6px; }
.feature-chip:hover i{ background: var(--grad); color:#fff; }

#about .btn-primary{
  background: var(--grad);
  background-size:170% 100%;
  color:#fff;
  box-shadow: 0 16px 32px -16px rgba(187,62,151,.85);
}
#about .btn-primary:hover{ color:#fff; background-position:100% 0; transform: translateY(-3px); }

/* ---- image stack ---- */
.about-image-stack{
  position:relative;
  padding:0;
}
.about-img-main,
.about-img-accent{
  border-radius: var(--r-xl);
  object-fit:cover;
  border:1px solid var(--line);
}
.about-img-main{
  width:100%;
  aspect-ratio: 4 / 3.5;
  box-shadow: var(--sh-4);
}
/* one image only, at the client's request */
.about-img-accent{ display:none; }
.about-img-main.img-missing,
.about-img-accent.img-missing{ font-size:0; color:transparent; }

/* offset gradient plate, mirrored to the right of the stack */
.about-image-stack::before{
  content:"";
  position:absolute;
  right:-20px; top:26px;
  width:62%; height:78%;
  border-radius: var(--r-xl);
  background: var(--grad);
  opacity:.15;
  z-index:-1;
}

/* ==========================================================================
   3. SERVICES   (sticky brief on the left, scrolling stack on the right)
   ========================================================================== */
#services{
  position:relative;
  padding-block: clamp(66px, 8vw, 110px);
  background: var(--paper);
  border-bottom:1px solid var(--line-2);
}

#services > .container{
  display:grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px, 4.6vw, 72px);
  align-items:start;
}

#services .section-header{
  position:sticky;
  top: calc(var(--nav-h) + 34px);
  margin-bottom:0;
  max-width:none;
}
#services .section-header p{ max-width:42ch; }

/* the stack scrolls inside its own column */
.services-bento{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height: 68vh;
  max-height: 68svh;
  padding: 4px 14px 4px 4px;
  overflow-y:auto;
  /* no containment: the page carries on scrolling past the stack */
  scrollbar-width:thin;
  scrollbar-color: rgba(187,62,151,.4) transparent;
  /* fade the cut edges so the scroll reads as intentional */
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px,
              #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px,
              #000 calc(100% - 26px), transparent 100%);
}
.services-bento::-webkit-scrollbar{ width:6px; }
.services-bento::-webkit-scrollbar-track{ background:transparent; }
.services-bento::-webkit-scrollbar-thumb{
  border-radius:6px;
  background: rgba(187,62,151,.32);
}
.services-bento::-webkit-scrollbar-thumb:hover{ background: rgba(187,62,151,.55); }

.service-card{
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:start;
  column-gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
              border-color .3s var(--ease);
}
/* the featured card no longer needs to span a bento */
.service-card.featured{ grid-column:auto; }
.service-card.featured::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: var(--grad);
}

.service-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
.service-card:hover{
  transform: none;
  border-color: rgba(187,62,151,.3);
  box-shadow: var(--sh-3);
}
.service-card:hover::before{ transform: scaleX(1); }

.service-icon{
  grid-row: 1 / span 2;
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border-radius:16px;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.16);
  color: var(--plum);
  font-size:1.24rem;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .45s var(--ease-out);
}
.service-card:hover .service-icon{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: none;
}

.service-card h3{
  grid-column:2;
  margin:0 0 .5rem;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.service-card:hover h3{ color: var(--plum); }
.service-card p{
  grid-column:2;
  margin:0;
  color: var(--ink-3);
  max-width:56ch;
}

.service-arrow{
  grid-row: 1 / span 2;
  grid-column:3;
  align-self:center;
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(90,46,145,.22);
  color: var(--plum);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .45s var(--ease-out);
}
.service-arrow:hover,
.service-card:hover .service-arrow{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: rotate(-45deg);
}

/* the oversized numeral would fight the tighter row, so it steps back */
.service-big-num{
  position:absolute;
  right:64px; bottom:-14px;
  z-index:-1;
  font-family: var(--font-head);
  font-size:4.2rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color: rgba(90,46,145,.05);
  pointer-events:none;
  transition: color .4s var(--ease);
}
.service-card:hover .service-big-num{ color: rgba(187,62,151,.10); }

/* ==========================================================================
   4. ADVANTAGE
   ========================================================================== */
#advantage{
  position:relative;
  padding-block: clamp(66px, 8vw, 110px);
  background: var(--paper);
}

.advantage-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(18px, 2.1vw, 26px);
}

.advantage-card{
  /* icon and title share the top row; the paragraph runs the full width
     of the card beneath them instead of being trapped beside the icon */
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items:center;
  column-gap:18px;
  row-gap:14px;
  padding: clamp(24px, 2.6vw, 30px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .35s var(--ease);
}
.advantage-card:hover{
  transform: none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-3);
}

/* The source names four accent colours. They are remapped onto steps of the
   brand gradient so the set stays distinguishable without leaving the palette. */
.adv-icon{
  grid-column:1; grid-row:1;
  flex:0 0 52px;
  width:52px; height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:1.2rem;
  color:#fff;
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease);
}
.adv-icon.icon-magenta{ background: linear-gradient(135deg, #BB3E97, #D95BB0); }
.adv-icon.icon-teal   { background: linear-gradient(135deg, #5A2E91, #8B4BC4); }
.adv-icon.icon-blue   { background: linear-gradient(135deg, #7A34A8, #BB3E97); }
.adv-icon.icon-orange { background: linear-gradient(135deg, #A02C82, #E06BB8); }
.advantage-card:hover .adv-icon{
  transform: none;
  box-shadow: 0 14px 28px -12px rgba(90,46,145,.7);
}

/* the content wrapper steps aside so its children join the card grid */
.adv-content{ display:contents; }
.adv-content h3{
  grid-column:2; grid-row:1;
  font-size:1.05rem;
  font-weight:800;
  line-height:1.32;
  color: var(--ink);
  margin:0 0 .55rem;
  transition: color .35s var(--ease);
}
.advantage-card:hover .adv-content h3{ color: var(--plum); }
.adv-content p{
  grid-column: 1 / -1;
  grid-row:2;
  line-height:1.74;
  color: var(--ink-3);
  margin:0;
}

/* ==========================================================================
   5. WHY  (timeline + icon board)
   ========================================================================== */
#why{
  position:relative;
  padding-block: clamp(66px, 8vw, 110px);
  background: var(--paper-2);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}

.why-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(34px, 5vw, 72px);
  align-items:start;
}

/* the timeline scrolls past while the icon board stays put */
.why-visual{
  position:sticky;
  top: calc(var(--nav-h) + 40px);
}

.why-timeline{
  position:relative;
  padding-left:46px;
}
/* the spine linking the steps */
.why-timeline::before{
  content:"";
  position:absolute;
  left:19px; top:10px; bottom:10px;
  width:2px;
  border-radius:2px;
  background: linear-gradient(to bottom,
    rgba(187,62,151,.45), rgba(90,46,145,.28) 60%, transparent);
}

.why-item{
  position:relative;
  padding-bottom: clamp(26px, 3vw, 38px);
}
.why-item:last-child{ padding-bottom:0; }

.why-dot{
  position:absolute;
  left:-46px; top:-2px;
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background: var(--paper);
  border:1px solid rgba(187,62,151,.24);
  color: var(--plum);
  font-size:.94rem;
  box-shadow: 0 0 0 5px var(--paper-2);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .45s var(--ease-out);
}
.why-item:hover .why-dot{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: none;
}

.why-item h4{
  font-size:1.04rem;
  font-weight:800;
  line-height:1.34;
  color: var(--ink);
  margin:0 0 .5rem;
}
.why-item p{
  font-size:.935rem;
  line-height:1.76;
  color: var(--ink-3);
  margin:0;
}

.why-visual{ display:flex; justify-content:center; }

.why-center-card{
  position:relative;
  width:100%;
  max-width:430px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: var(--paper);
  border:1px solid var(--line);
  box-shadow: var(--sh-3);
  overflow:hidden;
}
.why-center-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background: var(--grad);
}
.why-center-card::after{
  content:"";
  position:absolute;
  right:-26%; top:-38%;
  width:300px; height:300px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(187,62,151,.10), transparent 68%);
  pointer-events:none;
}

.why-icon-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.why-icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:18px 8px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border:1px solid var(--line-2);
  text-align:center;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .4s var(--ease-out);
}
.why-icon-item i{
  font-size:1.2rem;
  color: var(--plum);
  transition: color .35s var(--ease), transform .4s var(--ease-out);
}
.why-icon-item:nth-child(even) i{ color: var(--magenta); }
.why-icon-item span{
  font-family: var(--font-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  color: var(--ink-2);
}
.why-icon-item:hover{
  transform: none;
  background: var(--paper);
  border-color: rgba(187,62,151,.26);
}
.why-icon-item:hover i{ transform: none; }

/* ==========================================================================
   6. TRUST BAR   (the achievements band, hoisted under the hero)
   A slim strip: fixed label rail on the left, the four figures cycling
   on the right. It holds still while hovered or focused.
   ========================================================================== */
#stats{
  position:relative;
  padding-block: 12px;
  background: linear-gradient(100deg, #241038 0%, #3A1A55 52%, #4E2263 100%);
  overflow:hidden;
  isolation:isolate;
}
#stats::after{
  content:"";
  position:absolute;
  left:-8%; top:-160%;
  width:460px; height:460px;
  border-radius:50%;
  z-index:0;
  background: radial-gradient(circle, rgba(187,62,151,.26), transparent 66%);
  pointer-events:none;
}
.stats-particles{ display:none; }

#stats > .container{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 214px minmax(0,1fr);
  align-items:center;
  gap: clamp(18px, 2.4vw, 34px);
  max-width:1440px;
}

/* ---- label rail ---- */
#stats .section-header{
  margin:0;
  max-width:none;
  padding-right: clamp(16px, 2vw, 26px);
  border-right:1px solid rgba(255,255,255,.16);
}
#stats .section-eyebrow{
  color:#F0A8D8;
  margin-bottom:2px;
  font-size:11px !important;
  letter-spacing:.16em;
}
#stats .section-eyebrow::before{ content:none; }
#stats .section-header h2{
  margin:0;
  color:#fff;
  font-size: 15px !important;
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.005em;
}
#stats .section-header h2 .gradient-text{
  background: var(--grad-light);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ---- viewport + moving track ----
   .stats-grid is the window; main.js puts the cards inside .trust-track so
   the animation cannot slide out over the label rail. */
.stats-grid{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  /* feather the edges so cards enter and leave instead of being chopped */
  mask-image: linear-gradient(to right, transparent 0, #000 42px,
              #000 calc(100% - 42px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42px,
              #000 calc(100% - 42px), transparent 100%);
}

.trust-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  width:max-content;
  --trust-shift: 50%;
  animation: trust-marquee var(--trust-speed, 34s) linear infinite;
  will-change: transform;
}
.stats-grid:hover .trust-track,
.stats-grid:focus-within .trust-track{ animation-play-state: paused; }

@keyframes trust-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--trust-shift))); }
}

/* ---- one figure ---- */
.stat-card{
  flex:0 0 auto;
  /* icon on the left, figure stacked over its label - side by side would
     make each card far too wide for four to share the strip */
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items:center;
  column-gap:12px;
  padding: 2px clamp(16px, 1.9vw, 26px);
  border:0;
  background:none;
  text-align:left;
  border-right:1px solid rgba(255,255,255,.12);
  transition:none;
}
.stat-card:hover{ transform:none; background:none; }

.stat-icon{
  grid-row: 1 / span 2;
  align-self:center;
  flex:0 0 34px;
  width:34px; height:34px;
  margin:0;
  display:grid;
  place-items:center;
  border-radius:11px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#F0A8D8;
  font-size:.94rem;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.stat-card:hover .stat-icon{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform:none;
}

.stat-num{
  grid-column:2; grid-row:1;
  display:block;
  font-family: var(--font-head);
  font-size: 23px !important;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
  margin:0 0 2px;
  white-space:nowrap;
}
.stat-label{
  grid-column:2; grid-row:2;
  font-family: var(--font-head);
  font-weight:600;
  font-size:13px !important;
  color: rgba(255,255,255,.72);
  white-space:nowrap;
  margin:0;
  line-height:1.3;
}
/* the sentence-long descriptions do not belong on a single line band */
.stat-desc{ display:none; }

@media (max-width:860px){
  #stats{ padding-block:14px; }
  #stats > .container{ grid-template-columns: 1fr; gap:12px; }
  #stats .section-header{
    padding:0 0 10px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.16);
    text-align:center;
  }
  #stats .section-eyebrow{ justify-content:center; }
  .stat-card{ padding:4px 20px; }
  .stat-num{ font-size:22px !important; }
}

@media (prefers-reduced-motion: reduce){
  .trust-track{ animation:none; flex-wrap:wrap; justify-content:center; }
  .stats-grid{ mask-image:none; -webkit-mask-image:none; }
}

/* ==========================================================================
   7. TESTIMONIALS
   ========================================================================== */
#testimonials{
  position:relative;
  padding-block: clamp(66px, 8vw, 110px);
  background: #FBF6F1;
  border-top:1px solid var(--line-2);
}

#testimonials .section-header{ text-align:center; margin-inline:auto; }
#testimonials .section-header .section-eyebrow{ justify-content:center; }
#testimonials .section-header p{ margin-inline:auto; }

/* the rail sits inside a padded lane so the arrows have somewhere to live */
.testi-swiper{
  position:relative;
  overflow:hidden;
  padding:6px 4px 10px;
}
.testi-slide{ height:auto; }

.testi-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding: clamp(26px, 2.8vw, 34px);
  background:#fff;
  border:1px solid rgba(28,18,48,.07);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px -6px rgba(28,18,48,.2);
  transition: box-shadow .4s var(--ease), transform .45s var(--ease-out);
}
.testi-card:hover{
  transform: none;
  box-shadow: 0 20px 44px -22px rgba(28,18,48,.35);
}

.testi-stars{ display:flex; gap:4px; margin-bottom:16px; }
.testi-stars i{ color:#E8A83C; font-size:.84rem; }

.testi-quote{
  flex:1 1 auto;
  color: var(--ink);
  line-height:1.72;
  margin:0 0 26px;
}

.testi-author{
  display:flex;
  align-items:center;
  gap:13px;
  padding-top:20px;
  border-top:1px solid rgba(28,18,48,.08);
}
.testi-avatar-placeholder{
  flex:0 0 44px;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--grad);
  position:relative;
}
.testi-avatar-placeholder::after{
  content:"\f007";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:.92rem;
  color: rgba(255,255,255,.9);
}
.testi-name{
  font-family: var(--font-head);
  font-weight:800;
  color: var(--ink);
  line-height:1.3;
}
.testi-role{ color: var(--ink-3); line-height:1.4; }

/* ---- round arrows riding the edges of the rail ---- */
/* ---- round arrows, centred under the rail ---- */
.testi-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top: clamp(26px, 3.2vw, 38px);
}
.testi-btn{
  width:52px; height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: var(--grad);
  border:0;
  color:#fff;
  box-shadow: 0 14px 30px -12px rgba(90,46,145,.75);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), opacity .3s var(--ease);
}
.testi-btn:hover{
  color:#fff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 18px 38px -12px rgba(90,46,145,.9);
}
.testi-btn.swiper-button-disabled{ opacity:.3; pointer-events:none; }

@media (max-width:768px){
  .testi-btn{ width:44px; height:44px; }
  .testi-prev{ margin-left:-6px; }
  .testi-next{ margin-right:-6px; }
  .testi-card:hover{ transform:none; }
}

/* ==========================================================================
   8. SECTION HEADER TWEAKS FOR THIS PAGE
   ========================================================================== */
#services .section-header,
#advantage .section-header,
#why .section-header,
#testimonials .section-header{ max-width:760px; }

#advantage .section-header h2{ margin:0; }



/* This header is the one on the page set centre aligned, but the 760px
   block itself still hugged the left of a 1220px container, so the centred
   text sat off centre on the page. */
#testimonials .section-header{ margin-inline:auto; }



/* .advantage-card is shared with the service pages, where the same class
   deliberately rides up over the intro photograph (margin:-46px 22px 0 -22px
   in service-pages.css). This grid sits under a heading, not a photo, so the
   overlap only dragged the cards over the paragraph above them. */
#advantage .advantage-grid > .advantage-card{ margin:0; }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero-content{ max-width:none; }

  /* One column: the brief sits on top and the cards run straight down the
     page. An inner scroller inside a scrolling page traps touch gestures,
     so the column releases its own scrolling here. */
  #services > .container{ grid-template-columns: 1fr; gap: clamp(26px, 4vw, 38px); }
  #services .section-header{ position:static; }
  #services .section-header p{ max-width:60ch; }

  .services-bento{
    max-height:none;
    overflow:visible;
    padding:0;
    gap:14px;
    mask-image:none;
    -webkit-mask-image:none;
  }

  .why-layout{ grid-template-columns: 1fr; }
  .why-visual{ position:static; order:-1; }
  .why-center-card{ max-width:none; }
}

@media (max-width:900px){
  .about-grid{ grid-template-columns: 1fr; }
  /* auto inline margins stop a grid item stretching, so without an explicit
     width this shrank to fit its content. With the photo missing that content
     is a 17px broken image box, which collapsed the whole slot on phones. */
  .about-image-stack{ width:100%; max-width:520px; margin-inline:auto; }
}

@media (max-width:768px){
  #hero{
    min-height: clamp(520px, 78vh, 700px);
    min-height: clamp(520px, 78svh, 700px);
  }
  .hero-slide > .container{ padding-block: clamp(60px, 12vw, 92px); }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }

  /* icon above the copy, arrow drops to its own line */
  .service-card{
    grid-template-columns: auto 1fr;
    row-gap:4px;
  }
  .service-card .service-icon{ grid-row:1; grid-column:1; }
  .service-card h3{ grid-column:2; align-self:center; }
  .service-card p{ grid-column: 1 / -1; margin-top:10px; }
  .service-card .service-arrow{
    grid-row:auto;
    grid-column: 1 / -1;
    justify-self:start;
    margin-top:14px;
  }
  .service-card:hover{ transform:none; }
  .service-big-num{ right:18px; bottom:-10px; font-size:3.2rem; }
  .service-card:hover,
  .advantage-card:hover,
  .stat-card:hover,
  .testi-card:hover,
  .feature-chip:hover{ transform:none; }

  .why-icon-grid{ grid-template-columns: repeat(3, 1fr); gap:9px; }
  .why-icon-item{ padding:14px 6px; }
}

@media (max-width:560px){
  .about-features{ grid-template-columns: 1fr; }
  .about-image-stack{ padding: 0 30px 40px 0; }
  .about-img-accent{ width:62%; border-width:4px; }
  .why-timeline{ padding-left:40px; }
  .why-dot{ left:-40px; width:34px; height:34px; border-radius:11px; }
  .why-icon-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-swiper-nav{ bottom:20px; }
}

@media (prefers-reduced-motion: reduce){
  .mesh-blob,
  .hero-particles span, .stats-particles span,
  .scroll-line::after{ animation:none !important; }
  .hero-bg, .swiper-slide-active .hero-bg{ transform:none !important; }
}

/* the about stack reserves its space but was missing the placeholder mark */
.about-image-stack.has-placeholder::after{
  content:"\f03e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:2rem;
  color: rgba(90,46,145,.30);
  pointer-events:none;
  z-index:2;
}


/* --------------------------------------------------------------
   HERO BANNERS  ·  three reserved slots
   The three slides each carry their own banner photograph. Until a
   file lands at the path, this panel paints the slot in the brand
   so the banner reads as reserved space rather than an empty wash.
   .hero-bg sits above this and covers it the moment the file exists.
   -------------------------------------------------------------- */
.hero-slide::before{
  content:"\f03e";
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: rgba(255,255,255,.14);
  background-color:#2A1140;
  background-image:
    linear-gradient(120deg, rgba(90,46,145,.85) 0%, rgba(187,62,151,.55) 100%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0 14px, transparent 14px 28px);
}