/* V15 – fullscreen hero reveal: true CSS sticky pin, no scaling an existing clipped image.
   The visual uses one independent full-resolution image layer interpolated from the
   actual card bounds to the viewport bounds. It never distorts the source photo. */
.hero.has-hero-pin{
  height:235svh!important;
  min-height:0!important;
  overflow:visible!important;
  isolation:auto;
  background:#091b31;
  position:relative;
  z-index:2;
}
.hero.has-hero-pin::before{display:none}
.hero-pin-stage{
  position:relative;
  min-height:100svh;
  background:radial-gradient(ellipse at 65% 45%,#203e5a 0%,#102a49 55%,#081a30 100%);
  overflow:hidden;
}
.hero.has-hero-pin .hero-pin-stage{
  position:sticky;
  top:0;
  height:100svh;
  min-height:620px;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  overflow:hidden;
}
.hero.has-hero-pin .hero-layout{
  flex:1 1 auto;
  width:min(1330px,calc(100% - 104px));
  min-height:0!important;
  padding:105px 0 34px!important;
  grid-template-columns:1.04fr .96fr;
  gap:5%;
  align-items:center;
}
.hero.has-hero-pin .hero-copy{max-width:625px;position:relative;z-index:3;min-width:0}
.hero.has-hero-pin h1{
  font-size:clamp(49px,4.8vw,76px)!important;
  letter-spacing:-.055em;
  line-height:1.08;
  margin:18px 0 20px;
  max-width:630px;
}
.hero.has-hero-pin .hero-description-main{
  font:italic clamp(18px,1.5vw,24px)/1.45 var(--serif);
  max-width:605px;
  margin-bottom:13px;
}
.hero.has-hero-pin .hero-description-support{font-size:13px;line-height:1.7;max-width:520px}
.hero.has-hero-pin .hero-actions{margin-top:22px}
.hero.has-hero-pin .hero-bottom{margin-top:36px}
.hero.has-hero-pin .hero-visual{
  position:relative;
  height:min(64vh,585px);
  width:100%;
  max-width:560px;
  min-height:0;
  align-self:center;
  margin:0;
  transform:none!important;
}
/* Fallback if JavaScript cannot run: keep original framed photo. */
.hero.has-hero-pin.hero-effect-ready .hero-image-shell,
.hero.has-hero-pin.hero-effect-ready .hero-visual-title,
.hero.has-hero-pin.hero-effect-ready .hero-visual:after,
.hero.has-hero-pin.hero-effect-ready .hero-seal {opacity:0!important}
.hero.has-hero-pin.hero-effect-ready .hero-image-outline{opacity:0!important}
.hero.has-hero-pin .hero-footer{
  z-index:3;
  flex:0 0 auto;
  padding:14px 0 24px;
}
/* Photo starts exactly over the card; JS changes only geometry, not clip-path. */
.hero-expansion-image{
  display:none;
  position:absolute;
  z-index:9;
  left:0;top:0;
  width:1px;height:1px;
  overflow:hidden;
  background:#081a30;
  border:1px solid rgba(225,193,124,.38);
  border-radius:45% 45% 0 0;
  box-shadow:0 22px 65px rgba(0,0,0,.28);
  pointer-events:none;
  will-change:top,left,width,height,border-radius;
}
.hero-effect-ready .hero-expansion-image{display:block}
.hero-expansion-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:center center;filter:saturate(.96) contrast(1.04)}
.hero-expansion-shade{position:absolute;inset:35% 0 0;background:linear-gradient(to bottom,transparent,rgba(5,18,35,.72));pointer-events:none}
.hero-expansion-caption{
  position:absolute;z-index:2;bottom:26px;left:24px;
  display:flex;flex-direction:column;gap:5px;
  max-width:75%;color:#fff;
}
.hero-expansion-caption small{font-size:9px;font-weight:800;letter-spacing:.2em;color:#e4c580}
.hero-expansion-caption strong{font:500 clamp(26px,2.3vw,36px)/1.12 var(--serif);text-shadow:0 2px 25px #000a}
.hero-expansion-endmark{
  position:absolute;z-index:3;bottom:30px;left:4.7%;right:4.7%;
  color:#f8e6c4;font-size:11px;letter-spacing:.28em;font-weight:800;
  text-align:left;opacity:0;transform:translateY(15px);border-top:1px solid rgba(255,255,255,.4);padding-top:14px;
  text-shadow:0 2px 25px rgba(0,0,0,.8)
}
.hero.has-hero-pin .hero-layout,.hero.has-hero-pin .hero-footer,
.hero.has-hero-pin .hero-circle,.hero.has-hero-pin .hero-grain{will-change:opacity}
/* The full-screen image gets the stage, not the full 235vh section.
   The last part of the scroll keeps the image open before the next section enters. */
@media (max-width:1100px){
  .hero.has-hero-pin .hero-layout{width:calc(100% - 70px);padding-top:96px!important;gap:3%;}
  .hero.has-hero-pin h1{font-size:clamp(46px,5.5vw,67px)!important}
  .hero.has-hero-pin .hero-visual{height:min(56vh,510px)}
}
@media (max-width:680px){
  .hero.has-hero-pin{height:215svh!important;}
  .hero.has-hero-pin .hero-pin-stage{height:100svh;min-height:0!important}
  .hero.has-hero-pin .hero-layout{
    width:calc(100% - 36px);
    height:100%;min-height:0!important;
    padding:83px 0 12px!important;
    display:flex;flex-direction:column;gap:0;align-items:stretch;
    justify-content:start;
  }
  .hero.has-hero-pin .hero-copy{width:100%;order:0}
  .hero.has-hero-pin .hero .eyebrow{font-size:8px}
  .hero.has-hero-pin h1{font-size:clamp(35px,8.7vw,47px)!important;line-height:1.055;margin:8px 0 12px;letter-spacing:-.05em}
  .hero.has-hero-pin .eyebrow{font-size:8px;letter-spacing:.12em}
  .hero.has-hero-pin .hero-description-main{font-size:15px;line-height:1.4;margin:0 0 11px}
  .hero.has-hero-pin .hero-description-support{display:none}
  .hero.has-hero-pin .hero-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:nowrap}
  .hero.has-hero-pin .hero-actions .button{min-height:37px;font-size:9px;padding:0 11px;flex:1;white-space:nowrap;gap:6px}
  .hero.has-hero-pin .hero-bottom{display:none}
  .hero.has-hero-pin .hero-visual{order:1;width:min(100%,335px);max-width:none;height:29svh;min-height:175px;max-height:300px;align-self:center;margin:15px 0 0}
  .hero.has-hero-pin .hero-footer{display:none}
  .hero-expansion-caption{left:15px;bottom:14px}
  .hero-expansion-caption small{font-size:7px}
  .hero-expansion-caption strong{font-size:23px}
  .hero-expansion-endmark{bottom:27px;font-size:9px;letter-spacing:.14em}
}
@media (max-width:680px) and (max-height:735px){
  .hero.has-hero-pin .hero-layout{padding-top:99px!important;}
  .hero.has-hero-pin h1{font-size:clamp(30px,7.7vw,38px)!important;}
  .hero.has-hero-pin .hero-description-main{font-size:13px}
  .hero.has-hero-pin .hero-visual{height:25svh;min-height:155px;margin-top:10px}
  .hero.has-hero-pin .hero-actions .button{min-height:34px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .hero.has-hero-pin{height:auto!important;min-height:0!important}
  .hero.has-hero-pin .hero-pin-stage{position:relative!important;height:auto!important;min-height:85svh!important}
  .hero-effect-ready .hero-expansion-image{display:none!important}
  .hero.has-hero-pin.hero-effect-ready .hero-image-shell,
  .hero.has-hero-pin.hero-effect-ready .hero-visual-title,
  .hero.has-hero-pin.hero-effect-ready .hero-seal{opacity:1!important}
}