@import url("https://fonts.googleapis.com/css2?family=Anton&family=Lato:wght@400;700;900&display=swap");

:root {
  --ink: #070707;
  --graphite: #202020;
  --muted: #585858;
  --line: #dedede;
  --paper: #ffffff;
  --soft: #f5f5f0;
  --yellow: #cfea3d;
  --yellow-soft: rgba(207, 234, 61, 0.34);
  --coral: #cfea3d;
  --teal: #6b6b64;
  --green-soft: rgba(113, 118, 70, 0.18);
  --shadow: 0 22px 55px rgba(7, 7, 7, 0.15);
  --max: 1180px;
  --body-size: 1rem;
  --lead-size: 1.08rem;
  --section-title-size: 2.75rem;
  --card-title-size: 1.65rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-synthesis: none;
  font-synthesis-weight: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
li {
  font-size: var(--body-size);
}

p {
  margin: 0;
}

p + p {
  margin-top: 16px;
}

.text-stack p + p {
  margin-top: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.nav-wrap {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--max);
  min-height: 94px;
  padding: 0 22px;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  height: 88px;
  line-height: 0;
  width: 88px;
}

.brand img {
  display: block;
  height: 88px;
  object-fit: contain;
  width: 88px;
}

.nav-menu {
  align-items: center;
  display: flex;
  gap: 2px;
}

.nav-menu a {
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--graphite);
  font-size: 0.92rem;
  font-weight: 800;
  padding: 10px 11px;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  background: var(--yellow);
  border-color: var(--ink);
}

.nav-toggle {
  align-items: center;
  background: var(--ink);
  border: 0;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: none;
  height: 42px;
  justify-content: center;
  padding: 0;
  width: 46px;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  background: currentColor;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 20px;
}

.nav-toggle span::before {
  position: absolute;
  top: -7px;
}

.nav-toggle span::after {
  position: absolute;
  top: 7px;
}

.section {
  padding: 84px 22px;
}

.section-tight {
  padding: 54px 22px;
}

.inner {
  margin: 0 auto;
  max-width: var(--max);
}

.eyebrow {
  color: var(--teal);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 14px;
}

.hero {
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.95) 0%, rgba(7, 7, 7, 0.84) 42%, rgba(7, 7, 7, 0.24) 72%),
    url("buzz-coaching-hero-clean.png") center / cover no-repeat;
  color: white;
  min-height: min(790px, calc(100svh - 94px));
  padding: 86px 22px 48px;
}

.hero .inner {
  display: grid;
  gap: 46px;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.52fr);
  min-height: 620px;
}

.hero-copy {
  align-self: center;
  max-width: 720px;
}

.hero h1 {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 6.4rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0 0 24px;
}

.page-hero h1 {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 5.2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 24px;
}

.hero h1 span,
.page-hero h1 span {
  color: var(--yellow);
  display: block;
}

.hero-lede {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.22rem;
  max-width: 650px;
}

.hero-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 6px;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 9px;
  justify-content: center;
  min-height: 48px;
  padding: 12px 17px;
}

.btn-primary {
  background: var(--yellow);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--yellow-soft);
}

.btn-dark {
  background: var(--ink);
  color: white;
}

.btn-light {
  background: white;
  color: var(--ink);
}

.btn-outline {
  background: transparent;
  color: currentColor;
}

.btn svg {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.hero-panel {
  align-self: end;
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  color: var(--ink);
  max-width: 390px;
  padding: 22px;
}

.hero-panel strong {
  display: block;
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 3.35rem;
  font-weight: 400;
  line-height: 1.04;
}

.hero-panel p {
  font-weight: 700;
  margin-top: 14px;
}

.proof-strip {
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  overflow: hidden;
  padding: 28px 22px;
}

.proof-strip .inner {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.proof-item {
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  font-weight: 700;
  min-height: 118px;
  padding: 16px;
}

.proof-item span {
  color: var(--teal);
  font-size: 0.78rem;
  letter-spacing: 0;
}

.proof-item strong {
  font-size: 1.05rem;
}

.proof-item p {
  color: var(--muted);
  font-size: 0.92rem;
}

.split {
  align-items: center;
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.7fr);
}

.split.reverse {
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 0.95fr);
}

.section-title {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: var(--section-title-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0 0 18px;
}

.section-title .mark,
.inline-mark {
  background: linear-gradient(transparent 58%, var(--yellow) 58% 90%, transparent 90%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.04em;
  white-space: nowrap;
}

.lead {
  color: var(--graphite);
  font-size: var(--lead-size);
  line-height: 1.55;
  max-width: 760px;
}

.text-stack {
  display: grid;
  gap: 16px;
}

.visual-block {
  background: var(--yellow);
  border: 2px solid var(--ink);
  color: var(--ink);
  min-height: 440px;
  overflow: hidden;
  position: relative;
}

.visual-block::before {
  background: rgba(255, 255, 255, 0.34);
  content: "";
  inset: 18px;
  position: absolute;
  border: 2px solid var(--ink);
}

.visual-block::after {
  bottom: 34px;
  color: var(--ink);
  content: "Think better. Act faster. Lead stronger.";
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 2.7rem;
  font-weight: 400;
  left: 34px;
  line-height: 1.05;
  max-width: 420px;
  position: absolute;
}

.image-panel {
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.image-panel img {
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.image-strip {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.1fr 0.9fr;
  margin-top: 34px;
}

.image-strip img {
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  object-fit: cover;
  width: 100%;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  background: white;
  border: 2px solid var(--ink);
  border-radius: 8px;
  min-height: 100%;
  padding: 22px;
}

.card.yellow {
  background: var(--yellow);
}

.card.dark {
  background: var(--ink);
  color: white;
}

.card.coral {
  background: rgba(252, 118, 134, 0.16);
  border-color: var(--coral);
}

.card.green {
  background: var(--green-soft);
  border-color: var(--teal);
}

.card h2,
.card h3 {
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0 0 12px;
}

.card h3 {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: var(--card-title-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
}

.card p {
  color: var(--graphite);
}

.card.dark p {
  color: rgba(255, 255, 255, 0.82);
}

.card ul,
.check-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.card li,
.check-list li {
  border-top: 1px solid rgba(7, 7, 7, 0.17);
  font-weight: 700;
  padding: 10px 0;
}

.card.dark li {
  border-color: rgba(255, 255, 255, 0.22);
}

.number {
  align-items: center;
  background: var(--ink);
  color: var(--yellow);
  display: inline-flex;
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  height: 42px;
  justify-content: center;
  margin-bottom: 18px;
  width: 42px;
}

.band {
  background: var(--soft);
}

.band-dark {
  background: var(--ink);
  color: white;
}

.band-dark .lead,
.band-dark p {
  color: rgba(255, 255, 255, 0.82);
}

.band-dark .eyebrow {
  color: var(--yellow);
}

.feature-row {
  border-top: 2px solid var(--ink);
  display: grid;
  gap: 18px;
  grid-template-columns: 0.42fr 1fr;
  padding: 24px 0;
}

.feature-row:last-child {
  border-bottom: 2px solid var(--ink);
}

.feature-row h3 {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 1.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.process {
  counter-reset: steps;
}

.process .card {
  counter-increment: steps;
  position: relative;
}

.process .card::before {
  background: var(--yellow);
  border: 2px solid var(--ink);
  content: counter(steps);
  display: grid;
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  height: 42px;
  margin-bottom: 18px;
  place-items: center;
  width: 42px;
}

.page-hero {
  background: var(--ink);
  color: white;
  padding: 74px 22px;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  display: none;
}

.page-hero .inner {
  position: relative;
  z-index: 1;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 780px;
}

.mini-nav {
  background: var(--yellow);
  border-bottom: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
}

.mini-nav .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 22px;
}

.mini-nav a {
  background: white;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 8px 10px;
}

.quote-block {
  background: var(--yellow);
  border-bottom: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  padding: 46px 22px;
}

.quote-block p {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 auto;
  max-width: var(--max);
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.faq-item {
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}

.faq-button {
  align-items: center;
  background: white;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 700;
  justify-content: space-between;
  min-height: 58px;
  padding: 16px 18px;
  text-align: left;
  width: 100%;
}

.faq-button::after {
  content: "+";
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}

.faq-button[aria-expanded="true"]::after {
  content: "-";
}

.faq-panel {
  background: var(--soft);
  border-top: 2px solid var(--ink);
  padding: 18px;
}

.contact-box {
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
  padding: 28px;
}

.contact-box h2 {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 14px;
}

.form {
  display: grid;
  gap: 14px;
}

.form label {
  display: grid;
  font-weight: 700;
  gap: 6px;
}

.form input,
.form textarea,
.form select {
  border: 2px solid var(--ink);
  border-radius: 6px;
  font: inherit;
  min-height: 46px;
  padding: 10px 12px;
  width: 100%;
}

.form textarea {
  min-height: 150px;
  resize: vertical;
}

.site-footer {
  background: var(--ink);
  color: white;
  padding: 48px 22px 30px;
}

.site-footer .brand {
  height: 56px;
  margin-bottom: 16px;
  width: 56px;
}

.site-footer .brand img {
  height: 56px;
  width: 56px;
}

/* Five columns: the brand column carries a logo, a sentence and an email
   address, so it gets the width. The old ratios put the widest column last
   (three short legal links) and squeezed the brand, which is what made the
   footer look crammed. Steps down to two columns and then one rather than
   dropping straight from five to one. */
.footer-grid {
  display: grid;
  gap: 28px 30px;
  grid-template-columns: 1.5fr 0.8fr 0.85fr 1fr 0.75fr 0.7fr;
}

@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer h2,
.site-footer h3 {
  color: white;
  font-size: 1rem;
  margin: 0 0 12px;
}

.site-footer p {
  color: rgba(255, 255, 255, 0.72);
  margin-top: 10px;
}

.footer-links {
  display: grid;
  gap: 8px;
}

.footer-links a {
  overflow-wrap: anywhere;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.footer-legal p,
.footer-legal a {
  font-size: 0.88rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.64);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 20px;
}

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    background: white;
    border-bottom: 2px solid var(--ink);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 8px 22px 18px;
    position: absolute;
    right: 0;
    top: 94px;
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu a {
    width: 100%;
  }

  /* .footer-grid deliberately excluded — it steps 5 → 2 → 1 in its own rules
     above rather than collapsing to a single column at 960px. */
  .hero .inner,
  .split,
  .split.reverse {
    grid-template-columns: 1fr;
  }

  .hero .inner {
    min-height: 0;
  }

  .hero h1 {
    font-size: 5.2rem;
  }

  .page-hero h1 {
    font-size: 4.35rem;
  }

  .section-title {
    font-size: 2.35rem;
  }

  .quote-block p {
    font-size: 2.35rem;
  }

  .hero-panel {
    align-self: start;
  }

  .grid-3,
  .grid-4,
  .image-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .section {
    padding: 62px 18px;
  }

  .section-tight {
    padding: 44px 18px;
  }

  .hero {
    min-height: auto;
    padding: 62px 18px 42px;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 3.45rem;
    line-height: 1;
  }

  .section-title {
    font-size: 2rem;
  }

  .hero-lede,
  .lead {
    font-size: 1.04rem;
  }

  .card h3 {
    font-size: 1.42rem;
  }

  .quote-block p {
    font-size: 2.1rem;
  }

  .contact-box h2 {
    font-size: 2rem;
  }

  .hero-panel {
    box-shadow: 8px 8px 0 var(--ink);
    max-width: none;
  }

  .proof-strip .inner,
  .grid-2,
  .grid-3,
  .grid-4,
  .image-strip,
  .feature-row {
    grid-template-columns: 1fr;
  }

  .visual-block {
    min-height: 320px;
  }

  .page-hero::after {
    inset: 50% 0 0;
  }

  .footer-bottom {
    display: grid;
  }
}