/* Beyond Bright Creative site system.
   Every size, gap and colour on the site comes from here and ds/bbc/tokens.css.
   Running text uses three sizes only: body, lead and quote (see "type"). */

body { margin: 0; background: var(--paper); }
.site { font-family: var(--font-sans); color: var(--oxblood); background: var(--paper); font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); -webkit-font-smoothing: antialiased; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site :where(a:not(.bbc-btn)) { color: inherit; }
.site img, .site video { max-width: 100%; }
.site :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.site .g-ox :focus-visible, .site .g-pink :focus-visible { outline-color: var(--pistachio); }
.v-b { --wash: var(--lilac); }
/* ---------- layout ---------- */

.wrap { max-width: calc(1200px * var(--s)); margin: 0 auto; padding: 0 calc(20px * var(--s)); }
.sec { padding: calc(64px * var(--s)) 0; border-top: 1px solid var(--oxblood); }
.sec-tight { padding: calc(32px * var(--s)) 0; border-top: 1px solid var(--oxblood); }
.col { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.gap-8 { gap: calc(8px * var(--s)); } .gap-16 { gap: calc(16px * var(--s)); } .gap-24 { gap: calc(24px * var(--s)); } .gap-40 { gap: calc(40px * var(--s)); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(24px * var(--s)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(40px * var(--s)); align-items: center; }
.head { display: flex; flex-direction: column; gap: calc(16px * var(--s)); margin-bottom: calc(40px * var(--s)); max-width: calc(720px * var(--s)); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.measure { max-width: calc(600px * var(--s)); }
/* ---------- type: six styles, nothing else ---------- */

.t-display { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(calc(48px * var(--s)), 7vw, calc(88px * var(--s))); line-height: 0.92; letter-spacing: 0.01em; }
.t-h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: clamp(calc(30px * var(--s)), 3.4vw, calc(44px * var(--s))); line-height: 1.08; letter-spacing: -0.015em; }
.t-body { margin: 0; font-size: calc(22px * var(--s)); line-height: 1.25; letter-spacing: 0.3px; }
.t-lead { margin: 0; font-size: calc(28px * var(--s)); line-height: 1.25; letter-spacing: 0.2px; }
.t-quote { font-size: calc(28px * var(--s)); line-height: 1.25; font-weight: 500; }
.t-label { margin: 0; font-size: calc(12px * var(--s)); line-height: calc(16px * var(--s)); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.t-caption { margin: 0; font-size: calc(14px * var(--s)); line-height: calc(20px * var(--s)); }
.t-script { margin: 0; font-family: var(--font-script); font-weight: 400; font-size: calc(48px * var(--s)); line-height: 1.05; }
.t-stat { font-family: var(--font-display); font-weight: 300; font-size: calc(64px * var(--s)); line-height: 0.9; }
.site p, .site li { text-wrap: pretty; }
.site h1, .site h2, .site h3 { text-wrap: balance; }
.list { margin: 0; padding: 0; list-style: none; }
.list li { padding: calc(12px * var(--s)) 0; border-bottom: 1px solid var(--oxblood); }
.list li:first-child { padding-top: 0; }
.list li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ---------- grounds ---------- */

.g-paper { background: var(--paper); color: var(--oxblood); }
.g-wash { background: var(--wash); color: var(--oxblood); }
.g-ox { background: var(--oxblood); color: var(--paper); }
.g-pink { background: var(--hot-pink); color: var(--paper); }
.g-pist { background: var(--pistachio); color: var(--oxblood); }
.g-ox .t-h2, .g-ox .t-display { color: var(--bubblegum); }
.g-ox .t-script { color: var(--lilac); }
.g-paper .t-display, .g-wash .t-display { color: var(--hot-pink); }
.g-paper .t-script, .g-wash .t-script { color: var(--hot-pink); }
.g-pink .t-display, .g-pink .t-script, .g-pink .t-h2 { color: var(--paper); }
.link { display: inline-flex; align-items: center; min-height: calc(44px * var(--s)); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: calc(5px * var(--s)); }
.g-ox .link { color: var(--lilac); }
/* ---------- cards ---------- */

.card { background: var(--paper); color: var(--oxblood); border: 1px solid var(--oxblood); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.card-band { background: var(--wash); border-bottom: 1px solid var(--oxblood); padding: calc(16px * var(--s)) calc(24px * var(--s)); min-height: calc(64px * var(--s)); display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--s)); }
.card-band .t-label { font-size: calc(14px * var(--s)); line-height: calc(18px * var(--s)); }
.card-body { padding: calc(24px * var(--s)); display: flex; flex-direction: column; gap: calc(16px * var(--s)); flex: 1 1 auto; }
.card-link { display: flex; justify-content: space-between; align-items: center; gap: calc(12px * var(--s)); min-height: calc(44px * var(--s)); padding: calc(10px * var(--s)) 0; border-top: 1px solid var(--oxblood); font-weight: 500; text-decoration: none; }
.card-link:first-child { border-top: 0; }
.card-link:hover { text-decoration: underline; text-underline-offset: calc(4px * var(--s)); }
/* ---------- media ---------- */

.frame { display: block; width: 100%; border: 1px solid var(--oxblood); border-radius: 2px; background: var(--wash); object-fit: cover; }
.r45 { aspect-ratio: 4 / 5; }
.top { object-position: top; }
.media { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; text-decoration: none; color: inherit; cursor: pointer; }
.media-tag { position: absolute; top: calc(12px * var(--s)); left: calc(12px * var(--s)); }
.fig { margin: 0; display: flex; flex-direction: column; gap: calc(10px * var(--s)); }
/* ---------- controls ---------- */

.chips { display: flex; flex-wrap: nowrap; gap: calc(8px * var(--s)); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-20px * var(--s)); padding: 0 calc(20px * var(--s)) calc(4px * var(--s)); }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: calc(44px * var(--s)); padding: 0 calc(16px * var(--s)); border: 1px solid var(--oxblood); border-radius: 2px; background: var(--paper); color: var(--oxblood); font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--oxblood); color: var(--paper); }
.chip:hover { background: var(--wash); }
.chip[aria-pressed="true"]:hover { background: var(--oxblood); }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12px * var(--s)) calc(24px * var(--s)); }
.site .bbc-btn { text-decoration: none; }
.pause { position: absolute; right: calc(12px * var(--s)); bottom: calc(12px * var(--s)); min-height: calc(36px * var(--s)); padding: 0 calc(12px * var(--s)); border: 1px solid var(--oxblood); border-radius: 2px; background: var(--paper); color: var(--oxblood); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: calc(8px * var(--s)); }
.field label, .field legend { font-size: calc(14px * var(--s)); line-height: calc(18px * var(--s)); font-weight: 600; padding: 0; }
.field .opt { font-weight: 400; font-style: italic; }
.site .bbc-input { font-size: calc(17px * var(--s)); min-height: calc(52px * var(--s)); }
.site .bbc-input::placeholder { color: var(--oxblood); opacity: 0.75; }
fieldset.field { margin: 0; border: 0; padding: 0; }
/* ---------- nav ---------- */

.nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--oxblood); }
.nav-in { max-width: calc(1200px * var(--s)); margin: 0 auto; padding: calc(8px * var(--s)) calc(20px * var(--s)); display: grid; grid-template-columns: auto auto; grid-template-areas: "logo cta" "links links"; align-items: center; justify-content: space-between; gap: calc(4px * var(--s)) calc(16px * var(--s)); }
.nav-logo { grid-area: logo; display: flex; align-items: center; min-height: calc(56px * var(--s)); }
.nav-logo img { width: calc(180px * var(--s)); height: auto; display: block; }
.nav-links { grid-area: links; display: flex; gap: calc(4px * var(--s)); margin: 0 calc(-12px * var(--s)); }
.nav-links a { display: inline-flex; align-items: center; min-height: calc(44px * var(--s)); padding: 0 calc(12px * var(--s)); font-size: calc(16px * var(--s)); line-height: calc(20px * var(--s)); font-weight: 700; text-decoration: none; text-underline-offset: calc(8px * var(--s)); text-decoration-thickness: 1px; }
.nav-links a[aria-current="page"] { text-decoration: underline; }
.nav-cta { grid-area: cta; justify-self: end; }
.nav-paper { background: var(--paper); color: var(--oxblood); }
/* ---------- logo strip ---------- */

.logos { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--oxblood); border-radius: 2px; overflow: hidden; background: var(--paper); }
.logos li { height: calc(88px * var(--s)); display: flex; align-items: center; justify-content: center; margin: 0 -1px -1px 0; border-right: 1px solid var(--oxblood); border-bottom: 1px solid var(--oxblood); }
.logos img { width: var(--w, 64%); max-width: none; height: auto; object-fit: contain; }
/* ---------- home peek ---------- */

.peek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24px * var(--s)) calc(16px * var(--s)); }
.peek .big { grid-column: 1 / -1; }
/* ---------- work grid ---------- */

.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24px * var(--s)) calc(16px * var(--s)); }
/* ---------- lightbox ---------- */

.lb { position: fixed; inset: 0; z-index: 60; padding: calc(16px * var(--s)); display: flex; align-items: center; justify-content: center; background: rgba(74, 14, 20, 0.97); color: var(--paper); }
.lb figure { margin: 0; width: 100%; max-width: calc(960px * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(16px * var(--s)); }
.lb img, .lb video { max-width: 100%; max-height: 70vh; display: block; border-radius: 2px; background: var(--paper); }
/* ---------- repeat caps (loud, decorative) ---------- */

.caps { position: absolute; inset: 0; overflow: hidden; font-family: var(--font-display); font-weight: 300; font-size: clamp(calc(72px * var(--s)), 9vw, calc(118px * var(--s))); line-height: 0.86; white-space: nowrap; pointer-events: none; }
.caps p { margin: 0; }

@media (min-width: 600px) {
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .wrap { padding: 0 calc(40px * var(--s)); }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-in { padding: calc(8px * var(--s)) calc(40px * var(--s)); grid-template-columns: auto 1fr auto; grid-template-areas: "logo links cta"; }
  .nav-links { justify-content: flex-end; margin: 0 calc(8px * var(--s)) 0 0; }
}
@media (min-width: 1080px) {
  .sec { padding: calc(96px * var(--s)) 0; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(64px * var(--s)); }
  .split.flip > :first-child { order: 2; }
  .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .logos li { height: calc(104px * var(--s)); }
  .peek { grid-template-columns: 1.3fr 1fr 1fr; gap: calc(32px * var(--s)) calc(24px * var(--s)); }
  .peek .big { grid-column: auto; grid-row: span 2; }
  .peek .big .media { flex: 1 1 auto; min-height: 0; }
  .peek .big .frame { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(32px * var(--s)) calc(24px * var(--s)); }
}
@media (prefers-reduced-motion: reduce) { .site * { transition: none !important; scroll-behavior: auto !important; } }
/* captions: client on its own line on phones, inline from tablet up */

.cap-c { display: block; font-weight: 700; }
.cap-s { display: none; }
@media (max-width: 599px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .logos li { height: calc(72px * var(--s)); } }
@media (min-width: 760px) { .cap-c { display: inline; } .cap-s { display: inline; } }
/* fixes from the visual pass */

.site .caps p { margin: 0; white-space: nowrap; text-wrap: nowrap; }
.site .card .t-h2, .site .card .t-display { color: var(--oxblood); }
.site .g-ox .card .link { color: var(--oxblood); }
.site .card .t-script { color: var(--hot-pink); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "info"; gap: calc(32px * var(--s)); align-items: start; }
.c-intro { grid-area: intro; } .c-form { grid-area: form; } .c-info { grid-area: info; }
@media (min-width: 1080px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro form" "info form"; column-gap: calc(64px * var(--s)); } }
/* ---------- round 2: Dark + light pushes ---------- */

.v-b .g-ox .card-band { background: var(--pistachio); }
.v-b .g-pist .card-band { background: var(--lilac); }
.v-b .g-pink .t-h2, .v-b .g-pink .t-lead, .v-b .g-pink .t-caption, .v-b .g-pink blockquote { color: var(--paper); }
.v-b .g-pist .t-h2 { color: var(--oxblood); }
.v-b .g-ox .t-stat { color: var(--pistachio); }
.bleed { display: grid; grid-template-columns: minmax(0, 1fr); }
.bleed-text { padding: calc(64px * var(--s)) calc(20px * var(--s)); display: flex; flex-direction: column; justify-content: center; gap: calc(24px * var(--s)); }
.bleed-img { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.bleed-img img, .bleed-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stripe { height: calc(12px * var(--s)); background: repeating-linear-gradient(90deg, var(--bubblegum) 0 calc(34px * var(--s)), var(--hot-pink) calc(34px * var(--s)) calc(68px * var(--s))); border-bottom: 1px solid var(--oxblood); }
@media (min-width: 760px) {
  .bleed-text { padding: calc(80px * var(--s)) calc(40px * var(--s)); }
}
@media (min-width: 1080px) {
  .bleed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bleed-text { padding: calc(96px * var(--s)) calc(64px * var(--s)) calc(96px * var(--s)) max(calc(40px * var(--s)), calc((100vw - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))); }
  .bleed.flip .bleed-text { padding: calc(96px * var(--s)) max(calc(40px * var(--s)), calc((100vw - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))) calc(96px * var(--s)) calc(64px * var(--s)); order: 2; }
  .bleed-img { aspect-ratio: auto; min-height: calc(640px * var(--s)); height: 100%; }
}
.bleed .t-display { font-size: clamp(calc(44px * var(--s)), 5.4vw, calc(80px * var(--s))); }
@media (min-width: 1080px) { .bleed { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } .bleed.flip { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); } }
/* ---------- round 3: craft ---------- */

.site .media img, .site .media video { transition: opacity .18s ease; }
.site .media:hover img, .site .media:hover video { opacity: .9; }
.v-b .t-stat { font-size: calc(88px * var(--s)); }

.v-b .nav-logo img { width: calc(190px * var(--s)); position: relative; top: calc(3px * var(--s)); }
@media (min-width: 760px) { .v-b .nav-logo img { width: calc(280px * var(--s)); } }
@media (min-width: 760px) { .v-b .nav-in { padding: calc(26px * var(--s)) calc(40px * var(--s)); } }
/* ---------- teal: the cool counterpoint ---------- */

.g-teal { background: var(--teal); color: var(--paper); }
.g-teal .t-h2, .g-teal .t-display, .g-teal .t-script { color: var(--pistachio); }
.g-teal .link { color: var(--pistachio); }
.site .g-teal :focus-visible { outline-color: var(--pistachio); }
.g-teal .card-band { background: var(--pistachio); }
/* ---------- kind words: postcards ---------- */

.pc { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(32px * var(--s)); align-items: stretch; }
.pc-card { margin: 0; background: var(--paper); color: var(--oxblood); border: 1px solid var(--oxblood); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.pc-edge { height: calc(16px * var(--s)); background: repeating-linear-gradient(90deg, var(--bubblegum) 0 calc(34px * var(--s)), var(--hot-pink) calc(34px * var(--s)) calc(68px * var(--s))); border-bottom: 1px solid var(--oxblood); }
.pc-in { flex: 1 1 auto; padding: calc(32px * var(--s)); display: flex; flex-direction: column; justify-content: space-between; gap: calc(28px * var(--s)); }
.pc-in blockquote { margin: auto 0; font-size: calc(28px * var(--s)); line-height: 1.25; font-weight: 500; }
.pc-in blockquote::before { content: "\201C"; } .pc-in blockquote::after { content: "\201D"; }
.pc-by { display: flex; flex-direction: column; gap: calc(6px * var(--s)); padding-top: calc(20px * var(--s)); border-top: 1px dashed var(--oxblood); }
.pc-name { font-size: calc(26px * var(--s)); line-height: calc(32px * var(--s)); font-weight: 600; }
.pc-co { font-size: calc(22px * var(--s)); line-height: calc(28px * var(--s)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 760px) { .pc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(40px * var(--s)); } .pc-in { padding: calc(40px * var(--s)); } }
/* home hero: three set lines (each its own row, so the colour change never lands mid-line),
   text on the same left edge as the nav and every section, grid shown whole at its real 4:5 shape */
.site .hero-h1 { font-size: clamp(calc(36px * var(--s)), 9.6vw, calc(56px * var(--s))); line-height: 0.96; letter-spacing: 0.015em; }
.hero-h1 .hl { display: block; }
.hero-h1 .hl-pop { color: var(--hot-pink); }
.bleed-text > .col.gap-8 { gap: calc(14px * var(--s)); }
.bleed.hero .bleed-text { align-items: flex-start; text-align: left; }
.bleed.hero .bleed-text > * { width: 100%; max-width: calc(600px * var(--s)); }
.bleed.hero .bleed-text .col { align-items: flex-start; }
.bleed.hero .bleed-text .measure { margin: 0; }
.bleed.hero .bleed-text .btns { justify-content: flex-start; }
@media (min-width: 1080px) {
  .site .hero-h1 { font-size: clamp(calc(44px * var(--s)), 4.36vw, calc(62.8px * var(--s))); }
  .bleed.hero .bleed-img { aspect-ratio: 4 / 5; min-height: 0; height: auto; align-self: center; }
}
@media (min-width: 1300px) { .hero-h1 .hl { white-space: nowrap; } }
/* about: founder note, full-bleed portrait */

.note-quote { margin: 0; font-size: calc(28px * var(--s)); line-height: 1.25; font-weight: 500; color: var(--paper); }
.note-bleed .t-script { color: var(--bubblegum); }
@media (min-width: 1080px) { .note-bleed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .note-bleed .bleed-img { min-height: calc(720px * var(--s)); } }
@media (min-width: 1080px) { .site section[aria-labelledby="a-story"].bleed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site section[aria-labelledby="a-story"] .bleed-img { min-height: calc(720px * var(--s)); } }
/* running text: body 22 (18 in cards, 19 on phones), lead 28 (22 on phones), quote 28 (22 on phones) */
.site .card .t-body, .site .list li { font-size: calc(18px * var(--s)); line-height: 1.35; letter-spacing: 0.3px; }
@media (max-width: 1079px) { .t-lead, .t-quote, .pc-in blockquote, .note-quote { font-size: calc(24px * var(--s)); } }
@media (max-width: 599px) { .site .t-body { font-size: calc(19px * var(--s)); line-height: 1.3; } .t-lead, .t-quote, .pc-in blockquote, .note-quote { font-size: calc(22px * var(--s)); line-height: 1.3; } }
/* services: jump buttons, bigger and clearly clickable */

nav[aria-label="Jump to a service"] .chips { gap: calc(10px * var(--s)); justify-content: center; }
nav[aria-label="Jump to a service"] .chip { min-height: calc(56px * var(--s)); padding: 0 calc(20px * var(--s)); gap: calc(10px * var(--s)); font-size: 17px; line-height: 22px; font-weight: 700; background: var(--paper); transition: background .15s ease, color .15s ease; }
nav[aria-label="Jump to a service"] .chip::after { content: "\2193"; font-weight: 700; color: var(--hot-pink); transition: transform .15s ease, color .15s ease; }
nav[aria-label="Jump to a service"] .chip:hover { background: var(--oxblood); color: var(--paper); }
nav[aria-label="Jump to a service"] .chip:hover::after { color: var(--bubblegum); transform: translateY(2px); }
nav[aria-label="Jump to a service"] .chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 759px) { nav[aria-label="Jump to a service"] .chips { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { nav[aria-label="Jump to a service"] .chip, nav[aria-label="Jump to a service"] .chip::after { transition: none; } }
nav[aria-label="Jump to a service"] .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--s)); margin: 0; padding: 0; overflow: visible; }
nav[aria-label="Jump to a service"] .chip { justify-content: space-between; white-space: normal; }
@media (min-width: 760px) { nav[aria-label="Jump to a service"] .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12px * var(--s)); } }
@media (max-width: 759px) {
  nav[aria-label="Jump to a service"] .chips { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-20px * var(--s)); padding: 0 calc(20px * var(--s)) calc(4px * var(--s)); scroll-snap-type: x proximity; }
  nav[aria-label="Jump to a service"] .chip { flex: 0 0 auto; font-size: 16px; padding: 0 calc(14px * var(--s)); white-space: nowrap; scroll-snap-align: start; }
}
/* services: layout A, side by side, See more over the work */

.sa-item .frame { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* work: bigger, obviously clickable filters */

.fchips { display: flex; flex-wrap: nowrap; gap: calc(10px * var(--s)); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-20px * var(--s)); padding: 2px calc(20px * var(--s)) calc(8px * var(--s)); }
.fchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: calc(8px * var(--s)); min-height: calc(52px * var(--s)); padding: 0 calc(20px * var(--s)); border: 1px solid var(--oxblood); border-radius: 2px; background: var(--paper); color: var(--oxblood); font-family: var(--font-sans); font-size: 17px; line-height: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.fchip:hover { background: var(--oxblood); color: var(--paper); }
.fchip:active { opacity: 0.85; }
.fchip[aria-pressed="true"] { background: var(--hot-pink); border-color: var(--oxblood); color: var(--paper); }
.fchip[aria-pressed="true"]::before { content: "✓"; font-size: 15px; }
@media (min-width: 760px) {
  .fchips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0 0 calc(4px * var(--s)); }
}
@media (prefers-reduced-motion: reduce) { .fchip { transition: none; } .fchip:hover, .fchip:active { transform: none; } }

/* services: one block per section (title, tags, work, buttons) */

.sg { display: flex; flex-direction: column; gap: calc(16px * var(--s)); }
.sg-title { text-align: center; margin-bottom: calc(12px * var(--s)); }
.sg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--s)); margin: 0; padding: 0; list-style: none; }
.site .sg-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10px * var(--s)); }
.sg-tags .bbc-tag { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: calc(44px * var(--s)); padding: calc(8px * var(--s)) calc(16px * var(--s)); white-space: normal; font-size: calc(13px * var(--s)); line-height: calc(16px * var(--s)); background: var(--lilac); color: var(--oxblood); border-color: var(--oxblood); }
.sg-work .sa-item { position: relative; }
.sg-work .sa-item > img, .sg-work .sa-item > video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sg-work .sa-item.wide { grid-column: span 2; }
.sg-work .sa-item.wide > img, .sg-work .sa-item.wide > video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: top; }
.sg-act { margin-top: calc(8px * var(--s)); gap: calc(12px * var(--s)); }
.sg-btn { grid-column: 1 / -1; width: 100%; min-height: calc(56px * var(--s)); font-size: 15px; line-height: 18px; color: var(--oxblood); white-space: normal; text-align: center; }
.sg-see { background: var(--bubblegum); }
.sg-talk { background: var(--lilac); }
.sg-see:hover, .sg-talk:hover { background: var(--oxblood); color: var(--paper); }
@media (max-width: 759px) { .sg-work .sa-item.wide:only-child { grid-column: span 2; } .sg-work .sa-item.wide { grid-column: span 2; } .sg-work .sa-item.wide > img { position: static; aspect-ratio: 16 / 10; } }
@media (min-width: 760px) { .sg-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* services: five pieces across */
@media (min-width: 760px) { .sg-work { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 759px) { .sg-work .sa-item { grid-column: span 1 !important; } .sg-work .sa-item.wide { grid-column: span 2 !important; } }
/* services: repurposed content as its own section */

.rp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .rp-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-item { position: relative; }
.rp-item > img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rp-tag { position: absolute; top: calc(12px * var(--s)); left: calc(12px * var(--s)); background: var(--paper); color: var(--oxblood); border-color: var(--oxblood); }
.rp-tag.rp-after { background: var(--hot-pink); color: var(--paper); }
/* work samples never crop: the whole piece shows inside its frame */

.site .wgrid .frame { object-fit: contain; object-position: center !important; background: var(--paper); }
/* our work: masonry, every piece at its real shape (websites + emails crop to the top) */

.site .wgrid { display: block; columns: 2; column-gap: calc(16px * var(--s)); }
.site .wgrid > .fig { display: flex; width: 100%; break-inside: avoid; margin: 0 0 calc(24px * var(--s)); }
.site .wgrid .frame.nat { aspect-ratio: auto; height: auto; object-fit: cover; background: transparent; }
.site .wgrid .frame.crop { object-fit: cover; object-position: top !important; }
@media (min-width: 760px) { .site .wgrid { columns: 3; } }
@media (min-width: 1080px) { .site .wgrid { columns: 4; column-gap: calc(24px * var(--s)); } .site .wgrid > .fig { margin-bottom: calc(32px * var(--s)); } }
/* Work: filter groups (label above, chips centered) */

.fgroup { display: flex; flex-direction: column; align-items: center; gap: calc(16px * var(--s)); }
.fgroup-l { text-align: center; font-size: calc(20px * var(--s)); line-height: calc(24px * var(--s)); font-weight: 700; }
.fgroup .fchips { align-self: stretch; justify-content: flex-start; }
@media (min-width: 760px) { .fgroup .fchips { justify-content: center; } }
/* Work: view full size cue */

.lb-full { color: var(--lilac); font-family: var(--font-sans); font-size: calc(17px * var(--s)); font-weight: 600; text-decoration: underline; text-underline-offset: calc(3px * var(--s)); }
.lb-full:hover { color: var(--bubblegum); }
/* Work: Highlights + Everything on their own full-width row */

.fgroup .fchips-top { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--s)); align-self: stretch; margin: 0; padding: 0; overflow: visible; }
.fchips-top .fchip { justify-content: center; width: 100%; }

/* Work: every filter row stretches edge to edge */
@media (min-width: 760px) {
  .fgroup .fchips { align-self: stretch; }
  .fgroup .fchips > .fchip, .fgroup .fchips > * > .fchip { flex: 1 1 auto; justify-content: center; }
  .fgroup .fchips-top { width: 100%; align-self: stretch; }
}

/* Work: client filter in even rows (3 across on tablet, 5 across on desktop, last row centered) */
@media (min-width: 760px) {
  .fgroup .fchips-clients { justify-content: center; }
  .fgroup .fchips-clients > .fchip, .fgroup .fchips-clients > * > .fchip { flex: 0 0 calc((100% - calc(20px * var(--s))) / 3); padding: 0 calc(12px * var(--s)); white-space: normal; text-align: center; }
}
@media (min-width: 1080px) {
  .fgroup .fchips-clients > .fchip, .fgroup .fchips-clients > * > .fchip { flex-basis: calc((100% - calc(40px * var(--s))) / 5); }
}
/* Work: All clients alone on top, clients in even rows (3 across tablet, 6 across desktop) */

.fgroup .fchips-one { grid-template-columns: 1fr; }
@media (min-width: 1080px) {
  .fgroup .fchips-clients > .fchip, .fgroup .fchips-clients > * > .fchip { flex-basis: calc((100% - calc(50px * var(--s))) / 6); }
}
/* web row: 4 sites, 2x2 on phones */
@media (max-width: 759px) { .sg-work .sa-item.wide.ph1 { grid-column: span 1 !important; } .sg-work .sa-item.wide.ph1 > img { position: static; height: auto; aspect-ratio: 4 / 5; } }
/* paid row: vertical ads shown whole, no crop */

.sg-work.tall .sa-item > img, .sg-work.tall .sa-item > video { aspect-ratio: 9 / 16; object-fit: cover; }

/* phones: rows show an even number of pieces (no orphan on its own line) */
@media (max-width: 759px) { .sg-work .sa-item.ph-hide { display: none; } }

/* cards that size to their own content (Home: What we do) */
.grid.top { align-items: start; }

/* stats: equal cards, two across everywhere, numbers on one baseline */
.grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(16px * var(--s)); }
.stats .card-body { justify-content: space-between; gap: calc(20px * var(--s)); }
.stats .t-stat { display: flex; align-items: flex-end; height: 0.9em; }
.stats .t-label { font-size: calc(15px * var(--s)); line-height: calc(20px * var(--s)); }
.v-b .stats .t-stat.t-inf { font-size: calc(124px * var(--s)); position: relative; top: calc(-6px * var(--s)); }
@media (max-width: 599px) { .stats .card-body { padding: calc(18px * var(--s)); } .v-b .stats .t-stat { font-size: calc(64px * var(--s)); } .v-b .stats .t-stat.t-inf { font-size: calc(90px * var(--s)); top: calc(-4px * var(--s)); } .stats .t-label { font-size: calc(14px * var(--s)); line-height: calc(18px * var(--s)); } }
@media (min-width: 1080px) { .grid.stats { gap: calc(24px * var(--s)); } }

/* footer: tagline at link size, link columns pulled in */
.f-tag { margin: 0; max-width: calc(320px * var(--s)); font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); }
@media (min-width: 1080px) { .f-row { column-gap: calc(96px * var(--s)); } }

/* services: the tag row spans the full width of the work below it, any count */
.site .sg-tags { display: flex; flex-wrap: wrap; justify-content: stretch; gap: calc(10px * var(--s)); }
.site .sg-tags .bbc-tag { flex: 1 1 calc(50% - calc(5px * var(--s))); min-height: calc(52px * var(--s)); }
@media (min-width: 760px) { .site .sg-tags { flex-wrap: nowrap; gap: calc(16px * var(--s)); } .site .sg-tags .bbc-tag { flex: 1 1 0; } }

/* ---------- motion (all of it switches off when reduced motion is on) ---------- */
.logos-dup { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* scroll reveal: added by the nav script, so nothing hides if scripts don't run */
  .rv { opacity: 0; transform: translateY(calc(24px * var(--s))); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0ms); }
  .rv.in { opacity: 1; transform: none; }

  /* hover pops: buttons lift, work tiles lift and grow a touch */
  .site .bbc-btn { transition: transform .16s ease, background-color .15s ease, color .15s ease; }
  .site .bbc-btn:hover { transform: translateY(-2px); }
  .site .bbc-btn:active { transform: translateY(0); }
  .sg-work .sa-item > img, .sg-work .sa-item > video, .rp-item > img, .peek .media .frame, .wgrid .media .frame { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .sg-work .sa-item:hover > img, .sg-work .sa-item:hover > video, .rp-item:hover > img, .peek .fig:hover .frame, .wgrid .media:hover .frame { transform: translateY(calc(-4px * var(--s))) scale(1.02); }
  .sg-work .sa-item.wide:hover > img { transform: translateY(calc(-4px * var(--s))) scale(1.01); }

  /* logo strip: a slow marquee that pauses on hover */
  .logos-mq { width: 100%; overflow: hidden; border: 1px solid var(--oxblood); border-radius: 2px; background: var(--paper); }
  .logos-track { display: flex; width: max-content; animation: bbc-marquee 56s linear infinite; }
  .logos-mq .logos { display: flex; width: auto; border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .logos-mq .logos-dup { display: flex; }
  .logos-mq .logos li { flex: 0 0 calc(150px * var(--s)); height: calc(104px * var(--s)); margin: 0; border-right: 1px solid var(--oxblood); border-bottom: 0; }
  @media (max-width: 599px) { .logos-mq .logos li { flex-basis: calc(112px * var(--s)); height: calc(72px * var(--s)); } .logos-track { animation-duration: 41s; } }
}
@keyframes bbc-marquee { to { transform: translateX(calc(-100% / 3)); } }

/* logo strip: no grid, no boxes, edge to edge */
.site .logos-mq { width: 100vw; margin-left: calc(50% - 50vw); border: 0; border-radius: 0; background: transparent; overflow: hidden; }
.site .logos-mq .logos { border: 0; border-radius: 0; background: transparent; }
.site .logos-mq .logos li { border: 0 !important; margin: 0; }
.site .logos-mq .logos img { mix-blend-mode: multiply; }
@media (prefers-reduced-motion: no-preference) {
  .site .logos-mq .logos li { flex: 0 0 calc(200px * var(--s)); height: calc(96px * var(--s)); padding: 0 calc(20px * var(--s)); }
  @media (max-width: 599px) { .site .logos-mq .logos li { flex-basis: calc(140px * var(--s)); height: calc(72px * var(--s)); padding: 0 calc(14px * var(--s)); } }
}

/* hero: text block centered in its column, lines still left-aligned; nav logo sits on the same left edge */
@media (min-width: 1080px) {
  .site .bleed.hero .bleed-text { padding: calc(96px * var(--s)) calc(64px * var(--s)); align-items: center; }
  .v-b .nav-in { max-width: none; padding-left: calc(calc(64px * var(--s)) + (55% - calc(128px * var(--s)) - min(calc(600px * var(--s)), 55% - calc(128px * var(--s)))) / 2); padding-right: calc(calc(64px * var(--s)) + (55% - calc(128px * var(--s)) - min(calc(600px * var(--s)), 55% - calc(128px * var(--s)))) / 2); }
}

/* logo strip: bigger logos, tighter under "Already trusted by" */
.site .logos-mq .logos li { height: calc(84px * var(--s)); }
@media (prefers-reduced-motion: no-preference) {
  .site .logos-mq .logos li { flex: 0 0 calc(228px * var(--s)); height: calc(84px * var(--s)); padding: 0 calc(8px * var(--s)); }
  @media (max-width: 599px) { .site .logos-mq .logos li { flex-basis: calc(150px * var(--s)); height: calc(64px * var(--s)); padding: 0 calc(4px * var(--s)); } }
}

/* logo strip: the label is pinned on the left rail, logos scroll past it */
.logos-band { display: flex; flex-direction: column; border-top: 1px solid var(--oxblood); padding: calc(20px * var(--s)) 0 calc(12px * var(--s)); }
.lb-label { margin: 0 0 calc(4px * var(--s)); padding: 0 calc(20px * var(--s)); font-family: var(--font-sans); font-size: calc(14px * var(--s)); line-height: calc(18px * var(--s)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oxblood); }
section.logos-band .logos-mq { width: auto; margin: 0; min-width: 0; flex: 0 0 auto; }
@media (min-width: 760px) {
  .logos-band { flex-direction: row; align-items: stretch; padding: 0; }
  .lb-label { flex: 0 0 auto; display: flex; align-items: center; margin: 0; white-space: nowrap; padding: 0 calc(32px * var(--s)) 0 calc(40px * var(--s)); border-right: 1px solid var(--oxblood); background: var(--wash); position: relative; z-index: 1; }
  section.logos-band .logos-mq { flex: 1 1 0; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(64px * var(--s))); mask-image: linear-gradient(to right, transparent 0, #000 calc(64px * var(--s))); }
}
@media (min-width: 1080px) {
  .lb-label { padding-left: calc(calc(64px * var(--s)) + (55% - calc(128px * var(--s)) - min(calc(600px * var(--s)), 55% - calc(128px * var(--s)))) / 2); }
}
@media (prefers-reduced-motion: reduce) { .logos-band .logos-mq { -webkit-mask-image: none; mask-image: none; } .logos-band .logos { padding: 0 calc(16px * var(--s)); } }
@media (max-width: 759px) { .lb-label br { display: none; } }
@media (max-width: 759px) { .logos-band { padding-top: 0; } .lb-label { margin: 0 0 calc(8px * var(--s)); padding: calc(12px * var(--s)) calc(20px * var(--s)); } }

/* logo strip: label as a full-width bar on top, logos scroll underneath */
.logos-band { flex-direction: column; padding: 0; }
.lb-label { display: block; margin: 0; padding: calc(12px * var(--s)) calc(20px * var(--s)); text-align: center; white-space: normal; font-size: calc(16px * var(--s)); line-height: calc(20px * var(--s)); border-right: 0; border-bottom: 1px solid var(--oxblood); }
section.logos-band .logos-mq { flex: 0 0 auto; width: 100%; -webkit-mask-image: none; mask-image: none; }
@media (min-width: 760px) { .logos-band { flex-direction: column; padding: 0; } .lb-label { display: block; padding: calc(12px * var(--s)) calc(40px * var(--s)); border-right: 0; } }

/* logo strip: script line over oxblood logos, no bar */
.site .lb-label { background: transparent; border: 0; padding: calc(24px * var(--s)) calc(20px * var(--s)) 0; text-align: center; font-family: var(--font-script); font-weight: 400; font-size: calc(44px * var(--s)); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--oxblood); }
.site .logos-band { padding-bottom: calc(8px * var(--s)); }
.site .logos-mq .logos img { mix-blend-mode: normal; }
@media (max-width: 759px) { .site .lb-label { font-size: calc(36px * var(--s)); padding: calc(20px * var(--s)) calc(20px * var(--s)) 0; margin: 0; } }

/* phone dropdowns for filters + service jump nav */
.fdrop { display: none; }
@media (max-width: 759px) {
  .fdrop { display: block; position: relative; align-self: stretch; width: 100%; }
  nav[aria-label="Jump to a service"] .chips, .fgroup .fchips { display: none !important; }
  .fdrop-btn { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--s)); min-height: calc(56px * var(--s)); padding: 0 calc(20px * var(--s)); border: 1px solid var(--oxblood); border-radius: 2px; background: var(--paper); color: var(--oxblood); font-family: var(--font-sans); font-size: 18px; line-height: 22px; font-weight: 700; cursor: pointer; }
  .fdrop-btn::-webkit-details-marker { display: none; }
  .fdrop-btn::after { content: "\2193"; color: var(--hot-pink); font-weight: 700; transition: transform .15s ease; }
  .fdrop[open] .fdrop-btn::after { transform: rotate(180deg); }
  .fdrop-list { position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 20; max-height: 60vh; overflow-y: auto; border: 1px solid var(--oxblood); border-radius: 0 0 2px 2px; background: var(--paper); }
  .fdrop-opt { display: flex; align-items: center; gap: calc(8px * var(--s)); width: 100%; min-height: calc(52px * var(--s)); padding: 0 calc(20px * var(--s)); border: 0; border-bottom: 1px solid var(--oxblood); background: transparent; color: var(--oxblood); font-family: var(--font-sans); font-size: calc(17px * var(--s)); line-height: calc(22px * var(--s)); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
  .fdrop-opt:last-child { border-bottom: 0; }
  .fdrop-opt[aria-pressed="true"] { background: var(--hot-pink); color: var(--paper); }
  .fdrop-opt[aria-pressed="true"]::before { content: "\2713"; }
}
/* phone type tweaks: home testimonials */
@media (max-width: 599px) {
  .site .blush { font-size: calc(34px * var(--s)) !important; }
  .pc-co { font-size: calc(15px * var(--s)); line-height: calc(20px * var(--s)); }
}

/* desktop hero: short enough that the next section peeks in above the fold */
@media (min-width: 1080px) {
  .site .bleed.hero .bleed-text { padding-top: calc(56px * var(--s)); padding-bottom: calc(56px * var(--s)); }
  .site .bleed.hero { grid-template-columns: minmax(0, 1fr) auto; }
  .site .bleed.hero .bleed-img { aspect-ratio: 4 / 5; align-self: center; height: clamp(calc(520px * var(--s)), calc(100vh - calc(260px * var(--s))), calc(680px * var(--s))); width: auto; min-height: 0; }
}
@media (min-width: 1080px) {
  .v-b .nav-in { --hero-col: calc(100% - clamp(calc(520px * var(--s)), 100vh - calc(260px * var(--s)), calc(680px * var(--s))) * 0.8); padding-left: calc(calc(64px * var(--s)) + (var(--hero-col) - calc(128px * var(--s)) - min(calc(600px * var(--s)), var(--hero-col) - calc(128px * var(--s)))) / 2); padding-right: calc(calc(64px * var(--s)) + (var(--hero-col) - calc(128px * var(--s)) - min(calc(600px * var(--s)), var(--hero-col) - calc(128px * var(--s)))) / 2); }
}

/* hero image never crops top or bottom: it fits inside its column on the oxblood ground */
.site .bleed.hero .bleed-img img, .site .bleed.hero .bleed-img video { object-fit: contain; object-position: right center; }

/* tablet + resize polish */
@media (min-width: 600px) and (max-width: 899px) {
  .site .bleed.hero .bleed-img { width: min(100% - calc(80px * var(--s)), calc(460px * var(--s))); justify-self: center; margin: 0 auto calc(56px * var(--s)); }
}
@media (min-width: 900px) and (max-width: 1079px) {
  .site .bleed.hero { grid-template-columns: minmax(0, 1fr) auto; }
  .site .bleed.hero .bleed-img { aspect-ratio: 4 / 5; align-self: center; height: clamp(calc(440px * var(--s)), calc(100vh - calc(260px * var(--s))), calc(560px * var(--s))); width: auto; }
  .site .bleed.hero .bleed-text { padding: calc(56px * var(--s)) calc(40px * var(--s)); }
  .site .hero-h1 { font-size: clamp(calc(36px * var(--s)), 4.4vw, calc(48px * var(--s))); }
}
@media (min-width: 760px) and (max-width: 1079px) {
  .peek { grid-template-columns: 1.3fr 1fr 1fr; gap: calc(24px * var(--s)) calc(16px * var(--s)); }
  .peek .big { grid-column: auto; grid-row: span 2; }
  .peek .big .media { flex: 1 1 auto; min-height: 0; }
  .peek .big .frame { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 379px) { .stats .t-label { font-size: calc(12px * var(--s)); line-height: calc(16px * var(--s)); letter-spacing: 0.04em; overflow-wrap: anywhere; } }

/* hero image inset (not full bleed) on wider screens */
@media (min-width: 1080px) {
  .site .bleed.hero .bleed-img { height: clamp(calc(460px * var(--s)), calc(100vh - calc(320px * var(--s))), calc(600px * var(--s))); margin: calc(48px * var(--s)) max(calc(40px * var(--s)), calc((100vw - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))) calc(48px * var(--s)) 0; border-radius: 2px; overflow: hidden; }
  .v-b .nav-in { --hero-col: calc(100% - clamp(calc(460px * var(--s)), 100vh - calc(320px * var(--s)), calc(600px * var(--s))) * 0.8 - max(calc(40px * var(--s)), (100vw - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))); padding-left: calc(calc(64px * var(--s)) + (var(--hero-col) - calc(128px * var(--s)) - min(calc(600px * var(--s)), var(--hero-col) - calc(128px * var(--s)))) / 2); padding-right: max(calc(40px * var(--s)), calc((100vw - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))); }
}
@media (min-width: 900px) and (max-width: 1079px) {
  .site .bleed.hero .bleed-img { height: clamp(calc(400px * var(--s)), calc(100vh - calc(300px * var(--s))), calc(520px * var(--s))); margin: calc(40px * var(--s)) calc(40px * var(--s)) calc(40px * var(--s)) 0; border-radius: 2px; overflow: hidden; }
}

/* center the whole header (nav + hero) on the page rail: equal space left and right on big screens */
@media (min-width: 1080px) {
  .v-b .nav-in { padding-left: max(calc(40px * var(--s)), calc((100% - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))); padding-right: max(calc(40px * var(--s)), calc((100% - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))); }
  .site .bleed.hero .bleed-text { padding: calc(48px * var(--s)) calc(56px * var(--s)) calc(48px * var(--s)) max(calc(40px * var(--s)), calc((100vw - calc(1200px * var(--s))) / 2 + calc(40px * var(--s)))); align-items: flex-start; }
}

/* services: a small way back up after each section */
.to-top { align-self: center; display: inline-flex; align-items: center; gap: calc(6px * var(--s)); min-height: calc(44px * var(--s)); margin-top: calc(8px * var(--s)); padding: 0 calc(8px * var(--s)); font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: calc(4px * var(--s)); color: inherit; }
.sec .wrap > .to-top { display: flex; width: max-content; margin: calc(24px * var(--s)) auto 0; }
.to-top:hover { text-decoration-thickness: 2px; }

/* home hero: headline scales to the exact width of the text and buttons under it (no script, so no jump on load) */
.site .bleed.hero .bleed-text > .col { container-type: inline-size; }
.site .bleed.hero .hero-h1 { font-size: 10.5cqw; }
.site .bleed.hero .hero-h1 .hl { white-space: nowrap; }

/* hero: the paragraph sits exactly halfway between the headline and the buttons */
.site .bleed.hero .bleed-text { gap: 0; }
.site .bleed.hero .bleed-text > .t-lead { margin: calc(32px * var(--s)) 0 calc(35px * var(--s)) !important; } /* 3px extra below: the headline caps sit low in their line box, so this makes the visible gaps match */

/* logo strip: one image of all the logos, repeated forever as a background.
   A background always repeats, so every browser (Safari included) shows an endless line with no gap.
   The real logo list stays in the page, hidden visually, for screen readers and search. */
.site .logos-mq { position: relative; }
.site .logos-mq .logos-track { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; animation: none; }
.site .logos-strip { height: calc(84px * var(--s)); background-repeat: repeat-x; background-position: 0 50%; background-size: calc(2508px * var(--s)) calc(84px * var(--s)); } /* the image itself is set on the element in B_Home, so it loads in the design canvas too */
@media (max-width: 599px) { .site .logos-strip { height: calc(64px * var(--s)); background-size: calc(1650px * var(--s)) calc(55.26px * var(--s)); } }
@media (prefers-reduced-motion: no-preference) {
  .site .logos-strip { animation: bbc-strip 56s linear infinite; }
  @media (max-width: 599px) { .site .logos-strip { animation: bbc-strip-sm 41s linear infinite; } }
}
@keyframes bbc-strip { from { background-position-x: 0; } to { background-position-x: -2508px; } }
@keyframes bbc-strip-sm { from { background-position-x: 0; } to { background-position-x: -1650px; } }

/* work reel: big play button, shown only when the video isn't playing (phones in low power mode don't autoplay) */
.peek .media .bigplay { position: absolute; inset: 0; margin: auto; width: calc(72px * var(--s)); height: calc(72px * var(--s)); padding: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); border: 1px solid var(--oxblood); border-radius: 2px; cursor: pointer; z-index: 2; }
.peek .media .bigplay span { width: 0; height: 0; margin-left: calc(6px * var(--s)); border-left: calc(24px * var(--s)) solid var(--paper); border-top: calc(15px * var(--s)) solid transparent; border-bottom: calc(15px * var(--s)) solid transparent; }
.peek .media .bigplay:hover { background: var(--oxblood); }
.peek .media:has(.bigplay) .pause { display: none; } /* one clear control at a time */
.peek .media .bigplay:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* desktop scale: on desktop the whole site renders at 75% (85% on small laptops), like zooming the browser out.
   Every size above 2px is written as calc(Npx * var(--s)); phones and tablets keep --s at 1, so they don't change.
   1px lines and 2px corners stay exact. */
:root { --s: 1; }
@media (min-width: 1080px) { :root { --s: 0.85; } }
@media (min-width: 1280px) { :root { --s: 0.75; } }
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 1080px) { .site .logos-strip { animation-name: bbc-strip-85; } }
  @media (min-width: 1280px) { .site .logos-strip { animation-name: bbc-strip-75; } }
}
@keyframes bbc-strip-85 { from { background-position-x: 0; } to { background-position-x: -2131.8px; } }
@keyframes bbc-strip-75 { from { background-position-x: 0; } to { background-position-x: -1881px; } }


/* small buttons (outline, nav, filters, back to top, chips) keep their original text size on desktop; the big pink buttons scale with the page */

/* About, Our story: even out the line lengths so short words don't dangle (names are kept whole in the page) */
.site section[aria-labelledby="a-story"] .t-body { text-wrap: wrap; }
/* Our story: on wider screens the last sentence starts its own line, so it reads as one line instead of leaving a short orphan */
@media (min-width: 760px) { .site .story-end { display: block; } }
@media (min-width: 1080px) { .site section[aria-labelledby="a-story"] .bleed-text .measure { --s: 0.75; width: calc(572px * var(--s)); min-width: calc(572px * var(--s)); max-width: calc(572px * var(--s)); } } /* width picked so the story wraps cleanly: no lone words, last sentence on one line */

/* Work, phones: a clear button under the filters that jumps down to the results (and picking a filter glides down too) */
.fsee { display: none; }
@media (max-width: 759px) {
  .fsee { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; min-height: 52px; margin-top: 4px; padding: 0 20px; border: 1px solid var(--oxblood); border-radius: 2px; background: var(--hot-pink); color: var(--paper); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  .fsee .fsee-arrow { font-size: 20px; margin-left: 8px; }
}

/* blog, phones: keep the cover titles inside their frames, and the big THE BLOG title on the screen */
@media (max-width: 759px) {
  .site .cover .t-display { font-size: clamp(30px, 9.6vw, 40px) !important; max-width: 100% !important; }
  .site .cover .t-script { font-size: clamp(32px, 10vw, 44px) !important; }
  .site .blog-hero #b-title { width: auto !important; max-width: 100%; font-size: clamp(56px, 18vw, 80px) !important; line-height: 0.9 !important; }
}