/* ============================================================
   Alexio Ramirez — hero artifact, embedded in the homepage
   Authored against the concept at 1672 x 941. Every length is a
   measured design pixel expressed in `u`, so the stage scales from
   one container-query unit.

   Loads AFTER css/site.css. Fonts come from css/fonts.css.
   The host page's <header class="nav"> owns the nav and the logo;
   this artifact is hero CONTENT only.
   ============================================================ */

/* ---------- stage + theme ---------------------------------- */

.bh-hero{
  /* theme tokens — sampled from the approved concept.
     var(--x, fallback) so a host that already defines them wins. */
  --accent:      var(--tk-accent,      #D9B48F);
  --accent-lift: var(--tk-accent-lift, #EAC3A0);
  --cream:       var(--tk-cream,       #F5E5D8);
  --on-cream:    var(--tk-on-cream,    #16120F);
  --on-night:    var(--tk-on-night,    #FFFDF6);
  --on-night-2:  var(--tk-on-night-2,  #EDE7DE);
  --night:       var(--tk-night,       #0B0908);
  --line:        var(--tk-line,        rgba(255,253,246,.30));
  --line-soft:   var(--tk-line-soft,   rgba(255,253,246,.16));
  --head:        var(--tk-font-head,   "Montserrat");
  --body:        var(--tk-font-body,   "Plus Jakarta Sans");
  --script:      var(--tk-font-accent, "MsMadi");

  /* one unit == one design pixel of the 1672-wide concept */
  /* knobs resolved by the render/diff loop against the concept */
  --kicker-top: 218;  --kicker-ls: 2.5;
  --title-top:  259;  --title-ls:  5.5;
  --sub-top:    485;
  --nav-left:   470;  --nav-top: 36;   --nav-gap: 48;
  --brand-ls:   4.63; --brandsub-ls: 1.8;
  --brand-top:  29;
  --sig-size:   39;   --sig-left: 1384; --sig-top: 476;

  --u: calc(100cqi / 1672);

  /* The section carries BOTH .hero and .bh-hero: js/site.js appends its
     sticky-nav sentinel and its dock sentinel to $('.hero'), so that class
     has to stay. These four lines neutralise the old .hero box (grid stack,
     max(100svh, 700u) height) that would otherwise fight the 16:9 artifact.
     This file loads after site.css, so equal specificity resolves our way. */
  display:block;
  height:auto;
  min-height:0;
  grid-template-areas:none;

  position:relative;
  container-type:inline-size;
  aspect-ratio:1672 / 941;
  width:100%;
  overflow:hidden;
  background:var(--night);
  isolation:isolate;
  font-family:var(--body),system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@supports not (width:1cqi){ .bh-hero{ --u:calc(100vw / 1672) } }

.bh-hero *,
.bh-hero *::before,
.bh-hero *::after{ box-sizing:border-box }

/* NOTE the specificity: `.bh-hero a` is (0,0,1,1) and beats a bare
   component class like `.bh-btn--primary` (0,0,1,0), so any anchor that
   paints its OWN colour has to be written with the .bh-hero ancestor too,
   or it silently inherits and the label vanishes into its own fill. */
.bh-hero a{ text-decoration:none; color:inherit }
.bh-hero h1,.bh-hero p{ margin:0 }

/* ---------- layer 1 · plates -------------------------------- */

.bh-hero__bg,
.bh-hero__broker{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}
.bh-hero__bg{ z-index:1 }

/* the cutout rides above the copy, exactly where he stood in the plate */
.bh-hero__broker{
  z-index:40;
  pointer-events:none;
  filter:brightness(.97) saturate(.98) contrast(1.01);
}

/* left-weighted scrim so the copy holds over the reconstructed window */
/* Measured against the concept column-by-column on text-free bands: the
   approved design carries NO scrim — the reconstructed interior is already
   dark where the copy sits, so any overlay reads as mud. Desktop stays
   clean; the mobile rule below adds the scrim that stacked copy needs. */
.bh-hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:none;
}

/* ---------- layer 3 · copy ---------------------------------- */
/* Each element is pinned to the coordinate measured off the concept;
   the --*-top knobs are box-top values resolved by the render/diff
   loop so the INK lands on the concept's cap-top.                   */

.bh-copy{
  position:absolute; z-index:20; inset:0;
  color:var(--on-night);
  pointer-events:none;
}
.bh-copy > *{ position:absolute; pointer-events:auto }

.bh-kicker{
  left:calc(103*var(--u));
  top:calc(var(--kicker-top)*var(--u));
  display:flex; align-items:center;
  font-family:var(--body),sans-serif;
  font-size:calc(15*var(--u));
  font-weight:400;
  letter-spacing:calc(var(--kicker-ls)*var(--u));
  line-height:1;
  text-transform:uppercase;
  color:var(--on-night-2);
  white-space:nowrap;
}
.bh-kicker__rule{
  position:absolute;
  left:calc(259*var(--u));
  top:50%;
  width:calc(303*var(--u));
  height:1px;
  background:var(--line);
}

.bh-title{
  left:calc(100*var(--u));
  top:calc(var(--title-top)*var(--u));
  font-family:var(--head),sans-serif;
  font-size:calc(71*var(--u));
  font-weight:400;
  line-height:calc(71.5*var(--u));
  letter-spacing:calc(var(--title-ls)*var(--u));
  text-transform:uppercase;
  color:var(--on-night);
  white-space:nowrap;
}
.bh-title span{ display:block }

.bh-sub{
  left:calc(103*var(--u));
  top:calc(var(--sub-top)*var(--u));
  font-family:var(--body),sans-serif;
  font-size:calc(22*var(--u));
  font-weight:400;
  line-height:calc(32*var(--u));
  letter-spacing:calc(.1*var(--u));
  color:var(--on-night-2);
  white-space:nowrap;
}

/* ---------- the two CTAs (replacing the concept's filter row) ---------- */

.bh-ctas{
  left:calc(104*var(--u));
  top:calc(587*var(--u));
  display:flex; align-items:stretch;
  gap:calc(14*var(--u));
}

.bh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:calc(56*var(--u));
  padding:0 calc(36*var(--u));
  font-family:var(--body),sans-serif;
  font-size:calc(15*var(--u));
  font-weight:500;
  letter-spacing:calc(1.9*var(--u));
  text-transform:uppercase;
  white-space:nowrap;
  border-radius:calc(2*var(--u));
  transition:background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}
.bh-btn{ gap:calc(11*var(--u)) }
.bh-btn:hover{ transform:translateY(calc(-1*var(--u))) }

/* the host page's arrow, carried into our button language */
.bh-btn__ico{
  width:calc(15*var(--u)); height:calc(15*var(--u));
  transition:transform .28s ease;
}
.bh-btn--primary:hover .bh-btn__ico{ transform:translateX(calc(3*var(--u))) }

.bh-hero .bh-btn--primary{
  background:var(--cream);
  color:var(--on-cream);
  border:1px solid var(--cream);
  box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(0,0,0,.34);
}
.bh-hero .bh-btn--primary:hover{ background:#FFF4EA; border-color:#FFF4EA }

.bh-hero .bh-btn--ghost{
  background:rgba(12,10,9,.42);
  color:var(--on-night);
  border:1px solid var(--line);
  backdrop-filter:blur(calc(3*var(--u)));
  -webkit-backdrop-filter:blur(calc(3*var(--u)));
}
.bh-hero .bh-btn--ghost:hover{ background:rgba(12,10,9,.62); border-color:var(--accent); color:var(--accent-lift) }

/* ---------- layer 4 · credential rail ----------------------- */

.bh-cred{
  position:absolute; z-index:20;
  left:calc(104*var(--u));
  top:calc(700*var(--u));
  width:calc(560*var(--u));
}
.bh-cred__rule{ display:block; width:100%; height:1px; background:var(--line-soft) }

.bh-cred__row{
  display:flex; align-items:center;
  margin-top:calc(19*var(--u));
}
.bh-cred__cell{
  display:flex; align-items:center;
  gap:calc(14*var(--u));
  padding-right:calc(26*var(--u));
}
.bh-cred__cell + .bh-cred__cell{
  padding-left:calc(26*var(--u));
  border-left:1px solid var(--line-soft);
}
.bh-cred__label{
  font-family:var(--head),sans-serif;
  font-size:calc(11*var(--u));
  font-weight:400;
  letter-spacing:calc(2*var(--u));
  text-transform:uppercase;
  color:rgba(255,253,246,.55);
  white-space:nowrap;
}
.bh-cred__value{
  font-family:var(--body),sans-serif;
  font-size:calc(12*var(--u));
  font-weight:400;
  letter-spacing:calc(.4*var(--u));
  color:rgba(255,253,246,.78);
  white-space:nowrap;
}
.bh-cred__mark{
  display:block;
  height:calc(32*var(--u));
  width:auto;
  opacity:.92;
}

/* ---------- layer 6 · signature ----------------------------- */

.bh-signature__ink{
  display:inline-block;
  transform:rotate(-4deg);
  transform-origin:0 50%;
}

.bh-signature{
  position:absolute; z-index:50;
  left:calc(var(--sig-left)*var(--u));
  top:calc(var(--sig-top)*var(--u));
  font-family:var(--script),cursive;
  font-size:calc(var(--sig-size)*var(--u));
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  color:var(--accent-lift);
  transform-origin:0 50%;
  text-shadow:0 calc(2*var(--u)) calc(14*var(--u)) rgba(0,0,0,.55);
  pointer-events:none;
}

/* ============================================================
   Mobile — stacked, the broker behind a heavier scrim
   ============================================================ */

@media (max-width: 760px){
  .bh-hero{
    aspect-ratio:auto;
    min-height:100svh;
    min-height:100vh;
    min-height:100svh;
    --u:calc(min(100vw, 520px) / 390);
    display:flex;
    flex-direction:column;
  }

  .bh-hero__bg{ height:100%; object-position:64% center }

  /* he sits low and behind the copy on a phone */
  .bh-hero__broker{
    top:auto; bottom:0; height:48%;
    object-fit:cover; object-position:76% bottom;
    z-index:5;
    opacity:.92;
    filter:brightness(.9) saturate(.95);
  }

  .bh-hero__scrim{
    z-index:10;
    background:
      linear-gradient(180deg,
        rgba(6,5,4,.86) 0,
        rgba(6,5,4,.58) calc(150*var(--u)),
        rgba(6,5,4,.50) 46%,
        rgba(6,5,4,.80) 78%,
        rgba(6,5,4,.95) 100%);
  }

  /* everything below flows normally, above the scrim */
  /* the host page's nav is fixed and pushes nothing, so the copy clears it
     here; --nav-h and --pad are the page's own tokens, which keeps the hero
     on the same left edge as every section below it. */
  .bh-copy{
    position:relative; z-index:20; inset:auto;
    padding:calc(var(--nav-h) + 46px) var(--pad) 0;
  }
  .bh-copy > *{ position:static }

  .bh-kicker{
    font-size:calc(11*var(--u));
    letter-spacing:calc(2.2*var(--u));
    gap:calc(14*var(--u));
  }
  .bh-kicker__rule{ position:static; width:calc(84*var(--u)); flex:none }

  .bh-title{
    margin-top:calc(20*var(--u));
    font-size:calc(42*var(--u));
    line-height:calc(45*var(--u));
    letter-spacing:calc(1.8*var(--u));
    white-space:normal;
  }
  .bh-sub{
    margin-top:calc(18*var(--u));
    font-size:calc(15*var(--u));
    line-height:calc(23*var(--u));
    white-space:normal;
  }
  .bh-sub br{ display:none }

  .bh-ctas{
    margin-top:calc(26*var(--u));
    flex-direction:column; align-items:stretch;
    gap:calc(11*var(--u));
  }
  .bh-btn{
    height:calc(52*var(--u));
    font-size:calc(12.5*var(--u));
    letter-spacing:calc(1.6*var(--u));
    padding:0 calc(20*var(--u));
  }

  .bh-cred{
    position:relative; z-index:20;
    left:auto; top:auto; width:auto;
    margin-top:auto;
    padding:calc(40*var(--u)) var(--pad) calc(30*var(--u));
  }
  .bh-cred__row{ margin-top:calc(15*var(--u)); flex-wrap:wrap; row-gap:calc(10*var(--u)) }
  .bh-cred__value{ white-space:normal }
  .bh-cred__mark{ height:calc(22*var(--u)) }
  .bh-cred__label{ font-size:calc(9*var(--u)); letter-spacing:calc(1.6*var(--u)) }
  .bh-cred__value{ font-size:calc(10*var(--u)) }
  .bh-cred__cell{ gap:calc(10*var(--u)); padding-right:calc(16*var(--u)) }
  .bh-cred__cell + .bh-cred__cell{ padding-left:calc(16*var(--u)) }

  .bh-signature{
    position:absolute;
    left:auto; right:var(--pad);
    top:auto; bottom:calc(96*var(--u));
    font-size:calc(30*var(--u));
    z-index:25;
  }
}

@media (prefers-reduced-motion: reduce){
  .bh-hero *{ transition:none !important }
}