/* Fanfare — a loud, playful agency poster site.
 *
 * The contract (docs/research/templates/zeentra.md):
 *   · ONE ultra-bold boxy display face does all the shouting — always
 *     uppercase; the body grotesque stays quiet and sentence-case
 *   · full-bleed color rooms, one bold field per section, scallop seams
 *   · the confetti set rotates across stickers/blobs from a FIXED five —
 *     abundant, never random; confetti fills always carry ink text
 *   · motion is a headline feature (marquee, blur-in type, bob, spin-seal,
 *     settle-up reveals) — every loop collapses under prefers-reduced-motion
 *
 * Knob vars (with fallbacks): --smedja-radius-sm/md/lg, --smedja-confetti-1..5.
 */

:root {
  --ff-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ff-r-sm: var(--smedja-radius-sm, 12px);
  --ff-r-md: var(--smedja-radius-md, 22px);
  --ff-r-lg: var(--smedja-radius-lg, 36px);
  --ff-c1: var(--smedja-confetti-1, #ff5a3c);
  --ff-c2: var(--smedja-confetti-2, #ddf84b);
  --ff-c3: var(--smedja-confetti-3, #ffc527);
  --ff-c4: var(--smedja-confetti-4, #2fb85f);
  --ff-c5: var(--smedja-confetti-5, #ffc2e8);
  --ff-ink: var(--wp--preset--color--contrast);
  --ff-paper: var(--wp--preset--color--base);
  --ff-card: var(--wp--preset--color--surface);
  --ff-stage: var(--wp--preset--color--primary);
  --ff-stage-soft: var(--wp--preset--color--primary-soft);
  --ff-pop: var(--wp--preset--color--accent);
  --ff-mute: var(--wp--preset--color--muted);
  --ff-rule: var(--wp--preset--color--line);
  --ff-display: var(--wp--preset--font-family--display);
  --ff-body: var(--wp--preset--font-family--body);
  --ff-mono: var(--wp--preset--font-family--mono);
  --ff-section-y: clamp(4.5rem, 4vw + 2.4rem, 7.5rem);
  --ff-shadow-sticker: 0.4rem 0.4rem 0 0 var(--ff-ink);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[id] {
  scroll-margin-top: 6rem;
}
::selection {
  background: color-mix(in srgb, var(--ff-pop) 35%, var(--ff-paper));
}

a:not(.wp-element-button) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ff-pop);
  outline-offset: 2px;
  border-radius: 3px;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
.ff-hero__lede,
.ff-slam__lede,
.ff-section-lede,
.ff-service__body,
.ff-step__body,
.ff-quote__line,
.ff-faq__a p {
  text-wrap: pretty;
}

/* == Small machinery ================================================== */
.ff-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-ink);
  background: var(--ff-c3);
  border-radius: 999px;
  padding: 0.3em 0.85em;
  white-space: nowrap;
}
.ff-tag a {
  color: inherit;
  text-decoration: none;
}

.ff-arrow {
  display: inline-block;
}
a:hover > .ff-arrow,
button:hover > .ff-arrow {
  transform: translateX(0.28em);
}

/* Pill buttons — the tactile machinery. */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 0.85em 1.6em;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 200ms var(--ff-ease);
}
.ff-btn--pop {
  color: var(--ff-ink);
  background: var(--ff-pop);
}
.ff-btn--pop:hover {
  color: var(--ff-ink);
  background: var(--ff-pop);
  transform: translate(-2px, -2px);
  box-shadow: var(--ff-shadow-sticker);
}
.ff-btn--ghost {
  color: var(--ff-ink);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ff-ink);
}
.ff-btn--ghost:hover {
  color: var(--ff-paper);
  background: var(--ff-ink);
}
.ff-btn--ghost-light {
  color: var(--ff-card);
  background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ff-card) 65%, transparent);
}
.ff-btn--ghost-light:hover {
  color: var(--ff-stage);
  background: var(--ff-card);
  box-shadow: inset 0 0 0 2px var(--ff-card);
}
.ff-btn:active {
  transform: scale(0.96);
  box-shadow: none;
}

/* Cloud-blob badges — the confetti eyebrows. */
.ff-blob {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-display);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ff-ink);
  background: var(--ff-c1);
  border-radius: 58% 42% 55% 45% / 52% 48% 60% 40%;
  padding: 0.72em 1.5em;
  white-space: nowrap;
}
.ff-section-head .ff-blob {
  transform: rotate(-2deg);
  justify-self: start;
}

/* Framed imagery — bold poster frame. */
.ff-framed {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ff-r-md);
  border: 2px solid var(--ff-ink);
  background: var(--ff-card);
}
.ff-framed img {
  display: block;
  width: 100%;
  height: auto;
}

/* == Bands & rooms ==================================================== */
.ff-band {
  padding-top: calc(var(--ff-section-y) * 0.55);
  padding-bottom: calc(var(--ff-section-y) * 0.55);
}

/* A "room": a full-bleed stage-colored block with a scalloped paper seam. */
.ff-band--room {
  position: relative;
  background: var(--ff-stage);
  color: var(--ff-card);
  overflow: hidden;
}
.ff-band--room::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.15rem;
  background-image: radial-gradient(circle at 50% 100%, var(--ff-paper) 0.58rem, transparent 0.64rem);
  background-size: 1.15rem 1.15rem;
  background-position: 50% 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}

.ff-section-head {
  display: grid;
  gap: 1.1rem;
  max-width: 56rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.ff-section-title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-section-title .ff-line,
.ff-statement__text .ff-line,
.ff-hero__title .ff-line,
.ff-slam__title .ff-line {
  display: block;
}
.ff-section-lede {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ff-ink) 72%, var(--ff-mute));
  max-width: 38rem;
  margin: 0;
}
.ff-more-row {
  margin-top: 2.2rem;
}

/* == Topbar — the floating nav pill =================================== */
/* WP wraps template parts in .wp-block-template-part — sticky must live on
   the wrapper, or the header only sticks within its own height. height:0 so
   the pill FLOATS: color rooms start at the very top of the page behind it
   (no negative-margin fight with WP's layout-gap rules). */
.wp-block-template-part:has(> .ff-topbar) {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 0;
}
/* Kill the root block gap above main — rooms must touch the top edge. */
main.ff-main,
main.ff-main--wide {
  margin-block-start: 0;
}
.ff-topbar {
  padding-top: 0.9rem;
  pointer-events: none;
}
.ff-pill {
  pointer-events: auto;
  background: color-mix(in srgb, var(--ff-paper) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border: 2px solid var(--ff-ink);
  border-radius: 999px;
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--ff-ink) 45%, transparent);
  transition: padding 220ms var(--ff-ease);
}
.ff-pill.is-condensed {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.ff-wordmark {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.ff-wordmark a {
  text-decoration: none;
  color: var(--ff-stage);
  transition: color 150ms ease;
}
.ff-wordmark a:hover {
  color: var(--ff-pop);
}
.ff-topbar__nav {
  gap: 1.4rem;
}
.ff-nav a {
  font-weight: 600;
  text-decoration: none;
  color: var(--ff-ink);
}
.ff-nav a:hover {
  color: var(--ff-stage);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}
.ff-nav .wp-block-navigation__container {
  gap: 1.3rem;
}
.ff-topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--ff-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ff-ink);
  background: var(--ff-pop);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.55em 1.2em;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.ff-topbar__cta:hover {
  background: var(--ff-ink);
  color: var(--ff-paper);
  transform: rotate(-2deg);
}

/* == Poster hero ====================================================== */
.ff-band--hero {
  /* 5rem clears the floating pill; the rest is stage air. */
  padding-top: calc(5rem + var(--ff-section-y) * 0.55);
  padding-bottom: calc(var(--ff-section-y) * 0.85);
}
/* Halftone dot field — texture, radiating from the upper right. */
.ff-band--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--ff-stage-soft) 55%, transparent) 2.4px,
    transparent 2.7px
  );
  background-size: 1.7rem 1.7rem;
  -webkit-mask-image: radial-gradient(58% 66% at 74% 28%, black, transparent 72%);
  mask-image: radial-gradient(58% 66% at 74% 28%, black, transparent 72%);
  pointer-events: none;
}
.ff-hero {
  position: relative;
  display: grid;
  gap: 1.6rem;
}
.ff-hero__eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ff-card) 92%, transparent);
  margin: 0;
}
.ff-hero__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ff-card);
  margin: 0;
  max-width: 72rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-hero__badges {
  /* Stickers drift onto the wall of type — offset right, slight overlap. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.9rem;
  margin-top: -1.1rem;
  margin-left: clamp(0rem, 16vw, 16rem);
}
.ff-blob--float:nth-child(3n + 1) {
  background: var(--ff-c2);
  transform: rotate(-4deg);
}
.ff-blob--float:nth-child(3n + 2) {
  background: var(--ff-c3);
  transform: rotate(2.5deg);
}
.ff-blob--float:nth-child(3n + 3) {
  background: var(--ff-c5);
  transform: rotate(-1.5deg);
}
.ff-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 0.8rem;
}
.ff-hero__pitch {
  display: grid;
  gap: 1.4rem;
  max-width: 36rem;
  min-width: 0;
}
.ff-hero__lede {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ff-card) 92%, transparent);
  margin: 0;
}
.ff-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Page hero — the shorter shout. */
.ff-band--page-hero {
  padding-top: calc(5rem + var(--ff-section-y) * 0.3);
  padding-bottom: calc(var(--ff-section-y) * 0.6);
}
.ff-hero--page .ff-hero__title {
  font-size: var(--wp--preset--font-size--3-xl);
}
.ff-hero--page .ff-hero__lede {
  max-width: 40rem;
}

/* Spinning award seal — SVG ring text; the star stays put. */
.ff-seal {
  flex: 0 0 auto;
  width: clamp(6.4rem, 9vw, 8.5rem);
  aspect-ratio: 1;
}
.ff-seal__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ff-seal__disc {
  fill: var(--ff-c5);
  stroke: var(--ff-ink);
}
.ff-seal__text {
  /* ~33 chars/run × 7.5px ≈ 248px on a 258px ring — the doubled run fills
     the seam; excess clips off the path end. */
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  fill: var(--ff-ink);
}
.ff-seal__star {
  fill: var(--ff-pop);
  stroke: var(--ff-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.ff-seal__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Sparkle cut-outs. */
.ff-sparkle {
  position: absolute;
  width: 1.6rem;
  aspect-ratio: 1;
  pointer-events: none;
}
.ff-sparkle svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ff-sparkle--1 {
  top: 12%;
  right: 6%;
  width: 2.1rem;
}
.ff-sparkle--1 svg {
  fill: var(--ff-c3);
}
.ff-sparkle--2 {
  top: 42%;
  left: 2.5%;
}
.ff-sparkle--2 svg {
  fill: var(--ff-c2);
}
.ff-sparkle--3 {
  bottom: 16%;
  right: 12%;
  width: 1.2rem;
}
.ff-sparkle--3 svg {
  fill: var(--ff-c5);
}

/* == Marquee ========================================================== */
.ff-band--marquee {
  padding: 0;
}
.ff-marquee {
  display: flex;
  overflow: hidden;
  background: var(--ff-ink);
  color: var(--ff-paper);
  border-block: 2px solid var(--ff-ink);
}
.ff-marquee--pop {
  background: var(--ff-pop);
  color: var(--ff-ink);
}
.ff-marquee--paper {
  background: var(--ff-paper);
  color: var(--ff-ink);
}
.ff-marquee__track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-width: 100%;
  padding: 0.95rem 0.7rem;
}
.ff-marquee__item {
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ff-marquee__star {
  color: var(--ff-pop);
  font-size: 1.1em;
  line-height: 1;
}
.ff-marquee--pop .ff-marquee__star {
  color: var(--ff-ink);
}

/* == Work sticker grid ================================================ */
.ff-work {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
}
.ff-work__card {
  display: block;
  min-width: 0;
  color: var(--ff-ink);
  background: var(--ff-fill, var(--ff-c1));
  border-radius: var(--ff-r-lg);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  text-decoration: none;
  transition: box-shadow 260ms var(--ff-ease);
}
.ff-work__card:nth-child(5n + 1) {
  --ff-fill: var(--ff-c1);
}
.ff-work__card:nth-child(5n + 2) {
  --ff-fill: var(--ff-c2);
}
.ff-work__card:nth-child(5n + 3) {
  --ff-fill: var(--ff-c5);
}
.ff-work__card:nth-child(5n + 4) {
  --ff-fill: var(--ff-c3);
}
.ff-work__card:nth-child(5n + 5) {
  --ff-fill: var(--ff-c4);
}
.ff-work__img {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ff-r-sm);
  border: 2px solid var(--ff-ink);
}
.ff-work__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ff-work__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 1rem 0 0.8rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-work__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 2px solid color-mix(in srgb, var(--ff-ink) 25%, transparent);
  padding-top: 0.7rem;
  margin: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.ff-work__card:hover {
    transform: rotate(-1.2deg) translateY(-4px);
    box-shadow: var(--ff-shadow-sticker);
  }
  a.ff-work__card:nth-child(even):hover {
    transform: rotate(1.2deg) translateY(-4px);
  }
  a.ff-work__card:hover .ff-work__img img {
    transform: scale(1.045);
  }
}

/* == Services rows ==================================================== */
.ff-services {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--ff-ink);
}
.ff-service {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.2rem 1.6rem;
  padding: 1.7rem 0;
  border-bottom: 3px solid var(--ff-ink);
}
.ff-service__n {
  display: inline-flex;
  justify-self: start;
  font-family: var(--ff-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ff-ink);
  background: var(--ff-fill, var(--ff-c3));
  border-radius: var(--ff-r-sm);
  padding: 0.25em 0.6em;
  transform: rotate(-3deg);
}
.ff-service:nth-child(5n + 1) {
  --ff-fill: var(--ff-c3);
}
.ff-service:nth-child(5n + 2) {
  --ff-fill: var(--ff-c5);
}
.ff-service:nth-child(5n + 3) {
  --ff-fill: var(--ff-c2);
}
.ff-service:nth-child(5n + 4) {
  --ff-fill: var(--ff-c1);
}
.ff-service:nth-child(5n + 5) {
  --ff-fill: var(--ff-c4);
}
.ff-service__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
  transform-origin: left center;
  transition: color 180ms ease;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-service__body {
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ff-ink) 78%, var(--ff-mute));
  max-width: 40rem;
  margin: 0;
}
.ff-service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
}
.ff-service__tags .ff-tag {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ff-ink) 40%, transparent);
}
.ff-service__arrow {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1;
  color: var(--ff-ink);
  transition: color 180ms ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ff-service:hover .ff-service__title {
    transform: skewX(-6deg) translateX(0.35rem);
    color: var(--ff-stage);
  }
  .ff-service:hover .ff-service__arrow {
    transform: translateX(0.6rem);
    color: var(--ff-pop);
  }
}

/* == Process (sprint timeline) ======================================== */
.ff-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.5rem;
}
.ff-step {
  background: var(--ff-card);
  border: 2px solid var(--ff-ink);
  border-radius: var(--ff-r-md);
  padding: 1.5rem 1.4rem;
  transition: box-shadow 240ms var(--ff-ease);
}
.ff-step__label {
  display: inline-flex;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ff-paper);
  background: var(--ff-ink);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  margin-bottom: 0.9rem;
}
.ff-step__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.ff-step__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ff-ink) 75%, var(--ff-mute));
  margin: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ff-step:hover {
    transform: translateY(-4px) rotate(-0.6deg);
    box-shadow: var(--ff-shadow-sticker);
  }
}

/* == Stats brag row =================================================== */
.ff-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ff-stat {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.ff-stat__value {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  justify-self: start;
  background: linear-gradient(transparent 58%, var(--ff-fill, var(--ff-c2)) 58%, var(--ff-fill, var(--ff-c2)) 94%, transparent 94%);
  padding: 0 0.08em;
}
.ff-stat:nth-child(4n + 1) {
  --ff-fill: var(--ff-c2);
}
.ff-stat:nth-child(4n + 2) {
  --ff-fill: var(--ff-c5);
}
.ff-stat:nth-child(4n + 3) {
  --ff-fill: var(--ff-c3);
}
.ff-stat:nth-child(4n + 4) {
  --ff-fill: var(--ff-c1);
}
.ff-stat__label {
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ff-mute);
  max-width: 16rem;
}

/* == Statement (manifesto) ============================================ */
.ff-band--statement {
  padding-top: calc(var(--ff-section-y) * 0.85);
  padding-bottom: calc(var(--ff-section-y) * 0.85);
}
.ff-statement {
  position: relative;
  text-align: center;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
}
.ff-statement__text {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: 1.03;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ff-ink);
  max-width: 62rem;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-statement__petal {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -78% -55%;
  width: clamp(11rem, 24vw, 19rem);
  aspect-ratio: 1;
  background: var(--ff-c5);
  border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
  z-index: 0;
}
.ff-statement__note {
  position: relative;
  z-index: 1;
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-mute);
  margin: 0;
}
.ff-statement .ff-sparkle--2 {
  top: 8%;
  left: 12%;
}

/* == Team grid ======================================================== */
.ff-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
  gap: clamp(1.4rem, 2.4vw, 2rem);
}
.ff-person {
  min-width: 0;
}
.ff-person__img {
  margin: 0 0 0.9rem;
  overflow: hidden;
  border-radius: var(--ff-r-md);
  border: 2px solid var(--ff-ink);
  background: var(--ff-card);
  transition: box-shadow 240ms var(--ff-ease);
}
.ff-person__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ff-person__name {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}
.ff-person__role {
  font-size: 0.9rem;
  color: var(--ff-mute);
  margin: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ff-person:hover .ff-person__img {
    transform: rotate(-2.5deg) translateY(-4px);
    box-shadow: var(--ff-shadow-sticker);
  }
  .ff-person:nth-child(even):hover .ff-person__img {
    transform: rotate(2.5deg) translateY(-4px);
  }
}

/* == Testimonials — staggered confetti quote cards ==================== */
.ff-quotes {
  columns: 21rem;
  column-gap: 1.6rem;
}
.ff-quote {
  break-inside: avoid;
  margin: 0 0 1.6rem;
  background: var(--ff-fill, var(--ff-c2));
  color: var(--ff-ink);
  border-radius: var(--ff-r-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.ff-quote:nth-child(5n + 1) {
  --ff-fill: var(--ff-c2);
  transform: rotate(-0.8deg);
}
.ff-quote:nth-child(5n + 2) {
  --ff-fill: var(--ff-c5);
  transform: rotate(0.8deg);
}
.ff-quote:nth-child(5n + 3) {
  --ff-fill: var(--ff-c3);
  transform: rotate(-0.5deg);
}
.ff-quote:nth-child(5n + 4) {
  --ff-fill: var(--ff-c1);
  transform: rotate(0.6deg);
}
.ff-quote:nth-child(5n + 5) {
  --ff-fill: var(--ff-c4);
}
.ff-quote__shout {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-quote__line {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}
.ff-quote__who {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-top: 2px solid color-mix(in srgb, var(--ff-ink) 25%, transparent);
  padding-top: 0.7rem;
}
.ff-quote__org {
  font-weight: 400;
}
.ff-quote__org::before {
  content: " · ";
}

/* == Journal cards (post-grid + archive) ============================== */
.ff-journal-grid {
  gap: clamp(1.4rem, 2.4vw, 2rem);
}
.ff-journal-card {
  background: var(--ff-card);
  border: 2px solid var(--ff-ink);
  border-radius: var(--ff-r-md);
  padding: 1rem 1rem 1.2rem;
  transition: box-shadow 240ms var(--ff-ease);
}
.ff-journal-card__img {
  border-radius: var(--ff-r-sm);
  margin-bottom: 1rem;
}
.ff-journal-card__img img {
}
.ff-journal-card__cat {
  margin-bottom: 0.6rem;
}
/* Category chips rotate through the confetti too. */
.ff-journal-grid > :nth-child(3n + 2) .ff-tag {
  background: var(--ff-c5);
}
.ff-journal-grid > :nth-child(3n + 3) .ff-tag {
  background: var(--ff-c2);
}
.ff-journal-card__title {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-journal-card__title a {
  text-decoration: none;
  color: inherit;
}
.ff-journal-card__dek {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ff-ink) 72%, var(--ff-mute));
  margin: 0 0 0.6rem;
}
.ff-journal-card__date {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ff-mute);
  margin: 0;
}
.ff-journal-card:hover .ff-journal-card__title,
.ff-journal-card .ff-journal-card__title a:hover {
  color: var(--ff-stage);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ff-journal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ff-shadow-sticker);
  }
  .ff-journal-card:hover .ff-journal-card__img img {
    transform: scale(1.04);
  }
}

/* == FAQ ============================================================== */
.ff-faq {
  border-top: 3px solid var(--ff-ink);
}
.ff-faq__item {
  border-bottom: 3px solid var(--ff-ink);
}
.ff-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 0;
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  transition: color 150ms ease;
}
.ff-faq__item summary::-webkit-details-marker {
  display: none;
}
.ff-faq__mark {
  font-family: var(--ff-display);
  font-size: 1.3em;
  line-height: 0.8;
  color: var(--ff-pop);
  flex: 0 0 auto;
}
.ff-faq__item[open] .ff-faq__mark {
  transform: rotate(45deg);
}
.ff-faq__item summary:hover {
  color: var(--ff-stage);
}
.ff-faq__a {
  padding: 0 3rem 1.4rem 0;
}
.ff-faq__a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--ff-ink) 82%, var(--ff-mute));
  max-width: 44rem;
}

/* == CTA slam ========================================================= */
.ff-band--slam {
  padding-top: calc(var(--ff-section-y) * 0.85);
  padding-bottom: calc(var(--ff-section-y) * 0.9);
}
.ff-slam {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.4rem;
}
.ff-slam__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}
.ff-slam__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: 1;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ff-card);
  max-width: 60rem;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-slam__lede {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ff-card) 92%, transparent);
  max-width: 36rem;
  margin: 0;
}
.ff-slam__cta {
  margin-top: 0.4rem;
}
.ff-slam__note {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ff-card) 88%, transparent);
  margin: 0;
}
.ff-slam .ff-sparkle--1 {
  top: 6%;
  right: 10%;
}
.ff-slam .ff-sparkle--2 {
  top: 30%;
  left: 6%;
}

/* == Lead form — the sticker form ===================================== */
.ff-lead {
  position: relative;
  background: var(--ff-card);
  border: 3px solid var(--ff-ink);
  border-radius: var(--ff-r-lg);
  box-shadow: 0.55rem 0.55rem 0 0 var(--ff-c3);
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  display: grid;
  gap: 1.25rem;
}
.ff-lead__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.25rem;
}
.ff-lead__field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.ff-lead__label {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ff-ink);
}
.ff-lead input[type="text"],
.ff-lead input[type="email"],
.ff-lead textarea {
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--ff-ink);
  background: var(--ff-paper);
  border: 2px solid var(--ff-ink);
  border-radius: var(--ff-r-sm);
  padding: 0.75em 0.95em;
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ff-lead input::placeholder,
.ff-lead textarea::placeholder {
  color: color-mix(in srgb, var(--ff-ink) 55%, var(--ff-mute));
}
.ff-lead input:focus,
.ff-lead textarea:focus {
  outline: none;
  border-color: var(--ff-stage);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-stage) 25%, transparent);
}
.ff-lead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ff-lead__status {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ff-stage);
}
.ff-lead__note {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ff-mute);
  margin: 0;
}

/* == Article (single post) =========================================== */
.ff-main {
  /* 5rem clears the floating pill on paper pages (posts, archives). */
  padding-top: calc(5rem + var(--ff-section-y) * 0.25);
  padding-bottom: var(--ff-section-y);
}
.ff-main--wide {
  padding-top: 0;
  padding-bottom: 0;
}
.ff-page-head {
  margin-bottom: 2.2rem;
}
.ff-article__meta {
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.ff-article__date {
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ff-mute);
}
.ff-article__title {
  margin-bottom: 1rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ff-article__dek p {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ff-ink) 72%, var(--ff-mute));
  margin: 0 0 1.2rem;
}
.ff-article__byline {
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ff-mute);
  border-bottom: 3px solid var(--ff-ink);
  padding-bottom: 1.1rem;
  margin-bottom: 2rem;
}
.ff-article__author {
  font-weight: 700;
  color: var(--ff-ink);
}
.ff-article__hero {
  margin-bottom: 2.2rem;
}
.ff-article__body > * {
  margin-block-start: 1.25em;
}
.ff-article__body h2 {
  margin-block-start: 1.8em;
}
.ff-article__body a {
  color: var(--ff-stage);
}
.ff-article__footer {
  border-top: 3px solid var(--ff-ink);
  margin-top: 3rem;
  padding-top: 1.4rem;
}
.ff-article__nav a {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.ff-article__nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* Hub head (archives) */
.ff-hub-head {
  margin-bottom: 2.4rem;
}
.ff-hub-head__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--2-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}
.ff-pagination {
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3rem;
  border-top: 3px solid var(--ff-ink);
  padding-top: 1.2rem;
}

/* == Footer — the ink room ============================================ */
.ff-footer {
  background: var(--ff-ink);
  color: var(--ff-paper);
  margin-top: calc(var(--ff-section-y) * 0.4);
  padding-top: calc(var(--ff-section-y) * 0.7);
  padding-bottom: 2rem;
}
.ff-footer__slam {
  margin-bottom: 3rem;
}
.ff-footer__wordmark {
  font-size: clamp(3rem, 1.6rem + 7vw, 7.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ff-paper);
  overflow-wrap: break-word;
}
.ff-footer__tagline {
  color: color-mix(in srgb, var(--ff-paper) 72%, transparent);
  margin-top: 0.8rem;
  max-width: 30rem;
}
.ff-footer__note {
  color: color-mix(in srgb, var(--ff-paper) 72%, transparent);
  line-height: 1.6;
  max-width: 24rem;
}
.ff-footer__contact {
  margin-top: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ff-paper) 72%, transparent);
}
.ff-footer__contact a {
  color: var(--ff-paper);
  text-decoration-color: var(--ff-pop);
}
.ff-footer__contact a:hover {
  color: var(--ff-pop);
}
.ff-footer__head {
  font-family: var(--ff-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ff-paper) 55%, transparent);
  margin: 0 0 0.8rem;
}
.ff-footer__links {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}
.ff-footer__links a {
  color: var(--ff-paper);
  text-decoration: none;
  font-weight: 500;
}
.ff-footer__links a:hover {
  color: var(--ff-pop);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.ff-footer__base {
  border-top: 1px solid color-mix(in srgb, var(--ff-paper) 25%, transparent);
  margin-top: 2.8rem;
  padding-top: 1.2rem;
}
.ff-footer__copy {
  font-family: var(--ff-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ff-paper) 55%, transparent);
  margin: 0;
}

/* == MOTION =========================================================== */
/* All loops live inside motion-safe guards. The blur-in additionally
   requires html.ff-motion (set by app.js) so content is never hidden when
   JS/animation is unavailable. */

@keyframes ff-blur-in {
  from {
    opacity: 0;
    transform: translateX(-0.25em);
    filter: blur(16px);
  }
}
@keyframes ff-bob {
  from {
    translate: 0 -5px;
  }
  to {
    translate: 0 5px;
  }
}
@keyframes ff-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes ff-twinkle {
  from {
    transform: scale(0.8) rotate(-8deg);
    opacity: 0.75;
  }
  to {
    transform: scale(1.15) rotate(8deg);
    opacity: 1;
  }
}
@keyframes ff-marquee-run {
  to {
    transform: translateX(-100%);
  }
}
@keyframes ff-petal-morph {
  to {
    border-radius: 45% 55% 40% 60% / 58% 44% 56% 42%;
  }
}
@keyframes ff-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ff-arrow {
    transition: transform 200ms var(--ff-ease);
  }
  .ff-btn {
    transition: background-color 160ms ease, color 160ms ease, transform 200ms var(--ff-ease),
      box-shadow 200ms var(--ff-ease);
  }
  .ff-topbar__cta {
    transition: background-color 150ms ease, color 150ms ease, transform 200ms var(--ff-ease);
  }
  .ff-work__card {
    transition: transform 260ms var(--ff-ease), box-shadow 260ms var(--ff-ease);
  }
  .ff-work__img img {
    transition: transform 400ms var(--ff-ease);
  }
  .ff-service__title,
  .ff-service__arrow {
    transition: transform 240ms var(--ff-ease), color 180ms ease;
  }
  .ff-step,
  .ff-person__img,
  .ff-journal-card {
    transition: transform 240ms var(--ff-ease), box-shadow 240ms var(--ff-ease);
  }
  .ff-journal-card__img img {
    transition: transform 400ms var(--ff-ease);
  }
  .ff-faq__mark {
    transition: transform 220ms var(--ff-ease);
  }
  /* Blur-in headline — staggered per line, on load. */
  .ff-motion .ff-hero__title .ff-line,
  .ff-motion .ff-slam__title .ff-line {
    animation: ff-blur-in 0.72s var(--ff-ease) both;
    will-change: transform, filter;
  }
  .ff-motion .ff-hero__title .ff-line:nth-child(2),
  .ff-motion .ff-slam__title .ff-line:nth-child(2) {
    animation-delay: 0.12s;
  }
  .ff-motion .ff-hero__title .ff-line:nth-child(3),
  .ff-motion .ff-slam__title .ff-line:nth-child(3) {
    animation-delay: 0.24s;
  }
  .ff-motion .ff-hero__title .ff-line:nth-child(4),
  .ff-motion .ff-slam__title .ff-line:nth-child(4) {
    animation-delay: 0.36s;
  }

  /* Bobbing blob badges — offset phases for a parallax-ish drift. */
  .ff-blob--float {
    animation: ff-bob 4.6s ease-in-out infinite alternate;
  }
  .ff-blob--float:nth-child(3n + 2) {
    animation-duration: 5.4s;
    animation-delay: -1.6s;
  }
  .ff-blob--float:nth-child(3n + 3) {
    animation-duration: 5s;
    animation-delay: -3s;
  }

  /* The seal spins; the star stays put. */
  .ff-seal__spin {
    animation: ff-spin 18s linear infinite;
  }

  /* Sparkles twinkle. */
  .ff-sparkle svg {
    animation: ff-twinkle 3.2s ease-in-out infinite alternate;
  }
  .ff-sparkle--2 svg {
    animation-delay: -1.2s;
  }
  .ff-sparkle--3 svg {
    animation-delay: -2.1s;
  }

  /* Marquee — seamless loop; pauses on hover. */
  .ff-marquee__track {
    animation: ff-marquee-run 26s linear infinite;
  }
  .ff-marquee:hover .ff-marquee__track {
    animation-play-state: paused;
  }

  /* The petal breathes. */
  .ff-statement__petal {
    animation: ff-petal-morph 9s ease-in-out infinite alternate;
  }

  /* Settle-up scroll reveals (pure CSS where supported). */
  @supports (animation-timeline: view()) {
    .ff-work__card,
    .ff-journal-card,
    .ff-stat,
    .ff-quote,
    .ff-person,
    .ff-service,
    .ff-step,
    .ff-faq__item,
    .ff-lead {
      animation: ff-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ff-marquee {
    overflow-x: auto;
  }
  .ff-marquee__track[aria-hidden="true"] {
    display: none;
  }
}

/* == Responsive ======================================================= */
@media (max-width: 900px) {
  .ff-hero__foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .ff-seal {
    order: -1;
    align-self: flex-end;
    margin-top: -3.5rem;
  }
  .ff-service {
    grid-template-columns: 3.2rem minmax(0, 1fr);
  }
  .ff-service__arrow {
    display: none;
  }
}
@media (max-width: 640px) {
  .ff-pill {
    padding-left: 1rem;
  }
  .ff-wordmark {
    font-size: 1.05rem;
  }
  .ff-topbar__cta {
    padding: 0.5em 0.9em;
  }
  .ff-topbar__nav {
    gap: 0.8rem;
  }
  .ff-faq__a {
    padding-right: 0;
  }
  .ff-hub-head__title {
    font-size: var(--wp--preset--font-size--xl);
  }
}