/* =========================================================
   Sherafati Clinic — Services Page V2
   Same design system as homepage + restrained color diversity
   ========================================================= */

.services-page-v2{
  --sv-bg:#f6f1e7;
  --sv-bg-soft:#fbf8f2;
  --sv-paper:#fffdf9;
  --sv-ink:#12160f;
  --sv-muted:#74776e;
  --sv-line:#dfd8cc;
  --sv-gold:#c99a45;
  --sv-dark:#10140f;

  /* Additional restrained medical accents */
  --sv-sage:#728b78;
  --sv-sage-soft:#e8efe9;
  --sv-blue:#708797;
  --sv-blue-soft:#e9eff2;
  --sv-rose:#a47b79;
  --sv-rose-soft:#f1e8e7;
  --sv-terracotta:#a8795d;
  --sv-terracotta-soft:#f3e8e0;
  --sv-olive:#8c8b61;
  --sv-olive-soft:#efeee2;
  --sv-sand:#b09268;
  --sv-sand-soft:#f2eadf;

  background:var(--sv-bg);
  color:var(--sv-ink);
  overflow:hidden;
}

.services-page-v2,
.services-page-v2 button,
.services-page-v2 input,
.services-page-v2 select,
.services-page-v2 textarea{
  font-family:inherit;
}

.services-page-v2 a{color:inherit;text-decoration:none}

.services-page-v2 .services-section,
.services-page-v2 .services-final-cta{
  position:relative;
}

.services-page-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 83% 24%,rgba(201,154,69,.10),transparent 18%),
    radial-gradient(circle at 12% 70%,rgba(112,135,151,.09),transparent 22%),
    linear-gradient(180deg,#faf7f0 0%,var(--sv-bg) 100%);
  border-bottom:1px solid rgba(18,22,15,.045);
}

.services-page-hero__inner{
  min-height:192px;
  padding-block:42px 46px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  align-items:center;
  gap:52px;
}

.services-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
  color:#6f7369;
  font-size:10px;
  font-weight:500;
  line-height:1.8;
}

.services-eyebrow::before{
  content:"";
  width:25px;
  height:1px;
  flex:0 0 25px;
  background:var(--sv-gold);
}

.services-page-hero h1{
  margin:0;
  max-width:760px;
  font-size:clamp(22px,2.15vw,25px);
  font-weight:600;
  line-height:1.7;
  letter-spacing:-.35px;
}

.services-page-hero__copy>p{
  max-width:720px;
  margin:9px 0 0;
  color:var(--sv-muted);
  font-size:13.5px;
  font-weight:400;
  line-height:2;
}

.services-page-hero__note{
  position:relative;
  padding:17px 20px 17px 17px;
  border-right:2px solid var(--sv-sage);
  border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(232,239,233,.55),rgba(255,255,255,.12));
}

.services-page-hero__note p{
  margin:0;
  color:#62675e;
  font-size:12px;
  line-height:2;
}

.services-page-hero__note-dot{
  position:absolute;
  right:-6px;
  top:18px;
  width:10px;
  height:10px;
  border:3px solid var(--sv-bg);
  border-radius:50%;
  background:var(--sv-sage);
}

.services-spectrum{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:3px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  opacity:.9;
}

.services-spectrum i{display:block}
.services-spectrum .tone-sage{background:var(--sv-sage)}
.services-spectrum .tone-blue{background:var(--sv-blue)}
.services-spectrum .tone-rose{background:var(--sv-rose)}
.services-spectrum .tone-terracotta{background:var(--sv-terracotta)}
.services-spectrum .tone-olive{background:var(--sv-olive)}

/* quick navigation */
.services-quick-nav{
  position:sticky;
  top:var(--sherafati-sticky-header-height,68px);
  z-index:18;
  border-bottom:1px solid rgba(18,22,15,.06);
  background:rgba(246,241,231,.93);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.services-quick-nav__scroll{
  display:flex;
  align-items:center;
  gap:8px;
  padding-block:10px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
}

.services-quick-nav__scroll::-webkit-scrollbar{display:none}

.services-quick-link{
  --tone:var(--sv-gold);
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:5px 11px;
  border:1px solid var(--sv-line);
  border-radius:999px;
  color:#5f635a;
  background:rgba(255,255,255,.55);
  font-size:10.5px;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}

.services-quick-link>span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--tone);
}

.services-quick-link:hover,
.services-quick-link:focus-visible{
  border-color:color-mix(in srgb,var(--tone) 52%,var(--sv-line));
  color:var(--sv-ink);
  background:#fff;
}

.tone-sage{--tone:var(--sv-sage);--tone-soft:var(--sv-sage-soft)}
.tone-blue{--tone:var(--sv-blue);--tone-soft:var(--sv-blue-soft)}
.tone-rose{--tone:var(--sv-rose);--tone-soft:var(--sv-rose-soft)}
.tone-terracotta{--tone:var(--sv-terracotta);--tone-soft:var(--sv-terracotta-soft)}
.tone-olive{--tone:var(--sv-olive);--tone-soft:var(--sv-olive-soft)}
.tone-sand{--tone:var(--sv-sand);--tone-soft:var(--sv-sand-soft)}

/* common */
.services-section{padding:68px 0}

.services-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:26px;
}

.services-section-head h2,
.services-finder__intro h2,
.services-final-cta h2{
  margin:0;
  font-size:clamp(19px,1.8vw,22px);
  font-weight:600;
  line-height:1.75;
  letter-spacing:-.25px;
}

.services-section-head p,
.services-finder__intro>p,
.services-final-cta p{
  max-width:700px;
  margin:5px 0 0;
  color:var(--sv-muted);
  font-size:12.5px;
  font-weight:400;
  line-height:2;
}

.services-count{
  flex:0 0 auto;
  color:#777a72;
  font-size:10.5px;
}

/* Featured */
.services-section--featured{
  background:
    radial-gradient(circle at 4% 25%,rgba(164,123,121,.055),transparent 20%),
    var(--sv-bg);
}

.services-featured-list{
  display:grid;
  gap:19px;
}

.services-featured{
  --tone:var(--sv-gold);
  --tone-soft:#f4ead7;
  min-height:270px;
  display:grid;
  grid-template-columns:minmax(0,47%) minmax(0,53%);
  overflow:hidden;
  border:1px solid var(--sv-line);
  border-radius:18px;
  background:var(--sv-paper);
}

.services-featured:nth-child(even){
  grid-template-columns:minmax(0,53%) minmax(0,47%);
}

.services-featured:nth-child(even) .services-featured__media{order:2}

.services-featured__media{
  position:relative;
  min-height:270px;
  overflow:hidden;
  background:var(--tone-soft);
}

.services-featured__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.services-featured__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 60%,rgba(16,20,15,.18)),
    linear-gradient(135deg,color-mix(in srgb,var(--tone) 17%,transparent),transparent 45%);
}

.services-featured__media-accent{
  position:absolute;
  z-index:2;
  right:18px;
  bottom:18px;
  width:48px;
  height:3px;
  border-radius:999px;
  background:var(--tone);
}

.services-image-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 35%,rgba(255,255,255,.85),transparent 18%),
    linear-gradient(135deg,var(--tone-soft),#f8f3eb);
}

.services-image-placeholder svg{
  width:82px;
  height:82px;
  fill:none;
  stroke:var(--tone);
  stroke-width:2;
  opacity:.42;
}

.services-featured__content{
  position:relative;
  padding:31px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.services-featured__content::before{
  content:"";
  position:absolute;
  top:30px;
  right:0;
  width:3px;
  height:38px;
  border-radius:3px 0 0 3px;
  background:var(--tone);
}

.services-code{
  display:block;
  margin-bottom:3px;
  color:var(--tone,var(--sv-gold));
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.services-featured h3{
  margin:2px 0 6px;
  font-size:19px;
  font-weight:600;
  line-height:1.75;
}

.services-featured__content>p{
  max-width:570px;
  margin:0;
  color:var(--sv-muted);
  font-size:12.5px;
  line-height:2;
}

.services-feature-points{
  list-style:none;
  margin:16px 0 18px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 14px;
}

.services-feature-points li{
  position:relative;
  padding-right:13px;
  color:#60645b;
  font-size:10.8px;
}

.services-feature-points li::before{
  content:"";
  position:absolute;
  right:0;
  top:.78em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--tone);
}

.services-actions{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:auto;
}

.services-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:7px 13px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:11px;
  font-weight:500;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}

.services-btn--dark{
  border-color:var(--sv-dark);
  color:#fff;
  background:var(--sv-dark);
}

.services-btn--dark:hover{
  border-color:var(--tone);
  color:var(--tone-soft);
  background:#181d17;
}

.services-text-link{
  color:#62665d;
  font-size:10.5px;
  transition:color .2s ease;
}

.services-text-link:hover{color:var(--tone)}

/* Directory */
.services-section--directory{
  background:
    radial-gradient(circle at 92% 12%,rgba(114,139,120,.06),transparent 18%),
    radial-gradient(circle at 7% 80%,rgba(112,135,151,.055),transparent 22%),
    var(--sv-bg-soft);
  border-block:1px solid rgba(18,22,15,.035);
}

.services-directory{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:28px;
}

.services-directory-item{
  --tone:var(--sv-gold);
  --tone-soft:#f4ead7;
  min-height:144px;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:17px;
  padding:17px 0;
  border-top:1px solid var(--sv-line);
}

.services-directory-item__media{
  position:relative;
  height:110px;
  overflow:hidden;
  border-radius:13px;
  background:var(--tone-soft);
}

.services-directory-item__media::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:45%;
  height:3px;
  background:var(--tone);
}

.services-directory-item__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.services-directory-item__body{
  min-width:0;
  padding-top:1px;
}

.services-directory-item h3{
  margin:1px 0 4px;
  font-size:15.5px;
  font-weight:600;
  line-height:1.8;
}

.services-directory-item h3 a{
  transition:color .2s ease;
}

.services-directory-item h3 a:hover{color:var(--tone)}

.services-directory-item p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  margin:0 0 7px;
  color:var(--sv-muted);
  font-size:11px;
  line-height:1.9;
}

.services-directory-item__links{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:9.8px;
}

.services-directory-item__links a:first-child{font-weight:500}
.services-directory-item__links a:hover{color:var(--tone)}

/* Finder */
.services-section--finder{
  background:
    linear-gradient(110deg,rgba(239,238,226,.75),transparent 38%),
    var(--sv-bg);
}

.services-finder{
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:46px;
  align-items:start;
}

.services-finder__list{
  border-top:1px solid var(--sv-line);
}

.services-finder-row{
  --tone:var(--sv-gold);
  --tone-soft:#f4ead7;
  min-height:73px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  border-bottom:1px solid var(--sv-line);
}

.services-finder-row__number{
  color:var(--tone);
  font-size:10.5px;
  font-weight:600;
}

.services-finder-row strong{
  display:block;
  color:var(--sv-ink);
  font-size:13px;
  font-weight:600;
  line-height:1.8;
}

.services-finder-row small{
  display:block;
  color:var(--sv-muted);
  font-size:10.5px;
  line-height:1.8;
}

.services-finder-row>a{
  max-width:130px;
  overflow:hidden;
  color:#5e6259;
  font-size:9.8px;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .2s ease;
}

.services-finder-row>a:hover{color:var(--tone)}

/* Final CTA */
.services-final-cta{
  padding:0 0 70px;
}

.services-final-cta__box{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:150px;
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:19px;
  color:#fff;
  background:
    linear-gradient(115deg,#10140f 0%,#151b15 55%,#18201a 100%);
}

.services-final-cta__box .services-eyebrow{color:#b7bbb3}
.services-final-cta__box .services-eyebrow::before{background:var(--sv-gold)}

.services-final-cta__box p{
  max-width:680px;
  color:#aeb3aa;
}

.services-btn--gold{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  border-color:#735b30;
  color:#fff;
  background:rgba(201,154,69,.16);
}

.services-btn--gold:hover{
  border-color:var(--sv-gold);
  color:#141810;
  background:var(--sv-gold);
}

.services-final-cta__glow{
  position:absolute;
  z-index:-1;
  width:210px;
  height:210px;
  border-radius:50%;
  filter:blur(3px);
  pointer-events:none;
}

.services-final-cta__glow--one{
  right:-110px;
  top:-120px;
  background:radial-gradient(circle,rgba(164,123,121,.22),transparent 67%);
}

.services-final-cta__glow--two{
  left:-85px;
  bottom:-130px;
  background:radial-gradient(circle,rgba(112,135,151,.21),transparent 68%);
}

/* Entrance animation: calm and consistent with the site */
.services-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .52s ease,transform .52s ease;
}

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

/* The site's hover policy: no translating/scaling on hover */
.services-page-v2 :where(
  .services-featured,
  .services-directory-item,
  .services-quick-link,
  .services-featured__media,
  .services-directory-item__media
):hover{
  transform:none!important;
}

/* Tablet */
@media(max-width:980px){
  .services-page-hero__inner{
    grid-template-columns:1fr;
    gap:15px;
    min-height:0;
    padding-block:34px 39px;
  }

  .services-page-hero__note{max-width:680px}

  .services-featured,
  .services-featured:nth-child(even){
    grid-template-columns:minmax(0,42%) minmax(0,58%);
  }

  .services-featured:nth-child(even) .services-featured__media{order:0}

  .services-featured__content{padding:27px}

  .services-finder{
    grid-template-columns:1fr;
    gap:22px;
  }
}

/* Mobile */
@media(max-width:720px){
  .services-page-v2{
    padding-bottom:0;
  }

  .services-page-hero__inner{
    padding-block:25px 29px;
  }

  .services-page-hero h1{
    font-size:22px;
    line-height:1.75;
  }

  .services-page-hero__copy>p{
    font-size:12px;
    line-height:1.95;
  }

  .services-page-hero__note{
    padding:12px 15px 12px 12px;
  }

  .services-page-hero__note p{font-size:10.8px}

  .services-quick-nav{
    position:relative;
    top:auto;
  }

  .services-quick-nav__scroll{
    margin-inline:-1px;
    padding-block:9px;
  }

  .services-quick-link{
    min-height:32px;
    padding:4px 10px;
    font-size:10px;
  }

  .services-section{
    padding:48px 0;
  }

  .services-section-head{
    align-items:flex-start;
    margin-bottom:18px;
  }

  .services-section-head h2,
  .services-finder__intro h2{
    font-size:19px;
  }

  .services-section-head p,
  .services-finder__intro>p{
    font-size:11.5px;
  }

  .services-count{display:none}

  .services-featured-list{gap:15px}

  .services-featured,
  .services-featured:nth-child(even){
    grid-template-columns:1fr;
    min-height:0;
    border-radius:15px;
  }

  .services-featured:nth-child(even) .services-featured__media{order:0}

  .services-featured__media{
    min-height:190px;
    height:190px;
  }

  .services-featured__media-accent{
    right:14px;
    bottom:14px;
    width:42px;
  }

  .services-featured__content{
    padding:18px 17px 19px;
  }

  .services-featured__content::before{
    top:18px;
    height:30px;
  }

  .services-featured h3{font-size:17px}
  .services-featured__content>p{font-size:11.5px}

  .services-feature-points{
    margin:12px 0 14px;
    gap:5px 9px;
  }

  .services-feature-points li{font-size:10px}

  .services-btn{
    min-height:36px;
    padding:6px 11px;
    font-size:10.5px;
  }

  .services-text-link{font-size:10px}

  .services-directory{
    grid-template-columns:1fr;
  }

  .services-directory-item{
    min-height:117px;
    grid-template-columns:102px minmax(0,1fr);
    gap:13px;
    padding:13px 0;
  }

  .services-directory-item__media{
    height:92px;
    border-radius:11px;
  }

  .services-directory-item h3{font-size:14px}

  .services-directory-item p{
    margin-bottom:5px;
    font-size:10.3px;
    line-height:1.8;
  }

  .services-code{font-size:7.8px}

  .services-finder{
    gap:17px;
  }

  .services-finder-row{
    min-height:66px;
    grid-template-columns:31px minmax(0,1fr) auto;
    gap:8px;
  }

  .services-finder-row strong{font-size:12px}
  .services-finder-row small{font-size:9.8px}

  .services-finder-row>a{
    max-width:82px;
    font-size:9px;
  }

  .services-final-cta{
    padding-bottom:52px;
  }

  .services-final-cta__box{
    min-height:0;
    padding:22px 18px;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    border-radius:16px;
  }

  .services-final-cta h2{font-size:18px}
  .services-final-cta p{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .services-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}