.services-page { overflow-wrap: anywhere; }
.services-page a:focus-visible { outline: 3px solid #7043ad; outline-offset: 4px; }
.services-skip { position: absolute; top: -100px; left: 16px; padding: 12px; background: white; z-index: 10; }
.services-skip:focus { top: 12px; }
.services-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(24px,4vw,56px); align-items: center; padding: clamp(24px,4vw,48px); background: linear-gradient(140deg,#fffafd,#ffe0ed 65%,#eee0ff); }
.services-hero h1 { margin: 18px 0 24px; font-size: clamp(2rem,4.4vw,3.9rem); line-height: 1.08; letter-spacing: -.045em; }
.services-deck { font-size: 1.1rem; line-height: 1.7; color: var(--muted); max-width: 52ch; }
.services-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.services-actions .button { min-height: 48px; text-align: center; }
.services-text-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 750; text-underline-offset: 5px; }
.services-note { font-size: .85rem; color: var(--muted); line-height: 1.65; margin-top: 20px; }
.services-hero-image { margin: 0; min-width: 0; }
.services-photo-placeholder { width: 100%; aspect-ratio: 4 / 5; max-height: 480px; display: grid; place-items: center; border: 1px dashed #ac8fa6; border-radius: 12px; background: #fffafd66; color: var(--muted); font-size: .9rem; }
.services-hero-image img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; border-radius: 12px; }
.services-hero-image figcaption { margin-top: 12px; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.services-section { margin-block: clamp(44px,7vw,80px); scroll-margin-top: 24px; }
.services-section > h2,.services-contact h2 { max-width: 30ch; margin: 14px 0 24px; font-size: clamp(1.65rem,3vw,2.6rem); line-height: 1.15; letter-spacing: -.03em; }
.section-deck { max-width: 68ch; line-height: 1.7; color: var(--muted); margin-bottom: 28px; }
.service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.service-grid .card { margin: 0; padding: 28px; }
.service-grid h3 { font-size: 1.5rem; margin-block: 16px; }
.service-grid p,.service-grid li,.example-card p,.service-process p,.services-contact p { line-height: 1.7; }
.service-grid ul { padding-left: 20px; }
.service-number { font: 800 2.4rem ui-monospace,monospace; opacity: .65; }
.example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.example-card { margin: 0; display: flex; flex-direction: column; min-width: 0; padding: 20px; }
.example-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.example-card > p:not(.kicker) { color: var(--muted); }
.example-card > a { margin-top: auto; }
.example-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; min-height: 240px; align-items: center; }
.example-pair figure,.example-image { margin: 0 0 20px; }
.example-pair img { width: 100%; height: auto; display: block; border-radius: 8px; }
.example-image img { width: 100%; height: 220px; display: block; object-fit: contain; background: #f0e7f4; border-radius: 8px; }
.example-card figcaption { font-size: .75rem; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.service-process { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; list-style-position: inside; padding: 0; }
.service-process li { border-top: 2px solid var(--ink); padding-top: 20px; }
.service-process li::marker { color: #95285d; font-weight: 800; }
.service-process h3 { font-size: 1.2rem; }
.service-process p { color: var(--muted); }
.services-contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 32px; align-items: center; padding: clamp(24px,4vw,42px); background: #eaddf6; scroll-margin-top: 24px; }
.contact-placeholder { padding: 24px; border: 1px dashed #987a94; border-radius: 12px; background: #fffafd; }
.contact-placeholder .status { display: inline-block; box-shadow: none; background: #f1e9f5; }
@media(max-width:900px) { .services-hero { grid-template-columns: 1fr; } .services-hero-image { max-width: 480px; } .example-grid { grid-template-columns: 1fr; } .example-pair { max-width: 380px; } .example-image { max-width: 440px; } .example-image img { height: 300px; } .service-process { gap: 20px; } }
@media(max-width:600px) { .service-grid,.service-process,.services-contact { grid-template-columns: 1fr; } .services-hero h1 { font-size: clamp(1.85rem,7.8vw,2.8rem); } .services-deck { font-size: 1rem; } .services-actions { align-items: stretch; flex-direction: column; gap: 10px; } .services-actions .services-text-link { justify-content: center; } .service-grid .card { padding: 24px; } .services-contact { gap: 16px; } .contact-placeholder { padding: 18px; } }