/* ui.css: multi-page additions (dropdown menus, photos, new page components). Loads after site.css and page.css. */
.xp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.xp .glass{padding:24px}
.xp h3{font:700 12.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin:0 0 14px}
.xp ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.xp a{text-decoration:none;color:var(--fg);font:600 16px/1.35 var(--body);padding:6px 0;display:block}
.xp a:hover{color:var(--hot)}
.legal p{color:#d3d4d9}
@media(max-width:1000px){.xp{grid-template-columns:1fr 1fr}}@media(max-width:700px){.xp{grid-template-columns:1fr}}

/* ---------- header: sub-menus ---------- */
.links{align-items:center;gap:2px}
.links>li{position:relative;display:flex;align-items:center}
.links>li>a[aria-current="page"],.links>li.cur>a{color:#fff;background:var(--glass-2)}
.car{width:24px;height:34px;margin-left:-10px;border:0;background:none;cursor:pointer;position:relative;border-radius:8px}
.car::before{content:"";position:absolute;left:7px;top:15px;border:5px solid transparent;border-top-color:var(--mute);transition:transform .2s}
.dd:hover>.car::before,.dd.open>.car::before{border-top-color:#fff;transform:translateY(3px) rotate(180deg)}
.mega{position:absolute;left:0;top:100%;padding-top:14px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:75}
.dd.rsc .mega{left:auto;right:0}
.dd:hover>.mega,.dd:focus-within>.mega,.dd.open>.mega{opacity:1;visibility:visible;transform:none}
.mg{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) 210px;gap:24px;padding:24px 26px;min-width:740px;border-radius:22px;background:rgba(14,14,17,.98);border:1px solid var(--line);box-shadow:0 30px 80px -20px #000}
.dd.rsc .mg{grid-template-columns:1fr 1fr;min-width:500px}
.mg h3{font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin:0 0 12px}
.mg ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mg a{display:block;padding:8px 10px;margin:0 -10px;border-radius:10px;color:var(--fg);font:600 15px/1.3 var(--body);text-decoration:none}
.mg a:hover,.mg a:focus-visible{background:var(--glass-2)}
.mg .all{color:var(--hot);margin-top:6px}
.mp{display:grid!important;align-content:end;gap:8px;padding:18px!important;margin:0!important;border-radius:16px!important;background:var(--grad);color:#1a0406!important;min-height:150px}
.mp b{font:800 19px/1.15 var(--display)}.mp span{font-size:14px;font-weight:600}.mp em{font-style:normal;font-weight:800;font-size:14px}
.mp:hover{filter:brightness(1.06);background:var(--grad)!important}
@media(max-width:1060px){
  .links{display:none}.burger{display:grid}
  .sheet{display:grid;gap:4px;position:absolute;left:0;right:0;top:70px;max-height:calc(100dvh - 70px);overflow:auto;padding:12px max(20px,env(safe-area-inset-left,0px)) 110px;background:rgba(9,9,11,.98);border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s,opacity .3s}
  .nav.open .sheet{transform:none;opacity:1;pointer-events:auto}
  .sheet>a,.sheet summary{text-decoration:none;font:700 24px/1 var(--display);padding:16px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
  .sheet summary::-webkit-details-marker{display:none}
  .sheet summary::after,.sheet details[open] summary::after{position:static;inset:auto;width:auto;height:auto;border:0;border-radius:0;background:none;transform:none;box-shadow:none;display:block;font:600 28px/1 var(--body);color:var(--hot)}
  .sheet summary::after{content:"+"}
  .sheet details[open] summary::after{content:"\2212"}
  .sheet .sbm{display:grid;padding:4px 0 12px 8px}
  .sheet .sbm h4{font:700 11.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin:12px 4px 4px}
  .sheet .sbm a{font:600 18px/1.2 var(--body);color:var(--mute);text-decoration:none;padding:10px 4px}
  .sheet .btn{margin-top:14px;font-size:16px;font-family:var(--body)}
}
@media(min-width:1061px){.sheet{display:none}}

/* ---------- photos ---------- */
.pic{position:relative;overflow:hidden;margin:0;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(217,33,42,.4),rgba(255,138,76,.18) 55%,#101013)}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pic::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,11,0) 50%,rgba(9,9,11,.5))}
.pic:hover img{transform:scale(1.04)}
.pic.noimg img{display:none}
.hero-pic{aspect-ratio:4/3;box-shadow:0 40px 100px -40px rgba(217,33,42,.6)}
.pimgw{padding-block:0 clamp(8px,2vw,24px)}.pimg{aspect-ratio:21/8}
.thumb{aspect-ratio:16/9;margin-bottom:14px;border-radius:16px;display:block}
.pgrid2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
.pgrid2 h1{font-size:clamp(38px,6vw,76px)}
@media(max-width:900px){.pgrid2{grid-template-columns:1fr}.pimg{aspect-ratio:16/9}}

/* ---------- clickable bento tiles ---------- */
.tile-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.tile-link:focus-visible{outline:3px solid var(--hot);outline-offset:-3px}
.tile .go{position:absolute;right:22px;top:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--line);opacity:.0;transform:translateX(-6px);transition:.25s}
.tile .go svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .go,.tile:focus-within .go{opacity:1;transform:none}
@media(hover:none){.tile .go{opacity:1;transform:none}}
.more{display:flex;justify-content:center;margin-top:34px}

/* ---------- industry photo cards ---------- */
.indg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:36px}
.ind{display:grid;gap:12px;padding:12px 12px 20px;border-radius:24px;text-decoration:none;background:var(--glass);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.ind:hover{transform:translateY(-4px);border-color:var(--hot)}
.ind .pic{aspect-ratio:4/3;border-radius:16px}
.ind b{font:700 20px/1.2 var(--display);padding:0 8px}.ind span.t{color:var(--mute);font-size:15px;padding:0 8px}
.ind em{font-style:normal;font-weight:700;color:var(--hot);font-size:14.5px;padding:0 8px}

/* ---------- client logo grid ---------- */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:44px}
.lgrid .lg{height:130px;margin:0;border-radius:18px}

/* ---------- misc ---------- */
.band .bandbox{margin-top:0}
.nf{text-align:center;padding-block:clamp(60px,12vw,140px)}.nf h1{font-size:clamp(80px,20vw,220px);line-height:.9}
.nf .cta-row{justify-content:center}
.pic-side{margin-top:22px}
.pic-side .pic{aspect-ratio:16/10}
@media(prefers-reduced-motion:reduce){.pic img,.ind,.tile .go{transition:none}}