/* Esa Markets — chrome on black, cut from the logo's 30° slant */
:root{
  --bg:#000; --bg2:#07080a; --bg3:#0e1013; --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.07);
  --text:#e9ebee; --mute:#9aa1ab; --dim:#6b727c; --white:#fff;
  --chrome:linear-gradient(135deg,#ffffff 0%,#d5d9de 35%,#8e959e 58%,#eef0f3 100%);
  --edge:linear-gradient(135deg,#fff,#7d848d 50%,#e7eaee);
  --wrap:min(1240px,92vw);
  --slant:.5774; /* tan 30° */
  --head:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-stretch:118%;font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em;color:var(--white)}
h1{font-size:clamp(2.4rem,5.4vw,4.9rem);background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(1.75rem,3.3vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-stretch:112%;letter-spacing:0}
p{margin:0 0 1em}
.wrap{width:var(--wrap);margin-inline:auto}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);color:#c9cdd3;max-width:58ch}
.mute{color:var(--mute)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.8rem 1rem;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* buttons: skewed parallelograms */
.btn{display:inline-block;transform:skewX(-20deg);text-decoration:none;font-family:var(--head);font-stretch:112%;font-weight:600;font-size:.95rem;letter-spacing:.02em;padding:.95rem 1.7rem;cursor:pointer;border:0;transition:filter .2s,background .2s}
.btn>span{display:block;transform:skewX(20deg)}
.btn-solid{background:var(--chrome);color:#000}
.btn-solid:hover{filter:brightness(1.12)}
.btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-line:hover{background:rgba(255,255,255,.1)}
.btn-row{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:2rem}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.solid{background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand img{height:46px;width:auto}
.brand b{font-family:var(--head);font-stretch:125%;font-weight:700;font-size:1.05rem;letter-spacing:.14em;color:#fff}
.nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.nav a.l{text-decoration:none;font-size:.95rem;color:#c3c8cf;padding:.4rem 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav a.l:hover,.nav a.l[aria-current=page]{color:#fff;border-color:#fff}
.nav .btn{padding:.7rem 1.3rem;font-size:.88rem}
.burger{display:none;background:none;border:0;width:46px;height:46px;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:#fff;transition:transform .3s,opacity .3s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero (home) */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:110px 0 60px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 78% 48%,rgba(150,165,185,.16),transparent 70%),radial-gradient(40% 40% at 8% 100%,rgba(255,255,255,.06),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.hero h1{margin-bottom:1.6rem}
.hero .lead{margin-bottom:0}
.mark{width:100%;max-height:82svh;height:auto;overflow:visible}
.bar{cursor:pointer;outline:none}
.bar .ov{transition:opacity .35s}
.bar .pic{transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:center}
.bar:hover .ov,.bar:focus-visible .ov{opacity:.05}
.bar:hover .pic,.bar:focus-visible .pic{transform:scale(1.06)}
.bar .edge{transition:stroke-width .2s}
.bar:focus-visible .edge{stroke:#fff;stroke-width:6}
.bar text{font-family:var(--head);font-stretch:120%;font-weight:700;fill:#fff;paint-order:stroke;stroke:#000;stroke-width:5px;stroke-linejoin:round;letter-spacing:.04em;pointer-events:none}
.bar text.sub{font-family:var(--body);font-stretch:100%;font-weight:500;letter-spacing:.02em;fill:#d7dbe0;stroke-width:4px}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.12s}.hero-copy>*:nth-child(3){animation-delay:.24s}
  .bar{animation:slide 1.1s cubic-bezier(.2,.7,.2,1) both}
  .bar:nth-of-type(1){animation-delay:.25s}.bar:nth-of-type(2){animation-delay:.45s}.bar:nth-of-type(3){animation-delay:.65s}
}
@keyframes up{from{opacity:0;transform:translateY(24px)}}
@keyframes slide{from{opacity:0;transform:translateX(70px)}}

/* page hero (inner) */
.phero{position:relative;padding:150px 0 70px;overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 70% at 85% 40%,rgba(150,165,185,.15),transparent 70%)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem;align-items:center}
.phero h1{font-size:clamp(2.2rem,4.6vw,4.1rem);margin:1.1rem 0 1.4rem}
.crumbs{font-size:.9rem;color:var(--mute)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#fff}
.crumbs span{margin:0 .55rem;color:var(--dim)}

/* slanted image frame with chrome edge */
.frame{position:relative;aspect-ratio:16/11;background:var(--edge);clip-path:polygon(0 17%,100% 0,100% 83%,0 100%)}
.frame img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;clip-path:polygon(0 17%,100% 0,100% 83%,0 100%)}
.frame.flip{clip-path:polygon(0 0,100% 17%,100% 100%,0 83%)}
.frame.flip img{clip-path:polygon(0 0,100% 17%,100% 100%,0 83%)}

/* sections */
section{position:relative}
.sec{padding:clamp(4.5rem,9vw,8rem) 0}
.sec.alt{background:var(--bg2)}
.sec.alt::before,.sec.alt::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.sec.alt::before{top:0}.sec.alt::after{bottom:0}
.sec-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{margin-bottom:1.1rem}

.statement{font-family:var(--head);font-stretch:112%;font-weight:600;font-size:clamp(1.6rem,3.6vw,3.1rem);line-height:1.18;letter-spacing:-.01em;max-width:24ch;color:#fff}
.statement-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:4rem;align-items:end}

/* division rows */
.division{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.division+.division{margin-top:clamp(4rem,8vw,7rem)}
.division.rev .frame{order:2}
.division h2{margin-bottom:1.1rem}
.spec{margin:1.8rem 0 2rem;padding:0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line2)}
.spec dt{font-family:var(--head);font-stretch:110%;font-weight:600;font-size:.95rem;color:#fff}
.spec dd{margin:0;color:var(--mute);font-size:.98rem}
.tlink{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--head);font-stretch:112%;font-weight:600;text-decoration:none;color:#fff;border-bottom:1.5px solid #fff;padding-bottom:.25rem}
.tlink:hover{border-color:transparent}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{position:relative;padding:0 2rem 0 0}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:64px;height:40px;background:var(--chrome);color:#000;font-family:var(--head);font-weight:800;font-stretch:120%;font-size:1.05rem;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);margin-bottom:1.5rem}
.steps li::after{content:"";position:absolute;top:20px;left:78px;right:14px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.05))}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:.6rem}
.steps p{color:var(--mute);font-size:.98rem}
.steps.v{grid-template-columns:1fr;max-width:52rem}
.steps.v li{padding:0 0 2.4rem 5.2rem}
.steps.v li::before{position:absolute;left:0;top:0;margin:0}
.steps.v li::after{top:48px;bottom:0;left:31px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.03))}

/* principles */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.cols3 h3{margin:1.1rem 0 .7rem}
.cols3 p{color:var(--mute)}
.glyph{width:46px;height:30px;background:var(--chrome);clip-path:polygon(0 100%,100% 0,100% 45%,28% 100%)}
.cols3>div:nth-child(2) .glyph{clip-path:polygon(0 100%,100% 0,100% 45%,28% 100%);opacity:.75}
.cols3>div:nth-child(3) .glyph{clip-path:polygon(0 100%,100% 0,100% 45%,28% 100%);opacity:.5}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding:.7rem 0 .7rem 2rem;border-bottom:1px solid var(--line2);color:#cfd3d9}
.ticks li::before{content:"";position:absolute;left:0;top:1.3rem;width:16px;height:9px;background:var(--chrome);clip-path:polygon(0 100%,100% 0,100% 45%,28% 100%)}

/* cta band */
.cta{padding:clamp(4.5rem,8vw,7rem) 0;position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line2)}
.cta::before{content:"";position:absolute;right:-6%;top:-30%;bottom:-30%;width:46%;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02));clip-path:polygon(35% 0,100% 0,65% 100%,0 100%)}
.cta h2{max-width:20ch;margin-bottom:1.2rem}
.contact-lines{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;color:#c9cdd3}
.contact-lines a{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.contact-lines a:hover{color:#fff}
.contact-lines svg{width:20px;height:20px;fill:currentColor}

/* faq */
details{border-bottom:1px solid var(--line);padding:1.25rem 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-family:var(--head);font-stretch:108%;font-weight:600;font-size:1.1rem;color:#fff;display:flex;justify-content:space-between;gap:1.5rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.9rem 0 0;color:var(--mute);max-width:64ch}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,6rem)}
form{display:grid;gap:1.4rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
label{display:block;font-size:.88rem;color:var(--mute);margin-bottom:.45rem}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(255,255,255,.3);color:#fff;font:inherit;padding:.65rem 0;border-radius:0;transition:border-color .2s}
select option{background:#111;color:#fff}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:#fff}
.note{font-size:.88rem;color:var(--dim)}
.info h3{margin-bottom:.4rem}
.info dl{margin:0}
.info dt{font-size:.85rem;color:var(--mute);margin-top:1.6rem}
.info dd{margin:.15rem 0 0;font-size:1.15rem}
.info a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.info a:hover{border-color:#fff}

/* prose (legal) */
.prose{max-width:none}.prose>*{max-width:46rem}
.prose h2{font-size:1.5rem;margin:2.6rem 0 .8rem}
.prose p,.prose li{color:#c3c8cf}

/* footer */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:4.5rem 0 2rem}
.foot{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:3rem}
.foot img{height:64px;width:auto;margin-bottom:1.2rem}
.foot h4{font-size:.9rem;font-stretch:112%;margin-bottom:1rem;color:#fff}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.foot a{text-decoration:none;color:#b3b9c1;font-size:.98rem}
.foot a:hover{color:#fff}
.foot p{color:var(--mute);font-size:.95rem;max-width:32ch}
.social{display:flex;gap:.8rem;margin-top:1.2rem}
.social a{width:44px;height:44px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:background .2s}
.social a:hover{background:rgba(255,255,255,.12)}
.social svg{width:18px;height:18px;fill:#fff}
.legal{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--line2);font-size:.82rem;color:var(--dim);display:grid;gap:.8rem}
.legal p{margin:0;max-width:110ch}

@media (max-width:980px){
  .nav ul,.nav>.btn{display:none}
  .burger{display:block}
  .menu-open .nav ul{display:flex;position:fixed;inset:78px 0 0 0;background:#000;flex-direction:column;gap:0;padding:1.5rem 6vw;overflow:auto}
  .menu-open .nav ul li{border-bottom:1px solid var(--line2)}
  .menu-open .nav a.l{display:block;font-family:var(--head);font-stretch:115%;font-size:1.5rem;padding:1.1rem 0;border:0}
  .hero-grid,.phero-grid,.division,.statement-grid,.cols2,.contact-grid{grid-template-columns:1fr}
  .hero{padding-top:100px}
  .mark{max-height:none;max-width:420px;margin:1rem auto 0}
  .division.rev .frame{order:0}
  .steps{grid-template-columns:1fr 1fr;row-gap:2.8rem}
  .steps li:nth-child(2)::after{display:none}
  .cols3{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .steps li::after{display:none}
  .spec div{grid-template-columns:1fr;gap:.2rem}
  .f2{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .brand b{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.soon{display:inline-block;transform:skewX(-20deg);padding:.35rem 1rem;margin:1rem 0 0;font-family:var(--head);font-stretch:112%;font-weight:600;font-size:.82rem;letter-spacing:.06em;color:#000;background:var(--chrome)}
.crumbs+.soon{margin-top:1rem}
.sn{display:inline-block;font-family:var(--head);font-size:.58rem;font-weight:700;letter-spacing:.05em;margin-left:.4rem;padding:.16rem .4rem;background:var(--chrome);color:#000;vertical-align:middle;line-height:1;position:relative;top:-1px}
.nav ul{gap:1.5rem}
.nav a.l{font-size:.92rem}
@media (max-width:1240px){.nav ul,.nav>.btn{display:none}.burger{display:block}}
@media (max-width:1240px){.menu-open .nav ul{display:flex;position:fixed;inset:78px 0 0 0;background:#000;flex-direction:column;gap:0;padding:1.5rem 6vw;overflow:auto}.menu-open .nav ul li{border-bottom:1px solid var(--line2)}.menu-open .nav a.l{display:block;font-family:var(--head);font-stretch:115%;font-size:1.5rem;padding:1.1rem 0;border:0}}

/* ---- full-bleed background images ---- */
body{overflow-x:clip}
.band>img.bg,.phero>img.bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band,.wrap.band{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,36rem);align-content:center;justify-content:start;gap:0;
  width:auto;max-width:none;margin-inline:calc(50% - 50vw);padding:clamp(4rem,8vw,7rem) calc((100vw - var(--wrap))/2);min-height:min(82vh,780px);overflow:hidden}
.band.tr{justify-content:end}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,0) 72%)}
.band.tr::before{background:linear-gradient(270deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,0) 72%)}
.band+.band{border-top:1px solid var(--line)}
.band h2,.band .lead,.band li,.band .spec dd{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.band .lead,.band .spec dd,.band li{color:#e4e7eb}
.sec:has(.band){padding-block:0}
.sec:has(.band) .sec-head{margin:0;padding:clamp(4rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem)}
/* hero (home) */
.hero::before{background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.05) 78%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 16%)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{opacity:0;animation:fade 24s infinite}
.hero-bg img:nth-child(2){animation-delay:8s}.hero-bg img:nth-child(3){animation-delay:16s}
@keyframes fade{0%{opacity:0}5%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-bg img:first-child{opacity:1}}
.fillp{fill:rgba(0,0,0,.32);transition:fill .3s}
.bar:hover .fillp,.bar:focus-visible .fillp{fill:rgba(255,255,255,.14)}
/* page heroes */
.phero{min-height:82vh;display:grid;align-items:center}
.phero:has(>img.bg)::before{background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.02) 72%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 14%)}
.phero-grid{grid-template-columns:minmax(0,40rem)}
.phero>img.bg~.wrap{position:relative}
@media (max-width:980px){
  .band,.wrap.band{padding-inline:4vw;min-height:70vh;align-content:end;justify-content:start}
  .band::before,.band.tr::before{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 80%)}
  .hero::before,.phero:has(>img.bg)::before{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.15) 100%)}
  .phero{min-height:76vh}
}

/* ===== FINAL LAYOUT: text on solid black on one side, photo clear on the other ===== */
.hero::before,.phero::before,.band::before,.band.tr::before{display:none}
.band,.wrap.band{background:#000;grid-template-columns:minmax(0,30rem);min-height:min(80vh,760px)}
.band>img.bg,.phero>img.bg,.hero-bg{left:auto;right:0;width:62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.band.tr>img.bg{left:0;right:auto;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 24%);mask-image:linear-gradient(270deg,transparent 0,#000 24%)}
.hero-bg{top:0;bottom:0;position:absolute;z-index:-2}
.hero-bg img{width:100%;left:0;right:auto;-webkit-mask-image:none;mask-image:none}
.band h2,.band .lead,.band li,.band .spec dd{text-shadow:none}
.phero{background:#000}
.phero-grid{grid-template-columns:minmax(0,34rem)}
.phero h1{font-size:clamp(2.1rem,3.9vw,3.6rem)}
.hero h1{font-size:clamp(2.3rem,4.6vw,4.2rem)}
.fillp{fill:transparent}
.bar:hover .fillp,.bar:focus-visible .fillp{fill:rgba(255,255,255,.1)}
.pills{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}
.pills a{display:inline-block;transform:skewX(-20deg);padding:.55rem 1.2rem;text-decoration:none;font-family:var(--head);font-stretch:112%;font-weight:600;font-size:.85rem;color:#fff;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:background .2s,color .2s}
.pills a:hover{background:#fff;color:#000}
@media (max-width:980px){
  .hero-bg,.band>img.bg,.band.tr>img.bg,.phero>img.bg{left:0;right:0;top:0;bottom:auto;width:100%;height:46vh;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .band,.wrap.band{min-height:0;align-content:start;justify-content:start;padding:calc(46vh + 1rem) 4vw 4rem}
  .hero{padding:calc(46vh + 1rem) 0 3rem;align-items:start;min-height:0}
  .phero{min-height:0;padding:calc(46vh + 1rem) 0 3rem;align-items:start}
  .phero .crumbs{display:none}
  .mark{display:none}
  .phero-grid{grid-template-columns:1fr}
}
.band>img.bg,.phero>img.bg,.hero-bg{width:58%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
.band.tr>img.bg{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 14%);mask-image:linear-gradient(270deg,transparent 0,#000 14%)}
.hero-bg img{width:100%}
h1{background-image:linear-gradient(135deg,#fff 0%,#eef0f3 55%,#bcc2ca 100%)}
.site-header:not(.solid){background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0))}
@media (max-width:980px){.hero-bg,.band>img.bg,.band.tr>img.bg,.phero>img.bg{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}}
.site-header:not(.solid){background:none}
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0));z-index:-1;pointer-events:none;transition:opacity .3s}
.site-header.solid::before{opacity:0}

/* ===== FINAL: full-bleed photos, text sits inset from the corner ===== */
.hero>img.bg,.phero>img.bg,.band>img.bg,.band.tr>img.bg{position:absolute;inset:0;left:0;right:0;width:100%;height:100%;object-fit:cover;z-index:-2;-webkit-mask-image:none;mask-image:none}
.hero,.phero,.band,.wrap.band{background:#000;isolation:isolate}
/* home hero: intro only, text in the sky above the ship */
.hero{min-height:100svh;display:grid;align-items:start;padding:clamp(120px,18vh,190px) 0 4rem;position:relative;overflow:hidden}
.hero::before{content:"";display:block;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.12) 50%,rgba(0,0,0,.5) 100%)}
.hero .wrap{width:auto;max-width:none;margin:0 0 0 9vw}
.hero-grid{grid-template-columns:minmax(0,44rem)}
.hero h1{font-size:clamp(2.2rem,3.9vw,3.6rem);margin-bottom:1.3rem}
.hero .lead{max-width:44ch}
/* page heroes */
.phero{min-height:86vh;display:grid;align-items:center}
.phero:has(>img.bg)::before{content:"";display:block;position:absolute;inset:0;z-index:-1;background:radial-gradient(75% 95% at 22% 50%,rgba(0,0,0,.72),rgba(0,0,0,.3) 62%,rgba(0,0,0,.12)),rgba(0,0,0,.14)}
.phero:has(>img.bg) .wrap{width:auto;max-width:none;margin:0 0 0 9vw;position:relative}
.phero-grid{grid-template-columns:minmax(0,34rem)}
/* section bands */
.band,.wrap.band{grid-template-columns:minmax(0,32rem);min-height:min(86vh,800px);padding:clamp(4rem,8vw,7rem) 9vw;justify-content:start;align-content:center}
.band.tr{justify-content:end}
.band::before{content:"";display:block;position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 95% at 20% 50%,rgba(0,0,0,.72),rgba(0,0,0,.28) 62%,rgba(0,0,0,.12)),rgba(0,0,0,.14)}
.band.tr::before{background:radial-gradient(70% 95% at 80% 50%,rgba(0,0,0,.72),rgba(0,0,0,.28) 62%,rgba(0,0,0,.12)),rgba(0,0,0,.14)}
.hero h1,.phero h1,.band h2{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero .lead,.phero .lead,.band .lead,.band li,.band .spec dd{text-shadow:0 1px 14px rgba(0,0,0,.7);color:#eceef1}
@media (max-width:980px){
  .hero,.phero,.band,.wrap.band{min-height:88svh;align-content:end;align-items:end;padding:6rem 6vw 3rem}
  .hero .wrap,.phero:has(>img.bg) .wrap{margin:0}
  .hero::before,.phero:has(>img.bg)::before,.band::before,.band.tr::before{background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.6) 55%,rgba(0,0,0,.25) 100%)}
  .band,.wrap.band{justify-content:start}
  .phero .crumbs{display:none}
}

.hero>img.bg{object-position:50% 0}
.hero{padding-top:clamp(100px,12vh,130px)}
.hero .wrap{margin-left:26vw}
.hero-grid{grid-template-columns:minmax(0,42rem)}
.hero h1{font-size:clamp(2rem,3.4vw,3.1rem)}
.hero .btn-row{margin-top:1.5rem}
@media (max-width:980px){.hero .wrap{margin:0}.hero>img.bg{object-position:60% 30%}}

/* ===== readable text panels: text never sits directly on a photo ===== */
.band>div:not(.frame),.hero-copy,.phero-grid>div:first-child{background:rgba(0,0,0,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(1.5rem,2.6vw,2.4rem);border-left:3px solid #cfd3d9}
.band>div .spec{margin-bottom:1.2rem}
.band>div h2,.hero-copy h1,.phero-grid>div h1{text-shadow:none}
.band>div .lead,.hero-copy .lead,.phero-grid>div .lead,.band>div li,.band>div .spec dd{text-shadow:none;color:#eceef1}
.band::before,.band.tr::before{background:rgba(0,0,0,.1)}
.phero:has(>img.bg)::before{background:rgba(0,0,0,.1)}
.hero::before{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 50%)}
.band.bottom{align-content:end;padding-bottom:clamp(2rem,4vw,3.5rem)}
.band.bottom>img.bg{object-position:50% 100%}
.hero-copy{max-width:44rem}
@media (max-width:980px){.band>div:not(.frame),.hero-copy,.phero-grid>div:first-child{padding:1.4rem}.band::before,.band.tr::before,.phero:has(>img.bg)::before{background:rgba(0,0,0,.1)}}
.band h2{margin-bottom:1rem}.band .soon{margin:0 0 1rem}