/* =========================================================
   Fonts
   NOTE: Licensed .woff2 files for Canela Deck, Avenir Book,
   and Avenir Medium are not yet supplied. Drop them into
   /fonts using the filenames referenced below and the page
   will pick them up automatically — no other changes needed.
   Until then, the fallback stacks below keep the page
   readable and on-brand-ish.
   ========================================================= */
@font-face {
  font-family: 'Canela Deck';
  src: url('fonts/CanelaDeck-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Book';
  src: url('fonts/Avenir-Book.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Medium';
  src: url('fonts/Avenir-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* =========================================================
   Root variables
   ========================================================= */
:root {
  /* Brand colors */
  --color-navy-900: #0A1235;
  --color-navy-800: #1B2E6E;
  --color-blue-500: #1C78EB;
  --color-blue-300: #36A3FF;
  --color-blue-100: #EBFFFC;

  --color-grey-900: #1A1A1A;
  --color-grey-700: #404040;
  --color-grey-500: #666666;
  --color-grey-300: #B3B3B3;
  --color-grey-100: #E6E6E6;

  --color-white: #FFFFFF;

  /* Font stacks */
  --font-heading: 'Canela Deck', Georgia, 'Times New Roman', serif;
  --font-body: 'Avenir Book', 'Avenir', Helvetica, Arial, sans-serif;
  --font-body-medium: 'Avenir Medium', 'Avenir', Helvetica, Arial, sans-serif;

  /* Type scale — mobile defaults */
  --text-eyebrow-size: 12px;
  --text-eyebrow-line: 1.4;

  --text-h1-size: 40px;
  --text-h1-line: 1.05;

  --text-h2-size: 28px;
  --text-h2-line: 1.15;

  --text-h3-size: 20px;
  --text-h3-line: 1.3;

  --text-body-large-size: 18px;
  --text-body-large-line: 1.5;

  --text-body-size: 16px;
  --text-body-line: 1.6;

  --text-small-size: 13px;
  --text-small-line: 1.5;

  --text-button-size: 16px;
  --text-button-line: 1;
}

@media (min-width: 768px) {
  :root {
    --text-eyebrow-size: 13px;
    --text-h1-size: 64px;
    --text-h2-size: 40px;
    --text-h3-size: 24px;
    --text-body-large-size: 20px;
    --text-body-size: 16px;
    --text-small-size: 14px;
    --text-button-size: 16px;
  }
}

/* =========================================================
   Base / reset
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-navy-900);
  color: var(--color-grey-300);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}

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

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Visible focus states for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
}

/* =========================================================
   Typography
   ========================================================= */
.eyebrow {
  font-family: var(--font-body-medium);
  font-size: var(--text-eyebrow-size);
  line-height: var(--text-eyebrow-line);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue-500);
  margin: 0 0 16px;
}

h1,
.hero-headline {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  color: var(--color-navy-900);
  margin: 0 0 20px;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  color: var(--color-white);
  margin: 0 0 24px;
}

h3 {
  font-family: var(--font-body-medium);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  color: var(--color-white);
  margin: 0 0 12px;
}

.body-large {
  font-family: var(--font-body);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line);
  color: var(--color-grey-300);
  margin: 0 0 32px;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-grey-300);
  margin: 0 0 16px;
}

.small {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  color: var(--color-grey-300);
  margin: 0;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body-medium);
  font-size: var(--text-button-size);
  line-height: var(--text-button-line);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  padding: 16px 32px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-primary {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-navy-800);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-navy-900);
  border: 1px solid var(--color-grey-300);
}

.btn-secondary:hover {
  background-color: var(--color-grey-100);
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  padding: 20px 0;
  background-color: var(--color-grey-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Break out of the centered container so the logo sits flush in the
     page's true left corner instead of the container's left edge. */
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

.logo {
  max-height: 32px;
  width: auto;
  margin-right: auto;
  /* Source logo file is dark navy/black; invert to white so it reads on the dark header. */
  filter: brightness(0) invert(1);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 96px 0;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-color: var(--color-navy-900);
  background-image: url('assets/hero-background.jpg');
  /* Zoomed in (>100%) so the two people sit closer to the frame edges,
     and panned down to bring them into view alongside the headline. */
  background-size: 165% auto;
  background-position: center calc(68% - 5px);
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Full width, edge to edge over the photo. */
  left: 0;
  right: 0;
  /* Dark scrim, full width, but faded horizontally so it's most
     transparent at the outer edges and most opaque directly behind
     the text in the middle. */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 35%,
    rgba(0, 0, 0, 0.65) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.hero .hero-headline {
  color: var(--color-white);
  /* Smaller than the default h1 size on narrow screens so each of the
     3 lines stays on its own row instead of wrapping further and
     covering more of the speakers. */
  font-size: 30px;
}

@media (min-width: 768px) {
  .hero-inner {
    max-width: 720px;
  }

  .hero .hero-headline {
    font-size: var(--text-h1-size);
  }
}

@media (min-width: 1024px) {
  .hero-inner {
    max-width: 960px;
  }

  .hero {
    /* Wide viewports already reveal more of the image horizontally,
       so ease off the zoom slightly while keeping the pan-down. */
    background-size: 135% auto;
    background-position: center calc(62% - 5px);
  }
}

/* =========================================================
   About section
   ========================================================= */
.about {
  position: relative;
  padding: 88px 0 64px;
  /* Dark grey/black theme, distinct from the navy hero and signup/footer. */
  background-color: var(--color-grey-900);
}

.about::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 50%;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-blue-500);
  transform: translateX(-50%);
}

.about .container {
  max-width: 720px;
}

/* =========================================================
   Meet the speakers section
   ========================================================= */
.speakers {
  padding: 64px 0;
  /* Muted white, distinct from the dark grey header/footer — same
     background/text colors the section used previously. */
  background-color: var(--color-grey-100);
  /* Single source of truth for the photo's diameter — the docking
     transform below is derived from this, so the two always agree. */
  --speaker-photo-size: 160px;
}

.speakers .container {
  max-width: 720px;
}

.speakers h2 {
  color: var(--color-navy-900);
  text-align: center;
}

.speaker-subtext {
  text-align: center;
  font-style: italic;
  font-size: var(--text-small-size);
  color: var(--color-grey-500);
  margin-top: -12px;
  margin-bottom: 32px;
}


.speaker-list {
  margin-top: 24px;
}

.speaker {
  border-bottom: 1px solid rgba(10, 18, 53, 0.1);
}

.speaker:last-child {
  border-bottom: none;
}

/* Positioning context for the photo button and info panel, which are
   each absolutely positioned so the photo can slide independently of
   document flow and the info panel can sit at a fixed spot beside it.
   No overflow:hidden here — the hover scale on the photo (below) needs
   room to bleed past its own box without getting clipped. */
.speaker-row {
  position: relative;
  min-height: 220px;
  padding: 24px 0;
}

/* inset:0 (not height:100%) so this fills the row's full padding box
   exactly — height:100% would collapse to 0 here since the row only
   sets min-height, not an explicit height, and percentage heights don't
   resolve against a min-height-only ancestor. */
.speaker-visual {
  position: absolute;
  inset: 0;
}

/* Idle: centered on the row's horizontal midpoint. Uses translateX(-50%)
   against left:50%, which centers based on the button's own width (just
   the photo), independent of the row's width. */
.speaker-photo-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /* Without this, the browser's hit-testing for the circular hover/click
     target doesn't reliably match the visible circle — cursor movement
     near the edge can land in the (invisible) square corners outside the
     circle, missing the button and falling through to whatever sits
     behind it instead of triggering the hover effect. Matching overflow
     to the border-radius makes the interactive area exactly the circle. */
  overflow: hidden;
  cursor: pointer;
  transition: left 0.4s ease, transform 0.4s ease;
}

/* Active: slid flush to the row's left edge — the same edge the
   speaker-to-speaker divider line spans. */
.speaker.is-active .speaker-photo-btn {
  left: 0;
  transform: translate(0, -50%);
}

.speaker-photo {
  display: block;
  width: var(--speaker-photo-size);
  height: var(--speaker-photo-size);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.speaker-photo-btn:hover .speaker-photo,
.speaker-photo-btn:focus-visible .speaker-photo,
.speaker.is-active .speaker-photo {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Fixed position to the right of the photo's docked (left-aligned) spot,
   vertically centered against it, stretching all the way to the row's
   right edge (right: 0) — the same edge the divider line spans — instead
   of a fixed width, so the text uses the full width available. Fades in
   only once the photo's slide finishes (transition-delay matches the
   slide's own duration), so the text "populates" after the slide rather
   than during it. */
.speaker-info {
  position: absolute;
  left: calc(var(--speaker-photo-size) + 32px);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  /* Idle: invisible AND non-interactive, so it can't sit on top of (and
     intercept clicks on) the centered photo before this speaker is active. */
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.speaker.is-active .speaker-info {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.4s;
}

.speaker-name {
  color: var(--color-navy-900);
  margin: 0 0 4px;
}

.speaker-title {
  font-family: var(--font-body-medium);
  font-size: var(--text-small-size);
  color: var(--color-blue-500);
  margin: 0 0 12px;
}

.speaker-bio {
  color: var(--color-grey-700);
  font-style: italic;
  margin: 0;
}

@media (max-width: 640px) {
  .speakers {
    --speaker-photo-size: 110px;
  }

  .speaker-info {
    left: calc(var(--speaker-photo-size) + 20px);
  }
}

/* =========================================================
   Request an Executive Conversation (contact CTA)
   ========================================================= */
.contact-cta {
  padding: 64px 0;
  /* Dark grey, same as .about — breaks up the light .speakers section
     above it and ties visually into the dark footer below. */
  background-color: var(--color-grey-900);
}

.contact-cta .container {
  max-width: 720px;
  text-align: center;
}

.contact-cta .btn {
  margin-top: 16px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  padding: 32px 0;
  background-color: var(--color-grey-900);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-logo {
  max-height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================
   Webcast panel (slides down from header on signup)
   ========================================================= */
.webcast-panel {
  max-height: 0;
  overflow: hidden;
  background-color: var(--color-navy-900);
  transition: max-height 0.7s ease;
}

.webcast-panel.is-open {
  /* Tall enough for the larger video/poll cards below, at their
     16:9 ratio, without clipping the slide-down transition. */
  max-height: 1100px;
}

.webcast-panel-inner {
  padding: 48px 0;
}

/* Wider than the standard .container, with slimmer side padding, so
   the video and poll cards' edges sit closer to the section's edges. */
.webcast-container {
  max-width: 1600px;
  padding: 0 16px;
}

.webcast-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.webcast-frame {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
}

.webcast-frame iframe,
.webcast-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}


.poll-placeholder {
  flex: 1;
  aspect-ratio: 16 / 9;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
}

.poll-placeholder-label {
  font-family: var(--font-body-medium);
  font-size: var(--text-small-size);
  color: var(--color-grey-300);
  margin: 0;
}

.poll-progress {
  margin-top: 16px;
}

.poll-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.poll-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background-color: var(--color-blue-500);
  transition: width 0.5s ease;
}

@media (max-width: 767px) {
  .webcast-layout {
    flex-direction: column;
  }
}

/* =========================================================
   Register modal (dismissible — opened from the hero CTA)
   ========================================================= */
/* Modern, transition-safe modal container setup */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

/* Toggle visibility cleanly alongside opacity when JavaScript runs */
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Solid fallback wrapper ensuring hidden elements stay hidden */
.modal-overlay[hidden] {
  display: none !important;
}


.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background-color: var(--color-grey-100);
  color: var(--color-grey-900);
  border-radius: 8px;
  padding: 0;
}

.modal-header {
  background-color: var(--color-grey-700);
  padding: 24px 32px;
  border-radius: 8px 8px 0 0;
}

.modal-header h2 {
  font-size: var(--text-h3-size);
  color: var(--color-white);
  margin: 0;
}

.modal-body {
  padding: 32px;
}

.modal .hs-form-html {
  min-height: 360px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

body.modal-open {
  overflow: hidden;
}

body.modal-open main,
body.modal-open .site-header,
body.modal-open .site-footer {
  pointer-events: none;
}

/* Base dialog styling */
#trailer-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  width: 90%;
  max-width: 800px;
  background: #111;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Styles the background overlay behind the modal */
#trailer-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px); /* Optional: blurs the background website */
}

/* Structural elements inside the modal */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #333;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

#close-modal {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.modal-body {
  padding: 0;
  display: flex;
}

#modal-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* PASTE THIS CORRECT TOP-RIGHT CODE BLOCK INSTEAD: */
/* =========================================================
   Registration Modal Top-Right Close Button
   ========================================================= */
#register-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes 'Register' text to the left and 'X' to the right */
  background-color: var(--color-grey-700) !important;
  padding: 20px 24px;
}

.modal-close-icon {
  background: none !important;
  border: none !important;
  color: var(--color-white) !important;
  font-size: 2rem;                 /* Crisp visual scale for the '×' close icon */
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.modal-close-icon:hover {
  opacity: 0.7;                    /* Subtle hover fading effect */
}

.modal-close-icon:focus-visible {
  outline: 2px solid var(--color-blue-300);
  outline-offset: 2px;
}
/* Forces the Watch Trailer button text to stay crisp white */
#watch-trailer-btn {
  color: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

/* Optional hover state to make it visually responsive when moused over */
#watch-trailer-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-white) !important;
}