/* Horrible Brands static site — homepage hero switched to a light theme:
   white background, red (coral) logo, dark text where it was white. */
.home .blackhero {
  background: #ffffff;
  min-height: 70vh;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20vh 0px 4vh 0;
}
.home .blackhero__mid {          /* un-pin the H1 so the hero collapses to content height */
  position: static;
  transform: none;
  top: auto;
  left: auto;
  max-width: none;               /* width now controlled by .blackhero__h1 max-width */
}
.home .blackhero__h1 {
  color: #14141b;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 400;
  text-transform: none;
  font-size: 3.2rem;
  line-height: 1.25;              /* room so the reveal mask doesn't clip ascenders */
  max-width: 777px;
}
.home .blackhero__line:nth-child(4) .blackhero__line-in { animation-delay: 0.69s; }
.home .blackhero__tagline { color: #14141b; }
.home .blackhero__scroll { color: #14141b; }
.home .blackhero__scroll-chev { color: #14141b; }
.home .blackhero__divider { background: rgba(0, 0, 0, 0.22); }
.home .blackhero__logo { filter: brightness(0); }

/* View All Work link in red (scoped, so View Our Capabilities stays navy) */
.work-viewall .view-all { color: #24d151; border-bottom-color: #24d151; }

/* Client logo marquee (replaces the static client grid) */
.client-marquee {
  overflow: hidden;
  width: 100%;
  padding: 0 0 4vw;
}
.client-marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: clientScroll 130s linear infinite;
}
.client-marquee:hover .client-marquee__track { animation-play-state: paused; }
.client-marquee .client-logo {
  flex: none;
  width: 190px;                  /* uniform slot so spacing reads even regardless of logo width */
  height: 80px;
  object-fit: contain;
}
/* optically balance the visually heavier logos so they read the same size */
.client-marquee img[src*="epic-gems"] { height: 46px; }
.client-marquee img[src*="daretodu"] { height: 36px; }
.client-marquee img[src*="handdrawncreative"] { height: 56px; }
.client-marquee img[src*="klimeo"] { height: 56px; }
@keyframes clientScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .client-marquee__track { animation: none; } }

/* second logo row: scroll the opposite way, slightly slower */
.client-marquee__track + .client-marquee__track { margin-top: 1.4rem; }
.client-marquee__track--reverse { animation-direction: reverse; animation-duration: 120s; }

/* red intro line above the logo marquee */
.client-marquee__heading {
  color: #24d151;
  text-align: left;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.02rem;
  max-width: 1400px;
  margin: 0 auto 2rem;
}

/* BrandFreak logo replacing the "Strategy" eyebrow in the feature section */
.feature-eyebrow-logo {
  display: block;
  height: 58px;
  width: auto;
  margin-bottom: 1.4rem;
  opacity: 0.75;
}

/* "Freak to Unique in a Week" live text above the capabilities intro */
.cap-freak-text {
  color: #24d151;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
}

/* gentle rock — rabbit rotates clockwise/anticlockwise a little */
.home .blackhero__rabbit {
  transform-origin: 50% 88%;
  animation: rabbitRock 4.5s ease-in-out infinite;
}
@keyframes rabbitRock {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home .blackhero__rabbit { animation: none; transform: none; }
}

/* ============================================================
   BrandFreak landing page (/brandfreak.html)
   ============================================================ */
.bf {
  background: #ffffff;
  padding-top: clamp(9rem, 15vh, 11rem);
  color: #1c2e42;
  font-family: 'greycliff-cf', sans-serif;
}
.bf > section {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}
/* hero */
.bf-hero { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.bf-eyebrow { color: #24d151; font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02rem; margin: 0 0 1.2rem; }
.bf-title {
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  max-width: 16ch;
}
.bf-accent { color: #24d151; }
.bf-lede { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.55; font-weight: 500; max-width: 60ch; margin: 0 0 2.2rem; }
.bf-hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.bf-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #24d151; color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1.1rem; padding: 0.95rem 2rem; border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bf-cta:hover { background: #20b948; transform: translateY(-2px); }
.bf-cta span { transition: transform 0.25s ease; }
.bf-cta:hover span { transform: translateX(5px); }
.bf-cta--full { width: 100%; justify-content: center; }
.bf-link { color: #1c2e42; font-weight: 600; text-decoration: none; border-bottom: 1px solid #1c2e42; padding-bottom: 2px; }
.bf-link:hover { color: #24d151; border-color: #24d151; }
/* intro + price */
.bf-section { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.bf-copy p { font-size: 1.2rem; line-height: 1.65; margin: 0 0 1.4rem; color: #33414f; }
.bf-price { background: #f4f4f7; border-radius: 20px; padding: clamp(1.8rem, 3vw, 2.6rem); position: sticky; top: 7rem; }
.bf-price__label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 700; color: #8a8a97; margin: 0 0 0.6rem; }
.bf-price__amount { font-family: 'greycliff-cf', sans-serif; font-weight: 600; font-size: clamp(3rem, 6vw, 4rem); line-height: 1; margin: 0 0 1.2rem; color: #1c2e42; }
.bf-price__amount span { font-size: 1.2rem; font-weight: 500; color: #8a8a97; margin-left: 0.4rem; }
.bf-price__note { font-size: 1rem; line-height: 1.55; color: #55555f; margin: 0 0 1.8rem; }
/* headings */
.bf-h2 { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.02em; margin: 0 0 2rem; }
/* faq */
.bf-faq { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.bf-faq__list { max-width: 860px; }
/* testimonials */
.bf-quotes { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.bf-quotes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.bf-quote { background: #f4f4f7; border-radius: 18px; padding: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.bf-quote blockquote { margin: 0 0 1.4rem; font-size: 1.12rem; line-height: 1.6; color: #2b3948; }
.bf-quote figcaption { font-weight: 700; color: #1c2e42; display: flex; flex-direction: column; }
.bf-quote figcaption span { font-weight: 500; color: #24d151; font-size: 0.95rem; margin-top: 0.15rem; }
/* final cta */
.bf-final { text-align: center; padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.bf-final__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; margin: 0 0 1rem; }
.bf-final__sub { font-size: 1.2rem; color: #55555f; margin: 0 auto 2rem; max-width: 46ch; }
.bf-final .bf-cta { margin: 0 auto; }
@media (max-width: 860px) {
  .bf-section { grid-template-columns: 1fr; }
  .bf-price { position: static; }
  .bf-quotes__grid { grid-template-columns: 1fr; }
}

/* ---- Pricing page tiers (/pricing.html) ---- */
.pr-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.pr-tiers { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: stretch; }
.pr-card {
  display: flex; flex-direction: column;
  background: #f4f4f7; border-radius: 6px;
  padding: 2.4rem;
}
.pr-card--featured { background: #1c2e42; color: #fff; }
.pr-card--featured .pr-card__desc, .pr-card--featured .pr-card__list { color: rgba(255,255,255,0.85); }
.pr-card--featured .pr-card__list li::before { color: #24d151; }
.pr-card__badge { align-self: flex-start; background: #24d151; color: #fff; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; margin: 0 0 1rem; }
.pr-card__name { font-weight: 600; font-size: 1.35rem; margin: 0 0 0.6rem; }
.pr-card__price { font-family: 'greycliff-cf', sans-serif; font-weight: 600; font-size: clamp(2.2rem, 3.4vw, 2.8rem); line-height: 1; margin: 0 0 1rem; }
.pr-card__price span { font-size: 0.95rem; font-weight: 500; opacity: 0.6; margin-left: 0.35rem; }
.pr-card__desc { font-size: 1.02rem; line-height: 1.5; color: #55555f; margin: 0 0 1.4rem; }
.pr-card__list { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 0.6rem; }
.pr-card__list li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.4; }
.pr-card__list li::before { content: "✓"; position: absolute; left: 0; color: #24d151; font-weight: 700; }
.pr-card .bf-cta { margin-top: auto; }
.pr-cta--ghost { background: transparent; color: #1c2e42; border: 1.5px solid rgba(28,46,66,0.25); }
.pr-cta--ghost:hover { background: #1c2e42; color: #fff; border-color: #1c2e42; transform: translateY(-2px); }
.pr-custom { text-align: center; margin: clamp(2rem, 4vw, 3rem) 0 0; font-size: 1.1rem; color: #55555f; }
.pr-custom a { color: #24d151; font-weight: 600; text-decoration: none; }
.pr-custom a:hover { text-decoration: underline; }
@media (max-width: 900px) { .pr-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }