/* mByte visual direction · operational atlas */

.page-hero--art{
  min-height:min(840px,calc(100svh - 78px));
  display:flex;
  align-items:center;
}

.page-hero--art::after{opacity:.42}

.page-hero--art .section-wrap{
  grid-template-columns:minmax(0,1.08fr) minmax(350px,.68fr);
  align-items:center;
  gap:clamp(2.5rem,6vw,7rem);
}

.page-hero--art h1{font-size:clamp(3.7rem,6.65vw,7.55rem)}

.page-hero__media{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  background:#111820;
  box-shadow:0 34px 90px rgba(0,0,0,.38);
  isolation:isolate;
}

.page-hero__media::before{
  content:"";
  position:absolute;
  inset:14px;
  z-index:2;
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}

.page-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,transparent 55%,rgba(4,8,12,.86) 100%);
  pointer-events:none;
}

.page-hero__media picture,.page-hero__media img{width:100%;height:100%}
.page-hero__media img{position:absolute;inset:0;object-fit:cover;transform:scale(1.01)}
.page-hero__media--map img{object-position:center 58%}
.page-hero__media--core img{object-position:center 45%}
.page-hero__media--industry img{object-position:center 52%}
.page-hero__media--services img{object-position:center 54%}
.page-hero__media--restaurant img{object-position:center 48%}

.page-hero__media figcaption{
  position:absolute;
  left:2rem;
  right:2rem;
  bottom:1.7rem;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  color:rgba(255,255,255,.76);
  font-size:.7rem;
  line-height:1.45;
  letter-spacing:.02em;
}

.page-hero__media figcaption strong{
  display:block;
  max-width:240px;
  color:#fff;
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:540;
  letter-spacing:-.025em;
  line-height:1.12;
}

.page-hero__media figcaption span:last-child{
  color:var(--acid);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.page-hero__media--diagram{display:grid;place-items:center;background:#0a0e12}
.page-hero__media--diagram img{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;transform:none}
.page-hero__media--diagram::after{display:none}
.page-hero__media--diagram figcaption{display:none}

.page-hero__visual-stage{position:relative;padding:0 0 2.4rem 2.4rem}
.page-hero__visual-stage .page-hero__media{min-height:610px}
.page-aside--float{
  position:absolute;
  left:0;
  bottom:0;
  z-index:5;
  width:min(92%,390px);
  padding:1.25rem;
  background:rgba(10,14,18,.92);
  box-shadow:0 18px 58px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}
.page-aside--float h2{font-size:1.05rem}
.page-aside--float p,.page-aside--float li{font-size:.77rem;line-height:1.55}
.page-aside--facts{display:grid;gap:1px;padding:0;background:rgba(255,255,255,.16)}
.page-aside--facts .aside-card{padding:.85rem 1rem;background:rgba(10,14,18,.94)}
.page-aside--facts .aside-card strong{font-size:.76rem}
.page-aside--facts .aside-card p{margin-top:.15rem}

.page-hero--atlas{padding-bottom:clamp(4rem,7vw,7rem)}
.page-hero--atlas .section-wrap{grid-template-columns:minmax(0,.82fr) minmax(500px,1fr)}
.page-hero--atlas .page-hero__media{min-height:500px}
.page-hero--atlas .page-hero__media img{object-position:center}

.art-band{position:relative;overflow:hidden;padding:clamp(5rem,8vw,8rem) 0;background:var(--ink);color:var(--white)}
.art-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:8.333% 100%}
.art-band .section-wrap{position:relative}
.art-band .section-label{color:var(--acid)}
.art-band .section-title{color:var(--white)}
.art-band .section-intro{color:rgba(255,255,255,.63)}

.art-layout{display:grid;grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,7rem);align-items:center}
.art-layout--reverse{grid-template-columns:minmax(0,1fr) minmax(260px,.42fr)}
.art-layout--reverse .art-copy{order:2}

.art-figure{position:relative;margin:0;border:1px solid rgba(255,255,255,.17);background:#0a0e12;box-shadow:0 28px 80px rgba(0,0,0,.28)}
.content-band .art-figure{border-color:var(--line);box-shadow:var(--shadow-md)}
.art-figure::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.1);pointer-events:none}
.content-band .art-figure::after{border-color:rgba(10,14,18,.08)}
.art-figure img{width:100%;height:auto}
.art-figure figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);font-size:.65rem}
.content-band .art-figure figcaption{border-color:var(--line);background:var(--paper);color:#343b42}
.content-band .art-figure figcaption span:last-child{color:#14764a}
.home-sector-atlas{margin:clamp(2.5rem,5vw,4.5rem) 0;background:var(--ink)}
.home-sector-atlas img{width:100%;height:auto}
.home-sector-atlas figcaption{color:rgba(255,255,255,.62)}
.art-figure figcaption span:last-child{color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.art-figure--photo{min-height:500px;overflow:hidden}
.art-figure--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-figure--photo figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));padding:4rem 1rem 1rem;color:rgba(255,255,255,.7);border:0}

.art-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1.5rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15)}
.art-notes>div{min-height:126px;padding:1rem;background:var(--ink-2)}
.art-notes span{display:block;margin-bottom:1.7rem;color:var(--green);font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.art-notes p{color:rgba(255,255,255,.68);font-size:.78rem;line-height:1.55}

.sector-portrait{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,7rem);align-items:stretch;margin-top:2.25rem}
.sector-portrait .art-figure{min-height:640px}
.sector-portrait .art-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sector-portrait__content{display:grid;align-content:start}

.page-hero__fact{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  z-index:3;
  width:96px;
  height:96px;
  display:grid;
  place-content:center;
  border-radius:50%;
  background:var(--acid);
  color:var(--ink);
  text-align:center;
  font-size:.56rem;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1.25;
  text-transform:uppercase;
  box-shadow:0 12px 40px rgba(0,0,0,.24);
}

@media(max-width:1080px){
  .page-hero--art{min-height:0}
  .page-hero--art .section-wrap,.page-hero--atlas .section-wrap{grid-template-columns:1fr}
  .page-hero__media{width:min(100%,680px);min-height:0;aspect-ratio:4/3}
  .page-hero__visual-stage{width:min(100%,680px);padding-left:2rem}
  .page-hero__visual-stage .page-hero__media{width:100%;min-height:0;aspect-ratio:4/3}
  .page-hero__media--map img,.page-hero__media--core img,.page-hero__media--industry img,.page-hero__media--services img{object-position:center 58%}
  .art-layout,.art-layout--reverse,.sector-portrait{grid-template-columns:1fr}
  .art-layout--reverse .art-copy{order:0}
  .sector-portrait .art-figure{min-height:520px}
}

@media(max-width:760px){
  .page-hero--art{padding-top:4.5rem}
  .page-hero--art h1{font-size:clamp(3.3rem,16vw,5.2rem)}
  .page-hero__media{aspect-ratio:4/4.6;min-height:0}
  .page-hero__visual-stage{padding:0}
  .page-hero__visual-stage .page-hero__media{aspect-ratio:4/4.6}
  .page-aside--float{position:relative;width:calc(100% - 18px);margin:-1.1rem 0 0 18px}
  .page-hero__media::before{inset:9px}
  .page-hero__media figcaption{left:1.25rem;right:1.25rem;bottom:1.1rem}
  .page-hero__media figcaption span:last-child{display:none}
  .page-hero__fact{top:1rem;right:1rem;width:78px;height:78px;font-size:.49rem}
  .art-notes{grid-template-columns:1fr}
  .art-notes>div{min-height:0}
  .art-figure figcaption{display:none}
  .sector-portrait .art-figure{min-height:430px}
}

@media(prefers-reduced-motion:no-preference){
  .page-hero__media img{transition:transform 1.2s var(--ease)}
  .page-hero__media:hover img{transform:scale(1.045)}
  .page-hero__media--diagram:hover img{transform:none}
}