@import url("/css/base.css");

/* ---------- hero (split, layered cards) ---------- */
.hero{padding:28px 0 32px;background:var(--white)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:stretch}
.hero-lead{margin-top:16px;font-size:16.5px;color:var(--stone);max-width:52ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-visual{position:relative}
.hero-visual img{width:100%;height:100%;min-height:220px;max-height:340px;object-fit:cover;object-position:center 40%;border-radius:14px}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual img{height:auto;aspect-ratio:16/9;max-height:none}
}

/* ---------- diagnosis cards ---------- */
.diag-grid .card{display:flex;flex-direction:column;gap:8px}
.section-lead{color:var(--stone);max-width:64ch;margin-top:10px;margin-bottom:28px}

/* ---------- carousel cards ---------- */
.carousel-section{background:var(--paper)}
.carousel-section .carousel{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:visible;scroll-snap-type:none}
.carousel-section .carousel .card{flex-basis:auto}
.carousel .card{position:relative;aspect-ratio:1/1;padding:0;overflow:hidden;background:var(--white)}
.carousel .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.carousel .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);z-index:1;pointer-events:none}
.carousel .card h3,.carousel .card p{position:relative;z-index:2;color:var(--white)}
.carousel .card h3{padding:14px 16px 2px}
.carousel .card p{padding:0 16px 16px;font-size:13.5px}
@media (max-width:760px){
  .carousel-section .carousel{display:flex;flex-direction:column;overflow-x:visible;scroll-snap-type:none}
  .carousel .card{flex-basis:auto;aspect-ratio:1/1;height:auto}
  .carousel .card h3{font-size:22px;padding:18px 18px 4px}
  .carousel .card p{font-size:15px;padding:0 18px 18px}
}

/* ---------- photo grid ---------- */
.photo-grid-12 figure img{aspect-ratio:1/1}

/* ---------- service / area cards ---------- */
.service-band{background:var(--white)}
.service-band h2{margin-bottom:20px}
.service-band .card,.area-band .card{position:relative;aspect-ratio:1/1;padding:0;overflow:hidden}
.service-band .card img,.area-band .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.service-band .card::after,.area-band .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);z-index:1;pointer-events:none}
.service-band .card h3,.area-band .card h3,.service-band .card p,.area-band .card p{position:relative;z-index:2;color:var(--white)}
.service-band .card h3,.area-band .card h3{padding:14px 16px 2px}
.service-band .card p,.area-band .card p{padding:0 16px 16px;font-size:13.5px}
.more-link{text-align:center;margin-top:28px}

/* ---------- expertise ---------- */
.expertise-section{background:var(--paper)}
.expertise-section p{max-width:76ch;color:var(--ink);margin-bottom:18px}
.expertise-section p:last-child{margin-bottom:0}

/* ---------- checklist ---------- */
.checklist-section{background:var(--white)}
.check-list{max-width:640px;margin-top:22px}

/* ---------- faq ---------- */
.faq-section{background:var(--paper)}