/* ---- services.html — page-specific styles (kept out of styles.css) ---- */

/* nav: mark Services as the active link on this page */
.nav__links a.is-active{color:var(--blue)}

/* ---- services page header (left-aligned, medium column) ---- */
.svc-hero{max-width:var(--maxw);margin:0 auto;padding-top:clamp(2rem,4vw,3.5rem);padding-bottom:0}
.svc-hero h1{font-size:clamp(2.6rem,5.5vw,4.4rem);max-width:14ch;margin-bottom:1.2rem}
.svc-hero p{font-size:1.1rem;max-width:56ch}

/* ---- stacked full-width service rows ---- */
.svc-rows{display:flex;flex-direction:column;gap:1.5rem}
.svcrow{display:grid;grid-template-columns:1.75fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;background:var(--tint);border:none;border-radius:var(--radius);padding:1.5rem}
.svcrow__img{position:relative;border-radius:12px;overflow:hidden}
.svcrow__img img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.svcrow__time{position:absolute;top:1rem;left:1rem;z-index:1;display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--ink);font-size:.78rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;box-shadow:0 6px 18px -10px rgba(30,25,15,.4)}
.svcrow__time svg{flex:none}
.svcrow__body h2{font-size:2rem;margin-bottom:.6rem}
.svcrow__body p{font-size:.98rem}
.svcrow__actions{display:flex;align-items:center;gap:1.25rem;margin-top:1.2rem}
.svcrow__actions .btn{padding:.6rem 1.3rem;font-size:.92rem}
.svcrow__more{color:var(--ink);font-weight:500}
.svcrow__more:hover{text-decoration:underline}

/* ---- additional services (title + bordered cards directly on white) ---- */
.addl-services__head{max-width:44ch;margin-bottom:1.8rem}
.addl-services__head h2{margin-bottom:.6rem}
.addl-services__grid .diff-card{text-align:left;padding:1.6rem 1.3rem}
.addl-services__grid .diff-card h3{color:var(--ink);font-family:var(--sans);font-weight:600;font-size:1rem;margin-bottom:0}

/* ---- responsive ---- */
@media(max-width:900px){
  .svcrow{grid-template-columns:1fr}
}