/* LAWTER v6.0.18 — centered editorial hero + section-node clipping correction */

/* 1) Operating-section separator node: keep the terminal diamond fully inside
   the section that has overflow clipping. */
body.lawter-v6 .operating > .section-signature-line{
  top:4px!important;
}

/* 2) Hero: one coherent vertical composition on desktop as well as mobile.
   The headline becomes the editorial focal point, the network map follows it,
   and supporting copy/CTAs sit below the visualization. */
body.lawter-v6 .hero-v5{
  min-height:auto!important;
  align-items:start!important;
  padding:clamp(18px,2.2vh,30px) 0 clamp(62px,7vh,86px)!important;
}
body.lawter-v6 .hero-v5 .hero-grid-v5{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "heading"
    "map"
    "support";
  gap:0!important;
  align-items:start!important;
}
body.lawter-v6 .hero-v5 .hero-heading{
  grid-area:heading;
  width:min(100%,1100px)!important;
  max-width:1100px!important;
  justify-self:center!important;
  align-self:start!important;
  padding:0!important;
  text-align:center;
  z-index:4;
}
body.lawter-v6 .hero-v5 .hero-heading::before{display:none!important}
body.lawter-v6 .hero-v5 .hero-heading>.eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:max-content;
  max-width:100%;
  margin:0 auto 14px!important;
  text-align:center;
}
body.lawter-v6 .hero-v5 .hero-heading>.eyebrow::before{
  position:static!important;
  width:32px!important;
  flex:0 0 32px;
}
body.lawter-v6 .hero-v5 .hero-heading h1{
  max-width:11.7ch!important;
  margin:0 auto!important;
  text-align:center;
  font-size:clamp(72px,6.65vw,112px)!important;
  line-height:.94!important;
  letter-spacing:-.042em!important;
  text-wrap:balance;
}

body.lawter-v6 .hero-v5 .hero-trade-stage{
  grid-area:map;
  width:min(100%,1340px)!important;
  max-width:1340px!important;
  justify-self:center!important;
  margin:clamp(14px,1.5vw,24px) auto 0!important;
  transform:none!important;
  --trade-stage-offset:0px!important;
}
body.lawter-v6 .hero-v5 .trade-map-shell{
  width:112%!important;
  margin-left:-6%!important;
  transform:none!important;
}
body.lawter-v6 .hero-v5 .trade-map-viewport{
  aspect-ratio:1000/500!important;
}
body.lawter-v6 .hero-v5 .trade-world-map{
  opacity:.98!important;
}
body.lawter-v6 .hero-v5 .trade-map-glow{
  left:12%!important;
  right:10%!important;
  top:8%!important;
  bottom:5%!important;
  opacity:.96!important;
}

body.lawter-v6 .hero-v5 .hero-support{
  grid-area:support;
  width:min(100%,820px);
  justify-self:center;
  padding-top:clamp(8px,1.3vw,18px);
  text-align:center;
}
body.lawter-v6 .hero-v5 .hero-support .hero-lead{
  max-width:64ch!important;
  margin:0 auto 26px!important;
  color:rgba(225,233,242,.78)!important;
  font-size:clamp(16px,1.15vw,19px)!important;
  line-height:1.78!important;
}
body.lawter-v6 .hero-v5 .hero-support .hero-actions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
}

/* Give the support block the same quiet reveal language as the former hero copy. */
@media (prefers-reduced-motion:no-preference){
  body.lawter-v6 .hero-support.reveal .hero-lead,
  body.lawter-v6 .hero-support.reveal .hero-actions{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 620ms var(--motion-ease-out),transform 720ms var(--motion-ease-out);
  }
  body.lawter-v6 .hero-support.reveal.is-visible .hero-lead{
    opacity:1;transform:none;transition-delay:80ms;
  }
  body.lawter-v6 .hero-support.reveal.is-visible .hero-actions{
    opacity:1;transform:none;transition-delay:150ms;
  }
}

/* Wide desktop: let the map finally use the horizontal canvas instead of being
   compressed into the former two-column right side. */
@media(min-width:1361px){
  body.lawter-v6 .hero-v5 .hero-heading h1{max-width:12.2ch!important}
  body.lawter-v6 .hero-v5 .hero-trade-stage{width:min(100%,1400px)!important;max-width:1400px!important}
  body.lawter-v6 .hero-v5 .trade-map-shell{width:116%!important;margin-left:-8%!important}
}

/* Small laptop / tablet keeps the same editorial order but slightly tighter. */
@media(max-width:1180px){
  body.lawter-v6 .hero-v5{padding-top:24px!important;padding-bottom:66px!important}
  body.lawter-v6 .hero-v5 .hero-heading{max-width:900px!important}
  body.lawter-v6 .hero-v5 .hero-heading h1{
    max-width:12ch!important;
    font-size:clamp(58px,8.8vw,92px)!important;
  }
  body.lawter-v6 .hero-v5 .hero-trade-stage{margin-top:18px!important;width:min(100%,1040px)!important}
  body.lawter-v6 .hero-v5 .trade-map-shell{width:110%!important;margin-left:-5%!important}
  body.lawter-v6 .hero-v5 .hero-support{padding-top:10px}
}

@media(max-width:780px){
  body.lawter-v6 .hero-v5{padding-top:20px!important;padding-bottom:56px!important}
  body.lawter-v6 .hero-v5 .hero-heading{text-align:left;justify-self:start!important}
  body.lawter-v6 .hero-v5 .hero-heading>.eyebrow{justify-content:flex-start;margin-left:0!important;margin-right:0!important}
  body.lawter-v6 .hero-v5 .hero-heading h1{
    max-width:11.8ch!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left;
    font-size:clamp(48px,13.8vw,72px)!important;
    line-height:.96!important;
  }
  body.lawter-v6 .hero-v5 .hero-trade-stage{margin-top:16px!important}
  body.lawter-v6 .hero-v5 .trade-map-shell{width:116%!important;margin-left:-8%!important}
  body.lawter-v6 .hero-v5 .hero-support{text-align:left;justify-self:start;width:100%;padding-top:14px}
  body.lawter-v6 .hero-v5 .hero-support .hero-lead{margin-left:0!important;margin-right:0!important;max-width:58ch!important}
  body.lawter-v6 .hero-v5 .hero-support .hero-actions{justify-content:flex-start!important}
}

@media(max-width:560px){
  body.lawter-v6 .hero-v5 .trade-map-shell{width:128%!important;margin-left:-14%!important}
  body.lawter-v6 .hero-v5 .hero-support .hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  body.lawter-v6 .hero-v5 .hero-support .hero-actions .btn{width:100%!important}
}