/* Content pages share the portfolio's colours, type and interaction styles. */
.service-hero { padding-block: 140px 76px; background: var(--ink); color: white; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #bdbdc2; font-size: 13px; line-height: 1.6; margin-bottom: 50px; }
.breadcrumbs a:hover { color: white; }
.service-hero .section-tag { border-color: #ffffff38; color: #bdbdc2; }
.service-hero h1 { max-width: 1200px; font-size: clamp(54px, 7.4vw, 108px); font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.service-hero .service-title-accent { color: var(--accent); }
.service-hero-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .65fr); gap: 80px; align-items: end; border-top: 1px solid #ffffff32; margin-top: 50px; padding-top: 32px; }
.service-hero-bottom > p { color: #cdcdcf; font-size: 20px; line-height: 1.65; max-width: 760px; }
.service-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 24px; }
.service-page .section-heading h2 { max-width: 760px; }
.service-site-example { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); gap: 64px; align-items: center; }
.service-case-notes h3 { font-size: 32px; letter-spacing: -.035em; line-height: 1.15; margin-bottom: 22px; }
.service-case-notes p { color: var(--muted); font-size: 17px; line-height: 1.7; margin-bottom: 26px; }
.service-scope { background: var(--ink); color: white; }
.service-scope .section-tag { border-color: #ffffff38; color: #bdbdc2; }
.service-scope h2 { max-width: 840px; }
.service-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 60px; }
.service-scope-grid article { border-top: 1px solid #ffffff38; padding-top: 24px; }
.service-scope-grid h3 { font-size: 29px; line-height: 1.15; letter-spacing: -.035em; margin: 32px 0 22px; }
.service-scope-grid p { color: #bdbdc2; font-size: 17px; line-height: 1.7; }
.service-delivery { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 90px; }
.service-delivery h2 { font-size: clamp(36px, 4vw, 58px); }
.service-delivery p { margin-top: 28px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.service-delivery-list { align-self: start; border: 1px solid var(--line); padding: 35px; border-radius: 24px; }
.service-delivery-list h3 { font-size: 27px; letter-spacing: -.03em; }
.service-delivery-list ul { margin: 28px 0 0; padding: 0; list-style: none; }
.service-delivery-list li { position: relative; padding: 17px 0 17px 24px; border-top: 1px solid var(--line); line-height: 1.6; }
.service-delivery-list li::before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); left: 0; top: 27px; }
.service-brief { background: #f7f7f8; }
.service-brief-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.service-brief-inner p { font-size: 20px; line-height: 1.7; }
.service-brief-inner .service-author { margin: 24px 0 30px; font-size: 15px; color: var(--muted); }
.service-author a { text-decoration: underline; text-underline-offset: 4px; }
.service-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 90px; }
.service-faq h2 { max-width: 440px; }
.service-faq details { border-top: 1px solid var(--line); }
.service-faq details:last-child { border-bottom: 1px solid var(--line); }
.service-faq summary { cursor: pointer; position: relative; padding: 25px 35px 25px 0; list-style: none; font-size: 19px; font-weight: 500; line-height: 1.5; }
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary::after { content: '+'; position: absolute; right: 0; top: 22px; font-size: 26px; font-weight: 400; color: var(--accent); }
.service-faq details[open] summary::after { content: '−'; }
.service-faq details p { padding: 0 30px 28px 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.service-faq details p a, .service-delivery p a:not(.text-link) { text-decoration: underline; text-underline-offset: 3px; }
.service-faq details p a:hover, .service-delivery p a:hover { color: var(--accent); }
.error-page { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 28px; }
.error-page h1 { font-size: clamp(38px, 6vw, 84px); line-height: 1.05; letter-spacing: -.05em; }
.error-page > p { color: var(--muted); font-size: 18px; }
.service-related { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; padding-bottom: 60px; }
.service-related > span { color: var(--muted); font-size: 13px; }
.service-related a { border-bottom: 1px solid var(--line); padding-bottom: 4px; font-size: 15px; }
.service-related a:hover { color: var(--accent); }
/* Also used by the policy page, which keeps its existing layout. */
.footer-services { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: baseline; border-top: 1px solid #ffffff25; padding-block: 26px; font-size: 14px; line-height: 1.6; }
.footer-services > span { font-size: 12px; color: #929298; margin-right: auto; }
.footer-services a { color: #ededee; }
.footer-services a:hover { color: var(--accent-light); }
@media (max-width: 1100px) {
 .service-hero h1 { font-size: clamp(48px, 7.4vw, 82px); }
 .service-hero-bottom { gap: 40px; }
 .service-site-example { grid-template-columns: 1fr; gap: 40px; }
 .service-case-notes { max-width: 650px; }
 .service-scope-grid { gap: 22px; }
 .service-scope-grid h3 { font-size: 25px; }
 .service-delivery, .service-brief-inner, .service-faq { gap: 45px; }
}
@media (max-width: 820px) {
 .service-hero { padding-block: 120px 60px; }
 .service-hero h1 { font-size: clamp(43px, 7.5vw, 64px); }
 .service-hero-bottom, .service-delivery, .service-brief-inner, .service-faq { grid-template-columns: 1fr; gap: 32px; }
 .service-hero-bottom > p, .service-brief-inner p { font-size: 18px; }
 .service-scope-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
 .service-scope-grid h3 { margin: 15px 0; }
 .service-delivery-list { padding: 28px; }
 .footer-services { align-items: start; }
 .footer-services > span { flex-basis: 100%; }
}
@media (max-width: 600px) {
 .service-hero { padding-top: 108px; }
 .breadcrumbs { font-size: 11px; margin-bottom: 34px; gap: 8px; }
 .service-hero h1 { font-size: clamp(34px, 8.7vw, 50px); line-height: 1.04; letter-spacing: -.055em; }
 .service-hero-bottom { margin-top: 32px; padding-top: 24px; }
 .service-page-actions { gap: 20px; }
 .service-page .section-heading h2, .service-scope h2, .service-delivery h2, .service-faq h2 { font-size: 36px; }
 .service-delivery p { font-size: 17px; }
 .service-scope-grid p { font-size: 16px; }
 .service-faq summary { font-size: 17px; }
 .service-related { flex-direction: column; align-items: start; padding-bottom: 44px; }
 .footer-services { flex-direction: column; gap: 13px; font-size: 13px; }
}