/* ============================================================
   HAYMAKER — page sections
   ============================================================ */

/* ── hero ─────────────────────────────────────────────────
   Full bleed footage, one line over it, nothing else competing.
   The line is the whole section.                              */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(104px,13vh,150px) var(--edge) clamp(26px,4vh,44px);
  background: #05070a; color: #fff;
  overflow: clip;
}
.hero__film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.03) brightness(1.06);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,7,10,.55) 0%, rgba(5,7,10,.12) 26%, rgba(5,7,10,.2) 56%, rgba(5,7,10,.8) 100%),
    radial-gradient(120% 76% at 50% 44%, rgba(5,7,10,.44) 0%, rgba(5,7,10,.1) 46%, rgba(5,7,10,.66) 100%);
}
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* nudged up a touch: the foot row and the scroll cue both sit below, so
   dead centre reads low */
.hero__line {
  position: relative; z-index: 2;
  align-self: center; justify-self: center;
  width: 100%; text-align: center;
  translate: 0 -3.5vh;
}
/* the measure has to be set on the element that carries the size,
   or ch resolves against the parent's 16px and every word wraps */
.hero__line .say {
  max-width: 15ch;
  margin-inline: auto;
  color: #fff;
  text-shadow: 0 2px 44px rgba(0,0,0,.45);
}
.hero__line .say em { color: var(--lime) }

.hero__foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(18px,3vw,44px);
}
.hero__foot p { max-width: 40ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.66) }

.hero__cue {
  position: absolute; left: 50%; translate: -50% 0; bottom: clamp(24px,4vh,42px); z-index: 2;
  display: grid; justify-items: center; gap: 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.36);
}
.hero__cue i { display: block; width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.5), transparent); animation: hm-cue 2.6s var(--ease) infinite }
@keyframes hm-cue { 0%,100% { opacity: .25; scale: 1 .55; transform-origin: top } 50% { opacity: 1; scale: 1 1 } }
@media (prefers-reduced-motion: reduce) { .hero__cue i { animation: none } }

/* ── the manifesto ─────────────────────────────────────────
   Dark ground, the argument centred in the serif, and directly
   under it the thing the argument is about: eight seconds of
   moss taking a branch. The band is capped and faded at both
   edges so it reads as a plate on the page, not a full bleed.   */

.story {
  position: relative;
  background: var(--pitch); color: #fff;
  overflow: clip;
  padding: clamp(96px, 15vh, 190px) 0 0;
}
.story__inner { position: relative; z-index: 3; text-align: center }

.manifesto {
  margin-inline: auto;
  max-width: min(46ch, 90%);
  font-family: var(--serif);
  font-size: clamp(20px, 2.25vw, 35px);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: #F4F2E8;
  text-wrap: pretty;
}
.manifesto p + p { margin-top: 1.1em }
.manifesto em { font-style: italic; color: var(--lime) }
.manifesto b { font-weight: 400; color: #fff }

/* the growth band. It plays once and stays; a looping timelapse of
   something growing undoes the point of it. */
.band {
  position: relative;
  width: min(1600px, 100%);
  margin: clamp(56px, 9vh, 120px) auto 0;
}
.band { position: relative; isolation: isolate }
.band__v, .band img { display: block; width: 100%; height: auto }
/* The plate dissolves into the page on all four edges rather than sitting
   on it as a rectangle. Multiply was the first thing tried here and it
   erases the layer: multiplying anything by a near-black ground gives
   near-black. On a dark page the mask is what does the job. */
.band__v {
  --edges:
    linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
  -webkit-mask-image: var(--edges); mask-image: var(--edges);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* The bloom is the same footage again: blurred, lifted, dodged, and shown
   only through a soft circle following the pointer. A radial gradient
   would have been a light; this is the picture's own highlights. */
.band__glow {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(26px) saturate(1.5) brightness(1.15);
  mix-blend-mode: color-dodge;
  opacity: var(--bo, 0);
  pointer-events: none;
  transition: opacity .55s var(--ease);
  --hole: radial-gradient(circle var(--br, 230px) at var(--bx, 50%) var(--by, 50%),
          #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
  -webkit-mask-image: var(--hole); mask-image: var(--hole);
}

/* the tear into the paper below */
.tear {
  display: block; width: 100%;
  height: clamp(48px, 7vw, 96px);
  margin-top: clamp(56px, 9vh, 120px);
}

/* a display rule beats the hidden attribute, so say it again explicitly */
.band img[hidden] { display: none }
@media (prefers-reduced-motion: reduce) {
  .band video { display: none }
  .band img[hidden] { display: block }
}

/* ── ticker ───────────────────────────────────────────────── */

.ticker { overflow: hidden; padding-block: clamp(18px,2vw,26px); border-block: 1px solid var(--hair); background: var(--ground) }
.ticker__track { display: flex; width: max-content; gap: clamp(32px,4vw,70px); animation: hm-marquee 46s linear infinite }
.ticker:hover .ticker__track { animation-play-state: paused }
.ticker__track span { font-size: clamp(15px,1.5vw,21px); font-weight: 500; letter-spacing: -.02em; color: var(--ink-3); white-space: nowrap }
.ticker__track span.on { color: var(--ink) }
@keyframes hm-marquee { to { translate: -50% 0 } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none } }

/* ── thesis (dark board) ──────────────────────────────────── */

.thesis { position: relative; overflow: clip; padding-top: clamp(150px, 21vw, 300px) }
.thesis .shell { position: relative; z-index: 2 }
.thesis__grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(28px,5vw,90px); align-items: end }
.thesis .d2 { max-width: 12ch }
.thesis__aside { display: grid; gap: 20px; justify-items: start }
.thesis__aside .voice { color: var(--on-night); max-width: 24ch }
.thesis__board { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .92; overflow: clip }
.thesis__board i, .thesis__board img {
  position: absolute; display: block; border-radius: 2px;
  animation: hm-float var(--t, 14s) var(--ease) infinite alternate;
  animation-delay: var(--dl, 0s);
}
.thesis__board img { object-fit: cover; box-shadow: 0 20px 50px -30px rgba(0,0,0,.9) }
@media (max-width: 1080px) { .thesis__board { display: none } }
@keyframes hm-float { to { translate: 0 -14px } }

/* ── feeling / pipeline ───────────────────────────────────── */

.feel__pipe { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2) }
.feel__pipe b { font-weight: 400 }
.feel__pipe i { color: var(--ink-3); font-style: normal; padding-inline: 4px }
.feel__pipe b.on { color: var(--ink); font-weight: 500 }

/* ── three-up (concept / execution / process) ─────────────── */

.trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 }
.trio > div { padding: clamp(22px,2.4vw,38px) clamp(20px,2.4vw,42px); border-left: 1px solid var(--hair) }
.trio > div:first-child { padding-left: 0; border-left: 0 }
.dark .trio > div { border-left-color: var(--hair-night) }
.trio h3 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin: 22px 0 12px }

/* ── work / launches ──────────────────────────────────────── */

.launch { display: grid; grid-template-columns: 92px 1fr auto; gap: clamp(14px,2.4vw,40px); align-items: baseline; padding-block: clamp(20px,2.4vw,32px); border-top: 1px solid var(--hair) }
.launch:last-child { border-bottom: 1px solid var(--hair) }
.launch__yr { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3) }
.launch > span { display: block }
.launch__t { display: block; font-size: clamp(17px,1.7vw,25px); font-weight: 500; letter-spacing: -.028em; line-height: 1.22 }
.launch__m { display: block; margin-top: 7px; font-size: 14px; color: var(--ink-2); max-width: 62ch }
.launch__r { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 13.5px; font-weight: 500; color: var(--ink) }
.launch__r::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none }
.launch__go { justify-self: end; align-self: center }
a.launch { transition: padding-inline .45s var(--ease-out) }
a.launch:hover { padding-left: 14px }

/* ── services grid ────────────────────────────────────────── */

.svc { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,1.4vw,20px) }
.svc--two { grid-template-columns: repeat(2, 1fr) }
.svc .card { min-height: 260px; justify-content: space-between }
.svc figure { margin: 0; border-radius: var(--r-md); overflow: clip; aspect-ratio: 1.2 }
.svc figure img { width: 100%; height: 100%; object-fit: cover }

/* ── phases ───────────────────────────────────────────────── */

.phase { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px,3.2vw,60px); align-items: start }
.phase__col { display: grid; gap: 14px }
.phase__arrow { align-self: center; color: var(--ink-3); font-size: 22px }
.phase__tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2) }
.phase__tag::before { content: ""; width: 9px; height: 9px; background: var(--lime); flex: none }

/* ── cadence timeline ─────────────────────────────────────── */

.cadence { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,2vw,34px); position: relative; padding-top: 30px }
.cadence::before { content: ""; position: absolute; inset: 5px 0 auto; height: 1px; background: var(--hair) }
.dark .cadence::before { background: var(--hair-night) }
.cadence__step { position: relative }
.cadence__step::before {
  content: ""; position: absolute; top: -30px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 0 0 1.4px var(--ink-3);
}
.dark .cadence__step::before { background: var(--night); box-shadow: inset 0 0 0 1.4px rgba(243,242,236,.4) }
.cadence__step:last-child::before { background: var(--lime); box-shadow: none }
.cadence h3 { font-size: clamp(17px,1.5vw,22px); font-weight: 500; letter-spacing: -.028em; margin: 10px 0 8px }

/* ── pricing ───────────────────────────────────────────────
   Two plans, set as facing pages rather than boxes: the number
   is the headline, the list is the fine print, and the chosen
   one is marked by ink rather than by a border.               */

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 26px) }

.plan {
  position: relative;
  display: grid; align-content: start;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(26px, 3vw, 48px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
  transition: box-shadow .4s var(--ease), translate .5s var(--ease-out);
}
.plan:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px var(--hair), var(--lift) }

/* the recommended plan is ink, not a badge on paper */
.plan--pick { background: var(--ink); color: var(--on-night); box-shadow: none }
.plan--pick:hover { box-shadow: var(--lift-hi) }
.plan--pick .voice-i, .plan--pick .plan__fig span, .plan--pick li { color: rgba(243,242,236,.66) }
.plan--pick li::before { background: var(--lime) }
.plan--pick .plan__addons { border-top-color: var(--hair-night) }

.plan__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.plan h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.036em; line-height: 1 }

/* the number carries the section */
.plan__figs { display: grid; gap: 4px; padding-block: clamp(6px, 1vw, 12px) }
.plan__fig { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.plan__fig b {
  font-size: clamp(34px, 4.2vw, 60px); font-weight: 500;
  letter-spacing: -.05em; line-height: 1;
}
.plan__fig span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.plan__fig + .plan__fig { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--hair) }
.plan--pick .plan__fig + .plan__fig { border-top-color: var(--hair-night) }
.plan--pick .plan__fig + .plan__fig b { font-size: clamp(24px, 2.4vw, 34px); opacity: .72 }
.plan:not(.plan--pick) .plan__fig + .plan__fig b { font-size: clamp(24px, 2.4vw, 34px); opacity: .6 }

.plan ul { display: grid; gap: 11px }
.plan li {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.plan li::before { content: ""; width: 7px; height: 7px; background: var(--ink-3); margin-top: .52em }

.plan__addons { border-top: 1px solid var(--hair); padding-top: 18px; display: grid; gap: 10px }
.plan__addon { display: flex; justify-content: space-between; gap: 20px; font-size: 14.5px; color: var(--ink-2) }
.plan__addon span:last-child { color: var(--ink); font-weight: 500; white-space: nowrap }

.plan .rich { justify-self: start; margin-top: 4px }

/* ── tiers ────────────────────────────────────────────────── */

.tiers { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: clip; background: var(--paper) }
.tier { padding: clamp(20px,2.2vw,34px); display: grid; gap: 16px; align-content: start; border-left: 1px solid var(--hair) }
.tier:first-child { border-left: 0 }
.tier h3 { font-size: clamp(20px,1.9vw,27px); font-weight: 500; letter-spacing: -.032em }
.tier p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2) }
.tier__days { margin-top: auto; font-size: 15px; font-weight: 500; letter-spacing: -.01em }
.tier--pick .tier__days { background: var(--lime); padding: 5px 11px; border-radius: 5px; justify-self: start }

/* ── faq ──────────────────────────────────────────────────── */

.faq__list { border-top: 1px solid var(--hair) }
.faq__item { border-bottom: 1px solid var(--hair) }
.faq__item summary {
  display: flex; align-items: center; gap: clamp(14px,2.2vw,36px);
  padding-block: clamp(18px,2.1vw,27px); cursor: pointer; list-style: none;
  font-size: clamp(16px,1.5vw,21px); font-weight: 500; letter-spacing: -.026em;
  transition: color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none }
.faq__item summary:hover { color: var(--coral) }
.faq__n { flex: none; width: 58px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3) }
.faq__pm { margin-left: auto; flex: none; position: relative; width: 13px; height: 13px }
.faq__pm::before, .faq__pm::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; transition: rotate .35s var(--ease), opacity .3s var(--ease) }
.faq__pm::after { rotate: 90deg }
.faq__item[open] .faq__pm::after { rotate: 0deg; opacity: 0 }
.faq__a { overflow: hidden }
.faq__a > div { padding: 0 0 clamp(20px,2.2vw,30px) calc(58px + clamp(14px,2.2vw,36px)) }
.faq__a p { max-width: 66ch; font-size: 15.5px; line-height: 1.68; color: var(--ink-2) }
.faq__a p + p { margin-top: 12px }

/* ── the trail CTA ────────────────────────────────────────── */

.trailcta {
  position: relative; overflow: clip;
  min-height: clamp(560px, 84vh, 860px);
  display: grid; place-items: center; text-align: center;
  background: var(--pitch); color: var(--on-night);
  cursor: none;
}
/* the fluid field sits under everything and only paints once it is live */
.trailcta .fluid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1s var(--ease);
  pointer-events: none;
}
.trailcta.is-fluid .fluid { opacity: 1 }
.trailcta__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 40% at 50% 46%, rgba(5,6,9,.62) 0%, rgba(5,6,9,.26) 56%, rgba(5,6,9,0) 88%);
}
.trailcta__stage { position: absolute; inset: 0; pointer-events: none; z-index: 1 }
.trailcta__stage img {
  position: absolute; width: clamp(140px, 13.5vw, 210px);
  border-radius: var(--r-sm);
  opacity: 0; will-change: transform, opacity;
  translate: -50% -50%;
}
.trailcta__inner { position: relative; z-index: 2; display: grid; gap: clamp(18px,2.4vw,32px); justify-items: center; padding: var(--edge); pointer-events: auto }
.trailcta .d2 { color: #fff; max-width: 17ch }
.trailcta .say { text-shadow: 0 2px 30px rgba(5,6,9,.85), 0 0 70px rgba(5,6,9,.6) }
.trailcta__inner p { text-shadow: 0 1px 18px rgba(5,6,9,.9) }
.trailcta p { max-width: 44ch; color: var(--on-night-2) }
.trailcta__cursor {
  position: absolute; z-index: 3; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: 50%; background: var(--lime);
  pointer-events: none; translate: -50% -50%;
  transition: scale .3s var(--ease);
}
.trailcta:not(:hover) .trailcta__cursor { scale: 0 }
@media (hover: none) { .trailcta { cursor: auto } .trailcta__cursor { display: none } }

/* ── kit / notes rows ─────────────────────────────────────── */

.rows { border-top: 1px solid var(--hair) }
.row {
  display: grid; grid-template-columns: 108px 1fr auto; gap: clamp(14px,2.4vw,40px);
  align-items: center; padding-block: clamp(18px,2.2vw,30px);
  border-bottom: 1px solid var(--hair);
  transition: padding-inline .45s var(--ease-out);
}
a.row:hover { padding-left: 14px }
.row__t { font-size: clamp(16px,1.5vw,21px); font-weight: 500; letter-spacing: -.026em }
.row__m { margin-top: 6px; font-size: 14px; color: var(--ink-2); max-width: 64ch }

/* ── page head ────────────────────────────────────────────── */

.phead { padding: clamp(130px,16vh,200px) 0 clamp(34px,4vw,66px) }
.phead .d2 { max-width: 17ch }
.phead .lede { max-width: 56ch; margin-top: 20px }

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 1080px) {
  .svc { grid-template-columns: 1fr 1fr }
  .svc--two { grid-template-columns: 1fr 1fr }
  .tiers { grid-template-columns: 1fr 1fr }
  .tier:nth-child(3) { border-left: 0 }
  .tier:nth-child(n+3) { border-top: 1px solid var(--hair) }
  .cadence { grid-template-columns: 1fr 1fr; gap: 34px 24px }
}
@media (max-width: 860px) {
  .thesis__grid { grid-template-columns: 1fr }
  .trio { grid-template-columns: 1fr }
  .trio > div { padding: 24px 0; border-left: 0; border-top: 1px solid var(--hair) }
  .trio > div:first-child { padding-top: 0; border-top: 0 }
  .dark .trio > div { border-top-color: var(--hair-night) }
  .plans { grid-template-columns: 1fr }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--hair) }
  .phase { grid-template-columns: 1fr; gap: 30px }
  .phase__arrow { display: none }
  .launch { grid-template-columns: 1fr auto; gap: 6px 16px }
  .launch__yr { grid-column: 1 / -1 }
  .row { grid-template-columns: 1fr auto }
  .row__yr { grid-column: 1 / -1 }
}
@media (max-width: 620px) {
  .svc, .svc--two, .tiers { grid-template-columns: 1fr }
  .tier { border-left: 0; border-top: 1px solid var(--hair) }
  .tier:first-child { border-top: 0 }
  .cadence { grid-template-columns: 1fr }
}

/* ── the manifesto's ground ────────────────────────────────
   Three layers under the type: a slow fluid the pointer stirs,
   a fan of god rays leaning down the middle, and a bloom that
   follows the pointer across the growth band.                  */

.story__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip }
.story__bg .fluid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s var(--ease);
  mix-blend-mode: screen;
}
.story.is-fluid .story__bg .fluid { opacity: .7 }
.story__bg .rays {
  /* the shafts run well past the frame, which is what makes them read as
     shafts rather than as a fan */
  position: absolute; inset: -18% 0 -8%; width: 100%; height: 126%;
  opacity: .62;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, transparent 88%);
}
.story .shell, .story .band { position: relative; z-index: 3 }

/* the bloom the pointer carries over the footage */
.band { --bx: 50%; --by: 50%; --bo: 0 }