
/* ============================================================
   DHEKSTRO B1 — Visual Hardening & Content Truth Pass
   Intentional overrides applied after the approved Night Press system.
   ============================================================ */
:root{
  --text-body:17px;
  --text-micro:11px;
  --smoke:#b4ab9d;
  --dim:#746b5e;
  --measure:68ch;
}
body{font-size:var(--text-body);line-height:1.68}
.annot{color:#837a6c}
.mono--micro{font-size:11px;letter-spacing:.115em}
.section{padding-block:clamp(68px,8vw,112px)}
.section p{max-width:72ch}

/* Hero: true 55/45 split, no decorative vacuum. */
.hero{min-height:min(88svh,900px);padding:88px var(--pad-x) 36px;display:block}
.hero-masthead{max-width:1440px;margin:0 auto;padding-bottom:18px}
.hero-split{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,55fr) minmax(380px,45fr);gap:clamp(34px,5vw,78px);align-items:stretch;min-height:660px}
.hero-editorial{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-title.brand-wordmark--hero{justify-content:flex-start;text-align:left;width:auto;font-size:clamp(88px,10.6vw,166px);margin:clamp(24px,4vh,46px) 0 0}
.hero-roles{justify-content:flex-start;margin:16px 0 22px;letter-spacing:.22em}
.hero-copy-grid{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:clamp(22px,3vw,42px);align-items:center;padding-top:clamp(26px,4vh,48px)}
.hero-margin{padding-right:24px}
.hero-main{gap:20px}
.hero-tagline{font-size:clamp(24px,2.35vw,34px)}
.hero-ctas .btn{padding-inline:22px}
.hero-figure{width:100%;min-width:0;justify-self:stretch;align-self:stretch;justify-content:flex-end}
.hero-figure .approved-photo{width:100%;height:100%;min-height:620px;max-height:760px;aspect-ratio:auto;object-fit:cover;object-position:50% 20%;border:1px solid var(--hair-strong);box-shadow:0 22px 80px rgba(0,0,0,.42)}
.hero-figcap{padding-top:2px}

/* Decorative restraint: no giant copper ellipses between sections. */
.interlude{padding-block:clamp(52px,6vw,82px);border-block:1px solid var(--hair)}
.interlude .smoke{display:none}
.section>.smoke{opacity:.28}
.interlude::before{content:"";width:64px;height:1px;background:var(--copper);margin-bottom:4px}

/* Content truth states. */
.section--preparation .release-cover image-slot{opacity:.72}
.player-toggle.is-disabled,.video-play.is-disabled,.btn.is-disabled{opacity:.48;cursor:not-allowed;pointer-events:none}
.dsp-row{align-items:center}
.cat-row{cursor:default}
.cat-row:hover{background:transparent}
.cat-kind{max-width:145px}
.news-form :disabled{cursor:not-allowed;opacity:.62}

/* Image matrix: preserve faces, hands and complete editorial body. */
.bio-portrait .approved-photo{aspect-ratio:4/5;object-fit:cover;object-position:50% 17%}
.video-feature-frame .approved-photo{aspect-ratio:16/9;object-fit:cover;object-position:50% 43%}
.contact-sheet{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:16px}
.sheet-cell:nth-child(1){grid-column:span 3}.sheet-cell:nth-child(2){grid-column:span 3}.sheet-cell:nth-child(3){grid-column:span 3}.sheet-cell:nth-child(4){grid-column:span 3}
.sheet-cell .approved-photo{width:100%;height:auto;background:#080807;border:1px solid var(--hair-strong)}
.sheet-cell .photo-sheet-1{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.sheet-cell .photo-sheet-2{aspect-ratio:4/5;object-fit:cover;object-position:50% 44%}
.sheet-cell .photo-sheet-3{aspect-ratio:2/3;object-fit:contain;object-position:center}
.sheet-cell .photo-sheet-4{aspect-ratio:4/5;object-fit:cover;object-position:50% 26%}
.press-photos .approved-photo{aspect-ratio:4/5;object-fit:cover;border:1px solid var(--hair-strong)}
.press-photos .photo-press-1{object-position:50% 18%}
.press-photos .photo-press-2{object-position:50% 22%}

/* Long-form readability. */
.bio-copy{max-width:790px}
.bio-body p,.bio-more-copy p{font-size:clamp(17px,1.15vw,18px);line-height:1.68;max-width:68ch}
.bio-lede{max-width:31em;line-height:1.28}
.press-bio .lyric{line-height:1.55}

/* Merchandise: clean product catalogue, explicit review state. */
.store-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.store-card{padding:0;overflow:hidden;background:#0d0c0a}
.store-card .merch-product-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#f4f0e9;padding:0;border-bottom:1px solid var(--hair)}
.store-card>*:not(img){margin-inline:20px}
.store-card>.store-card-kind{margin-top:18px}
.store-card>.store-card-status{margin-top:-8px;color:var(--smoke)}
.store-card>.btn{margin:4px 20px 20px;width:calc(100% - 40px)}
.store-card-note{font-size:14px;line-height:1.6}

/* Print/PDF parity. */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;animation:none!important;transition:none!important}
  html,body{background:var(--night)!important;color:var(--ivory)!important}
  .nav,.menu-overlay,.grain{display:none!important}
  .reveal,.rule-draw{opacity:1!important;transform:none!important}
  .section,.hero,.interlude{break-inside:avoid-page}
  img{visibility:visible!important;opacity:1!important}
  .store-card .merch-product-photo{background:#f4f0e9!important}
  .hero{min-height:auto;padding-top:32px}
}

@media(max-width:1120px){
  .hero-split{grid-template-columns:minmax(0,1fr) minmax(330px,42%);min-height:620px}
  .hero-copy-grid{grid-template-columns:1fr}.hero-margin{border-right:0;border-left:1px solid var(--hair);padding:0 0 0 18px;align-self:auto}
  .hero-figure .approved-photo{min-height:560px}
  .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .hero{min-height:auto;padding-top:82px}
  .hero-split{grid-template-columns:1fr;gap:28px;min-height:0}
  .hero-editorial{order:1}.hero-figure{order:0}
  .hero-figure .approved-photo{height:auto;min-height:0;max-height:none;aspect-ratio:4/5;object-position:50% 18%}
  .hero-title.brand-wordmark--hero{font-size:clamp(70px,17vw,116px);margin-top:24px}
  .hero-copy-grid{padding-top:24px}
  .contact-sheet{grid-template-columns:1fr 1fr}
  .sheet-cell:nth-child(n){grid-column:auto}
}
@media(max-width:620px){
  .hero-ctas{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .hero-ctas .btn{width:100%;padding-inline:12px}
  .store-grid{grid-template-columns:1fr}
  .contact-sheet{grid-template-columns:1fr}
  .sheet-cell .photo-sheet-3{max-height:760px}
}
@media(max-width:430px){
  .hero-ctas{grid-template-columns:1fr}
  .hero-title.brand-wordmark--hero{font-size:clamp(58px,18vw,82px)}
  .hero-roles{font-size:10px;gap:6px 10px}
}


/* ===== Hero approval pass — section-by-section canonical rebuild ===== */
.hero--approved{
  position:relative;
  min-height:100svh;
  padding:0;
  display:block;
  overflow:hidden;
  isolation:isolate;
  background:#050505;
}
.hero--approved .hero-bg,
.hero--approved .hero-overlay{
  position:absolute;
  inset:0;
}
.hero--approved .hero-bg{
  z-index:0;
}
.hero--approved .hero-approved-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:72% 42%;
  filter:saturate(.84) brightness(.62) contrast(1.04);
}
.hero--approved .hero-overlay{
  z-index:1;
  background:
    linear-gradient(90deg, rgba(4,4,4,.98) 0%, rgba(4,4,4,.96) 24%, rgba(4,4,4,.78) 40%, rgba(4,4,4,.42) 58%, rgba(4,4,4,.12) 74%, rgba(4,4,4,.00) 88%),
    linear-gradient(180deg, rgba(4,4,4,.44) 0%, rgba(4,4,4,.12) 24%, rgba(4,4,4,.12) 72%, rgba(4,4,4,.46) 100%);
}
.hero--approved .hero-shell{
  position:relative;
  z-index:2;
  min-height:100svh;
  width:min(100%, 1760px);
  margin:0 auto;
  padding:clamp(56px,6vw,92px) clamp(52px,5.6vw,96px) clamp(54px,6vw,84px);
  display:grid;
  grid-template-columns:minmax(0, 720px) 1fr;
  align-items:center;
}
.hero--approved .hero-copy{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:min(100%, 640px);
}
.hero--approved .hero-kicker{
  margin:0 0 14px;
  color:var(--copper);
  letter-spacing:.18em;
}
.hero--approved .hero-title-simple{
  margin:0;
  position:relative;
  z-index:2;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(120px, 18vw, 210px);
  line-height:.84;
  letter-spacing:.01em;
  color:var(--ivory);
}
.hero--approved .hero-echo{
  position:relative;
  z-index:2;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(240,235,224,.18);
  text-shadow:0 0 30px rgba(0,0,0,.35);
}
.hero--approved .hero-echo--top{
  margin:8px 0 0 clamp(120px, 13vw, 230px);
  font-size:clamp(22px,2.7vw,44px);
  line-height:1.1;
}
.hero--approved .hero-presence{
  position:relative;
  z-index:2;
  margin:12px 0 0;
  color:var(--ivory);
  font-size:clamp(15px,1.25vw,24px);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero--approved .hero-top-ctas{
  position:relative;
  z-index:2;
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:0;
}
.hero--approved .hero-top-ctas .btn{
  min-height:40px;
  padding:12px 18px;
  font-size:11px;
}
.hero--approved .btn--hero-ghost{
  background:rgba(8,8,8,.72);
  border-color:var(--copper);
  color:var(--ivory);
}
.hero--approved .btn--hero-ghost:hover{
  background:var(--copper);
  color:var(--night);
}
.hero--approved .hero-shadow-dheks{
  position:relative;
  z-index:0;
  margin-top:clamp(8px,1.4vw,16px);
  font-family:var(--display);
  font-size:clamp(220px, 29vw, 470px);
  line-height:.8;
  letter-spacing:.01em;
  color:rgba(240,235,224,.11);
  user-select:none;
  pointer-events:none;
}
.hero--approved .hero-echo--bottom{
  margin-top:18px;
  font-size:clamp(20px,2.3vw,40px);
  color:rgba(240,235,224,.16);
}
.hero--approved .btn--hero-main{
  margin-top:34px;
  min-width:min(100%, 430px);
  justify-content:flex-start;
  padding:18px 30px;
  background:rgba(6,6,6,.34);
  border-color:rgba(160,160,160,.38);
  color:rgba(240,235,224,.74);
  font-size:clamp(14px,1.1vw,20px);
  letter-spacing:.24em;
  backdrop-filter: blur(3px);
}
.hero--approved .btn--hero-main:hover{
  border-color:var(--ivory);
  color:var(--ivory);
  background:rgba(6,6,6,.48);
}
@media (max-width: 1180px){
  .hero--approved .hero-shell{grid-template-columns:minmax(0, 58%) 1fr;padding-inline:36px}
  .hero--approved .hero-approved-photo{object-position:74% 42%}
  .hero--approved .hero-title-simple{font-size:clamp(104px, 16vw, 170px)}
  .hero--approved .hero-shadow-dheks{font-size:clamp(190px, 25vw, 360px)}
}
@media (max-width: 920px){
  .hero--approved{min-height:920px}
  .hero--approved .hero-shell{min-height:920px;grid-template-columns:1fr;padding:88px 24px 42px;align-items:start}
  .hero--approved .hero-copy{width:min(100%, 580px);padding-top:6px}
  .hero--approved .hero-overlay{background:linear-gradient(180deg, rgba(4,4,4,.72) 0%, rgba(4,4,4,.42) 26%, rgba(4,4,4,.58) 100%), linear-gradient(90deg, rgba(4,4,4,.94) 0%, rgba(4,4,4,.58) 42%, rgba(4,4,4,.1) 100%)}
  .hero--approved .hero-approved-photo{object-position:68% 36%}
  .hero--approved .hero-echo--top{margin-left:0;margin-top:12px;font-size:clamp(18px,4vw,26px)}
  .hero--approved .hero-shadow-dheks{font-size:clamp(150px, 34vw, 280px)}
  .hero--approved .hero-echo--bottom{font-size:clamp(17px,3.8vw,24px)}
  .hero--approved .btn--hero-main{min-width:min(100%, 360px)}
}
@media (max-width: 640px){
  .hero--approved{min-height:860px}
  .hero--approved .hero-shell{min-height:860px;padding:82px 18px 32px}
  .hero--approved .hero-title-simple{font-size:clamp(86px, 24vw, 126px)}
  .hero--approved .hero-presence{font-size:13px;letter-spacing:.16em}
  .hero--approved .hero-top-ctas{gap:10px;width:100%}
  .hero--approved .hero-top-ctas .btn{flex:1 1 calc(50% - 10px);padding:12px 10px;min-height:42px}
  .hero--approved .hero-shadow-dheks{font-size:clamp(118px, 30vw, 200px)}
  .hero--approved .btn--hero-main{width:100%;min-width:0;justify-content:center;font-size:13px;padding:17px 16px}
}


/* ===== Hero section-by-section pass v2 ===== */
.hero--canonical{
  position:relative;
  min-height:calc(100svh - 42px);
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#050505;
}
.hero--canonical .hero-bg,
.hero--canonical .hero-mask{
  position:absolute;
  inset:0;
}
.hero--canonical .hero-bg{z-index:0}
.hero--canonical .hero-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 48%;
  filter:brightness(.88) saturate(.88) contrast(1.03);
}
.hero--canonical .hero-mask{
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(4,4,4,1) 0%,
      rgba(4,4,4,1) 42%,
      rgba(4,4,4,.98) 50%,
      rgba(4,4,4,.84) 57%,
      rgba(4,4,4,.42) 66%,
      rgba(4,4,4,.08) 77%,
      rgba(4,4,4,0) 88%),
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.08) 55%,rgba(0,0,0,.28));
}
.hero--canonical .hero-content{
  position:relative;
  z-index:2;
  width:min(100%,1760px);
  min-height:calc(100svh - 42px);
  margin:0 auto;
  padding:clamp(60px,6.5vw,98px) clamp(60px,5.2vw,94px) clamp(50px,5vw,80px);
  display:flex;
  align-items:center;
}
.hero--canonical .hero-copy-block{
  position:relative;
  width:min(100%,650px);
  min-height:690px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}
.hero--canonical .hero-kicker{
  margin:0 0 10px;
  color:var(--copper);
  letter-spacing:.18em;
  position:relative;
  z-index:5;
}
.hero--canonical .hero-name{
  margin:0;
  position:relative;
  z-index:5;
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(128px,14.3vw,205px);
  line-height:.82;
  letter-spacing:.01em;
  color:var(--ivory);
}
.hero--canonical .hero-legacy-echo{
  position:relative;
  z-index:4;
  margin:-5px 0 0 120px;
  color:rgba(239,233,222,.18);
  font-size:clamp(18px,1.85vw,30px);
  line-height:1;
  letter-spacing:.21em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero--canonical .hero-presence{
  position:relative;
  z-index:5;
  margin:7px 0 0;
  color:var(--ivory);
  font-size:clamp(15px,1.15vw,21px);
  letter-spacing:.20em;
  text-transform:uppercase;
}
.hero--canonical .hero-inline-actions{
  position:relative;
  z-index:5;
  display:flex;
  margin-top:20px;
}
.hero--canonical .hero-small-cta{
  min-height:38px;
  padding:10px 17px;
  font-size:10px;
  letter-spacing:.17em;
}
.hero--canonical .hero-small-cta--outline{
  border-color:var(--copper);
  color:var(--ivory);
  background:rgba(0,0,0,.58);
}
.hero--canonical .hero-small-cta--outline:hover{
  background:var(--copper);
  color:var(--night);
}
.hero--canonical .hero-ghost-name{
  position:relative;
  z-index:2;
  margin-top:12px;
  width:100%;
  overflow:hidden;
  font-family:var(--font-display);
  font-size:clamp(220px,25vw,360px);
  line-height:.70;
  letter-spacing:.01em;
  color:rgba(239,233,222,.10);
  user-select:none;
  pointer-events:none;
}
.hero--canonical .hero-ghost-presence{
  position:relative;
  z-index:3;
  margin-top:18px;
  color:rgba(239,233,222,.16);
  font-size:clamp(19px,1.9vw,31px);
  letter-spacing:.22em;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero--canonical .hero-main-cta{
  position:relative;
  z-index:5;
  margin-top:36px;
  min-width:430px;
  min-height:68px;
  justify-content:center;
  background:rgba(0,0,0,.24);
  border-color:rgba(239,233,222,.28);
  color:rgba(239,233,222,.56);
  font-size:clamp(14px,1.05vw,19px);
  letter-spacing:.25em;
}
.hero--canonical .hero-main-cta:hover{
  border-color:var(--ivory);
  color:var(--ivory);
  background:rgba(0,0,0,.46);
}
@media(max-width:1180px){
  .hero--canonical .hero-mask{
    background:
      linear-gradient(90deg,rgba(4,4,4,1) 0%,rgba(4,4,4,1) 46%,rgba(4,4,4,.92) 56%,rgba(4,4,4,.34) 70%,rgba(4,4,4,0) 88%),
      linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.08) 55%,rgba(0,0,0,.28));
  }
  .hero--canonical .hero-content{padding-inline:36px}
  .hero--canonical .hero-copy-block{width:min(100%,600px)}
  .hero--canonical .hero-name{font-size:clamp(116px,15vw,178px)}
  .hero--canonical .hero-ghost-name{font-size:clamp(195px,24vw,310px)}
}
@media(max-width:900px){
  .hero--canonical{min-height:900px}
  .hero--canonical .hero-content{min-height:900px;align-items:flex-start;padding:84px 24px 40px}
  .hero--canonical .hero-copy-block{min-height:0;width:min(100%,560px)}
  .hero--canonical .hero-photo{object-position:68% 44%}
  .hero--canonical .hero-mask{
    background:
      linear-gradient(180deg,rgba(3,3,3,.76) 0%,rgba(3,3,3,.52) 32%,rgba(3,3,3,.74) 100%),
      linear-gradient(90deg,rgba(3,3,3,.95) 0%,rgba(3,3,3,.68) 55%,rgba(3,3,3,.16) 100%);
  }
  .hero--canonical .hero-legacy-echo{margin-left:0;white-space:normal}
  .hero--canonical .hero-ghost-name{font-size:clamp(150px,34vw,250px)}
  .hero--canonical .hero-ghost-presence{font-size:clamp(17px,3.4vw,24px);white-space:normal}
}
@media(max-width:640px){
  .hero--canonical{min-height:840px}
  .hero--canonical .hero-content{min-height:840px;padding:76px 18px 30px}
  .hero--canonical .hero-name{font-size:clamp(88px,25vw,126px)}
  .hero--canonical .hero-presence{font-size:12px;letter-spacing:.15em}
  .hero--canonical .hero-inline-actions{gap:10px;flex-wrap:wrap;width:100%}
  .hero--canonical .hero-small-cta{flex:1 1 calc(50% - 10px);padding-inline:10px}
  .hero--canonical .hero-ghost-name{font-size:clamp(120px,31vw,190px)}
  .hero--canonical .hero-main-cta{min-width:0;width:100%;min-height:58px;font-size:12px;letter-spacing:.20em;padding-inline:14px}
}

/* ===== Hero section approval pass v3 — match approved desktop composition ===== */
@media (min-width: 921px) {
  .hero--canonical {
    min-height: calc(100svh - 42px);
  }

  .hero--canonical .hero-photo {
    object-position: center 46%;
    filter: brightness(.98) saturate(.90) contrast(1.02);
  }

  .hero--canonical .hero-mask {
    background:
      linear-gradient(90deg,
        rgba(4,4,4,1) 0%,
        rgba(4,4,4,.99) 27%,
        rgba(4,4,4,.94) 38%,
        rgba(4,4,4,.72) 49%,
        rgba(4,4,4,.32) 61%,
        rgba(4,4,4,.06) 75%,
        rgba(4,4,4,0) 88%),
      linear-gradient(180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.02) 46%,
        rgba(0,0,0,.18) 100%);
  }

  .hero--canonical .hero-content {
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 42px);
    margin: 0;
    padding: clamp(54px, 6.8vh, 68px) 0 42px clamp(72px, 4.9vw, 94px);
    align-items: flex-start;
  }

  .hero--canonical .hero-copy-block {
    width: min(690px, 43vw);
    min-height: 0;
  }

  .hero--canonical .hero-kicker {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: .19em;
  }

  .hero--canonical .hero-name {
    font-size: clamp(150px, 10.6vw, 196px);
    line-height: .80;
  }

  .hero--canonical .hero-legacy-echo {
    margin: -2px 0 0 48px;
    font-size: clamp(23px, 1.72vw, 31px);
    letter-spacing: .20em;
    color: rgba(239,233,222,.16);
  }

  .hero--canonical .hero-presence {
    margin-top: 7px;
    font-size: clamp(16px, 1.18vw, 22px);
    letter-spacing: .19em;
  }

  .hero--canonical .hero-inline-actions {
    margin-top: 18px;
  }

  .hero--canonical .hero-small-cta {
    min-height: 38px;
    padding: 10px 18px;
    font-size: 10px;
  }

  .hero--canonical .hero-ghost-name {
    margin-top: 10px;
    width: 100%;
    overflow: visible;
    font-size: clamp(245px, 17.6vw, 322px);
    line-height: .70;
    color: rgba(239,233,222,.105);
  }

  .hero--canonical .hero-ghost-presence {
    margin-top: 22px;
    font-size: clamp(22px, 1.75vw, 32px);
    letter-spacing: .22em;
    color: rgba(239,233,222,.145);
  }

  .hero--canonical .hero-main-cta {
    margin-top: 38px;
    width: min(100%, 446px);
    min-width: 0;
    min-height: 70px;
    padding: 18px 28px;
    font-size: clamp(15px, 1.05vw, 19px);
  }
}

@media (min-width: 1440px) and (max-height: 880px) {
  .hero--canonical .hero-content {
    padding-top: 54px;
    padding-bottom: 28px;
  }
  .hero--canonical .hero-name {
    font-size: clamp(150px, 10vw, 184px);
  }
  .hero--canonical .hero-ghost-name {
    font-size: clamp(230px, 16.7vw, 304px);
  }
  .hero--canonical .hero-ghost-presence {
    margin-top: 16px;
  }
  .hero--canonical .hero-main-cta {
    margin-top: 30px;
    min-height: 66px;
  }
}

/* ===== Hero approval pass v4 — match the approved first screenshot ===== */
@media (min-width: 921px) {
  .hero--canonical {
    min-height: calc(100svh - 42px);
  }

  .hero--canonical .hero-photo {
    object-position: center 46%;
    filter: brightness(.96) saturate(.90) contrast(1.02);
  }

  /* The supplied hero image already contains typography on the left.
     Cover that area completely, then rebuild one clean HTML hierarchy. */
  .hero--canonical .hero-mask {
    background:
      linear-gradient(90deg,
        #040404 0%,
        #040404 39%,
        rgba(4,4,4,.985) 44%,
        rgba(4,4,4,.83) 51%,
        rgba(4,4,4,.48) 60%,
        rgba(4,4,4,.13) 72%,
        rgba(4,4,4,0) 84%),
      linear-gradient(180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.02) 56%,
        rgba(0,0,0,.16) 100%);
  }

  .hero--canonical .hero-content {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 42px);
    margin: 0;
    padding: 0;
  }

  .hero--canonical .hero-copy-block {
    position: absolute;
    top: clamp(82px, 11.9vh, 100px);
    left: clamp(72px, 5vw, 92px);
    width: 650px;
    height: 650px;
    min-height: 0;
    display: block;
  }

  .hero--canonical .hero-kicker,
  .hero--canonical .hero-name,
  .hero--canonical .hero-legacy-echo,
  .hero--canonical .hero-presence,
  .hero--canonical .hero-inline-actions,
  .hero--canonical .hero-ghost-name,
  .hero--canonical .hero-ghost-presence,
  .hero--canonical .hero-main-cta {
    position: absolute;
    margin: 0;
  }

  .hero--canonical .hero-kicker {
    top: 0;
    left: 0;
    z-index: 8;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .18em;
  }

  .hero--canonical .hero-name {
    top: 25px;
    left: 0;
    z-index: 8;
    font-size: clamp(230px, 14.8vw, 266px);
    line-height: .72;
    letter-spacing: .005em;
  }

  .hero--canonical .hero-legacy-echo {
    top: 132px;
    left: 47px;
    z-index: 3;
    width: 610px;
    white-space: nowrap;
    font-size: 25px;
    line-height: 1;
    letter-spacing: .23em;
    color: rgba(239,233,222,.12);
  }

  .hero--canonical .hero-presence {
    top: 157px;
    left: 0;
    z-index: 8;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .19em;
  }

  .hero--canonical .hero-inline-actions {
    top: 195px;
    left: 0;
    z-index: 9;
    display: flex;
  }

  .hero--canonical .hero-small-cta {
    min-height: 37px;
    padding: 10px 18px;
    font-size: 10px;
    letter-spacing: .16em;
  }

  .hero--canonical .hero-ghost-name {
    top: 200px;
    left: 42px;
    z-index: 2;
    width: 620px;
    overflow: visible;
    font-size: 500px;
    line-height: .64;
    letter-spacing: .005em;
    color: rgba(239,233,222,.105);
  }

  .hero--canonical .hero-ghost-presence {
    top: 452px;
    left: 48px;
    z-index: 4;
    width: 610px;
    white-space: nowrap;
    font-size: 25px;
    line-height: 1;
    letter-spacing: .23em;
    color: rgba(239,233,222,.12);
  }

  .hero--canonical .hero-main-cta {
    top: 533px;
    left: 48px;
    z-index: 8;
    width: 445px;
    min-width: 0;
    min-height: 80px;
    padding: 18px 30px;
    justify-content: center;
    font-size: 17px;
    letter-spacing: .25em;
    color: rgba(239,233,222,.48);
    border-color: rgba(239,233,222,.24);
    background: rgba(0,0,0,.22);
  }
}

@media (min-width: 921px) and (max-height: 760px) {
  .hero--canonical .hero-copy-block {
    top: 62px;
    transform: scale(.90);
    transform-origin: top left;
  }
}
@media (min-width: 921px) {
  .hero--canonical .hero-ghost-name { overflow: hidden; }
}

/* ===== Hero approval pass v5 — proportional lock to approved screenshot ===== */
@media (min-width: 921px) {
  .hero--canonical .hero-photo {
    object-position: center 46%;
    filter: brightness(.97) saturate(.90) contrast(1.02);
  }

  .hero--canonical .hero-mask {
    background:
      linear-gradient(90deg,
        #040404 0%,
        #040404 39%,
        rgba(4,4,4,.985) 44%,
        rgba(4,4,4,.82) 52%,
        rgba(4,4,4,.45) 61%,
        rgba(4,4,4,.12) 73%,
        rgba(4,4,4,0) 84%),
      linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.02) 56%,rgba(0,0,0,.16));
  }

  .hero--canonical .hero-content {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 42px);
    margin: 0;
    padding: 0;
  }

  .hero--canonical .hero-copy-block {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
  }

  .hero--canonical .hero-kicker,
  .hero--canonical .hero-name,
  .hero--canonical .hero-legacy-echo,
  .hero--canonical .hero-presence,
  .hero--canonical .hero-inline-actions,
  .hero--canonical .hero-ghost-name,
  .hero--canonical .hero-ghost-presence,
  .hero--canonical .hero-main-cta {
    position: absolute;
    margin: 0;
  }

  .hero--canonical .hero-kicker {
    top: 12%;
    left: 5%;
    z-index: 8;
    font-size: clamp(8px,.52vw,10px);
    line-height: 1;
    letter-spacing: .18em;
  }

  .hero--canonical .hero-name {
    top: 15.3%;
    left: 5.3%;
    z-index: 8;
    font-size: 14.8vw;
    line-height: .72;
    letter-spacing: .005em;
  }

  .hero--canonical .hero-legacy-echo {
    top: 28.1%;
    left: 7.6%;
    z-index: 3;
    width: 31vw;
    white-space: nowrap;
    font-size: 1.45vw;
    line-height: 1;
    letter-spacing: .23em;
    color: rgba(239,233,222,.12);
  }

  .hero--canonical .hero-presence {
    top: 30.9%;
    left: 5%;
    z-index: 8;
    font-size: .92vw;
    line-height: 1;
    letter-spacing: .19em;
  }

  .hero--canonical .hero-inline-actions {
    top: 35.3%;
    left: 5%;
    z-index: 9;
    display: flex;
  }

  .hero--canonical .hero-small-cta {
    min-height: 4.35vh;
    padding: 1.05vh 1.02vw;
    font-size: .56vw;
    letter-spacing: .16em;
  }

  .hero--canonical .hero-ghost-name {
    top: 36%;
    left: 5.3%;
    z-index: 2;
    width: 34vw;
    overflow: hidden;
    font-size: 28vw;
    line-height: .64;
    letter-spacing: .005em;
    color: rgba(239,233,222,.105);
  }

  .hero--canonical .hero-ghost-presence {
    top: 66.2%;
    left: 7.6%;
    z-index: 4;
    width: 31vw;
    white-space: nowrap;
    font-size: 1.45vw;
    line-height: 1;
    letter-spacing: .23em;
    color: rgba(239,233,222,.12);
  }

  .hero--canonical .hero-main-cta {
    top: 75.6%;
    left: 7.6%;
    z-index: 8;
    width: 24.8vw;
    min-width: 0;
    min-height: 9.7vh;
    padding: 1.8vh 1.7vw;
    justify-content: center;
    font-size: .95vw;
    letter-spacing: .25em;
    color: rgba(239,233,222,.48);
    border-color: rgba(239,233,222,.24);
    background: rgba(0,0,0,.22);
  }
}
@media (min-width: 921px) {
  .hero--canonical .hero-name { font-size: clamp(220px, 14.8vw, 266px); }
  .hero--canonical .hero-ghost-name { font-size: clamp(390px, 28vw, 500px); }
}


/* ===== Hero implementation lock — approved visual plate ===== */
.hero-visual-plate,
.hero-hitboxes{display:none}
@media (min-width: 921px) {
  .hero--canonical{
    min-height:auto;
    padding:0;
    position:relative;
    overflow:hidden;
    background:#040404;
  }
  .hero--canonical .hero-bg,
  .hero--canonical .hero-mask{display:none}
  .hero--canonical .hero-visual-plate{display:block;position:relative;z-index:1}
  .hero--canonical .hero-approved-plate{display:none;width:100%;height:auto;vertical-align:top}
  html:not([data-lang]) .hero--canonical .hero-approved-plate--pt,
  html[data-lang="pt"] .hero--canonical .hero-approved-plate--pt{display:block}
  html[data-lang="en"] .hero--canonical .hero-approved-plate--en{display:block}
  .hero--canonical .hero-content{position:absolute;inset:0;z-index:2;pointer-events:none;display:block;min-height:0;padding:0;margin:0}
  .hero--canonical .hero-copy-block{position:absolute;inset:0;opacity:0;pointer-events:none}
  .hero--canonical .hero-hitboxes{display:block;position:absolute;inset:0;z-index:3}
  .hero--canonical .hero-hitbox{position:absolute;display:block}
  .hero--canonical .hero-hitbox--primary{left:8.6%;top:58.9%;width:15.1%;height:7.4%}
  .hero--canonical .hero-hitbox--about{left:24.8%;top:58.9%;width:15.6%;height:7.4%}
  .hero--canonical .hero-hitbox--main{left:8.6%;top:72.1%;width:30.1%;height:8.1%}
}


/* --- Hero step 7 refinement --- */
.hero--canonical .hero-photo{
  object-position:center center;
  filter:brightness(.92) saturate(.92) contrast(1.03);
}
.hero--canonical .hero-mask{
  background:
    linear-gradient(90deg,
      rgba(2,2,2,1) 0%,
      rgba(2,2,2,1) 28%,
      rgba(2,2,2,.97) 40%,
      rgba(2,2,2,.88) 49%,
      rgba(2,2,2,.56) 60%,
      rgba(2,2,2,.18) 72%,
      rgba(2,2,2,0) 84%),
    linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.10) 55%,rgba(0,0,0,.36));
}
.hero--canonical .hero-content{
  align-items:center;
}
.hero--canonical .hero-copy-block{
  width:min(100%, 640px);
  min-height:720px;
  justify-content:center;
}
.hero--canonical .hero-kicker{
  color:rgba(240,235,224,.94);
  font-size:clamp(15px,1vw,18px);
  letter-spacing:.38em;
  margin:0 0 14px;
}
.hero--canonical .hero-name{
  font-size:clamp(132px,14.5vw,214px);
  line-height:.8;
  letter-spacing:.01em;
  text-shadow:0 3px 16px rgba(0,0,0,.22);
}
.hero--canonical .hero-legacy-echo{
  margin:10px 0 0;
  color:var(--copper);
  opacity:1;
  font-size:clamp(34px,3.3vw,62px);
  line-height:1;
  letter-spacing:.20em;
  font-weight:500;
}
.hero--canonical .hero-presence{
  margin:18px 0 0;
  color:rgba(240,235,224,.98);
  font-size:clamp(15px,1.18vw,22px);
  letter-spacing:.24em;
}
.hero--canonical .hero-inline-actions{
  margin-top:28px;
  gap:18px;
  flex-wrap:wrap;
}
.hero--canonical .hero-small-cta{
  min-height:44px;
  padding:12px 26px;
  font-size:11px;
}
.hero--canonical .hero-ghost-name{
  margin-top:26px;
  line-height:.74;
  font-size:clamp(230px,24vw,390px);
  color:rgba(239,233,222,.08);
}
.hero--canonical .hero-ghost-presence{
  margin-top:22px;
  color:rgba(239,233,222,.14);
  letter-spacing:.25em;
}
.hero--canonical .hero-main-cta{
  margin-top:30px;
  min-width:520px;
  background:rgba(0,0,0,.34);
  border-color:rgba(181,116,42,.82);
  color:var(--copper);
}
.hero--canonical .hero-main-cta:hover{
  background:rgba(0,0,0,.54);
  border-color:var(--ivory);
  color:var(--ivory);
}
@media(max-width:1180px){
  .hero--canonical .hero-copy-block{min-height:680px}
  .hero--canonical .hero-legacy-echo{font-size:clamp(28px,3vw,54px)}
  .hero--canonical .hero-main-cta{min-width:440px}
}
@media(max-width:900px){
  .hero--canonical .hero-mask{
    background:
      linear-gradient(180deg,rgba(2,2,2,.62) 0%,rgba(2,2,2,.44) 25%,rgba(2,2,2,.34) 56%,rgba(2,2,2,.64) 100%),
      linear-gradient(90deg,rgba(2,2,2,.86) 0%,rgba(2,2,2,.32) 100%);
  }
  .hero--canonical .hero-photo{object-position:66% center}
  .hero--canonical .hero-copy-block{
    min-height:auto;
    width:100%;
    padding-top:44px;
    padding-bottom:32px;
  }
  .hero--canonical .hero-ghost-name{font-size:clamp(150px,34vw,260px)}
  .hero--canonical .hero-legacy-echo{font-size:clamp(22px,6vw,34px)}
  .hero--canonical .hero-main-cta{min-width:min(100%, 420px)}
}
@media(max-width:640px){
  .hero--canonical .hero-kicker{letter-spacing:.28em;font-size:12px}
  .hero--canonical .hero-name{font-size:clamp(94px,24vw,132px)}
  .hero--canonical .hero-presence{font-size:13px;letter-spacing:.18em}
  .hero--canonical .hero-inline-actions{gap:12px}
  .hero--canonical .hero-main-cta{min-width:100%;font-size:13px;letter-spacing:.18em}
  .hero--canonical .hero-ghost-presence{white-space:normal}
}
