/* ═══════════════════════════════════════════════════════════════════════════
   hero-senior.css — the full-bleed portrait hero (.hero-c)

   Loads AFTER haven.css and overrides the ".hv .hero" block for this variant
   only. The composition: copy holds the left seven columns, the photograph
   holds the right of the frame and runs to every edge, and the navy ground
   washes leftward across it so the image and the field are one surface — not
   a picture pasted onto a page. There is no card, no border, no radius on the
   portrait; its edges are made of gradient, not geometry.
   ═══════════════════════════════════════════════════════════════════════════ */

.hv .hero-c{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:min(760px,88vh);
  background:var(--ink-800);
  color:var(--bone);
  padding-block:calc(var(--nav-height,72px) + clamp(48px,6vw,88px)) clamp(56px,7vw,96px);
}

/* ─── The image field ───
   Absolute, so it bleeds past the shell's gutters to the top, right and bottom
   edges of the hero. Decorative: the h1 carries the message. */
.hv .hero-c .hero-canvas{
  position:absolute;
  top:0;right:0;bottom:0;left:auto;
  width:min(56%,1040px);
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hv .hero-c .hero-canvas picture{
  position:absolute;
  inset:0;
  display:block;
  /* The portrait has no edges of its own: it is masked away toward the copy
     and feathered at the top and bottom, so it dissolves into the ink rather
     than ending. Two masks, intersected. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.85) 24%, #000 38%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 76%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.85) 24%, #000 38%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 76%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hv .hero-c .hero-canvas img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:36% 26%;   /* keeps both faces clear of the left falloff */
  /* undo the plate treatment haven.css gives .hv img */
  border:0;
  border-radius:0;
  box-shadow:none;
  background:none;
  aspect-ratio:auto;
}

/* ─── The wash ───
   Navy pulled back over the photograph from the left, plus a floor and a
   ceiling so the image never meets a section edge as a hard rectangle. The
   last layer is the same ambient navy-mid light .hv .hero::before already
   throws, continued across the image so both read as one light source. */
.hv .hero-c .hero-wash{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  pointer-events:none;
  background:
    linear-gradient(to right,
      #0A1526 0%,
      rgba(10,21,38,.94) 24%,
      rgba(10,21,38,.58) 44%,
      rgba(10,21,38,.20) 66%,
      rgba(10,21,38,0) 86%),
    linear-gradient(to top,
      #0A1526 0%,
      rgba(10,21,38,.58) 20%,
      rgba(10,21,38,0) 52%),
    linear-gradient(to bottom,
      rgba(10,21,38,.72) 0%,
      rgba(10,21,38,.18) 22%,
      rgba(10,21,38,0) 40%),
    radial-gradient(120% 90% at 84% 20%,
      rgba(42,82,152,.26) 0%,
      rgba(10,21,38,0) 64%);
}

/* ─── The lockup ─── */
.hv .hero-c .shell{position:relative;z-index:2}
.hv .hero-c .hero-lockup{
  width:min(100%,calc(58.334% - 22px));
  max-width:660px;
}
.hv .hero-c .hero-lockup .lede{max-width:46ch}
.hv .hero-c .hero-lockup .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hv .hero-c .hero-sign{max-width:34ch}

/* 1180 — the copy needs more of the frame before the image gives way */
@media (max-width:1180px){
  .hv .hero-c{min-height:min(680px,84vh)}
  .hv .hero-c .hero-canvas{width:52%}
  .hv .hero-c .hero-lockup{width:min(100%,64%)}
}

/* 900 — the image stops being a column and becomes a full-width plate above
   the copy, with the wash running bottom-up into the type instead of leftward */
@media (max-width:900px){
  .hv .hero-c{
    display:block;
    min-height:0;
    padding-top:0;
    padding-bottom:clamp(48px,9vw,76px);
  }
  .hv .hero-c .hero-canvas{
    position:relative;
    inset:auto;
    width:100%;
    height:clamp(320px,52vh,460px);
    margin-bottom:-44px;
  }
  .hv .hero-c .hero-canvas picture{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.35) 82%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.35) 82%, transparent 100%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
  .hv .hero-c .hero-canvas img{object-position:50% 24%}
  .hv .hero-c .hero-wash{
    background:
      linear-gradient(to top,
        #0A1526 0%,
        rgba(10,21,38,.90) 30%,
        rgba(10,21,38,.45) 58%,
        rgba(10,21,38,.10) 84%,
        rgba(10,21,38,0) 100%),
      linear-gradient(to bottom,
        rgba(10,21,38,.72) 0%,
        rgba(10,21,38,0) 34%);
  }
  .hv .hero-c .hero-lockup{width:auto;max-width:none}
  .hv .hero-c .hero-lockup .lede{max-width:none}
}

@media (max-width:560px){
  .hv .hero-c .hero-canvas{height:clamp(280px,44vh,380px);margin-bottom:-32px}
}

/* Landscape phones: the plate would eat the whole viewport */
@media (max-height:520px) and (orientation:landscape){
  .hv .hero-c{min-height:auto;padding-block:calc(var(--nav-height,72px) + 28px) 40px}
  .hv .hero-c .hero-canvas{height:auto}
}