/* ==========================================================================
   PK2 AI Advisors · AI Tools Assessment
   Design system: warm paper, near-black ink, one accent, huge whitespace.
   Editorial serif headlines, uppercase sans kickers, border-ruled rows,
   pill CTAs, a dark basement at the bottom of the page.
   Gold has ONE job per screen: kickers, the buy CTAs, the italic word in the
   guarantee headline. Nothing else is gold.
   ========================================================================== */

/* This page keeps its own names for the palette, but every one of them now
   resolves through tokens.css. Swapping a token there re-skins this page with
   no edit here. */
:root {
  --slate:      var(--ink);
  --slate-soft: var(--text-muted);
  /* --gold is not redeclared here: it comes through from tokens.css under the
     same name. Aliasing a property to itself is a cycle and kills the value. */
  --gold-deep:  var(--gold-hover);
  --cream:      var(--paper);
  --white:      var(--sheet);
  --border:     var(--hairline);

  /* Rules on the slate basement */
  --rule-dark:  var(--hairline-inv);

  /* The gutter token governs every horizontal padding on the page */
  --pad: clamp(24px, 8vw, 200px);

  /* Vertical rhythm */
  --sec-y: clamp(72px, 8vw, 128px);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 18px; }
}

img { display: block; }

/* --- Type ----------------------------------------------------------------- */

/* site.css gives every heading the ink colour and a balanced wrap. This page
   predates both: its headings take their colour from the ground they sit on
   (cream on the two slate sections) and its line breaks are the ones the
   original page shipped with. Restore both, or the slate headlines go
   invisible and every headline rewraps. */
h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  color: inherit;
  text-wrap: wrap;
}

h1 {
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* Emphasized headline words render exactly like the rest of the headline.
   The <em> markup stays for semantics; visually it is invisible. */
h1 em,
h2 em {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  color: inherit;
}

p { max-width: 65ch; }

a { color: var(--slate); }

.kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.marker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--slate-soft);
  white-space: nowrap;
}

.lede {
  font-size: clamp(18px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 62ch;
}

.micro {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--slate-soft);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .kicker { font-size: 13px; }
  .marker { font-size: 13px; }
  .micro  { font-size: 14px; }
}

/* --- Layout --------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.section {
  padding: var(--sec-y) var(--pad);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

.section h2 + .lede,
.section h2 + p {
  margin-top: clamp(28px, 3vw, 44px);
}

.section p + p { margin-top: 24px; }

.section h2 + .rows,
.section h2 + .faq-rows,
.section h2 + .fit-grid,
.visually-hidden + .fit-grid,
.visually-hidden + .faq-rows {
  margin-top: clamp(32px, 3.6vw, 52px);
}

/* --- Buttons & links ------------------------------------------------------ */

.btn-pill {
  display: inline-block;
  background: var(--gold);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 26px 48px;
  border-radius: 3em;
  transition: background-color 160ms ease;
}

.btn-pill:hover { background: var(--gold-deep); }

@media (max-width: 480px) {
  .btn-pill { padding: 24px 30px; letter-spacing: 0.08em; }
}

a:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 4px;
}

/* On the two slate fields a slate outline would vanish */
.basement a:focus-visible,
.guarantee a:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.guarantee a { color: var(--cream); }

.text-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.text-link:hover { border-bottom-color: transparent; }

/* --- Border-ruled rows ---------------------------------------------------- */

.rows { border-top: 1px solid var(--border); }

.row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(32px, 4vw, 50px) 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 160ms ease;
}

.row:hover { background: var(--white); }

.row-tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  padding-top: 0.55em;
}

.row-body p { margin-top: 18px; max-width: 62ch; }

@media (max-width: 700px) {
  .row { grid-template-columns: 1fr; gap: 14px; }
  .row-tag { padding-top: 0; }
}

/* --- 01 Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.5vw, 48px) var(--pad) clamp(28px, 3.5vw, 48px);
  background: var(--cream);
  overflow: hidden;
}

/* The wordmark that used to sit on the left of this row now lives in the site
   header, so the section counter is the only thing left in it. It keeps its
   place on the right, where every other section counter on the page sits. */
.hero-top {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 24px;
}

.hero-logo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  max-width: none;
}

.hero-logo .muted { color: var(--slate-soft); }

@media (min-width: 768px) {
  .hero-logo { font-size: 13px; }
}

.hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px);
}

.hero-body h1 {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 16ch;
}

.hero-body .lede {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 58ch;
}

.hero-cta { margin-top: clamp(36px, 4.5vw, 60px); }

.hero-body .micro { margin-top: 24px; max-width: 54ch; }

/* From 1024 up the hero reads as two columns: the copy on the left 55%, the
   worklist sheet on the right 45%. Both tracks start at the top, so the top
   edge of the sheet runs level with the kicker rather than the headline.
   Below the breakpoint .hero-copy is an ordinary block and the sheet drops
   underneath it, exactly as it did before. */
@media (min-width: 1024px) {
  .hero-body {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: 60px;
    align-items: start;
    align-content: center;
  }

  .hero-body > .worklist { margin-top: 0; }
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

.scroll-arrow {
  position: relative;
  display: block;
  width: 10px;
  height: 34px;
}

.scroll-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 34px;
  background: var(--slate-soft);
}

.scroll-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--slate-soft);
  border-bottom: 1px solid var(--slate-soft);
  transform: translateX(-50%) rotate(45deg);
}

/* --- 01 Hero · the marked-up worklist ------------------------------------- */

/* A sheet of paper on the hero, marked up by hand. The rotation lives in a
   custom property because the load reveal has to re-state it inside its own
   transform, and the mobile breakpoint flattens it to 0. */

.worklist {
  --sheet-rot: -0.8deg;
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 24px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  transform: rotate(var(--sheet-rot));
}

.worklist-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: none;
}

.worklist-head {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--slate);
  margin-top: 10px;
  max-width: none;
}

.worklist-rows {
  list-style: none;
  margin-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--border);
}

.worklist-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.25;
  color: var(--slate-soft);
}

/* The footer already carries its own rule */
.worklist-row:last-child { border-bottom: 0; }

.worklist-row.is-marked {
  font-weight: 500;
  color: var(--slate);
}

/* The highlighter stroke. Absolutely positioned off the inline task text so it
   hugs the words rather than the row, skewed and tilted like a marker pass. */
.worklist-hl {
  position: relative;
  display: inline;
}

.worklist-hl::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: 0.02em;
  bottom: 0.06em;
  z-index: -1;
  background: var(--gold);
  opacity: 0.45;
  border-radius: 2px;
  transform: rotate(-0.5deg) skewX(-6deg);
  transform-origin: left center;
}

.worklist-note {
  flex: none;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--gold-deep);
  white-space: nowrap;
}

.worklist-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.worklist-tally {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--slate);
  max-width: none;
}

.worklist-tally span { color: var(--gold); }

.worklist-brand {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  max-width: none;
  white-space: nowrap;
}

/* In the hero's right-hand column the sheet is roughly 460 to 520px wide, so
   its internal type steps down to stay elegant and to keep each annotation on
   one line beside its task. */
@media (min-width: 1024px) {
  .worklist {
    padding: clamp(18px, 1.9vw, 28px) clamp(16px, 1.7vw, 26px) clamp(14px, 1.4vw, 20px);
  }

  .worklist-head { font-size: clamp(18px, 1.6vw, 24px); }

  .worklist-rows { margin-top: clamp(14px, 1.4vw, 20px); }

  .worklist-row {
    gap: clamp(9px, 1.1vw, 16px);
    padding: clamp(12px, 1.15vw, 17px) 0;
    font-size: clamp(13px, 1.35vw, 19px);
  }

  .worklist-note { font-size: clamp(10.5px, 0.95vw, 13px); }

  .worklist-foot { margin-top: 14px; padding-top: 14px; }

  .worklist-tally { font-size: clamp(14px, 1.2vw, 17px); }
}

/* Stacked under the copy: the sheet goes full width and lies flat */
@media (max-width: 1023px) {
  .worklist {
    --sheet-rot: 0deg;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .worklist-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 17px;
    padding: 16px 0;
  }

  .worklist-note {
    font-size: 13px;
    white-space: normal;
  }

  /* Narrow rows let a task wrap, and one absolutely positioned box cannot
     follow text across two lines. Below the breakpoint the stroke becomes a
     cloned background instead, so every line fragment gets its own pass.
     The trade is the skew, which a background cannot carry. */
  .worklist-hl {
    padding: 0 4px;
    margin: 0 -4px;
    border-radius: 2px;
    /* First declaration is the fallback for engines without color-mix(): they
       drop the second and keep this one. --gold-45 is the same value. */
    background-image: linear-gradient(var(--gold-45), var(--gold-45));
    background-image: linear-gradient(
      color-mix(in srgb, var(--gold) 45%, transparent),
      color-mix(in srgb, var(--gold) 45%, transparent));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .worklist-hl::before { display: none; }

  .worklist-foot { flex-wrap: wrap; }
  .worklist-tally { font-size: 15px; white-space: nowrap; }
  .worklist-brand { font-size: 10px; letter-spacing: 0.12em; margin-left: auto; }
}

/* --- 04 The deliverable --------------------------------------------------- */

.deliverable-spreads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  margin: clamp(36px, 4.4vw, 64px) 0 clamp(40px, 5vw, 72px);
}

.deliverable-spreads img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

@media (max-width: 700px) {
  .deliverable-spreads {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 420px;
  }
}

.report-intro {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.report-rows { list-style: none; }

.report-rows .row { grid-template-columns: minmax(180px, 300px) 1fr; }

.report-rows strong {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  display: block;
}

.report-rows .row-body p { margin-top: 0; }

.report-close { margin-top: clamp(32px, 3.6vw, 52px); max-width: 62ch; }

@media (max-width: 700px) {
  .report-rows .row { grid-template-columns: 1fr; }
}

/* --- 05 Fit --------------------------------------------------------------- */

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
}

.fit-col h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.fit-col ul { list-style: none; }

.fit-col li {
  position: relative;
  padding: 20px 0 20px 34px;
  border-bottom: 1px solid var(--border);
}

.fit-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7em;
  width: 14px;
  height: 1px;
  background: var(--slate-soft);
}

@media (min-width: 821px) {
  .fit-grid > .fit-col + .fit-col {
    border-left: 1px solid var(--border);
    padding-left: clamp(32px, 5vw, 80px);
  }
}

@media (max-width: 820px) {
  .fit-grid { grid-template-columns: 1fr; }
}

/* --- 06 Why us ------------------------------------------------------------ */

.signature {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: clamp(32px, 3.6vw, 52px);
  padding-top: 28px;
  border-top: 1px solid var(--border);
  max-width: 62ch;
}

/* --- 07 Guarantee (a slate band, cream type, one gold word) --------------- */

.guarantee {
  background: var(--slate);
  color: var(--cream);
}

.guarantee .kicker { color: var(--gold); }
.guarantee .marker { color: var(--muted-inv); }
.guarantee p { max-width: 60ch; color: var(--text-inv); }

/* --- 08 FAQ --------------------------------------------------------------- */

.faq-rows { border-top: 1px solid var(--border); }

.faq-item {
  padding: clamp(32px, 4vw, 50px) 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 160ms ease;
}

.faq-item:hover { background: var(--white); }

.faq-item h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  max-width: 24ch;
}

.faq-item p { margin-top: 18px; max-width: 62ch; }

/* --- 09 The basement: final CTA + footer ---------------------------------- */

.basement {
  background: var(--slate);
  color: var(--cream);
}

.basement .kicker { color: var(--gold); }
.basement .marker { color: var(--muted-inv); }

.basement-cta {
  padding: var(--sec-y) var(--pad) clamp(56px, 6.4vw, 96px);
}

.basement-cta h2 {
  font-size: clamp(36px, 5vw, 72px);
  max-width: 18ch;
}

.basement-cta .lede {
  margin-top: clamp(24px, 3vw, 40px);
  color: var(--text-inv);
}

.basement-cta .btn-pill { margin-top: clamp(36px, 4vw, 56px); }

.basement-cta .micro {
  margin-top: 28px;
  color: var(--muted-inv);
}

/* The bottom half of the basement is now the site footer. It is the same slate
   as the CTA above it, so the two are one dark block: the only thing marking
   the join is the hairline the old footer meta row already carried.
   The footer's own gutter is the site container, which is wider than this
   page's --pad on large screens, so it takes the page gutter here and the
   copyright line stays under the CTA copy rather than stepping in from it. */
.site-footer {
  border-top: 1px solid var(--rule-dark);
}

.site-footer > .container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--pad);
}

/* This page caps every paragraph at 65ch, which would cut the rule above the
   copyright line short. The footer is chrome, not copy. */
.site-footer p { max-width: none; }

/* --- Success page --------------------------------------------------------- */

.success-page {
  min-height: 100vh;
  background: var(--cream);
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(56px, 8vw, 120px);
}

.success-inner {
  max-width: 800px;
  margin: 0 auto;
}

.success-page h1 {
  font-size: clamp(34px, 4.6vw, 64px);
  margin-top: clamp(20px, 2.5vw, 32px);
  max-width: 20ch;
}

.success-page .lede { margin-top: clamp(24px, 3vw, 40px); }

/* Scoped one level deeper: the Cal.com embed script injects a stylesheet
   that zeroes the margin on its own .cal-inline-container class. */
.success-inner .cal-embed {
  margin: clamp(40px, 5vw, 72px) 0 32px;
  background: var(--white);
  border: 1px solid var(--border);
  min-height: 560px;
  padding: 8px;
}

.success-page .micro { margin-top: 8px; }

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   MOTION LAYER
   Every hidden-until-reveal state below is scoped under `html.js`, so with
   JavaScript off the page renders exactly as it did before this block.
   One easing curve governs every choreographed move.
   ========================================================================== */

:root {
  --ease-sig: cubic-bezier(.76, 0, .24, 1);
}

/* --- Lenis (smooth scroll) ------------------------------------------------ */

html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Reveal primitives ---------------------------------------------------- */

/* Blur + rise: the hero pattern.
   The transition lives on the revealed state, not the hidden one. Declared the
   other way round, the browser animates the *hide* the moment the `js` class
   lands, and the reveal that follows has nothing left to travel. */
html.js .hero .kicker,
html.js .hero h1,
html.js .hero .lede,
html.js .hero .hero-cta,
html.js .hero .micro,
html.js .hero .scroll-cue,
html.js .success-inner > .kicker,
html.js .success-inner > h1,
html.js .success-inner > .lede {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
}

html.js .hero .is-in,
html.js .success-inner > .is-in {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity   800ms var(--ease-sig),
    filter    800ms var(--ease-sig),
    transform 800ms var(--ease-sig);
  transition-delay: var(--reveal-delay, 0ms);
}

/* The worklist sheet: a short settle, not the hero blur. Both states restate
   the sheet's rotation, since `.hero .is-in` above would otherwise flatten it. */
html.js .hero .worklist {
  opacity: 0;
  transform: translateY(14px) rotate(var(--sheet-rot));
}

html.js .hero .worklist.is-in {
  opacity: 1;
  filter: none;
  transform: rotate(var(--sheet-rot));
  transition:
    opacity   200ms var(--ease-sig),
    transform 200ms var(--ease-sig);
  transition-delay: var(--reveal-delay, 0ms);
}

/* The five marker strokes draw left to right once the sheet has landed */
html.js .worklist-hl::before {
  transform: rotate(-0.5deg) skewX(-6deg) scaleX(0);
}

html.js .worklist.is-drawn .worklist-hl::before {
  transform: rotate(-0.5deg) skewX(-6deg) scaleX(1);
  transition: transform 260ms var(--ease-sig);
  transition-delay: var(--mark-delay, 0ms);
}

/* Same stagger, drawn on the background stroke the small screen uses */
@media (max-width: 767px) {
  html.js .worklist-hl { background-size: 0% 100%; }

  html.js .worklist.is-drawn .worklist-hl {
    background-size: 100% 100%;
    transition: background-size 260ms var(--ease-sig);
    transition-delay: var(--mark-delay, 0ms);
  }
}

/* Fade + rise: the scroll-reveal pattern */
html.js .reveal-rise {
  opacity: 0;
  transform: translateY(24px);
}

html.js .reveal-rise.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   700ms var(--ease-sig),
    transform 700ms var(--ease-sig);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Word-by-word mask reveal. JS wraps each word in .word (the mask) around an
   inner span that starts parked below the mask. The bottom padding buys room
   for descenders, and the hidden transform adds that same amount back so no
   sliver of the glyph tops shows through. */
html.js .word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

html.js .word > span {
  display: inline-block;
  transform: translateY(calc(110% + 0.16em));
  transition: transform 850ms var(--ease-sig);
  transition-delay: var(--word-delay, 0ms);
}

html.js .is-in .word > span { transform: none; }

/* --- Scroll cue bob ------------------------------------------------------- */

@keyframes pk2-cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

html.js .scroll-arrow {
  animation: pk2-cue-bob 1.8s ease-in-out infinite;
}

/* --- Preloader (JS-created, index only) ----------------------------------- */

html.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

html.js .preloader.is-out { pointer-events: none; }

html.js .preloader-slab {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--slate);
  will-change: transform;
  transition:
    transform     650ms var(--ease-sig),
    border-radius 650ms var(--ease-sig);
}

html.js .preloader.is-out .preloader-slab {
  transform: translateY(-100%);
  border-radius: 0 0 50% 50%;
}

html.js .preloader-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transition: opacity 300ms var(--ease-sig);
}

html.js .preloader.is-ready .preloader-mark { opacity: 1; }

html.js .preloader-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* --- Button flood fill ---------------------------------------------------- */

html.js .btn-pill {
  position: relative;
  overflow: hidden;
}

/* A circle parked just under the button that rises to flood it. The travel is
   short of a full -100%: at exactly -100% the circle is bottom-tangent to the
   button and its corners stay gold. These distances park the widest part of
   the circle over the button face instead. */
html.js .btn-pill::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--slate);
  transform: translate(-50%, 0);
  transition: transform 450ms var(--ease-sig);
  pointer-events: none;
}

html.js .btn-pill::before { width: 150%; }

html.js .btn-pill:hover::before,
html.js .btn-pill:focus-visible::before {
  transform: translate(-50%, -60%);
}

html.js .btn-label {
  position: relative;
  z-index: 1;
  transition: color 450ms var(--ease-sig);
}

html.js .btn-pill:hover .btn-label,
html.js .btn-pill:focus-visible .btn-label {
  color: var(--cream);
}

/* The final CTA sits on the slate basement, so a slate flood would erase it.
   Same mechanic, inverted palette: cream floods in, the label goes slate. */
html.js .basement .btn-pill::before { background: var(--cream); }

html.js .basement .btn-pill:hover .btn-label,
html.js .basement .btn-pill:focus-visible .btn-label {
  color: var(--slate);
}

/* The flood does the work now, so hold the base gold under it */
html.js .btn-pill:hover {
  background: var(--gold);
}

/* --- Row hovers ----------------------------------------------------------- */

.row h3,
.report-rows strong,
.faq-item h3 {
  transition: transform 300ms var(--ease-sig);
}

.row-body p,
.faq-item p {
  transition: opacity 300ms var(--ease-sig);
}

@media (hover: hover) {
  .row:hover h3,
  .report-rows .row:hover strong,
  .faq-item:hover h3 { transform: translateX(8px); }

  .row:hover .row-body p,
  .faq-item:hover p { opacity: 0.72; }
}

/* --- Reduced motion: no reveals, no preloader, no bob --------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js .hero .kicker,
  html.js .hero h1,
  html.js .hero .lede,
  html.js .hero .hero-cta,
  html.js .hero .micro,
  html.js .hero .scroll-cue,
  html.js .success-inner > .kicker,
  html.js .success-inner > h1,
  html.js .success-inner > .lede,
  html.js .reveal-rise {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html.js .word > span { transform: none !important; }

  /* The sheet keeps its tilt and its strokes: those are style, not motion */
  html.js .hero .worklist,
  html.js .hero .worklist.is-in {
    opacity: 1 !important;
    transform: rotate(var(--sheet-rot)) !important;
  }

  html.js .worklist-hl::before,
  html.js .worklist.is-drawn .worklist-hl::before {
    transform: rotate(-0.5deg) skewX(-6deg) scaleX(1) !important;
  }

  html.js .worklist-hl,
  html.js .worklist.is-drawn .worklist-hl {
    background-size: 100% 100% !important;
  }

  html.js .preloader { display: none !important; }

  html.js .scroll-arrow { animation: none !important; }

  html.js .btn-pill::before { display: none; }

  html.js .btn-pill:hover { background: var(--gold-deep); }

  * {
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}