:root { --services-ink: #fffaf2; --services-line: rgba(255,250,242,.34); }
html { background: #0d1914; }
body.services-page { overflow: hidden; background: transparent; }
.services-stage { position: relative; min-height: 100svh; overflow: hidden; color: var(--services-ink); background: transparent; }
.services-scene { position: absolute; inset: 0; overflow: hidden; }
.services-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.services-scene__season { z-index: 0; filter: saturate(.84) contrast(.96) brightness(.8); }
.services-scene__frame { z-index: 1; filter: saturate(.88) contrast(.98) brightness(.86); animation: servicesBreathe 16s ease-in-out infinite alternate; }
.services-scene div { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(5,12,9,.83) 0, rgba(5,12,9,.52) 31%, rgba(5,12,9,.05) 68%), linear-gradient(0deg, rgba(4,9,7,.9) 0, rgba(4,9,7,.28) 42%, transparent 66%); }
.services-page .home-nav { position: fixed; z-index: 20; }
.services-page .home-nav::before { position: absolute; z-index: -1; inset: 0 0 -2rem; background: linear-gradient(180deg, rgba(6,13,10,.72), transparent); content: ""; pointer-events: none; }
.services-page .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem; width: 2.75rem; height: 2.75rem; border: 0; padding: 0; color: #fffaf2; background: transparent; cursor: pointer; }
.services-page .hamburger span { width: 2.15rem; height: 1px; box-shadow: none; }
.services-page .sound-control { position: fixed; z-index: 20; }
.services-page .menu-drawer { z-index: 30; transform: translateX(100%); transition: transform .72s cubic-bezier(.72,0,.18,1); }
.services-page.menu-open .menu-drawer { transform: none; }
.services-copy { position: relative; z-index: 4; width: min(39rem, 48vw); padding: clamp(8rem, 16vh, 10rem) 0 0 clamp(2rem, 7.8vw, 8rem); text-shadow: 0 .15rem 1.2rem rgba(0,0,0,.72); }
.services-copy > p { margin: 0 0 1.2rem; font: 700 .72rem/1 Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.services-copy h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4rem, 7vw, 7.2rem); font-weight: 400; line-height: .86; letter-spacing: -.055em; }
.services-copy > span { display: block; max-width: 28rem; margin-top: 1.65rem; font: 1rem/1.58 Arial, sans-serif; }
.services-workbench { position: absolute; z-index: 5; right: 0; bottom: clamp(1.5rem, 3.8vh, 3rem); left: 0; padding: 4rem clamp(2rem, 7.8vw, 8rem) 1.2rem; background: linear-gradient(0deg, rgba(5,12,9,.9), rgba(5,12,9,.58) 66%, transparent); }
.services-workbench__inner { width: min(100%, 88rem); }
.service-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--services-line); border-bottom: 1px solid var(--services-line); }
.service-tabs button { display: flex; align-items: center; gap: .85rem; min-height: 4.5rem; border: 0; border-right: 1px solid rgba(255,250,242,.16); padding: .75rem 1rem; color: rgba(255,250,242,.58); background: transparent; text-align: left; cursor: pointer; transition: color .25s ease, background .25s ease; }
.service-tabs button:last-child { border-right: 0; }
.service-tabs button:hover, .service-tabs button:focus-visible, .service-tabs button[aria-selected="true"] { color: #fffaf2; background: rgba(255,250,242,.08); }
.service-tabs button[aria-selected="true"] { box-shadow: inset 0 2px #fffaf2; }
.service-tabs b { font: 400 .68rem/1 Arial, sans-serif; letter-spacing: .12em; }
.service-tabs span { font: 700 .78rem/1.25 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.service-detail { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; min-height: 8.6rem; padding-top: 1.35rem; }
.service-panel { grid-column: 1; grid-row: 1; max-width: 43rem; }
.js .service-panel { visibility: hidden; opacity: 0; transform: translateY(.65rem); transition: opacity .35s ease, transform .45s ease, visibility .35s; }
.js .service-panel.is-active { visibility: visible; opacity: 1; transform: none; }
.service-panel h2 { margin: 0 0 .5rem; font: 400 clamp(1.65rem, 2.5vw, 2.5rem)/1.05 Georgia, serif; letter-spacing: -.025em; }
.service-panel p { max-width: 38rem; margin: 0; font: .95rem/1.48 Arial, sans-serif; }
.service-panel > span { display: block; margin-top: .65rem; color: rgba(255,250,242,.62); font: 700 .66rem/1.3 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.services-cta { display: inline-flex; grid-column: 2; grid-row: 1; align-items: center; gap: .72rem; margin: 0 0 .2rem 2rem; color: #fffaf2; font: 700 .72rem/1 Arial, sans-serif; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.services-cta > span:first-child { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,250,242,.7); border-radius: 50%; padding-bottom: .16rem; font: 1.45rem/1 Georgia, serif; transition: color .25s ease, background .25s ease, transform .25s ease; }
.services-cta:hover > span:first-child { color: #173b31; background: #fffaf2; transform: translateX(.18rem); }
@keyframes servicesBreathe { from { transform: scale(1.005); } to { transform: scale(1.025) translate3d(-.25%, -.1%, 0); } }
@media (max-width: 820px) {
    body.services-page { overflow-y: auto; }
    .services-stage { min-height: 100svh; overflow: visible; }
    .services-scene { position: fixed; }
    .services-scene img { object-position: 58% center; }
    .services-scene div { background: linear-gradient(90deg, rgba(5,12,9,.83), rgba(5,12,9,.35)), linear-gradient(0deg, rgba(4,9,7,.96) 0, rgba(4,9,7,.35) 62%, rgba(4,9,7,.18)); }
    .services-copy { display: flex; flex-direction: column; justify-content: center; width: min(100%, 35rem); min-height: 57svh; padding: 6.4rem 1.5rem 2.5rem; }
    .services-copy h1 { font-size: clamp(3.7rem, 17vw, 5.8rem); }
    .services-workbench { position: relative; bottom: auto; padding: 2.5rem 1.5rem 5.8rem; background: rgba(5,12,9,.91); backdrop-filter: blur(12px); }
    .service-tabs { grid-template-columns: 1fr 1fr; }
    .service-tabs button { min-height: 4.8rem; }
    .service-tabs button:nth-child(2) { border-right: 0; }
    .service-tabs button:nth-child(-n+2) { border-bottom: 1px solid rgba(255,250,242,.16); }
    .service-detail { grid-template-columns: 1fr; min-height: 16rem; }
    .service-panel, .services-cta { grid-column: 1; }
    .services-cta { grid-row: 2; justify-self: start; margin: 1.5rem 0 0; }
    .services-page .sound-control { top: auto; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .services-scene__frame { animation: none; } .js .service-panel { transition: none; } }

.services-page .home-nav::before { background: linear-gradient(180deg, color-mix(in srgb, var(--season-background) 80%, transparent), transparent); }
.services-scene div { background: linear-gradient(90deg, color-mix(in srgb, var(--season-background) 82%, transparent), color-mix(in srgb, var(--season-background) 38%, transparent) 36%, transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--season-background) 86%, transparent), transparent 66%); }
.services-workbench { background: linear-gradient(0deg, color-mix(in srgb, var(--season-background) 88%, transparent), color-mix(in srgb, var(--season-background) 56%, transparent) 66%, transparent); }
.service-tabs button:hover, .service-tabs button:focus-visible, .service-tabs button[aria-selected="true"] { color: var(--season-main); background: color-mix(in srgb, var(--season-accent) 12%, transparent); }
.service-tabs button[aria-selected="true"] { box-shadow: inset 0 2px var(--season-accent); }
.service-panel > span { color: var(--season-accent); }
.services-cta { color: var(--season-accent); }
.services-cta > span:first-child { border-color: var(--season-main); color: var(--season-main); }
.services-cta:hover > span:first-child { color: var(--season-background); background: var(--season-main); }