/* GW audio design | Homepage hero / editorial renewal (30 October 2026)
   
*/
.page-home .gw-home-hero {
  --gw-hero-ink: #24313f;
  --gw-hero-secondary: #596a79;
  --gw-hero-blue: #5d80a3;
  --gw-hero-rule: #cfdbe5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #f4f7fa;
  /* Full-bleed background HERO coverage. */
  background-image:
    linear-gradient(90deg, rgba(249,251,253,.42) 0%, rgba(248,250,252,.38) 37%, rgba(245,248,251,.22) 70%, rgba(243,246,249,.10) 100%),
    url('../../img/gw/gwaudiodesign/backgrounds/top_banner_hero_section_v2.png');
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
}
.page-home .gw-hero-container {
  position: relative;
  z-index: 2;
  width: calc(100% - clamp(32px, 10vw, 176px));
  max-width: 1640px;
  min-height: 755px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(171px, 12.5vw, 216px);
  padding-bottom: 30px;
}
.page-home .gw-hero-wordmark {
  position: absolute;
  z-index: 0;
  top: 40px;
  left: 50%;
  width: max-content;
  max-width: 100%;
  transform: translateX(-50%);
  font-family: Montserrat, sans-serif;
  font-weight: 750;
  font-size: clamp(64px, 8.15vw, 154px);
  line-height: 1.08;
  letter-spacing: -.065em;
  white-space: nowrap;
  color: #7b97b0;
  opacity: .165;
  pointer-events: none;
  user-select: none;
}
.page-home .gw-hero-speaker {
  position: absolute;
  z-index: 1;
  top: clamp(132px, 10.6vw, 174px);
  right: max(5.1vw, calc((100vw - 1640px) / 2 + 34px));
  display: block;
  width: min(37vw, 615px);
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  transform: translateX(14%);
  transform-origin: center center;
  mix-blend-mode: multiply;
  opacity: .95;
  filter: grayscale(.10) brightness(1.02) saturate(.84) drop-shadow(0 16px 27px rgba(48,65,80,.07));
}
.page-home .gw-hero-content { position: relative; z-index: 3; width: min(52%, 625px); }
.page-home .gw-hero-eyebrow {
  margin: 0 0 20px;
  color: #6386a7;
  font-size: .76rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .15em;
}
.page-home .gw-hero-heading {
  margin: 0 0 23px;
  font-size: clamp(2.7rem, 3.65vw, 4rem);
  line-height: 1.11;
  font-weight: 700;
  letter-spacing: -.047em;
  color: #202a35;
}
.page-home .gw-hero-heading span { display: block; }
.page-home .gw-hero-intro {
  color: #647380;
  max-width: 595px;
  font-size: .98rem;
  line-height: 1.81;
  font-weight: 400;
  margin: 0 0 24px;
}
.page-home .gw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.page-home .gw-hero-button {
  display: inline-flex;
  min-height: 51px;
  padding: 12px 23px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  border: 1px solid #7190ac;
  border-radius: 1px;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.page-home .gw-hero-button-primary { color: #fff; background: #597d9f; border-color: #597d9f; }
.page-home .gw-hero-button-primary:hover { color: #fff; background: #3d6688; border-color: #3d6688; }
.page-home .gw-hero-button-secondary { color: #34536d; background: rgba(255,255,255,.46); }
.page-home .gw-hero-button-secondary:hover { color: #213e57; background: #fff; border-color: #456c90; }
.page-home .gw-hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-size: .79rem;
  font-weight: 500;
  color: #6689ac;
  text-decoration: none;
}
.page-home .gw-hero-scroll img { display: block; opacity: .83; }
.page-home .gw-hero-scroll:hover { color: #345d7c; text-decoration: underline; text-underline-offset: 3px; }
.page-home .gw-hero-highlights {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  border-top: 1px solid var(--gw-hero-rule);
  margin-top: 57px;
  padding-top: 23px;
}
.page-home .gw-hero-highlight {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  padding: 0 17px;
  color: #456d91;
  text-decoration: none;
}
.page-home .gw-hero-highlight + .gw-hero-highlight { border-left: 1px solid var(--gw-hero-rule); }
.page-home .gw-hero-highlight > i { flex: none; font-size: 21px; color: #5c7e9e; margin-top: 2px; }
.page-home .gw-hero-highlight span { display: block; }
.page-home .gw-hero-highlight strong {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  line-height: 1.5;
  font-weight: 700;
  color: #36546d;
  text-transform: uppercase;
}
.page-home .gw-hero-highlight small {
  display: block;
  margin-top: 2px;
  font-size: .62rem;
  line-height: 1.55;
  letter-spacing: .105em;
  text-transform: uppercase;
  color: #738697;
}
.page-home .gw-hero-highlight:hover strong { color: #1b425d; }
/* Hero → About spacing: avoid stacking parent padding with the About section's
   original 4.6rem top padding from home-services.css. */
.page-home .gw-home-about-container { padding-top: 0; }
.page-home #aboutus.gw-home-about { padding-top: 3rem; }
.page-home .gw-hero-button:focus-visible, .page-home .gw-hero-scroll:focus-visible,
.page-home .gw-hero-highlight:focus-visible { outline: 2px solid #31668c; outline-offset: 5px; }
@media (min-width: 1600px) {
  .page-home .gw-hero-container { min-height: 790px; }
}
@media (max-width: 1199.98px) {
  .page-home .gw-hero-container { min-height: 735px; padding-top: 170px; }
  .page-home .gw-hero-speaker { width: 44vw; right: .2vw; top: 150px; transform: translateX(11%); opacity: .92; }
  .page-home .gw-hero-content { width: 60%; }
  .page-home .gw-hero-heading { font-size: clamp(2.6rem, 4.1vw, 3.5rem); }
  .page-home .gw-hero-wordmark { font-size: 8.9vw; top: 55px; }
}
@media (max-width: 991.98px) {
  .page-home .gw-hero-container { min-height: 685px; padding-top: 133px; }
  .page-home .gw-hero-content { width: min(78%, 590px); }
  .page-home .gw-hero-speaker { right: -4.5vw; top: 158px; width: 52vw; transform: translateX(8%); opacity: .36; }
  .page-home .gw-hero-wordmark { top: 43px; font-size: 9vw; }
  .page-home .gw-hero-highlights { margin-top: 45px; }
  .page-home .gw-hero-highlight { gap: 10px; padding: 0 8px; }
  .page-home .gw-hero-highlight strong { font-size: .61rem; }
  .page-home .gw-hero-highlight small { font-size: .57rem; }
}
@media (max-width: 767.98px) {
  .page-home .gw-hero-container { min-height: auto; padding-top: 107px; padding-bottom: 25px; }
  .page-home .gw-hero-wordmark { left: 5%; top: 24px; transform: none; font-size: 10.25vw; opacity: .14; }
  .page-home .gw-hero-content { width: 100%; }
  .page-home .gw-hero-heading { max-width: 650px; font-size: clamp(2.28rem, 7vw, 3.2rem); }
  .page-home .gw-hero-intro { max-width: 600px; }
  .page-home .gw-hero-speaker { width: 420px; right: -126px; top: 142px; transform: translateX(4%); opacity: .13; }
  .page-home .gw-hero-highlights { grid-template-columns: 1fr; gap: 15px; margin-top: 43px; padding-top: 18px; }
  .page-home .gw-hero-highlight { justify-content: flex-start; padding: 0; gap: 14px; }
  .page-home .gw-hero-highlight + .gw-hero-highlight { border-left: 0; }
  .page-home .gw-hero-highlight strong { font-size: .67rem; }
  .page-home .gw-hero-highlight small { font-size: .61rem; }
  .page-home .gw-home-about-container { padding-top: 0; }
  .page-home #aboutus.gw-home-about { padding-top: 2.5rem; }
}
@media (max-width: 479.98px) {
  .page-home .gw-hero-container { padding-top: 91px; }
  .page-home .gw-hero-eyebrow { font-size: .63rem; letter-spacing: .105em; margin-bottom: 16px; }
  .page-home .gw-hero-heading { font-size: clamp(2.04rem, 9vw, 2.6rem); }
  .page-home .gw-hero-intro { font-size: .9rem; line-height: 1.75; }
  .page-home .gw-hero-actions { flex-direction: column; align-items: stretch; }
  .page-home .gw-hero-button { min-height: 47px; }
  .page-home .gw-hero-speaker { width: 350px; right: -130px; top: 158px; transform: translateX(2%); opacity: .08; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .gw-hero-button { transition: none; }
}