
/* Service pages retain the studio’s existing typography and navigation. */
.service-hero {padding: 160px 0 72px; background: var(--cream);}
.service-hero-grid {display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;}
.service-hero h1 {font-family:var(--font-display); font-size:clamp(2.2rem,4.6vw,3.5rem); font-weight:400; line-height:1.12; margin:18px 0 24px;}
.service-hero .service-lead {font-size:1.05rem; margin-bottom:28px;}
.service-hero img {display:block; width:100%; height:auto; max-height:620px; object-fit:cover; border-radius:8px;}
.service-hero .section-label {letter-spacing:.12em;}
.service-breadcrumb {font-size:.75rem; margin-bottom:24px;}
.service-breadcrumb a, .service-copy a {text-decoration:underline; text-underline-offset:4px;}
.service-actions {display:flex; flex-wrap:wrap; gap:18px; align-items:center;}
.service-actions a {max-width:100%; text-align:center;}
.service-copy {max-width:880px; padding:72px 40px; margin:auto;}
.service-copy h2 {font-family:var(--font-display); font-size:1.9rem; font-weight:500; line-height:1.2; margin:42px 0 18px;}
.service-copy h2:first-child {margin-top:0;}
.service-copy p, .service-copy ul {margin-bottom:20px;}
.service-copy ul {padding-left:24px;}
.service-copy li {margin-bottom:12px;}
.service-copy a {font-weight:500;}
.service-contact {background:var(--cream); padding:54px 24px; text-align:center;}
.service-contact h2 {font-family:var(--font-display); font-size:2rem; font-weight:400;}
.service-contact p {margin:16px auto 24px; max-width:680px;}
.service-contact a {overflow-wrap:anywhere;}
@media(max-width:800px) {.service-hero {padding:125px 0 40px;} .service-hero-grid {grid-template-columns:1fr;gap:32px;} .service-hero img {max-height:500px;object-position:center;} .service-copy {padding:40px 24px;} .service-hero .section-label {font-size:.75rem;}}
.service-breadcrumb a, .service-copy a, .service-actions > a:not(.btn-primary), .service-contact a {color:var(--charcoal);}
.service-breadcrumb a:hover, .service-copy a:hover, .service-contact a:hover {text-decoration-thickness:2px;}
.footer-inner > * {min-width:0;}
.footer-nav {max-width:100%;}
.footer-nav a, .footer-contact a {overflow-wrap:anywhere; max-width:100%;}
@media(max-width:680px) {.footer-inner {grid-template-columns:minmax(0,1fr);} .footer-nav a {white-space:normal;}}
