/* Mobile burger + menu for service & case pages — mirrors the home page nav fix. Loaded last in <head>. */
.burger{display:none;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;cursor:pointer;position:relative;color:var(--paper)}
.burger span{position:absolute;left:10px;right:10px;top:21px;height:1.5px;background:currentColor}
.burger span:nth-child(1){translate:0 -6px}.burger span:nth-child(3){translate:0 6px}
.burger:hover{color:var(--amber)}
.mmenu{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.55);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.mmenu.is-open{opacity:1;pointer-events:auto;transform:none}
.mmenu__head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.14)}
.mmenu__head .burger{display:block}
.mmenu__head .burger span{transition:rotate 240ms cubic-bezier(.6,0,.4,1),translate 200ms cubic-bezier(.4,0,.2,1) 220ms,opacity 160ms ease 220ms,scale 200ms cubic-bezier(.4,0,.2,1) 220ms}
.mmenu.is-x .mmenu__head .burger span{transition:translate 200ms cubic-bezier(.4,0,.2,1),opacity 160ms ease,scale 200ms cubic-bezier(.4,0,.2,1),rotate 300ms cubic-bezier(.3,1.5,.5,1) 200ms}
.mmenu.is-x .mmenu__head .burger span:nth-child(1){translate:0 0;rotate:45deg}
.mmenu.is-x .mmenu__head .burger span:nth-child(2){opacity:0;scale:0 1}
.mmenu.is-x .mmenu__head .burger span:nth-child(3){translate:0 0;rotate:-45deg}
.mmenu__nav{flex:1;overflow-y:auto;padding:12px 20px 24px;display:flex;flex-direction:column}
.mmenu__nav ul{list-style:none;margin:0;padding:0}
.mmenu__item{border-bottom:1px solid rgba(255,255,255,.1)}
.mmenu__item>a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--font-display);font-size:26px;line-height:1;text-transform:uppercase;color:var(--paper);text-decoration:none}
.mmenu__item>a small{font-family:var(--font-accent);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
.mmenu__sub{display:flex;flex-direction:column;padding:0 0 18px}
.mmenu__sub a{display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-accent);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);text-decoration:none}
.mmenu__sub a::before{content:"//";color:var(--amber)}
.mmenu__sub a.is-current{color:var(--paper)}
.mmenu__item>a:hover,.mmenu__sub a:hover{color:var(--amber)}
.mmenu__foot{padding:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:14px}
.mmenu__cta{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;background:var(--amber);color:var(--ink);font-family:var(--font-accent);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.mmenu__cta:hover{color:var(--ink);background:var(--paper)}
.mmenu__cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none}
body.menu-open{overflow:hidden}
.hero__logo,.topnav__logo{flex-shrink:0}
.hero__contact,.topnav__contact{white-space:nowrap;flex-shrink:0}
@media (min-width:721px) and (max-width:1100px){
.hero__nav{padding:22px 32px}
.topnav{padding:14px 32px}
.hero__logo{height:22px}
.topnav__logo{height:20px}
.hero__nav-right,.topnav__right{gap:20px}
.hero__links,.topnav__links{gap:18px}
.hero__contact,.topnav__contact{padding:10px 16px;gap:8px}
}
@media (max-width:720px){
.burger{display:block}
.hero__contact,.topnav__contact,.hero__links,.topnav__links{display:none}
.hero__nav{padding:14px 20px}
.topnav{padding:10px 20px}
.hero__logo,.topnav__logo,.mmenu .topnav__logo{height:18px}
.hero__nav-right,.topnav__right{gap:0}
}

/* Mobile video blocks: size to the video instead of a 100vh stage (services .reel), tighten the gap above case films. */
@media (max-width:1100px){
.reel{height:auto;min-height:0;padding-top:72px}
.reel__media{position:relative;inset:auto}
.reel__media iframe{width:100%;max-height:none}
.reel__blend{display:none}
}
@media (max-width:720px){
.reel{padding-top:64px}
.reel__label{top:24px}
.kicker + .film{margin-top:0}
.kicker:has(+ .film){padding-bottom:40px}
}

/* Mobile storyboard: sheet bleeds edge-to-edge (full screen width) so frames read larger. */
@media (max-width:720px){
.board__sheet{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.board__sheet img{width:100%;max-width:none;border-left:0;border-right:0}
}

/* Jugabet sound block on mobile: keep the waveform as a crisp band behind the heading instead of a stretched, blurred cover. */
@media (max-width:720px){
.sound .concept__spacer{display:none}
.sound__bg{background-size:220% auto !important;background-position:center 22% !important;background-repeat:no-repeat !important;opacity:.4}
.sound__scrim{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 8%,rgba(0,0,0,.2) 34%,#000 52%) !important}
.sound .concept__body{margin-top:24px}
}

/* Betrix vehicle sketch on mobile + tablet: tuck up toward the storyboard (no overlap) and fade in/out of black. */
@media (max-width:980px){
.board:has(+ .vehicle){border-bottom:0}
.vehicle picture{display:block;position:relative;margin-top:-56px}
.vehicle picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,#000 100%)}
}

/* Betrix hero on mobile: shift the crop right so both riders are in frame. */
@media (max-width:720px){
.hero__media img[src*="betrix/hero"]{transform:translate(-58%,-50%) !important}
}

/* Case closing line: allow wrapping on mobile (desktop keeps it on one line). */
@media (max-width:720px){.kicker p{white-space:normal;text-wrap:balance}}
.m-br{display:none}
@media (max-width:720px){.m-br{display:inline}}
/* Betrix hero on tablet: smaller shift than mobile. */
@media (min-width:721px) and (max-width:1100px){.hero__media img[src*="betrix/hero"]{transform:translate(-57%,-50%) !important}}
/* Collage blocks (tablet + mobile): copy drops below the sheet, so drop the scrim that was dimming both image and text. */
@media (max-width:980px){.collage__scrim{display:none}.collage__copy{position:relative !important;z-index:5}}
/* 966 hero: shift crop so the driver's face is in frame on tablet + mobile. */
@media (min-width:721px) and (max-width:1100px){.hero__media img[src*="966/hero"]{transform:translate(-64%,-50%) !important}}
@media (max-width:720px){.hero__media img[src*="966/hero"]{transform:translate(-66%,-50%) !important}}
/* CGI/VFX hero on mobile: shift crop so the hand sits more in frame. */
@media (max-width:1100px){.hero__photo[src*="cgi/hero-hand"]{object-position:68% 38% !important}}
/* CGI/VFX rocket render on mobile: centre the rocket in the crop. */
@media (max-width:720px){.scope__media img[src*="characters-worlds"]{object-position:88% 50% !important}}
@media (max-width:720px){.scope__media img[src*="integration-post"]{object-position:56% 50% !important}}