/* Changes and additions on top of the vendored Webflow stylesheet (site.css).
   Kept separate so it is always obvious what we changed and why.
   Everything below reuses site.css's own tokens so it stays on-brand. */

/* The mobile menu is positioned by the [data-nav-menu-open] rule; keep it clear of
   the navbar and let long menus scroll rather than run off the screen. */
@media screen and (max-width: 991px) {
  .nav-menu[data-nav-menu-open] {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------- speaking */

/* The navbar is absolutely positioned over the first section, so the speaking
   page needs to start below it the way the homepage hero does. */
.section.speaking-hero {
  padding-top: 160px;
}

/* site.css's `.container` sets flex-flow, align-items, justify-content and a 60px gap
   but never declares `display: flex`. Every original Webflow section carried a modifier
   class (.container.about, .container.featured …) that supplied it, so a bare
   `.container` silently renders as a block and every one of those rules is inert:
   no gaps, children flush left, max-width blocks not centred. `.stack` is the modifier
   for the sections added since the Webflow move. */
.container.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 44px;
}

/* Heading plus its subtitle, as one unit. Tight inside, generous outside. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  text-align: center;
}

.section-head .heading-primary {
  margin: 0;
}

/* A lone centred button should sit close to the copy it belongs to, not float
   halfway to the next section. */
.container.stack > .book-section-btns-wrapper.center-btns {
  margin-top: -12px;
}

@media screen and (max-width: 767px) {
  .container.stack {
    gap: 32px;
  }
}

/* ------------------------------------------- the five-phase explainer */

.lifecycle-wrap {
  width: 100%;
  max-width: 1000px;
  background-color: var(--colors--white);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 2px 18px #0000000f;
}

.lifecycle-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.phase-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}

.phase-card,
.phase-note {
  background-color: var(--colors--white);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.phase-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-family: var(--fonts--primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--colors--white);
  margin-bottom: 4px;
}

.phase-badge.red { background-color: #e0533d; }
.phase-badge.amber { background-color: #e8a33d; }
.phase-badge.green { background-color: var(--colors--green); }
.phase-badge.soft {
  background-color: var(--colors--light-green);
  color: var(--colors--green);
}

.phase-note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1000px;
}

@media screen and (max-width: 991px) {
  .phase-grid { grid-template-columns: repeat(2, 1fr); }
  .phase-note-grid { grid-template-columns: 1fr; }
  .lifecycle-wrap { padding: 14px; }
}

@media screen and (max-width: 560px) {
  .phase-grid { grid-template-columns: 1fr; }
}

.eyebrow {
  font-family: var(--fonts--primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colors--green);
  margin-bottom: 10px;
}

.eyebrow.center {
  text-align: center;
}

/* Credibility numbers */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  width: 100%;
}

.cred {
  text-align: center;
}

.cred-number {
  font-family: var(--fonts--primary);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--colors--green);
  margin-bottom: 6px;
}

/* The EconoMe testimonial. It is the strongest thing on the page, so it gets room. */
.big-testimonial {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quote-lead {
  font-size: 32px;
  line-height: 1.3;
}

.testimonial-logo {
  height: 40px;
  width: auto;
  margin-left: auto;
  object-fit: contain;
}

/* The full-room shot is the one that sells a booker, so it runs the full width and
   the rest sit under it three across. */
/* Flex rather than grid so a short final row centres itself instead of leaving a
   hole. The full-room shot runs the full width; it is the one that sells a booker. */
.stage-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.stage-photo {
  flex: 0 1 calc(50% - 8px);
  height: 300px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.stage-photo.wide {
  flex: 0 0 100%;
  height: 460px;
}

@media screen and (max-width: 991px) {
  .stage-photo { flex: 0 1 calc(50% - 8px); }
  .stage-photo.wide { height: 320px; }
}

@media screen and (max-width: 620px) {
  .stage-photo { flex: 0 0 100%; height: 220px; }
  .stage-photo.wide { height: 240px; }
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 880px;
}

.topic {
  border-left: 4px solid var(--colors--green);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* /thankyou unlock gate */
.section.unlock-section {
  padding-top: 180px;
  min-height: 70vh;
}

/* Same missing `display: flex` as every other bare .container — see the note above. */
.container.unlock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
}

#unlock-gate,
#unlock-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

#unlock-gate .heading-primary,
#unlock-done .heading-primary {
  margin: 0;
}

/* CSS owns display for these panels, so the toggle uses [hidden] rather than
   inline styles that would clobber the flex layout. */
[hidden] {
  display: none !important;
}

.unlock-intro {
  max-width: 620px;
  margin: 0 auto;
}

.unlock-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 10px auto 0;
}

.unlock-form .text-field-contact-us {
  flex: 1 1 260px;
  margin-bottom: 0;
}

.unlock-fineprint {
  font-size: 15px;
  line-height: 24px;
  opacity: 0.7;
  max-width: 520px;
  margin: 0 auto;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* What they get, listed on /thankyou before the email field. */
.bonus-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  text-align: left;
}

.bonus-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--fonts--primary);
  font-size: 17px;
  line-height: 27px;
}

.bonus-tick {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--colors--green);
  color: var(--colors--white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The interview plays in place. A video wants width, so it gets its own block above
   the PDF cards rather than being squeezed into a third of the grid. */
.bonus-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #000;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-fallback {
  opacity: 0.6;
  text-decoration: underline;
}

/* The goodies themselves, on /bookbonus. */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.bonus-card {
  background-color: var(--colors--white);
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.bonus-card .secondary-btn {
  margin-top: auto;
}

.bonus-pending {
  margin-top: auto;
  font-family: var(--fonts--primary);
  font-size: 15px;
  line-height: 24px;
  opacity: 0.6;
}

.phase-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 34px;
}

.phase-mini-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonts--primary);
  font-size: 16px;
  font-weight: 600;
}

.phase-emoji {
  font-size: 24px;
  line-height: 1;
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: 100%;
}

.format-card {
  background-color: var(--colors--white);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-section-btns-wrapper.center-btns {
  justify-content: center;
}

/* Keeps a short phrase from orphaning its last word onto a line of its own.
   Released on narrow screens, where forcing it would overflow instead. */
.nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 620px) {
  .nowrap {
    white-space: normal;
  }
}

/* -------------------------------------------------------------- contact */

.contact-detail-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Deliberately not a mailto: link. The address is written out in words so a person
   can read it and a scraper cannot lift it. */
.email-address {
  font-family: var(--fonts--primary);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
}

.contact-note {
  opacity: 0.7;
}

.contact-topics {
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-topics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.contact-topic {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-topic a {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .email-address {
    font-size: 22px;
  }
  .section.speaking-hero {
    padding-top: 130px;
  }
}