/* Neimoid responsive layer: loaded on every page after the page styles */
body{overflow-x:clip}
img,video{max-width:100%}

/* ---------- Mobile nav (burger + full screen menu) ---------- */
.nm-burger{display:none;position:relative;z-index:2;width:48px;height:48px;border:0;border-radius:999px;background:rgba(255,255,255,0.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:0}
.nm-burger i{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.nm-nav.on-light .nm-burger{background:rgba(10,10,10,0.07)}
body.nm-menu-open .nm-burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nm-menu-open .nm-burger i:nth-child(2){opacity:0}
body.nm-menu-open .nm-burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nm-mob{position:fixed;inset:0;z-index:790;background:rgba(10,10,10,0.82);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);display:flex;flex-direction:column;justify-content:space-between;padding:120px 24px 36px 24px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;font-family:Montserrat,system-ui,sans-serif}
body.nm-menu-open .nm-mob{opacity:1;visibility:visible;transition:opacity .35s ease}
body.nm-menu-open{overflow:hidden}
.nm-mob nav{display:flex;flex-direction:column;gap:6px}
.nm-mob nav a{color:#FFFFFF !important;font-size:clamp(34px,10vw,52px);font-weight:800;letter-spacing:-0.045em;line-height:1.12;text-decoration:none;transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s,color .2s}
.nm-mob nav a:hover{color:#00B5B8 !important}
body.nm-menu-open .nm-mob nav a{transform:none;opacity:1}
.nm-mob .nm-mob-cta{display:flex;align-items:center;justify-content:center;height:60px;border-radius:999px;background:#FFFFFF;color:#0A0A0A !important;font-size:18px;font-weight:700;text-decoration:none}
body.nm-menu-open .nm-nav{color:#FFFFFF !important}
body.nm-menu-open .nm-nav .logo-on-light{display:none !important}
body.nm-menu-open .nm-nav .logo-on-dark{display:block !important}
body.nm-menu-open .nm-nav .nm-burger{background:rgba(255,255,255,0.14)}

@media (max-width:1100px){
  .nm-nav{padding:0 20px !important;height:84px !important}
  .nm-nav>div:not(.nm-blur){display:none !important}
  .nm-nav>a:first-of-type{width:auto !important}
  .nm-burger{display:inline-flex}
  .nm-nav::before{height:110px !important}
  .nm-nav .nm-blur{height:96px !important}
  .nm-nav::after{height:100px !important}
}

/* ---------- Home page ---------- */
@media (max-width:1100px){
  #top>div[style*="bottom"]{left:24px !important;right:24px !important}
  #approach,#nm-logos,#services,#book,#contact{padding-left:24px !important;padding-right:24px !important}
  #work>div{padding-left:24px !important;padding-right:24px !important}
  footer{padding-left:24px !important;padding-right:24px !important}
  #work [style*="repeat(12"]>.bento{grid-column:span 6 !important}
  #work [style*="repeat(12"]>.bento:last-child{grid-column:1 / -1 !important}
  #book>div[style*="repeat(12"]{grid-template-columns:1fr !important;row-gap:48px}
  #book>div[style*="repeat(12"]>*{grid-column:1 / -1 !important}
}
@media (max-width:900px){
  #top{min-height:560px !important;height:88vh !important;height:88svh !important}
  #top .hero-media{object-position:58% 30%}
  #top>div[style*="bottom"]{bottom:28px !important}
  #top h1{font-size:27vw !important}
  #top p{font-size:clamp(20px,5.4vw,30px) !important;margin-top:12px !important}

  #approach{padding-top:110px !important;padding-bottom:80px !important}
  #approach h2{font-size:clamp(46px,12.5vw,88px) !important}
  #nm-trail-zone{margin-top:70px !important}
  #nm-trail-zone>div[style*="repeat(12"]{display:flex !important;flex-direction:column;gap:44px}
  #nm-reveal{font-size:clamp(28px,7.6vw,44px) !important}
  #approach .arrow-link{font-size:20px !important}

  #nm-logos{padding-top:20px !important;padding-bottom:100px !important}
  #nm-logos>div[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  #nm-logos .logo-tile{height:120px !important}
  #nm-logos .logo-tile img{max-width:68% !important;height:auto !important;max-height:44px}

  #services{padding-top:60px !important;padding-bottom:110px !important}
  #nm-svc-h{font-size:clamp(64px,19vw,110px) !important}
  #services>p{font-size:22px !important;margin:20px 0 40px 0 !important}
  #services .svc-card{padding:30px 24px !important;min-height:300px !important;border-radius:18px !important}
  #services .svc-card span[style*="font-size: 72px"]{font-size:44px !important}
  #services .svc-card div[style*="font-size: clamp(90px"]{font-size:clamp(40px,11.5vw,72px) !important}
  #services .svc-card div[style*="font-size: 32px"]{font-size:19px !important;margin-top:12px !important}

  #work{padding-bottom:110px !important}
  #work>div{padding-top:60px !important}
  #work>div>div[style*="justify-content: space-between"]{flex-direction:column;align-items:flex-start !important;gap:16px !important;margin-bottom:36px !important}
  #nm-work-h{font-size:clamp(64px,19vw,110px) !important}
  #work [style*="repeat(12"]{grid-template-columns:1fr !important;gap:14px !important}
  #work [style*="repeat(12"]>.bento{grid-column:1 / -1 !important;height:440px !important}
  #work .bento>div[style*="bottom: 30px"]{left:20px !important;right:20px !important;bottom:20px !important}

  #book{padding-top:20px !important;padding-bottom:110px !important}
  #book h2{font-size:clamp(60px,17vw,100px) !important}
  #book p{font-size:24px !important}

  #contact{grid-template-columns:1fr !important;padding-bottom:110px !important}
  #contact>a{height:auto !important;min-height:300px;padding:32px 26px !important;gap:40px}
  #contact>a span[style*="font-size: clamp(64px"]{font-size:clamp(40px,11vw,64px) !important}
  #contact>a span[style*="font-size: 28px"]{font-size:22px !important}

  footer{padding-top:60px !important}
  footer>div:first-child[style*="font-size: clamp(200px"]{font-size:30vw !important}
  footer>div[style*="repeat(12"]{grid-template-columns:1fr !important;row-gap:44px;margin-top:70px !important}
  footer>div[style*="repeat(12"]>*{grid-column:1 / -1 !important}
  footer .f-big{font-size:26px !important}
  footer label[for="nm-news"]{font-size:26px !important}
  footer>div[style*="margin-top: 96px"]{margin-top:56px !important}

  /* portfolio lightbox */
  .lb-panel{width:100vw !important;height:100vh !important;height:100dvh !important;border-radius:0 !important}
  .lb-bar{padding:14px 14px 14px 20px !important}
  .lb-body{padding:24px 20px 40px 20px !important}
  .lb .tab-panel{grid-template-columns:1fr !important;row-gap:28px}
  .lb .tab-panel>*{grid-column:1 / -1 !important;position:relative !important;top:auto !important}
  .lb .tab-panel span[style*="font-size: 96px"]{font-size:56px !important}
  .lb .tab-panel h3{font-size:36px !important}
  .lb .tab-panel [style*="repeat(3"],.lb .tab-panel [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}
  .lb .tab-panel [style*="aspect-ratio: 16 / 7"]{aspect-ratio:16/10 !important}
  .lb .tab-panel span[style*="font-size: 52px"]{font-size:34px !important}

  /* floating showreel */
  .mini{width:168px !important;height:96px !important;right:12px !important;bottom:12px !important}
}
@media (max-width:520px){
  .lb .tab-panel [style*="repeat(3"]{grid-template-columns:1fr 1fr !important}
  .lb .tab-panel [style*="repeat(4"]{grid-template-columns:1fr 1fr !important}
  .lb .lb-bar>span,.lb .lb-bar>div:first-child{font-size:11px !important}
  #work [style*="repeat(12"]>.bento{height:400px !important}
}
@media (max-width:380px){
  .lb .tab-panel [style*="repeat(3"]{grid-template-columns:1fr !important}
}

/* ---------- Shared tweaks for inner pages ---------- */
@media (max-width:1100px) and (min-width:901px){
  header,section,main{padding-left:32px !important;padding-right:32px !important}
}
@media (max-width:900px){
  .cn-talk>div{font-size:22vw !important;white-space:normal !important}
  table{max-width:100%}
}
@media (max-width:900px){
  #approach h2{font-size:clamp(40px,11vw,88px) !important}
  section h2.wl-h2,.wl-faq{grid-column:1 / -1 !important}
  .pv-body,.pv-num{min-width:0}
  .pv-sec>*{min-width:0}
}
@media (max-width:900px){
  header h1:not(#top h1){font-size:clamp(52px,15.5vw,120px) !important;word-break:normal;overflow-wrap:normal}
  #top h1{font-size:27vw !important}
  section div[style*="repeat(12"]:not(#work div):not(#nm-trail-zone div){grid-template-columns:1fr !important;row-gap:24px}
  section div[style*="repeat(12"]:not(#work div):not(#nm-trail-zone div)>*{grid-column:1 / -1 !important}
  .cn-h2,.wl-h2,.cr-sheet h2,.pv-sheet h2[style*="clamp"]{font-size:clamp(44px,12.5vw,80px) !important}
  footer>div:first-child[style*="font-size: clamp(200px"]{font-size:26vw !important}
}
body:has(#nm-lb-wrap:not([hidden])) .nm-nav,body:has(#nm-lb-wrap:not([hidden])) .nm-mini,body:has(.cal-frame.expanded) .nm-nav{visibility:hidden}
@media (max-width:900px){.lb-bar{position:sticky;top:0;z-index:3}}
@media (max-width:900px){
  #top .hero-media{object-position:50% 30% !important}
  .mini .mini-label{height:30px !important;padding:0 12px !important;font-size:11px !important;gap:6px !important;top:auto !important;bottom:8px !important;left:8px !important;transform:none !important}
  .mini .mini-label svg{width:10px;height:10px}
}
/* Our Work cover stacks on tablet and phone */
@media (max-width:1100px){
  #work .bento{height:600px !important}
  #work .bento .stack{top:24px !important;bottom:112px !important}
  #work .bento .st{height:94% !important;max-width:72%}
}
@media (max-width:900px){
  #work [style*="repeat(12"]>.bento{height:min(640px,150vw) !important}
  #work .bento .stack{top:20px !important;bottom:104px !important}
  #work .bento .st{height:90% !important;max-width:70%}
}
@media (hover:none){
  #work .bento .st{transform:translateX(calc(var(--x) * .7)) rotate(calc(var(--r) * .8))}
  #work .bento .st1{transform:none}
}
/* final tune: hero centring and phone cover size */
@media (max-width:1100px){ #top .hero-media{object-position:45% 30% !important} }
@media (max-width:900px){
  #work .bento .st{height:80% !important;max-width:60% !important}
}
@media (max-width:900px) and (hover:none){
  #work .bento .st{transform:translateX(calc(var(--x) * .45)) rotate(calc(var(--r) * .6)) !important}
  #work .bento .st1{transform:none !important}
}
@media (max-width:900px){.mini .mini-label{top:50% !important;left:50% !important;bottom:auto !important;transform:translate(-50%,-50%) !important}}
/* footer newsletter fit on phones */
form[aria-label="Newsletter"]{min-width:0;max-width:100%}
.nl-box{min-width:0;max-width:100%;box-sizing:border-box}
.nl-box input{min-width:0;width:100%}
/* hero text readability on phones: soft frosted glass behind the copy only */
@media (max-width:900px){
  #top>div[style*="bottom"]{z-index:2}
  #top>div[style*="bottom"]::before{content:"";position:absolute;z-index:-1;left:-24px;right:-24px;top:-28px;bottom:-28px;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 30%,rgba(255,255,255,0.7) 100%);
    -webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%)}
}
/* hero copy glass, all screen sizes */
#top>div[style*="bottom"]{z-index:2}
#top>div[style*="bottom"]::before{content:"";position:absolute;z-index:-1;left:-48px;right:-48px;top:-40px;bottom:-48px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 35%,rgba(255,255,255,0.68) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%),linear-gradient(90deg,#000 0%,#000 55%,transparent 92%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0%,#000 30%),linear-gradient(90deg,#000 0%,#000 55%,transparent 92%);mask-composite:intersect}
@media (max-width:900px){#top>div[style*="bottom"]::before{left:-24px;right:-24px;top:-28px;bottom:-28px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%)}}
/* ---------- Careers: compact ticker + stacked tilted cards on mobile ---------- */
@media (max-width:900px){
  .cr-band{padding:28px 0 !important}
  .cr-track span{font-size:clamp(28px,8vw,44px) !important;gap:36px !important;padding-right:36px !important}
  .cr-track svg{width:40px;height:26px}
  .cr-values{height:auto !important}
  .cr-stick{position:relative !important;height:auto !important;overflow:visible !important;padding-bottom:40px !important}
  .cr-card{position:sticky !important;left:auto !important;bottom:auto !important;width:auto !important;height:auto !important;min-height:360px !important;
    margin:0 22px 34vh 22px !important;gap:36px;transition:none !important}
  .cr-card[data-vcard="0"]{top:110px;transform:rotate(-2.5deg) !important}
  .cr-card[data-vcard="1"]{top:124px;transform:rotate(2deg) !important}
  .cr-card[data-vcard="2"]{top:138px;transform:rotate(-1.5deg) !important}
  .cr-card[data-vcard="3"]{top:152px;transform:rotate(2.5deg) !important;margin-bottom:24px !important}
  .cr-card h3{font-size:clamp(32px,9vw,44px) !important}
  .cr-card p{font-size:18px !important}
}
/* ---------- Pricing: tab switcher on phones ---------- */
@media (max-width:900px){
  #plans>div:first-child{flex-direction:column;align-items:stretch !important;gap:16px !important}
  #plans>div:first-child>span{font-size:15px !important}
  .pr-toggle{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:22px !important;padding:5px !important;gap:4px}
  .pr-tab{height:auto !important;min-height:52px;padding:8px 6px !important;font-size:14px !important;line-height:1.15;border-radius:17px !important;white-space:normal;text-align:center}
}
/* ---------- Contact: clocks two per row on phones ---------- */
@media (max-width:900px){
  .cn-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;column-gap:18px !important;row-gap:52px !important}
  .cn-city{min-width:0;align-items:flex-start}
  .cn-city svg{width:100% !important;max-width:130px;height:auto !important;margin-bottom:22px !important}
  .cn-city>div:first-of-type{gap:10px !important}
  .cn-city>div:first-of-type>span:first-child{font-size:clamp(22px,6.4vw,30px) !important;white-space:nowrap}
  .cn-city .cn-dot{width:11px !important;height:11px !important}
  .cn-city>span{font-size:15px !important;margin-top:14px !important;line-height:1.35 !important}
}
/* inner page footers on phones: tighter spacing */
@media (max-width:900px){
  .cn-talk{padding-top:36px !important;padding-bottom:24px !important}
  footer.cn-foot{padding-top:28px !important}
  footer.cn-foot>div[style*="repeat(12"]{margin-top:0 !important;row-gap:36px !important}
  footer.cn-foot>div[style*="margin-top: 40px"]{margin-top:36px !important}
}