/* Shared monochrome navigation, gallery, project and service pages. */
:root { --page-ink:#0a0a0a; --page-paper:#f5f0eb; --page-muted:#aba59f; }
html { scrollbar-width:none; scroll-padding-top:110px; }
html::-webkit-scrollbar { display:none; }
.skip-link { position:fixed; z-index:2000; left:20px; top:-70px; padding:12px 18px; background:var(--page-paper); color:var(--page-ink); border-radius:8px; }
.skip-link:focus { top:15px; }
.site-header { position:fixed; z-index:1000; top:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:35px; width:max-content; max-width:calc(100% - 40px); padding:12px 22px; border:1px solid #ffffff26; border-radius:100px; background:#161616e8; color:var(--page-paper); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 8px 30px #0002; }
.site-brand { display:block; flex-shrink:0; }
.site-brand img { width:100px; height:26px; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:24px; }
.site-header nav a { font-size:12px; color:#c1bbb5; white-space:nowrap; padding:5px 0; position:relative; transition:color .2s; }
.site-header nav a::after { content:''; position:absolute; height:1px; left:0; right:100%; bottom:0; background:var(--page-paper); transition:right .2s; }
.site-header nav a:hover, .site-header nav a[aria-current] { color:var(--page-paper); }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { right:0; }
.site-header a:focus-visible, .inner-page a:focus-visible, .inner-page button:focus-visible, .inner-page summary:focus-visible { outline:2px solid #f5f0eb; outline-offset:5px; }
.inner-page { background:var(--page-ink); color:var(--page-paper); }
.inner-page main { max-width:1600px; margin:auto; padding:0 clamp(20px,4vw,64px); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.eyebrow { font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--page-muted); margin-bottom:18px; }
.page-intro { padding:155px 0 60px; }
.intro-eyebrow { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff30; padding-top:18px; margin-bottom:45px; color:var(--page-muted); text-transform:uppercase; font-size:10px; letter-spacing:.13em; }
.intro-row { display:grid; grid-template-columns:1.35fr 1fr; gap:8vw; align-items:end; }
.inner-page h1 { font-family:var(--font-display); font-size:clamp(48px,7.4vw,110px); font-weight:500; line-height:1.04; letter-spacing:-.065em; }
.inner-page h1 span { color:#a5a09a; }
.intro-row>p, .service-lead { max-width:49ch; font-size:clamp(14px,1.2vw,17px); line-height:1.85; color:#b8b1aa; }
.page-section { margin:0 0 clamp(65px,9vw,125px); }
.gallery-controls { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; padding:22px 0; border-top:1px solid #ffffff26; margin-bottom:20px; }
.filter-list { display:flex; flex-wrap:wrap; gap:8px; }
.filter-list button { border:1px solid #ffffff29; border-radius:100px; padding:10px 16px; font-size:11px; color:#b9b2ab; transition:background .2s,color .2s; }
.filter-list button:hover { border-color:#f5f0eb8a; color:var(--page-paper); }
.filter-list button[aria-pressed="true"] { background:var(--page-paper); color:var(--page-ink); border-color:var(--page-paper); }
.result-count { font-size:10px; color:var(--page-muted); font-variant-numeric:tabular-nums; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 26px; }
.work-card { display:block; min-width:0; }
.work-card[hidden] { display:none; }
.work-image { aspect-ratio:16/10; background:#171615; border-radius:12px; overflow:hidden; position:relative; }
.work-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s; }
.work-card[data-category="graphisme"] .work-image img { object-fit:contain; }
.work-card[data-category="courts"] .work-image img { object-position:center 38%; }
.work-card:hover .work-image img { transform:scale(1.035); }
.work-copy { padding:20px 0 17px; border-bottom:1px solid #ffffff20; }
.work-kind { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:#bdb4ab; margin-bottom:9px; }
.work-copy h3 { display:flex; justify-content:space-between; gap:15px; font-family:var(--font-display); font-size:clamp(19px,2.1vw,29px); line-height:1.25; font-weight:500; letter-spacing:-.04em; }
.work-copy h3 span { font-weight:400; color:#938a82; transition:transform .25s; }
.work-card:hover h3 span { transform:translate(3px,-3px); color:var(--page-paper); }
.work-copy p { margin-top:8px; font-size:11px; color:#a69c93; }
.page-cta { margin:0 0 45px; padding:55px clamp(24px,5vw,70px); background:var(--page-paper); color:var(--page-ink); border-radius:18px; }
.page-cta .eyebrow { color:#756a60; }
.page-cta h2 { font-family:var(--font-display); font-size:clamp(32px,4.5vw,65px); font-weight:500; line-height:1.08; letter-spacing:-.055em; max-width:15ch; margin-bottom:28px; }
.outline-button { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 21px; border:1px solid currentColor; border-radius:100px; font-size:12px; transition:background .25s,color .25s; }
.outline-button:hover { background:var(--page-paper); color:var(--page-ink); }
.page-cta .outline-button:hover { color:var(--page-paper); background:var(--page-ink); }
.cta-note { color:#776d63; font-size:11px; line-height:1.8; max-width:52ch; margin-top:20px; }
.inner-page .page-cta a:focus-visible { outline-color:var(--page-ink); }
.site-footer { display:grid; grid-template-columns:1fr 1fr; gap:35px; max-width:1600px; margin:0 auto; padding:45px clamp(20px,4vw,64px) 30px; color:#b3a99f; }
.footer-wordmark { display:flex; gap:35px; align-items:center; font-family:var(--font-display); font-size:27px; letter-spacing:-.04em; color:var(--page-paper); }
.site-footer p { font-size:11px; margin-top:8px; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; align-content:start; gap:12px 24px; font-size:11px; }
.site-footer nav a:hover { color:var(--page-paper); text-decoration:underline; text-underline-offset:5px; }
.site-footer small { grid-column:1/-1; border-top:1px solid #ffffff20; padding-top:20px; font-size:10px; color:#7b746d; }
.project-intro { padding-top:130px; padding-bottom:35px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:10px; color:#8f867f; margin-bottom:45px; }
.breadcrumbs a { color:#b8afa6; }
.breadcrumbs a:hover { text-decoration:underline; }
.project-intro h1 { font-size:clamp(38px,6vw,85px); max-width:18ch; }
.project-byline { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:22px; font-size:11px; color:#b3a79e; }
.project-screen { width:100%; aspect-ratio:16/9; background:#151413; border-radius:13px; overflow:hidden; }
.project-screen iframe, .project-screen video { border:0; width:100%; height:100%; display:block; }
.project-screen img { width:100%; height:100%; object-fit:contain; }
.still-screen { max-height:76vh; }
.vertical-screen { aspect-ratio:9/16; max-width:380px; margin:auto; }
.media-note { color:#9b8f83; font-size:11px; line-height:1.7; margin-top:15px; }
.project-story { display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding-top:60px; }
.project-story h2, .approach-grid h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.4vw,34px); line-height:1.2; letter-spacing:-.04em; margin-bottom:18px; }
.project-story p:not(.eyebrow) { color:#b5aaa0; font-size:14px; line-height:1.9; max-width:52ch; }
.section-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; }
.section-heading h2 { font-family:var(--font-display); font-size:clamp(27px,3.5vw,46px); line-height:1.15; font-weight:500; letter-spacing:-.045em; }
.section-heading>span { color:#9a8d82; font-size:10px; }
.text-link { display:inline-block; font-size:12px; border-bottom:1px solid currentColor; padding-bottom:5px; }
.project-photos { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.project-photos figure { overflow:hidden; border-radius:10px; background:#161514; }
.project-photos img { width:100%; height:auto; }
.project-photos .portrait-photo { grid-column:1/-1; max-width:500px; justify-self:center; }
.service-intro h1 { margin-bottom:28px; }
.service-lead { margin-top:25px; margin-bottom:28px; }
.service-intro .service-lead { max-width:60ch; }
.format-row { display:grid; grid-template-columns:45px 1fr 1fr; gap:25px; padding:35px 0; border-top:1px solid #ffffff26; align-items:start; }
.format-row>span { color:#8f857c; font-size:10px; padding-top:8px; }
.format-row h2 { font:500 clamp(23px,3vw,38px)/1.2 var(--font-display); letter-spacing:-.04em; }
.format-row p { color:#b7aaa0; font-size:14px; line-height:1.9; max-width:43ch; }
.paper-section { padding:clamp(28px,5vw,65px); margin-bottom:100px; background:var(--page-paper); color:var(--page-ink); border-radius:18px; }
.paper-section .eyebrow { color:#7b6d61; }
.approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:6vw; }
.approach-grid p { color:#76695e; font-size:14px; line-height:1.9; }
.paper-section>.text-link { margin-top:35px; }
.inner-page .paper-section a:focus-visible { outline-color:var(--page-ink); }
.section-intro { color:#aaa094; max-width:65ch; margin:-5px 0 30px; font-size:13px; line-height:1.9; }
.faq-section { max-width:900px; }
.faq-section>h2 { font:500 clamp(28px,4vw,48px)/1.2 var(--font-display); letter-spacing:-.04em; margin-bottom:30px; }
.faq-section details { border-top:1px solid #ffffff26; }
.faq-section summary { display:flex; justify-content:space-between; gap:20px; padding:22px 0; list-style:none; cursor:pointer; font-size:14px; }
.faq-section summary::-webkit-details-marker { display:none; }
.faq-section summary span { color:#b1a498; transition:transform .2s; }
.faq-section details[open] summary span { transform:rotate(45deg); }
.faq-section details p { color:#b6a89d; font-size:13px; line-height:1.9; max-width:65ch; padding:0 0 25px; }
.service-crosslink { margin-top:-35px; }
.contact-page-panel { display:grid; grid-template-columns:1fr 1.15fr; gap:6vw; background:var(--page-paper); color:var(--page-ink); border-radius:20px; padding:clamp(25px,4vw,55px); margin-bottom:55px; }
.contact-page-info h2 { font:500 36px/1.2 var(--font-display); letter-spacing:-.04em; margin-bottom:20px; }
.contact-page-info p:not(.eyebrow) { color:#76685b; line-height:1.9; font-size:13px; max-width:36ch; margin-bottom:30px; }
.contact-page-info>a { display:block; font-size:clamp(12px,1.3vw,16px); line-height:2.3; overflow-wrap:anywhere; }
.contact-page-info .contact-small { font-size:11px; margin-top:30px; }
.inner-page .contact-page-panel a:focus-visible { outline-color:var(--page-ink); }
.js-enhanced .reveal { transition:opacity .6s ease,transform .6s ease; }
.js-enhanced .reveal:not(.in-view):not(:focus-within) { opacity:0; transform:translateY(20px); }
.home-selection.bento-grid { grid-template-columns:1.15fr 1fr; grid-template-rows:repeat(2,250px); grid-template-areas:none; grid-auto-flow:row; }
.home-selection>.bento-item { grid-area:auto; min-height:0; border-radius:14px; }
.home-selection>.bento-item:first-child { grid-row:span 2; }
.home-work-card .bento-content { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:0; padding:24px; }
.home-work-card .work-kind { position:absolute; top:24px; left:24px; }
.home-work-card h3 { display:flex; justify-content:space-between; gap:20px; font:500 clamp(20px,2.5vw,32px)/1.2 var(--font-display); letter-spacing:-.04em; }
.home-work-card .work-kind { color:#ddd0c4; }
.home-work-card p { font-size:11px; opacity:.75; margin-top:10px; }
.home-gallery-link { max-width:1600px; margin:35px auto 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px; }
.home-gallery-link>span { font-size:11px; color:#a89b8f; }
.hero-location { font:500 12px var(--font-display); color:#c6bbb1; margin-bottom:14px; letter-spacing:.02em; }
/* Service cards use drawn film formats rather than another set of project photos. */
.home-services { max-width:1600px; margin:0 auto; padding:0 var(--page-pad) 85px; }
.services-heading { margin-bottom:32px; }
.services-heading h2 { font:500 clamp(30px,4vw,48px)/1.15 var(--font-display); letter-spacing:-.045em; }
.service-previews { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.service-preview { display:block; overflow:hidden; border-radius:16px; border:1px solid #ffffff24; transition:transform .35s,border-color .35s; }
.service-preview-film { background:#ede7df; color:#171615; border-color:#ede7df; }
.service-preview-social { background:#191817; color:#f5f0eb; }
.service-preview:hover, .service-preview:focus-visible { transform:translateY(-5px); }
.service-preview-social:hover { border-color:#ffffff65; }
.service-preview:focus-visible { outline:2px solid #f5f0eb; outline-offset:5px; }
.service-art { position:relative; height:260px; overflow:hidden; border-bottom:1px solid #00000015; }
.art-label, .art-format { position:absolute; top:23px; font:400 9px var(--font-display); letter-spacing:.1em; text-transform:uppercase; z-index:3; }
.art-label { left:26px; }
.art-format { right:26px; opacity:.5; }
.film-art { background:radial-gradient(ellipse at 50% 95%,#c9bfb4 0,transparent 68%); }
.film-frame { position:absolute; z-index:2; width:65%; aspect-ratio:16/9; left:17.5%; top:62px; border-radius:5px; border:1px solid #524c44; background:#1f1e1c; color:#f5f0eb; padding:20px; transform:rotate(-4deg); box-shadow:0 18px 25px -15px #302b2555; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.frame-shadow { position:absolute; left:22%; top:75px; width:65%; aspect-ratio:16/9; border:1px solid #b8aca0; border-radius:5px; transform:rotate(4deg); }
.frame-corner { position:absolute; width:11px; height:11px; opacity:.6; border-color:#d0c2b4; border-style:solid; }
.corner-tl { top:10px; left:10px; border-width:1px 0 0 1px; }.corner-tr { top:10px; right:10px; border-width:1px 1px 0 0; }.corner-bl { bottom:10px; left:10px; border-width:0 0 1px 1px; }.corner-br { bottom:10px; right:10px; border-width:0 1px 1px 0; }
.film-word { position:absolute; top:19%; left:9%; font:500 clamp(27px,3.3vw,48px)/.98 var(--font-display); letter-spacing:-.055em; }
.film-word>span { color:#958779; }
.film-play { position:absolute; right:12%; top:36%; display:grid; place-items:center; width:35px; height:35px; border:1px solid #b3a496; border-radius:50%; }
.film-play svg { width:13px; height:13px; margin-left:1px; }
.film-progress { position:absolute; left:9%; bottom:17px; width:82%; height:2px; background:#ffffff24; }
.film-progress i { display:block; height:100%; width:28%; background:#e4d6c9; transition:width 1s ease; }
.service-preview:hover .film-frame, .service-preview:focus-visible .film-frame { transform:rotate(0) translateY(-3px); }
.service-preview:hover .film-progress i, .service-preview:focus-visible .film-progress i { width:76%; }
.social-art { border-bottom-color:#ffffff10; background:radial-gradient(ellipse at 50% 80%,#34302c 0,transparent 72%); }
.social-art .art-label { color:#c6b9ac; }
.social-art .art-format { color:#dbcec2; }
.portrait-stack { position:absolute; inset:0; }
.portrait-frame { position:absolute; width:105px; height:168px; top:69px; border:1px solid #70675f; border-radius:10px; background:#282522; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.portrait-back { left:calc(50% - 140px); transform:rotate(-13deg); background:#33302c; display:flex; flex-direction:column; gap:8px; justify-content:center; padding:18px; }
.portrait-back>span { display:block; height:3px; background:#b9aa9a55; }.portrait-back>span:nth-child(2) { width:75%; }.portrait-back>span:nth-child(3) { width:45%; }
.portrait-main { z-index:2; left:calc(50% - 52px); top:53px; height:185px; width:112px; background:#e9e0d6; color:#3b332d; transform:rotate(2deg); border-color:#e9e0d6; box-shadow:0 15px 25px #0003; }
.portrait-rec { position:absolute; top:13px; left:13px; display:flex; align-items:center; gap:4px; font:400 7px var(--font-display); letter-spacing:.07em; }
.portrait-rec i { width:4px; height:4px; background:currentColor; border-radius:50%; }
.portrait-mic { position:absolute; width:34px; height:49px; top:55px; left:38px; }
.portrait-subtitles { position:absolute; bottom:23px; width:66%; left:17%; display:grid; gap:5px; justify-items:center; }
.portrait-subtitles i { display:block; height:4px; width:100%; background:#74655855; border-radius:3px; }.portrait-subtitles i:last-child { width:68%; }
.portrait-wave { left:calc(50% + 36px); transform:rotate(13deg); }
.service-wave { position:absolute; display:flex; align-items:center; gap:4px; left:18px; right:18px; top:45px; height:55px; }
.service-wave i { width:3px; flex-shrink:0; height:25px; background:#cbbbaa; border-radius:3px; transform-origin:center; }
.service-wave i:nth-child(3n) { height:43px; }.service-wave i:nth-child(3n + 1) { height:21px; }.service-wave i:nth-child(3n + 2) { height:33px; }
.portrait-lines { position:absolute; height:2px; background:#8d7b6944; left:18px; right:18px; bottom:37px; box-shadow:0 7px 0 #8d7b6944; }
.service-preview:hover .portrait-back, .service-preview:focus-visible .portrait-back { transform:rotate(-18deg) translateX(-7px); }
.service-preview:hover .portrait-wave, .service-preview:focus-visible .portrait-wave { transform:rotate(18deg) translateX(7px); }
.service-preview:hover .portrait-main, .service-preview:focus-visible .portrait-main { transform:rotate(-2deg) translateY(-4px); }
.service-preview:hover .service-wave i, .service-preview:focus-visible .service-wave i { animation:service-audio .65s ease-in-out calc(var(--bar) * -.09s) infinite alternate; }
@keyframes service-audio { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
.service-preview-copy { position:relative; padding:27px 28px 25px; }
.service-preview-copy h3 { max-width:80%; font:500 clamp(24px,2.8vw,36px)/1.07 var(--font-display); letter-spacing:-.045em; margin-bottom:14px; }
.service-preview-copy p { max-width:45ch; font-size:12px; line-height:1.75; opacity:.65; }
.service-preview-arrow { position:absolute; top:29px; right:28px; display:grid; place-items:center; width:37px; height:37px; border:1px solid #90847760; border-radius:50%; font-size:20px; transition:transform .3s; }
.service-preview:hover .service-preview-arrow { transform:rotate(45deg); }
.service-preview-link { display:inline-block; margin-top:22px; padding-bottom:3px; border-bottom:1px solid #91857766; font-size:10px; }
.home-footer-pages { display:flex; flex-wrap:wrap; gap:15px 25px; font-size:11px; }
.hero-actions a { border-color:#a79c92; }
.hero-actions a:hover { color:#fff; }
.legal-main { padding-top:130px; }
@media(max-width:800px) {
 .intro-row { grid-template-columns:1fr; gap:25px; }
 .intro-row>p { max-width:52ch; }
 .page-intro { padding-top:130px; padding-bottom:40px; }
 .intro-eyebrow { margin-bottom:35px; }
 .format-row { grid-template-columns:30px 1fr; gap:15px; }
 .format-row p { grid-column:2; }
 .contact-page-panel { grid-template-columns:1fr; gap:40px; }
 .contact-page-info p:not(.eyebrow) { max-width:55ch; margin-bottom:20px; }
}
@media(max-width:600px) {
 .site-header { top:12px; max-width:none; width:calc(100% - 24px); justify-content:space-between; gap:14px; padding:11px 13px; }
 .site-brand img { width:56px; height:23px; }
 .site-header nav { gap:12px; }
 .site-header nav a { font-size:10px; }
 .site-about-link { display:none; }
 .page-intro { padding-top:110px; }
 .intro-eyebrow { font-size:8px; letter-spacing:.09em; gap:10px; margin-bottom:30px; }
 .inner-page h1 { font-size:clamp(42px,11.5vw,65px); }
 .intro-row>p, .service-lead { font-size:13px; line-height:1.85; }
 .gallery-controls { padding:15px 0; margin-bottom:10px; }
 .filter-list { gap:6px; }
 .filter-list button { font-size:10px; padding:9px 12px; }
 .work-grid { grid-template-columns:1fr; gap:26px; }
 .work-copy { padding:15px 0; }
 .work-copy h3 { font-size:22px; }
 .work-image { border-radius:9px; }
 .page-section { margin-bottom:60px; }
 .page-cta { padding:32px 24px; border-radius:14px; }
 .page-cta h2 { font-size:36px; }
 .outline-button { font-size:11px; padding:13px 17px; gap:25px; }
 .site-footer { grid-template-columns:1fr; gap:25px; padding-top:25px; }
 .site-footer nav { justify-content:flex-start; gap:14px 20px; }
 .project-intro { padding-top:105px; padding-bottom:25px; }
 .breadcrumbs { margin-bottom:30px; font-size:9px; }
 .project-intro h1 { font-size:40px; }
 .project-byline { font-size:10px; gap:7px 20px; }
 .project-screen { border-radius:8px; }
 .project-story { grid-template-columns:1fr; gap:32px; padding-top:40px; }
 .project-story h2 { font-size:25px; }
 .project-story p:not(.eyebrow) { font-size:13px; }
 .section-heading { margin-bottom:20px; }
 .project-photos { grid-template-columns:1fr; gap:15px; }
 .project-photos .portrait-photo { grid-column:auto; }
 .format-row { padding:25px 0; }
 .format-row h2 { font-size:26px; }
 .format-row p { font-size:13px; }
 .paper-section { padding:30px 24px; margin-bottom:60px; border-radius:14px; }
 .approach-grid { grid-template-columns:1fr; gap:30px; }
 .approach-grid p { font-size:13px; }
 .faq-section summary { font-size:13px; }
 .contact-page-panel { padding:25px 20px; border-radius:14px; }
 .contact-page-info h2 { font-size:30px; }
 .home-selection.bento-grid { grid-template-columns:1fr; grid-template-rows:repeat(3,300px); }
 .home-selection>.bento-item:first-child { grid-row:auto; }
 .home-selection>.bento-item { grid-column:1; }
 .home-services { padding-bottom:50px; }
 .home-services>div { grid-template-columns:1fr; gap:30px; }
 .home-gallery-link { margin-top:25px; }
}
@media(max-width:350px) { .site-header nav { gap:8px; }.site-header nav a { font-size:9px; }.site-brand img { width:44px; } }
@media(prefers-reduced-motion:reduce) {
 *, *::before, *::after { scroll-behavior:auto!important; }
 .js-enhanced .reveal:not(.in-view) { opacity:1; transform:none; }
 .js-enhanced .reveal, .work-image img, .work-copy h3 span, .outline-button, .site-header nav a, .site-header nav a::after { transition:none; }
}

@media(max-width:600px) {
 .home-services { padding-bottom:55px; }
 .services-heading { margin-bottom:25px; }
 .service-previews { grid-template-columns:1fr; gap:16px; }
 .service-art { height:225px; }
 .film-frame { top:64px; width:70%; left:15%; }
 .frame-shadow { top:74px; left:19%; width:70%; }
 .film-word { font-size:32px; }
 .portrait-frame { top:60px; height:145px; width:91px; }
 .portrait-main { top:46px; height:165px; width:100px; left:calc(50% - 50px); }
 .portrait-back { left:calc(50% - 125px); }
 .portrait-wave { left:calc(50% + 29px); }
 .portrait-mic { left:32px; top:48px; }
 .service-preview-copy { padding:23px; }
 .service-preview-copy h3 { font-size:29px; }
 .service-preview-arrow { top:24px; right:23px; }
 .service-wave { left:12px; gap:4px; }
}
@media(prefers-reduced-motion:reduce) {
 .service-preview, .film-frame, .film-progress i, .portrait-frame, .service-preview-arrow { transition:none; }
 .service-preview:hover .service-wave i, .service-preview:focus-visible .service-wave i { animation:none; }
 .service-preview:hover, .service-preview:focus-visible { transform:none; }
}

/* Keep the presentation free of decorative numbering and micro-labels. */
.format-row { grid-template-columns:1fr 1fr; }
.film-frame { top:42px; }
.frame-shadow { top:55px; }
@media(max-width:800px) { .format-row { grid-template-columns:1fr; gap:15px; }.format-row p { grid-column:auto; } }
@media(max-width:600px) { .film-frame { top:48px; }.frame-shadow { top:60px; } }