.fow-intro {
  position: relative;
  min-height: calc(var(--phone-vh,1vh) * 100);
  background: var(--th-bg, #ffffff);
  color: var(--th-fg, #0a0a0a);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(80px, 10.5vh, 118px) clamp(24px, 4.5vw, 64px) clamp(16px, 2.8vh, 32px);
  font-family: 'StatementInter', 'InterVariable', 'Inter', system-ui, sans-serif;
}
@media (max-width: 767px) {
  .fow-intro { min-height: calc(var(--phone-vh,1svh) * 100); }
  .fow-root { height: calc(var(--phone-vh,1svh) * 660); }
  .fow-sticky { height: calc(var(--phone-vh,1svh) * 100); }
}
.fow-ghost {
  position: absolute;
  right: clamp(-30px, -1.5vw, -10px);
  top: 50%;
  transform: translateY(-52%);
  font-family: 'StatementClash', 'StatementInter', system-ui, sans-serif;
  font-weight: 600;
  font-size: min(25vw, 400px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--th-ghost-stroke, #ebebe8);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 1.6s ease 0.25s;
}
.fow-in .fow-ghost { opacity: 0.55; }
.fow-intro > *:not(.fow-ghost),
.fow-intro-bottom > * {
  position: relative;
  z-index: 1;
}
.fow-intro-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.fow-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--th-eyebrow, #4a4a4d);
}
.fow-intro-mid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: clamp(20px, 4vh, 48px);
}
.fow-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fow-intro-bottom {
  position: relative;
}
.fow-mask {
  overflow: hidden;
}
.fow-title {
  margin: 0 0 clamp(20px, 3.4vh, 36px);
  user-select: none;
}
.fow-tl {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
  line-height: 0.9;
}
.fow-tl-in {
  display: inline-block;
  transform: translateY(115%) rotate(2.4deg);
  transform-origin: left top;
  transition: transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fow-tl:nth-child(2) .fow-tl-in { transition-delay: 0.16s; }
.fow-in .fow-tl-in { transform: translateY(0) rotate(0deg); }
.fow-tl-tight {
  font-family: 'StatementClash', 'StatementInter', system-ui, sans-serif;
  font-weight: 600;
  font-size: min(10vw, 176px);
  letter-spacing: 0.02em;
  color: var(--th-title, #0c0c0a);
  text-transform: uppercase;
}
.fow-tl-italic {
  font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: min(14vw, 246px);
  letter-spacing: -0.03em;
  color: var(--th-title, #0c0c0a);
  padding-left: 0.04em;
}
.fow-rule {
  position: relative;
  height: 1px;
  background: var(--th-rule, #e6e6e3);
  margin: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}
.fow-in .fow-rule { transform: scaleX(1); }
.fow-rule-tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  background: var(--th-bg, #ffffff);
  padding: 0 12px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--th-eyebrow, #4a4a4d);
  white-space: nowrap;
}
.fow-intro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  opacity: 0;
  transition: opacity 0.9s ease 0.85s;
}
.fow-in .fow-intro-meta { opacity: 1; }
.fow-credit {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--th-ink-2, #1f1f22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: center;
  flex: 1 1 auto;
}
.fow-count-inline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--th-fg, #0a0a0a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fow-root {
  position: relative;
  isolation: isolate;
  height: calc(var(--phone-vh,1vh) * 660);
  background: var(--th-bg, #ffffff);
  color: var(--th-fg, #0a0a0a);
}
.fow-sticky {
  position: sticky;
  top: 0;
  height: calc(var(--phone-vh,1vh) * 100);
  overflow: hidden;
}
.fow-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 70% at 50% 52%, var(--th-vignette, #f5f5f4) 0%, rgba(255, 255, 255, 0) 58%);
  z-index: 1;
}
.fow-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--th-ink-2, #1f1f22);
}
.fow-intro .fow-eyebrow {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.fow-in .fow-eyebrow { opacity: 1; transform: translateY(0); }
.fow-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.fow-card {
  position: absolute;
  left: 50%;
  top: 56%;
  width: clamp(300px, 33vw, 600px);
  aspect-ratio: 16 / 10;
  will-change: transform, opacity;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 767px) {
  .fow-card { width: clamp(240px, 72vw, 420px); }
}
.fow-card-in {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--th-well, #f2f2f0);
  opacity: 0;
  transform: translateY(70px) scale(0.92);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.fow-entered .fow-card-in { opacity: 1; transform: translateY(0) scale(1); }
.fow-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fow-card-in video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.fow-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(24px, 4.5vw, 64px) clamp(22px, 4vh, 42px);
  pointer-events: none;
}
.fow-hud-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 220px;
  animation: fow-swap 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fow-swap {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fow-hud-project {
  font-family: 'StatementClash', 'StatementInter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--th-ink, #101010);
}
.fow-hud-tag {
  font-size: 11px;
  color: var(--th-muted-2, #9a9a96);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fow-hud-progress {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 220px;
}
.fow-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.fow-big-num {
  font-family: 'StatementClash', 'StatementInter', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--th-fg, #0a0a0a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fow-bar-track {
  width: 120px;
  height: 1px;
  background: var(--th-track, #e0e0e0);
  overflow: hidden;
}
.fow-bar {
  height: 100%;
  width: 0%;
  background: var(--th-fg, #0a0a0a);
}
.fow-total {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--th-faint-strong, rgba(0, 0, 0, 0.35));
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .fow-card { width: clamp(240px, 72vw, 420px); }

  /* ------------------------------------------------------------------
     INTRO (phone): the desktop layout relies on an empty flex spacer
     (.fow-intro-mid) to shove the title to the bottom of a 100vh screen.
     On a phone that reads as a ~450px dead zone, so we drop the spacer and
     pull the four text blocks into one tight, centred cluster instead.
     ------------------------------------------------------------------ */
  .fow-intro {
    min-height: auto;
    padding: 72px 20px 44px;
    justify-content: flex-start;
  }
  .fow-intro-top {
    gap: 10px;
  }
  .fow-intro-mid {
    display: none;
  }
  .fow-intro-bottom {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
  }
  .fow-title {
    margin: 0 0 12px;
  }
  .fow-tl {
    line-height: 0.94;
  }
  .fow-rule {
    margin: 0 0 10px;
  }
  .fow-rule-tag {
    font-size: 10px;
    padding-right: 8px;
  }
  .fow-intro-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 0;
  }
  .fow-eyebrow {
    font-size: 10px;
  }
  .fow-count-inline {
    font-size: 11px;
  }

  /* HUD strip under the carousel — tighten the desktop 24px/64px rhythm */
  .fow-hud {
    padding: 0 clamp(16px, 4vw, 40px) clamp(14px, 3.4vh, 26px);
    gap: 12px;
  }
  .fow-hud-name {
    gap: 8px;
  }
  .fow-hud-project {
    font-size: 15px;
  }
  .fow-hud-tag {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .fow-big-num {
    font-size: 36px;
  }
  .fow-bar-track {
    width: 72px;
  }
  .fow-counter {
    gap: 6px;
  }
  .fow-total {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .fow-intro {
    padding: 68px 18px 40px;
  }
  .fow-hud-tag {
    display: none;
  }
  .fow-tl-tight {
    font-size: 15vw;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .fow-tl-tight { font-size: 13vw; }
}
@media (max-width: 640px) {
  .fow-hud-name { min-width: 0; }
  .fow-hud-progress { min-width: 0; }
  .fow-tl-italic { font-size: 19vw; }
  .fow-tl-tight { font-size: 14vw; }
  .fow-credit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fow-card-in, .fow-eyebrow, .fow-tl-in, .fow-rule, .fow-intro-meta {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

.hc-home .hc-process,.hc-home .hc-pricing,.hc-home .hc-start{background:#fff}.hc-home .hc-plan{border:1px solid #ddd;background:#fff;color:#242424}.hc-home .hc-plan:last-child :is(p,small){color:#777}.hc-home .hc-plan:last-child ul,.hc-home .hc-plan:last-child>a{border-color:#ccc}.hc-home .hc-plan:last-child>a:hover{background:#eee}.hc-home .hc-standard,.hc-home .hc-footer{background:#181818;border-radius:0}.hc-home .hc-tone-join{height:clamp(180px,25vw,420px);width:100%;background:linear-gradient(#181818,transparent 32% 65%,#fff),radial-gradient(ellipse 88% 130% at 50% -26%,#181818 0% 37%,#484848 49%,#909090 62%,#dedede 77%,#fff 100%);margin:0;pointer-events:none}.hc-home .hc-tone-in{transform:rotate(180deg)}
.hc-home .fow-poster{filter:none}.hc-home .fow-title{font-weight:600;line-height:.9}.fow-intro,.fow-root{--th-bg:#fff}.fow-intro{box-sizing:border-box}@media(max-width:767px){.fow-root{height:calc(var(--phone-vh,1svh) * 660)}.fow-sticky{height:calc(var(--phone-vh,1svh) * 100)}}

/* Match the current homepage heading system; preserve the repository reel. */
.hc-home .fow-intro{min-height:0;display:block;font-family:StatementInter,Arial,sans-serif;overflow:visible;background:#fff;color:#242424;padding-bottom:30px}.hc-home .fow-intro .hc-heading{margin-bottom:0}.hc-home .fow-hud-project{font-family:StatementInter,Arial,sans-serif;letter-spacing:-.035em}.hc-home .fow-big-num{font-family:StatementInter,Arial,sans-serif;font-weight:500}.hc-home .fow-hud-tag,.hc-home .fow-total{font-family:StatementInter,Arial,sans-serif}