/* ==========================================================================
   Advisor Combine landing page
   Ported from Figma: MKTG-260 ria.matsonmoney.com website updates
   Node 2362:2296 "Final Option"
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* colour — mapped 1:1 from the Figma colour variables */
  --blue-dark:   #032f3b;   /* color/blue/dark   */
  --blue-medium: #0076a5;   /* color/blue/medium */
  --blue-light:  #65a9d4;   /* color/blue/light  */
  --blue-deep:   #002d3f;   /* hero gradient end */
  --grey-dark:   #00171d;   /* color/grey/dark   */
  --grey-medium: #a2acab;   /* color/grey/medium */
  --white:       #ffffff;   /* color/grey/white  */

  --gold:        #d9a03c;
  --gold-light:  #e7b764;

  --ink:         #1d2a32;
  --ink-soft:    #3c4a54;
  --panel:       #f2f6f8;
  --footer-bg:   #1f2328;   /* color/prudent-grey/900 */
  --grid-line:   rgba(31, 111, 168, 0.32);

  /* type */
  --font-sans: "proxima-nova", "Proxima Nova", "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:   "Inter", system-ui, -apple-system, sans-serif;

  /* layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 5.56vw, 80px);
  --radius: 8px;
  --radius-sm: 6px;
  /* Height of the sticky nav, used to pull the hero up underneath it. The real
     value is measured and republished by the inline script, because the nav is
     79px at desktop, 72px at 720 and 87px on narrow phones (the CTA wraps).
     This fallback is the desktop height, used if the script doesn't run. */
  --nav-h: 79px;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--grey-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p  { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* focus — visible on every dark and light background */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--white); color: var(--blue-dark);
  padding: 10px 16px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------- shared */
.sec { padding: 80px var(--gutter) 40px; }
.sec-if { padding: 80px var(--gutter) 0px; }
.sec__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

.eyebrow {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eyebrow--blue  { color: var(--blue-medium); }
.eyebrow--light { color: var(--blue-light); }

.h2 {
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--white);
  text-wrap: balance;
}
.h2--dark { color: var(--blue-dark); }
.h2__reg  { font-weight: 400; }
.h2__accent { font-weight: 800; font-style: italic; }
.h2__accent--blue      { color: var(--blue-medium); }
.h2__accent--lightblue { color: var(--blue-light); }
.h2__accent--gold      { color: var(--gold); }
.sec--advisors .h2__accent--blue { color: var(--blue-medium); }

/* section header: headline left, supporting copy right */
.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 120px);
  margin-bottom: 40px;
}
.sechead__lead { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.sechead__body {
  flex: 0 1 480px;
  font-size: 16px;
  color: var(--white);
}
.sec--fit .sechead__body { color: var(--grey-dark); }
.sechead__body p + p { margin-top: 1em; }
.sechead__note {
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: var(--grey-medium);
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--white { background: var(--white); color: var(--blue-medium); }
.btn--white:hover { background: #e8f1f6; }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--blue { background: var(--blue-medium); color: var(--white); }
.btn--blue:hover { background: #00648c; }
.btn--quiet { background: transparent; color: var(--white); }
.btn--quiet:hover { background: rgba(255,255,255,.1); }

.btn--lg {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  min-width: 200px;
}
.nav .btn--white,
.ctaband .btn--white { color: var(--blue-dark); }
.scoreboard .btn--white { color: var(--ink); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 4px;
  transition: background-color .18s ease;
}
.iconbtn:hover { background: rgba(255,255,255,.1); }

/* --------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Negative margin lets the hero start at y=0 and show through the
     translucent bar, while the nav itself stays in flow so it keeps sticking
     and picks up the body's scrollbar compensation when the lightbox opens. */
  margin-bottom: calc(-1 * var(--nav-h));
  background: rgba(0, 23, 29, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px var(--gutter);
}
.nav__logo { display: block; flex-shrink: 0; }
.nav__logo img { width: 210px; height: auto; }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 674px;
  display: flex;
  align-items: center;
  padding: 180px var(--gutter) 120px;
  background: linear-gradient(90deg, var(--blue-medium) 0%, var(--blue-deep) 100%);
}
.hero__wash {
  position: absolute;
  inset:0;
  width: auto;
  height: auto;
  opacity: .2;
  pointer-events: none;
  mix-blend-mode: screen;
}
@supports (mix-blend-mode: plus-lighter) {
  .hero__wash { mix-blend-mode: plus-lighter; }
}
.hero__wash img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Which part of the art survives the crop. First value is horizontal, second
     vertical: `50% 0%` pins the top edge, `50% 25%` sits a quarter down,
     `50% 50%` is the default centre. Tune the second number to taste.
     NOTE: the scaleX(-1) below mirrors the image, so the HORIZONTAL value is
     flipped too — `0% 0%` renders at the top RIGHT, not the top left. The
     vertical value is unaffected. */
  object-position: 50% 10%;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 8vw, 120px);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1 1 auto;
  min-width: 0;
}
.hero__title {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  font-style: italic;
  text-transform: uppercase;
  color: var(--white);
}
.hero__title-strong { font-weight: 800; }
.hero__title-light  { font-weight: 400; }
.hero__sub {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--white);
  max-width: 40ch;
  margin-bottom: 24px;  
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* In the Figma the logo is a flex-1 sibling filling whatever the copy leaves
   (~520 of the 1280 row). That collapses if the headline sets wider than
   expected — e.g. while Proxima Nova is still loading and Inter stands in — so
   the width is reserved explicitly instead of derived from the leftover space. */
.hero__mark {
  flex: 0 0 auto;
  width: min(520px, 50%);
  min-width: 200px;
}
.hero__mark img { width: 100%; height: auto; }

/* --------------------------------------------------------- hook + stats strip */
/* Figma 2575:7426 "Hook — The Growth Ceiling (light)" */
.hook {
  background: var(--white);
  padding: 40px var(--gutter);
}
.hook__inner {
  display: flex;
  /* stretch, not center: the Figma has each stat self-stretch so the divider
     rules run the full height of the row rather than just the stat text */
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.hook__lead {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}
.hook__title {
  font-size: 24px;
  line-height: 1.12;
  color: var(--blue-dark);
}
.hook__title em {
  font-weight: 800;
  font-style: italic;
  color: var(--blue-medium);
}
.hook__body {
  font-size: 16px;
  line-height: 1.35;
  color: var(--grey-dark);
}

.hook__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}
.hstat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-left: 20px;
  /* every item carries the rule in this design, including the first */
  border-left: 1px solid var(--grey-medium);
}
.hstat__num {
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  color: var(--blue-medium);
  width: 50%;
}
.hstat__label {
  width: 170px;
  /* The Figma pins this at 170px, which sets the desktop line breaks. In a
     narrower grid cell the cap lets it shrink rather than overflow. */
  max-width: 100%;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--blue-dark);
}

/* --------------------------------------------------------------- stat strips */
.stats { padding: 24px var(--gutter); }
.stats--dark  { background: transparent; padding: 0; }

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}
.stat {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 28px;
}
.stat + .stat { border-left: 1px solid var(--grey-medium); }

.stat--sm { padding: 0px 24px; }
.stat--sm + .stat--sm { border-left-color: var(--blue-medium); }
.stats--dark .stat--sm:first-child { border-left: 1px solid var(--blue-medium); }
.stat__kicker {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 6px;
}
.stat__copy { font-size: 16px; color: var(--white); }

/* --------------------------------------------------------------- field-line divider */
.fieldline { padding: 24px 0; }
.fieldline--dark  { background: var(--grey-dark); }
.fieldline--light { background: var(--white); }
.fieldline img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  transform: scaleX(-1);
}

/* --------------------------------------------------------------- advisors section */
.sec--advisors {
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--grey-dark) 100%);
  padding-bottom: 40px;
}
.sec--advisors .sec__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sec--advisors .sechead { margin-bottom: 0; }

/* video poster */
.video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--blue-medium);
  border-radius: var(--radius);
  background-color: var(--grey-dark);
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
}
.video__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 23, 29, .4);
}
.video__scrim--blue { background: rgba(3, 47, 59, .4); }
.video__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--grey-dark);
  opacity: .8;
  transition: opacity .2s ease, transform .2s ease;
}
.video:hover .video__play { opacity: 1; transform: scale(1.06); }
.video__play img { width: 22px; height: 22px; }
.video__frame { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------- video lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  opacity: 0;
  transition: opacity .2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 12, 16, .82);
}

.lightbox__dialog {
  position: relative;
  width: 90%;
  max-width: 1920px;
}

.lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: scale(.97);
  transition: transform .2s ease;
}
.lightbox.is-open .lightbox__frame { transform: scale(1); }
.lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lightbox__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--grey-medium);
  font-size: 15px;
}

/* Sits at the top-right of the player, as in the reference. The translucent
   disc keeps it legible over light footage, which a bare glyph would not be. */
.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: var(--white);
  cursor: pointer;
  transition: background-color .18s ease;
}
.lightbox__close:hover { background: rgba(0, 0, 0, .72); }
.lightbox__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  fill: none;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__frame { transition: none; }
  .lightbox__frame { transform: none; }
}

/* testimonial strip */
.quotes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.quote {
  margin: 0;
  padding: 8px 24px;
  border-left: 1px solid var(--blue-light);
  display: flex;
  flex-direction: column;
  /* Attribution sits on the baseline of the tallest card in the row, so the
     names line up no matter how long each quote runs. The grid stretches every
     card to the row height; gap stays on as the minimum breathing room, and
     space-between absorbs whatever height is left over. */
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}
.quote blockquote {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.quote figcaption {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
}
.quote__name {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blue-light);
}
.quote__meta { font-weight: 300; color: var(--grey-medium); }

.quote__hide {display: flex;}
/* --------------------------------------------------------------- you're a fit */
.sec--fit { background: var(--white); }
.sec--fit .sec__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sec--fit .sechead { margin-bottom: 0; }

.sec--fit--game {
display: flex;
flex-direction: column;
}

.roster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
}
.reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  aspect-ratio: auto;
  padding: 20px;
  text-align: left;
  background: var(--white);
  border: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
.reason:hover { background: #f4f8fb; }
.reason__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.reason__num {
  font-size: 25px;
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
}
/* checkbox — swapped to the selected asset by main.js */
.reason__box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background-image: url("assets/box_off.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.reason__text {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.reason__tag {
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-medium);
}

.reason[aria-pressed="true"] { background: var(--blue-dark); }
.reason[aria-pressed="true"]:hover { background: #044252; }
.reason[aria-pressed="true"] .reason__text { color: var(--white); }
.reason[aria-pressed="true"] .reason__tag  { color: var(--blue-light); }
.reason[aria-pressed="true"] .reason__box {
  background-image: url("assets/box_on.svg");
}

/* scoreboard */
.scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding: 40px 36px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--grey-dark) 100%);
  margin-bottom: 40px;
}
.scoreboard__meter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 380px;
  min-width: 0;
}
.scoreboard__row { display: flex; align-items: center; gap: 14px; }
.pips { display: flex; gap: 4px; }
.pip {
  width: 11px; height: 11px;
  border-radius: 2px;
  background: rgba(255,255,255,.25);
  transition: background-color .2s ease;
}
.pip.is-on { background: var(--gold-light); }
.scoreboard__count {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.15px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.scoreboard__count #score-count { color: var(--gold-light); }
.scoreboard__rule { height: 1px; max-width: 600px; background: var(--grey-medium); }
.scoreboard__verdict {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.58px;
  color: var(--white);
  max-width: 600px;
}
.scoreboard__verdict em {
  font-weight: 800;
  font-style: italic;
  color: var(--gold-light);
}

/* --------------------------------------------------------------- why matson money */
.sec--why { background: var(--white); padding: 40px var(--gutter) 64px; }
.sec--why .sec__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.gallery img {
  width: 100%;
  height: clamp(160px, 20vw, 284px);
  object-fit: cover;
  border-radius: var(--radius);
}

.why { display: flex; gap: 48px; align-items: flex-start; }
.why__lead {
  flex: 0 0 416px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  align-self: stretch;
}
.why__doodle { opacity: .6; max-width: 340px; }
.why__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.why__item { padding-right: clamp(0px, 4vw, 24px); }
.why__item + .why__item {
  border-top: 1.5px solid var(--grey-medium);
  padding-top: 24px;
}
.why__item h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--blue-medium);
  margin-bottom: 16px;
}
.why__item h3 sup { font-size: .55em; vertical-align: super; }
.why__item p { font-size: 16px; color: var(--grey-dark); }

/* --------------------------------------------------------------- experience it */
.sec--experience {
  background: linear-gradient(180deg, var(--grey-dark) 0%, var(--blue-dark) 100%);
  padding: 64px var(--gutter) 80px;
}
.sec--experience .sec__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sec--experience .sechead { margin-bottom: 0; }

.inperson { display: flex; flex-direction: column; gap: 48px; }
.inperson__rule { height: 1px; background: rgba(255,255,255,.25); }
.inperson__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.inperson__copy {
  font-size: clamp(19px, 1.8vw, 24px);
  color: var(--white);
  max-width: 62ch;
}
.inperson__copy strong { font-weight: 800; font-style: italic; }
.inperson__copy span { font-weight: 300; }

/* --------------------------------------------------------------- q&a */
.sec--qa { background: var(--white); padding: 80px var(--gutter); }
.sec--qa .sec__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.qa { display: flex; gap: 48px; align-items: flex-start; }
.qa__lead { flex: 0 0 416px; }
.qa__intro { margin-top: 24px; font-size: 16px; color: var(--grey-dark); }
.qa__list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.qa__item { padding-bottom: 16px; }
.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 18px 20px;
  background: var(--panel);
  border: 0;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease;
}
.qa__q:hover { background: #e8eff4; }
.qa__q > span:first-child {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--blue-dark);
}
.qa__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px; height: 24px;
}
.qa__icon-bar {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: transform .25s ease, opacity .25s ease;
}
/* second copy of the same minus asset, rotated to form a plus when collapsed */
.qa__icon-bar--v { transform: rotate(90deg); }
.qa__q[aria-expanded="true"] .qa__icon-bar--v { transform: rotate(0deg); opacity: 0; }

.qa__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.qa__panel p {
  padding: 12px 80px 0 20px;
  font-size: 16px;
  color: var(--grey-dark);
}

/* --------------------------------------------------------------- cta band */
.ctaband {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding: 64px;
  overflow: hidden;
  border-radius: var(--radius);
  border-top: 1px solid var(--grey-medium);
  background: linear-gradient(90deg, var(--blue-medium) 0%, var(--blue-deep) 100%);
}
.ctaband__art {
  position: absolute;
  right: 0px;
  width: 478px;
  height: 100%;
  opacity: .4;
  pointer-events: none;
}
.ctaband__art img { width: 100%; height: 100%; object-fit: cover; }
.ctaband__copy {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 40px;
  flex: 1 1 520px;
  min-width: 0;
}
.ctaband__title {
  flex-shrink: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  color: var(--white);
}
.ctaband__rule { flex-shrink: 0; width: 1px; background: rgba(255,255,255,.4); }
.ctaband__body {
  font-size: 16px;
  line-height: 1.2;
  color: var(--white);
  max-width: 334px;
}
.ctaband .btn { position: relative; flex-shrink: 0; }

/* --------------------------------------------------------------- footer */
.footer { background: var(--footer-bg); padding: 40px var(--gutter); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer__logo img { width: 240px; height: auto; }
.footer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.footer__rule { height: 1px; background: rgba(255,255,255,.2); }

.footer__cols { display: flex; flex-wrap: wrap; gap: 32px; }
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 192px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.footer__col a { color: var(--white); text-decoration: underline; }
.footer__col a:hover { color: var(--blue-light); }
.footer__col--contact { width: auto; }
.footer__col--contact p { color: var(--white); }
.footer__email { color: var(--blue-light) !important; }

.footer__disclaimer {padding: 0; }
.footer__disclaimer p {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.4);
}

.footer__legal { padding: 24px 0; }
.footer__legal p {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.6);
}
.footer__legal p + p { margin-top: 1.4em; }
.footer__legal strong { text-transform: uppercase; font-weight: 400; }

/* ==========================================================================
   Responsive — the Figma covers 1440 only; these are the sensible reflows
   ========================================================================== */

@media (max-width: 1180px) {
  /* Four 170px labels plus the hook block stop fitting on one row here. */
  .hook__lead { flex-basis: 400px; }
  .hstat__label { width: auto; }

  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .why__lead, .qa__lead { flex-basis: 340px; }
  .hook__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hstat__num {width: 100%;}
}

@media (max-width: 980px) {
  .hook__inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .hook__lead { flex-basis: auto; }
  /* Single row above this; 2 x 2 from here down. */

  .sec { padding-top: 56px; }
  .hero { min-height: 0; padding-top: calc(64px + var(--nav-h)); padding-bottom: 80px; }
  .hero__inner { flex-direction: column; align-items: center; gap: 32px;}
  .hero__mark { max-width: 380px; }
  .hero__sub { max-width: 46ch; }
  .hero__copy {  gap: 12px;}

  .sechead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .sechead__body { flex-basis: auto; }

  .why, .qa { flex-direction: column; gap: 32px; }
  .why__lead, .qa__lead { flex-basis: auto; width: 100%; gap: 32px; }
  .why__doodle { display: none; }
  .why__body { gap: 32px; }
  .why__item { padding-right: 0; }

  .stat { flex-basis: 45%; }
  .stat:nth-child(3) { border-left: 0; }
  .stats--dark .stat--sm:nth-child(3) { border-left: 1px solid var(--blue-medium); }

  .ctaband { padding: 40px; }
  .ctaband__copy { flex-direction: column; gap: 20px; }
  .ctaband__rule { width: 100%; height: 1px; }
  .ctaband__art { opacity: .1; }
  .fieldline { padding: 0px 0; }
  .sec--experience { padding: 40px var(--gutter) 80px;}
  .ctaband__title {font-size: 32px;}
  .h2 {font-size: 32px;}
  .hook__title {font-size: 32px;}
  .eyebrow {font-size: 14px;}
}

@media (max-width: 720px) {
  /* The 170px label width is what forces the row wide; release it here. */
  .hook__stats { gap: 12px 16px; }

  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .quote__hide {display: none;}
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery img { height: 220px; }
  .gallery img:nth-child(n+3) { display: none; }

  .stat { flex-basis: 100%; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--grey-medium); margin-top: 12px; }
  .stats--dark .stat--sm,
  .stats--dark .stat--sm:first-child,
  .stats--dark .stat--sm:nth-child(3) { border-left: 1px solid var(--blue-medium); border-top: 0; margin-top: 0; }
  .stats--dark { gap: 20px; }

  .scoreboard { padding: 28px 24px; }
  .scoreboard .btn { width: 100%; }
  .qa__panel p { padding-right: 20px; }
  .nav__logo img { width: 160px; }
  .nav .btn { font-size: 13px; padding: 11px 16px; }
  .hero__actions .btn { width: 100%; }
  .ctaband .btn {width: 100%;}
  .sec-if { padding: 40px var(--gutter) 0px; }
  .scoreboard {position: sticky; bottom: 20px;}
  .btn--blue {width: 100%;}
}

@media (max-width: 480px) {
  .roster { grid-template-columns: minmax(0, 1fr); }
  .reason { aspect-ratio: auto; min-height: 0; }
  .hero__actions { width: 100%;}
  .stat--sm {padding: 0 16px;}

}