/* 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;
  /* Exactly the work grid's column, so the headline starts on the same pixel
     as the first case-study thumbnail: same 1600px cap, same side padding at
     the same breakpoints. It has to be the same mechanism as well as the same
     numbers — insetting by margin here while the grid insets by padding inside
     its cap put the two 72px apart above 1744px. */
  max-width: 1600px;
  margin: 0 auto;
  padding: 20vh 4.5rem 4vh;
}
@media (max-width: 1024px) {
  .home .blackhero { padding-left: 2rem; padding-right: 2rem; }
}

/* The homepage and /work sit on off-white rather than white. Each is matched
   by something only it has — .blackhero on the homepage (/work splits the
   shared chrome off before the hero) and .work-index on /work — so neither
   needs a new body class. .home alone would catch every front-end page.

   The bands below paint white full-bleed, so they have to give it up too or
   they stripe the page. .bf-final--white is in that list because the modifier
   exists to sink that band into a white page; on an off-white one it has to
   sink into that instead. Cards keep their white — the floating chat card and
   bubble, the form fields — because they sit on the background rather than
   being it.

   .work-index is painted in home-inline.css, which the layout injects as a
   <style> block rather than a file — grepping public/css for it finds
   nothing. */
body.home:has(.blackhero),
body.home:has(.work-index) {
  background: #f5f5f5;
}
body.home:has(.blackhero) .blackhero,
body.home:has(.blackhero) .work,
body.home:has(.blackhero) .whohelp,
body.home:has(.blackhero) .whohelp::before,
body.home:has(.blackhero) .capabilities,
body.home:has(.blackhero) .feature,
body.home:has(.work-index) .work-index,
body.home:has(.work-index) .work,
body.home:has(.work-index) .work-hero,
body.home:has(.work-index) .bf-final--white {
  background: transparent;
}
.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;
}
/* Big screens: 3.2rem left the headline small in all that room, so from 1600px
   it grows with the viewport. Its max-width moves with it at the ratio the
   headline breaks to three lines at today (777 / 51.2), so the break holds. */
@media (min-width: 1600px) {
  .home .blackhero { --hero-h1: clamp(3.2rem, 3.6vw, 4rem); }
  .home .blackhero__h1 { font-size: var(--hero-h1); max-width: calc(var(--hero-h1) * 15.18); }
}
.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); }     /* BrandTech white art -> black */

/* "View All Work" button under the homepage case-study grid */
.work-viewall { display: flex; justify-content: center; margin-top: 5vw; }
.work-viewall__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #ff4844;
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.work-viewall__btn:hover { background: #e63c38; transform: translateY(-2px); }
.work-viewall__btn span { transition: transform 0.25s ease; }
.work-viewall__btn:hover span { transform: translateX(5px); }

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

/* 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: #ff4844;
  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;
}


/* "Freak to Unique in a Week" live text above the capabilities intro */
.cap-freak-text {
  color: #ff4844;
  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: 1680px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
/* /brandfreak alone wants its sections spaced apart */
.bf--spaced > section { margin-top: 5rem; }
/* One rule sets the gutter for every section on How It Works, BrandFreak
   and Contact, so the tablet and phone steps belong here rather than as a
   list of per-section overrides somewhere else. */
@media (max-width: 1024px) {
  .bf > section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (max-width: 640px) {
  .bf > section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
/* hero */
.bf-hero { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.bf-eyebrow { color: #ff4844; 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: #ff4844; }
.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-link { color: #1c2e42; font-weight: 600; text-decoration: none; border-bottom: 1px solid #1c2e42; padding-bottom: 2px; }
.bf-link:hover { color: #ff4844; border-color: #ff4844; }
/* 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; }
/* The questions are longer than the capabilities accordion this component is
   shared with, so on a phone they need their own size to hold one line.
   Measured against the longest question across 320-430px: 13.5px is the
   ceiling at 320 and 17px at 375. */
@media (max-width: 640px) {
  .bf-faq summary { font-size: clamp(0.82rem, 4.1vw, 1.7rem); }
  /* the answers read as body copy, at the size the rest of the site uses */
  .bf-faq .cap-body-inner,
  .bf-faq .cap-body-inner p {
    font-size: 1.05rem;
    line-height: 1.55;
  }
}
/* 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: #ff4844; font-size: 0.95rem; margin-top: 0.15rem; }
@media (max-width: 860px) {
  .bf-section { grid-template-columns: 1fr; }
  .bf-price { position: static; }
  .bf-quotes__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   How It Works (/how) — centred intro + three image/text steps
   ============================================================ */
.hiw-head { text-align: center; padding-top: 3vw; padding-bottom: 3rem; }
.hiw-title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: clamp(2.8rem, 5.5vw, 4.4rem); line-height: 1.1; letter-spacing: -0.01em; color: #ff4844; margin: 0 0 clamp(1.5rem, 3vw, 2.4rem); }
.hiw-head .bf-cta { margin-top: 2.5rem; }
.hiw-intro { font-size: 2rem; line-height: 1.6; max-width: 28em; margin: 0 auto; }
/* Contact only: a narrower intro. Page-specific widths go on their own class,
   never on .hiw-intro, which every page head shares. */
.ct-intro { max-width: 20em; }
.hiw-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; gap: clamp(4rem, 8vw, 7rem); }
.hiw-step { scroll-margin-top: 8rem; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hiw-step__media img { display: block; width: 100%; max-width: 500px; height: auto; margin-left: auto; }
.hiw-step__num { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; color: #ff4844; margin: 0 0 0.35rem; }
.hiw-step__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; color: #1c2e42; margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.hiw-step__body { font-size: 1.2rem; line-height: 1.6; letter-spacing: 0.02rem; max-width: 40rem; margin: 0 0 3rem; }
.hiw-steps-section { display: block; padding-bottom: clamp(5rem, 10vw, 9rem); }
/* scroll reveal — .reveal is added by /js/reveal.js, .is-in once in view */
.hiw-step.reveal .hiw-step__media,
.hiw-step.reveal .hiw-step__text {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hiw-step.reveal .hiw-step__text { transition-delay: 0.15s; }
.hiw-step.reveal.is-in .hiw-step__media,
.hiw-step.reveal.is-in .hiw-step__text { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .hiw-step { grid-template-columns: 1fr; }
  .hiw-step__media img { max-width: 380px; margin: 0 auto; }
}
/* On a phone 380px is all but the full width of the screen, and centred it
   leaves the step out of line with the copy under it. Two thirds of the
   column, hard against the left edge, reads as an illustration beside the
   step rather than a banner above it. */
@media (max-width: 640px) {
  .hiw-step__media img { width: 66%; max-width: 260px; margin: 0 auto 0 0; }
}
/* 2rem intro copy is body size on a desktop but fills the screen on a phone,
   so it scales with the viewport below 640px. The 2rem ceiling meets the
   desktop rule exactly at 640px, so there is no jump at the breakpoint. */
@media (max-width: 640px) {
  .hiw-intro { font-size: clamp(1.15rem, 5vw, 2rem); line-height: 1.5; }
}



/* ============================================================
   BrandUnique — Our 5 Day Framework: copy beside a numbered rail
   ============================================================ */
.bf > .bu-fw { scroll-margin-top: 7rem; display: block; max-width: 1200px; padding-bottom: 7rem; }
.bu-fw__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 3rem; line-height: 1.1; letter-spacing: -0.01em; color: #ff4844; margin: 0 auto 4rem; max-width: 1400px; text-align: center; }
.bu-fw__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.bu-fw__art { display: block; width: 100%; max-width: 430px; height: auto; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.bu-fw__copy p { font-size: 1.2rem; line-height: 1.6; color: #2b3948; margin: 0 0 1.4rem; }
.bu-fw__copy p:last-child { margin-bottom: 0; }
.bu-fw__steps { list-style: none; margin: 0; padding: 0; }
/* the rail runs through the numbers: each step draws its own segment, so the
   line arrives with the step rather than being there from the start */
.bu-fw__step { position: relative; padding: 0 0 2.5rem 4.9rem; }
.bu-fw__step:last-child { padding-bottom: 0; }
.bu-fw__step::before { content: ''; position: absolute; left: 1.44rem; top: 3rem; bottom: 0; width: 2px; background: #d8d8e0; transform-origin: 50% 0; }
.bu-fw__step:last-child::before { display: none; }
.bu-fw__num { position: absolute; left: 0; top: -7px; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: #ff4844; color: #fff; font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: background 0.4s ease; }
.bu-fw__day { font-family: 'Anton', 'greycliff-cf', sans-serif; font-size: 1.875rem; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #ff4844; margin: 0.15rem 0 0.2rem; }
.bu-fw__act { font-family: 'Anton', 'greycliff-cf', sans-serif; font-weight: 400; font-size: 1.875rem; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #1c2e42; margin: 0 0 0.9rem; }
.bu-fw__body { font-size: 1.2rem; line-height: 1.55; color: #2b3948; margin: 0; max-width: 46ch; }
/* scroll reveal — .reveal is added by /js/framework.js, .is-in once in view.
   The hidden state only exists once the script has run, so without JS (or with
   reduced motion) every step is simply there. */
.bu-fw__step.reveal .bu-fw__day,
.bu-fw__step.reveal .bu-fw__act,
.bu-fw__step.reveal .bu-fw__body { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bu-fw__step.reveal .bu-fw__act { transition-delay: 0.08s; }
.bu-fw__step.reveal .bu-fw__body { transition-delay: 0.16s; }
.bu-fw__step.reveal::before { transform: scaleY(0); transition: transform 0.7s ease 0.1s; }
.bu-fw__step.reveal .bu-fw__num { transform: scale(0.8); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bu-fw__step.reveal.is-in .bu-fw__day,
.bu-fw__step.reveal.is-in .bu-fw__act,
.bu-fw__step.reveal.is-in .bu-fw__body { opacity: 1; transform: none; }
.bu-fw__step.reveal.is-in::before { transform: scaleY(1); }
.bu-fw__step.reveal.is-in .bu-fw__num { transform: none; }
@media (max-width: 900px) {
  .bu-fw__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bu-fw__step { padding-left: 4rem; padding-bottom: 2rem; }
  .bu-fw__num { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
  .bu-fw__step::before { left: 1.24rem; top: 2.65rem; }
  .bu-fw__day, .bu-fw__act { font-size: 1.625rem; }
}


/* ============================================================
   BrandUnique — Why It Works: three numbered columns
   ============================================================ */
.bf > .bu-why { display: block; max-width: 1200px; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); text-align: center; }
.bu-why__heading { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 3rem; line-height: 1.1; letter-spacing: -0.01em; color: #ff4844; margin: 0 0 1.5rem; }
.bu-why__intro { font-size: 1.2rem; line-height: 1.6; color: #2b3948; max-width: 46em; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.bu-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.bu-why__col { display: flex; flex-direction: column; align-items: center; }
.bu-why__num { display: block; width: auto; height: 6.5rem; margin: 0 0 1.5rem; }
.bu-why__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.01em; color: #ff4844; margin: 0 0 1rem; }
.bu-why__body { font-size: 1.05rem; line-height: 1.6; color: #2b3948; margin: 0; max-width: 34ch; }
/* scroll reveal — .reveal is added by /js/framework.js, .is-in while the
   column is in view. It is removed again on the way out, so the three play
   once more on the way back. Without JS (or with reduced motion) they are
   simply there. */
.bu-why__col.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bu-why__col.reveal.is-in { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .bu-why__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   BrandUnique packages (/brandunique) — three price cards
   ============================================================ */
/* #pricing lands on the band itself: the grey edge sits at the top of the
   viewport rather than 7rem down it. Nothing is fixed over the top of the
   page here — the header scrolls away — so no offset is needed. */
.bf > .bu-pkgs { scroll-margin-top: 0; display: block; max-width: none; background: #f7f7fa; box-shadow: 0 0 0 100vmax #f7f7fa; clip-path: inset(0 -100vmax); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.bu-pkgs__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 3rem; line-height: 1.1; letter-spacing: -0.01em; color: #ff4844; margin: 0 0 4rem; }
.bu-pkgs__grid { list-style: none; margin: 0 auto; max-width: 1400px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; text-align: left; }
/* scroll reveal — see /js/framework.js; the cards rise in one at a time and
   reset on the way out, like the framework days and the Why It Works columns */
.bu-pkg.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bu-pkg.reveal.is-in { opacity: 1; transform: none; }
.bu-pkg { background: #fff; border-radius: 6px; padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; }
.bu-pkg__icon { display: block; width: 4.2rem; height: auto; margin: 0 0 1rem; }
.bu-pkg__brand { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 2.4rem; line-height: 0.8; letter-spacing: -0.01em; color: #ff4844; margin: 0; }
.bu-pkg__brand sup { font-size: 0.55em; vertical-align: super; margin-left: -0.12em; }
.bu-pkg__name { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; color: #1c2e42; margin: 0 0 1.4rem; }
.bu-pkg__desc, .bu-pkg__spec { font-size: 1.05rem; line-height: 1.55; color: #2b3948; margin: 0 0 1.3rem; }
/* who the package is for, sat under the description in the card's navy */
.bu-pkg__for { font-size: 1.05rem; font-weight: 500; line-height: 1.55; color: #1c2e42; margin: 0 0 1.3rem; }
.bu-pkg__spec { margin-bottom: 1.8rem; }
.bu-pkg__price { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: clamp(2.2rem, 3.2vw, 2.9rem); line-height: 1; letter-spacing: -0.02em; color: #ff4844; margin: 0 0 0.5rem; }
.bu-pkg__sub { font-size: 1.1rem; font-weight: 500; line-height: 1.5; color: #ff4844; margin: 0 0 1.6rem; }
/* the button sits on the same line across all three cards whatever the copy
   above it runs to, and the terms hang off the bottom */
.bu-pkg__cta { align-self: flex-start; margin-top: auto; font-size: 1rem; padding: 0.85rem 1.6rem; }
.bu-pkg__terms-label { font-size: 1rem; color: #131318; margin: 1.6rem 0 0.15rem; }
.bu-pkg__terms { font-size: 1rem; line-height: 1.5; color: #131318; margin: 0; }
.bu-pkgs__vat { font-size: 1.05rem; color: #2b3948; margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 1400px; }
@media (max-width: 900px) {
  .bu-pkgs__grid { grid-template-columns: 1fr; }
  .bu-pkg__cta { align-self: stretch; justify-content: center; }
}

/* ============================================================
   BrandFreak Workshop (/brandfreak) — video + offer/detail split.
   The centred title and intro reuse .hiw-head / .hiw-title / .hiw-intro.
   ============================================================ */
.bfw-video-section { display: block; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.bfw-video { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }
/* A <video> with no dimensions is 300x150 until its metadata arrives, so at
   full width it painted as a short dark strip and then jumped to full height.
   The coded size is 1262x720, so the box is reserved from the first frame and
   nothing moves. The holding colour is the page, not black. */
.bfw-video { aspect-ratio: 1262 / 720; background: #fff; }
.bf > .bfw-detail { display: grid; gap: 6vw; padding-bottom: 1rem; }
/* the two-column split belongs to /brandfreak — /brandunique stacks, and had
   been overriding both of these from the shared rule anyway */
.bf > .bfw-detail:not(.bfw-detail--stacked) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1200px; }
.bfw-offer__media { position: relative; max-width: 400px; margin: 0 auto 1rem; }
.bfw-offer__media > img:first-child { display: block; width: 100%; max-width: 800px; height: auto; margin: 0 auto; }
.bfw-offer__arrow { position: absolute; right: -2%; bottom: -8%; width: 28%; height: auto; }
/* hand-lettered "Book" with its arrow, in place of the plain curl */
.bfw-offer__arrow--book { width: 40%; right: -30%; bottom: 0%; }
/* it hangs 30% past the media box, which a phone has no room for — the offer
   reads fine without it, and it is decorative (aria-hidden) either way */
@media (max-width: 640px) {
  .bfw-offer__arrow--book { display: none; }
}
.bfw-price { font-size: 4rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: #ff4844; margin: 0; text-align: center; }
/* location tabs above the BrandFreak calendar */
.bfw-regions__label { text-align: center; font-size: 1.05rem; line-height: 1.5; color: #1c2e42; margin: 0 0 1.1rem; }
.bfw-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0 0 1.75rem; }
.bfw-region { font: inherit; font-size: 1rem; font-weight: 500; color: #fff; background: #ff4844; border: 0; border-radius: 999px; padding: 0.5rem 1.4rem; cursor: pointer; transition: background 0.2s ease; }
.bfw-region:hover { background: #e63c38; }
.bfw-region.is-active { background: #1c1c27; cursor: default; }
.bfw-region:focus-visible { outline: 2px solid #1c1c27; outline-offset: 2px; }
/* price, button and note sit under the calendar */
.bfw-book .bfw-price { margin-top: 3rem; }
.bfw-book .bfw-price { text-align: left; }
.bfw-book .bfw-note { text-align: left; }
.bfw-price span { font-size: 0.48em; margin-left: 0.3rem; letter-spacing: 0; }
.bfw-note { font-size: 1rem; line-height: 1.5; color: #1c2e42; max-width: 28rem; margin: 1rem 0 0; }
.bfw-offer > .bfw-copy__title { margin-bottom: 2rem; }
.bfw-copy__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 2.3rem; line-height: 1.25; color: #ff4844; margin: 0 0 2.5rem; }
.bfw-copy p { font-size: 1.1rem; line-height: 1.5; letter-spacing: 0.02rem; color: #1c2e42; margin: 0 0 1rem; }
.bfw-copy p:last-child { margin-bottom: 0; }
.bfw-copy p.bfw-copy__more { margin-top: 2.25rem; }
.bfw-link { color: #ff4844; font-weight: 600; font-size: 1.1rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bfw-link:hover { color: #e63c38; }
.bfw-link { display: inline-flex; align-items: center; gap: 0.6rem; }
.bfw-link img { width: 28px; height: 28px; flex: none; }
.bf > .bfw-video-section { scroll-margin-top: 7rem; }
.bf > .bfw-detail { scroll-margin-top: 7rem; }
@media (max-width: 860px) {
  /* same selector as the two-column rule above, or it would not outrank it */
  .bf > .bfw-detail:not(.bfw-detail--stacked) { grid-template-columns: 1fr; }
}
/* BrandUnique runs this section as one column at every width — the box shot
   over the copy rather than beside it. /brandfreak shares .bfw-detail and
   keeps its two-column split, hence the modifier. */
.bf > .bfw-detail--stacked { grid-template-columns: 1fr; max-width: 900px; }
/* nothing sits beside the box shot here any more, so it runs to the width of
   the column rather than the 400px it takes next to copy */
.bfw-detail--stacked .bfw-offer__media { max-width: none; }

/* ------------------------------------------------------------
   /brandfreak on a phone. The head, the video and the offer title
   were all carrying desktop sizes and desktop spacing, so the
   headline wrapped, the copy ran long and the video floated in a
   field of white.

   The sizes below are measured rather than guessed. The phone
   gutter is 1.25rem a side, so the text column is 100vw - 2.5rem;
   each coefficient is the largest that still holds its line count
   across 320-640px, and each is capped at the desktop size so it
   meets the wider rule at the breakpoint instead of jumping.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* 5rem between sections is a desktop rhythm; on a phone it reads
     as a gap rather than a separation */
  .bf--spaced > section { margin-top: 2rem; }

  /* "BrandFreak Workshop" on one line */
  .bf--spaced .hiw-title {
    font-size: min(calc((100vw - 2.5rem) * 0.1), 2.8rem);
    line-height: 1.05;
    margin-bottom: 1.1rem;
  }
  /* the standfirst on three lines */
  .bf--spaced .hiw-intro {
    font-size: min(calc((100vw - 2.5rem) * 0.052), 2rem);
    line-height: 1.35;
  }
  .bf--spaced .hiw-head { padding-top: 0; padding-bottom: 1rem; }

  /* the video sat 128px below the intro and 136px above the offer */
  .bfw-video-section { padding-bottom: 1rem; }

  /* "Know where you are..." on three lines */
  .bfw-copy__title {
    font-size: min(calc((100vw - 2.5rem) * 0.0862), 2.3rem);
    line-height: 1.15;
  }
  .bfw-offer > .bfw-copy__title { margin-bottom: 1.25rem; }
}


/* testimonials — three-column masonry of white cards */
.bf > .bfw-quotes { display: block; padding-top: 7rem; padding-bottom: 7rem; padding-left: 2rem; padding-right: 2rem; }
.bfw-quotes__title { font-family: 'greycliff-cf', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2rem); color: #14141b; margin: 0 0 1.75rem 0.5rem; }
.bfw-quotes__grid { columns: 3; column-gap: 2rem; }
.bfw-quote {
  display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 2rem;
  background: #fff; border-radius: 4px; padding: 2rem 1.9rem 1.9rem;
  box-shadow: 0 6px 30px rgba(20, 20, 27, 0.08);
}
.bfw-quote__stars { display: flex; gap: 3px; color: #ff4844; margin-bottom: 1.1rem; }
.bfw-quote__stars svg { width: 16px; height: 16px; }
.bfw-quote blockquote { margin: 0 0 1.6rem; font-size: 1rem; line-height: 1.6; letter-spacing: 0.02rem; color: #3a3a42; }
.bfw-quote figcaption { display: flex; align-items: center; gap: 0.9rem; }
.bfw-quote figcaption img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; }
.bfw-quote figcaption span { display: flex; flex-direction: column; font-size: 0.95rem; color: #3a3a42; }
.bfw-quote figcaption strong { font-weight: 600; font-size: 1.05rem; color: #14141b; margin-bottom: 0.1rem; }
@media (max-width: 1000px) { .bfw-quotes__grid { columns: 2; } }
@media (max-width: 640px) { .bfw-quotes__grid { columns: 1; } }

/* FAQ — dark full-bleed band with the illustrated panel inside */
/* The doodle wall runs the full width of the band under an 80% black wash.
   It is sized by the page width only (never "cover", which re-scales to the
   band's height, so opening a question zoomed it), with a floor of 2700px
   wide = ~1004px tall, enough to cover the band with any answer open. The
   image is 3000 x 1116, so at that size it is still shown below native. */
.bf > .bfw-faq {
  display: block; max-width: none; position: relative; overflow: hidden; background: #14141b;
  padding-top: clamp(4rem, 7vw, 6.5rem); padding-bottom: clamp(4rem, 7vw, 6.5rem);
}
.bfw-faq::before {
  content: ""; position: absolute; inset: -15% 0; z-index: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/img/horrible-brands-doodle-wall-3000.jpg) center top / max(100%, 2700px) auto no-repeat;
  /* parallax: /js/parallax.js writes --faq-par as the section crosses the
     viewport. The layer is 15% taller than the section top and bottom, which
     covers the travel so no edge is ever exposed. Zero until the script runs,
     and the script leaves it at zero for reduced motion. */
  transform: translate3d(0, var(--faq-par, 0px), 0);
  will-change: transform;
}
.bfw-faq__panel { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.bfw-faq__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 3rem; color: #ff4844; text-align: center; margin: 0 0 1.5rem; }
.bfw-faq__list { max-width: none; }
.bfw-faq .cap-item { max-width: none; border-top: 1px solid rgb(96 96 96); }
.bfw-faq .cap-item:first-of-type { border-top: 0; }
.bfw-faq .cap-item summary { color: #fff; font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: 0; padding: 1.2rem 0; }
.bfw-faq .cap-caret { width: 9px; height: 9px; border-color: #fff; }
.bfw-faq .cap-body-inner { color: rgb(255 255 255); max-width: none; font-size: 1.2rem; font-weight: 500; }

/* ============================================================
   Contact (/contact) — centred head, form + booking, methods, offices, rivals
   ============================================================ */
.bf > .ct-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: start; max-width: 1200px; padding-bottom: 1rem; }
.ct-book .ct-h2 { text-align: center; }
.ct-h2 { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 2.2rem; line-height: 1.25; color: #ff4844; margin: 0 0 1.75rem; }
.ct-form { display: grid; gap: 1.25rem; }
.ct-form .ct-h2 { margin-bottom: 0.5rem; }
.ct-field { display: grid; gap: 0.45rem; font-weight: 500; font-size: 1rem; color: #1c2e42; }
.ct-field em { font-style: normal; color: #8a8a97; }
.ct-field input, .ct-field textarea { font: inherit; font-weight: 400; font-size: 1.05rem; color: #14141b; background: #f7f7fa; border: 1px solid #e3e3ec; border-radius: 6px; padding: 0.9rem 1rem; width: 100%; box-sizing: border-box; }
.ct-field textarea { resize: vertical; min-height: 9rem; }
/* phone: country code (flag + dial code) beside the number */
.ct-field > label { font: inherit; }
.ct-phone { display: flex; gap: 0.5rem; }
.ct-phone select { flex: none; font: inherit; font-weight: 400; font-size: 1.05rem; color: #14141b; background: #f7f7fa; border: 1px solid #e3e3ec; border-radius: 6px; padding: 0.9rem 0.75rem; cursor: pointer; }
.ct-phone select:focus { outline: none; border-color: #ff4844; background-color: #fff; }
.ct-phone input { flex: 1; width: auto; min-width: 0; font: inherit; font-weight: 400; font-size: 1.05rem; color: #14141b; background: #f7f7fa; border: 1px solid #e3e3ec; border-radius: 6px; padding: 0.9rem 1rem; box-sizing: border-box; }
.ct-phone input:focus { outline: none; border-color: #ff4844; background: #fff; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: #ff4844; background: #fff; }
.ct-check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; color: #1c2e42; cursor: pointer; }
/* the two tick boxes read as a pair, closer than the form's 1.25rem row gap */
.ct-check + .ct-check { margin-top: -0.6rem; }
.ct-check input { width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: #ff4844; flex: none; }
.ct-form .bf-cta { justify-self: start; border: none; cursor: pointer; font-family: inherit; margin-top: 0.5rem; }
/* uses the intro style (.hiw-intro); just sits a little below the button */
.ct-alt { font-size: 1.4rem; max-width: none; margin: 1.5rem 0 0; text-align: left; }
.ct-alt a { white-space: nowrap; color: #ff4844; font-weight: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ct-alt a:hover { color: #e63c38; }
.ct-status { margin: 0; font-weight: 500; color: #1c2e42; background: #f7f7fa; border-left: 3px solid #ff4844; padding: 0.9rem 1.1rem; }
/* Calendly's own markup is in a cross-origin iframe, so the grey card is drawn
   on a wrapper around it (background_color in the embed URL matches its fill).
   data-resize lets Calendly set the widget's height to its content, so the
   iframe never scrolls; 700px is only the height before it reports in. */
.ct-cal-card { padding: 40px; background: #f7f7fa; border-radius: 6px; }
/* The widget is an empty div until Calendly's script injects its iframe, and
   the iframe paints white before its own document does. Both are held at the
   card's grey so the calendar area never flashes. */
.ct-calendly { height: 700px; background: #f7f7fa; border-radius: 6px; }
.ct-calendly iframe { background: #f7f7fa; }
/* BrandFreak: the booking card sits above the copy in the right column */
.bfw-copy--left { margin-top: 2rem; }
@media (max-width: 900px) { .bf > .ct-main { grid-template-columns: 1fr; } }
/* /contact: the message form on its own, centred */
.bf > .ct-main--single { grid-template-columns: 1fr; max-width: 720px; }
/* /brandfit: the How It Works phone + calendar image and intro beside the booking */
.bf > .ct-main--fit { padding-bottom: clamp(6rem, 11vw, 10rem); }
.ct-fit img { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto 2rem; }
/* hand-lettered "Book Now" arrow between the photo and the copy, pointing across to the calendar */
.ct-fit .ct-fit__arrow { display: block; width: 160px; max-width: 40%; height: auto; margin: -5rem -5% 2rem auto; }
/* on a phone the section stacks, so the arrow no longer points across at
   anything and only costs vertical space */
@media (max-width: 640px) {
  .ct-fit .ct-fit__arrow { display: none; }
}
.ct-fit p { font-size: 1.2rem; line-height: 1.6; letter-spacing: 0.02rem; color: #1c2e42; margin: 0; }


.bf > .ct-methods-section { display: block; max-width: none; padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
.ct-methods { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.ct-method { background: #fff; border-radius: 4px; padding: 2.25rem 2rem; text-align: center; box-shadow: 0 6px 30px rgb(20 20 27 / 15%); }
/* scroll reveal: .reveal from /js/cards-reveal.js, .is-in while the row is on screen */
.ct-methods.reveal .ct-method { opacity: 0; transform: translateY(48px); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ct-methods.reveal.is-in .ct-method { opacity: 1; transform: none; }
.ct-methods.reveal.is-in .ct-method:nth-child(2) { transition-delay: 0.45s; }
.ct-methods.reveal.is-in .ct-method:nth-child(3) { transition-delay: 0.9s; }
.ct-method__icon { display: inline-flex; align-items: center; height: 46px; color: #ff4844; margin-bottom: 1.1rem; }
.ct-method__icon svg { width: auto; height: 46px; }
/* the envelope's outline is proportionally much heavier than the pin's and
   phone's; at 28px its line weight and visual size match theirs at 46px */
.ct-method:first-child .ct-method__icon svg { height: 28px; }
.ct-method__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 1.6rem; color: #1c2e42; margin: 0 0 0.4rem; }
.ct-method__note { font-size: 1.05rem; color: #55555f; margin: 0 0 1.1rem; }
.ct-method__link { color: #ff4844; font-weight: 600; font-size: 1.1rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ct-method__link:hover { color: #e63c38; }
@media (max-width: 800px) { .ct-methods { grid-template-columns: 1fr; } }


/* competitors + finder's fee — black band, as on the old contact page */
.bf > .ct-rivals { display: block; max-width: none; background: #000; color: #fff; padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
.ct-rivals__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.ct-rivals__intro { font-size: 1.2rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); margin: 0 0 1.75rem; }
.ct-rivals__list { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 1.5rem; }
.ct-rivals__list li { break-inside: avoid; margin: 0 0 0.55rem; }
.ct-rivals__list a { color: #fff; font-size: 1.1rem; text-decoration: none; }
.ct-rivals__list a:hover { color: #ff4844; }
.ct-finder { background: #1c1c27; border-radius: 6px; padding: 2.5rem; }
.ct-finder__art { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.ct-finder__art img:first-child { width: 34%; height: auto; }
.ct-finder__art img:last-child { width: 55%; height: auto; }
.ct-finder p { font-size: 1.1rem; line-height: 1.6; color: #fff; margin: 0 0 1.75rem; }
.ct-finder__btn { display: inline-block; padding: 0.8rem 1.8rem; border: 1px solid #fff; border-radius: 999px; color: #fff; text-decoration: none; font-size: 1.05rem; transition: background 0.2s ease, color 0.2s ease; }
.ct-finder__btn:hover { background: #fff; color: #000; }
@media (max-width: 900px) { .ct-rivals__inner { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ct-rivals__list { columns: 2; } }

/* Phones. The rule at the top of this file zeroes the hero's side padding at
   every width, and being both later and more specific it also defeated the
   mobile padding written for .blackhero in home-inline.css — so the headline
   ran edge to edge with nothing to breathe against. It also carries a fixed
   3.2rem headline, which is a desktop size on a phone. */
@media (max-width: 640px) {
  /* The top padding clears the logo above with room to spare; the bottom
     reserves a band for the rabbit to sit in under the headline, which also
     leaves the top of the work below it on screen. */
  .home .blackhero {
    /* The rule at the top of this file caps the hero at calc(100% - 9rem) so it
       lines up with the work grid on desktop. On a phone that is another 72px
       of margin each side on top of the padding here, which squeezed the
       headline into a column and broke the four-line break it is sized for.
       Full width on phones; the 1.25rem padding is the whole gutter. */
    padding: 10.5rem 1.25rem 15.5rem;
    min-height: 0;
    max-width: 100%;
  }
  /* scales straight with the viewport, no floor or ceiling */
  .home .blackhero__h1 {
    font-size: 9vw;
    line-height: 1.28;
  }
  /* Full strength, in from the edge, and down in the band left for it — it was
     a 45% ghost half behind the headline. It keeps the rock it has on desktop. */
  /* sized to hold on one line, measured across 320-640px: 24px is the ceiling
     at 320 and 28.5px at 375, so this stays under both */
  .cap-freak-text { font-size: clamp(1.4rem, 7.2vw, 2.4rem); }
  /* the two logo rows read as one band, so they sit closer together */
  .client-marquee__track + .client-marquee__track { margin-top: 0.4rem; }
  .home .blackhero__rabbit {
    opacity: 1;
    width: clamp(140px, 38vw, 200px);
    top: auto;
    right: 3rem;
    bottom: 1.5rem;
  }
}