/*
Theme Name: OTR Media
Author: OTR Media
Description: Photography, films and stories from inside MMA.
Version: 1.0.0
Text Domain: otr-media
*/
:root{--ink:#11120f;--paper:#f1f0eb;--line:#d0d0c8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #8eabff;outline-offset:5px}.skip{position:absolute;left:12px;top:-60px;background:white;padding:12px;z-index:99}.skip:focus{top:12px}.header{height:94px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--paper)}.brand{display:flex;align-items:center;gap:18px}.brand b{font:italic 900 49px Impact,'Arial Narrow',sans-serif;letter-spacing:-3px}.brand b span{font:12px Arial;vertical-align:top;letter-spacing:0}.brand small{font-size:9px;line-height:1.5;letter-spacing:1.5px;border-left:1px solid #aaa;padding-left:16px}.header nav{display:flex;gap:36px;align-items:center;font-size:12px;font-weight:bold}.nav-contact{border:1px solid #aaa;padding:13px 18px}.nav-contact span{padding-left:30px}.menu{display:none}.hero{position:relative;min-height:720px;height:calc(100svh - 94px);max-height:1000px;background:#121410;color:white;overflow:hidden}.hero-image{position:absolute;inset:0;background-size:cover;background-position:center 40%;filter:grayscale(1)}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.6),transparent 70%)}.hero-top,.hero-title,.hero-index{position:relative;z-index:1}.hero-top{padding:30px 5%;font-size:10px;letter-spacing:2px;display:flex;align-items:center;gap:9px}.live-dot{height:6px;width:6px;background:#fff;border-radius:50%}.hero-title{padding:46px 5% 70px}.hero-title>p,.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px}.hero h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(72px,8.7vw,145px);font-weight:900;line-height:.94;letter-spacing:-2px;margin:24px 0 32px}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px white}.hero-bottom{display:flex;gap:75px;align-items:center}.hero-bottom p{font-size:13px;line-height:1.8;color:#ddd}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:48px;padding:18px 24px;font-size:12px;font-weight:bold;border:1px solid}.button.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.button:hover{background:#d8d8cf}.button span{font-size:20px}.hero-index{position:absolute;right:5%;bottom:35px;font-size:9px;letter-spacing:2px;writing-mode:vertical-rl}.ticker{background:var(--ink);color:var(--paper);display:flex;justify-content:space-around;gap:20px;padding:25px 4%;font-size:18px;font-weight:900;letter-spacing:1px}.ticker i{font-style:normal;color:#999}.section{padding:100px 6%}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:45px}h2{font-size:clamp(38px,4.4vw,72px);line-height:1.02;letter-spacing:-2.5px;margin:22px 0 0;font-weight:800}.section-heading>p{font-size:13px;line-height:1.8;color:#666}.filters{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:32px}.filters button{padding:15px 0;border:0;background:none;color:#74746c;font-size:11px}.filters button.active{border-bottom:2px solid var(--ink);color:var(--ink)}sup{font-size:8px;margin-left:4px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px}.project[hidden]{display:none}.project-image{position:relative;height:470px;overflow:hidden;background:#ddd}.project:nth-child(2n) .project-image{height:470px}.project-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s,transform .5s}.project:hover img{filter:grayscale(0);transform:scale(1.025)}.project-number{position:absolute;top:16px;left:16px;color:white;font-size:10px;text-shadow:0 1px 5px black}.project-open{position:absolute;bottom:16px;right:16px;background:var(--paper);border-radius:50%;width:42px;height:42px;display:grid;place-items:center}.project-caption{display:flex;align-items:center;justify-content:space-between;padding-top:17px}.project-caption p{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#696961;margin:0 0 8px}.project-caption h3{font-size:21px;letter-spacing:-.5px;margin:0}.project-caption>span{font-size:24px}.text-link{display:flex;justify-content:space-between;border-bottom:1px solid #999;padding:22px 0;font-size:12px;font-weight:bold;margin-top:45px}.about{background:#ddded7;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.about-photo{position:relative;height:690px}.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.about-photo span{position:absolute;bottom:25px;left:20px;color:white;font-size:10px;letter-spacing:2px}.about-copy>p:not(.eyebrow){color:#55584e;font-size:14px;line-height:1.8;max-width:460px}.about-copy h2{margin-bottom:28px}.services{margin-top:32px}.services>div{border-top:1px solid #bcbeb3;padding:17px 0;display:grid;grid-template-columns:30px 1fr;gap:4px 10px}.services span{grid-row:span 2;font-size:10px;color:#777;padding-top:4px}.services h3{font-size:16px;margin:0}.services p{font-size:11px;color:#64675c;margin:3px 0}.watch{background:var(--ink);color:var(--paper)}.watch>div{display:flex;align-items:end;justify-content:space-between;gap:24px}.watch h2{margin:22px 0 0}.watch p:not(.eyebrow){font-size:13px;line-height:1.8;color:#bbb}.contact{padding-top:100px;padding-bottom:100px}.contact h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(64px,9.6vw,150px);line-height:.96;letter-spacing:-2px}.contact h2 span{-webkit-text-stroke:1px var(--ink);color:transparent}.contact h2 a{display:inline-block;font-family:Arial;font-size:.8em}.contact>div{display:flex;align-items:end;justify-content:space-between;margin-top:35px}.contact p:not(.eyebrow){font-size:13px;color:#666;line-height:1.8}.contact>div>a{font-size:23px;border-bottom:1px solid;padding-bottom:8px}footer{background:#ddded7;padding:50px 6% 25px}.footer-brand{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(35px,6.4vw,100px);letter-spacing:-1px}footer>div{display:flex;gap:32px;border-top:1px solid #bcbeb3;padding-top:22px;margin-top:35px;font-size:10px}footer>div span{margin-right:auto}.page-content{padding:80px 8%;min-height:70vh}.page-content h1{font-size:50px}.page-content article{max-width:900px;margin:auto}
@media(min-width:1600px){.hero-title{padding-top:70px}.project-image,.project:nth-child(2n) .project-image{height:600px}}@media(max-width:760px){.header{height:78px}.brand b{font-size:40px}.brand small{font-size:7px}.menu{display:block;border:0;background:none;font-size:12px}.header nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--paper);padding:30px 6%;z-index:20;flex-direction:column;align-items:stretch}.header nav.open{display:flex}.hero{height:auto;min-height:700px}.hero-title{padding:55px 6% 70px}.hero h1{font-size:clamp(64px,13vw,98px);letter-spacing:-1px}.hero-top{font-size:8px;letter-spacing:1px;padding:25px 6%}.hero-image{background-position:60% center}.hero-bottom{align-items:start;flex-direction:column;gap:16px}.hero-index{display:none}.ticker{font-size:10px;padding:23px 4%;gap:10px}.section{padding:65px 6%}.section-heading{display:block}.section-heading>p{margin-top:25px}.work-grid{grid-template-columns:1fr;gap:35px}.project-image,.project:nth-child(2n) .project-image{height:440px}.filters{gap:18px}.filters button{font-size:10px}h2{letter-spacing:-1.5px}.about{grid-template-columns:1fr;gap:35px}.about-photo{height:440px}.watch>div{align-items:start;flex-direction:column}.contact h2{font-size:14vw}.contact>div{align-items:start;flex-direction:column;gap:20px}.contact>div>a{font-size:20px}footer>div{flex-wrap:wrap;gap:20px}footer>div span{width:100%}.footer-brand{font-size:10vw}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.brand-logo{width:48px;height:48px;border-radius:50%;object-fit:cover}@media(max-width:760px){.brand{gap:10px}.brand-logo{width:38px;height:38px}.brand small{padding-left:10px}}
.header{position:relative;z-index:5}@media(max-width:760px){.header nav{top:100%}.ticker{gap:8px;font-size:9px}.ticker span{white-space:nowrap}.ticker i:last-child{display:none}}
.page .work h1,.page .about h1{font-size:clamp(42px,5.5vw,84px);line-height:1.02;letter-spacing:-2.5px;margin:22px 0}.page .work{padding-top:80px}.page .about{min-height:80vh}.page-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--line)}.page-cta h2{margin:0}.contact-intro{background:var(--ink);color:var(--paper);padding-top:75px;padding-bottom:70px}.contact-intro h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(68px,9vw,140px);line-height:.96;letter-spacing:-1px;margin:30px 0}.contact-intro h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--paper)}.contact-intro>p:last-child{font-size:14px;color:#ccc;line-height:1.8}.contact-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:9%;align-items:start}.contact-layout aside>p:not(.eyebrow){font-size:14px;color:#62655b;line-height:1.8;margin:25px 0}.contact-email{display:inline-block;font-size:18px;border-bottom:1px solid;padding-bottom:8px}.contact-social{display:flex;gap:24px;margin-top:28px;font-size:12px}.form-note{font-size:12px;line-height:1.7;margin:0 0 30px;padding:15px 18px;border-left:2px solid #888;background:#e7e7df;color:#53564c}.form-note a{text-decoration:underline}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}#contact-form label{display:block;font-size:12px;font-weight:bold;margin-bottom:25px}#contact-form label span{font-size:10px;font-weight:normal;color:#73766d}#contact-form input,#contact-form select,#contact-form textarea{display:block;width:100%;margin-top:10px;border:1px solid #bcbeb3;background:transparent;border-radius:0;padding:15px 13px;font:13px Arial;color:var(--ink);min-height:48px}#contact-form textarea{resize:vertical}#contact-form input:focus,#contact-form select:focus,#contact-form textarea:focus{outline:2px solid #555;outline-offset:2px}.form-submit{background:var(--ink);color:var(--paper);min-width:230px}.form-submit:hover{background:#333}#form-status{font-size:13px;line-height:1.7}nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}@media(max-width:760px){.contact-layout{grid-template-columns:1fr;gap:50px}.form-row{grid-template-columns:1fr;gap:0}.page-cta{align-items:start;flex-direction:column}.contact-intro{padding-top:55px}.page .work h1,.page .about h1{letter-spacing:-1.5px}.contact-layout h2{font-size:42px}}
.otr-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}.button .otr-icon,.project-caption .otr-icon{width:24px;height:24px}.project-open .otr-icon{width:18px;height:18px}.nav-contact .otr-icon{width:12px;height:12px}.ticker i{display:flex;align-items:center;justify-content:center}.ticker .otr-icon{width:18px;height:18px}@media(max-width:760px){.ticker .otr-icon{width:10px;height:10px}}
/* Keep the subject in frame when portrait originals fill wide thumbnails. */
.project-image img[src$="bc1745c552b47a28.jpg"]{object-position:50% 30%}
.project-image img[src$="d2c63c2c12953ec3.jpg"]{object-position:50% 12%}
.project-image img[src$="65a7344dff793828.jpg"]{object-position:50% 20%}
.project-image img[src$="b017383b88c46da6.jpg"]{object-position:50% 18%}
.project-image img[src$="1269c91069e0290f.jpg"]{object-position:50% 65%}
.project-image img[src$="f8d066f0aebaac86.jpg"]{object-position:50% 50%}
.project-image,.project:nth-child(2n) .project-image{height:auto;aspect-ratio:4/3}.project-image img[src$="bc1745c552b47a28.jpg"]{object-position:50% 39%}
.contact-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.form-submit:disabled{opacity:.65;cursor:default}

/* Official SharePoint brand assets */
.brand-logo{width:48px;height:54px;border-radius:0;object-fit:contain}.brand-wordmark{width:116px;height:auto;display:block}.footer-brand{display:inline-block}.footer-brand img{display:block;width:clamp(180px,25vw,330px);height:auto}.about-origin{font-weight:bold}.about-quote{margin:24px 0 34px;padding:5px 0 5px 22px;border-left:2px solid var(--ink);font-size:clamp(17px,1.5vw,21px);line-height:1.65}.hero h1{max-width:1100px}@media(max-width:760px){.brand-logo{width:36px;height:40px}.brand-wordmark{width:88px}.brand{gap:12px}.about-quote{padding-left:18px}}

.brand-combined{display:block;width:150px;height:74px;object-fit:contain}.about-story .about-photo{height:auto;align-self:start}.about-story .about-photo img{display:block;width:100%;height:auto;filter:none}.about-gallery{border-top:1px solid var(--line)}.about-gallery-grid{columns:3;column-gap:25px}.about-gallery-grid figure{margin:0 0 30px;break-inside:avoid}.about-gallery-grid a{display:block}.about-gallery-grid img{display:block;width:100%;height:auto}.about-gallery figcaption,.about-films figcaption{font-size:12px;line-height:1.5;margin-top:12px;color:#55594e}.about-films{background:var(--ink);color:var(--paper)}.about-film-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:850px;margin:40px auto 0}.about-film-grid figure{margin:0}.about-film-grid video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#000}.about-films figcaption{color:#c8c9c1}@media(max-width:760px){.brand-combined{width:116px;height:58px}.about-gallery-grid{columns:2;column-gap:16px}.about-gallery-grid figure{margin-bottom:22px}.about-film-grid{gap:20px}}@media(max-width:480px){.about-gallery-grid{columns:1}.about-film-grid{grid-template-columns:1fr;max-width:350px}}
/* Dark OTR palette — maroon brand highlight */
:root{color-scheme:dark;--ink:#f4f0ec;--paper:#101010;--line:#383232;--surface:#191717;--muted:#bcb5b2;--accent:#800000;--accent-hover:#a01919;--accent-text:#e6a3a3}
body{background:var(--paper);color:var(--ink)}::selection{background:var(--accent);color:#fff}.header{background:#111;border-bottom:2px solid var(--accent)}.brand-combined{filter:invert(1)}.menu{color:var(--ink)}.header nav{background:#111}.nav-contact{border-color:var(--accent);background:var(--accent);color:#fff}.header nav a:hover{color:#fff}.header nav a:not(.nav-contact):hover{text-decoration:underline;text-decoration-color:#d46b6b;text-underline-offset:6px}nav a[aria-current=page]{text-decoration-color:#d46b6b}.skip{background:var(--accent);color:#fff}a:focus-visible,button:focus-visible{outline-color:#e6a3a3}.live-dot{background:#d46b6b;box-shadow:0 0 0 4px #80000055}.hero:after{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.17)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 70%)}.hero h1 em{-webkit-text-stroke-color:#e6a3a3}.eyebrow{color:var(--accent-text)}.hero-title>p{color:#efcdcd}.button,.button.light,.form-submit{background:var(--accent);color:#fff;border-color:var(--accent)}.button:hover,.button.light:hover,.form-submit:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.ticker{background:var(--accent);color:#fff}.ticker i{color:#e5b6b6}.section-heading>p,.about-copy>p:not(.eyebrow),.services p,.contact p:not(.eyebrow),.contact-layout aside>p:not(.eyebrow),.project-caption p,.about-gallery figcaption{color:var(--muted)}.filters button{color:var(--muted)}.filters button.active{color:#fff;border-bottom-color:#d46b6b}.filters button:hover{color:#fff}.project-image{background:#242020}.project-open{background:var(--accent);color:#fff}.project-caption>span{color:var(--accent-text)}.text-link{border-color:var(--line)}.text-link:hover{color:var(--accent-text)}.about{background:var(--surface)}.services>div{border-color:var(--line)}.services span{color:var(--accent-text)}.about-quote{border-left-color:var(--accent);color:#f1e3df}.about-photo span{background:#101010cc;padding:10px 12px;left:12px;bottom:12px}.watch,.about-films{background:#080808;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.contact h2 span{-webkit-text-stroke-color:#e6a3a3}.contact h2 a,.contact-email,.contact>div>a{color:#f3dede}.contact-email,.contact>div>a{border-bottom-color:#b74545}.contact-intro{background:linear-gradient(115deg,#300808,#121010 75%);color:var(--ink);border-bottom:1px solid var(--accent)}.contact-intro h1 em{-webkit-text-stroke-color:#e6a3a3}.contact-intro>p:last-child{color:var(--muted)}.form-note{background:#241717;color:#dfceca;border-left-color:#b74545}#contact-form label span{color:var(--muted)}#contact-form input,#contact-form select,#contact-form textarea{background:#191717;color:var(--ink);border-color:#5a4c4c}#contact-form input::placeholder,#contact-form textarea::placeholder{color:#a79d99;opacity:1}#contact-form input:focus,#contact-form select:focus,#contact-form textarea:focus{outline-color:#d46b6b;border-color:#d46b6b}#contact-form select option{background:#191717;color:var(--ink)}#form-status{color:#f1d4d4}footer{background:#171313;border-top:2px solid var(--accent)}footer>div{border-color:var(--line);color:var(--muted)}footer a:hover{color:#fff}.footer-brand img{filter:invert(1)}.about-gallery-grid a:focus-visible{outline:3px solid #e6a3a3;outline-offset:4px}.page-cta{background:#171111}.page-cta h2{color:var(--ink)}
@media(max-width:760px){.header nav{background:#171313;border-bottom:2px solid var(--accent)}}

/* Moderniz by Eko Bimantara — supplied free for personal/commercial use. */
@font-face{font-family:Moderniz;src:url('assets/fonts/Moderniz.otf?v=sharepoint') format('opentype');font-weight:400;font-style:normal;font-display:swap}
h1,h2,h3,.hero h1,.contact h2,.contact-intro h1,.page-content h1,.page .work h1,.page .about h1{font-family:Moderniz,Arial,sans-serif;font-weight:400;letter-spacing:-.035em;line-height:1.14;overflow-wrap:normal}h2{font-size:clamp(28px,3.1vw,50px)}.hero h1{font-size:clamp(40px,6.2vw,98px);line-height:1.06;margin:30px 0 38px}.contact h2,.contact-intro h1{font-size:clamp(38px,6vw,96px);line-height:1.12}.page .work h1,.page .about h1{font-size:clamp(28px,4vw,62px)}.project-caption h3{font-size:16px;line-height:1.45;letter-spacing:-.02em}.services h3{font-size:14px;line-height:1.4}.contact-layout h2{font-size:clamp(26px,3vw,45px)}@media(max-width:760px){.hero h1{font-size:clamp(36px,8.8vw,64px)}h2{font-size:clamp(26px,6.8vw,38px)}.contact h2,.contact-intro h1{font-size:clamp(30px,7.8vw,56px)}.page .work h1,.page .about h1{font-size:clamp(26px,6.6vw,42px);letter-spacing:-.035em}.contact-layout h2{font-size:28px}.project-caption h3{font-size:15px}}

/* User-supplied Akzidenz-Grotesk Pro Bold Extended Italic. */
@font-face{font-family:'OTR Akzidenz';src:url('assets/fonts/AkzidenzGroteskPro-BoldExtendedItalic.otf') format('opentype');font-style:italic;font-weight:700;font-display:swap}
body{font-family:'OTR Akzidenz',Arial,sans-serif;font-weight:700;font-style:italic;font-stretch:normal;font-variation-settings:normal}button,input,select,textarea{font-family:inherit;font-style:inherit;font-weight:inherit;font-stretch:inherit;font-variation-settings:inherit}#contact-form input,#contact-form select,#contact-form textarea{font-family:'OTR Akzidenz',Arial,sans-serif;font-size:13px;font-weight:700;font-style:italic;font-stretch:normal;font-variation-settings:normal}h1,h2,h3,.hero h1,.contact h2,.contact-intro h1,.page-content h1,.page .work h1,.page .about h1{font-style:normal;font-stretch:normal;font-variation-settings:normal}.hero-bottom p,.section-heading>p,.about-copy>p:not(.eyebrow),.contact p:not(.eyebrow),.contact-layout aside>p:not(.eyebrow),.watch p:not(.eyebrow){line-height:1.9}.about-quote{line-height:1.8}.header nav{gap:28px}.hero-bottom{gap:45px}.eyebrow,.hero-title>p{letter-spacing:1.4px}.form-row{gap:20px}#contact-form label span{font-weight:700}.contact-email{font-size:16px}.contact>div>a{font-size:20px}.ticker{font-size:15px}.services p{font-size:12px;line-height:1.7}.project-caption p{font-size:10px;line-height:1.6}.about-gallery figcaption,.about-films figcaption{line-height:1.8}@media(max-width:760px){.hero-bottom{gap:18px}.ticker{font-size:8px;letter-spacing:0}.contact-email{font-size:14px}.contact>div>a{font-size:16px}.header nav{gap:26px}.button{gap:32px}.contact-social{gap:18px}}

/* Homepage featured film */
.featured-films{background:#0b0b0b}.home-showreel{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;border:1px solid var(--line)}

/* Full-screen homepage film */
.featured-films{padding:0;position:relative}.featured-films>.section-heading,.featured-films>.text-link{display:none}.home-showreel{width:100%;height:100svh;aspect-ratio:auto;object-fit:cover;border:0}

/* Full-width film with original framing */
.home-showreel{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}


/* Scroll into the film: grow to full width before playback. */
.featured-films{height:190svh;overflow:visible;background:#080808}
.film-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.film-stage .home-showreel{width:100%;height:auto;max-height:100svh;object-fit:contain;transform:scale(var(--film-scale, .68));transform-origin:center;will-change:transform;border-radius:var(--film-radius,24px)}
@media(prefers-reduced-motion:reduce){.featured-films{height:auto}.film-stage{position:relative;height:auto}.film-stage .home-showreel{transform:none;border-radius:0}}

/* Keep the film edge-to-edge on wide screens. */
.film-stage .home-showreel{max-height:none;height:auto;aspect-ratio:16/9;object-fit:cover}


/* Products */
.products-intro{padding-top:160px;padding-bottom:70px}.products-intro h1{font-size:clamp(32px,5.5vw,80px);margin:20px 0 30px}.products-intro>p:last-child{color:var(--muted)}
.product{border-top:1px solid var(--line);padding-top:70px}.product-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.product-heading h2{margin:18px 0 0}.product-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#800000 #171717}.product-track figure{margin:0;flex:0 0 63%;scroll-snap-align:start;background:#111}.product-track img{display:block;width:100%;height:65svh;object-fit:contain}.product-gallery-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 32px;font-size:11px;color:var(--muted)}.product-gallery-nav>div{display:flex;gap:10px}.product-gallery-nav button{width:48px;height:48px;border:1px solid var(--line);background:#171717;color:#fff;cursor:pointer}.product-gallery-nav button:hover{background:#800000}.product-gallery-nav button[data-slide="-1"] svg{transform:rotate(-135deg)}.product-gallery-nav button[data-slide="1"] svg{transform:rotate(45deg)}
@media(max-width:760px){.products-intro{padding-top:120px}.product-heading{display:block}.product-heading>.text-link{display:inline-block;margin-top:25px}.product-track figure{flex-basis:90%}.product-track img{height:55svh}.product-gallery-nav{font-size:9px}.product{padding-top:45px}}

.product-track figure{flex:0 0 auto}.product-track img{width:auto;max-width:85vw;height:65svh;object-fit:contain}@media(max-width:760px){.product-track figure{flex-basis:auto}.product-track img{height:55svh}}


.partners{border-top:1px solid var(--line)}.partners h2{margin:20px 0 40px}.partner-track .partner-card{flex:0 0 calc((100% - 60px)/3);height:240px;display:flex;align-items:center;justify-content:center;padding:30px;background:#fff;scroll-snap-align:start}.partner-track .partner-card img{width:100%;height:100%;max-width:none;object-fit:contain}.partner-track .partner-crmp,.partner-track .partner-golden-ticket{background:#050505}@media(max-width:760px){.partner-track .partner-card{flex-basis:75%;height:200px;padding:25px}}

.partner-track{scroll-snap-type:none;scrollbar-width:none}.partner-track::-webkit-scrollbar{display:none}

.partner-track{cursor:grab;user-select:none;touch-action:pan-x pan-y}.partner-track.is-dragging{cursor:grabbing}.partner-track img{-webkit-user-drag:none;pointer-events:none}

/* Blend logo backgrounds into the dark page, with consistent light marks. */
.partner-track .partner-card{background:#111}
.partner-track .partner-card img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.partner-track .partner-crmp img,.partner-track .partner-golden-ticket img{filter:grayscale(1);mix-blend-mode:screen}

.partner-card>a{display:block;width:100%;height:100%;cursor:pointer}.partner-card>a:focus-visible{outline:2px solid #fff;outline-offset:8px}.is-dragging .partner-card>a{cursor:grabbing}

.partner-track .partner-golden-ticket>a{display:flex;align-items:center;justify-content:center}.partner-track .partner-golden-ticket img{width:250px;max-width:100%;height:auto;filter:grayscale(1) brightness(1.15)}

.konami-gloves{position:fixed;z-index:99999;inset:0;display:grid;place-items:center;pointer-events:none}.konami-gloves[hidden]{display:none}.konami-gloves img{width:min(600px,90vw);height:auto;image-rendering:pixelated;filter:drop-shadow(0 12px 20px #0008)}.konami-gloves.pop img{animation:gloves-pop 1s steps(8,end) both}@keyframes gloves-pop{0%{transform:translateY(65px) scale(0);opacity:0}18%{transform:translateY(-15px) scale(1.12);opacity:1}35%,80%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(30px) scale(.8);opacity:0}}@media(prefers-reduced-motion:reduce){.konami-gloves.pop img{animation:none}}

.glove-rain{position:fixed;inset:0;width:100vw;height:100dvh;z-index:99999;touch-action:none;cursor:grab}.glove-rain:active{cursor:grabbing}

.referrals{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr);gap:clamp(35px,7vw,110px);align-items:center;background:#0c0c0c;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.referral-art{display:grid;place-items:center}.referral-art img{display:block;width:min(100%,340px);height:auto;filter:invert(1);mix-blend-mode:screen}.referral-copy h2{margin:20px 0 26px;font-size:clamp(28px,3.5vw,54px)}.referral-copy>p:not(.eyebrow){color:var(--muted);max-width:640px;line-height:1.8}.referral-copy strong{color:#fff}.referral-copy .button{margin-top:25px}@media(max-width:760px){.referrals{grid-template-columns:1fr;gap:30px}.referral-art img{width:210px}.referral-copy .button{font-size:11px}}

.referral-art img{filter:none;mix-blend-mode:normal}

.referral-marquee{display:block;overflow:hidden;background:#800000;color:#fff;padding:22px 0;text-decoration:none}.referral-marquee-track{display:flex;width:max-content;animation:referral-scroll 32s linear infinite}.referral-marquee-group{display:flex;flex-shrink:0}.referral-marquee-group>span{display:flex;align-items:center;gap:48px;padding-right:48px;font-size:clamp(13px,1.4vw,21px);white-space:nowrap}.referral-star{font-size:22px}.referral-marquee-reverse .referral-marquee-track{animation-direction:reverse}.referral-marquee:hover{background:#990000}@keyframes referral-scroll{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.referral-marquee-track{animation:none}}

/* Compact navigation remains available while scrolling. */
.header{position:sticky;top:0;z-index:1000;transition:height .22s ease,box-shadow .22s ease}.header .brand-combined{transition:width .22s ease,max-height .22s ease}.header.is-scrolled{height:64px;box-shadow:0 5px 22px #0005}.header.is-scrolled .brand-combined{width:120px;max-height:49px;object-fit:contain}.header.is-scrolled nav{font-size:11px}.header.is-scrolled .nav-contact{padding:12px 20px}@media(max-width:760px){.header.is-scrolled{height:58px}.header.is-scrolled .brand-combined{width:105px;max-height:43px}.header.is-scrolled nav{font-size:12px}}@media(prefers-reduced-motion:reduce){.header,.header .brand-combined{transition:none}}

/* Repeating diagonal OTR signature. */
footer{flex-wrap:wrap;overflow:hidden}footer .footer-pattern{display:block;position:relative;flex:0 0 100%;width:100%;height:180px;overflow:hidden;margin:0 0 35px}footer .footer-pattern>img{display:none}footer .footer-pattern::before{content:"";position:absolute;inset:-160px -80px;background-image:url('assets/otr-wordmark-black.png');background-repeat:repeat;background-size:180px auto;transform:rotate(-12deg);filter:invert(1);opacity:.75;transition:opacity .2s}footer .footer-pattern:hover::before{opacity:1}footer>div{width:100%}@media(max-width:760px){footer .footer-pattern{height:125px}footer .footer-pattern::before{background-size:130px auto}}

/* Full-bleed, alternating OTR rows. */
footer{padding-top:0}footer .footer-pattern{width:calc(100% + 12vw);max-width:none;margin:0 -6vw;height:260px;display:block}footer .footer-pattern::before{display:none}footer .footer-pattern-rows{position:absolute;width:140%;left:-20%;top:-140px;transform:rotate(-12deg);opacity:.28;pointer-events:none}footer .footer-logo-row{display:block;height:90px;background:url('assets/otr-wordmark-black.png') repeat-x 0 center / 180px 90px;filter:invert(1);animation:footer-logo-flow 18s linear infinite}footer .footer-logo-row:nth-child(even){animation-direction:reverse}footer>div{margin-top:0}footer .footer-pattern:hover{opacity:1}@keyframes footer-logo-flow{to{background-position-x:360px}}@media(max-width:760px){footer .footer-pattern{height:210px}.footer-logo-row{height:75px}}@media(prefers-reduced-motion:reduce){footer .footer-logo-row{animation:none}}

/* Full footer pattern with a centred information panel. */
footer{position:relative;padding:0;min-height:360px;display:grid;place-items:center;isolation:isolate}footer .footer-pattern{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-1}footer .footer-pattern-rows{top:-140px;width:150%;left:-25%}footer>div{position:relative;display:flex;justify-content:center;align-items:center;gap:28px;width:max-content;max-width:88%;padding:27px 35px;margin:0;border:1px solid #493434;background:rgba(15,12,12,.94);box-shadow:0 12px 35px #0005}footer>div span{margin:0;width:auto}footer>div a{white-space:nowrap}@media(max-width:760px){footer{min-height:340px}footer .footer-pattern{height:100%}footer>div{width:82%;max-width:82%;padding:25px 18px;gap:20px;font-size:10px}footer>div span{width:100%;text-align:center}}

/* Overscan the rotated rows so every footer corner stays covered. */
footer .footer-pattern-rows{width:200%;left:-50%;top:50%;transform:translateY(-50%) rotate(-12deg)}footer .footer-logo-row{height:90px}footer .footer-pattern-rows::before,footer .footer-pattern-rows::after{content:"";display:block;height:180px;background:url('assets/otr-wordmark-black.png') repeat 0 0 / 180px 90px;filter:invert(1);animation:footer-logo-flow 18s linear infinite}footer .footer-pattern-rows::after{animation-direction:reverse}

footer .footer-pattern-rows::before,footer .footer-pattern-rows::after{display:none}

@media(max-width:760px){.film-stage .home-showreel{aspect-ratio:9/16;width:100%;height:auto;object-fit:contain}}

.header .brand-cage{display:none;filter:none}.header.is-scrolled .brand-combined{display:none}.header.is-scrolled .brand-cage{display:block;width:46px;height:46px;object-fit:contain;filter:none}@media(max-width:760px){.header.is-scrolled .brand-cage{width:40px;height:40px}}

/* Liquid dissolve between the full wordmark and compact cage. */
.header .brand{position:relative;display:flex;align-items:center;min-height:50px;min-width:170px}.header .brand-combined{display:block;transform-origin:left center;animation:otr-reform .55s ease-out both}.header.is-scrolled .brand-combined{display:block;position:absolute;left:0;width:170px;max-height:70px;animation:otr-liquidate .65s ease-in both;pointer-events:none}.header .brand-cage{position:absolute;left:0;opacity:0;transform:scale(.8);transition:opacity .3s ease .2s,transform .4s ease .15s}.header.is-scrolled .brand-cage{opacity:1;transform:scale(1)}@keyframes otr-liquidate{0%{opacity:1;filter:invert(1) blur(0);transform:scale(1) skewX(0)}35%{opacity:.9;filter:invert(1) blur(1px);transform:scale(1.1,.8) skewX(-12deg)}70%{opacity:.4;filter:invert(1) blur(5px);transform:translateX(-8px) scale(.65,.35) skewX(24deg)}100%{opacity:0;filter:invert(1) blur(10px);transform:translateX(-12px) scale(.2,.05) skewX(-20deg)}}@keyframes otr-reform{0%{opacity:0;filter:invert(1) blur(8px);transform:scale(.4,.2) skewX(-18deg)}100%{opacity:1;filter:invert(1) blur(0);transform:scale(1) skewX(0)}}@media(prefers-reduced-motion:reduce){.header .brand-combined{animation:none}.header.is-scrolled .brand-combined{opacity:0;animation:none}.header .brand-cage{transition:none}}

/* Show the compact cage only after the full mark dissolves. */
.header .brand-cage{transition:none}.header.is-scrolled .brand-cage{animation:cage-arrive .2s ease-out .6s both}@keyframes cage-arrive{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.header.is-scrolled .brand-cage{animation:none}}

/* Cage-only branding at every scroll position. */
.header .brand-combined,.header.is-scrolled .brand-combined{display:none;animation:none}.header .brand-cage,.header.is-scrolled .brand-cage{display:block;position:static;width:58px;height:58px;opacity:1;transform:none;filter:none;animation:none;transition:none}.header .brand{min-width:58px}.header.is-scrolled .brand-cage{width:46px;height:46px}@media(max-width:760px){.header .brand-cage{width:50px;height:50px}.header.is-scrolled .brand-cage{width:40px;height:40px}}

.partner-track{touch-action:pan-y;scroll-behavior:auto;overscroll-behavior-x:contain;overflow-anchor:none}.partner-hint{margin-top:20px;font-size:11px;color:var(--muted)}

.partner-track{display:block;overflow:hidden;touch-action:pan-y;position:relative}.partner-strip{display:flex;gap:20px;width:max-content;will-change:transform;transform:translate3d(0,0,0)}.partner-track .partner-strip .partner-card{flex:0 0 var(--partner-width);width:var(--partner-width);box-sizing:border-box}.partner-strip .partner-card a{-webkit-user-drag:none}

@keyframes partner-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--partner-cycle),0,0)}}

@media(max-width:760px){.partner-hint{display:none}}


@media(max-width:760px){.partner-track{cursor:default;touch-action:pan-y}.partner-track .partner-card>a{cursor:pointer}}

/* Larger cage mark, always preserving its source proportions. */
.header .brand-cage,.header.is-scrolled .brand-cage{width:auto;max-width:none;object-fit:contain;flex-shrink:0}.header .brand-cage{height:76px}.header.is-scrolled .brand-cage{height:56px}.header .brand{min-width:72px}@media(max-width:760px){.header .brand-cage{height:66px;width:auto}.header.is-scrolled .brand-cage{height:50px;width:auto}}

.testimonials{background:#0c0c0c;border-top:1px solid var(--line)}.testimonials h2{margin:20px 0 40px;font-size:clamp(27px,3.3vw,50px)}.instagram-comments{display:grid;grid-template-columns:1fr 1fr;gap:18px}.instagram-comment{display:flex;gap:15px;align-items:flex-start;background:#202226;border:1px solid #303236;padding:28px;min-width:0;border-radius:8px;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;font-stretch:normal}.comment-avatar{width:40px;height:40px;flex:0 0 40px;padding:3px;border-radius:50%;background:linear-gradient(35deg,#ffcb54,#f54178,#b22ae8);display:grid;place-items:center}.comment-avatar svg{width:30px;height:30px;background:#34363a;color:#b9bbc0;border:2px solid #202226;border-radius:50%;padding:3px}.comment-body{flex:1;min-width:0}.comment-body p{margin:0;color:#f1f2f3;font-size:14px;line-height:1.55;font-weight:400;font-style:normal}.comment-body strong{font-weight:700;margin-right:5px}.comment-mention{color:#839bff}.comment-meta{display:block;font-size:11px;color:#a2a6af;margin-top:12px;line-height:1.5}.comment-heart{color:#fb3456;width:15px;height:15px;flex:0 0 15px;margin-top:7px}.testimonial-note{margin:24px 0 0;font-size:10px;color:var(--muted);line-height:1.7}@media(max-width:760px){.instagram-comments{grid-template-columns:1fr}.instagram-comment{padding:22px 18px;gap:12px}.comment-body p{font-size:13px}}

.comment-avatar{padding:0;background:none;overflow:hidden}.comment-avatar img{display:block;width:40px;height:40px;object-fit:cover;border-radius:50%}

/* Desktop-only focus effect for Instagram comments. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){.instagram-comment{position:relative;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;transform-origin:center}.instagram-comments:has(.instagram-comment:hover) .instagram-comment{transform:scale(.96);opacity:.7}.instagram-comments .instagram-comment:hover{transform:scale(1.045);opacity:1;z-index:2;box-shadow:0 15px 35px #0007}}@media(prefers-reduced-motion:reduce){.instagram-comment{transition:none}}

@media(min-width:761px) and (hover:hover) and (pointer:fine){.instagram-comments:has(.instagram-comment:hover) .instagram-comment:hover{transform:scale(1.045);opacity:1;z-index:2;box-shadow:0 15px 35px #0007}}


footer>div .footer-credit{font-size:9px;font-weight:400;opacity:.5;text-decoration:none}footer>div .footer-credit:hover{opacity:.8}@media(max-width:760px){footer>div .footer-credit{flex-basis:100%;text-align:center}}

.otr-ig-feed{margin:70px 0 90px}.otr-ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.otr-ig-card{min-width:0;border:1px solid var(--line);background:#171717}.otr-ig-images{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--accent) #171717}.otr-ig-images>a{flex:0 0 100%;scroll-snap-align:start;display:block}.otr-ig-images img{display:block;width:100%;height:400px;object-fit:contain;background:#0a0a0a}.otr-ig-copy{padding:22px}.otr-ig-copy>span{font-size:9px;color:var(--accent-text)}.otr-ig-copy p{font-size:12px;line-height:1.8}.otr-ig-copy>a{font-size:11px;text-decoration:underline}.otr-selected-title{margin-bottom:35px}@media(max-width:1000px){.otr-ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.otr-ig-grid{grid-template-columns:1fr}.otr-ig-images img{height:65svh}}

/* Homepage Behind the Lens: supplied monochrome texture. */
.home #about.about {
  background-color: #191716;
  background-image: linear-gradient(rgba(12, 11, 11, .84), rgba(12, 11, 11, .84)), url('assets/behind-lens-texture.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Portfolio context stays beside each image, including on small screens. */
.portfolio-intro{max-width:760px;font-size:13px;line-height:1.8;margin:0 0 36px;color:var(--muted,#bbb)}
.project-caption .project-description{font-size:12px;line-height:1.8;margin:14px 0 7px;letter-spacing:0;text-transform:none}
.project-caption .project-credit{font-size:10px;line-height:1.8;letter-spacing:0;text-transform:none;opacity:.8}
.project-caption>div{min-width:0}
@media(max-width:760px){.portfolio-intro{font-size:12px}.project-caption .project-description{font-size:11px}}