/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Base line-height: the browser/normalize default of 1.15 is too tight for
   multi-line body copy. Elements with their own explicit line-height (headings,
   buttons, labels) already override this via higher-specificity class rules. */
body {
  line-height: 1.6;
}

/* ------------------------------------------------------------------------------------------
   Identity (Luke, 2026-10-12): Anton titles, Jost body (set in theme styles). Many Bricks classes
   carry their own heading weight and negative tracking from the Manrope era, so the display face
   is enforced here: Anton has one weight, and faux-bold or tight tracking ruins it.
   FAQ questions and small in-article headings stay in Jost for readability.
   ------------------------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.brxe-heading {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase;
  text-wrap: balance;
}
.faq-list .brxe-heading,
.prose h3,
.prose h4,
.post-prose h3,
.post-prose h4,
.post-prose h5,
.post-prose h6 {
  font-family: "Jost", "Futura", "Century Gothic", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}
.prose h3,
.prose h4 {
  margin: 1.75em 0 0.4em;
  color: var(--colour-ink);
  font-size: 1.2rem;
  line-height: 1.3;
}

/* ------------------------------------------------------------------------------------------
   Blog post text (.post-prose wraps the Post Content element in the Single Post template).
   Posts were migrated from Avada as plain HTML; these few rules are all the styling they need.
   ------------------------------------------------------------------------------------------ */
.post-hero-image img { width: 100%; height: auto; border-radius: var(--radius-m); }
.post-prose { font-size: var(--text-body); color: var(--colour-text); max-width: 46rem; }
.post-prose > * + * { margin-top: 1.1em; }
.post-prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; margin-top: 2.2em; text-wrap: balance; }
.post-prose h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.25; margin-top: 1.8em; text-wrap: balance; }
.post-prose h4 { font-size: 1.125rem; margin-top: 1.6em; }
.post-prose h2 + *, .post-prose h3 + *, .post-prose h4 + * { margin-top: 0.6em; }
.post-prose a { color: var(--colour-accent-deep); text-decoration: underline; text-underline-offset: 0.18em; }
.post-prose a:hover { color: var(--colour-accent-hover); }
.post-prose ul, .post-prose ol { padding-left: 1.3em; }
.post-prose li + li { margin-top: 0.4em; }
.post-prose img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }
.post-prose figure { margin-left: 0; margin-right: 0; }
.post-prose .post-video { position: relative; aspect-ratio: 16 / 9; background: var(--colour-ink); border-radius: var(--radius-s); overflow: hidden; }
.post-prose .post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Image grids: images that sat side by side on the old site. Same crop for every tile so rows line up. */
.post-prose .post-gallery, .post-prose .post-compare { display: grid; gap: var(--space-s); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-prose .post-gallery-2, .post-prose .post-gallery-4, .post-prose .post-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-prose .post-gallery figure { margin: 0; }
.post-prose .post-gallery img { aspect-ratio: 3 / 2; object-fit: cover; height: 100%; }
@media (max-width: 600px) {
  .post-prose .post-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.post-prose .post-answer { background: var(--colour-accent-soft); border-radius: var(--radius-s); padding: var(--space-m); }
.post-prose blockquote { margin-left: 0; margin-right: 0; padding-left: var(--space-m); font-size: 1.15em; font-style: italic; color: var(--colour-text-soft); }
.post-prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; display: block; overflow-x: auto; }
.post-prose th, .post-prose td { text-align: left; vertical-align: top; padding: 0.6em 0.75em; border-bottom: 1px solid var(--colour-line); }
.post-prose thead th { border-bottom: 2px solid var(--colour-text); }
.post-prose .post-button { display: inline-block; background: var(--colour-accent); color: #fff; text-decoration: none; padding: 0.7em 1.2em; border-radius: var(--radius-s); }
/* ------------------------------------------------------------------------------------------
   Case studies: extra films grid and photo strip ([case_films], [case_gallery] in functions.php).
   Portrait (9:16) social films, four across on desktop, two on phones.
   ------------------------------------------------------------------------------------------ */
.case-films {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.case-films__item {
  margin: 0;
}

.case-films__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--colour-ink, #0c0e12);
}

.case-films__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-films__title {
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--colour-text, #17191d);
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}

.case-gallery__item {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 0.75rem;
  overflow: hidden;
}

.case-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .case-films,
  .case-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------------------------------
   Round 2 (2026-10-13): from the mockup Luke approved, plus the strongest points from a
   ChatGPT review he shared (CTA graphic, compact reviews, results labels, thumbnail rows).
   Motion lives in turps.js; everything here rests still under prefers-reduced-motion.
   ------------------------------------------------------------------------------------------ */
:root { --turps-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* Hero titles rise in once on load */
.home-hero__title, .case-hero__title { animation: turps-rise 0.9s var(--turps-ease) both; }
@keyframes turps-rise { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }

/* Reel hero: slides fill the hero's media layer; tabs sit under the buttons */
.reel-media { position: absolute !important; inset: 0; }
.reel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.reel__slide.is-on { opacity: 1; }
.reel__slide video, .reel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__slide img { transform: scale(1.06); transition: transform 7s linear; }
.reel__slide.is-on img { transform: scale(1); }
.viewfinder { position: absolute; top: 1.25rem; right: var(--page-gutter); display: flex; gap: 0.75rem; align-items: center; font: 600 0.8rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.9); }
.rec { display: inline-flex; align-items: center; gap: 0.4rem; }
.rec::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff3b30; }
.has-reel:not(.is-paused) .viewfinder .rec::before { animation: turps-blink 1.6s steps(1) infinite; }
@keyframes turps-blink { 50% { opacity: 0.2; } }
.reel__bar { margin-top: var(--space-l); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) auto; gap: 1rem; align-items: start; width: 100%; max-width: 52rem; }
.reel__tab { appearance: none; background: none; border: 0; color: rgba(255, 255, 255, 0.6); font: inherit; font-size: 0.85rem; text-align: left; padding: 0.75rem 0 0; cursor: pointer; position: relative; line-height: 1.35; }
.reel__tab::before, .reel__tab::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; }
.reel__tab::before { right: 0; background: rgba(255, 255, 255, 0.25); }
.reel__tab::after { width: 0; background: var(--colour-accent); }
.reel__tab.is-on { color: #fff; }
.reel__tab.is-on::after { animation: turps-fill var(--dur, 6s) linear forwards; }
.is-paused .reel__tab.is-on::after { animation-play-state: paused; }
.reel__tab strong { display: block; font-weight: 600; }
@keyframes turps-fill { to { width: 100%; } }
.reel__pause { appearance: none; display: grid; place-items: center; padding: 0; flex-shrink: 0; align-self: center; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(12, 14, 18, 0.4); color: #fff; width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.reel__pause svg { display: block; width: 0.9rem; height: 0.9rem; }
.reel__pause:hover { border-color: #fff; background: rgba(12, 14, 18, 0.7); }
@media (max-width: 767px) { .reel__tab span { display: none; } .viewfinder .tc { display: none; } .reel__bar { gap: 0.6rem; } }

/* Case cards: preview video over the image */
.case-card__media { position: relative; display: block; overflow: hidden; width: 100%; flex-shrink: 0; }
.case-card__media .case-card__image { width: 100% !important; height: 100%; display: block; }
@media (min-width: 992px) { .home-featured-grid > .case-card:first-child .case-card__media { width: 60%; } }
.case-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.is-previewing .case-card__media video { opacity: 1; }
.case-card__hint { position: absolute; left: 0.75rem; bottom: 0.75rem; font: 600 0.72rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(12, 14, 18, 0.6); padding: 0.4rem 0.55rem; border-radius: 0.3rem; }
.case-card__hint .rec::before { background: var(--colour-accent); }

/* Client logos as a marquee (Luke: keep it, no pause button) */
.client-logos.is-marquee { display: block !important; overflow: hidden; width: 100%; }
.marquee__track { display: flex; width: max-content; animation: turps-marquee 38s linear infinite; }
.client-logos.is-marquee:hover .marquee__track, .client-proof:focus-within .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); }
.client-logos.is-marquee .client-logo { width: 9rem !important; max-width: none !important; min-width: 0 !important; height: 2.75rem; object-fit: contain; flex-shrink: 0; }
.marquee__set > :nth-child(3) { transform: scale(0.75); }
@keyframes turps-marquee { to { transform: translateX(-50%); } }

/* Reviews: several quotes at once, drag or arrows (replaces the tall one-at-a-time slider) */
.reviews-head.brxe-block { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; width: 100%; margin-bottom: 0; }
.reviews-row.brxe-block { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 21rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0; cursor: grab; width: 100%; scrollbar-width: thin; }
.reviews-row.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.reviews-row > .testimonial-card.brxe-block { scroll-snap-align: start; background: #fff; border-radius: 0.75rem; padding: 1.25rem 1.4rem; align-items: flex-start; justify-content: flex-start; row-gap: 0.75rem; }
body .reviews-row .testimonial-card__quote { font-size: 0.95rem; line-height: 1.55; max-width: none; }
.reviews-row .testimonial-card__meta { margin-top: auto; }

/* Service and sector pages: formats list, name and what it is */
body .home-services .service-card.brxe-block { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--space-l); align-items: center; }
.home-services .service-card .service-card__description { margin: 0; }
@media (max-width: 767px) { body .home-services .service-card.brxe-block { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; } }

/* Home "What we do" (Luke, 14 Oct): six things, two to a row, thumbnail beside each */
body .what-we-do.brxe-block { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); row-gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.what-we-do .service-card.brxe-block { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; column-gap: 1.25rem; row-gap: 0.4rem; min-height: 0; padding: var(--space-m) 0; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; text-decoration: none; color: inherit; }
.what-we-do .service-thumb { grid-row: 1 / -1; width: 7.5rem; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.4rem; }
.what-we-do .service-card__title.brxe-heading { font-size: 1.5rem; transition: color 0.2s ease; }
.what-we-do .service-card__description { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.what-we-do .service-card__link { margin: 0.35rem 0 0; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 0.3em; }
.what-we-do a.service-card:hover .service-card__title, .what-we-do a.service-card:hover .service-card__link { color: var(--colour-accent); }
.what-we-do__more.brxe-block { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 2rem; }
.what-we-do__more a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.3em; transition: color 0.2s ease; }
.what-we-do__more a:hover { color: var(--colour-accent); }
@media (max-width: 767px) {
  body .what-we-do.brxe-block { grid-template-columns: minmax(0, 1fr); }
  .what-we-do .service-card.brxe-block { grid-template-columns: 5rem minmax(0, 1fr); }
  .what-we-do .service-thumb { width: 5rem; margin-top: 0.3rem; }
}

/* Results: who it was for, what happened, where to see it */
.results-band__client { margin: 0; font: 600 0.72rem/1.3 var(--font-body, inherit); letter-spacing: 0.12em; text-transform: uppercase; color: var(--colour-text-soft); }
.results-band__label { font-size: 1.05rem !important; max-width: 26ch !important; }

/* Call sheet: how a job runs, as the document a crew works from */
.call-sheet-section { background: var(--colour-surface); }
.call-sheet__intro { margin: 0; max-width: 26rem; color: var(--colour-text-soft); }
.callsheet { background: #fff; border: 1px solid var(--colour-ink); border-radius: 0.25rem; font-size: 0.97rem; width: 100%; }
.callsheet__top { display: grid; grid-template-columns: auto 1fr 1fr; border-bottom: 1px solid var(--colour-ink); }
.callsheet__top > div { padding: 0.85rem 1rem; border-right: 1px solid var(--colour-line); }
.callsheet__top > div:last-child { border-right: 0; }
.callsheet__title { font-family: "Anton", Impact, sans-serif; font-size: 1.6rem; line-height: 1; text-transform: uppercase; background: var(--colour-ink); color: #fff; display: flex; align-items: center; }
.cs-label { display: block; font: 600 0.75rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--colour-text-soft); margin-bottom: 0.2rem; }
.callsheet table { width: 100%; border-collapse: collapse; margin: 0; }
.callsheet th { text-align: left; font: 600 0.75rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--colour-text-soft); padding: 0.75rem 1rem; border-bottom: 1px solid var(--colour-line); background: var(--colour-paper); }
.callsheet td { vertical-align: top; padding: 1rem; border-bottom: 1px solid var(--colour-line); }
.callsheet tr:last-child td { border-bottom: 0; }
.callsheet td.sc { font: 600 0.9rem/1.4 ui-monospace, Consolas, monospace; white-space: nowrap; color: var(--colour-accent-deep); }
.callsheet td.what strong { display: block; margin-bottom: 0.2rem; }
.callsheet td.who { font-weight: 600; white-space: nowrap; }
.callsheet__foot { border-top: 1px solid var(--colour-ink); padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.9rem; color: var(--colour-text-soft); }
@media (max-width: 767px) {
  .callsheet__top { grid-template-columns: 1fr; }
  .callsheet__top > div { border-right: 0; border-bottom: 1px solid var(--colour-line); }
  .callsheet thead { display: none; }
  .callsheet tr { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; padding: 1rem; border-bottom: 1px solid var(--colour-line); }
  .callsheet td { padding: 0; border: 0; }
  .callsheet td.what { grid-column: 1 / -1; }
}

/* About: the story beside a photo of the crew at work; values tighter to their heading */
.about-story__inner.brxe-container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: start; }
.about-story__aside { display: flex; flex-direction: column; gap: var(--space-m); }
.about-story__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.75rem; }
.about-story__quote { margin: 0; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.02; color: var(--colour-ink); }
.about-story__quote em { font-style: normal; color: var(--colour-accent-deep); }
.team-band__bio { margin: 0.5rem 0 0; color: var(--colour-text-soft); max-width: 36ch; }
@media (max-width: 991px) { .about-story__inner.brxe-container { grid-template-columns: 1fr; } .about-story__photo { aspect-ratio: 16 / 10; } }

/* Case study: "On the day" story beside the brief */
.case-onday { background: var(--colour-ink); color: #fff; border-radius: 0.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.75rem; margin-top: var(--space-m); width: 100%; }
.case-onday__title.brxe-heading { margin: 0; font-size: 2rem; color: var(--colour-accent); }
.case-onday p { color: rgba(255, 255, 255, 0.86); margin: 0 0 0.75em; }
.case-onday p:last-child { margin-bottom: 0; }

/* Our Work: sector buttons and the service dropdown */
.work-filters-row.brxe-block { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: var(--space-l); width: 100%; }
.work-filters-row .brxe-filter-select { width: auto !important; min-width: 15rem; }
.brxe-filter-radio[data-mode="button"] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.brxe-filter-radio[data-mode="button"] label { margin: 0; }
.brxe-filter-radio[data-mode="button"] .brx-option-text { display: inline-block; font-size: 0.88rem; font-weight: 600; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--colour-line); background: #fff; color: var(--colour-ink); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.brxe-filter-radio[data-mode="button"] label:hover .brx-option-text { border-color: var(--colour-ink); }
.brxe-filter-radio[data-mode="button"] .brx-option-active .brx-option-text,
.brxe-filter-radio[data-mode="button"] input:checked + .brx-option-text { background: var(--colour-ink); border-color: var(--colour-ink); color: #fff; }
.brxe-filter-radio[data-mode="button"] input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brxe-filter-radio[data-mode="button"] input:focus-visible + .brx-option-text { outline: 3px solid var(--colour-accent-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .home-hero__title, .case-hero__title, .reel__slide, .reel__slide img, .marquee__track, .reel__tab.is-on::after { animation: none !important; transition: none !important; }
  .reel__slide img { transform: none; }
}

/* ------------------------------------------------------------------------------------------
   Round 3 (2026-10-13, Luke's notes on round 2)
   ------------------------------------------------------------------------------------------ */

/* Results: client, figure, outcome and link each sit on the same line across the four columns */
.results-band__stats { grid-auto-rows: auto; }
.results-band__stat.brxe-block { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; row-gap: 0.6rem; }
.results-band__stat > * { align-self: start; }
.results-band__client { align-self: end !important; }

/* Reviews: equal cards, an opening quote mark, the name under a rule; quiet controls below */
.reviews-row.brxe-block { scrollbar-width: none; align-items: stretch; }
.reviews-row::-webkit-scrollbar { display: none; }
.reviews-row > .testimonial-card.brxe-block { height: auto; }
.reviews-row > .testimonial-card.brxe-block::before { content: "\201C"; display: block; height: 1.1rem; font-family: "Anton", Impact, sans-serif; font-size: 3rem; line-height: 1; color: var(--colour-accent-deep); }
.reviews-row .testimonial-card__meta.brxe-block { width: 100%; min-height: 5.25rem; justify-content: flex-start; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--colour-line); }
.reviews-row .testimonial-card__link { font-size: 0.85rem; margin-top: 0.5rem; }
.reviews-controls { display: flex; align-items: center; gap: 1.5rem; width: 100%; margin-top: 1rem; }
.reviews-progress { position: relative; flex: 1; height: 2px; background: var(--colour-line); overflow: hidden; }
.reviews-progress span { position: absolute; left: 0; top: 0; height: 100%; background: var(--colour-ink); transition: transform 0.2s ease; }
.reviews-buttons { display: flex; gap: 0.5rem; }
.reviews-buttons button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--colour-ink); border-radius: 0.4rem; background: transparent; color: var(--colour-ink); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
.reviews-buttons button:hover:not(:disabled) { background: var(--colour-ink); color: #fff; }
.reviews-buttons button:disabled { opacity: 0.3; cursor: default; }
.reviews-buttons svg { width: 1.1rem; height: 1.1rem; }

/* "See all our work" under the hand-picked projects */
.btn--outline.brxe-button { background: transparent; color: var(--colour-ink); border: 1.5px solid var(--colour-ink); }
.btn--outline.brxe-button:hover { background: var(--colour-ink); color: #fff; }

/* Card previews from a project's own film (Vimeo/YouTube background embed) */
/* 16:9 film filling a 16:10 card: full height, 111% wide, centred. */
.case-card__embed { position: absolute; top: 50%; left: 50%; width: 111.12%; height: 100%; transform: translate(-50%, -50%); border: 0; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } /* turps.js sizes it to cover the card */
.case-card__media { aspect-ratio: 16 / 10; }
.case-card__media .case-card__image { position: absolute; inset: 0; object-fit: cover; }
.is-previewing .case-card__embed { opacity: 1; }

/* Service and sector pages: no featured project, no empty column */
.ov-grid:not(:has(.case-card)) { grid-template-columns: minmax(0, 1fr) !important; }

/* About: the wider crew under the three of us */

/* Home CTA: copy and buttons on the left, the formats demo on the right */
.home-cta__actions.brxe-block { column-gap: 1.5rem !important; row-gap: 0.75rem; }
@media (min-width: 992px) {
  .home-cta__inner.brxe-container { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) !important; grid-template-rows: auto auto; column-gap: var(--space-xl) !important; row-gap: var(--space-m) !important; align-items: start; }
  .home-cta__inner > .brxe-shortcode { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .home-cta__actions.brxe-block { flex-direction: row !important; align-items: center !important; width: auto !important; }
}
@media (max-width: 991px) { .home-cta__inner > .brxe-shortcode { margin-top: var(--space-m); } }
.formats-demo { width: 100%; }
.formats-demo__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.5rem; background: var(--colour-ink); }
.formats-demo__stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Shutters start just off the stage and slide in (transform only) to leave a 1:1 or 9:16 window.
   translateX is a share of the shutter's own width (half the stage): 1:1 leaves 56.25% of the
   stage, so each covers 21.875% of the stage = 43.75% of itself; 9:16 leaves 31.64% (68.36%). */
.formats-demo__shutter { position: absolute; top: 0; bottom: 0; width: 50%; background: rgba(12, 14, 18, 0.62); transition: transform 0.7s var(--turps-ease); }
.formats-demo__shutter--l { right: 100%; border-right: 2px solid #fff; }
.formats-demo__shutter--r { left: 100%; border-left: 2px solid #fff; }
.formats-demo[data-current="1:1"] .formats-demo__shutter--l { transform: translateX(43.75%); }
.formats-demo[data-current="1:1"] .formats-demo__shutter--r { transform: translateX(-43.75%); }
.formats-demo[data-current="9:16"] .formats-demo__shutter--l { transform: translateX(68.36%); }
.formats-demo[data-current="9:16"] .formats-demo__shutter--r { transform: translateX(-68.36%); }
.formats-demo__tag { position: absolute; top: 0.5rem; left: calc(100% + 0.5rem); white-space: nowrap; padding: 0.2rem 0.45rem; border-radius: 0.25rem; background: var(--colour-ink); color: #fff; font: 600 0.75rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.06em; }
.formats-demo[data-current="16:9"] .formats-demo__tag::after { content: "16:9"; }
.formats-demo[data-current="1:1"] .formats-demo__tag::after { content: "1:1"; }
.formats-demo[data-current="9:16"] .formats-demo__tag::after { content: "9:16"; }
.formats-demo__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.formats-demo__controls button { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.6rem 0.75rem; border: 1.5px solid var(--colour-ink); border-radius: 0.4rem; background: transparent; color: var(--colour-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.formats-demo__controls button strong { font: 600 0.95rem/1 ui-monospace, Consolas, monospace; }
.formats-demo__controls button span { font-size: 0.78rem; line-height: 1.25; opacity: 0.8; }
.formats-demo__controls button[aria-pressed="true"], .formats-demo__controls button:hover { background: var(--colour-ink); color: #fff; }
.formats-demo__note { margin: 0.6rem 0 0; font-size: 0.85rem; color: rgba(12, 14, 18, 0.75); }
@media (prefers-reduced-motion: reduce) { .formats-demo__shutter { transition: none; } }

/* Green CTA bands: a graphic for each page (Luke: not the same one everywhere). Files in graphics/;
   formats.svg is the original round 2 graphic, kept and now used on case studies. */
@media (min-width: 992px) {
  .case-cta.brxe-section { background-repeat: no-repeat; background-position: right max(var(--page-gutter), calc((100% - var(--width-content)) / 2)) center; background-size: min(30vw, 26rem) auto; }
  .single-case_study .case-cta.brxe-section { background-image: url("graphics/formats.svg"); }
  .page-id-172 .case-cta.brxe-section { background-image: url("graphics/services.svg"); }
  .page-id-173 .case-cta.brxe-section { background-image: url("graphics/sectors.svg"); }
  .page-id-187 .case-cta.brxe-section { background-image: url("graphics/question.svg"); }
  .page-id-406 .case-cta.brxe-section { background-image: url("graphics/blog.svg"); }
  .page-id-174 .case-cta.brxe-section { background-image: url("graphics/corporate.svg"); }
  .page-id-175 .case-cta.brxe-section { background-image: url("graphics/commercial.svg"); }
  .page-id-176 .case-cta.brxe-section { background-image: url("graphics/documentary.svg"); }
  .page-id-177 .case-cta.brxe-section { background-image: url("graphics/training.svg"); }
  .page-id-178 .case-cta.brxe-section { background-image: url("graphics/animation.svg"); }
  .page-id-179 .case-cta.brxe-section { background-image: url("graphics/white-label.svg"); }
  .page-id-180 .case-cta.brxe-section { background-image: url("graphics/tender.svg"); }
  .page-id-227 .case-cta.brxe-section { background-image: url("graphics/product.svg"); }
  .page-id-228 .case-cta.brxe-section { background-image: url("graphics/brand.svg"); }
  .page-id-181 .case-cta.brxe-section { background-image: url("graphics/manufacturing.svg"); }
  .page-id-182 .case-cta.brxe-section { background-image: url("graphics/healthcare.svg"); }
  .page-id-183 .case-cta.brxe-section { background-image: url("graphics/charity.svg"); }
  .page-id-184 .case-cta.brxe-section { background-image: url("graphics/arts.svg"); }
  .page-id-185 .case-cta.brxe-section { background-image: url("graphics/educational.svg"); }
  .page-id-186 .case-cta.brxe-section { position: relative; }
  .page-id-186 .case-cta.brxe-section::after { content: ""; position: absolute; top: 50%; right: max(var(--page-gutter), calc((100% - var(--width-content)) / 2)); width: min(14vw, 11rem); aspect-ratio: 1074 / 1251; transform: translateY(-50%); background: url("/wp-content/uploads/2026/08/Turps-Film-Logo-White-Square.png") center / contain no-repeat; filter: invert(1); pointer-events: none; }
}

/* ------------------------------------------------------------------------------------------
   Round 4 (2026-10-14, Luke's notes on the home page). Section padding is the Bricks variable
   --section-space, tightened site-wide to clamp(4rem, 6.5vw, 6.5rem).
   ------------------------------------------------------------------------------------------ */

/* Why band: still the loudest line after the hero, no longer twice the size of the H1 */
body .why-band__title.brxe-heading { font-size: clamp(3.25rem, 6.5vw, 6rem); }
body .why-band__points { margin-top: var(--space-l); }

/* Results lead straight into the reviews on the same paper: one gap, not two */
.results-band.brxe-section + .testimonial-wall.brxe-section { padding-top: 0; }
.testimonial-wall__inner.brxe-container { row-gap: var(--space-m); }

/* Instagram strip under the blog: intro on the left, six squares on the right */
.insta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--space-l); align-items: center; width: 100%; }
.insta__title { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
.insta__lead { margin: 0.75rem 0 1.25rem; color: var(--colour-text-soft); max-width: 24rem; }
.insta__follow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1.5px solid var(--colour-ink); border-radius: 0.4rem; color: var(--colour-ink); font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.insta__follow:hover { background: var(--colour-ink); color: #fff; }
.insta__follow svg { width: 1.2rem; height: 1.2rem; }
.insta__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.insta__grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.4rem; transition: opacity 0.2s ease; }
.insta__grid:hover img { opacity: 0.85; }
.insta__grid:focus-visible { outline: 3px solid var(--colour-accent-deep); outline-offset: 0.25rem; }
@media (max-width: 991px) {
  .insta { grid-template-columns: minmax(0, 1fr); }
  .insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Reviews run straight into the blog on the same paper (CTA now closes the page, Luke 14 Oct) */
.testimonial-wall.brxe-section + .featured-work.brxe-section { padding-top: 0; }
.insta__feed #sb_instagram { padding: 0 !important; }
/* New service pages (round 4): their own CTA graphics */
@media (min-width: 992px) {
  .page-id-555 .case-cta.brxe-section { background-image: url("graphics/editing.svg"); }
  .page-id-556 .case-cta.brxe-section { background-image: url("graphics/drone.svg"); }
  .page-id-557 .case-cta.brxe-section { background-image: url("graphics/photography.svg"); }
}
/* Links inside body copy look like links */
.prose.brxe-text a:not(.brxe-button) { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--colour-accent-deep); text-decoration-thickness: 2px; text-underline-offset: 0.25em; transition: color 0.2s ease; }
.prose.brxe-text a:not(.brxe-button):hover { color: var(--colour-accent-deep); }

/* ------------------------------------------------------------------------------------------
   Pre-launch audit (2026-10-17): touch targets (WCAG 2.5.8; 44px for the phone menu button)
   ------------------------------------------------------------------------------------------ */
.bricks-mobile-menu-toggle { box-sizing: content-box; padding: 14px 8px; margin: -14px -8px; }
#brx-header .brxe-nav-menu .bricks-nav-menu > li > a { padding-block: 0.5rem; }
#brx-footer .footer-link { display: inline-block; padding-block: 0.2rem; }
/* Blog posts: lines were ~100 characters at 736px; ~80 reads more easily */
.post-prose.brxe-post-content { max-width: 40rem; }

/* Phone menu: the open panel was transparent, so the links sat on top of the hero text */
.site-nav .bricks-mobile-menu-wrapper { background: var(--colour-ink); }
.site-nav .bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a { color: #fff; }

/* Cookie banner (2026-10-28): dark ink panel like the header and hero, Anton title, square
   buttons as on the rest of the site. Accept and Deny are the same size and both solid, so saying
   no is as easy as saying yes (ICO guidance). Complianz's own banner CSS sets its variables on
   :root, so ours sit on the banner itself, which wins. */
body .cmplz-cookiebanner, body #cmplz-manage-consent {
  --cmplz_banner_width: 440px;
  --cmplz_banner_background_color: var(--colour-ink-soft);
  --cmplz_banner_border_color: rgba(255, 255, 255, 0.12);
  --cmplz_banner_border_width: 1px;
  --cmplz_banner_border_radius: 0;
  --cmplz_text_color: rgba(255, 255, 255, 0.8);
  --cmplz_hyperlink_color: #ffffff;
  --cmplz_text_font_size: 14px;
  --cmplz_link_font_size: 13px;
  --cmplz_title_font_size: 24px;
  --cmplz_category_body_font_size: 13px;
  --cmplz_category_header_title_font_size: 14px;
  --cmplz_category_header_always_active_color: var(--colour-accent);
  --cmplz_button_font_size: 14px;
  --cmplz_button_border_radius: 0;
  --cmplz_button_accept_background_color: var(--colour-accent);
  --cmplz_button_accept_border_color: var(--colour-accent);
  --cmplz_button_accept_text_color: var(--colour-ink);
  --cmplz_button_deny_background_color: #ffffff;
  --cmplz_button_deny_border_color: #ffffff;
  --cmplz_button_deny_text_color: var(--colour-ink);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: rgba(255, 255, 255, 0.35);
  --cmplz_button_settings_text_color: #ffffff;
  --cmplz_slider_active_color: var(--colour-accent);
  --cmplz_slider_inactive_color: #5a5f68;
  --cmplz_slider_bullet_color: #ffffff;
}
body .cmplz-cookiebanner { font-family: "Jost", "Futura", "Century Gothic", sans-serif; border-top: 3px solid var(--colour-accent); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
body .cmplz-cookiebanner .cmplz-title { font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; color: #ffffff; }
body .cmplz-cookiebanner .cmplz-close { color: #ffffff; }
body .cmplz-cookiebanner .cmplz-divider { background: rgba(255, 255, 255, 0.1); }
body .cmplz-cookiebanner .cmplz-message { line-height: 1.55; }
body .cmplz-cookiebanner .cmplz-btn { font-family: inherit; font-weight: 700; min-height: 44px; border-width: 1.5px; transition: background-color 0.2s ease, border-color 0.2s ease; }
body .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background-color: var(--colour-accent-hover); border-color: var(--colour-accent-hover); }
body .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover { background-color: var(--colour-paper); border-color: var(--colour-paper); }
body .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover, body .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { border-color: #ffffff; }
body .cmplz-cookiebanner .cmplz-btn:focus-visible, body .cmplz-cookiebanner .cmplz-close:focus-visible, body .cmplz-cookiebanner .cmplz-link:focus-visible { outline: 2px solid var(--colour-accent); outline-offset: 2px; }
body .cmplz-cookiebanner .cmplz-links .cmplz-link { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 0.2em; }
body .cmplz-cookiebanner .cmplz-links .cmplz-link:hover { color: #ffffff; }
/* Preferences panel: selectors as long as Complianz's own, or its light-grey rows win. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(255, 255, 255, 0.06); }
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title,
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { color: #ffffff; }
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { color: rgba(255, 255, 255, 0.72); }
body .cmplz-cookiebanner .cmplz-category-toggle svg { fill: currentColor; }
body #cmplz-manage-consent .cmplz-manage-consent { font-family: "Jost", "Futura", "Century Gothic", sans-serif; font-weight: 600; color: #ffffff; border-top: 2px solid var(--colour-accent); }
.site-nav .bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a { display: block; padding: 0.45rem 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 2.25rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.site-nav .bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a:hover, .site-nav .bricks-mobile-menu-wrapper .bricks-mobile-menu > li.current-menu-item > a { color: var(--colour-accent); }

/* Home hero on phones (Luke, 28 Oct: the text covered all of the video). Copy sits at the foot
   of a full-screen hero, the title drops to 36px (3-4 lines, not 5), and the dark overlay only
   sits behind the text so the top of the reel shows clearly. Desktop is unchanged. Selectors
   match Bricks' own (.home-hero.brxe-section etc., printed after this file); the title needs
   !important because Bricks sizes it on phones with an element-ID rule. */
@media (max-width: 767px) {
  body .home-hero.brxe-section { min-height: calc(100svh - 5rem); justify-content: flex-end; padding-top: 2rem; padding-bottom: 1.5rem; }
  body .home-hero.brxe-section::before { background-image: linear-gradient(0deg, rgba(12, 14, 18, 0.94) 0%, rgba(12, 14, 18, 0.8) 42%, rgba(12, 14, 18, 0.15) 72%, rgba(12, 14, 18, 0.05) 100%); }
  body .home-hero__inner.brxe-container { row-gap: 1.25rem; }
  body .home-hero__copy.brxe-block { row-gap: 1rem; }
  body .home-hero__title.brxe-heading { font-size: 2.25rem !important; line-height: 0.98; }
  body .home-hero__lead.brxe-text-basic { font-size: 1rem; line-height: 1.5; }
}

/* About: team photos (black and white, 4:5, same treatment for all three) */
.team-band__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.75rem; margin-bottom: var(--space-m); }

/* ------------------------------------------------------------------------------------------
   UX check fixes (2026-10-22, Luke OK'd; findings in TASKS.md)
   ------------------------------------------------------------------------------------------ */
/* "Trusted by" label was 4.31:1 on white; this is ~5.6:1 */
body .client-proof__label.brxe-text-basic { color: rgba(10, 13, 17, 0.62); }
/* Text links get a taller tap area without moving anything (padding cancelled by margin).
   "body" because Bricks prints its global-class CSS after this file. */
body .hero-link.brxe-text-link, body .section-link.brxe-text-link, body .testimonial-card__link.brxe-text-link, body .contact-detail__link.brxe-text-link { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
body .cta-cost-line a { display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; }
/* Instagram strip: Smash Balloon's own CSS removes the focus outline */
.insta__feed #sb_instagram a:focus-visible { outline: 3px solid var(--colour-accent-deep); outline-offset: 2px; }
.insta__feed #sb_instagram .sbi_photo img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 767px) {
  /* 44px phone targets: header call button, reel tabs, footer links */
  #brx-header .header-phone.brxe-text-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .reel__tab { padding-bottom: 0.6rem; min-height: 44px; }
  #brx-footer .footer-link { padding-block: 0.65rem; }
  /* Under 16px, iPhones zoom the page when the field is tapped */
  .brxe-filter-select, .brxe-filter-search { font-size: 1rem !important; }
}

/* About: "The crew we call on" (Luke, 26 Oct): the freelancers as names with roles, not a footnote */
.crew-band.brxe-text { width: 100%; margin-top: var(--space-xl, 4rem); padding-top: var(--space-l, 2.5rem); border-top: 1px solid var(--colour-line); }
.crew-band__title { margin: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; color: var(--colour-ink); }
.crew-band__lead { margin: 0.75rem 0 1.5rem; color: var(--colour-text-soft); max-width: 52ch; }
.crew-band__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--space-m, 1.5rem); border-top: 1px solid var(--colour-line); }
.crew-band__person { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--colour-line); }
.crew-band__name { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 1.6rem; line-height: 1; color: var(--colour-ink); }
.crew-band__role { color: var(--colour-text); font-weight: 600; font-size: 0.95rem; }
@media (max-width: 991px) { .crew-band__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .crew-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }