/* ============================================================
   Shared blocks, loaded by both the (frontend) and (site) layouts:
   the coral .bf-cta button, the closing band (partials/fit-band.html)
   and the Little Book of 100 Logomarks download (partials/logomarks.html).
   Loaded after brands.css.
   ============================================================ */
@keyframes lm-badge-spin { to { transform: rotate(360deg); } }

.bf-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #ff4844; 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: #e63c38; 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; }

/* final cta */
/* pale grey band runs edge to edge while the content keeps the 1400px column */
.bf-final { background: #e9e9f1; box-shadow: 0 0 0 100vmax #e9e9f1; clip-path: inset(0 -100vmax); text-align: center; padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
/* outside a .bf page (e.g. /work) the band brings its own type and colour */
section.bf-final { font-family: 'greycliff-cf', sans-serif; color: #1c2e42; }
/* side gutter where no page rule gives one (the case studies); :where() keeps
   it at zero weight so .bf pages keep their own gutters */
:where(section.bf-final) { padding-left: 1.25rem; padding-right: 1.25rem; }
.bf-final__title { font-family: 'greycliff-cf', sans-serif; font-weight: 500; font-size: 2.9rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.bf-final__sub { font-size: 1.6rem; color: #55555f; margin: 0 auto 2rem; max-width: 102ch; }
.bf-final .bf-cta { margin: 0 auto; }
.bf-final__img { display: block; width: 100%; max-width: 580px; height: auto; }
.bf-final__title + .bf-final__img { margin: 2rem auto 0; }
/* The How It Works sign-off is one short sentence, so a phone can hold it in
   two lines instead of the three that 1.6rem gives, at a size that sits under
   the body copy rather than shouting over it. Only that paragraph opts in —
   the sub on /contact and /brandfreak is several times longer and has no
   two-line size worth having. 3.6vw is ~14px on a 390px phone, and the 0.8rem
   floor holds the smallest handsets at 12.8px. It reaches 1.6rem at 711px,
   above this query, so the last mobile step up to the desktop size is ~2.5px.
   Measured across 320-640px with the widest local sans standing in for
   Greycliff CF: two lines throughout, 226px of the 280px available at 320. */
@media (max-width: 640px) {
  .bf-final__sub--two-line { font-size: clamp(0.8rem, 3.6vw, 1.6rem); text-wrap: balance; }
  /* 2.9rem is a desktop size: at it the band headings ran to four lines at
     320px and three at 390px. Measured with the widest local sans standing in
     for Greycliff CF — force the family on the h2, which carries its own
     font-family and will otherwise fall back to a narrower face and flatter
     the result — two lines needs 6.80vw or less at 320px, the tightest width.
     6.6vw clears that on every phone and reaches 42px by 640px, a step under
     the desktop 2.9rem.

     That was measured against the old, longer wording ("...or Website Envy?").
     The heading is shorter now, so 6.6vw is conservative rather than wrong —
     there is room to go bigger if the band wants it. */
  .bf-final__title { font-size: clamp(1.25rem, 6.6vw, 2.9rem); text-wrap: balance; }
}

/* closing bands: coral heading variant, and a white one without the grey */
.bf-final--coral .bf-final__title { color: #ff4844; font-weight: 400; letter-spacing: -0.01em; }
.bf-final--coral .bf-final__sub { color: #14141b; line-height: 1.6; max-width: 34em; margin-bottom: 2.5rem; }
.bf-final.bf-final--white { background: #e9e9f1; box-shadow: none; clip-path: none; }

/* Little Book of 100 Logomarks — the download pop-up, laid out inline on /contact */
/* up to 1200px wide inside 4.5rem side margins. "section.lm-section" rather
   than ".bf > .lm-section" so the block (partials/logomarks.html) also works on
   pages without the .bf wrapper, e.g. /work; it matches .bf > section's weight
   and comes later, so it wins there too. */
/* lilac band behind the card runs the full width of the page */
section.lm-section { display: block; box-sizing: border-box; max-width: calc(1200px + 9rem); margin: 0 auto; padding: clamp(5rem, 9vw, 8rem) 4.5rem; font-family: 'greycliff-cf', sans-serif; color: #1c2e42; background: #e9e9f1; box-shadow: 0 0 0 100vmax #e9e9f1; clip-path: inset(0 -100vmax); }
@media (max-width: 1024px) { section.lm-section { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 640px) { section.lm-section { padding-left: 1.25rem; padding-right: 1.25rem; } }
/* Proportions measured from the mockup (card 1942 x 780, red panel 31% of it).
   The card is the size container, so every size below is a share of the card's
   width: the type, fields, logo and badge all scale together and the title
   always sets on two lines. */
.lm { container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 69fr) minmax(0, 31fr); aspect-ratio: 1942 / 780; border-radius: 6px; }
.lm__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; border-radius: 6px 0 0 6px; }
.lm__panel { position: relative; background: #ff4844; color: #fff; border-radius: 0 6px 6px 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 6.2cqi 2.48cqi 3.41cqi; }
.lm__badge { position: absolute; top: -2.17cqi; right: 2.17cqi; width: 9.3cqi; height: auto; transform: rotate(11deg); }
.lm__badge-bg { fill: #1c1c27; }
.lm__badge-fg { fill: #fff; }
.lm__badge-ring { transform-box: view-box; transform-origin: 98.4px 98.4px; animation: lm-badge-spin 45s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lm__badge-ring { animation: none; } }
.lm__logo { display: block; width: 9.3cqi; height: auto; margin: 0 0 -0.08cqi 0.15cqi; }
.lm__title { font-family: 'Anton', 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; font-size: 3.2rem; color: #fff; margin: 0 0 1.24cqi; }
.lm__title span { color: #14141b; }
.lm__form { display: grid; gap: 0.74cqi; }
.lm__form input { font: inherit; font-size: 1.25cqi; color: #14141b; background: #fff; border: 0; border-radius: 3px; height: 3.84cqi; padding: 0 1.4cqi; width: 100%; box-sizing: border-box; font-weight: 500; }
.lm__form input::placeholder { color: #6b6b75; }
.lm__form input:focus { outline: 2px solid #14141b; outline-offset: 0; }
.lm__form button { font: inherit; font-size: 1.4cqi; font-weight: 600; color: #fff; background: #1c1c27; border: 0; border-radius: 3px; height: 3.84cqi; cursor: pointer; transition: background 0.2s ease; }
.lm__form button:hover { background: #000; }
.lm__legal { font-size: 0.7rem; line-height: 1.4; color: #fff; text-align: center; margin: 0.46cqi 0 0; font-weight: 600; }
.lm__done { font-size: 1.12cqi; font-weight: 500; color: #fff; margin: 0.93cqi 0 0; }
/* stacked: the panel is now the full card width, so its sizes are the
   mockup's panel-relative values used directly */
@media (max-width: 900px) {
  .lm { grid-template-columns: 1fr; aspect-ratio: auto; }
  .lm__img { aspect-ratio: 16 / 9; height: auto; border-radius: 6px 6px 0 0; }
  .lm__panel { border-radius: 0 0 6px 6px; padding: 18cqi 8cqi 10cqi; }
  .lm__badge { top: -10cqi; right: 6cqi; width: 26cqi; }
  .lm__logo { width: 30cqi; margin: 0 0 -3.5cqi 0.5cqi; }
  .lm__title { font-size: 11.6cqi; margin-bottom: 4cqi; }
  .lm__form { gap: 2.4cqi; }
  .lm__form input { font-size: max(16px, 3.4cqi); height: 12.4cqi; padding: 0 4.5cqi; }
  .lm__form button { font-size: max(16px, 3.8cqi); height: 12.4cqi; }
  .lm__legal { font-size: max(12px, 2.8cqi); }
  .lm__done { font-size: max(15px, 3.6cqi); }
}

/* ============================================================
   Little Book of 100 Logomarks download pop-up (partials/promo.html),
   opened from the promo bar on every page
   ============================================================ */
.dl-modal {
  position: fixed;
  inset: 0;
  /* above the promo bar (4000) and the menu, so its own close is the only one */
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(1.25rem, 5vw, 5rem);
  background: #10131c url('../img/horrible-global-leadmagnet-bkg.jpg') center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* black scrim over the book image */
.dl-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  z-index: 0;
}
.dl-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dl-modal__box {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  margin-right: clamp(0rem, 6vw, 6rem);
  background: #fff;
  color: #1c2e42;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* 25-years badge straddling the seam between the photo and the white box */
.dl-modal__badge {
  position: absolute;
  /* top: 40%; */
  left: 0;
  transform: translate(265%, 150%);
  width: clamp(84px, 11vw, 110px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0);
}
/* only the outer curved text ring spins; "25 YEARS" + the line stay put */
.dl-modal__badge .badge-ring {
  transform-box: view-box;
  transform-origin: 98.4px 98.4px;
  animation: badge-spin 45s linear infinite;
}
@keyframes badge-spin {
  to { transform: rotate(360deg); }
}
/* logomarks spread — full width of the box, rounded top corners, no gaps */
.dl-modal__img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 6px 6px 0 0;
  aspect-ratio: 2000 / 1019;
  object-fit: cover;
  object-position: center;
}
.dl-modal__body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1rem;
}
/* a labelled pill rather than a bare cross */
.dl-modal__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* just the cross now: no border, no label — the aria-label carries the name */
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  line-height: 1;
  padding: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dl-modal__close:hover { background: #fff; color: #14141b; }
.dl-modal__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #ff4844;
  margin-bottom: 0.6rem;
}
.dl-modal__logo {
  display: block;
  width: clamp(120px, 34%, 165px);
  height: auto;
  margin-bottom: -0.25rem;
  margin-left: 0.35rem;
}
.dl-modal__title {
  font-family: 'Anton', 'Bebas Neue', sans-serif;
  font-size: 2.9vw;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.dl-modal__title .num { color: #ff4844; margin-right: -0.1em; }
.dl-modal__sub {
  font-size: 0.92rem;
  color: #55555f;
  margin-bottom: 1.4rem;
}
.dl-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 20px; }
.dl-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
}
.dl-field input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d5d5df;
  border-radius: 3px;
  background: #f7f7fb;
  color: #1c2e42;
  min-height: 54px;
}
.dl-field input::placeholder { font-weight: 400; }
.dl-field input:focus {
  outline: none;
  border-color: #ff4844;
  background: #fff;
}
.dl-form__submit {
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 6px;
  background: #ff4844;
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.dl-form__submit:hover { background: #e63b37; }
.dl-form__legal {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #8a8a94;
  text-align: center;
}
.dl-modal__done {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1c2e42;
}