/* Amped venture studio overrides on top of for-human-byq.webflow.css.
   Keep this file small and additive. Heavier customization belongs in
   for-human-byq.webflow.css (or a Webflow rebuild) once the brand is locked. */

/* ============================================================
   Webflow IX2 fix: animations on the grafted template sections
   are registered to a different page-id in webflow.js, so they
   never fire on this page. We replace them with pure CSS:
   - keyframe marquee scrolls
   - force-visible headlines (drop the inline opacity:0)
   - tightened section paddings (the Webflow layouts assume the
     animations fill space we don't actually need)
   ============================================================ */

@keyframes amped-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Portfolio marquee on this page is the only remaining IX2 marquee. */
.section.home-b-marquee-section .marquee-inner-images {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  width: max-content;
  will-change: transform;
  animation: amped-marquee-scroll 55s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .section.home-b-marquee-section .marquee-inner-images {
    animation: none;
  }
}

/* Force-visible: any element on a grafted section that ships
   with style="opacity:0" will never fade in here, so just show it. */
.section.home-b-marquee-section [style*="opacity:0"],
.section.about-b-features-section [style*="opacity:0"],
.section.home-c-faq-section [style*="opacity:0"] {
  opacity: 1 !important;
}

/* Portfolio marquee: pull the headline tight against the cards. */
.section.home-b-marquee-section .headline-home-b-marquee {
  padding-bottom: 48px;
}

/* FAQ section: give the grafted template block a warmer Amped surface.
   Without an explicit background it inherits the template body's grey. */
.section.home-c-faq-section {
  background-color: #FFFDF6;
  color: #1F1915;
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.section.home-c-faq-section .title-divider {
  background-color: rgba(31, 25, 21, 0.12);
}

.section.home-c-faq-section .headline-faq {
  position: sticky;
  top: 112px;
}

.section.home-c-faq-section .headline-faq h2 {
  max-width: 420px;
  letter-spacing: -0.045em;
}

.section.home-c-faq-section .expandable-single {
  background: #F6F2E8;
  border: 1px solid rgba(31, 25, 21, 0.08);
  box-shadow: 0 18px 50px -42px rgba(31, 25, 21, 0.5);
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.section.home-c-faq-section .expandable-single:hover {
  background: #FCFAF5;
  border-color: rgba(31, 25, 21, 0.16);
  transform: translateY(-1px);
}

.section.home-c-faq-section .expandable-single.is-open {
  background: #FCFAF5;
  border-color: rgba(31, 25, 21, 0.18);
  box-shadow: 0 22px 60px -38px rgba(31, 25, 21, 0.45);
}

.section.home-c-faq-section .expandable-single.is-open:hover {
  transform: none;
}

.section.home-c-faq-section .faq-paragraph {
  color: rgba(31, 25, 21, 0.72);
}

.section.home-c-faq-section .faq-horizontal,
.section.home-c-faq-section .faq-vertical {
  background-color: #1F1915;
}

/* === FAQ accordion: own the expand/collapse motion ===
   The template's Webflow IX2 squishes the answer with a transform: scaleY
   (note the transform-origin: 50% 0 on .expandable-bottom in the source CSS),
   which is what made the open state look "corny" - text squashing as it
   appears. We override that with a clean grid-template-rows collapse and a
   subtle fade + lift on the paragraph. A small inline script in index.html
   strips the IX2 listeners and toggles the .is-open class. */

.section.home-c-faq-section .expandable-top {
  align-items: center;
}

.section.home-c-faq-section .faq-animated-box {
  flex-shrink: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.home-c-faq-section .faq-horizontal,
.section.home-c-faq-section .faq-vertical {
  transform-origin: 50% 50%;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms ease;
}

.section.home-c-faq-section .expandable-single.is-open .faq-animated-box {
  transform: rotate(180deg);
}

.section.home-c-faq-section .expandable-single.is-open .faq-vertical {
  transform: scaleY(0);
  opacity: 0;
}

.section.home-c-faq-section .expandable-bottom {
  display: grid !important;
  grid-template-rows: 0fr;
  transform: none !important;
  opacity: 1 !important;
  transition: grid-template-rows 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.home-c-faq-section .expandable-bottom > * {
  min-height: 0;
  overflow: hidden;
}

.section.home-c-faq-section .expandable-single.is-open .expandable-bottom {
  grid-template-rows: 1fr;
}

/* Zero the template's padding-top on the paragraph when closed.
   With box-sizing: border-box, a 0fr grid row still reserves the
   padding height (it isn't part of the collapsing content), so we
   transition padding-top from 0 -> 24px alongside the grid expansion
   to keep the closed state truly flush. */
.section.home-c-faq-section .faq-paragraph {
  padding-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: padding-top 480ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease,
              transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.home-c-faq-section .expandable-single.is-open .faq-paragraph {
  padding-top: 24px;
  opacity: 1;
  transform: translateY(0);
  transition: padding-top 480ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 360ms ease 140ms,
              transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
}

@media (max-width: 991px) {
  .section.home-c-faq-section .expandable-single.is-open .faq-paragraph {
    padding-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.home-c-faq-section .faq-animated-box,
  .section.home-c-faq-section .faq-horizontal,
  .section.home-c-faq-section .faq-vertical,
  .section.home-c-faq-section .expandable-bottom,
  .section.home-c-faq-section .faq-paragraph {
    transition: none;
  }
}

@media (max-width: 991px) {
  .section.home-c-faq-section .headline-faq {
    position: static;
  }
}

/* ============================================================
   Amped reveal: a tiny CSS-only entrance animation triggered by
   a small IntersectionObserver block at the bottom of index.html.
   Replaces Webflow IX2 fade-ins that don't fire because the page-id
   on this site doesn't match the source pages those interactions
   were registered against.
   ============================================================ */

.amped-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--amped-reveal-delay, 0ms);
}

.amped-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .amped-reveal,
  .amped-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Stagger feature items in the partner section so they cascade in. */
.amped-partner-section .home-c-feature-item:nth-child(1) { --amped-reveal-delay: 0ms; }
.amped-partner-section .home-c-feature-item:nth-child(2) { --amped-reveal-delay: 120ms; }
.amped-partner-section .home-c-feature-item:nth-child(3) { --amped-reveal-delay: 240ms; }

/* ---------- Values marquee (single row) ----------
   Dark band: editorial mission intro, then one scrolling row.
   Filled SVG icons stay clean at billboard scale. Font size on .amped-values-marquee;
   icons track via em on .amped-values-marquee-icon. */

.amped-values-marquee-section {
  background:
    radial-gradient(circle at 8% 0%, rgba(212, 253, 128, 0.13), transparent 30%),
    linear-gradient(180deg, #241D18 0%, #1A1512 100%);
  color: #FFFDF6;
  padding-top: 104px !important;
  padding-bottom: 104px !important;
  overflow: hidden;
  position: relative;
}

.amped-values-marquee-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 246, 0.16), transparent);
  pointer-events: none;
}

.amped-values-marquee-headline {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 40px;
}

.amped-values-marquee-kicker {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid rgba(255, 253, 246, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.03);
  color: #FFFDF6;
  box-shadow: inset 0 0 0 1px rgba(212, 253, 128, 0.04);
}

.amped-values-marquee-kicker .icon-xs {
  width: 16px;
  height: 16px;
  color: #D4FD80;
}

.amped-kicker-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #D4FD80;
  box-shadow: 0 0 0 4px rgba(212, 253, 128, 0.12),
              0 0 18px rgba(212, 253, 128, 0.72);
  flex: none;
}

.amped-values-marquee-kicker .label {
  color: #FFFDF6;
}

.amped-values-marquee-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
}

.amped-values-marquee-lead {
  margin: 0;
  max-width: 640px;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 253, 246, 0.72);
}

.amped-values-marquee-h {
  margin: 0;
  font-size: clamp(42px, 6.2vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-weight: 600;
  color: #FFFDF6;
}

.amped-values-list-headline {
  align-items: start;
  margin-top: 8px;
  margin-bottom: 72px;
}

.amped-values-list {
  max-width: 680px;
}

.amped-values-list .main-features-item {
  --amped-reveal-delay: 0ms;
}

.amped-values-list .main-features-item:nth-child(2) { --amped-reveal-delay: 120ms; }
.amped-values-list .main-features-item:nth-child(3) { --amped-reveal-delay: 240ms; }
.amped-values-list .main-features-item:nth-child(4) { --amped-reveal-delay: 360ms; }

.amped-values-list .main-features-item-content {
  color: #FFFDF6;
}

.amped-values-list .text-semibold {
  color: #FFFDF6;
}

.amped-values-list .text-light-48 {
  color: rgba(255, 253, 246, 0.62);
}

.amped-values-list .section-divider.light {
  background-color: rgba(255, 253, 246, 0.16);
}

.amped-values-marquee {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: clamp(178px, 21vw, 292px);
}

.amped-values-marquee-row {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: amped-marquee-scroll 62s linear infinite;
}

/* Base size lives on the group so sibling text + icons share one em scale. */
.amped-values-marquee-group {
  display: flex;
  align-items: center;
  gap: 0.24em;
  padding-right: 0.24em;
  flex-shrink: 0;
}

.amped-values-marquee-text {
  font-size: 1em;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #FFFDF6;
  white-space: nowrap;
}

.amped-values-marquee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.48em;
  height: 0.48em;
  color: #D4FD80;
  flex-shrink: 0;
}

.amped-values-marquee-icon svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .amped-values-marquee-row {
    animation: none;
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  .amped-values-marquee-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .amped-values-marquee-headline {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 28px;
  }
  .amped-values-marquee {
    font-size: clamp(86px, 19.8vw, 180px);
  }
  .amped-values-marquee-group {
    gap: 0.22em;
    padding-right: 0.22em;
  }
  .amped-values-marquee-row {
    animation-duration: 54s;
  }
}

/* ---------- Partner section (home-b about pattern) ----------
   Lean on the template defaults: cream cards on the page background,
   dark headline + body text. Just tighten the headline scale and
   make sure the title column doesn't dwarf the body. */

.amped-partner-section {
  padding-top: 120px;
  padding-bottom: 120px;
}

.amped-partner-section .headline-home-b-about {
  margin-bottom: 48px;
}

.amped-partner-section .headline-home-b-about h3 {
  font-size: clamp(36px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #1F1915;
}

.amped-partner-section .home-c-feature-item .text-h5 {
  letter-spacing: -0.01em;
  margin: 0;
}

.amped-partner-section .amped-partner-feature-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amped-partner-section .amped-partner-feature-num {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(31, 25, 21, 0.48);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- Nav: 8 items now, tighten gaps a touch on desktop ---------- */

.nav-menu-inner {
  gap: 24px;
}

/* ---------- Nav scroll swap: quick crossfade ----------
   Webflow's original IX2 scroll interaction moves between the hero nav and
   the tan nav with a more theatrical motion. Own the two fixed layers here so
   the state change is a simple, fast opacity blend. */
.navigation-master .nav-wrap {
  will-change: opacity;
  transform: none !important;
  transition: opacity 180ms ease;
}

.navigation-master .nav-wrap.static {
  opacity: 1 !important;
  pointer-events: auto;
}

.navigation-master .nav-wrap.light {
  opacity: 0 !important;
  pointer-events: none;
}

body.amped-nav-scrolled .navigation-master .nav-wrap.static {
  opacity: 0 !important;
  pointer-events: none;
}

body.amped-nav-scrolled .navigation-master .nav-wrap.light {
  opacity: 1 !important;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .navigation-master .nav-wrap {
    transition: none;
  }
}

/* ---------- Hero nav color cleanup ----------
   The Webflow light-nav variant only landed on the container/logo,
   so links, the desktop CTA, and the hamburger inherited dark styles. */
.nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-link {
  color: #FFFDF6;
}

.nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-link:hover,
.nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-link.w--current {
  color: rgba(255, 253, 246, 0.72);
}

.nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-desktop-button .cta-main.cta-small {
  border: 1px solid rgba(255, 253, 246, 0.42);
  background-color: rgba(255, 253, 246, 0.12);
  color: #FFFDF6;
}

.nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-desktop-button .cta-main.cta-small:hover {
  border-color: rgba(255, 253, 246, 0.66);
  background-color: rgba(255, 253, 246, 0.2);
  color: #FFFDF6;
}

.nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .menu-button {
  color: #FFFDF6;
}

@media (max-width: 991px) {
  .nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-menu-inner .nav-link {
    color: #1F1915;
  }

  .nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-menu-inner .nav-link:hover,
  .nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .nav-menu-inner .nav-link.w--current {
    color: rgba(31, 25, 21, 0.64);
  }

  .nav-container.w-variant-3b1fc7d1-1f8f-1087-907e-5818dea89952 .menu-button.w--open {
    color: #1F1915;
  }

  /* Restore nav links inside the open mobile menu. The template hides
     every .nav-link at <=991px (it's the desktop nav row collapse) but
     never re-shows them inside the cloned .w-nav-overlay, so the menu
     paints as an empty 136px band of padding. Force them visible and
     give them mobile-sized hit targets. */
  .nav-menu-inner .nav-link,
  .w-nav-overlay .nav-menu-inner .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    font-size: clamp(22px, 4.5vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(31, 25, 21, 0.1);
  }

  .nav-menu-inner .nav-link:last-of-type,
  .w-nav-overlay .nav-menu-inner .nav-link:last-of-type {
    border-bottom: none;
  }

  /* CTA pinned to the bottom of the mobile menu. Hidden on desktop;
     the in-bar .nav-desktop-button handles that case. */
  .nav-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    width: 100%;
    padding: 16px 24px;
    background-color: #1F1915;
    color: #FFFDF6;
    border-radius: 999px;
    text-align: center;
  }

  .nav-mobile-cta:hover {
    background-color: rgba(31, 25, 21, 0.88);
  }

  .nav-mobile-cta .button-text-small {
    color: #FFFDF6;
    font-size: 16px;
  }
}

/* Desktop: keep the mobile-only CTA out of the nav row. */
@media (min-width: 992px) {
  .nav-mobile-cta {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .nav-menu-inner {
    gap: 18px;
  }
  .nav-menu-inner .nav-link {
    font-size: 14px;
  }
}

/* ---------- Brand wordmark: real logo is wide, give it room ---------- */
/* Template defaults nav-brand to 100px wide; wordmark needs ~200px to read.
   IMPORTANT: don't set `display` on .nav-logo - the template uses
   `display: none` on the unused (dark) variant, and a `display: block`
   override here would show both copies stacked. */

.nav-brand {
  width: 220px !important;
}

.nav-brand .nav-logo {
  height: auto;
}

@media (max-width: 991px) {
  .nav-brand {
    width: 180px !important;
  }
}

@media (max-width: 600px) {
  .nav-brand {
    width: 150px !important;
  }
}

/* ---------- Mobile nav: give the bar real breathing room ----------
   Webflow's mobile template sets nav-container padding to 12px y, which
   collapses to a ~47px tall bar on a phone. Bump it so the logo + menu
   button sit in a proper header band. */

@media (max-width: 991px) {
  .nav-container {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media (max-width: 600px) {
  .nav-container {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .nav-right {
    grid-column-gap: 12px;
  }
}

/* ---------- Mobile hero CTAs: stack instead of squeezing side-by-side ----------
   Default .hero-button-wrap is a single row that doesn't wrap; on a phone
   the two CTAs end up ~half-width each and their labels wrap onto two
   lines. Stack them full-width so the text reads cleanly on one line. */

@media (max-width: 600px) {
  .hero-button-wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .hero-button-wrap .cta-main {
    width: 100%;
    text-align: center;
    white-space: nowrap;
  }

  .hero-button-wrap .cta-main .button-text {
    white-space: nowrap;
  }
}

/* Footer brand mark - the brand-link slot is small by default; let the
   wordmark be a touch bigger to anchor the dark footer. */
.footer .brand-navbar {
  height: auto;
  width: 220px;
  max-width: 100%;
}

/* ---------- Why we exist - home-b endorse pattern ---------- */

.amped-why-section {
  background-color: #FFFDF6;
  color: #1F1915;
}

/* Centered "about-text-master" layout grafted from home-a-about-section.
   The template's .about-text-master already handles the centered column +
   924px max-width; we just tighten the headline letter-spacing and trim
   the default h-tag margins from the inner heading. */
.amped-why-section .about-text-wrap > .text-h4 {
  margin: 0;
  letter-spacing: -0.02em;
}

/* ---------- Why Amped - typographic word-flow ----------
   Grafts the template's `headline-about-c` + `about-c-text-master`
   pattern (about/about-c.html hero). Each word is its own .text-h2
   div; flex-wrap left-aligned; a 100%-width spacer between sentences
   forces a clean visual break so the period beat still lands. Words
   cascade in via a CSS stagger keyed to the parent's .is-visible
   class (set by the data-amped-reveal IntersectionObserver).

   Word size is scaled down from raw .text-h2 (96px desktop), but kept
   large enough to read as an editorial display moment. */

.section.amped-why-flow {
  padding-top: 120px;
  padding-bottom: 120px;
}

.amped-why-flow-headline {
  row-gap: 40px;
  margin-bottom: 0;
  align-items: flex-start;
}

.amped-why-flow-text {
  display: flex;
  column-gap: 16px;
  row-gap: 4px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1180px;
}

/* Override the inherited .text-h2 (96px desktop) with a tighter
   clamp so the word-flow block sits as a confident sub-hero beat
   rather than a competing display moment. */
.amped-why-word {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: #1F1915;
}

/* Sits between the two sentences as a 100%-width flex item with a
   little extra height. Forces the second sentence onto a new row
   and gives the two-beat punctuation room to breathe. */
.amped-why-word-break {
  flex-basis: 100%;
  width: 100%;
  height: 0.25em;
}

.amped-why-flow-sub {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(31, 25, 21, 0.72);
  /* Hold until the word cascade finishes (~705ms last word) before
     fading the supporting paragraph up. */
  --amped-reveal-delay: 820ms;
}

/* Per-word stagger. The parent .amped-why-flow-text gets .is-visible
   from the data-amped-reveal observer; each word transitions with a
   delay set by its position in the flow. */
.amped-why-flow-text .amped-why-word {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 540ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--word-delay, 0ms);
}

.amped-why-flow-text.is-visible .amped-why-word {
  opacity: 1;
  transform: none;
}

/* First sentence (10 words at nth-child 1..10). */
.amped-why-flow-text .amped-why-word:nth-child(1) { --word-delay: 0ms; }
.amped-why-flow-text .amped-why-word:nth-child(2) { --word-delay: 35ms; }
.amped-why-flow-text .amped-why-word:nth-child(3) { --word-delay: 70ms; }
.amped-why-flow-text .amped-why-word:nth-child(4) { --word-delay: 105ms; }
.amped-why-flow-text .amped-why-word:nth-child(5) { --word-delay: 140ms; }
.amped-why-flow-text .amped-why-word:nth-child(6) { --word-delay: 175ms; }
.amped-why-flow-text .amped-why-word:nth-child(7) { --word-delay: 210ms; }
.amped-why-flow-text .amped-why-word:nth-child(8) { --word-delay: 245ms; }
.amped-why-flow-text .amped-why-word:nth-child(9) { --word-delay: 280ms; }
.amped-why-flow-text .amped-why-word:nth-child(10) { --word-delay: 315ms; }
/* nth-child(11) is the .amped-why-word-break spacer; no word there. */
/* Second sentence (10 words at nth-child 12..21). A small extra pause
   at the break (320 vs 280) gives the period beat a moment to land. */
.amped-why-flow-text .amped-why-word:nth-child(12) { --word-delay: 390ms; }
.amped-why-flow-text .amped-why-word:nth-child(13) { --word-delay: 425ms; }
.amped-why-flow-text .amped-why-word:nth-child(14) { --word-delay: 460ms; }
.amped-why-flow-text .amped-why-word:nth-child(15) { --word-delay: 495ms; }
.amped-why-flow-text .amped-why-word:nth-child(16) { --word-delay: 530ms; }
.amped-why-flow-text .amped-why-word:nth-child(17) { --word-delay: 565ms; }
.amped-why-flow-text .amped-why-word:nth-child(18) { --word-delay: 600ms; }
.amped-why-flow-text .amped-why-word:nth-child(19) { --word-delay: 635ms; }
.amped-why-flow-text .amped-why-word:nth-child(20) { --word-delay: 670ms; }
.amped-why-flow-text .amped-why-word:nth-child(21) { --word-delay: 705ms; }

@media (prefers-reduced-motion: reduce) {
  .amped-why-flow-text .amped-why-word,
  .amped-why-flow-text.is-visible .amped-why-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 991px) {
  .section.amped-why-flow {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .amped-why-flow-headline {
    row-gap: 28px;
  }
  .amped-why-flow-text {
    column-gap: 12px;
  }
}

@media (max-width: 600px) {
  .amped-why-flow-text {
    column-gap: 10px;
  }
}

/* Legacy class from the first draft of this section. Safe to keep while
   markup evolves during the static site pass. */

.amped-about-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  max-width: 720px;
}

.amped-about-body .text-large {
  margin: 0;
  color: rgba(31, 25, 21, 0.78);
}

/* ---------- Wilmington AI Roundtable (uses template home-a-story-section) ----------
   We reuse the template's story-halves layout (label + heading + image-left / copy-right)
   so the section matches the rest of the site. Just three small tweaks:
   1. let story-image-wrap size to the poster's aspect ratio instead of the 800px crop
   2. add a hover lift on the image (it links to RSVP)
   3. lay the two CTAs out in a row */

.section.home-a-story-section.amped-roundtable-section {
  background-color: #FFFDF6;
  color: #1F1915;
}

/* Show the template's opacity:0 heading + force-visible the reveal targets. */
.section.home-a-story-section [style*="opacity:0"] {
  opacity: 1 !important;
}

.amped-roundtable-image.story-image-wrap {
  display: block;
  height: auto;
  aspect-ratio: 1024 / 650;
  box-shadow: 0 24px 60px -28px rgba(31, 25, 21, 0.35);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.amped-roundtable-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 70px -28px rgba(31, 25, 21, 0.45);
}

.amped-roundtable-image .image-cover {
  height: 100%;
  transform: none;
}

.amped-roundtable-next strong {
  font-weight: 600;
  color: #1F1915;
}

.amped-roundtable-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 767px) {
  .amped-roundtable-image.story-image-wrap {
    aspect-ratio: 1024 / 650;
    height: auto;
  }
}

/* ---------- Studio Portfolio marquee (home-b-marquee-section) ---------- */

/* Subtle off-white background so the cards have something to sit on. */
.section.home-b-marquee-section {
  background-color: #F6F2E8;
  padding-top: 96px;
  padding-bottom: 96px;
}

/* ---------- FAQ link inside an answer paragraph ---------- */

.faq-paragraph a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-paragraph a:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
   NEW SECTION: The AI Shift (deeper dive)
   3 sub-blocks side by side on a light band.
   ============================================================ */

.amped-shift-section {
  background-color: #FFFDF6;
  color: #1F1915;
  padding-top: 120px;
  padding-bottom: 120px;
}

.amped-shift-headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 56px;
  max-width: 720px;
}

.amped-shift-headline .amped-shift-h {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #1F1915;
}

.amped-shift-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 991px) {
  .amped-shift-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.amped-shift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
}

/* Animated top line. Replaces the static border-top so we can
   draw it in left-to-right. Falls back to fully drawn for
   reduced-motion + no-JS users via the rules below. */
.amped-shift-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #1F1915;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--shift-delay, 0ms);
}

.amped-shift-card-num {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(31, 25, 21, 0.56);
}

.amped-shift-card-title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #1F1915;
  margin: 0;
}

.amped-shift-card-body {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(31, 25, 21, 0.72);
  margin: 0;
}

/* ---------- Shift grid: line-draw + cascade reveal ----------
   The grid gets .is-visible via the amped-reveal observer.
   Each card's top line draws in, then num/title/body cascade
   up just behind it. */

.amped-shift-card .amped-shift-card-num,
.amped-shift-card .amped-shift-card-title,
.amped-shift-card .amped-shift-card-body {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.amped-shift-card:nth-child(1) { --shift-delay: 0ms; }
.amped-shift-card:nth-child(2) { --shift-delay: 220ms; }
.amped-shift-card:nth-child(3) { --shift-delay: 440ms; }

.amped-shift-card .amped-shift-card-num {
  transition-delay: calc(var(--shift-delay, 0ms) + 220ms);
}
.amped-shift-card .amped-shift-card-title {
  transition-delay: calc(var(--shift-delay, 0ms) + 320ms);
}
.amped-shift-card .amped-shift-card-body {
  transition-delay: calc(var(--shift-delay, 0ms) + 420ms);
}

.amped-shift-grid.is-visible .amped-shift-card::before {
  transform: scaleX(1);
}
.amped-shift-grid.is-visible .amped-shift-card-num,
.amped-shift-grid.is-visible .amped-shift-card-title,
.amped-shift-grid.is-visible .amped-shift-card-body {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .amped-shift-card::before,
  .amped-shift-grid.is-visible .amped-shift-card::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .amped-shift-card .amped-shift-card-num,
  .amped-shift-card .amped-shift-card-title,
  .amped-shift-card .amped-shift-card-body,
  .amped-shift-grid.is-visible .amped-shift-card-num,
  .amped-shift-grid.is-visible .amped-shift-card-title,
  .amped-shift-grid.is-visible .amped-shift-card-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   NEW SECTION: Our process (horizontal stepper / journey)
   Connecting line + dot per stage. No numbers (those are on the
   "How we work" cards above) - the line tells the story instead.
   ============================================================ */

.amped-process-section {
  background-color: #FFFDF6;
  color: #1F1915;
  padding-top: 120px;
  padding-bottom: 120px;
}

.amped-process-headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 72px;
  max-width: 720px;
}

.amped-process-h {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #1F1915;
}

.amped-process-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(31, 25, 21, 0.72);
}

.amped-process-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.amped-process-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: rgba(31, 25, 21, 0.12);
  z-index: 0;
}

.amped-process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 0;
  z-index: 1;
}

.amped-process-step-marker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 20px;
}

.amped-process-step-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1F1915;
  border: 4px solid #FFFDF6;
  box-shadow: 0 0 0 2px #1F1915;
}

.amped-process-step-name {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #1F1915;
  margin-top: 4px;
}

.amped-process-step-body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(31, 25, 21, 0.72);
}

/* ---------- Process flow: cinematic timeline reveal ----------
   The horizontal track draws in left-to-right, then each dot pops
   in along its length, with the step name + body fading up just
   behind it. The .is-visible class is added by the amped-reveal
   IntersectionObserver near the bottom of index.html. */

.amped-process-track {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.amped-process-flow.is-visible .amped-process-track {
  transform: scaleX(1);
}

.amped-process-step-dot {
  transform: scale(0);
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 320ms ease;
}
.amped-process-step-name,
.amped-process-step-body {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.amped-process-flow.is-visible .amped-process-step-dot,
.amped-process-flow.is-visible .amped-process-step-name,
.amped-process-flow.is-visible .amped-process-step-body {
  opacity: 1;
  transform: none;
}

/* Stagger per step. Track is :nth-child(1); steps are 2..5. */
.amped-process-step:nth-child(2) { --step-delay: 120ms; }
.amped-process-step:nth-child(3) { --step-delay: 400ms; }
.amped-process-step:nth-child(4) { --step-delay: 680ms; }
.amped-process-step:nth-child(5) { --step-delay: 960ms; }

.amped-process-step-dot {
  transition-delay: var(--step-delay, 0ms);
}
.amped-process-step-name {
  transition-delay: calc(var(--step-delay, 0ms) + 140ms);
}
.amped-process-step-body {
  transition-delay: calc(var(--step-delay, 0ms) + 240ms);
}

@media (prefers-reduced-motion: reduce) {
  .amped-process-track,
  .amped-process-flow.is-visible .amped-process-track,
  .amped-process-step-dot,
  .amped-process-step-name,
  .amped-process-step-body,
  .amped-process-flow.is-visible .amped-process-step-dot,
  .amped-process-flow.is-visible .amped-process-step-name,
  .amped-process-flow.is-visible .amped-process-step-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 991px) {
  .amped-process-flow {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .amped-process-track {
    top: 0;
    bottom: 0;
    left: 9px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .amped-process-flow.is-visible .amped-process-track {
    transform: scaleY(1);
  }
  .amped-process-step {
    padding-left: 40px;
  }
  .amped-process-step-marker {
    position: absolute;
    left: 0;
    top: 0;
  }
}

/* ============================================================
   Shared utilities used by the team section (#team).
   - .amped-team-portrait-placeholder shows when a headshot 404s
     (each <img> in #team has an inline onerror that flips display
     from none to flex on the placeholder sibling).
   - .amped-team-linkedin-mark is the square LinkedIn icon button.
   The full team layout rules live further down in this file
   under "TEAM SECTION (#team)".
   ============================================================ */

.amped-team-portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(31, 25, 21, 0.55);
  text-align: center;
  padding: 24px;
  line-height: 1.5;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(31, 25, 21, 0.04) 14px 15px
    );
}

.amped-team-portrait-placeholder span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(31, 25, 21, 0.4);
}

.amped-team-portrait-placeholder.is-placeholder {
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.12em;
}

.amped-team-linkedin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(31, 25, 21, 0.16);
  color: rgba(31, 25, 21, 0.62);
  background: transparent;
  flex-shrink: 0;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.amped-team-linkedin-mark svg {
  width: 16px;
  height: 16px;
  display: block;
}

.amped-team-linkedin-mark:hover {
  background-color: #1F1915;
  border-color: #1F1915;
  color: #FFFDF6;
  transform: translateY(-1px);
}

/* ============================================================
   NEW SECTION: What is a venture studio? (dark editorial)
   Inspired by the template's dark video-section + values-marquee
   patterns. The whole section sits on a dark surface; the
   "featured" answer block, the Venture Studio Thesis chart, and
   the comparison columns are all flush (no card backgrounds),
   separated by hairline rules.
   ============================================================ */

.amped-explainer-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 0%, rgba(212, 253, 128, 0.12), transparent 32%),
    linear-gradient(180deg, #241D18 0%, #1A1512 100%);
  color: #FFFDF6;
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
}

.amped-explainer-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 246, 0.16), transparent);
  pointer-events: none;
}

.amped-explainer-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 80px;
  max-width: 820px;
}

.amped-explainer-kicker {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255, 253, 246, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.03);
}

.amped-explainer-kicker .label {
  color: #FFFDF6;
}

.amped-explainer-h {
  margin: 0;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #FFFDF6;
}

.amped-explainer-lead {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 253, 246, 0.72);
}

/* ---------- Featured answer block (flush, no card) ---------- */

.amped-explainer-featured {
  padding-top: 56px;
  margin-bottom: 96px;
  border-top: 1px solid rgba(255, 253, 246, 0.14);
}

.amped-explainer-featured-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: #D4FD80;
  margin-bottom: 20px;
}

.amped-explainer-featured-h {
  margin: 0 0 36px;
  max-width: 880px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #FFFDF6;
}

.amped-explainer-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.amped-explainer-featured-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 253, 246, 0.74);
}

.amped-explainer-featured-traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amped-explainer-trait {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 253, 246, 0.88);
}

.amped-explainer-trait::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(212, 253, 128, 0.16);
  border: 1.5px solid #D4FD80;
  transform: translateY(-50%);
}

.amped-explainer-trait::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D4FD80;
  transform: translateY(-50%);
}

/* ---------- Venture Studio Thesis chart ---------- */

.amped-thesis {
  padding-top: 56px;
  margin-bottom: 96px;
  border-top: 1px solid rgba(255, 253, 246, 0.14);
}

.amped-thesis-head {
  max-width: 880px;
  margin-bottom: 32px;
}

.amped-thesis-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: #D4FD80;
  margin-bottom: 18px;
}

.amped-thesis-h {
  margin: 0 0 24px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #FFFDF6;
}

.amped-thesis-h em {
  font-style: normal;
  color: #D4FD80;
}

.amped-thesis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.amped-thesis-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 253, 246, 0.82);
  letter-spacing: 0.02em;
}

.amped-thesis-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.amped-thesis-legend-dot.is-studio { background: #D4FD80; }
.amped-thesis-legend-dot.is-traditional { background: #FF6E91; }

.amped-thesis-chart {
  position: relative;
  width: 100%;
  padding: 8px 0;
}

.amped-thesis-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
}

.amped-thesis-source {
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 253, 246, 0.4);
  max-width: 760px;
  letter-spacing: 0.01em;
}

/* Line-draw + dot pop reveal. Paths use pathLength="1" so the
   stroke-dasharray of 1 normalizes regardless of actual length. */
.amped-thesis-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.amped-thesis-line.is-traditional { transition-delay: 100ms; }
.amped-thesis-line.is-studio { transition-delay: 300ms; }
.amped-thesis.is-visible .amped-thesis-line { stroke-dashoffset: 0; }

.amped-thesis-dot {
  opacity: 0;
  transition: opacity 320ms ease;
}
.amped-thesis.is-visible .amped-thesis-dot { opacity: 1; }
.amped-thesis-dot.is-d1 { transition-delay: 200ms; }
.amped-thesis-dot.is-d2 { transition-delay: 1200ms; }
.amped-thesis-dot.is-d3 { transition-delay: 1800ms; }
.amped-thesis-dot.is-d4 { transition-delay: 900ms; }
.amped-thesis-dot.is-d5 { transition-delay: 1500ms; }

@media (prefers-reduced-motion: reduce) {
  .amped-thesis-line,
  .amped-thesis.is-visible .amped-thesis-line {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .amped-thesis-dot,
  .amped-thesis.is-visible .amped-thesis-dot {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ---------- Comparison columns (no boxes, hairline dividers) ---------- */

.amped-explainer-compare {
  padding-top: 56px;
  border-top: 1px solid rgba(255, 253, 246, 0.14);
}

.amped-explainer-compare-head {
  max-width: 820px;
  margin-bottom: 40px;
}

.amped-explainer-compare-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 253, 246, 0.5);
  margin-bottom: 14px;
}

.amped-explainer-compare-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 253, 246, 0.78);
}

.amped-explainer-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.amped-explainer-compare-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 253, 246, 0.1);
  align-items: start;
}

.amped-explainer-compare-row:first-child {
  padding-top: 0;
}

.amped-explainer-compare-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.amped-explainer-compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  color: rgba(255, 253, 246, 0.4);
}

.amped-explainer-compare-mark svg {
  width: 14px;
  height: 14px;
  display: block;
}

.amped-explainer-compare-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}

.amped-explainer-compare-tag {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 253, 246, 0.5);
  line-height: 1;
}

.amped-explainer-compare-h {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #FFFDF6;
}

.amped-explainer-compare-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 253, 246, 0.66);
}

.amped-explainer-compare-row:nth-child(1) { --amped-reveal-delay: 0ms; }
.amped-explainer-compare-row:nth-child(2) { --amped-reveal-delay: 120ms; }
.amped-explainer-compare-row:nth-child(3) { --amped-reveal-delay: 240ms; }

.amped-explainer-footnote {
  margin: 64px 0 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 253, 246, 0.55);
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .amped-explainer-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .amped-explainer-headline {
    margin-bottom: 56px;
  }

  .amped-explainer-featured,
  .amped-thesis,
  .amped-explainer-compare {
    padding-top: 48px;
  }

  .amped-explainer-featured,
  .amped-thesis {
    margin-bottom: 72px;
  }

  .amped-explainer-featured-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .amped-explainer-compare-row {
    column-gap: 18px;
  }

  .amped-explainer-compare-h {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .amped-thesis-svg {
    max-height: none;
  }

  .amped-thesis-chart {
    margin: 0 -16px;
  }
}

/* ============================================================
   TEAM SECTION (#team)

   Sticky-headline + vertical list. Mirrors the FAQ section's
   sticky-title pattern. Whole grid is capped at max-width 1180px
   so it never sprawls on giant monitors. Right (people) column
   is naturally constrained to ~640px, which gives bios a
   comfortable 60-75 character measure even on 27"+ displays.

   Reuses the .amped-team-portrait-placeholder and
   .amped-team-linkedin-mark utilities defined above.
   ============================================================ */

.amped-team-section {
  background-color: #FFFDF6;
  color: #1F1915;
  padding-top: 120px;
  padding-bottom: 120px;
}

.amped-team-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.amped-team-headline-col {
  position: sticky;
  top: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.amped-team-h {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #1F1915;
}

.amped-team-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(31, 25, 21, 0.68);
}

.amped-team-proof {
  width: 100%;
  max-width: 420px;
  margin-top: 2px;
}

.amped-team-proof-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(31, 25, 21, 0.68);
}

.amped-team-proof-subhead {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: rgba(31, 25, 21, 0.68);
}

.amped-team-journey {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 0;
  margin-bottom: 16px;
}

.amped-team-journey span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1F1915;
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.amped-team-journey span::before {
  content: "\2713";
  color: rgba(31, 25, 21, 0.65);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

@media (max-width: 600px) {
  .amped-team-journey span {
    font-size: 17px;
  }
}

/* Team proof: IO target is .amped-team-proof (data-amped-reveal only, like
   .amped-process-flow). Subhead first; journey rows stagger; lead last. */
.amped-team-proof-subhead,
.amped-team-lead,
.amped-team-journey span {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.amped-team-proof.is-visible .amped-team-proof-subhead,
.amped-team-proof.is-visible .amped-team-lead,
.amped-team-proof.is-visible .amped-team-journey span {
  opacity: 1;
  transform: none;
}

.amped-team-proof-subhead {
  transition-delay: 0ms;
}

.amped-team-journey span:nth-child(1) { transition-delay: 90ms; }
.amped-team-journey span:nth-child(2) { transition-delay: 190ms; }
.amped-team-journey span:nth-child(3) { transition-delay: 290ms; }
.amped-team-journey span:nth-child(4) { transition-delay: 390ms; }
.amped-team-journey span:nth-child(5) { transition-delay: 490ms; }

.amped-team-lead {
  transition-delay: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  .amped-team-proof-subhead,
  .amped-team-lead,
  .amped-team-journey span,
  .amped-team-proof.is-visible .amped-team-proof-subhead,
  .amped-team-proof.is-visible .amped-team-lead,
  .amped-team-proof.is-visible .amped-team-journey span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.amped-team-people-col {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  width: 100%;
  padding-top: 46px;
}

/* Section labels above each chapter (Founder / Board of Advisors).
   Both styled identically so they read as a parallel pair, deliberately
   smaller than the names beneath (22px / 26px) so they don't compete.
   Muted brown (vs the bold black names) keeps them feeling like
   restrained category labels rather than headings. */
.amped-team-eyebrow {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(31, 25, 21, 0.5);
  margin-bottom: 24px;
}

/* The Board of Advisors eyebrow is the one that comes after a person
   row. Give it extra top margin to create the chapter break (replaces
   the old hairline rule, no visible line needed). */
.amped-team-person + .amped-team-eyebrow {
  margin-top: 56px;
}

/* Person row: portrait left, body right. Hairline divider between rows. */
.amped-team-person {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
  align-items: start;
}

.amped-team-person:first-of-type {
  padding-top: 0;
}

/* The founder row sits as its own beat above the Board of Advisors
   subhead - no hairline rule under it. */
.amped-team-person.is-founder {
  border-bottom: none;
  padding-bottom: 0;
}

/* The last advisor card has no hairline below it. */
.amped-team-person:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.amped-team-person-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(31, 25, 21, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.amped-team-person-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.amped-team-person-portrait.is-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(31, 25, 21, 0.05) 14px 15px
    );
  border: 1px dashed rgba(31, 25, 21, 0.2);
}

.amped-team-person-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amped-team-person-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.amped-team-person-name-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.amped-team-person-name {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #1F1915;
}

/* Founder gets a slightly larger name treatment. */
.amped-team-person.is-founder .amped-team-person-name {
  font-size: 26px;
}

.amped-team-person-role {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(31, 25, 21, 0.6);
}

.amped-team-person-bio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amped-team-person-bio p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(31, 25, 21, 0.74);
}

.amped-team-person-bio strong {
  font-weight: 600;
  color: #1F1915;
}

.amped-team-person.is-placeholder .amped-team-person-name,
.amped-team-person.is-placeholder .amped-team-person-role {
  color: rgba(31, 25, 21, 0.42);
}

.amped-team-person.is-placeholder .amped-team-person-bio p {
  color: rgba(31, 25, 21, 0.54);
}

/* Stagger the rows' reveal entry. The founder row is :nth-of-type 1; the
   advisors are 2..4 (the section-break + eyebrow are not <article> elements
   so :nth-of-type counts cleanly). */
.amped-team-person:nth-of-type(1) { --amped-reveal-delay: 0ms; }
.amped-team-person:nth-of-type(2) { --amped-reveal-delay: 80ms; }
.amped-team-person:nth-of-type(3) { --amped-reveal-delay: 160ms; }
.amped-team-person:nth-of-type(4) { --amped-reveal-delay: 240ms; }

@media (max-width: 991px) {
  .amped-team-section {
    padding-top: 80px;
    padding-bottom: 96px;
  }
  .amped-team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .amped-team-headline-col {
    position: static;
  }
  .amped-team-lead {
    max-width: none;
  }
  .amped-team-people-col {
    max-width: none;
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  .amped-team-person {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 20px;
    padding: 24px 0;
  }
  .amped-team-person.is-founder .amped-team-person-name {
    font-size: 22px;
  }
  .amped-team-person + .amped-team-eyebrow {
    margin-top: 40px;
  }
}