/* =========================================================
   ADOSPIRE — single-page site
   Faithful build of the supplied reference design:
   soft blue hero card with chamfered corners, bold split
   headline, stat pills, "Who We Are" section, numbered
   service cards, testimonials, community CTA, blue footer.
========================================================= */

:root{
  --navy:      #0B1A3D;
  --navy-soft: #38426A;
  --muted:     #6B7280;
  --line:      #E6EAF4;

  --blue-1:    #4F8CFF;
  --blue-2:    #123FCB;
  --grad-cta:  linear-gradient(135deg, #58A6FF 0%, #1440D6 100%);
  --grad-text: linear-gradient(135deg, #2F6BFF 0%, #123FCB 100%);

  --bg-page:   #FFFFFF;
  --bg-hero:   linear-gradient(180deg, #EAF1FF 0%, #F4F7FE 55%, #FFFFFF 100%);
  --bg-chip:   #EEF3FF;
  --card:      #FFFFFF;
  --footer-bg: #1747E0;
  --footer-bg-2: #123FCB;

  --shadow-card: 0 20px 45px -18px rgba(18,49,120,.22);
  --shadow-soft: 0 10px 30px -14px rgba(18,49,120,.16);

  --font-display: "Plus Jakarta Sans", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;

  --container: 1220px;
  --notch: 26px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--bg-page);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 32px; }
::selection{ background:var(--blue-1); color:#fff; }
:focus-visible{ outline:2px solid var(--blue-2); outline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; color:var(--navy); line-height:1.08; letter-spacing:-.01em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-2);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--grad-text); border-radius:2px; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  font-weight:700; font-size:14.5px;
  border-radius:100px;
  border:1.5px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .3s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn-solid{ background:var(--grad-cta); background-size:150% 100%; background-position:0 0; color:#fff; box-shadow:var(--shadow-soft); }
.btn-solid:hover{ background-position:100% 0; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(18,64,214,.45); }
.btn-outline{ border-color:var(--line); color:var(--navy); background:#fff; }
.btn-outline:hover{ border-color:var(--blue-2); color:var(--blue-2); }
.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-white{ background:#fff; color:var(--blue-2); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,0,0,.25); }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:44px; height:44px; object-fit:contain; }
.brand span{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--navy); }
.navlinks{ display:flex; align-items:center; gap:38px; }
.navlinks a{ font-size:14.5px; font-weight:600; color:var(--navy-soft); transition:color .2s; }
.navlinks a:hover, .navlinks a.active{ color:var(--blue-2); }
.nav-toggle{ display:none; background:none; border:none; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; border-radius:2px; }

@media(max-width:940px){
  .navlinks{
    position:fixed; inset:88px 16px auto 16px;
    background:#fff; border:1px solid var(--line); border-radius:18px;
    flex-direction:column; align-items:flex-start; gap:4px; padding:14px;
    box-shadow:var(--shadow-card);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:all .25s ease;
  }
  .navlinks.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .navlinks a{ width:100%; padding:12px 10px; border-radius:10px; }
  .navlinks a:hover{ background:var(--bg-chip); }
  .nav-toggle{ display:block; }
  .nav .btn-sm{ display:none; }
}

/* ---------- HERO ---------- */
.hero{ background:var(--bg-hero); position:relative; padding:64px 0 40px; overflow:hidden; }
.hero-dots{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(circle, rgba(18,64,214,.18) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, black 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, black 0%, transparent 75%);
}
.hero-card{
  position:relative; z-index:1;
  background:var(--card);
  box-shadow:var(--shadow-card);
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%,
    0 calc(100% - var(--notch)), 0 var(--notch)
  );
  padding:52px 48px 44px;
}
@media(max-width:700px){ .hero-card{ padding:36px 22px 30px; --notch:18px; } }

.hero-top{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.client-pill{
  display:flex; align-items:center; gap:12px;
  background:var(--bg-chip); border-radius:100px; padding:8px 16px 8px 8px;
}
.avatars{ display:flex; }
.avatars .av{
  width:30px; height:30px; border-radius:50%; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:11px; color:#fff;
  margin-left:-10px;
}
.avatars .av:first-child{ margin-left:0; }
.client-pill .txt{ font-size:13px; font-weight:700; color:var(--navy); }
.client-pill .txt small{ display:block; font-size:10.5px; font-weight:500; color:var(--muted); }

.hero-headline{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px;
  margin:-6px 0 30px;
}
.hero-headline h1{ font-size:clamp(40px,6.4vw,78px); }
.hero-headline h1.right{ text-align:right; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-glyph{ width:clamp(120px,16vw,190px); }
@media(max-width:760px){
  .hero-headline{ grid-template-columns:1fr; text-align:center; gap:10px; }
  .hero-headline h1.right{ text-align:center; }
  .hero-glyph{ width:120px; margin:0 auto; }
}

.hero-body{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:start; margin-bottom:8px; }
@media(max-width:900px){ .hero-body{ grid-template-columns:1fr; } }

.hero-points{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }
.hero-points li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; }
.hero-points .dot{ width:9px; height:9px; border-radius:50%; background:var(--grad-text); flex:none; }

.hero-info-card{
  background:var(--bg-chip); border-radius:16px; padding:18px 20px;
  min-width:190px;
}
.hero-info-card h5{ font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.hero-info-card p, .hero-info-card ul{ font-size:12.5px; color:var(--muted); }
.hero-info-card ul li{ padding:4px 0; border-top:1px solid rgba(18,64,214,.08); }
.hero-info-card ul li:first-child{ border-top:none; }

.hero-center-spacer{ display:none; }
@media(min-width:901px){ .hero-center-spacer{ display:block; width:1px; } }

.hero-stats-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:30px; gap:20px; flex-wrap:wrap;
}
.hero-stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,34px); }
.hero-stat .label{ font-size:12.5px; color:var(--muted); font-weight:600; }
.hero-stat.right{ text-align:right; }
.hero-cta-group{ display:flex; gap:12px; order:2; margin:0 auto; }
@media(max-width:640px){
  .hero-stats-row{ flex-direction:column; text-align:center; }
  .hero-stat.right{ text-align:center; }
  .hero-cta-group{ order:0; }
}

/* ---------- SECTION shells ---------- */
section{ padding:100px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head p{ color:var(--muted); font-size:15.5px; margin-top:12px; }
.section-head.left{ text-align:left; margin-left:0; max-width:560px; }


/* WhatsApp Button Styling */
.whatsapp-button {
    position: fixed;
    right: 30px;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust vertically to center perfectly */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
    z-index: 1000; /* Ensures it stays on top of other content */
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Removes underline */
}

.whatsapp-button a img {
    width: 60px; /* Maintain size of the GIF, adjust as needed */
    height: 60px; /* Maintain size of the GIF, adjust as needed */
    object-fit: contain; /* Ensures the GIF scales proportionally without cropping */
    transition: transform 0.3s ease; /* Smooth hover effect for the GIF */
    animation: pulse 2s infinite ease-in-out; /* Continuous pulsing animation */
}

/* Hover Animation for the Icon (Additional Animation) */
.whatsapp-button a img:hover {
    transform: scale(1.1) rotate(10deg); /* Slight zoom and rotation on hover for interactivity */
    animation: none; /* Pause the pulse animation on hover to emphasize the hover effect */
}

/* Pulse Animation for Continuous Effect */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Show button when scrolling */
body.scrolled .whatsapp-button {
    opacity: 1; /* Visible when scrolled */
}

/* Hide button near footer */
.footer {
    position: relative;
    height: 200px; /* Adjust this to match your footer height */
}

.footer ~ .whatsapp-button {
    display: none; /* Hides the button when near or below the footer */
}


/* ---------- ABOUT / WHO WE ARE ---------- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
.about-copy p{ color:var(--muted); font-size:15.5px; margin-bottom:26px; max-width:520px; }
.about-figure{ position:relative; }
.about-figure svg{ width:100%; height:auto; }

/* ---------- SERVICES ---------- */
/* .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:32px 26px; position:relative; transition:transform .3s, box-shadow .3s, border-color .3s;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent; }
.service-num{
  position:absolute; top:26px; right:26px;
  font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--muted);
}
.service-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--grad-text);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.service-icon svg{ width:24px; height:24px; stroke:#fff; }
.service-card h3{ font-size:19px; margin-bottom:10px; }
.service-card p{ font-size:14px; color:var(--muted); } */

/* =========================================================
   SERVICES — FINAL RESPONSIVE TIMELINE
   Scoped to .services-section so it cannot conflict with
   the rest of the website's .service-card styles.
   ========================================================= */

.services-section{
  position:relative;
  width:100%;
  padding:90px 20px 110px;
  background:var(--bg-page);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}

.services-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  opacity:.8;
  z-index:-1;
  pointer-events:none;
}

/* ---------- SERVICES HEADING ---------- */

.services-section .section-title{
  position:relative;
  z-index:2;
  margin:0 0 140px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  line-height:1.15;
}

.services-section .servicesh{
  color:#0066cc;
}

.services-section .section-subtitle{
  position:relative;
  z-index:2;
  width:min(800px,100%);
  margin:-58px auto 70px;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:clamp(.95rem,1.5vw,1.2rem);
  line-height:1.8;
  text-align:center;
  animation:servicesFadeIn 1s ease-in-out both;
}

/* ---------- TIMELINE ---------- */

.services-section .timeline{
  position:relative;
  z-index:2;
  width:min(1240px,100%);
  margin:80px auto 0;
  display:flex;
  flex-direction:column;
  gap:65px;
}

.services-section .timeline-item{
  position:relative;
  width:100%;
  min-height:250px;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
  opacity:0;
  animation:servicesSlideIn .8s ease forwards;
}

.services-section .timeline-item:nth-child(1){animation-delay:.15s;}
.services-section .timeline-item:nth-child(2){animation-delay:.30s;}
.services-section .timeline-item:nth-child(3){animation-delay:.45s;}
.services-section .timeline-item:nth-child(4){animation-delay:.60s;}
.services-section .timeline-item:nth-child(5){animation-delay:.75s;}
.services-section .timeline-item:nth-child(6){animation-delay:.90s;}

/*
   Desktop alignment:
   LEFT  = circle at outer-left + card on left
   RIGHT = card on right + circle at outer-right
*/

.services-section .timeline-item.left{
  justify-content:flex-start;
  padding-left:100px;
  text-align:left;
}

.services-section .timeline-item.right{
  justify-content:flex-end;
  padding-right:100px;
  text-align:left;
}

/* ---------- NUMBER CIRCLE ---------- */

.services-section .timeline-circle{
  position:absolute;
  top:50%;
  width:82px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2vw,1.55rem);
  font-weight:700;
  line-height:1;
  z-index:5;
  background:var(--grad-cta);
  box-shadow:
    0 0 20px rgba(0,221,235,.30),
    0 8px 25px rgba(0,0,0,.08);
  transform:translateY(-50%);
  transition:transform .4s ease,box-shadow .4s ease;
}

.services-section .timeline-item.left .timeline-circle{
  left:0;
}

.services-section .timeline-item.right .timeline-circle{
  right:0;
}

.services-section .timeline-item:hover .timeline-circle{
  transform:translateY(-50%) scale(1.10) rotate(4deg);
  box-shadow:
    0 0 30px rgba(0,221,235,.50),
    0 12px 30px rgba(0,0,0,.10);
}

/* ---------- CIRCLE COLORS ---------- */

.services-section .blue{
  background:var(--grad-cta);
}

.services-section .green{
  background:var(--grad-cta);
}

.services-section .orange{
  background:var(--grad-cta);
}

.services-section .red{
  background:var(--grad-cta);
}

.services-section .brown{
  background:var(--grad-cta);
}

/* ---------- SERVICE CARD ---------- */

.services-section .service-card{
  position:relative;
  width:min(540px,100%);
  min-height:250px;
  padding:34px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  z-index:2;
  transition:
    transform .5s ease,
    box-shadow .5s ease,
    border-color .5s ease;
}

.services-section .timeline-item.left .service-card{
  margin-right:auto;
}

.services-section .timeline-item.right .service-card{
  margin-left:auto;
}

/* ---------- CARD SHINE ---------- */

.services-section .service-card::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
    45deg,
    rgba(0,221,235,.05),
    rgba(255,0,122,.05),
    transparent
  );
  animation:servicesShine 3s infinite linear;
  z-index:0;
  pointer-events:none;
}

/* ---------- CARD HOVER ---------- */

.services-section .service-card:hover{
  transform:translateY(-10px);
  border-color:rgba(79,140,255,.35);
  box-shadow:var(--shadow-card);
}

/* ---------- SERVICE ICON ---------- */

.services-section .service-card i{
  position:relative;
  z-index:2;
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 68px;
  margin:0 0 20px;
  color:#fff;
  font-size:2.4rem;
  line-height:1;
  background:var(--grad-cta);
  border-radius:50%;
  box-shadow:0 0 15px rgba(0,221,235,.30);
  transition:transform .4s ease,box-shadow .4s ease;
}

.services-section .service-card:hover i{
  transform:scale(1.10) rotate(360deg);
  box-shadow:0 0 25px rgba(0,221,235,.50);
}

/* ---------- SERVICE CONTENT ---------- */

.services-section .service-card h3{
  position:relative;
  z-index:2;
  margin:0 0 10px;
  color:#333;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2vw,1.55rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:1px;
  text-transform:uppercase;
}

.services-section .service-card p{
  position:relative;
  z-index:2;
  margin:0;
  color:#666;
  font-family:var(--font-body);
  font-size:clamp(.95rem,1.5vw,1.05rem);
  line-height:1.7;
}

.services-section .service-card a{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:18px;
  color:var(--blue-2);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:color .3s ease,transform .3s ease;
}

.services-section .service-card a:hover{
  color:var(--blue-1);
  transform:translateX(6px);
}

/* ---------- LARGE DESKTOP: 1441PX+ ---------- */

@media (min-width:1441px){
  .services-section{
    padding-top:110px;
    padding-bottom:130px;
  }

  .services-section .timeline{
    width:min(1320px,100%);
    gap:80px;
  }

  .services-section .timeline-item.left{
    padding-left:110px;
  }

  .services-section .timeline-item.right{
    padding-right:110px;
  }

  .services-section .timeline-circle{
    width:88px;
    height:88px;
  }

  .services-section .service-card{
    width:560px;
    min-height:260px;
    padding:38px 40px;
  }
}

/* ---------- LAPTOP: 1025PX–1440PX ---------- */

@media (max-width:1440px) and (min-width:1025px){
  .services-section{
    padding-left:24px;
    padding-right:24px;
  }

  .services-section .timeline{
    width:min(1180px,100%);
    gap:70px;
  }

  .services-section .timeline-item.left{
    padding-left:90px;
  }

  .services-section .timeline-item.right{
    padding-right:90px;
  }

  .services-section .timeline-circle{
    width:78px;
    height:78px;
  }

  .services-section .service-card{
    width:min(520px,100%);
    min-height:245px;
    padding:32px;
  }
}

/* ---------- TABLET: 769PX–1024PX ---------- */

@media (max-width:1024px) and (min-width:769px){
  .services-section{
    padding:80px 24px 90px;
  }

  .services-section .section-subtitle{
    margin-bottom:55px;
  }

  .services-section .timeline{
    width:min(900px,100%);
    gap:55px;
  }

  .services-section .timeline-item{
    min-height:215px;
  }

  .services-section .timeline-item.left{
    padding-left:76px;
  }

  .services-section .timeline-item.right{
    padding-right:76px;
  }

  .services-section .timeline-circle{
    width:68px;
    height:68px;
    font-size:1.3rem;
  }

  .services-section .service-card{
    width:min(440px,100%);
    min-height:215px;
    padding:28px 30px;
  }

  .services-section .service-card i{
    width:58px;
    height:58px;
    flex-basis:58px;
    font-size:2rem;
    margin-bottom:16px;
  }

  .services-section .service-card h3{
    font-size:1.3rem;
  }

  .services-section .service-card p{
    font-size:.95rem;
  }

  .services-section .service-card a{
    font-size:.95rem;
  }
}

/* ---------- MOBILE / TABLET PORTRAIT: 768PX AND BELOW ---------- */

@media (max-width:768px){
  .services-section{
    padding:70px 18px 80px;
  }

  .services-section .section-title{
    margin-bottom:55px;
    font-size:2.2rem;
  }

  .services-section .section-subtitle{
    width:min(680px,100%);
    margin-top:-30px;
    margin-bottom:50px;
    font-size:1rem;
    line-height:1.7;
  }

  .services-section .timeline{
    width:100%;
    gap:45px;
  }

  /*
     Completely reset desktop left/right positioning.
     This removes the old flex-direction: column !important
     conflict and gives mobile a clean vertical flow.
  */

  .services-section .timeline-item,
  .services-section .timeline-item.left,
  .services-section .timeline-item.right{
    width:100%;
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0;
    margin:0;
    text-align:center;
  }

  .services-section .timeline-circle,
  .services-section .timeline-item.left .timeline-circle,
  .services-section .timeline-item.right .timeline-circle{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    width:64px;
    height:64px;
    flex:0 0 64px;
    margin:0 0 20px;
    transform:none;
    font-size:1.25rem;
  }

  .services-section .timeline-item:hover .timeline-circle{
    transform:scale(1.08) rotate(3deg);
  }

  .services-section .service-card,
  .services-section .timeline-item.left .service-card,
  .services-section .timeline-item.right .service-card{
    width:min(620px,100%);
    max-width:100%;
    min-height:auto;
    margin:0;
    padding:28px 26px;
    text-align:center;
  }

  .services-section .service-card i{
    margin-left:auto;
    margin-right:auto;
  }

  .services-section .service-card a{
    margin-left:auto;
    margin-right:auto;
  }

  .services-section .service-card h3{
    font-size:1.35rem;
  }

  .services-section .service-card p{
    font-size:1rem;
  }

  .services-section .service-card:hover{
    transform:translateY(-6px);
  }
}

/* ---------- MOBILE: 600PX AND BELOW ---------- */

@media (max-width:600px){
  .services-section{
    padding:55px 14px 65px;
  }

  .services-section .section-title{
    margin-bottom:45px;
    font-size:1.9rem;
  }

  .services-section .section-subtitle{
    margin-top:-20px;
    margin-bottom:42px;
    font-size:.95rem;
  }

  .services-section .timeline{
    gap:38px;
  }

  .services-section .timeline-circle{
    width:58px;
    height:58px;
    flex-basis:58px;
    margin-bottom:17px;
    font-size:1.1rem;
  }

  .services-section .service-card{
    padding:24px 20px;
    border-width:1.5px;
    border-radius:18px;
  }

  .services-section .service-card i{
    width:54px;
    height:54px;
    flex-basis:54px;
    font-size:1.8rem;
    margin-bottom:15px;
  }

  .services-section .service-card h3{
    font-size:1.15rem;
    letter-spacing:.7px;
  }

  .services-section .service-card p{
    font-size:.92rem;
    line-height:1.65;
  }

  .services-section .service-card a{
    margin-top:15px;
    font-size:.92rem;
  }
}

/* ---------- SMALL MOBILE: 480PX AND BELOW ---------- */

@media (max-width:480px){
  .services-section{
    padding:45px 12px 55px;
  }

  .services-section .section-title{
    margin-bottom:38px;
    font-size:1.7rem;
  }

  .services-section .section-subtitle{
    margin-top:-14px;
    margin-bottom:36px;
    font-size:.88rem;
    line-height:1.6;
  }

  .services-section .timeline{
    gap:32px;
  }

  .services-section .timeline-circle{
    width:52px;
    height:52px;
    flex-basis:52px;
    font-size:1rem;
    margin-bottom:15px;
  }

  .services-section .service-card{
    padding:22px 17px;
    border-radius:16px;
  }

  .services-section .service-card i{
    width:48px;
    height:48px;
    flex-basis:48px;
    font-size:1.55rem;
  }

  .services-section .service-card h3{
    font-size:1.05rem;
    letter-spacing:.5px;
  }

  .services-section .service-card p{
    font-size:.86rem;
    line-height:1.6;
  }

  .services-section .service-card a{
    font-size:.86rem;
  }
}

/* ---------- VERY SMALL DEVICES: 360PX AND BELOW ---------- */

@media (max-width:360px){
  .services-section{
    padding-left:10px;
    padding-right:10px;
  }

  .services-section .section-title{
    margin-bottom:32px;
    font-size:1.5rem;
  }

  .services-section .section-subtitle{
    font-size:.82rem;
  }

  .services-section .service-card{
    padding:20px 14px;
  }

  .services-section .service-card h3{
    font-size:1rem;
  }

  .services-section .service-card p{
    font-size:.82rem;
  }
}

/* ---------- SERVICE ANIMATIONS ---------- */

@keyframes servicesFadeIn{
  from{
    opacity:0;
    transform:translateY(-20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

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

@keyframes servicesShine{
  0%{
    transform:translateX(-100%) translateY(-100%);
  }
  100%{
    transform:translateX(100%) translateY(100%);
  }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion:reduce){
  .services-section .timeline-item,
  .services-section .section-subtitle,
  .services-section .service-card::before{
    animation:none;
    opacity:1;
    transform:none;
  }

  .services-section .service-card,
  .services-section .timeline-circle,
  .services-section .service-card i,
  .services-section .service-card a{
    transition:none;
  }
}


/* ---------- TESTIMONIALS ---------- */
.testi-band{ background:var(--bg-chip); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background:#fff; border-radius:18px; padding:30px 26px; box-shadow:var(--shadow-soft); }
.stars{ display:flex; gap:3px; margin-bottom:16px; }
.stars svg{ width:15px; height:15px; fill:#FFB020; }
.testi-card p.quote{ font-size:14.5px; color:var(--navy-soft); margin-bottom:22px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-person .av{
  width:42px; height:42px; border-radius:50%;
  background:var(--grad-text); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
}
.testi-person .name{ font-weight:700; font-size:13.5px; }
.testi-person .role{ font-size:12px; color:var(--muted); }

/* ---------- COMMUNITY / NEWSLETTER ---------- */
.community-card{
  position:relative;
  background:var(--bg-hero);
  box-shadow:var(--shadow-card);
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%,
    0 calc(100% - var(--notch)), 0 var(--notch)
  );
  padding:64px 40px 0;
  overflow:hidden;
}
.community-inner{ text-align:center; max-width:560px; margin:0 auto; position:relative; z-index:1; }
.community-inner h2{ font-size:clamp(28px,4vw,42px); margin-bottom:26px; }
.subscribe {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;

    gap: 4px 10px;

    width: 100%;
    max-width: 620px;

    margin: 0 auto;
    padding: 6px;

    background: #fff;
    border-radius: 28px;

    box-shadow: var(--shadow-soft);
}


/* EMAIL — FIRST LINE */

.subscribe input[type="email"] {
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    min-width: 0;

    border: none;
    outline: none;

    padding: 14px 16px;

    background: transparent;

    color: var(--navy);
    font-family: var(--font-body);
    font-size: 14px;

    box-sizing: border-box;
}


/* MESSAGE — SECOND LINE */

.subscribe textarea {
    grid-column: 1;
    grid-row: 2;

    width: 100%;
    min-width: 0;

    height: 70px;
    min-height: 70px;
    max-height: 70px;

    padding: 14px 16px;

    border: none;
    outline: none;
    resize: none;

    background: transparent;

    color: var(--navy);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;

    box-sizing: border-box;
}


/* PLACEHOLDER */

.subscribe input::placeholder,
.subscribe textarea::placeholder {
    color: #777;
    opacity: 1;
}


/* SUBMIT — RIGHT SIDE */

.subscribe button {
    grid-column: 2;
    grid-row: 1 / 3;

    align-self: center;

    border: none;
    outline: none;

    white-space: nowrap;
    cursor: pointer;
}


/* TABLET */

@media (max-width: 768px) {

    .subscribe {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        max-width: 560px;
    }

    .subscribe button {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}


/* MOBILE */

@media (max-width: 520px) {

    .subscribe {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 100%;

        padding: 8px;

        border-radius: 22px;
    }

    .subscribe input[type="email"] {
        width: 100%;
        height: 48px;
    }

    .subscribe textarea {
        width: 100%;

        height: 85px;
        min-height: 85px;
        max-height: 85px;
    }

    .subscribe button {
        width: 100%;
        margin-top: 4px;
    }
}
.community-stats{ display:flex; justify-content:center; gap:16px; margin:36px 0 0; position:relative; z-index:1; flex-wrap:wrap; }
.community-stat{ background:#fff; border-radius:14px; padding:16px 26px; box-shadow:var(--shadow-soft); }
.community-stat .num{ font-family:var(--font-display); font-weight:800; font-size:24px; }
.community-stat .label{ font-size:12px; color:var(--muted); font-weight:600; }
.community-art{ margin-top:32px; line-height:0; }
.community-art svg{ width:100%; height:auto; display:block; }
.form-note{ font-size:12px; color:var(--muted); margin-top:10px; min-height:16px; }

/* ---------- FOOTER ---------- */
footer{
  background:linear-gradient(135deg, var(--footer-bg) 0%, var(--footer-bg-2) 100%);
  color:#DCE4FF; padding:72px 0 26px; margin-top:64px;
}
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:50px; }
.foot-brand{ max-width:340px; }
.foot-brand .brand span{ color:#fff; }
.foot-brand p{ margin-top:16px; font-size:14px; color:#B9C6F5; }
.foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h5{ color:#fff; font-size:14px; font-weight:700; margin-bottom:18px; }
.foot-col a{ display:block; font-size:14px; color:#B9C6F5; padding:6px 0; transition:color .2s; }
.foot-col a:hover{ color:#fff; }
.foot-divider{ border-top:1px solid rgba(255,255,255,.16); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-social{ display:flex; gap:12px; }
.foot-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.foot-social a:hover{ background:rgba(255,255,255,.22); }
.foot-social svg{ width:16px; height:16px; stroke:#fff; }
.foot-legal{ display:flex; gap:26px; font-size:13px; color:#B9C6F5; }
.foot-legal a:hover{ color:#fff; }
.foot-copy{ font-size:13px; color:#8FA0DC; }

/* ---------- REVEAL ---------- */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }