/* Mobile layer: loaded after each page's inline styles, so it refines the existing
   responsive rules rather than replacing them. Modeled on the Industry sites:
   a solid, compact header, a full-screen menu with a contact bar along the bottom,
   shorter heroes and thumb-sized tap targets. */

.mfoot{display:none}

/* ---------------------------------------------------------------- collapsed nav (tablet + phone) */
@media(max-width:1180px){
.burger{font-size:0!important;width:44px;height:44px;padding:0;margin-right:-8px;position:relative;flex:none;-webkit-tap-highlight-color:transparent}
.burger::before,.burger::after,.burger[aria-expanded="true"]::after{content:"";position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;font-size:0;line-height:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.burger::before{top:15px;box-shadow:0 7px 0 currentColor}
.burger::after{top:29px}
.burger[aria-expanded="true"]::before{top:21px;transform:rotate(45deg);box-shadow:0 0 0 transparent}
.burger[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}

.nav .menu{overscroll-behavior:contain}
.nav .menu.open>a{animation:mnav-in .45s cubic-bezier(.2,.8,.2,1) both}
.nav .menu.open>a:nth-of-type(2){animation-delay:.03s}
.nav .menu.open>a:nth-of-type(3){animation-delay:.06s}
.nav .menu.open>a:nth-of-type(4){animation-delay:.09s}
.nav .menu.open>a:nth-of-type(5){animation-delay:.12s}
.nav .menu.open>a:nth-of-type(6){animation-delay:.15s}
.nav .menu.open>a:nth-of-type(7){animation-delay:.18s}

/* Contact bar: the investor CTA hidden from the collapsed header, plus email. */
#menu .mfoot{display:grid;gap:14px;margin-top:14px;padding:18px 20px;border-radius:8px;background:var(--pine);color:var(--snow);animation:mnav-in .45s .2s cubic-bezier(.2,.8,.2,1) both}
#menu .mfoot a{display:inline-flex;padding:0;border:0;color:var(--snow);text-shadow:none;border-radius:0}
#menu .mfoot .btn{justify-content:center;border-radius:999px;padding:16px 22px;font-size:15px;background:var(--ember);border:1.5px solid var(--ember);color:var(--snow)}
#menu .mfoot .row2{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#menu .mfoot .row2 a{padding-block:6px}
#menu .mfoot .row2 span{opacity:.6}
}

@keyframes mnav-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Highlighted words in the "Steps to everything" boxes were picking up the small
   caption style; keep them part of the headline. */
.punch .p b span{display:inline;font-size:inherit;margin:0;max-width:none;opacity:1}

/* ---------------------------------------------------------------- stat band (tablet + phone) */
/* Five stats as one compact panel, 3 across then 2, with hairline dividers,
   instead of a tall two-column list. */
@media(max-width:900px){
section.frost:has(>.wrap>.stats.s5){padding-block:22px!important}
.stats.s5{grid-template-columns:repeat(6,1fr);gap:0;padding-block:0;background:rgba(245,243,238,.55);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stats.s5>.stat{grid-column:span 2;padding:16px 6px 14px;text-align:center;border-left:1px solid var(--line);min-width:0}
.stats.s5>.stat:nth-child(n+4){grid-column:span 3;border-top:1px solid var(--line)}
.stats.s5>.stat:nth-child(1),.stats.s5>.stat:nth-child(4){border-left:0}
.stats.s5 .stat b{font-size:clamp(24px,7.4vw,48px);min-width:0;white-space:nowrap}
.stats.s5 .stat span{font-size:9.5px;letter-spacing:.12em;margin-top:6px}
}

/* ---------------------------------------------------------------- phones */
@media(max-width:700px){
/* compact header + smaller lockup */
.nav .wrap{height:64px;gap:12px}
.nav .lock{gap:8px!important}
.nav .lock svg{width:44px;height:22px}
.nav .lock>span>span:first-child{font-size:27px!important}
.nav .lock>span>span:last-child{font-size:8px!important}

/* full-screen menu */
.nav .menu{counter-reset:mnav;height:calc(100vh - 64px - env(safe-area-inset-top,0px));height:calc(100dvh - 64px - env(safe-area-inset-top,0px));max-height:none!important;padding:8px clamp(16px,4vw,48px) 0;box-shadow:none;border-bottom:0}
.nav .menu>a,.nav .menu>a.lit,body.hero-page .nav:not(.solid) .menu.open>a{counter-increment:mnav;display:flex;align-items:center;gap:16px;padding:13px 2px;font-family:var(--disp);font-weight:800;font-size:clamp(30px,9vw,40px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.nav .menu>a::before{content:counter(mnav,decimal-leading-zero);font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;opacity:.5;min-width:2.4ch}
.nav .menu>a::after{content:"→";margin-left:auto;font-family:var(--sans);font-weight:500;font-size:20px;opacity:.3;transition:transform .2s,opacity .2s}
.nav .menu>a:active::after,.nav .menu>a[aria-current]::after{opacity:1;transform:translateX(4px)}
.nav .menu>a:last-of-type{border-bottom:1px solid var(--line)!important}
#menu .mfoot{position:sticky;bottom:0;margin:auto calc(-1*clamp(16px,4vw,48px)) 0;padding:18px clamp(16px,4vw,48px) calc(18px + env(safe-area-inset-bottom,0px));border-radius:0}
html.mnav-open,html.mnav-open body{overflow:hidden}

/* hero: room for the slide dots, no scroll cue over the buttons */
.hero{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.hero .cue{display:none}
.hero .dots{left:clamp(16px,4vw,48px);right:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.hero .dots b{width:22px}
.hero .wrap>div[style*="flex"]>.btn{flex:1 1 auto;justify-content:center;padding:15px 20px;font-size:14.5px}

/* buttons and links big enough for a thumb */
.btn{min-height:46px}
/* footer: condensed to roughly one screen; Company and Work side by side, and the
   repeated office row under the wordmark dropped (the Offices column already lists them) */
footer{padding-block:40px calc(26px + env(safe-area-inset-bottom,0px))}
footer .cols{grid-template-columns:1fr 1fr;gap:26px 20px}
footer .cols>div:first-child,footer .cols>div:last-child{grid-column:1/-1}
footer .cols>div:first-child p{margin-top:12px!important}
footer h4{margin-bottom:8px}
footer li{margin-bottom:0}
footer li a{display:inline-block;padding:5px 0}
footer .cols>div:last-child li[style]{margin-top:6px!important}
footer .bigmark{white-space:normal;font-size:clamp(34px,12vw,80px);line-height:.88;margin:22px 0 0}
footer .offices{display:none}
footer .legal{flex-direction:column;gap:6px;margin-top:18px;padding-top:16px}

/* "Steps to everything" boxes: size to their text once they stack */
.punch{gap:10px}
.punch .p{min-height:0;padding:24px 22px}

/* community photos: fade in without sliding, so the grid doesn't jump while scrolling */
.js .mosaic .card.rv{transform:none;transition-delay:0s}

/* the pinned "standard" panels stack on phones; keep the label readable above them */
.pin>.wrap{position:static!important;padding-top:28px}
.pin>.wrap .num{color:var(--pine)!important}
.pin .panel{height:auto;min-height:min(64vh,520px);min-height:min(64svh,520px)}

/* explore list: keep the photo and the list on screen together */
.explore{gap:18px}
.explore .stage{min-height:240px}
.explore li{padding:13px 0}

/* stat rows: let an odd last stat span the row instead of sitting alone */

/* inline multi-column rows (careers listings, news items) */
.riff2{grid-template-columns:1fr!important;gap:10px;align-items:start!important}
.riff2 .btn{justify-self:start}
.news>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
.news .card{max-width:320px}

/* track record map: details panel sits below the map */
.mapinfo{min-height:0;scroll-margin-top:84px}
.track-card .im{min-height:240px}
.stack .card{top:calc(76px + env(safe-area-inset-top,0px))}

/* forms: 16px inputs stop iOS from zooming in on focus */
input,select,textarea{font-size:16px}
form .btn{width:100%;justify-content:center}

h1,h2,h3,.disp{overflow-wrap:break-word}
.tbl{-webkit-overflow-scrolling:touch}
}

@media(max-width:520px){
.mosaic{grid-auto-rows:150px;gap:10px}
.row img{height:clamp(170px,48vw,220px)}
.pin .panel div{left:20px;right:20px;bottom:20px}
.pin .panel .k{left:20px;top:18px}
.vert div{padding:22px}
.track-card .tx{padding:22px}
}

@media(max-width:360px){
.nav .lock>span>span:first-child{font-size:23px!important}
.nav .lock svg{width:38px;height:19px}
footer .lock>span>span:first-child{font-size:34px!important}
}

/* touch screens: no sticky hover zooms, a quick press state instead */
@media(hover:none){
a,button{-webkit-tap-highlight-color:transparent}
.card:hover img,.vert:hover img,.strip>figure:hover img{transform:none}
.card:active,.vert:active{opacity:.92}
.btn:active{transform:scale(.97)}
}