/* ==========================================================================
   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;
  /* sampled from the top band of hero-1/2/3 */
  --hero-sand:  #E5DFD6;
}

/* ==========================================================================
   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{
  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; the second was removed from
   the markup rather than hidden, because a hidden img is still fetched
   and its failure still marks the stack as holding a missing picture */
.about-img-main.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;
  /* the element holds the person's initial as a fallback for when there
     is no photograph. The icon below is what is actually shown, so the
     letter is hidden rather than left to paint in the top corner of the
     circle, where it read as a broken image mark. */
  font-size:0;
  color:transparent;
}
.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){
  /* On a phone the photograph stops being a backdrop. A 1.56:1 frame
     behind a tall column of copy had to crop hard to fill it, and the
     wash that kept the text legible hid most of what was left. The copy
     now runs first on the section's own dark ground, and the whole
     frame sits underneath it, uncropped and unbordered. */
  /* The copy sits on the photograph's own ground, sampled from the top
     band of all three frames at #E5DFD6, so the block and the picture
     read as one surface and the join disappears. The copy flips to ink
     because the ground is now light. */
  #hero{
    min-height:0;
    display:block;
    background: var(--hero-sand);
  }
  #hero .hero-badge{
    background: rgba(28,18,48,.055);
    border-color: rgba(28,18,48,.14);
    color: var(--ink-2);
  }
  #hero .hero-badge i{ color: var(--magenta); }
  #hero .hero-title{
    color: var(--ink);
    text-shadow:none;
  }
  /* the hero accent is a white based gradient for the dark band, which
     would disappear on the sand; the brand gradient reads on light */
  /* the background shorthand resets background-clip, which turns the
     clipped text into a filled box, so only the image is replaced */
  #hero .hero-title .gradient-text{ background-image: var(--grad); }
  /* ink-3 only reaches 3.4:1 on this sand ground, short of 4.5 */
  #hero .hero-desc{ color: var(--ink-2); }
  /* the plum mesh, grid and particles are painted over the ground, so
     they have to go for the sand to show and the ink to read */
  #hero .hero-mesh,
  #hero .hero-grid,
  #hero .hero-particles{ display:none; }
  #hero .swiper-bullet{ background: rgba(28,18,48,.22); }
  #hero .swiper-bullet.active{ background: var(--grad); }
  .hero-swiper{
    position:static;
    height:auto;
  }
  /* Swiper gives a slide height:100%, which against an auto height
     wrapper resolves to its own content. The slides then sat at three
     different heights inside a wrapper sized to the tallest. Letting
     them stretch gives the photo below the slack to take. */
  #hero .swiper-wrapper{ align-items:stretch; }
  #hero .swiper-slide{ height:auto; }
  .hero-slide{
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
  }
  .hero-slide > .container{
    order:1;
    /* the copy block absorbs whatever the tallest slide adds, so the
       photograph below it never has to change shape to fill the slide */
    flex:1 1 auto;
    padding-block: clamp(30px, 7.5vw, 50px);
  }
  .hero-bg{
    order:2;
    position:static;
    width:100%;
    /* Fade stacks the three slides, so the wrapper is as tall as the
       tallest headline and a fixed ratio box left a dead band under the
       shorter ones. The photo takes the slack instead: it never leaves a
       gap, and the floor keeps it a reasonable depth on the tallest. */
    flex:0 0 auto;
    /* One shape for all three slides. At 20:19 the frame is deeper than
       the picture's own 1.56:1, so cover fits it by height: the whole
       height of the photograph is shown, heads and feet included, and
       the crop comes off the sides where there is only room.
       The people sit at about 0.65 across all three frames rather than
       in the middle, so the window is pushed right to bring them to the
       centre. At this shape that is 96%, which shows the picture from
       0.31 to 0.99 and holds every one of them. */
    aspect-ratio: 20 / 19;
    height:auto;
    transform:none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 96% center;
    border:0;
    border-radius:0;
    /* the ground above is the sand sampled from the top of these same
       frames, so a short fade is all the join needs; a vignette round
       the rest only ate the picture the reference keeps whole */
    /* the frame is pulled up under the copy, and on the longest slide
       that puts its top edge over the button. The top eleventh of it is
       a transparent fade so nothing shows there, and the base rule
       already takes it out of hit testing, so the button stays live. */
    margin-top: calc(-1 * clamp(34px, 9.5vw, 64px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 11%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%);
  }
  .swiper-slide-active .hero-bg{ transform:none; }
  /* the photo is the last thing in the slide; the bullets ride on it
     rather than sitting in a band underneath */
  .hero-swiper-nav{
    position:absolute;
    bottom:14px;
    z-index:4;
  }
  /* both existed only to make the copy readable on top of the photograph */
  .hero-bg-overlay{ display:none; }
  /* the base rule for this placeholder sits later in the file, so the
     override needs the id to outrank it */
  #hero .hero-slide::before{ content:none; }

  /* buttons hug their label rather than stretching the row. 36px of
     padding each side is generous on a 360px screen, so it comes in. */
  .hero-actions{ width:auto; }
  /* #hero .btn-primary sets the base geometry, and an id outranks two
     classes, so the override has to carry the id too */
  #hero .hero-actions .btn,
  #hero .hero-actions .btn-primary,
  #hero .hero-actions .btn-outline{
    flex:0 0 auto;
    width:auto;
    padding:13px 22px;
    gap:9px;
  }

  /* the secondary button is not carried on a phone: one clear action
     under the copy, and the photograph comes up to meet it */
  #hero .btn-outline{ display:none; }

  /* 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; }
  .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);
}