:root{--bg:#121414;--panel:#1b1e1e;--ink:#eeefeb;--muted:#969e9c;--accent:#14c4cf;--line:#303535}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{height:100px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand img{width:186px;height:auto;display:block}nav{display:flex;gap:34px;font-size:13px}nav a:hover,.text-link:hover{color:var(--accent)}.contact-link{border:1px solid #5a6663;padding:13px 20px;border-radius:6px;font-size:13px}.contact-link span{margin-left:24px;color:var(--accent)}.hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.18fr 1fr;gap:20px;padding:88px 5% 74px;min-height:700px;overflow:hidden}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted);margin-bottom:26px}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px}h1{font-size:clamp(45px,4.65vw,74px);line-height:1.09;letter-spacing:-3.4px;margin:0 0 27px;font-weight:800}em{font-style:normal;color:var(--accent)}.dot{color:var(--accent)}p{font-size:14px;line-height:1.85;color:var(--muted)}.hero p{font-size:15px}.actions{display:flex;align-items:center;gap:28px;margin-top:34px}.button{background:var(--accent);color:#0c2324;padding:17px 23px;border-radius:5px;font-size:12px;font-weight:800}.button span{margin-left:25px}.text-link{font-size:12px;font-weight:600}.hero-note{margin-top:57px;color:var(--muted);font-size:8px;letter-spacing:1.5px}.hero-note span{color:var(--accent);margin-right:22px}.hero-visual{position:relative;height:500px;align-self:center}.visual-label{position:absolute;top:-14px;left:34px;letter-spacing:2px;font-size:9px;color:var(--muted)}.hero-film{position:absolute;left:24px;top:20px;width:57%;height:425px;padding:0;border:1px solid #687573;border-radius:12px;background:#232827;transform:rotate(-6deg);overflow:hidden;z-index:2;box-shadow:0 24px 45px #0009}.hero-film img{width:100%;height:100%;object-fit:cover;filter:brightness(.65)}.frame-top{position:absolute;top:18px;left:18px;right:18px;font-size:9px;text-align:left;letter-spacing:1px}.frame-top b{color:var(--accent)}.frame-top>span{float:right}.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ffffff80;border-radius:50%;width:55px;height:55px;display:grid;place-items:center;font-size:16px;background:#15191955;backdrop-filter:blur(8px)}.frame-bottom{position:absolute;bottom:28px;left:18px;text-align:left;font-size:17px;line-height:1.5}.frame-bottom strong{color:var(--accent)}.side-film{position:absolute;right:-5px;top:75px;width:47%;height:345px;border-radius:10px;overflow:hidden;transform:rotate(9deg);border:1px solid var(--line)}.side-film img{height:100%;width:100%;object-fit:cover;filter:brightness(.35)}.side-film>span{position:absolute;top:85px;left:20px;font-size:42px;line-height:1.1;font-weight:800;letter-spacing:-2px}.timecode{position:absolute;bottom:6px;left:34px;font-family:monospace;color:var(--muted);font-size:11px}.timecode span{margin-left:20px;color:#4b5552}.timecode b{color:var(--accent)}.sticker{position:absolute;right:-10px;bottom:35px;z-index:3;background:var(--accent);color:#132c2d;padding:12px 18px;transform:rotate(-7deg);font-size:10px;font-weight:800}.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 4%;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:11px;letter-spacing:1px;overflow:hidden;white-space:nowrap}.ticker b{color:var(--accent);font-size:21px}.section{max-width:1440px;margin:auto;padding:100px 5%}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}h2{font-size:clamp(34px,3.5vw,52px);letter-spacing:-2px;line-height:1.16;margin:0;font-weight:700}.section-title p{font-size:12px;margin-bottom:2px}.filters{display:flex;gap:9px;margin-bottom:30px}.filters button{border:1px solid var(--line);background:transparent;padding:11px 18px;border-radius:5px;font-size:11px;color:var(--muted)}.filters button.active{background:var(--ink);color:#121414;border-color:var(--ink)}sup{margin-left:7px;font-size:8px}.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 19px}.work[hidden]{display:none}.thumbnail{position:relative;width:100%;aspect-ratio:9/13;border:0;border-radius:7px;background:var(--panel);overflow:hidden;padding:0}.thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .4s;filter:brightness(.8)}.thumbnail:hover img{transform:scale(1.06);filter:brightness(1)}.work-index,.format{position:absolute;font-size:9px;letter-spacing:1px;text-shadow:0 1px 8px #000}.work-index{left:16px;top:16px}.format{right:16px;bottom:17px}.thumbnail .play{width:44px;height:44px;font-size:12px}.work-caption{display:flex;justify-content:space-between;gap:10px;margin-top:13px}.work-caption h3{font-size:11px;font-weight:600;margin:0}.work-caption>span{color:var(--muted);font-size:7px;letter-spacing:1px;white-space:nowrap}.offer{border-top:1px solid var(--line)}.service{display:grid;grid-template-columns:50px 1.05fr 1fr 30px;align-items:center;gap:25px;padding:34px 0;border-bottom:1px solid var(--line)}.number{color:var(--accent);font-size:11px}.service h3{font-size:21px;letter-spacing:-.6px;margin:0}.service p{font-size:12px;margin:0}.arrow{font-size:26px;color:var(--accent)}.service:hover h3{color:var(--accent)}.about{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;background:#181b1b;border-radius:12px}.about p{font-size:13px;max-width:450px}.about .text-link{display:inline-block;margin-top:17px}.about-art{height:380px;position:relative;border:1px solid var(--line);border-radius:8px;padding:24px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0,transparent 49px,#ffffff05 50px)}.art-label{font-size:9px;letter-spacing:2px;color:var(--muted)}.big-m{font-size:132px;font-weight:800;letter-spacing:-18px;text-align:center;padding-top:30px}.big-m span{font-size:70px;vertical-align:top;color:var(--accent);letter-spacing:-12px}.timeline{display:flex;gap:5px;transform:rotate(-6deg);margin-top:25px}.timeline i{background:var(--accent);height:25px;flex:1;border-radius:3px;opacity:.7}.timeline i:nth-child(2){flex:2;opacity:.3}.timeline i:nth-child(4){opacity:.4}.about-art small{display:block;color:var(--muted);font-family:monospace;font-size:9px;margin-top:22px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:50px}.steps article{border-top:1px solid var(--line);padding-top:24px}.steps span{font-size:9px;letter-spacing:1.5px;color:var(--accent)}.steps h3{font-size:20px;letter-spacing:-.6px;margin-top:25px}.steps p{font-size:12px}.faq{padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:9%}details{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-size:13px;list-style:none;display:flex;justify-content:space-between}summary:after{content:'+';color:var(--accent)}details[open] summary:after{content:'−'}details p{font-size:12px}.contact{background:var(--accent);color:#102122;border-radius:12px;margin-bottom:50px;padding-top:70px;padding-bottom:45px}.contact .eyebrow{color:#2e6566}.contact h2{font-size:clamp(36px,4.5vw,66px)}.contact em{color:#f0f5ee}.email{display:flex;justify-content:space-between;border-bottom:1px solid #10212250;padding:34px 0 20px;font-size:clamp(17px,2.8vw,38px);letter-spacing:-1px}.contact-bottom{display:flex;align-items:center;gap:30px;margin-top:18px}.contact-bottom p{color:#2e5657;font-size:11px;margin-right:auto}.contact-bottom a{font-size:11px}footer{max-width:1440px;margin:auto;padding:0 5% 35px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}footer .brand img{width:140px}dialog{background:#151919;color:white;border:1px solid #58615e;border-radius:12px;width:min(900px,94vw);padding:45px 18px 20px}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}#close{position:absolute;right:16px;top:10px;background:none;border:0;font-size:21px}#embed{aspect-ratio:16/9}iframe{width:100%;height:100%;border:0}#external{display:block;margin-top:16px;font-size:12px;color:var(--accent)}@media(min-width:1450px){.about,.contact{max-width:1296px}}@media(max-width:900px){.hero{grid-template-columns:1fr 1fr;padding-top:60px}.hero-visual{height:430px}.hero-film{height:350px}.side-film{height:285px}.side-film>span{font-size:31px}h1{font-size:48px;letter-spacing:-2.5px}.actions{align-items:start;flex-direction:column;gap:20px}.work-grid{grid-template-columns:repeat(3,1fr)}.hero-note{margin-top:30px}.service{grid-template-columns:25px 1fr 1fr 20px;gap:15px}.service h3{font-size:18px}.about{gap:5%}.big-m{font-size:95px}.contact,.about{border-radius:0}}@media(max-width:620px){header{height:80px}.brand img{width:144px}nav{display:none}.contact-link{font-size:10px;padding:10px}.contact-link span{margin-left:10px}.hero{display:flex;flex-direction:column;padding-top:48px;gap:38px}.hero h1{font-size:47px}.hero p{font-size:13px}.hero-visual{width:100%;max-width:390px;height:450px}.hero-film{height:375px;width:56%;left:24px}.side-film{height:305px;right:15px}.visual-label{top:0}.actions{flex-direction:row;align-items:center;gap:18px}.button{padding:15px;font-size:10px}.button span{margin-left:12px}.text-link{font-size:10px}.hero-note{font-size:7px}.ticker{font-size:8px;padding:15px 5%}.ticker b{font-size:16px}.section{padding:65px 5%}.section-title{display:block}.section-title p{margin-top:20px}.eyebrow{font-size:8px;margin-bottom:18px}h2{font-size:35px;letter-spacing:-1.5px}.work-grid{grid-template-columns:repeat(2,1fr);gap:25px 12px}.filters{gap:6px}.filters button{font-size:9px;padding:10px}.work-caption{display:block}.work-caption>span{display:block;margin-top:5px}.service{grid-template-columns:25px 1fr 20px;padding:25px 0}.service p{grid-column:2;grid-row:2}.service .arrow{grid-column:3;grid-row:1}.service h3{font-size:19px}.about{display:flex;flex-direction:column-reverse;gap:35px}.about-art{width:100%;height:310px}.big-m{font-size:105px;padding-top:5px}.steps{grid-template-columns:1fr;gap:25px;margin-top:35px}.steps h3{margin:16px 0 5px}.faq{display:block;padding-top:0}.faq>div+div{margin-top:20px}.contact h2{font-size:37px}.email{letter-spacing:-.5px;font-size:17px}.contact-bottom{flex-wrap:wrap;gap:20px}.contact-bottom p{width:100%;margin:0}footer{flex-wrap:wrap;gap:25px}footer .brand{width:100%}footer .brand img{width:130px}#embed{aspect-ratio:9/14;max-height:75vh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.more-work{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.more-work p{margin:0;font-size:12px}.more-work a{color:var(--accent)}

dialog.portrait{width:min(430px,94vw)}dialog.portrait #embed{aspect-ratio:9/16;height:min(72vh,720px);margin:auto}dialog.portrait iframe{height:100%}.player-notice{padding:30px;line-height:1.8}#embed:has(.player-notice){aspect-ratio:auto;height:auto}

/* Short entrances and interactions follow the rhythm of an edit. */
@media (prefers-reduced-motion: no-preference) {
 header { animation: mb-header-in .65s ease-out both; }
 .hero-copy > * { animation: mb-rise-in .85s cubic-bezier(.2,.75,.25,1) both; }
 .hero-copy > :nth-child(1) { animation-delay: .08s; }
 .hero-copy > :nth-child(2) { animation-delay: .17s; }
 .hero-copy > :nth-child(3) { animation-delay: .28s; }
 .hero-copy > :nth-child(4) { animation-delay: .39s; }
 .hero-copy > :nth-child(5) { animation-delay: .50s; }
 .hero-visual { animation: mb-visual-in 1.15s cubic-bezier(.2,.75,.25,1) .18s both; }
 .hero-film { animation: mb-frame-drift 4s ease-in-out .85s; }
 .side-film { animation: mb-side-drift 4s ease-in-out 1s; }
 .sticker { animation: mb-sticker-in .75s cubic-bezier(.2,.85,.3,1.15) .65s backwards; }
 .button, .contact-link, .filters button {
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
 }
 .button span, .contact-link span, .email > span, .service .arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.75,.25,1);
 }
 nav a, .text-link, .contact-bottom a { transition: color .25s ease; }
 .play { transition: transform .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease; }
 .hero-film img { transition: transform .6s cubic-bezier(.2,.75,.25,1), filter .4s ease; }
 .service { transition: background-color .3s ease; }
 .service h3 { transition: color .25s ease; }
 .timeline::after {
  content: ''; position: absolute; top: -8px; bottom: -8px; width: 2px; left: 5%;
  background: var(--ink); box-shadow: 0 0 10px #14c4cf70; pointer-events: none;
  transition: left 1.2s cubic-bezier(.2,.75,.25,1);
 }
 .about-art:is(:hover, :focus-within) .timeline::after { left: 94%; }
 details[open] summary::after { animation: mb-plus-in .25s ease-out; }
 dialog[open] { animation: mb-dialog-in .3s cubic-bezier(.2,.75,.25,1); }
 dialog[open]::backdrop { animation: mb-backdrop-in .3s ease-out; }
 .button:active, .contact-link:active, .filters button:active { transform: scale(.97); }
 @media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #14c4cf25; }
  .contact-link:hover { transform: translateY(-2px); border-color: var(--accent); }
  .filters button:not(.active):hover { transform: translateY(-2px); border-color: #6a8581; color: var(--ink); }
  .button:hover span, .contact-link:hover span, .email:hover > span, .service:hover .arrow { transform: translate(3px,-3px); }
  .film:hover .play { background: var(--accent); color: #102122; border-color: var(--accent); transform: translate(-50%,-50%) scale(1.1); }
  .hero-film:hover img { transform: scale(1.04); filter: brightness(.85); }
  .service:hover { background: #ffffff03; }
 }
}

@keyframes mb-header-in { from {opacity: 0; transform: translateY(-10px);} to {opacity: 1; transform: translateY(0);} }
@keyframes mb-rise-in { from {opacity: 0; transform: translateY(24px);} to {opacity: 1; transform: translateY(0);} }
@keyframes mb-visual-in { from {opacity: 0; transform: translate(24px,18px) scale(.97);} to {opacity: 1; transform: translate(0,0) scale(1);} }
@keyframes mb-frame-drift { 0%,100% {transform: translateY(0) rotate(-6deg);} 50% {transform: translateY(-9px) rotate(-4deg);} }
@keyframes mb-side-drift { 0%,100% {transform: translateY(0) rotate(9deg);} 50% {transform: translateY(7px) rotate(7deg);} }
@keyframes mb-sticker-in { from {opacity: 0; transform: translateY(18px) rotate(-12deg) scale(.94);} to {opacity: 1; transform: translateY(0) rotate(-7deg) scale(1);} }
@keyframes mb-dialog-in { from {opacity: 0; transform: translateY(16px) scale(.98);} to {opacity: 1; transform: translateY(0) scale(1);} }
@keyframes mb-backdrop-in { from {opacity: 0;} to {opacity: 1;} }
@keyframes mb-plus-in { from {transform: rotate(-90deg);} to {transform: rotate(0);} }

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Two identical groups make the service strip loop without a visible seam. */
.ticker { display: block; padding: 24px 0; }
.ticker-track { display: flex; width: max-content; }
.ticker-group {
 display: flex; flex: 0 0 auto; min-width: 100vw; align-items: center;
 justify-content: space-around; gap: clamp(28px, 4vw, 90px);
 padding: 0 clamp(14px, 2vw, 45px);
}
.ticker-group > * { flex: 0 0 auto; }
.ticker:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
 .ticker-track { animation: mb-ticker-scroll 32s linear infinite; }
 .ticker:focus-within .ticker-track { animation-play-state: paused; }
 @media (hover: hover) {
  .ticker:hover .ticker-track { animation-play-state: paused; }
 }
}
@keyframes mb-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 620px) { .ticker { padding: 15px 0; } }
@media (prefers-reduced-motion: reduce) {
 .ticker-track { width: 100%; }
 .ticker-group { width: 100%; min-width: 0; flex-wrap: wrap; gap: 20px; }
 .ticker-group[aria-hidden="true"] { display: none; }
}
/* Green contact CTA in the header. */
.contact-link { background: #8ee43b; color: #13210c; border-color: #8ee43b; font-weight: 700; }
.contact-link span { color: inherit; }
@media (hover: hover) and (pointer: fine) {
 .contact-link:hover { background: #a3f253; border-color: #a3f253; box-shadow: 0 6px 20px #8ee43b24; }
}
/* Light sweep on the green contact button. */
.contact-link { position: relative; overflow: hidden; isolation: isolate; }
.contact-link::before {
 content: ''; position: absolute; inset: -1px; pointer-events: none;
 border-radius: inherit;
 background: linear-gradient(45deg, transparent 18%, #ffffff08 30%, #ffffff24 41%, #ffffff66 50%, #ffffff24 59%, #ffffff08 70%, transparent 82%);
 transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
 .contact-link::before { animation: mb-light-sweep 8s cubic-bezier(.45, 0, .55, 1) 1s infinite; }
}
@keyframes mb-light-sweep {
 0%, 8% { transform: translateX(-120%); }
 62%, 100% { transform: translateX(120%); }
}

/* Persistent quick contact, using Marek's confirmed contact details. */
.contact-widget {
 position: fixed; right: max(24px, env(safe-area-inset-right));
 bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50;
}
.contact-launcher {
 display: flex; align-items: center; gap: 12px; min-height: 56px;
 padding: 8px 18px 8px 9px; border-radius: 16px;
 border: 1px solid #14c4cf70; background: #151c1cf5;
 box-shadow: 0 10px 32px #0005, 0 0 22px #14c4cf12;
 color: var(--ink); font-size: 12px; font-weight: 800;
}
.contact-launcher-icon {
 display: grid; place-items: center; width: 36px; height: 36px;
 border: 1px solid #14c4cf35; border-radius: 10px;
 background: #14c4cf09; color: var(--accent);
}
.quick-contact-panel {
 position: absolute; right: 0; bottom: calc(100% + 14px);
 width: min(350px, calc(100vw - 32px)); padding: 24px;
 max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
 overflow-y: auto; overscroll-behavior: contain;
 background: #151b1b; border: 1px solid #14c4cf55; border-radius: 20px;
 box-shadow: 0 22px 70px #0009, 0 0 28px #14c4cf0c;
}
.quick-contact-panel[hidden] { display: none; }
.quick-contact-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quick-contact-heading .eyebrow { margin: 4px 0 13px; color: var(--accent); font-size: 8px; letter-spacing: 1.3px; }
.quick-contact-heading h2 { font-size: 27px; letter-spacing: -1px; line-height: 1.25; }
.quick-contact-close {
 flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
 padding: 0; background: #14c4cf09; border: 1px solid #14c4cf40;
 border-radius: 50%; font-size: 15px;
}
.quick-contact-intro { margin: 20px 0; font-size: 12px; line-height: 1.8; }
.quick-contact-options { display: grid; gap: 9px; }
.quick-contact-options a {
 display: flex; align-items: center; justify-content: space-between; gap: 12px;
 padding: 14px; border: 1px solid #14c4cf25; border-radius: 10px; background: #111717;
}
.quick-contact-options strong { display: block; font-size: 13px; font-weight: 700; }
.quick-contact-options small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.quick-contact-options a > span:first-child { min-width: 0; }
.quick-contact-arrow { font-size: 19px; color: var(--accent); }
.contact-widget.is-open .contact-launcher { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
 .contact-launcher, .quick-contact-close, .quick-contact-options a {
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
 }
 .quick-contact-arrow { transition: transform .25s ease; }
 .contact-widget.is-open .quick-contact-panel { animation: mb-quick-contact-in .3s cubic-bezier(.2,.75,.25,1); }
 @media (hover: hover) and (pointer: fine) {
  .contact-launcher:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 36px #0006, 0 0 24px #14c4cf20; }
  .quick-contact-options a:hover, .quick-contact-close:hover { background: #14c4cf0d; border-color: #14c4cf80; }
  .quick-contact-options a:hover .quick-contact-arrow { transform: translate(2px,-2px); }
 }
}
@keyframes mb-quick-contact-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 620px) {
 .contact-widget { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
 .contact-launcher { min-height: 52px; padding-right: 15px; font-size: 11px; }
 .quick-contact-panel { padding: 20px; }
 footer { padding-bottom: 95px; }
}

/* The selected hero composition rotates actual portfolio shorts. */
.side-film.film { padding: 0; background: #171c1c; text-align: left; color: var(--ink); }
.side-film.film > img { display: block; }
.hero-rotation-toggle {
 position: absolute; right: 5px; top: -22px; display: grid; place-items: center;
 width: 29px; height: 29px; padding: 0; border-radius: 50%;
 border: 1px solid var(--line); background: #181d1d; color: var(--muted); font-size: 11px;
}
.hero-rotation-toggle:hover { color: var(--accent); border-color: #14c4cf60; }
.hero-rotation-toggle:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
 .hero-film > img, .side-film > img { transition: opacity .6s ease, filter .4s ease, transform .6s ease; }
 .hero-visual.is-changing-reels .hero-film > img, .hero-visual.is-changing-reels .side-film > img { opacity: 0; transition: opacity .24s ease; }
}
@media (max-width: 620px) { .hero-rotation-toggle { top: -7px; right: 13px; } }

/* A quieter introduction built around the rhythm of editing. */
.hero-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: 1.9px; }
.hero-intro-line { flex: 0 0 26px; height: 1px; background: var(--accent); }
.hero-intro small { display: block; margin-top: 6px; color: var(--muted); font-size: 7px; font-weight: 500; letter-spacing: 1.6px; }
.hero-copy .hero-description { max-width: 395px; margin: 0; font-size: 14px; line-height: 1.9; }
.hero-new-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 30px; }
.hero-portfolio-link { display: inline-flex; align-items: center; gap: 13px; font-size: 13px; font-weight: 700; }
.hero-portfolio-icon { display: grid; place-items: center; width: 46px; height: 46px; padding-left: 2px; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: #112728; font-size: 12px; }
.hero-link-arrow { color: var(--accent); font-size: 18px; margin-left: 6px; }
.hero-contact-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10px; }
.hero-contact-prompt > span { color: var(--muted); }
.hero-contact-prompt a { color: var(--ink); border-bottom: 1px solid #6c7f7955; padding-bottom: 2px; }
.hero-formats { display: flex; flex-wrap: wrap; gap: 20px; width: fit-content; max-width: 100%; margin-top: 35px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .4px; }
@media (prefers-reduced-motion: no-preference) {
 .hero-portfolio-icon { transition: transform .3s ease, box-shadow .3s ease; }
 .hero-link-arrow { transition: transform .3s ease; }
 .hero-contact-prompt a { transition: color .25s ease, border-color .25s ease; }
 @media (hover: hover) and (pointer: fine) {
  .hero-portfolio-link:hover .hero-portfolio-icon { transform: scale(1.07); box-shadow: 0 0 23px #14c4cf20; }
  .hero-portfolio-link:hover .hero-link-arrow { transform: translate(3px,3px); }
  .hero-contact-prompt a:hover { color: var(--accent); border-color: var(--accent); }
 }
}
@media (max-width: 620px) {
 .hero-intro { margin-bottom: 26px; }
 .hero-copy .hero-description { max-width: 360px; font-size: 13px; }
 .hero-new-actions { margin-top: 26px; gap: 18px; }
 .hero-formats { margin-top: 28px; }
}

/* Full-resolution local previews, with natural vertical framing for Shorts. */
.work.short .thumbnail { aspect-ratio: 9 / 16; }
.hero-film { width: 239px; max-width: 57%; }
.side-film { width: 194px; max-width: 47%; }
.hero-film img { filter: brightness(.85); }
.side-film img { filter: brightness(.6); }
.thumbnail img { filter: brightness(.95); }
@media (max-width: 900px) and (min-width: 621px) { .hero-film { width: 197px; } .side-film { width: 160px; } }
@media (max-width: 620px) { .hero-film { width: 211px; max-width: 56%; } .side-film { width: 172px; max-width: 47%; } }

/* Preserve the original About tile dimensions; crop the supplied screenshot to fill. */
.about-art.about-art--screenshot { padding: 0; background: #1e1e1e; }
.about-art--screenshot > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Publication polish: keyboard access, stable images and small-screen playback. */
.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:14px 18px;border-radius:6px;background:var(--ink);color:var(--bg);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
main:focus{outline:none}
.thumbnail{display:block}
.thumbnail img{display:block}
body.player-open{overflow:hidden}
dialog{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto}
#close{width:44px;height:44px;right:8px;top:0}
#embed{aspect-ratio:16/9;max-height:none}
dialog.portrait #embed{width:min(100%,calc((100vh - 140px)*.5625));width:min(100%,calc((100dvh - 140px)*.5625));height:auto;max-height:none;aspect-ratio:9/16}
.contact em{color:#12474a}
.contact .eyebrow,.contact-bottom p{color:#173f40}
.contact :focus-visible{outline-color:#102122}
.email{overflow-wrap:anywhere;gap:14px}
.email span{flex-shrink:0}
.ticker{position:relative}
.ticker-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:#151c1cf5;color:var(--accent);font-size:12px;z-index:1}
.ticker-toggle[hidden]{display:none}
.ticker.is-paused .ticker-track{animation-play-state:paused}
.page-inactive *,.page-inactive *::before,.page-inactive *::after{animation-play-state:paused!important}
@media(max-width:620px){.hero-start-footer a,.hero-secondary-link{min-height:24px;display:inline-flex;align-items:center}.filters button{min-height:36px}.contact-link{min-height:40px;display:inline-flex;align-items:center}.quick-contact-close{min-width:36px;min-height:36px}}