/* ============================================================
   V19 — final hero geometry and overflow correction
   Uses a narrower, centered editorial canvas; fills the text
   column intentionally; and remains stable at laptop zoom levels.
   ============================================================ */
:root{
  --v19-shell-max:1180px;
  --v19-gutter:280px;
}

html,body{overflow-x:clip}

/* A consistent, more generous outer margin on wide screens. */
.shell,
.header-inner,
.v13-hero .hero-inner{
  width:min(var(--v19-shell-max),calc(100% - var(--v19-gutter)));
  margin-inline:auto;
}

.header-inner{
  max-width:var(--v19-shell-max);
  gap:30px;
}

/* Hero columns now occupy the available canvas without the large
   unused centre void seen in V18. */
.v13-hero .hero-inner{
  grid-template-columns:minmax(0,1fr) minmax(340px,380px);
  column-gap:clamp(46px,4.2vw,64px);
  align-items:start;
  justify-content:space-between;
  padding-block:clamp(54px,4.8vw,70px) clamp(64px,5.4vw,80px);
}
.v13-hero .hero-copy{
  width:100%;
  max-width:720px;
  padding:0;
  align-self:start;
}
.v13-hero h1{
  max-width:100%;
  margin-bottom:14px;
  font-size:clamp(2.85rem,3.25vw,3.35rem);
  line-height:1.025;
  letter-spacing:-.025em;
  white-space:normal;
  text-wrap:balance;
}
.v13-hero .hero-role{
  margin-bottom:25px;
  font-size:clamp(1.34rem,1.5vw,1.55rem);
  line-height:1.3;
}
.v13-hero .hero-intro{
  max-width:64ch;
  margin-bottom:18px;
  font-size:clamp(1rem,1.03vw,1.08rem);
  line-height:1.67;
}
.v13-hero .hero-detail{
  max-width:66ch;
  font-size:clamp(.95rem,.98vw,1.01rem);
  line-height:1.72;
}
.v13-hero .hero-actions{
  margin-top:28px;
}
.v13-hero .hero-portrait{
  width:100%;
  max-width:380px;
  justify-self:end;
  align-self:start;
}

/* The header collapses before its links can force horizontal scroll
   on laptops using 110–125% browser scaling. */
@media(max-width:1080px){
  .menu-toggle{display:block;margin-left:auto}
  .primary-nav{
    position:fixed;
    top:78px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:18px 30px 28px;
    background:#fff;
    box-shadow:0 18px 35px rgba(16,38,54,.13);
  }
  .primary-nav.open{display:flex}
  .primary-nav a,
  .primary-nav .nav-cta{
    padding:11px 0;
    font-size:1rem;
    text-align:left;
  }
  .primary-nav a::after,
  .primary-nav .nav-cta::after{display:none}
}

@media(max-width:1280px){
  :root{--v19-gutter:160px}
  .v13-hero .hero-inner{
    grid-template-columns:minmax(0,1fr) minmax(310px,340px);
    column-gap:clamp(36px,3.8vw,48px);
    padding-block:52px 68px;
  }
  .v13-hero h1{font-size:clamp(2.65rem,4vw,3.05rem)}
  .v13-hero .hero-portrait{max-width:340px}
}

@media(max-width:1020px){
  :root{--v19-gutter:96px}
  .v13-hero .hero-inner{
    grid-template-columns:minmax(0,1fr) minmax(285px,315px);
    column-gap:34px;
  }
  .v13-hero h1{font-size:clamp(2.5rem,4.7vw,2.85rem)}
  .v13-hero .hero-role{font-size:1.24rem}
  .v13-hero .hero-portrait{max-width:315px}
}

@media(max-width:900px){
  :root{--v19-gutter:52px}
  .shell,
  .header-inner,
  .v13-hero .hero-inner{width:calc(100% - var(--v19-gutter))}
  .v13-hero .hero-inner{
    grid-template-columns:1fr;
    gap:38px;
    padding-block:46px 64px;
  }
  .v13-hero .hero-copy{max-width:720px}
  .v13-hero h1{font-size:clamp(2.7rem,8vw,3.45rem)}
  .v13-hero .hero-portrait{justify-self:center;max-width:390px}
}

@media(max-width:620px){
  :root{--v19-gutter:34px}
  .v13-hero .hero-inner{gap:31px;padding-block:38px 54px}
  .v13-hero h1{font-size:clamp(2.35rem,10.7vw,2.95rem)}
  .v13-hero .hero-role{font-size:1.13rem}
}

/* Small optical inset: the copy and portrait sit equally inside the
   mathematical grid, matching the red placement guide supplied. */
@media(min-width:901px){
  .v13-hero .hero-copy{padding-left:20px}
  .v13-hero .hero-portrait{margin-right:20px}
}