/*
 * v11.1 — Homepage hero proportion pass.
 * Goal: the portrait supports the headline instead of overpowering it.
 * Presentation-only overrides; no content, routing or SEO behaviour changes.
 */

/* Desktop: turn the oversized background portrait into a composed editorial plate. */
@media (min-width: 1101px) {
  body.as-v111.as94-home .as100-hero {
    min-height: 780px;
  }

  body.as-v111.as94-home .as100-hero-inner {
    min-height: 688px;
    padding-top: 54px;
    padding-bottom: 44px;
    z-index: 4;
  }

  body.as-v111.as94-home .as100-hero-copy {
    max-width: 650px;
    padding-bottom: 86px;
  }

  body.as-v111.as94-home .as100-hero-image {
    position: absolute;
    z-index: 3;
    inset: clamp(136px, 14vh, 164px) max(38px, calc((100vw - 1200px) / 2)) auto auto;
    width: clamp(365px, 31.5vw, 475px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(223, 232, 247, .24);
    border-radius: 2px;
    background: #081a37;
    box-shadow:
      0 38px 86px rgba(0, 8, 28, .42),
      0 8px 24px rgba(0, 19, 55, .24);
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: translateZ(0);
  }

  body.as-v111.as94-home .as100-hero-image .as94-picture,
  body.as-v111.as94-home .as100-hero-image .as94-picture img {
    display: block;
    width: 100%;
    height: 100%;
  }

  body.as-v111.as94-home .as100-hero-image .as94-picture img {
    object-fit: cover;
    object-position: var(--photo-d-x, 50%) var(--photo-d-y, 28%);
    filter: saturate(.93) contrast(1.035) brightness(.96) !important;
  }

  /* Fine frame and a restrained cinematic highlight. */
  body.as-v111.as94-home .as100-hero-image::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .20);
    pointer-events: none;
  }

  body.as-v111.as94-home .as100-hero-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -18% -48%;
    background: linear-gradient(108deg, transparent 40%, rgba(255,255,255,.12) 49%, rgba(216,192,138,.07) 52%, transparent 60%);
    mix-blend-mode: screen;
    opacity: .52;
    transform: translateX(-24%);
    pointer-events: none;
  }

  /* Rebalance the shade now that the image is a framed portrait, not a background. */
  body.as-v111.as94-home .as100-hero-shade {
    z-index: 1;
    inset: 92px 0 0;
    background:
      radial-gradient(circle at 78% 40%, rgba(16, 66, 145, .16), transparent 34%),
      linear-gradient(90deg, #07162d 0%, #07162df8 42%, #07162dd9 57%, #07162d70 78%, #07162d45 100%);
  }

  body.as-v111.as94-home .as100-hero h1 {
    max-width: 630px;
    margin-bottom: 25px;
    text-shadow: 0 16px 44px rgba(0, 0, 0, .22);
  }

  body.as-v111.as94-home .as100-hero h1 .as1025-hero-name {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-bottom: 17px;
    color: #f2dfb5;
    text-shadow: 0 12px 34px rgba(216, 192, 138, .12);
  }

  body.as-v111.as94-home .as100-hero h1 .as1025-hero-name::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: -8px;
    width: clamp(62px, 8vw, 116px);
    height: 1px;
    background: linear-gradient(90deg, var(--as11-champagne), rgba(216,192,138,0));
  }

  body.as-v111.as94-home .as100-role {
    max-width: 470px;
  }

  body.as-v111.as94-home .as100-hero-foot {
    z-index: 5;
  }
}

/* Medium screens: preserve the same hierarchy with a slightly tighter portrait. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.as-v111.as94-home .as100-hero {
    min-height: 730px;
  }

  body.as-v111.as94-home .as100-hero-inner {
    min-height: 638px;
    padding-top: 46px;
  }

  body.as-v111.as94-home .as100-hero-copy {
    max-width: 56vw;
    padding-bottom: 76px;
  }

  body.as-v111.as94-home .as100-hero-image {
    position: absolute;
    z-index: 3;
    inset: 142px 28px auto auto;
    width: min(38vw, 405px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(223, 232, 247, .22);
    box-shadow: 0 30px 70px rgba(0, 8, 28, .38);
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.as-v111.as94-home .as100-hero-image .as94-picture,
  body.as-v111.as94-home .as100-hero-image .as94-picture img {
    width: 100%;
    height: 100%;
  }

  body.as-v111.as94-home .as100-hero-image .as94-picture img {
    object-fit: cover;
    object-position: var(--photo-d-x, 50%) var(--photo-d-y, 28%);
  }

  body.as-v111.as94-home .as100-hero-image::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 10px;
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
  }

  body.as-v111.as94-home .as100-hero-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -18% -50%;
    background: linear-gradient(108deg, transparent 41%, rgba(255,255,255,.10) 50%, transparent 59%);
    mix-blend-mode: screen;
    opacity: .45;
    pointer-events: none;
  }

  body.as-v111.as94-home .as100-hero-shade {
    z-index: 1;
    background: linear-gradient(90deg, #07162d 0%, #07162df8 45%, #07162dbd 68%, #07162d63 100%);
  }

  body.as-v111.as94-home .as100-hero h1 .as1025-hero-name {
    position: relative;
    display: inline-block;
    width: fit-content;
  }
}

/* Mobile: keep the portrait important, but not full-bleed or visually heavier than the headline. */
@media (max-width: 760px) {
  body.as-v111.as94-home .as100-hero {
    overflow: hidden;
  }

  body.as-v111.as94-home .as100-hero-inner {
    padding-bottom: 20px !important;
  }

  body.as-v111.as94-home .as100-hero-copy {
    padding-bottom: 22px;
  }

  body.as-v111.as94-home .as100-hero h1 .as1025-hero-name {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-bottom: 13px;
  }

  body.as-v111.as94-home .as100-hero h1 .as1025-hero-name::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: -6px;
    width: 74px;
    height: 1px;
    background: linear-gradient(90deg, var(--as11-champagne), transparent);
  }

  body.as-v111.as94-home .as100-hero-image {
    position: relative;
    inset: auto;
    z-index: 3;
    order: 2;
    width: calc(100% - 40px);
    max-width: 520px;
    margin: 8px auto 28px;
    aspect-ratio: 4 / 4.65;
    overflow: hidden;
    border: 1px solid rgba(223,232,247,.20);
    border-radius: 2px;
    box-shadow: 0 24px 52px rgba(0,8,28,.35);
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.as-v111.as94-home .as100-hero-image .as94-picture,
  body.as-v111.as94-home .as100-hero-image .as94-picture img {
    width: 100%;
    height: 100%;
  }

  body.as-v111.as94-home .as100-hero-image .as94-picture img {
    object-fit: cover;
    object-position: var(--photo-m-x, 50%) var(--photo-m-y, 28%);
    filter: saturate(.94) contrast(1.025) brightness(.97) !important;
  }

  body.as-v111.as94-home .as100-hero-image::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 9px;
    border: 1px solid rgba(255,255,255,.17);
    pointer-events: none;
  }

  body.as-v111.as94-home .as100-hero-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -20% -55%;
    background: linear-gradient(108deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%);
    opacity: .38;
    pointer-events: none;
  }
}

/* One entrance, then stillness: cinematic rather than distracting. */
html.motion-enabled body.as-v111.as94-home .as100-hero-image {
  animation: as111-portrait-arrive .9s .08s cubic-bezier(.18,.72,.2,1) both;
}
html.motion-enabled body.as-v111.as94-home .as100-hero h1 .as1025-hero-name {
  animation: as111-title-arrive .72s .02s cubic-bezier(.18,.72,.2,1) both;
}
html.motion-enabled body.as-v111.as94-home .as100-hero-image::after {
  animation: as111-light-pass 1.25s .52s ease-out both;
}

@keyframes as111-portrait-arrive {
  from {opacity:0; transform:translate3d(18px,14px,0) scale(.985);}
  to {opacity:1; transform:translate3d(0,0,0) scale(1);}
}
@keyframes as111-title-arrive {
  from {opacity:0; transform:translate3d(0,12px,0);}
  to {opacity:1; transform:translate3d(0,0,0);}
}
@keyframes as111-light-pass {
  from {transform:translateX(-28%); opacity:0;}
  38% {opacity:.46;}
  to {transform:translateX(28%); opacity:.16;}
}

@media (prefers-reduced-motion: reduce) {
  html body.as-v111.as94-home .as100-hero-image,
  html body.as-v111.as94-home .as100-hero-image::after,
  html body.as-v111.as94-home .as100-hero h1 .as1025-hero-name {
    animation: none !important;
    transform: none !important;
  }
}