/* Service pages, aligned with the cinema homepage. Loaded after shared type. */
html[data-service]{--ink:#080908;--paper:#f2f0e6;--accent:#ff8700;--gutter:clamp(24px,4.5vw,80px);color-scheme:dark}
html[data-service] body{background:var(--ink);color:var(--paper)}
html[data-service] .masthead{background:var(--ink);color:var(--paper)}
html[data-service] [data-site-nav] .wordmark{text-transform:lowercase!important}
html[data-service] .service-hero{display:block;min-height:0;padding:clamp(148px,14vw,210px) var(--gutter) 0}
html[data-service] .hero-copy{display:grid;grid-template-columns:1.25fr 1fr;column-gap:8%;padding-bottom:0}
html[data-service] .hero-copy>.eyebrow{grid-column:1/-1;margin-bottom:36px;font-size:12px}
html[data-service] .hero-copy h1{grid-column:1/-1;font-size:clamp(48px,7.5vw,120px);line-height:1.02;letter-spacing:-.055em;margin:0}
html[data-service] .title-mask{width:auto;overflow:visible}
html[data-service] .title-mask>span{white-space:normal;animation:none}
html[data-service] .title-pixel{font-size:1em;letter-spacing:inherit;margin-top:0;color:var(--accent)}
html[data-service] .hero-intro{grid-column:2;grid-row:3;margin:42px 0 0;font-size:clamp(17px,1.5vw,22px);max-width:38ch}
html[data-service] .hero-action{grid-column:1;grid-row:3;align-self:end;justify-self:start;padding:0;background:none;color:var(--paper);font-size:15px;gap:24px}
html[data-service] .hero-action:hover{background:none;color:var(--accent)}
html[data-service] .hero-art{width:100%;max-width:none;margin:64px 0 0}
html[data-service] .hero-art>a{display:block;overflow:hidden;background:#111210}
html[data-service] .hero-art img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;transition:filter .4s;filter:grayscale(1)}
html[data-service] .hero-art a:is(:hover,:focus-visible) img{filter:grayscale(0)}
html[data-service] .hero-art figcaption{display:flex;justify-content:space-between;gap:20px;text-align:left;padding:0;margin:18px 0 0;color:var(--paper)}
html[data-service] .hero-bottom{border:0;min-height:110px}
html[data-service] .hero-bottom>.eyebrow{color:#b8b8ae}
html[data-service] .service-scope{background:#111210;padding-block:96px}
html[data-service] .checker-rule,html[data-service] .mini-pattern,html[data-service] .close-checks,html[data-service] .studio-note figure:before{display:none}
html[data-service] .capability-grid{counter-reset:capability;gap:6%}
html[data-service] .capability{display:block;border:0;padding:0}
html[data-service] .capability::before{counter-increment:capability;content:"0" counter(capability);display:block;margin-bottom:28px;color:var(--accent);font:400 14px/1 var(--gt-mono)}
html[data-service] .capability h3{font-size:clamp(24px,2.3vw,36px)}
html[data-service] .capability p{font-size:16px;line-height:1.65;color:#c5c5bc}
html[data-service] .selected-work{padding-block:110px}
html[data-service] .work-heading h2{font-size:clamp(32px,4vw,60px)}
html[data-service] .service-projects{gap:56px}
html[data-service] .project-media{aspect-ratio:1.35}
html[data-service] .service-projects--single .project-media{aspect-ratio:16/9}
html[data-service] .project-caption{color:var(--paper)}
html[data-service] .project-caption h3{font-weight:500!important;font-size:26px}
html[data-service] .project-caption p{color:#b8b8ae}
html[data-service] .project-note{color:#b8b8ae}
html[data-service] .studio-note{padding-block:80px 120px;gap:10%}
html[data-service] .studio-note figure{margin:0;max-width:360px}
html[data-service] .studio-note img{filter:grayscale(1)}
html[data-service] .studio-note-copy h2{font-size:clamp(32px,4.5vw,68px)}
html[data-service] .studio-note-copy>p:not(.eyebrow){font-size:18px;color:#c5c5bc;line-height:1.65}
html[data-service] .service-close{background:#111210;color:var(--paper);padding-block:100px 60px}
html[data-service] .service-close h2{font-size:clamp(40px,7vw,108px);max-width:17ch}
html[data-service] .close-action{color:var(--accent);font-size:20px}
html[data-service] .related-services{border:0;margin-top:64px;padding:0}
html[data-service] .link-ink{text-decoration:none}
html[data-service] .ls-page-controls{background:#111210;padding:0 var(--gutter) 28px}
html[data-service] .motion-control{border:0;color:#b8b8ae;padding-left:0}
html[data-service] ::selection{background:var(--accent);color:var(--ink)}
/* Reveal by opacity, so text never slides or clips during reading. */
html[data-service].motion-ready [data-reveal]{clip-path:none;transform:none;opacity:.3}
html[data-service].motion-ready [data-reveal].is-revealed{opacity:1;transition:opacity .35s}
@media(max-width:760px){
 html[data-service] .service-hero{padding-top:136px}
 html[data-service] .hero-copy{display:block}
 html[data-service] .hero-copy>.eyebrow{font-size:11px;margin-bottom:28px}
 html[data-service] .hero-copy h1{font-size:clamp(32px,8.5vw,62px);line-height:1.06}
 html[data-service] .hero-intro{margin-top:30px;font-size:17px}
 html[data-service] .hero-action{margin-top:20px;font-size:14px}
 html[data-service] .hero-art{margin-top:36px;width:100%}
 html[data-service] .hero-art img{aspect-ratio:1.2;filter:none}
 html[data-service] .hero-art figcaption{font-size:10px}
 html[data-service] .hero-bottom{min-height:100px;gap:18px}
 html[data-service] .service-scope,html[data-service] .selected-work{padding-block:64px}
 html[data-service] .capability-grid{gap:38px}
 html[data-service] .capability::before{margin-bottom:16px}
 html[data-service] .capability p{margin-top:12px}
 html[data-service] .service-projects{gap:40px}
 html[data-service] .studio-note{padding-block:20px 64px;gap:32px}
 html[data-service] .studio-note figure{width:65%;margin:0}
 html[data-service] .studio-note-copy>p:not(.eyebrow){font-size:17px}
 html[data-service] .service-close{padding-block:64px 32px}
 html[data-service] .service-close h2{font-size:clamp(32px,8.5vw,62px)}
 html[data-service] .related-services{margin-top:40px;gap:12px 24px}
}
@media(prefers-reduced-motion:reduce){html[data-service].motion-ready [data-reveal]{opacity:1}}
html[data-service][data-motion="paused"] [data-reveal]{opacity:1}

/* A lighter service edit: one thought, selected work, an invitation. */
html[data-service] .hero-copy{display:block;max-width:1400px}
html[data-service] .hero-copy h1{font-size:clamp(44px,6.6vw,108px);max-width:18ch;position:relative;z-index:1}
html[data-service] .hero-copy h1>span{display:block}
html[data-service] .hero-copy h1>span:last-child{color:#a9aaa1}
html[data-service] .service-hero{padding-bottom:90px;overflow:hidden}
html[data-service] .hero-copy>.eyebrow{color:#b8b8ae}
html[data-service] .hero-intro{margin-top:36px;font-size:16px;max-width:42ch}
html[data-service] .hero-action{margin-top:24px;color:var(--accent);font-size:14px}
html[data-service] .selected-work{padding-top:20px;padding-bottom:80px}
html[data-service] .work-heading{margin-bottom:28px}
html[data-service] .work-heading h2{font-size:20px;font-weight:500!important;letter-spacing:0;margin:0}
html[data-service] .work-heading .text-link{font-size:12px}
html[data-service] .service-projects{display:grid;grid-template-columns:1fr;gap:44px}
.service-film a{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(24px,4vw,64px);align-items:center;text-decoration:none}
.film-frame{aspect-ratio:7/4;overflow:hidden;background:#111210}
.film-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s,transform .7s}
.film-caption{min-width:0}
html[data-service] .film-caption h3{font-size:clamp(22px,2.1vw,34px);font-weight:500!important;line-height:1.2;letter-spacing:-.025em}
html[data-service] .film-caption p{font:400 12px/1.6 var(--gt-mono)!important;color:#a9aaa1;margin-top:12px}
.film-caption>span{display:block;font-size:26px;color:var(--accent);margin-top:42px}
.service-film a:is(:hover,:focus-visible) img{filter:none;transform:scale(1.025)}
html[data-service] .service-close{padding-block:64px 40px;background:var(--ink)}
html[data-service] .service-close h2{font-size:clamp(48px,7vw,100px);margin:0}
html[data-service] .close-action{margin-top:14px;font-size:16px;min-height:44px}
html[data-service] .related-services{margin-top:52px;gap:24px}
html[data-service] .related-services>.eyebrow{display:none}
html[data-service] .related-services a{font-size:12px;color:#a9aaa1}
html[data-service] .ls-page-controls{background:var(--ink)}
/* Match the lowercase, regular mono navigation on the cinema homepage. */
html[data-service] body [data-site-nav]>.wordmark,
html[data-service] body [data-site-nav]>.wordmark>span,
html[data-service] body [data-site-nav]>.wordmark strong{font-weight:400!important;text-transform:lowercase!important}
html[data-service] body [data-site-nav] nav a{text-transform:lowercase!important}
@media(max-width:760px){
 html[data-service] .service-hero{padding-bottom:64px}
 html[data-service] .hero-copy h1{font-size:clamp(32px,8.5vw,62px)}
 html[data-service] .hero-intro{font-size:15px;margin-top:28px}
 .service-film a{grid-template-columns:1fr;gap:18px}
 .film-frame{aspect-ratio:7/4}
 .film-frame img{filter:none}
 .film-caption{display:grid;grid-template-columns:1fr auto;gap:6px 16px}
 html[data-service] .film-caption h3{font-size:21px}
 html[data-service] .film-caption p{grid-column:1;margin:0;font-size:11px!important}
 .film-caption>span{grid-column:2;grid-row:1/3;margin:0;align-self:center}
 html[data-service] .service-projects{gap:36px}
}
@media(prefers-reduced-motion:reduce){.film-frame img{transition:none}.service-film a:is(:hover,:focus-visible) img{transform:none}}

/* Pixel eyes replace directional arrows throughout the service pages. */
.film-caption>.ls-action-eye{display:block;margin-top:42px;color:var(--accent)}
.film-frame--sbdc{background:#0b1222}
.film-frame--sbdc img{object-fit:contain;filter:none}
@media(max-width:760px){.film-caption>.ls-action-eye{grid-column:2;grid-row:1/3;margin:0;align-self:center}}

/* Reserve the eye for project previews; ordinary links use a quiet underline. */
html[data-service] .text-link .link-ink{
 text-decoration-line:underline;
 text-decoration-thickness:2px;
 text-underline-offset:6px;
}
html[data-service] .text-link:hover{color:var(--accent)}

/* Compact service rhythm: keep the project imagery, remove excess vertical space. */
html[data-service] .service-hero{padding-top:124px;padding-bottom:32px}
html[data-service] .hero-copy>.eyebrow{margin-bottom:20px}
html[data-service] .hero-copy h1{font-size:clamp(38px,5.4vw,86px);max-width:none;line-height:1.04}
html[data-service] .hero-intro{margin-top:20px}
html[data-service] .hero-action{margin-top:8px;min-height:44px}
html[data-service] .selected-work{padding-top:0;padding-bottom:28px}
html[data-service] .work-heading{margin-bottom:16px}
html[data-service] .service-projects{gap:28px}
.film-caption>.ls-action-eye{margin-top:24px}
html[data-service] .service-close{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:32px;padding-top:32px;padding-bottom:16px}
html[data-service] .service-close h2{font-size:clamp(36px,4.3vw,64px)}
html[data-service] .close-action{margin-top:0;min-height:44px}
html[data-service] .related-services{grid-column:1/-1;margin-top:20px;gap:12px 24px}
html[data-service] .ls-page-controls{padding-bottom:4px}
@media(max-width:760px){
 html[data-service] .service-hero{padding-top:106px;padding-bottom:24px}
 html[data-service] .hero-copy>.eyebrow{margin-bottom:16px}
 html[data-service] .hero-copy h1{font-size:clamp(30px,7.7vw,48px)}
 html[data-service] .hero-intro{margin-top:16px}
 html[data-service] .selected-work{padding-bottom:20px}
 html[data-service] .work-heading{flex-direction:row;align-items:center;gap:16px;margin-bottom:12px}
 html[data-service] .work-heading h2{font-size:18px}
 html[data-service] .service-projects{gap:28px}
 .service-film a{gap:12px}
 .film-caption>.ls-action-eye{margin-top:0}
 html[data-service] .service-close{padding-top:24px;padding-bottom:12px;column-gap:16px}
 html[data-service] .service-close h2{font-size:36px}
 html[data-service] .close-action{font-size:13px}
 html[data-service] .related-services{margin-top:16px;gap:8px 20px}
}
@media(max-width:380px){
 html[data-service] .service-close{grid-template-columns:1fr}
 html[data-service] .close-action{justify-self:start;margin-top:4px}
}