/* Container stays centered with 24px gutters */
.gc-container{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline:  .5rem;
  width: min(1200px, 100%); /* belt & braces */
}

/* Hero layout */
.hero{
  background: var(--hero-bg, #f5f5f5);
  padding: 42px 0 42px;
  border-bottom: solid 1px var(--highlight);
}

/* Increase specificity so globals can’t override */
.hero .hero__heading{
  color: var(--hero-heading, var(--brand));
}

.hero .hero__heading strong{
  color: var(--hero-accent, #1E90FF);
  font-weight: 800;
}

/* If the editor injects a <p> inside (rare), keep it inline */
.hero .hero__heading p{
  display: inline;
  margin: 0;
}

.hero__inner{
  display: grid;
  gap: clamp(24px, 3vw, 24px);
  grid-template-columns: 1fr;       /* mobile: stack */
  align-items: center;
}
@media (min-width: 960px){
.gc-container{

  width: min(1200px, 100% - 48px); /* belt & braces */
}

  .hero__inner{
    grid-template-columns: 1.15fr 1fr; /* image : content ratio */
  }
}

/* The key constraints for the right column */
:root{
  --hero-col-max: 560px;   /* adjust to match Figma exactly (e.g. 540–580px) */
}
.hero__content{
  max-width: var(--hero-col-max);
  justify-self: start;      /* don’t stretch on wide screens */
}
.hero__lead{
  max-width: 60ch;          /* readable line length */
}

/* Image never exceeds container, keeps rounding */
.hero__media img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}