/* ============================================================================
   Home page (index) — page-specific rules only.
   Every value measured off reference/spec/index.desktop.json.
   ========================================================================== */

.page-index .fx { font-family: var(--font-display); }

/* ---------- shared CTA button (Duda dmButtonLink) ---------- */
.page-index .cta {
  display: block;
  background: var(--gold-btn);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}
.page-index .cta > span {
  display: inline-block;
  max-width: 98%;
  padding: 10px 7px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: var(--white);
}
.page-index .cta:hover { background: var(--gold-btn-hover); }

/* ============================================================================
   1. HERO  (live: section y119 h661, padding 57/40, bg photo cover)
   ========================================================================== */
.page-index .hero {
  position: relative;
  padding: 57px 40px;
  background: url(../assets/pexels-photo-5915147-1920w.jpeg) no-repeat 0 0 / cover;
}
/* Duda's hasBackgroundOverlay: measured as a flat 50% black wash. */
.page-index .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}
.page-index .hero > .cols { position: relative; z-index: 1; }
.page-index .hero-card {
  background: var(--white);
  border: 3px solid var(--gold-btn);
  border-radius: 14px;
  text-align: center;
  padding-top: 33px;
}
.page-index .hero-kicker {
  font-family: var(--font-body);
  font-size: 30px; font-weight: 700; line-height: normal;
  color: var(--gold);
}
.page-index .hero-title {
  font-family: var(--font-body);
  font-size: 48px; font-weight: 700; line-height: normal;
  color: #000;
  margin-top: 39.5px;
}
.page-index .hero-lead {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 700; line-height: normal;
  color: #000;
  margin-top: 10.5px;
}
.page-index .hero-eyebrow {
  font-family: var(--font-body);
  font-size: 20px; font-weight: 700; line-height: normal;
  color: #000;
  margin-top: 42px;
}
.page-index .hero-copy {
  font-size: 16px; line-height: normal; color: var(--body-text);
  margin-top: 32px;
}
.page-index .cta--hero { width: 274px; height: 47px; margin: 32px 0 40px 157px; }

/* ============================================================================
   2. HAVE YOU THOUGHT TO YOURSELF

   Reworked 2026-08-12: the old block was one centred 960px slab of 16/32 grey
   with the payoff line buried as a third paragraph. Same words, given a
   hierarchy — gold kicker, the wish as the actual headline, the two paragraphs
   of evidence in two readable columns, and "And they took action." pulled out
   as the statement it is. */
.page-index .think {
  padding: 96px 40px 100px;
  background: var(--white);
  text-align: center;
}
.page-index .think-kicker {
  font-size: 14px; font-weight: 700; line-height: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-btn);
}
.page-index .think-rule {
  width: 56px; height: 3px;
  border: 0; background: var(--gold-btn);
  margin: 16px auto 0;
}
.page-index .think-head {
  font-family: var(--font-body);
  font-size: 34px; font-weight: 700; line-height: 1.3;
  color: #000;
  max-width: 880px;
  margin: 22px auto 0;
}
/* two columns beats one centred wall for 90 words of evidence */
.page-index .think-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 880px;
  margin: 46px auto 0;
  text-align: left;
}
.page-index .think-copy p {
  margin: 0;
  font-size: 16px; line-height: 30px; color: var(--body-text);
}
.page-index .think-punch {
  position: relative;
  font-family: var(--font-body);
  font-size: 26px; font-weight: 700; line-height: normal;
  color: #000;
  margin-top: 54px;
  padding-top: 30px;
}
.page-index .think-punch::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 56px; height: 3px; margin-left: -28px;
  background: var(--gold-btn);
}

/* ============================================================================
   2B. THE CORE — business pie video.

   NOT on the Duda original; a deliberate addition, so index no longer compares
   clean against reference/spec/index.desktop.json below y1614.

   Reworked 2026-08-12: the video was a 520px thumbnail in a side column with
   the five levers crammed beside it in a dl. Now the video leads at 760px, and
   the five levers sit under it as numbered cards — 3 up, then 2 centred — which
   is what makes the section read as the centrepiece rather than a text block
   with a picture in it. Same #f6f6f6 band and same button as the rest of the page.
   ========================================================================== */
.page-index .core { padding: 96px 40px 100px; background: #f6f6f6; }

/* Copy left, video right — same shape as the 3-Phase section further down the
   page, so the two long sections don't both read as centred slabs. */
.page-index .core-row { align-items: center; }
.page-index .core-intro { padding-right: 40px; }
.page-index .core-eyebrow {
  font-size: 14px; font-weight: 700; line-height: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-btn);
}
.page-index .core-rule {
  width: 56px; height: 3px;
  border: 0; background: var(--gold-btn);
  margin: 16px 0 0;
}
.page-index .core-head {
  font-family: var(--font-body);
  font-size: 30px; font-weight: 700; line-height: 1.3;
  color: #000;
  margin: 20px 0 0;
}
.page-index .core-sub {
  font-family: var(--font-body);
  font-size: 19px; font-weight: 700; line-height: 1.5;
  color: #000;
  margin: 16px 0 0;
}
.page-index .core-copy { margin: 24px 0 0; }
.page-index .core-copy p { font-size: 16px; line-height: 30px; color: var(--body-text); }
.page-index .core-copy p + p { margin-top: 20px; }

.page-index .core-embed { width: 100%; }

/* Click-to-play facade: a raw YouTube iframe pulls ~1MB of third-party player
   JS into first paint. js/site.js swaps in the real iframe on click. */
.page-index .video-facade {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.page-index .video-facade__poster {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.page-index .video-facade:hover .video-facade__poster { transform: scale(1.02); }
.page-index .video-facade__play {
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 62px; margin: -31px 0 0 -44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .72);
  transition: background-color .18s ease, transform .18s ease;
}
.page-index .video-facade__play::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  margin: -11px 0 0 -8px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--white);
}
.page-index .video-facade:hover .video-facade__play,
.page-index .video-facade:focus-visible .video-facade__play {
  background: var(--gold-btn);
  transform: scale(1.06);
}
.page-index .core-embed iframe {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
}

/* ---------- the five levers, as cards ----------
   Everything in the video is spoken audio; this is the same argument in
   crawlable text for anyone who doesn't press play. */
.page-index .core-levers { margin-top: 72px; text-align: center; }
.page-index .core-levers__head {
  font-family: var(--font-body);
  font-size: 22px; font-weight: 700; line-height: normal;
  color: #000;
  margin: 0;
}
.page-index .lever-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
/* five items in a six-column grid: three across, then two centred */
.page-index .lever { grid-column: span 2; }
.page-index .lever:nth-child(4) { grid-column: 2 / span 2; }
.page-index .lever:nth-child(5) { grid-column: 4 / span 2; }

.page-index .lever {
  background: var(--white);
  border: 1px solid #e4e4e4;
  border-top: 3px solid var(--gold-btn);
  border-radius: 10px;
  padding: 24px 22px 26px;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-index .lever:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.page-index .lever__num {
  display: block;
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: .16em;
  color: var(--gold-btn);
}
.page-index .lever__term {
  margin: 10px 0 0;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  letter-spacing: .04em; text-transform: uppercase;
  color: #000;
}
.page-index .lever__def {
  margin: 10px 0 0;
  font-size: 15px; line-height: 24px;
  color: var(--body-text);
}

/* ---------- the close ---------- */
.page-index .core-outro { text-align: center; margin-top: 64px; }
.page-index .core-outro p {
  max-width: 760px; margin-left: auto; margin-right: auto;
  font-size: 16px; line-height: 30px; color: var(--body-text);
}
/* the element selector is needed to outrank `.core-outro p` */
.page-index .core-outro p.core-punch {
  position: relative;
  font-family: var(--font-body);
  font-size: 26px; font-weight: 700; line-height: normal;
  color: #000;
  margin-top: 40px;
  padding-top: 30px;
}
.page-index .core-outro p.core-punch::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 56px; height: 3px; margin-left: -28px;
  background: var(--gold-btn);
}
.page-index .cta--core { width: 274px; height: 47px; margin: 32px auto 0; }
.page-index .core-more { margin-top: 24px; font-size: 15px; line-height: 24px; }
.page-index .core-more a { color: var(--gold-btn); font-weight: 700; }

/* ---------- scroll reveal (both reworked sections) ----------
   The hidden state only exists once js adds .reveal-js, so with js off — or
   with prefers-reduced-motion — everything renders in final state. */
.reveal-js .page-index [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-js .page-index [data-reveal].is-in { opacity: 1; transform: none; }
.reveal-js .page-index [data-reveal] .lever {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-js .page-index [data-reveal].is-in .lever { opacity: 1; transform: none; }
.page-index .lever:nth-child(1) { transition-delay: 60ms; }
.page-index .lever:nth-child(2) { transition-delay: 130ms; }
.page-index .lever:nth-child(3) { transition-delay: 200ms; }
.page-index .lever:nth-child(4) { transition-delay: 270ms; }
.page-index .lever:nth-child(5) { transition-delay: 340ms; }

/* ============================================================================
   3. WHAT DOES iKULUTU.com MEAN  (live: y1614 h170, padding 50/0, black)
   ========================================================================== */
.page-index .mean { padding: 50px 0; background: #000; }
.page-index .mean-head {
  font-family: var(--font-body);
  font-size: 30px; font-weight: 700; line-height: normal;
  color: var(--white);
  margin-top: 10px;
}
.page-index .cta--mean { width: 376px; height: 50px; padding-top: 1px; margin: 10px 0 10px 44px; }

/* ============================================================================
   4. TESTIMONIALS  (live: y1784 h961, padding 100/40, #f6f6f6)
   ========================================================================== */
.page-index .tstm { padding: 100px 40px; background: #f6f6f6; }
.page-index .tstm-head {
  font-family: var(--font-body);
  font-size: 30px; font-weight: 700; line-height: normal;
  color: #000;
}
.page-index .tstm-copy { margin-top: 13px; }
.page-index .tstm-copy p { font-size: 16px; line-height: normal; color: var(--body-text); }
.page-index .tstm-copy p + p { margin-top: 18px; }
.page-index .cta--see { width: 250px; height: 55px; margin: 22px 0 10px; }

.page-index .tstm-media figure { width: 200px; margin: 0; }
.page-index .tstm-media img {
  display: block;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
}
.page-index .tstm-media figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 16px; line-height: normal; color: var(--body-text);
}

.page-index .tstm-row--a .tstm-text { padding-top: 2px; }
.page-index .tstm-row--a .tstm-copy { margin-top: 12px; }
.page-index .tstm-row--a .tstm-media figure { margin-left: auto; }
.page-index .tstm-row--a .tstm-media img { height: 200px; border: 5px solid var(--white); }

.page-index .tstm-row--b { padding-top: 88px; padding-bottom: 40px; }
.page-index .tstm-row--b .tstm-media img { height: 212.312px; border: 5px solid transparent; }
.page-index .tstm-row--b .tstm-text { padding-top: 50px; padding-left: 40px; }
.page-index .tstm-row--b .tstm-copy { margin-top: 15px; }
.page-index .tstm-row--b .cta--see { margin-top: 42px; }

/* ============================================================================
   5. FAST FORWARD / 3-PHASE  (live: y2745 h871, full-bleed row, padding 15/0)
   ========================================================================== */
.page-index .ff { padding: 15px 0; background: var(--white); }
.page-index .ff-row {
  display: flex;
  align-items: flex-start;
  min-height: 841px;
  max-width: 1440px;
  margin: 0 auto;
}
.page-index .ff-text { width: 840px; padding: 122px 7.5px 0 352.5px; }
.page-index .ff-media { width: 600px; align-self: flex-start; padding-top: 106px; }
.page-index .ff-media img { display: block; width: 502px; height: 502px; margin-left: -76px; }

.page-index .ff-head {
  font-family: var(--font-rounded);
  font-size: 30px; font-weight: 700; line-height: normal;
  color: #000;
}
.page-index .ff-rule {
  width: 70px; height: 0;
  border: 0; border-top: 1px solid #000;
  margin: 25px 0 10px;
}
.page-index .ff-sub {
  font-size: 20px; font-weight: 700; line-height: normal; color: #000;
  margin-top: 20px;
}
.page-index .ff-copy { margin-top: 13px; }
.page-index .ff-copy p { font-size: 16px; line-height: normal; color: var(--body-text); }
.page-index .ff-copy p + p { margin-top: 18px; }
.page-index .cta--phase { width: 310px; height: 48px; margin: 32px 0 10px 167.5px; }

/* ============================================================================
   SHARED-FOOTER CORRECTIONS — scoped to this page only.
   These belong in site.css / src/partials/footer.html, which this build is not
   allowed to touch, so they are applied locally and flagged in the report:
     - footer CTA is a 3px black-bordered, 10px-radius button on the live site,
       not the 1px/4px .btn treatment;
     - the whole block below the intro row sits 1px too low;
     - "© 2026" needs a 46px column so the copyright line starts at x=526;
     - the legal block is 1px too tall, which makes the page 2px too long.
   ========================================================================== */
.page-index .footer-title { padding-top: 1px; }
.page-index .footer-sub { margin-top: 24px; }
.page-index .footer-nav-wrap { margin-top: 36px; }
.page-index .footer-cta {
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
}
.page-index .footer-legal__year { min-width: 46px; }
/* Live rule paints a 1px line inside a 3px box, not a 3px line. */
.page-index .footer-rule { border-top-width: 1px; height: 3px; }
.page-index .footer-legal { padding-bottom: 135px; }

/* ============================================================================
   MOBILE — same content, stacked (live mobile keeps every block)
   ========================================================================== */
@media (max-width: 767px) {

  .page-index .cta,
  .page-index .cta--hero,
  .page-index .cta--wide,
  .page-index .cta--mean,
  .page-index .cta--see,
  .page-index .cta--core,
  .page-index .cta--phase {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 100%; height: auto; min-height: 47px;
    margin-left: 0; margin-right: 0;
    padding: 0;
  }
  .page-index .cta > span { max-width: 100%; padding: 10px 7px; }

  .page-index .hero { padding: 40px 15px; background-position: 50% 0; }
  .page-index .hero-card { padding: 24px 12px 0; }
  .page-index .cta--hero { margin: 24px 0 24px; }

  .page-index .think { padding: 56px 15px 60px; }
  .page-index .think-head { font-size: 25px; margin-top: 18px; }
  .page-index .think-copy { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .page-index .think-punch { font-size: 21px; margin-top: 40px; padding-top: 24px; }

  .page-index .core { padding: 56px 15px 60px; }
  .page-index .core-head { font-size: 25px; margin-top: 18px; }
  .page-index .core-sub { font-size: 18px; margin-top: 14px; }
  .page-index .core-copy { margin-top: 22px; }
  .page-index .core-intro { padding-right: 0; }
  .page-index .core-media { margin-top: 28px; }
  .page-index .core-levers { margin-top: 44px; }
  .page-index .lever-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .page-index .lever,
  .page-index .lever:nth-child(4),
  .page-index .lever:nth-child(5) { grid-column: auto; }
  .page-index .core-outro { margin-top: 44px; }
  .page-index .core-outro p.core-punch { font-size: 21px; margin-top: 32px; padding-top: 24px; }
  .page-index .cta--core { margin: 26px 0 0; }

  .page-index .mean { padding: 40px 15px; }
  .page-index .mean-head { margin: 0 0 20px; }
  .page-index .cta--mean { margin: 0; }

  .page-index .tstm { padding: 40px 15px; }
  .page-index .tstm-row--a .tstm-media { order: -1; }
  .page-index .tstm-media figure { width: 100%; margin: 0 auto; }
  .page-index .tstm-media img,
  .page-index .tstm-row--a .tstm-media img,
  .page-index .tstm-row--b .tstm-media img { width: 100%; height: auto; }
  .page-index .tstm-text { margin-top: 24px; }
  .page-index .tstm-row--b { padding: 40px 0 0; }
  .page-index .tstm-row--b .tstm-text { padding: 0; }

  /* Shared footer: at <=767px site.css turns .footer-nav .nav__sub into a static
     flex row inside a flex <li>, which drags the document out to 478px wide.
     Hidden here (the live mobile footer hides them too); belongs in site.css. */
  .page-index .footer-nav .nav__sub { display: none; }
  .page-index .footer-nav > li { flex-wrap: wrap; justify-content: center; }
  .page-index .footer-legal { padding-bottom: 32px; }

  .page-index .ff { padding: 40px 15px; }
  .page-index .ff-row { display: block; min-height: 0; }
  .page-index .ff-text { width: auto; padding-left: 0; margin-top: 24px; }
  .page-index .ff-media { width: auto; padding-top: 0; }
  .page-index .ff-media img { width: 100%; height: auto; margin-left: 0; }
}

/* between the mobile stack and the 3-up grid, two cards per row reads better */
@media (min-width: 768px) and (max-width: 900px) {
  .page-index .lever-grid { grid-template-columns: 1fr 1fr; }
  .page-index .lever,
  .page-index .lever:nth-child(4),
  .page-index .lever:nth-child(5) { grid-column: auto; }
}