/* =====================================================================
   Blue Cherry Media — site stylesheet
   Self-contained. Design tokens mirror the Blue Cherry Media design system.
   Mobile-first, no frameworks.
   ===================================================================== */

@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/funnel-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/funnel-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --bc-navy: #002E7E;
  --bc-bright-blue: #1E5BC6;
  --bc-cherry: #E63946;

  /* Neutrals */
  --bc-ink: #0A1733;
  --bc-ink-soft: #2B3654;
  --bc-mute: #5B6781;
  --bc-white: #FFFFFF;
  --bc-soft-surface: #F7F8FA;
  --bc-pale-blue: #D9E6FA;
  --bc-fine-border: #DDE3EF;

  /* Extended */
  --bc-navy-900: #001a4a;
  --bc-navy-700: #002463;
  --bc-blue-100: #EAF1FD;
  --bc-blue-50:  #F2F6FE;
  --bc-cherry-700: #B8232F;
  --bc-cherry-50:  #FCE9EB;

  /* Semantic */
  --text-strong: var(--bc-ink);
  --text-body:   var(--bc-ink-soft);
  --text-mute:   var(--bc-mute);
  --text-on-dark: var(--bc-white);
  --text-link:   var(--bc-bright-blue);
  --surface-page: var(--bc-white);
  --border-fine: var(--bc-fine-border);

  /* Gradients */
  --gradient-dark: linear-gradient(135deg, var(--bc-navy-900) 0%, var(--bc-navy) 55%, #0a3d8f 100%);
  --gradient-dark-radial: radial-gradient(ellipse at 68% 40%, #1a4aa8 0%, var(--bc-navy) 45%, var(--bc-navy-900) 100%);
  --gradient-blue-wash: linear-gradient(135deg, var(--bc-blue-50) 0%, var(--bc-blue-100) 100%);
  /* Type */
  --font-sans: "Funnel Sans", "Segoe UI", Arial, sans-serif;
  --font-heading: "Hanken Grotesk", "Arial Nova", Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --type-display: clamp(44px, 6.4vw, 80px);
  --type-h1: clamp(40px, 6vw, 72px);
  --type-h2: clamp(32px, 4vw, 52px);
  --type-h3: clamp(23px, 3vw, 32px);
  --type-h4: clamp(19px, 2vw, 23px);
  --type-lead: clamp(18px, 1.5vw, 22px);
  --type-body: 17px;
  --type-small: 13px;
  --type-eyebrow: 12px;
  --lh-display: 0.98;
  --lh-tight: 1.08;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --ls-display: -0.02em;
  --ls-tight: -0.015em;
  --ls-eyebrow: 0.16em;

  /* Spacing */
  --pad-page: clamp(20px, 5vw, 76px);
  --pad-section: clamp(45px, 7vw, 112px);
  --pad-head-row: clamp(29px, 4vh, 38px);
  --w-content: clamp(1240px, 75vw, 1600px);
  --w-narrow: 720px;
  --w-wide: 1440px;

  /* Reusable mobile roles; pages opt in within their own mobile rules. */
  --mobile-space-compact: 48px;
  --mobile-space-section: 56px;
  --mobile-space-feature: 72px;
  --mobile-space-heading: 32px;
  --mobile-space-content: 24px;
  --mobile-space-card: 16px;
  --mobile-type-heading: calc(clamp(34px, 5vw, 38px) * var(--access-text-scale, 1));
  --mobile-type-card-title: calc(24px * var(--access-text-scale, 1));
  --mobile-type-body: calc(17px * var(--access-text-scale, 1));
  --mobile-type-compact-body: calc(16px * var(--access-text-scale, 1));

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(10,23,51,0.04), 0 8px 24px -16px rgba(10,23,51,0.10);
  --shadow-lift: 0 2px 4px rgba(10,23,51,0.05), 0 18px 40px -24px rgba(10,23,51,0.18);
  --ring-focus: 0 0 0 3px rgba(30,91,198,0.30);

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Homepage sections respond to available height as well as viewport width. */
body.home-page { --pad-section: clamp(54px, 8vw, 85px); }
@media (min-width: 860px) {
  body.home-page { --pad-section: clamp(58px, 8vh, 92px); }
  @supports (height: 1svh) {
    body.home-page { --pad-section: clamp(58px, 8svh, 92px); }
  }
}
@media (min-width: 900px) and (max-height: 850px) {
  body.home-page { --pad-section: clamp(50px, 7vh, 62px); }
  @supports (height: 1svh) {
    body.home-page { --pad-section: clamp(50px, 7svh, 62px); }
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  margin: 0;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--type-h1); line-height: 1; font-weight: 700; letter-spacing: var(--ls-display); }
h2 { font-size: var(--type-h2); line-height: 1.05; font-weight: 700; }
h3 { font-size: var(--type-h3); line-height: var(--lh-snug); font-weight: 600; }
h4 { font-size: var(--type-h4); line-height: var(--lh-snug); font-weight: 600; }
/* Let prose fill its measure naturally; reserve balanced wrapping for headings. */
p {
  margin: 0;
  text-wrap: wrap;
  overflow-wrap: break-word;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul { margin: 0; padding: 0; }
::selection { background: var(--bc-pale-blue); color: var(--bc-navy); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--bc-navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}
.wrap--narrow { max-width: var(--w-narrow); }
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(32px, 5vw, 70px); }

.surface-white { background: var(--surface-page); }
.surface-quiet { background: var(--bc-soft-surface); }
.surface-warm  { background: var(--gradient-blue-wash); }
.surface-dark { background: var(--gradient-dark); color: var(--text-on-dark); }
.surface-dark-radial { background: var(--gradient-dark-radial); color: var(--text-on-dark); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4,
.surface-dark-radial h1, .surface-dark-radial h2, .surface-dark-radial h3, .surface-dark-radial h4 { color: #fff; }

.eyebrow {
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: 600;
  color: var(--bc-bright-blue);
  margin: 0 0 18px;
}
.surface-dark .eyebrow, .surface-dark-radial .eyebrow { color: var(--bc-pale-blue); }

.section-heading { max-width: 760px; }
.section-heading h2 { margin-bottom: 26px; }
.section-heading p { font-size: var(--type-lead); color: var(--text-body); }
.section-heading > .section-title-wrap + p { margin-top: var(--pad-head-row); }
.surface-dark .section-heading p, .surface-dark-radial .section-heading p { color: rgba(255,255,255,0.8); }

.lead { font-size: var(--type-lead); line-height: 1.55; color: var(--text-body); }

/* ---------- Buttons (mirrors design-system Button) ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn > span, .btn > .btn__arrow { position: relative; z-index: 2; }
.btn--sm { padding: 10px 18px; font-size: 14px; gap: 8px; }
.btn--lg { padding: 18px 32px; font-size: 16px; gap: 12px; }
@media (max-width: 767px) {
  .btn--lg { padding-inline: clamp(18px, 5vw, 24px); }
}

/* glint sweep */
.btn:not(.btn--tertiary)::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
}
.btn:not(.btn--tertiary):hover::before { animation: bc-glint 0.55s var(--ease-soft) forwards; }
@keyframes bc-glint {
  from { transform: translateX(-130%) skewX(-12deg); }
  to   { transform: translateX(230%) skewX(-12deg); }
}

/* primary — cherry gradient + radial specular + inset ring */
.btn--primary {
  background: linear-gradient(130deg, var(--bc-cherry) 0%, var(--bc-cherry-700) 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 1px 4px rgba(230,57,70,0.22);
}
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 72% 28%, rgba(255,255,255,0.16) 0%, transparent 62%);
  pointer-events: none; z-index: 1;
}
.btn--primary:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24), 0 6px 20px rgba(230,57,70,0.38);
  transform: translateY(-1px);
  color: #fff;
}

/* secondary */
.btn--secondary {
  background: #fff;
  color: var(--bc-ink);
  border-color: var(--border-fine);
}
.btn--secondary:hover {
  background: var(--bc-blue-50);
  border-color: rgba(30,91,198,0.32);
  box-shadow: 0 2px 12px rgba(30,91,198,0.1);
  color: var(--bc-ink);
}

/* dark — white→pale-blue gradient w/ navy inset ring */
.btn--dark {
  background: linear-gradient(135deg, #ffffff 0%, #e4eefc 100%);
  color: var(--bc-navy);
  box-shadow: inset 0 0 0 1.5px rgba(30,91,198,0.15);
}
.btn--dark::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 72% 28%, rgba(255,255,255,0.5) 0%, transparent 62%);
  pointer-events: none; z-index: 1;
}
.btn--dark:hover {
  box-shadow: inset 0 0 0 1.5px rgba(30,91,198,0.32), 0 4px 14px rgba(0,46,126,0.2);
  transform: translateY(-1px);
  color: var(--bc-navy);
}

/* tertiary — underlined text link with arrow */
.btn--tertiary {
  background: transparent;
  color: var(--bc-bright-blue);
  border: none;
  border-radius: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
.btn--tertiary:hover { color: var(--bc-navy); }
.surface-dark .btn--tertiary, .surface-dark-radial .btn--tertiary { color: var(--bc-pale-blue); }

.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ---------- Cards (mirrors design-system Card) ---------- */
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text-body);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--border-fine);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card > * { position: relative; z-index: 2; }
.card h3 { color: var(--text-strong); font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.card p { font-size: 15.5px; line-height: 1.55; color: var(--text-body); }

.card--soft { background: linear-gradient(150deg, var(--bc-soft-surface) 0%, var(--bc-blue-50) 100%); box-shadow: inset 0 0 0 1px rgba(30,91,198,0.08); }
.card--warm { background: linear-gradient(150deg, var(--bc-blue-50) 0%, var(--bc-blue-100) 100%); box-shadow: inset 0 0 0 1px rgba(30,91,198,0.10); }
.card--navy { background: var(--gradient-dark); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.card--navy h3 { color: #fff; }
.card--navy p { color: rgba(255,255,255,0.78); }
.card--navy::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 78% 18%, rgba(255,255,255,0.12) 0%, transparent 55%);
  pointer-events: none; z-index: 1;
}

/* interactive hover — glint + lift */
.card--interactive { cursor: pointer; }
.card--interactive::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  pointer-events: none; z-index: 1;
}
.card--interactive:hover::before { animation: bc-card-glint 0.65s var(--ease-soft) forwards; }
@keyframes bc-card-glint {
  from { transform: translateX(-130%) skewX(-12deg); }
  to   { transform: translateX(230%) skewX(-12deg); }
}
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(30,91,198,0.22), 0 18px 40px -20px rgba(10,23,51,0.18);
}
.card--soft.card--interactive:hover { box-shadow: inset 0 0 0 1px rgba(30,91,198,0.24), 0 18px 40px -20px rgba(10,23,51,0.18); }
.card--warm.card--interactive:hover { box-shadow: inset 0 0 0 1px rgba(30,91,198,0.22), 0 18px 40px -20px rgba(10,23,51,0.18); }

.card__eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600; color: var(--bc-bright-blue);
}
.card__num {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 500;
  color: var(--bc-bright-blue);
  line-height: 1;
}
.card__foot { margin-top: 8px; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card-grid:has(.service-card) { gap: 40px 80px; }
@media (min-width: 720px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid--4:has(.service-card) { gap: 40px clamp(20px, 2vw, 28px); }
}

/* ---------- Services page cards ---------- */
.service-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 4 / 5.7;
  overflow: hidden;
  border: 1px solid rgba(0,46,126,0.16);
  border-radius: var(--radius-lg);
  isolation: isolate;
  color: var(--bc-white);
  background: var(--bc-navy);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.service-card,
.service-card:hover { text-decoration: none; }
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.07) 0%,
    rgba(0,0,0,0.10) 38%,
    rgba(0,0,0,0.50) 62%,
    rgba(0,0,0,0.88) 100%
  );
  pointer-events: none;
  transition: background var(--dur-base) var(--ease-out);
}
.service-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.9;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.service-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  padding: 20px clamp(20px, 3vw, 30px) 56px;
  text-shadow: 0 0 1px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.service-card h3 {
  margin: 0 0 16px;
  color: var(--bc-white);
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.service-card p {
  margin: 0;
  max-width: 30ch;
  min-height: 4.5em;
  color: rgba(255,255,255,0.94);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 879px) {
  .service-card p { max-width: none; }
}
.service-card__cta {
  align-self: stretch;
}
.service-card:hover {
  box-shadow: 0 20px 42px -24px rgba(10,23,51,0.42);
  transform: translateY(-3px);
}
.service-card:hover::after {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.02) 0%,
    rgba(0,0,0,0.03) 46%,
    rgba(0,0,0,0.52) 62%,
    rgba(0,0,0,0.88) 100%
  );
}
.service-card:hover .service-card__image {
  opacity: 1;
  transform: scale(1.035);
}
.service-card--brand-launch .service-card__image { object-position: center 20%; }

/* ---------- "See all services" CTA tile ---------- */
.service-card--see-all {
  justify-content: center;
  align-items: center;
  background: var(--gradient-dark);
  text-decoration: none;
}
.service-card--see-all::after { display: block; }
.service-card--see-all .service-card__content {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 24px;
}
.service-card__see-all-label {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bc-white);
}
.service-card:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__image { transition: none; }
  .service-card:hover { transform: none; }
}

/* ---------- Expanded services index ---------- */
.services-detail-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 112px);
}

.service-detail-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 7vw, 96px);
  max-width: 1320px;
  margin-inline: auto;
}

.service-detail {
  --service-shift: 0px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "content"
    "media";
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  min-width: 0;
  padding-top: clamp(32px, 3.5vw, 52px);
  border-top: 1px solid rgba(30,91,198,0.18);
  opacity: 1;
  transform: translateY(var(--service-shift));
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}

.service-detail:first-child {
  padding-top: 0;
  border-top: 0;
}

.service-detail:last-child { padding-bottom: 0; }

.service-detail::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  left: -12%;
  width: clamp(160px, 22vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bc-pale-blue);
  opacity: 0.44;
  transform: translate(-22%, -50%) scale(0.88);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.service-detail:hover::before {
  opacity: 0.68;
  transform: translate(-16%, -50%) scale(1);
}

.service-detail:nth-child(even)::before {
  right: -12%;
  left: auto;
  transform: translate(22%, -50%) scale(0.88);
}

.service-detail:nth-child(even):hover::before {
  transform: translate(16%, -50%) scale(1);
}

.service-detail__media {
  grid-area: media;
  position: relative;
  width: min(100%, 460px);
  justify-self: start;
  aspect-ratio: 4 / 5.65;
  overflow: hidden;
  border: 5px solid var(--bc-white);
  border-radius: var(--radius-md);
  background: var(--bc-navy);
  box-shadow: 12px 12px 0 var(--bc-pale-blue), 0 28px 56px -36px rgba(10,23,51,0.5);
  outline: 1px solid rgba(30,91,198,0.14);
}

.service-detail__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,46,126,0.02), rgba(0,46,126,0.16));
  mix-blend-mode: multiply;
}

.service-detail__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out), filter 0.55s var(--ease-out);
}

.service-detail--brand-launch .service-detail__media img { object-position: center 20%; }
.service-detail--content-day .service-detail__media img { object-position: center 42%; }
.service-detail--bespoke .service-detail__media img { object-position: center 38%; }

.service-detail:hover .service-detail__media img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

.service-detail__content {
  grid-area: content;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 68ch;
  padding: 0;
}

.service-detail__eyebrow {
  color: var(--bc-bright-blue);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.service-detail__content h2 {
  max-width: none;
  color: var(--text-strong);
  font-size: clamp(48px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.service-detail__description {
  max-width: 64ch;
  color: var(--text-body);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.7;
}

.service-detail__cta {
  width: fit-content;
  margin-top: 8px;
  white-space: normal;
  text-align: center;
}

.service-detail-grid--motion .service-detail--pending {
  opacity: 0;
  transform: translateY(calc(var(--service-shift) + 30px));
}

.service-detail-grid--motion .service-detail--pending.is-revealed {
  opacity: 1;
  transform: translateY(var(--service-shift));
}

@media (min-width: 900px) {
  .service-detail {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    grid-template-areas: "content media";
    column-gap: clamp(40px, 7vw, 104px);
    row-gap: 0;
    padding-top: clamp(32px, 3.5vw, 52px);
  }

  .service-detail:nth-child(even) {
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
    grid-template-areas: "media content";
  }

  .service-detail__media { justify-self: end; }
  .service-detail:nth-child(even) .service-detail__media { justify-self: start; }
}

@media (max-width: 899px) {
  .services-detail-section {
    padding-block: clamp(64px, 8vw, 112px);
  }

  .service-detail-grid {
    gap: clamp(64px, 10vw, 88px);
  }

  .service-detail {
    gap: 40px;
  }

  .service-detail:not(:first-child) {
    padding-top: 32px;
  }

  .service-detail__content {
    gap: 32px;
  }

  .service-detail__media {
    aspect-ratio: 4 / 5.4;
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--bc-pale-blue), 0 24px 48px -34px rgba(10,23,51,0.42);
  }

  .service-detail__content h2 {
    font-size: clamp(36px, 12vw, 52px);
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail,
  .service-detail__media img,
  .service-detail::before { transition: none; }

  .service-detail:hover .service-detail__media img { transform: none; }

  .service-detail-grid--motion .service-detail--pending,
  .service-detail-grid--motion .service-detail--pending.is-revealed {
    opacity: 1;
    transform: translateY(var(--service-shift));
  }
}

/* ---------- Services preview ---------- */
.services-preview__header {
  display: grid;
  gap: 24px;
  align-items: end;
}
.services-preview__header .section-heading h2 { margin-bottom: 0; }
.services-preview {
  position: relative;
  padding-top: calc(var(--pad-section) - 20px);
  overflow: hidden;
}
.services-preview > .wrap { max-width: var(--w-wide); }
.services-preview .service-card { aspect-ratio: 9 / 16; }
.services-preview .card-grid:has(.service-card) {
  position: relative;
  isolation: isolate;
  margin-top: clamp(48px, 5vw, 64px);
  margin-bottom: 40px;
}
.services-preview .card-grid:has(.service-card)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-30px, -3vw, -18px) clamp(-24px, -2vw, -12px);
  border: 1px solid rgba(30,91,198,0.14);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 92% 8%, rgba(30,91,198,0.12), transparent 25%),
    linear-gradient(135deg, rgba(217,230,250,0.66), rgba(255,255,255,0.18) 58%, rgba(217,230,250,0.42));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.services-preview .card-grid:has(.service-card)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(-14px, -1.5vw, -8px);
  left: clamp(22px, 4vw, 56px);
  width: clamp(68px, 9vw, 112px);
  height: 3px;
  background: var(--bc-bright-blue);
  box-shadow: 42px 0 0 rgba(230,57,70,0.42);
}

@media (min-width: 880px) {
  .services-preview .service-card { aspect-ratio: 9 / 16; }
  .services-preview__header {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    gap: clamp(40px, 7vw, 88px);
  }
}

/* ---------- Tag ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  background: var(--bc-pale-blue);
  color: var(--bc-navy);
}
.tag--outline { background: transparent; color: var(--bc-navy); border: 1px solid var(--border-fine); }

/* ---------- Feature card (Clay-style illustration cards) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--border-fine);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-card__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 40px) 24px;
  min-height: 130px;
  overflow: hidden;
  border-bottom: 1px solid transparent;
}

.feature-card__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feature-card__tile svg {
  width: clamp(80px, 12vw, 100px);
  height: auto;
  position: relative;
  z-index: 1;
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  padding: 20px 24px 0;
  margin: 0;
}

.feature-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
  padding: 8px 24px 28px;
  margin: 0;
  max-width: 36ch;
}

.home-page .feature-card__tile {
  min-height: 104px;
  padding: clamp(20px, 3vh, 28px) 20px;
}
.home-page .feature-card__tile svg { width: clamp(68px, 8vw, 84px); }
.home-page .feature-card h3 { padding: 16px 20px 0; }
.home-page .feature-card p { padding: 7px 20px 22px; }

/* Glint sweep */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 65%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.feature-card:hover::before { animation: bc-card-glint 0.65s var(--ease-soft) forwards; }

/* Camera variant — blue-50 tile like Clay's blue-themed illustration cards */
.feature-card--camera .feature-card__tile {
  background: linear-gradient(155deg, var(--bc-blue-50) 0%, var(--bc-blue-100) 100%);
  border-bottom-color: rgba(30,91,198,0.12);
}
.feature-card--camera:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(30,91,198,0.24), 0 18px 40px -20px rgba(10,23,51,0.18);
}

/* Lighting variant — blue tile like Clay's blue-themed illustration cards */
.feature-card--lighting .feature-card__tile {
  background: linear-gradient(155deg, var(--bc-blue-50) 0%, var(--bc-blue-100) 100%);
  border-bottom-color: rgba(30,91,198,0.12);
}
.feature-card--lighting:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(30,91,198,0.24), 0 18px 40px -20px rgba(10,23,51,0.18);
}

/* Editing variant — navy tile like Clay's dark illustration cards */
.feature-card--editing .feature-card__tile {
  background: var(--gradient-dark);
  border-bottom-color: rgba(255,255,255,0.1);
}
.feature-card--editing .feature-card__tile::after {
  background: radial-gradient(ellipse at 78% 18%, rgba(255,255,255,0.08) 0%, transparent 55%);
}
.feature-card--editing:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 18px 40px -20px rgba(0,46,126,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover { transform: none; }
  .feature-card::before { display: none; }
}

/* ---------- About Blue Cherry Media (Who We Are) ---------- */
.who-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  margin-bottom: clamp(34px, 5vw, 48px);
}

.who-row__content {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.who-row__content .eyebrow { margin-bottom: 4px; }

.who-headline-wrap {
  position: relative;
  isolation: isolate;
}

.who-headline {
  position: relative;
  z-index: 1;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.93;
  letter-spacing: -0.035em;
  font-weight: 750;
  max-width: 10ch;
  color: var(--bc-navy);
}

.who-headline__break { display: none; }

.who-story {
  display: grid;
  gap: 18px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 52ch;
}

.who-row__media {
  position: relative;
}

.who-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  border: 6px solid var(--bc-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bc-navy);
  box-shadow: 12px 12px 0 var(--bc-pale-blue), 0 28px 56px -36px rgba(10,23,51,0.5);
  outline: 1px solid rgba(30,91,198,0.14);
}

@media (min-width: 860px) {
  .who-video {
    max-height: 500px;
    z-index: 4;
  }
}

.who-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.who-video:hover video {
  transform: scale(1.02);
}

.who-video__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(10,23,51,0.92), transparent);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (min-width: 860px) {
  .who-row {
    grid-template-columns: 0.88fr 1.12fr;
  }
  .who-headline__break { display: inline; }
}

/* Editorial proof line */
.stat-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(30,91,198,0.28);
  border-bottom: 1px solid rgba(30,91,198,0.28);
}

.stat-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px, 3vw, 28px) clamp(16px, 3vw, 36px);
  background: rgba(255,255,255,0.72);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.stat-card.is-pending {
  opacity: 0;
  transform: translateY(20px);
}

.stat-card + .stat-card {
  border-left: 1px solid rgba(30,91,198,0.28);
}

.stat-card.is-pending.is-revealed { opacity: 1; transform: translateY(0); }

.stat-card__value {
  font-family: var(--font-serif);
  font-size: clamp(46px, 5.5vw, 62px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.9;
  color: var(--bc-bright-blue);
  letter-spacing: -0.02em;
}

.stat-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-mute);
  line-height: 1.35;
  max-width: 14ch;
}

/* Mobile — keep proof compact and show immediately */
@media (max-width: 599px) {
  .stat-card {
    padding-inline: 14px;
    opacity: 1;
    transform: none;
  }
  .stat-card.is-pending { opacity: 1; transform: none; }
}

/* ---------- About section: kinetic title card ---------- */
.about-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--pad-section);
  background: var(--surface-page);
  border-top: 1px solid rgba(30,91,198,0.08);
  border-bottom: 1px solid rgba(30,91,198,0.12);
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.018;
  pointer-events: none;
  z-index: 1;
}

.about-section .wrap {
  position: relative;
  z-index: 3;
}

.about-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stat-row > .about-backdrop {
  right: auto;
  left: 50%;
  width: 100vw;
  max-width: 1600px;
  transform: translateX(-50%);
}

.about-backdrop__title {
  position: absolute;
  right: auto;
  bottom: -0.04em;
  left: -0.04em;
  z-index: 0;
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(54px, 7vw, 88px);
  font-weight: 750;
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px rgba(30,91,198,0.14);
  text-stroke: 1.5px rgba(30,91,198,0.14);
  transform: scaleX(1.06);
  transform-origin: left center;
}

.about-backdrop__track {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: -5%;
  width: 110%;
  height: clamp(176px, 18vw, 236px);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(242,246,254,0.94) 0%, rgba(234,241,253,0.88) 55%, rgba(242,246,254,0.94) 100%);
  border-block: 1px solid rgba(30,91,198,0.18);
  transform: translateY(-50%);
}

.about-backdrop__wave {
  position: absolute;
  inset: 24px 0 38px;
  width: 100%;
  height: calc(100% - 62px);
  stroke: var(--bc-bright-blue);
  stroke-width: 2;
  opacity: 0.26;
}

.about-backdrop__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10%;
  width: 2px;
  background: var(--bc-cherry);
  animation: about-playhead-scan 16s linear infinite;
}

.about-backdrop__playhead::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bc-cherry);
  transform: translateX(-50%);
}

.about-backdrop__meta {
  position: absolute;
  right: clamp(28px, 6vw, 96px);
  bottom: 14px;
  left: clamp(28px, 6vw, 96px);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(0,46,126,0.5);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

@keyframes about-playhead-scan {
  from { left: 8%; }
  to { left: 92%; }
}

@media (max-width: 859px) {
  .about-section { padding-block: var(--pad-section); }
  .about-backdrop__title {
    bottom: 0;
    font-size: clamp(44px, 13vw, 76px);
    opacity: 0.72;
  }
  .about-backdrop__track {
    top: 50%;
    bottom: auto;
    left: -6%;
    width: 112%;
    height: 170px;
    transform: translateY(-50%);
  }
  .about-backdrop__meta { display: none; }
  .who-video {
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--bc-pale-blue), 0 24px 48px -34px rgba(10,23,51,0.42);
  }
}

@media (min-width: 900px) and (max-height: 850px) {
  .who-row { gap: 40px; margin-bottom: 34px; }
  .who-video { max-height: 42vh; }
  .about-backdrop__track { top: 50%; bottom: auto; height: 170px; }
}

/* ---------- Section dividers ---------- */
.section-divider {
  line-height: 0;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.section-divider svg {
  display: block;
  width: 100%;
  height: clamp(28px, 5vw, 56px);
}
.home-page .section-divider svg { height: clamp(20px, 3vw, 32px); }
.home-page .section-divider--white { display: none; }

.section-divider__path {
  fill: var(--bc-soft-surface);
}

@media (prefers-reduced-motion: reduce) {
  .about-backdrop__playhead { animation: none; }
  .who-video video { transition: none; }
  .who-video:hover video { transform: none; }
  .stat-card { transition: none; }
  .stat-card:hover { transform: none; }
}

/* ---------- Editorial split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--media-left .split__media { order: -1; }
}
.split__body { display: flex; flex-direction: column; gap: 22px; }
.split__body .eyebrow { margin-bottom: 0; }
.split__body h2 { font-size: var(--type-h2); line-height: 1.04; letter-spacing: -0.02em; }
.split__body p { font-size: 17px; line-height: 1.65; color: var(--text-body); max-width: 52ch; }
.surface-dark .split__body p, .surface-dark-radial .split__body p { color: rgba(255,255,255,0.82); }
.split__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bc-soft-surface);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lift);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--wide { aspect-ratio: 16 / 9; }

/* ---------- Music Videos feature ---------- */
.music-videos-section,
.service-feature-section {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-block: 1px solid rgba(30,91,198,0.10);
}

.music-videos-section > .wrap,
.service-feature-section > .wrap {
  width: 100%;
  max-width: var(--w-content);
}

/* The music feature takes the wide cinematic frame */
.music-videos-section > .wrap {
  max-width: var(--w-wide);
  padding-inline: clamp(20px, 4.5vw, 60px);
}

.music-videos__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px clamp(32px, 5vw, 72px);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.music-videos__row,
.service-feature__row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "copy";
  row-gap: clamp(28px, 5vw, 56px);
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.music-videos__copy,
.service-feature__copy {
  grid-area: copy;
  max-width: 52ch;
}

.music-videos__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.music-videos__copy p {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
}

.music-videos__copy h2 {
  margin: 0;
  max-width: 16ch;
  color: var(--bc-navy);
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.music-videos__copy em,
.service-feature__copy em {
  color: var(--bc-navy);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08em;
}

.music-videos__cta {
  margin-top: 2px;
}

.music-videos__media-wrap,
.service-feature__media-wrap {
  grid-area: media;
  align-self: center;
}

.music-videos__media,
.service-feature__media {
  position: relative;
  min-width: 0;
  margin: 0 12px 12px 0;
}

.music-videos__media::after,
.service-feature__media::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px -12px -12px 12px;
  border-radius: var(--radius-md);
  background: var(--bc-pale-blue);
}

.music-videos__player,
.service-feature__placeholder {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 6px solid var(--bc-white);
  border-radius: var(--radius-md);
  background: var(--bc-navy);
  box-shadow: 0 28px 56px -36px rgba(10,23,51,0.50);
  outline: 1px solid rgba(30,91,198,0.14);
}

.service-feature__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10,23,51,0.72), transparent 52%);
}

.music-videos__player video,
.service-feature__placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

.service-feature__placeholder img {
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.service-feature__placeholder-label {
  position: absolute;
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  left: clamp(14px, 2vw, 22px);
  z-index: 1;
  display: block;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-pill);
  background: rgba(10,23,51,0.78);
  color: var(--bc-white);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .service-feature__media:hover .service-feature__placeholder img {
    transform: scale(1.02);
    filter: saturate(1.04) contrast(1.02);
  }
}

@media (min-width: 860px) {
  .music-videos__row,
  .service-feature__row {
    grid-template-columns: 0.88fr 1.12fr;
    grid-template-areas: "copy media";
    column-gap: clamp(32px, 5vw, 56px);
    row-gap: 36px;
    align-items: center;
  }

  .music-videos__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(32px, 4vw, 48px);
  }

  .music-videos__copy { align-self: center; }
}

@media (min-width: 1100px) {
  .music-videos__row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    column-gap: clamp(48px, 5vw, 72px);
  }
}

@media (max-width: 899px) {
  .music-videos__media,
  .service-feature__media { margin-right: 8px; margin-bottom: 8px; }
  .music-videos__media::after,
  .service-feature__media::after { inset: 8px -8px -8px 8px; }
  .music-videos__player,
  .service-feature__placeholder { border-width: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-feature__placeholder img { transition: none; }
  .service-feature__media:hover .service-feature__placeholder img { transform: none; }
}

.service-feature__link {
  align-self: start;
  margin-top: 2px;
}

.service-feature__heading h1 {
  max-width: 13ch;
}

.service-feature__cta {
  width: fit-content;
  margin-top: 2px;
}

/* ---------- Pull quote / testimonial ---------- */
.pullquote {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.28;
  font-style: italic;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.surface-dark .pullquote blockquote, .surface-dark-radial .pullquote blockquote { color: #fff; }
.pullquote cite {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.surface-dark .pullquote cite, .surface-dark-radial .pullquote cite { color: var(--bc-pale-blue); }

/* ---------- Process editorial sequence ---------- */
.process-section { overflow: hidden; }
.process-heading {
  position: relative;
  z-index: 1;
  margin-bottom: var(--pad-head-row);
}
.timeline {
  position: relative;
  max-width: 1180px;
  margin-inline: auto;
  counter-reset: process-step;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(12px, 9vw, 132px);
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(30,91,198,0.28) 8%, rgba(30,91,198,0.28) 92%, transparent);
}
.timeline-card {
  --process-shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(80px, 17%) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 76px);
  min-height: clamp(200px, 25vw, 300px);
  padding-block: clamp(24px, 3vw, 36px);
  padding-inline: clamp(8px, 3vw, 42px) clamp(36px, 10vw, 148px);
  border-bottom: 1px solid rgba(30,91,198,0.22);
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s var(--ease-out);
  isolation: isolate;
}
.timeline-card:first-child { border-top: 1px solid rgba(30,91,198,0.22); }
.timeline-card.is-revealed { opacity: 1; transform: translateX(0); }
.timeline--motion .timeline-card--pending { opacity: 0; transform: translateX(-28px); }
.timeline--motion .timeline-card--pending.is-revealed { opacity: 1; transform: translateX(0); }
.timeline--motion .timeline-card--pending .timeline-card__body { transform: translateX(calc(var(--process-shift) - 18px)); }
.timeline--motion .timeline-card--pending.is-revealed .timeline-card__body { transform: translateX(var(--process-shift)); }
.timeline-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: clamp(150px, 26vw, 360px);
  height: clamp(150px, 26vw, 360px);
  border-radius: 50%;
  background: var(--bc-pale-blue);
  opacity: 0.34;
  transform: translate(-42%, -50%) scale(0.9);
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.timeline-card:hover { background-color: rgba(255,255,255,0.34); }
.timeline-card:hover::before { opacity: 0.52; transform: translate(-34%, -50%) scale(1); }
.timeline-card__num {
  position: relative;
  align-self: start;
  margin-top: -0.12em;
  color: var(--bc-bright-blue);
  font-family: var(--font-serif);
  font-size: clamp(76px, 12vw, 164px);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.72;
  opacity: 0.24;
  transform: translateX(-0.22em);
}
.timeline-card__body {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  transform: translateX(var(--process-shift));
}
.timeline-card__body::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bc-cherry);
}
.timeline-card h3 {
  max-width: 10ch;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(27px, 4.3vw, 59px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-wrap: balance;
}
.timeline-card p {
  max-width: 38ch;
  margin: 0;
  color: var(--text-body);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.5;
}

@media (max-width: 819px) {
  .timeline::before { left: 16px; }
  .timeline-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 28px 0 28px 42px;
  }
  .timeline-card::before {
    width: 150px;
    height: 150px;
    transform: translate(-48%, -50%) scale(0.85);
  }
  .timeline-card__num {
    font-size: clamp(58px, 17vw, 96px);
    transform: translateX(-0.32em);
  }
  .timeline-card__body { gap: 14px; }
  .timeline--motion .timeline-card--pending .timeline-card__body { transform: translateX(-12px); }
  .timeline--motion .timeline-card--pending.is-revealed .timeline-card__body { transform: translateX(0); }
  .timeline-card h3 { font-size: clamp(24px, 6.3vw, 41px); }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-card,
  .timeline-card::before,
  .timeline-card__body { transition: none; }
}

/* ---------- FAQ ---------- */
.faq-head {
  margin-bottom: var(--pad-head-row);
}

/* FAQ accordion */
.faq {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq details {
  --faq-gap: 12px;
  border-bottom: 1px solid var(--border-fine);
  border-radius: 0;
  transition: background-color 0.35s var(--ease-soft);
}
.faq details:first-of-type { border-top: 1px solid var(--border-fine); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  align-items: center;
  column-gap: var(--faq-gap);
  min-height: 64px;
  padding: 16px 0;
  font-family: var(--font-sans);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  color: var(--text-strong);
  position: relative;
}
.faq__question { min-width: 0; text-wrap: pretty; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: -1px;
  border-radius: 6px;
}

/* Chevron arrow — smoother rotation */
.faq summary::after {
  grid-column: 2;
  justify-self: end;
  content: "";
  width: 13px; height: 13px;
  border-right: 2.5px solid var(--bc-bright-blue);
  border-bottom: 2.5px solid var(--bc-bright-blue);
  border-radius: 1px;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.22s var(--ease-out);
  margin-right: 0;
}

/* Open state */
.faq details[open] {
  background: linear-gradient(155deg, rgba(30,91,198,0.025) 0%, rgba(30,91,198,0.06) 100%);
  border-radius: var(--radius-md);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-1px);
}

.faq details p {
  max-width: 68ch;
  padding: 0 2.5rem 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
.faq details p + p { margin-top: 14px; }
.faq details p:last-child { padding-bottom: 22px; }

@media (max-width: 599px) {
  .faq details {
    --faq-gap: 10px;
  }
  .faq summary {
    min-height: 60px;
    font-size: clamp(16px, 4.6vw, 19px);
  }
  .faq details p {
    padding-right: 0;
    font-size: 15.5px;
    line-height: 1.6;
  }
}

/* Reduce transition for system motion preference */
@media (prefers-reduced-motion: reduce) {
  .faq details,
  .faq summary::after {
    transition: none;
  }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-fine);
}
.site-header__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 20px var(--pad-page);
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding var(--dur-base) var(--ease-out);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: 42px; object-fit: contain; transition: height var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); }
.site-header .brand img { height: auto; width: 176px; }
.brand__word {
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 17px;
  line-height: 1;
  color: var(--bc-navy);
}
.brand__word b { color: var(--bc-bright-blue); font-weight: 700; }

.primary-nav { margin-left: auto; }
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2vw, 32px);
  list-style: none;
}
.primary-nav > ul > li { position: relative; }
.primary-nav a,
.primary-nav summary {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--bc-ink);
  opacity: 0.92;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.primary-nav summary {
  gap: 9px;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  font-family: inherit;
  cursor: pointer;
  list-style: none;
}
.primary-nav summary::-webkit-details-marker { display: none; }
.primary-nav summary::marker { content: ""; }
.primary-nav a:hover,
.primary-nav summary:hover { opacity: 1; text-decoration: none; }
.primary-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--bc-bright-blue); }
.primary-nav .nav-dropdown--current > details > summary { opacity: 1; border-bottom-color: var(--bc-bright-blue); }

.nav-dropdown__arrow {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-out);
}

.primary-nav details[open] > summary .nav-dropdown__arrow {
  transform: rotate(225deg) translateY(-1px);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 224px;
  padding: 10px;
  list-style: none;
  border: 1px solid var(--border-fine);
  border-radius: var(--radius-md);
  background: var(--bc-white);
  box-shadow: var(--shadow-lift);
}

.primary-nav .nav-dropdown__menu a {
  display: block;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 15px;
  opacity: 1;
  white-space: nowrap;
}

.primary-nav .nav-dropdown__menu a:hover,
.primary-nav .nav-dropdown__menu a[aria-current="page"] {
  border: 0;
  background: var(--bc-blue-50);
  color: var(--bc-navy);
  opacity: 1;
}

.site-header--compact .site-header__inner { padding-top: 8px; padding-bottom: 8px; }
.site-header--compact .brand img { height: auto; width: 160px; }

/* mobile menu toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border-fine);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--bc-navy); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav { display: none; }
  .site-header .brand img { width: clamp(112px, 36vw, 144px); }
  .site-header--compact .brand img { width: clamp(112px, 36vw, 144px); }

  .mobile-menu {
    display: none;
    border-top: 1px solid var(--border-fine);
    background: #fff;
    padding: 8px var(--pad-page) 24px;
  }
  .mobile-menu.is-open { display: block; }
  .mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
  .mobile-menu a {
    display: block;
    padding: 16px 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--bc-ink);
    border-bottom: 1px solid var(--border-fine);
  }
  .mobile-menu a[aria-current="page"] { color: var(--bc-bright-blue); }

  .mobile-menu summary {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 4px;
    color: var(--bc-ink);
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-fine);
    cursor: pointer;
    list-style: none;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary::marker { content: ""; }
  .mobile-menu .nav-dropdown--current > details > summary { color: var(--bc-bright-blue); }
  .mobile-menu .nav-dropdown__arrow { margin-left: auto; }
  .mobile-menu details[open] > summary .nav-dropdown__arrow { transform: rotate(225deg) translateY(-1px); }
  .mobile-menu .nav-dropdown__menu {
    position: static;
    display: grid;
    gap: 0;
    min-width: 0;
    padding: 4px 0 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--border-fine);
    border-radius: 0;
    background: var(--bc-blue-50);
    box-shadow: none;
  }
  .mobile-menu .nav-dropdown__menu a {
    padding: 12px 4px;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    white-space: normal;
  }
  .mobile-menu .nav-dropdown__menu a[aria-current="page"] {
    background: transparent;
    color: var(--bc-bright-blue);
  }
}
/* Hide mobile menu container on desktop entirely */
@media (min-width: 861px) { .mobile-menu { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown__arrow { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  overflow-x: clip;
  border-bottom: 1px solid var(--border-fine);
  background:
    radial-gradient(ellipse at 85% -10%, var(--bc-blue-50) 0%, transparent 55%),
    var(--surface-page);
}
.hero__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 56px) var(--pad-page) clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.hero__headline,
.hero__support {
  width: min(100%, 680px);
  margin-inline: auto;
}
.hero__support {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__media { min-width: 0; }
/* Keep the desktop composition until the two-column hero no longer fits. */
@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 1.02fr 0.98fr;
    grid-template-rows: auto auto;
    column-gap: clamp(36px, 5vw, 64px);
    row-gap: 36px;
  }
  .hero__headline,
  .hero__support {
    width: auto;
    margin-inline: 0;
  }
  .hero__headline { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__support { grid-column: 1; grid-row: 2; align-self: start; }
  .hero__media { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}
.hero h1 {
  max-width: 12ch;
  margin-inline: auto;
  text-align: left;
  font-size: var(--type-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--bc-ink);
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--bc-bright-blue);
  letter-spacing: -0.01em;
}
.hero__sub {
  --hero-sub-fs: clamp(18px, 1.6vw, 22px);
  font-size: var(--hero-sub-fs);
  line-height: 1.5;
  color: var(--text-body);
  max-width: calc(12ch * (var(--type-display) / var(--hero-sub-fs)));
  margin-inline: auto;
  text-align: left;
}
.hero__reviews {
  min-height: 0;
  overflow: visible;
}
.hero__reviews #shapo-widget-0d7f9e2ccd67b1fa1292 { min-height: 1px; }
.hero__support .btn-row { justify-content: center; }
.hero__support .btn-row .btn { flex: 1 1 0; min-width: 0; }
@media (min-width: 768px) {
  .hero__sub { padding-bottom: 8px; }
  .hero__support .btn-row { justify-content: flex-start; }
  .hero__reviews { text-align: left; }
}
@media (max-width: 767px) {
  .hero {
    background:
      linear-gradient(to bottom, var(--surface-page) 0%, var(--bc-blue-50) 30%, var(--bc-blue-50) 62%, var(--surface-page) 100%);
  }
  .hero__inner {
    padding-top: clamp(36px, 6vw, 72px);
    padding-bottom: clamp(36px, 6vw, 72px);
  }
  .hero h1 {
    width: min(100%, 22rem);
    max-width: none;
    text-align: left;
    text-wrap: balance;
    font-size: clamp(34px, 10vw, 56px);
  }
  .hero__headline-line {
    display: inline;
    white-space: normal;
  }
  .hero__sub {
    width: min(100%, 18rem);
    max-width: none;
  }
  .hero__support .btn-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .hero__support .btn-row .btn {
    flex: 0 0 auto;
    width: 100%;
  }
  .hero__reviews {
    width: 100%;
    text-align: center;
    display: none;
  }
}
@media (max-width: 639px) {
  .hero__headline,
  .hero__support { width: 100%; }
}
@media (max-width: 479px) {
  .hero__inner {
    padding-top: clamp(24px, 6vw, 40px);
    padding-bottom: clamp(24px, 6vw, 40px);
  }
}

/* ---------- Hero mosaic ---------- */
.mosaic {
  position: relative;
  width: 100%;
}
.mosaic__viewport {
  width: 100%;
  height: calc((clamp(112px, 32vw, 140px) * 32 / 9) + 14px);
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-xl);
  scrollbar-width: thin;
  scrollbar-color: var(--bc-pale-blue) transparent;
  overscroll-behavior-inline: contain;
}
.mosaic__viewport--b { margin-top: 14px; }
.mosaic__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(112px, 32vw, 140px);
  grid-template-rows: repeat(2, auto);
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mosaic--enhanced .mosaic__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mosaic--enhanced .mosaic__track {
  grid-auto-flow: row;
  grid-auto-columns: initial;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 360px);
  margin-inline: auto;
  will-change: transform;
}
.mosaic-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bc-soft-surface);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}
.mosaic-card__poster,
.mosaic-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bc-soft-surface);
}
.mosaic-card video {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mosaic-card.is-playing video { opacity: 1; }
.mosaic-card.is-playing .mosaic-card__poster { opacity: 0; }

.mosaic--streaming .mosaic__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mosaic--streaming .mosaic__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  will-change: auto;
}
.mosaic--streaming .mosaic-card {
  position: absolute;
  will-change: transform;
}

@media (min-width: 768px) {
  .mosaic__viewport { height: clamp(360px, 56vw, 620px); }
  .mosaic__track { grid-auto-columns: min(15vw, 190px); grid-template-rows: none; }
  .mosaic--enhanced .mosaic__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .mosaic--streaming .mosaic__viewport {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

.mosaic-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  min-height: 44px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  background: #fff;
  border: 1px solid var(--border-fine);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mosaic-control[hidden] { display: none; }
.mosaic-control:hover { color: var(--bc-navy); border-color: rgba(30,91,198,0.3); }
.mosaic-control__icon { width: 9px; height: 11px; position: relative; flex-shrink: 0; }
.mosaic-control__icon::before, .mosaic-control__icon::after {
  content: ""; position: absolute; top: 0; width: 3px; height: 11px;
  background: currentColor; border-radius: 1px;
}
.mosaic-control__icon::before { left: 0; }
.mosaic-control__icon::after { right: 0; }
/* play icon when paused (aria-pressed true) */
.mosaic-control[aria-pressed="true"] .mosaic-control__icon::before {
  left: 1px; top: 0;
  width: 0; height: 0;
  background: transparent;
  border-left: 9px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  border-radius: 0;
}
.mosaic-control[aria-pressed="true"] .mosaic-control__icon::after { display: none; }

.mosaic-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
}
.mosaic-foot .btn { margin-top: 16px; }
.mosaic-foot .mosaic-control {
  width: 44px;
  height: 44px;
  margin-top: 16px;
  padding: 0;
  gap: 0;
  font-size: 0;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .mosaic-foot {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 16px auto 0;
    gap: 10px;
  }
  .mosaic-foot .mosaic-control {
    width: 44px;
    height: 44px;
    margin-top: 0;
  }
}

.mosaic--reduced .mosaic__viewport {
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: none;
  mask-image: none;
  scroll-snap-type: x mandatory;
}
.mosaic--reduced .mosaic__track {
  grid-auto-flow: column;
  grid-auto-columns: clamp(112px, 32vw, 140px);
  grid-template-rows: none;
  grid-template-columns: none;
  width: max-content;
  margin: 0;
  transform: none !important;
  will-change: auto;
}
.mosaic--reduced .mosaic-card { scroll-snap-align: center; }
@media (max-width: 479px) {
  .mosaic__viewport {
    height: calc((clamp(84px, 28vw, 112px) * 32 / 9) + 14px);
  }
  .mosaic--reduced .mosaic__viewport {
    height: auto;
  }
  .mosaic__track,
  .mosaic--reduced .mosaic__track {
    grid-auto-columns: clamp(84px, 28vw, 112px);
  }
}
@media (min-width: 768px) {
  .mosaic--reduced .mosaic__track {
    grid-auto-columns: min(15vw, 190px);
    grid-template-rows: none;
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: left;
  padding-block: clamp(96px, 12vw, 168px);
  padding-block-start: clamp(64px, 8vw, 112px);
  background:
    linear-gradient(90deg, rgba(0,13,46,0.98) 0%, rgba(0,46,126,0.9) 54%, rgba(0,26,74,0.72) 100%),
    url("assets/images/hero/hero-work-08.webp") 78% 42% / cover;
}
.home-page .cta-band {
  padding-block: clamp(88px, 12vh, 132px);
  padding-block-start: clamp(56px, 8vh, 96px);
}
.home-page .cta-band {
  background:
    radial-gradient(circle at 74% 24%, rgba(30,91,198,0.48) 0%, transparent 34%),
    linear-gradient(135deg, #001a4a 0%, #002e7e 58%, #0a3d8f 100%);
}
.home-page .cta-band::before,
.home-page .cta-band::after { display: none; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 34%, rgba(91,156,255,0.42) 0%, transparent 27%),
    repeating-linear-gradient(90deg, transparent 0 84px, rgba(217,230,250,0.065) 84px 85px),
    repeating-linear-gradient(0deg, transparent 0 84px, rgba(217,230,250,0.04) 84px 85px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.28;
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  right: clamp(-180px, -8vw, -72px);
  width: min(46vw, 620px);
  height: 76%;
  border: 1px solid rgba(217,230,250,0.28);
  border-radius: var(--radius-xl);
  box-shadow: 0 26px 60px -36px rgba(0,0,0,0.7);
  transform: rotate(-3deg);
  pointer-events: none;
}
.cta-band__inner {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.cta-band h2 { max-width: 13ch; font-size: var(--type-h2); line-height: 1.04; }
.cta-band p { font-size: var(--type-lead); color: rgba(255,255,255,0.82); max-width: 56ch; }
.cta-band .btn-row { justify-content: flex-start; }

@media (max-width: 767px) {
  .cta-band {
    text-align: center;
    background-position: 68% 42%;
  }
  .cta-band::after {
    top: 8%;
    right: -34%;
    width: 92vw;
    height: 84%;
    opacity: 0.55;
  }
  .cta-band__inner { align-items: center; }
  .cta-band .btn-row { justify-content: center; }
}

.cta-band--compact {
  padding-block: clamp(64px, 9vw, 112px);
  padding-block-start: clamp(48px, 7vw, 88px);
  border-block: 1px solid rgba(30,91,198,0.16);
  background: var(--bc-blue-50);
  color: var(--bc-navy);
}
.home-page .cta-band--compact,
.equipment-page .cta-band--compact { background: var(--bc-white); }
.portfolio-page .cta-band--compact { background: var(--bc-white); }
.service-page .cta-band--compact { background: var(--bc-white); }
.home-page .cta-band--compact h2 { color: var(--bc-navy); }
.cta-band--compact::before,
.cta-band--compact::after { display: none; }
.cta-band--compact .cta-band__inner {
  max-width: 900px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 36px);
  text-align: center;
}
.cta-band--compact h2 {
  width: 100%;
  max-width: 22ch;
  color: var(--bc-navy);
  font-size: calc(var(--type-h2) + 2px);
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}
.cta-band--compact h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--bc-bright-blue);
  letter-spacing: -0.01em;
}
.cta-band--compact .btn {
  flex-shrink: 0;
  min-width: min(240px, 100%);
}
@media (max-width: 767px) {
  .cta-band--compact { text-align: center; }
  .cta-band--compact .cta-band__inner {
    align-items: center;
  }
  .cta-band--compact h2 {
    width: min(100%, 280px);
    max-width: none;
  }
  .cta-band--compact .btn { width: min(100%, 280px); }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(247,248,250,0.96), rgba(234,241,253,0.98)),
    var(--bc-soft-surface);
  color: var(--bc-ink-soft);
  --footer-divider: rgba(30,91,198,0.14);
  --footer-copy-size: 15px;
  --footer-meta-size: 13px;
  padding-block: clamp(20px, 4vw, 48px) 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: -10vw;
  width: min(46vw, 680px);
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 52px, rgba(30,91,198,0.045) 52px 53px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36%, #000 100%);
  mask-image: linear-gradient(to right, transparent, #000 36%, #000 100%);
  pointer-events: none;
}
.site-footer > .wrap { position: relative; z-index: 1; }
.site-footer a { color: var(--bc-navy); }
.site-footer a:hover { color: var(--bc-bright-blue); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: 0 clamp(28px, 4vw, 52px);
}
.footer-grid > * {
  position: relative;
  padding-block: clamp(18px, 3vw, 28px);
}
.footer-grid > :first-child { padding-block-start: 0; }
.footer-grid > * + *::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--footer-divider);
  pointer-events: none;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 36ch; }
.footer-brand .brand__word { color: var(--bc-navy); }
.footer-brand .brand__word b { color: var(--bc-bright-blue); }
.footer-brand img { filter: none; opacity: 1; }
.footer-brand p {
  color: var(--bc-ink-soft);
  font-size: var(--footer-copy-size);
  line-height: 1.5;
}
.footer-company {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  color: var(--bc-mute);
  font-size: var(--footer-meta-size);
  line-height: 1.45;
}
.footer-col h4,
.footer-location h4 {
  color: var(--bc-navy);
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: var(--footer-copy-size);
  overflow-wrap: anywhere;
}
.footer-col a[href^="mailto:"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-location {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(30,91,198,0.18);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.78);
  box-shadow: 10px 10px 0 rgba(217,230,250,0.72), var(--shadow-soft);
}
.footer-location__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.footer-location__head h4 { margin-bottom: 8px; }
.footer-location__link {
  flex-shrink: 0;
  font-size: var(--footer-meta-size);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-location address {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  color: var(--bc-ink-soft);
  font-size: var(--footer-copy-size);
  font-style: normal;
  line-height: 1.45;
}
.footer-map {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: var(--radius-md);
  background: var(--bc-blue-100);
  box-shadow: 0 12px 28px -22px rgba(10,23,51,0.45);
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.72) contrast(0.96);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-inline: auto;
  padding: 18px 20px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bc-navy-900);
  color: rgba(255,255,255,0.72);
  font-size: var(--footer-meta-size);
}
.footer-credit { color: var(--bc-pale-blue); }
.footer-credit a {
  color: var(--bc-pale-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-credit a:hover { color: var(--bc-white); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.footer-legal a {
  color: var(--bc-pale-blue);
  font-size: var(--footer-meta-size);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.footer-legal a:hover { color: var(--bc-white); }
@media (min-width: 1080px) {
  .site-footer { padding-block-start: 36px; }
  .footer-grid {
    --footer-grid-gap: clamp(24px, 3vw, 40px);
    grid-template-columns: minmax(200px, 1.25fr) minmax(110px, 0.65fr) minmax(175px, 0.95fr) minmax(320px, 1.6fr);
    gap: var(--footer-grid-gap);
    align-items: stretch;
    padding-block-end: 40px;
  }
  .footer-grid > * { padding-block: 0; }
  .footer-grid > * + *::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: clamp(-20px, -1.5vw, -12px);
    inset-inline-end: auto;
    width: 1px;
    height: auto;
    background: var(--footer-divider);
    pointer-events: none;
  }
  .footer-location { grid-column: auto; display: block; padding: 18px; }
  .footer-location address { margin-bottom: 16px; }
}
@media (max-width: 599px) {
  .footer-location { padding: 16px; }
  .footer-bottom {
    border-radius: 0;
    margin-inline: calc(-1 * var(--pad-page));
    padding-inline: var(--pad-page);
  }
}

@media (max-width: 759px) {
  .site-footer { --footer-copy-size: 14px; }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  .footer-legal { justify-content: center; }
  .footer-col a,
  .footer-location__link,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Legal pages ---------- */
.legal-page {
  padding-block: clamp(56px, 8vw, 112px);
}
.legal-page h1 {
  max-width: 12ch;
  margin-bottom: 12px;
  color: var(--bc-navy);
}
.legal-page__updated {
  color: var(--text-mute);
  font-size: 14px;
}
.legal-page__content {
  display: grid;
  gap: 20px;
  margin-top: var(--pad-head-row);
}
.legal-page__content h2 {
  margin-top: 18px;
  color: var(--bc-navy);
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.12;
}
.legal-page__content p,
.legal-page__content li {
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.7;
}
.legal-page__content ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
}
.legal-page__content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Reviews section widget slot ---------- */
.reviews-widget-slot {
  margin-top: clamp(40px, 6vw, 64px);
  min-height: 80px;
  padding-top: 28px;
  border-top: 1px solid rgba(30,91,198,0.14);
}
.home-page .reviews-widget-slot {
  margin-top: clamp(28px, 4vh, 40px);
  padding-top: 20px;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background:
    radial-gradient(ellipse at 80% -20%, var(--bc-blue-50) 0%, transparent 50%),
    var(--surface-page);
  border-bottom: 1px solid var(--border-fine);
}
.page-hero__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) var(--pad-page) clamp(40px, 5vw, 72px);
  max-width: min(880px, 100%);
}
.page-hero h1 { font-size: var(--type-h1); line-height: 1; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 22px; }
.page-hero .lead { max-width: 56ch; }
.page-hero .btn-row { margin-top: 30px; }

/* ---------- Simple image heroes ---------- */
.simple-page-hero {
  position: relative;
  display: grid;
  min-height: clamp(320px, 50vh, 620px);
  overflow: hidden;
  isolation: isolate;
  background: var(--bc-ink);
  color: var(--bc-white);
}

@supports (height: 1svh) {
  .simple-page-hero { min-height: clamp(320px, 50svh, 620px); }
}

.simple-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.54);
  pointer-events: none;
}

.simple-page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.simple-page-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.simple-page-hero--services .simple-page-hero__media img { object-position: center; }
.simple-page-hero--portfolio .simple-page-hero__media img { object-position: center; }
.simple-page-hero--equipment .simple-page-hero__media img { object-position: center; }
.simple-page-hero--contact .simple-page-hero__media img { object-position: center; }
.simple-page-hero--brand-launch,
.simple-page-hero--content-day,
.simple-page-hero--bespoke,
.simple-page-hero--music-videos,
.simple-page-hero--drone-videography .simple-page-hero__media img { object-position: center 44%; }

.simple-page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--w-content);
  min-height: inherit;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 76px) var(--pad-page);
  text-align: center;
}

.simple-page-hero h1 {
  max-width: 100%;
  color: var(--bc-white);
  font-size: clamp(46px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

@media (max-width: 640px) {
  .simple-page-hero { min-height: clamp(260px, 44vh, 420px); }

  @supports (height: 1svh) {
    .simple-page-hero { min-height: clamp(260px, 44svh, 420px); }
  }

  .simple-page-hero__inner { padding-block: 32px; }
  .simple-page-hero h1 { font-size: clamp(42px, 14vw, 64px); }
}

:is(.service-page, body:has(.simple-page-hero--services)) .simple-page-hero h1 {
  font-size: calc(clamp(46px, 8vw, 96px) * var(--access-text-scale, 1));
}

@media (max-width: 640px) {
  :is(.service-page, body:has(.simple-page-hero--services)) .simple-page-hero h1 {
    font-size: calc(clamp(42px, 14vw, 64px) * var(--access-text-scale, 1));
  }
}

.notice {
  display: flex;
  gap: 16px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--bc-soft-surface) 0%, var(--bc-blue-50) 100%);
  box-shadow: inset 0 0 0 1px rgba(30,91,198,0.1);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 760px;
}
.notice::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--bc-bright-blue);
}

/* ---------- Individual service routes ---------- */
.service-route-hero {
  overflow: hidden;
}

.service-route-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) var(--pad-page) clamp(56px, 7vw, 104px);
}

.service-route-hero__copy {
  max-width: 680px;
}

.service-route-hero h1 {
  max-width: 11ch;
  margin-bottom: 24px;
  color: var(--bc-ink);
  font-size: var(--type-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

.service-route-hero .lead {
  max-width: 56ch;
}

.service-route-hero .btn-row { margin-top: 32px; }

.service-route-hero__media,
.service-route-media {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  overflow: hidden;
  border: 6px solid var(--bc-white);
  border-radius: var(--radius-md);
  background: var(--bc-navy);
  box-shadow: 12px 12px 0 var(--bc-pale-blue), 0 28px 56px -36px rgba(10,23,51,0.5);
  outline: 1px solid rgba(30,91,198,0.14);
}

.service-route-hero__media::before,
.service-route-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 24px;
  width: 28px;
  height: 28px;
  border-top: 2px solid rgba(255,255,255,0.82);
  border-left: 2px solid rgba(255,255,255,0.82);
  pointer-events: none;
}

.service-route-hero__media img,
.service-route-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.service-route-media {
  align-self: start;
}

.service-route-media img {
  object-position: center 52%;
}

.service-page .service-route-media {
  width: min(100%, 420px);
  aspect-ratio: 9 / 12;
}

.service-page .service-route-media img {
  object-position: center top;
}

.service-page--content-day .service-route-media {
  aspect-ratio: 9 / 16;
}

.service-page--music-videos .service-route-media {
  aspect-ratio: 9 / 16;
}

@media (min-width: 880px) {
  :is(.service-page--music-videos, .service-page--content-day, .service-page--brand-launch) .service-route-media--aside {
    width: min(100%, 280px);
  }
}

.service-page--music-videos .service-route-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-video-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  max-width: 1160px;
  margin-inline: auto;
}

.music-video-approach__body {
  width: 100%;
  align-self: center;
}

.service-page--music-videos .music-video-approach__body p {
  max-width: 50ch;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
}

.service-page--music-videos .music-video-approach__body h2 {
  max-width: 19ch;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

@media (min-width: 880px) {
  .music-video-approach {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: center;
    gap: clamp(38px, 5vw, 72px);
  }
}

.service-route-media--inline { display: none; }

.service-route-hero--brand-launch .service-route-hero__media img { object-position: center 20%; }
.service-route-hero--content-day .service-route-hero__media img { object-position: center 42%; }
.service-route-hero--bespoke .service-route-hero__media img { object-position: center 38%; }

.service-route-content {
  padding-block: clamp(64px, 9vw, 128px);
}

:is(.service-page--music-videos, .service-page--content-day, .service-page--brand-launch) .service-route-content {
  padding-block: clamp(48px, 6vw, 80px);
}

.service-route-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(38px, 7vw, 96px);
  max-width: 1160px;
  margin-inline: auto;
}

.service-route-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

:is(.service-page--music-videos, .service-page--content-day, .service-page--brand-launch) .service-route-copy { align-self: center; }

.service-route-copy h2 {
  max-width: 11ch;
  color: var(--bc-navy);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.service-page .service-route-copy h2 {
  max-width: none;
  font-size: calc(clamp(34px, 4.6vw, 62px) * var(--access-text-scale, 1));
}

.service-route-copy p {
  max-width: 62ch;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.68;
}

.service-route-aside {
  align-self: start;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(30,91,198,0.24);
  border-bottom: 1px solid rgba(30,91,198,0.24);
}

.service-route-aside h2 {
  margin-bottom: 22px;
  color: var(--text-strong);
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.08;
}

.service-route-list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.service-route-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.5;
}

.service-route-list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bc-cherry);
}

.service-route-process {
  overflow: hidden;
}

.service-route-process .process-heading { margin-bottom: clamp(38px, 7vw, 76px); }

.service-route-related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  margin-top: 18px;
}

.service-route-related a {
  color: var(--bc-pale-blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 880px) {
  .service-route-hero__inner { grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.76fr); }
  .service-route-layout { grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr); }
}

@media (max-width: 879px) {
  .service-route-hero__media {
    width: min(100%, 520px);
    margin-inline: 0;
  }
  .service-route-media--aside { display: none; }
  .service-route-media--inline { display: block; }
}

@media (max-width: 599px) {
  .service-route-hero__inner { padding-block: 52px 72px; }
  .service-route-hero h1 { max-width: 12ch; font-size: clamp(42px, 12vw, 64px); }
  .service-route-copy h2 { max-width: none; }
  .service-route-hero__media,
  .service-route-media {
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--bc-pale-blue), 0 24px 48px -34px rgba(10,23,51,0.42);
  }
  .service-route-hero__media::before,
  .service-route-media::before { top: 18px; left: 18px; }
}

/* ---------- Equipment directory ---------- */
.equipment-directory {
  padding-block: clamp(64px, 8vw, 112px);
}

.equipment-directory .wrap { width: 100%; }

.equipment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 68px) clamp(24px, 3vw, 52px);
  max-width: 1240px;
  margin-inline: auto;
}

.equipment-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 0 22px;
  border-inline-start: 1px solid rgba(230,57,70,0.82);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.equipment-card:hover {
  background: linear-gradient(90deg, rgba(217,230,250,0.34), transparent 86%);
  border-inline-start-color: var(--bc-cherry);
}

.equipment-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.equipment-card__icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: var(--bc-cherry);
}

.equipment-card h3 {
  color: var(--text-strong);
  font-size: var(--type-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.equipment-card__list {
  display: grid;
  gap: 9px;
  list-style: none;
}

.equipment-card__list li {
  position: relative;
  padding-inline-start: 14px;
  color: var(--text-body);
  font-size: var(--type-small);
  line-height: 1.45;
}

.equipment-card__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bc-cherry);
}

.equipment-card > p {
  max-width: 42ch;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.58;
}

@media (min-width: 700px) {
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .equipment-card > p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-card { transition: none; }
}

/* ---------- Categorized portfolio ---------- */
.content-day-film {
  text-align: center;
}

.content-day-film h2 {
  color: var(--bc-navy);
}

.content-day-film video {
  display: block;
  width: min(100%, 360px);
  margin: clamp(40px, 4vw, 48px) auto 0;
  border-radius: var(--radius-lg);
  background: var(--bc-navy);
}

.portfolio-section {
  --portfolio-grid-gap: clamp(16px, 2.2vw, 28px);
}

.portfolio-categories {
  display: grid;
  gap: clamp(64px, 9vw, 120px);
  max-width: 1240px;
  margin-inline: auto;
}

.portfolio-category { min-width: 0; }

.portfolio-category__player {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bc-navy);
  box-shadow: var(--shadow-soft);
  outline: 1px solid rgba(30,91,198,0.12);
}

.portfolio-category__player iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.portfolio-category__header {
  margin-bottom: clamp(30px, 4vw, 48px);
  overflow: hidden;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--portfolio-grid-gap);
}

.portfolio-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bc-navy);
  box-shadow: var(--shadow-soft);
  outline: 1px solid rgba(30,91,198,0.12);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.portfolio-card [hidden] { display: none; }

.portfolio-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bc-navy);
}

.portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.portfolio-card__anchor {
  display: block;
  color: var(--bc-white);
  text-decoration: none;
}

.portfolio-card__anchor:hover {
  color: var(--bc-white);
  text-decoration: none;
}

.portfolio-card__anchor:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: -5px;
}

/* ---------- Portfolio project grid ---------- */
.portfolio-page .portfolio-categories {
  display: block;
  max-width: var(--w-wide);
}

.portfolio-page .portfolio-category {
  padding-bottom: clamp(60px, 8vw, 104px);
}

.portfolio-page .portfolio-category + .portfolio-category {
  padding-top: clamp(60px, 8vw, 104px);
  border-top: 1px solid rgba(30,91,198,0.2);
}

.portfolio-page .portfolio-category__header {
  margin-bottom: clamp(28px, 4vw, 48px);
  overflow: visible;
}

.portfolio-page .portfolio-grid {
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}

.music-video-samples,
#kinvara-christmas-promo {
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid rgba(30,91,198,0.2);
}

.service-page--brand-launch .case-study {
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid rgba(30,91,198,0.2);
}

.music-video-samples .portfolio-grid { gap: clamp(20px, 2.4vw, 32px); }

.portfolio-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10,23,51,0.82) 0%, rgba(10,23,51,0.44) 42%, transparent 72%);
}

.portfolio-card--youtube-thumbnail .portfolio-card__media::after { display: none; }
.portfolio-card--youtube-thumbnail { background: var(--bc-white); }
.portfolio-card--youtube-thumbnail .portfolio-card__caption {
  position: static;
  padding: 20px 24px 24px;
  color: var(--bc-navy);
}
.portfolio-card--youtube-thumbnail .portfolio-card__action {
  border-color: rgba(10,23,51,0.24);
  background: var(--bc-blue-50);
  color: var(--bc-navy);
}

.portfolio-card__caption {
  position: absolute;
  right: clamp(18px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 28px);
  left: clamp(18px, 3vw, 28px);
  z-index: 2;
  display: grid;
  gap: 6px;
  align-items: start;
  color: var(--bc-white);
}

.portfolio-card__category {
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
}

.portfolio-card__caption strong {
  max-width: 19ch;
  font-family: var(--font-heading);
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.portfolio-card__action {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 36px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-pill);
  background: rgba(10,23,51,0.78);
  font-size: var(--type-small);
  font-weight: 650;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.portfolio-card__action span { font-size: 1.1em; }

@media (min-width: 700px) {
  .portfolio-page .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-video-samples .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .portfolio-page .portfolio-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }

  .portfolio-card:hover .portfolio-card__media img {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.02);
  }

  .portfolio-card__anchor:hover .portfolio-card__action {
    border-color: rgba(255,255,255,0.62);
    background: rgba(10,23,51,0.94);
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-card__media img,
  .portfolio-card__action { transition: none; }
  .portfolio-card:hover { transform: none; }
  .portfolio-card:hover .portfolio-card__media img { transform: none; }
}

/* ---------- Vertical portfolio card ---------- */
.portfolio-card--vertical {
  justify-self: center;
  width: min(100%, clamp(260px, 26vw, 360px));
  min-width: 0;
  aspect-ratio: 9 / 16;
}

.portfolio-page .portfolio-card--vertical:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(100%, clamp(260px, 26vw, 360px));
  justify-self: center;
}

.portfolio-card--vertical .portfolio-card__anchor {
  position: static;
  height: 100%;
}

.portfolio-card--vertical .portfolio-card__media {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
}

.portfolio-card--vertical .portfolio-card__caption {
  right: 16px;
  bottom: 16px;
  left: 16px;
  gap: 5px;
}

.portfolio-card--vertical .portfolio-card__category {
  font-size: 12px;
  letter-spacing: 0.1em;
}

.portfolio-card--vertical .portfolio-card__caption strong {
  max-width: 14ch;
  font-size: 20px;
}

.portfolio-card--vertical .portfolio-card__action {
  min-height: 30px;
  margin-top: 6px;
  padding: 7px 12px;
  font-size: 13px;
}

@media (max-width: 699px) {
  .portfolio-card--vertical {
    width: min(100%, 280px);
  }
}

/* Compact product work keeps portrait films from filling the viewport. */
.portfolio-page .portfolio-grid--product {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  max-width: 960px;
  margin-inline: auto;
}

.portfolio-page .portfolio-grid--product .portfolio-card--vertical,
.portfolio-page .portfolio-grid--product .portfolio-card--vertical:last-child:nth-child(odd) {
  grid-column: auto;
  justify-self: center;
  width: min(100%, 240px);
}

@media (max-width: 699px) {
  .portfolio-page .portfolio-category__header {
    overflow: hidden;
  }
}

/* ---------- Video-first project pages ---------- */
.portfolio-project {
  padding-block: clamp(34px, 5vw, 64px) clamp(72px, 10vw, 132px);
  background: var(--bc-white);
}

.portfolio-project .portfolio-project__back {
  display: inline-block;
  margin-bottom: clamp(24px, 4vw, 40px);
  color: var(--bc-bright-blue);
  font-weight: 650;
}

.portfolio-project .portfolio-project__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bc-ink);
  box-shadow: var(--shadow-soft);
}

.portfolio-project__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.portfolio-project__content {
  margin-top: clamp(48px, 7vw, 80px);
  text-align: left;
}

.portfolio-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.portfolio-project__content h1 {
  color: var(--bc-navy);
  font-size: var(--type-h3);
}

.portfolio-project__content p {
  margin-top: 20px;
  color: var(--text-body);
  font-size: var(--type-body);
  line-height: 1.55;
}

/* ---------- Vertical video project layout ---------- */
.portfolio-project .portfolio-project__video--vertical {
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;
}

.portfolio-project .portfolio-project__video--tiktok {
  width: min(100%, 420px);
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portfolio-project__video--tiktok .tiktok-embed {
  margin: 0;
}

.portfolio-project .portfolio-project__video--instagram {
  width: min(100%, 420px);
  height: 660px;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 900px) {
  .portfolio-project--split .wrap {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .portfolio-project--split .portfolio-project__back {
    grid-column: 1 / -1;
  }

  .portfolio-project--split .portfolio-project__content {
    margin-top: 0;
  }
}

/* ---------- Case study spotlight ---------- */
.case-study__card--following {
  margin-top: clamp(28px, 4vw, 48px);
}

.case-study__card {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--bc-white);
  box-shadow: var(--shadow-soft);
  outline: 1px solid rgba(30,91,198,0.12);
  color: var(--text-strong);
  text-decoration: none;
}

.case-study__card:hover,
.case-study__card:focus-visible {
  color: var(--text-strong);
  text-decoration: none;
}

.case-study__media {
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
}

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

.case-study__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bc-bright-blue);
}

.case-study__body h2,
.home-case-studies .case-study__body h3 {
  margin: 10px 0 0;
  color: var(--bc-navy);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
}

.case-study__body p {
  margin-top: 12px;
  max-width: 52ch;
  color: var(--text-body);
}

.case-study__body .btn {
  margin-top: 24px;
}

.home-case-studies__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

.home-case-studies__grid.mt-gap { margin-top: clamp(24px, 3vw, 40px); }

.home-case-studies__card {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: clamp(280px, 36vh, 380px);
  padding: 0;
  overflow: hidden;
}

.home-case-studies .case-study__media {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: #f2f5fa;
}

.home-case-studies .case-study__media img {
  object-fit: contain;
}

.home-case-studies .case-study__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(16px, 2vw, 24px);
}

.home-case-studies .case-study__body h3 {
  font-size: clamp(22px, 2vw, 28px);
}

.home-case-studies .case-study__body .btn {
  margin-top: auto;
}

.home-case-studies .case-study__body p {
  margin-bottom: 16px;
}

.home-case-studies__card:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: 3px;
}

.home-case-studies__controls { display: none; }

@media (max-width: 767px) {
  .home-case-studies__grid {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px;
  }

  .home-case-studies__card { min-height: 0; scroll-snap-align: start; }
  .home-case-studies .case-study__media { min-height: 200px; }
  .home-case-studies__controls:not([hidden]) { display: flex; gap: 12px; margin-top: 16px; }
  .home-case-studies__controls button {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--bc-navy);
    border-radius: var(--radius-sm);
    background: var(--bc-white);
    color: var(--bc-navy);
    font: inherit;
    cursor: pointer;
  }
  .home-case-studies__controls button:focus-visible { outline: 3px solid var(--bc-bright-blue); outline-offset: 3px; }
  .home-case-studies__controls button:disabled { opacity: .45; cursor: default; }
}

@media (max-width: 699px) {
  .case-study__card {
    grid-template-columns: 1fr;
  }

  .home-case-studies .home-case-studies__card {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  }

  .case-study__media {
    max-width: 220px;
  }
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
}
@media (min-width: 880px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: clamp(40px, 6vw, 80px);
  }
  .contact-layout__intro { grid-column: 1 / -1; }
}

.contact-layout__intro { max-width: 640px; }
.contact-layout__title { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 12px; }
.contact-layout__intro p { margin: 0; color: var(--text-body); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }

.honeypot-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Static form shell */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 14px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.005em;
}
.field__required { color: var(--bc-cherry); }
.field__optional { font-size: 13px; font-weight: 400; color: var(--text-mute); }
.field input, .field select, .field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-strong);
  background: #fff;
  border: 1.5px solid var(--border-fine);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 5 L7 9 L11 5' stroke='%23002E7E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bc-bright-blue);
  box-shadow: var(--ring-focus);
}

.contact-aside {
  background: var(--bc-soft-surface);
  border: 1.5px solid var(--border-fine);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
}
.contact-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.contact-aside__list li { margin: 0; }
.contact-aside h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.contact-aside a { font-weight: 600; }
.contact-aside p { margin: 0; color: var(--text-body); }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-gap { margin-top: 40px; }
.home-page main .mt-gap { margin-top: var(--pad-head-row); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Kinetic Edit: homepage sequence ---------- */

/* Trusted By: moving client credits */
.trusted-reel {
  --trusted-logo-gap: clamp(18px, 5vw, 26px);
  --trusted-logo-width: clamp(132px, 38vw, 160px);
  position: relative;
  display: block;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 86px);
  background: var(--surface-page);
  border-bottom: 1px solid rgba(30,91,198,0.12);
}
.trusted-reel__header {
  position: relative;
  display: grid;
  gap: 20px;
  align-items: end;
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto clamp(28px, 4vw, 48px);
  padding-inline: var(--pad-page);
}
.trusted-reel__header::before {
  content: "TRUSTED BY";
  position: absolute;
  left: -0.04em;
  bottom: -0.05em;
  z-index: 0;
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(64px, 9vw, 96px);
  font-weight: 750;
  line-height: 0.8;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1.5px rgba(30,91,198,0.09);
  pointer-events: none;
}
.trusted-reel__title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.trusted-reel__signal {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bc-cherry);
}
.trusted-reel__heading {
  padding: 0;
  margin: 0;
  color: var(--bc-navy);
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: left;
  text-transform: none;
}

.trusted-reel__heading--caps {
  text-transform: uppercase;
}

/* ---------- Shared section title pattern (ghost text + signal dot) ---------- */
.section-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title-wrap::before {
  content: attr(data-ghost);
  position: absolute;
  left: -0.04em;
  bottom: -0.05em;
  z-index: 0;
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(64px, 9vw, 96px);
  font-weight: 750;
  line-height: 0.8;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1.5px var(--ghost-stroke, rgba(30,91,198,0.09));
  pointer-events: none;
  white-space: nowrap;
}

.section-title-wrap--dark {
  --ghost-stroke: rgba(255,255,255,0.10);
  --ghost-color: #fff;
}

.section-title-wrap__heading--caps {
  text-transform: uppercase;
}

.section-signal {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bc-cherry);
}

.section-title-wrap h1,
.section-title-wrap h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: var(--ghost-color, var(--bc-navy));
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: left;
  text-transform: none;
}

/* Medium widths: keep the ghost subordinate to the real heading */
@media (min-width: 860px) and (max-width: 1100px) {
  .section-title-wrap::before,
  .trusted-reel__header::before {
    font-size: clamp(48px, 7vw, 68px);
  }
}

.trusted-reel__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(0,46,126,0.58);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.trusted-reel__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}
.trusted-reel__film {
  position: relative;
  padding-block: 24px;
  border: 1px solid rgba(30,91,198,0.18);
  border-radius: var(--radius-md);
  background: var(--bc-blue-100);
  box-shadow: 8px 8px 0 var(--bc-pale-blue), 0 22px 48px -34px rgba(10,23,51,0.32);
  overflow: hidden;
}
.trusted-reel__film::before,
.trusted-reel__film::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(30,91,198,0.26) 0 42%, transparent 47%) 0 0 / 28px 10px repeat-x;
  pointer-events: none;
}
.trusted-reel__film::before { top: 7px; }
.trusted-reel__film::after { bottom: 7px; }
.trusted-reel__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,46,126,0.3) transparent;
}
.trusted-reel__track { display: flex; width: max-content; }
.trusted-reel__group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--trusted-logo-gap);
  margin: 0;
  padding: 0 var(--trusted-logo-gap) 0 0;
  list-style: none;
}
.trusted-reel__group[aria-hidden="true"] { display: none; }
.trusted-reel__item {
  position: relative;
  width: var(--trusted-logo-width);
  flex: 0 0 var(--trusted-logo-width);
  padding: 7px;
  border: 1px solid rgba(30,91,198,0.15);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 18px -16px rgba(10,23,51,0.4);
  overflow: hidden;
}
.trusted-reel__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.trusted-reel__item:hover img,
.trusted-reel__item:focus-within img { filter: grayscale(0%); opacity: 1; }
.trusted-reel--enhanced .trusted-reel__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.trusted-reel--enhanced .trusted-reel__group[aria-hidden="true"] { display: flex; }
.trusted-reel--animating .trusted-reel__track { will-change: transform; }
.trusted-reel--static .trusted-reel__viewport { scroll-snap-type: x proximity; }
.trusted-reel--static .trusted-reel__track { transform: none !important; }

/* About: quieter telemetry */
.about-backdrop__playhead {
  width: 1px;
  background: rgba(230,57,70,0.42);
}
.about-backdrop__playhead::before {
  width: 6px;
  height: 6px;
  background: rgba(230,57,70,0.54);
}

/* Showreel: cinematic peak */
.showreel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--pad-section) 16px;
  color: #fff;
  background:
    radial-gradient(ellipse at 20% 74%, rgba(30,91,198,0.3) 0%, transparent 48%),
    radial-gradient(ellipse at 78% 18%, rgba(30,91,198,0.42) 0%, rgba(0,46,126,0.28) 34%, transparent 70%),
    linear-gradient(145deg, #000d2b 0%, var(--bc-navy-900) 48%, #073a87 100%);
}
.showreel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
}
.showreel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(255,255,255,0.015) 5px 6px);
  pointer-events: none;
}
.showreel__wrap {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: 0;
  text-align: left;
}

/* Midnight Edit Suite: a quiet signal field behind the work. */
.showreel__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.showreel__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 0%, transparent 34%, rgba(0,9,30,0.28) 72%, rgba(0,5,18,0.78) 100%);
}
.showreel__field-grid {
  position: absolute;
  inset: -12% -6%;
  opacity: 0.2;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(217,230,250,0.08) 118px 119px),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(217,230,250,0.055) 54px 55px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  transform: perspective(720px) rotateX(56deg) translateY(14%);
  transform-origin: center bottom;
}
.showreel__field-ghost {
  position: absolute;
  right: -0.04em;
  bottom: 7%;
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(180px, 32vw, 420px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.08em;
  -webkit-text-stroke: 1px rgba(217,230,250,0.11);
  transform: rotate(-3deg);
  transform-origin: right bottom;
  animation: showreel-ghost-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.showreel__field-wave {
  position: absolute;
  right: -5%;
  bottom: 7%;
  left: -5%;
  width: 110%;
  height: 26%;
  stroke: var(--bc-bright-blue);
  stroke-width: 2;
  opacity: 0.24;
  filter: drop-shadow(0 0 12px rgba(30,91,198,0.38));
  animation: showreel-wave-drift 18s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.showreel__field-playhead {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 8%;
  width: 1px;
  background: rgba(230,57,70,0.72);
  box-shadow: 0 0 24px rgba(230,57,70,0.42);
  animation: showreel-playhead-sweep 16s linear infinite;
  animation-play-state: paused;
}
.showreel__field-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bc-cherry);
  box-shadow: 0 0 16px rgba(230,57,70,0.55);
  transform: translateX(-50%);
}
.showreel__field-meta {
  position: absolute;
  right: clamp(24px, 5vw, 76px);
  bottom: 18px;
  left: clamp(24px, 5vw, 76px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(217,230,250,0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.showreel.is-visible .showreel__field-ghost,
.showreel.is-visible .showreel__field-wave,
.showreel.is-visible .showreel__field-playhead {
  animation-play-state: running;
}
@keyframes showreel-ghost-drift {
  from { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
  to { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.035); }
}
@keyframes showreel-wave-drift {
  from { transform: translate3d(-1%, 0, 0) scaleY(0.94); }
  to { transform: translate3d(1.5%, -4%, 0) scaleY(1.06); }
}
@keyframes showreel-playhead-sweep {
  from { left: 8%; }
  to { left: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .showreel__field-ghost,
  .showreel__field-wave,
  .showreel__field-playhead { animation: none; }
}

.showreel .section-title-wrap::before {
  font-size: clamp(44px, 6vw, 64px);
}
.showreel__header {
  display: grid;
  gap: 24px;
  align-items: end;
  max-width: var(--w-content);
  margin-inline: auto;
  margin-bottom: var(--pad-head-row);
  padding-inline: var(--pad-page);
}
.showreel__eyebrow,
.showreel__heading { color: #fff; }
.showreel__heading {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.showreel__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255,255,255,0.56);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.showreel__player {
  position: relative;
  width: min(100%, 94vw, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border: 6px solid rgba(255,255,255,0.96);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bc-navy-900);
  box-shadow: 12px 12px 0 rgba(30,91,198,0.34), 0 34px 96px rgba(0,0,0,0.46);
  outline: 1px solid rgba(255,255,255,0.18);
}
.showreel__player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
}
.showreel__announcement {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0,26,74,0.08), rgba(0,26,74,0.3));
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0,0,0,0.55);
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}
.showreel__announcement span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.showreel__announcement strong {
  font-family: var(--font-heading);
  font-size: clamp(38px, 7vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.showreel__player.is-playing .showreel__announcement { opacity: 0.42; }
.showreel__frame-meta {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,0.7);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.showreel__play-btn {
  position: absolute;
  inset: auto 18px auto auto;
  top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-pill);
  color: var(--bc-navy);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.5);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.showreel__play-btn:hover { transform: translateY(-1px); background: #fff; }
.showreel__play-btn.is-hidden { opacity: 1; pointer-events: auto; }
.showreel__play-icon {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}
.showreel__play-btn.is-playing .showreel__play-icon {
  width: 9px;
  height: 11px;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.showreel__play-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.showreel__fs-btn {
  position: absolute;
  inset: auto auto auto 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(10,23,51,0.55);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-pill);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.5);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.showreel__fs-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.92); color: var(--bc-navy); }
.showreel__fs-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.showreel__fs-icon { width: 18px; height: 18px; }
.showreel__fs-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.showreel__fs-icon--compress { display: none; }
.showreel__fs-btn.is-active .showreel__fs-icon--expand { display: none; }
.showreel__fs-btn.is-active .showreel__fs-icon--compress { display: block; }
.showreel__player.is-fullscreen {
  width: 100% !important;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}
.section-divider--white .section-divider__path { fill: var(--surface-page); }

/* Client Feedback: calm editorial proof */
.reviews-section {
  position: relative;
  overflow-x: clip;
  background: var(--surface-page);
}
.reviews-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}
.reviews-heading__mark {
  align-self: start;
  color: var(--bc-pale-blue);
  font-family: var(--font-serif);
  font-size: clamp(96px, 13vw, 180px);
  font-style: italic;
  line-height: 0.62;
  pointer-events: none;
}
.reviews-widget {
  border-top: 1px solid rgba(30,91,198,0.24);
  border-bottom: 1px solid rgba(30,91,198,0.24);
  padding: clamp(24px, 4vh, 38px) 0;
}
.reviews-widget #shapo-widget-71277547b98b8e0face1 { min-height: 1px; }

/* Meet the Team: compact founder portrait cards */
.team-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bc-blue-50) 0%, var(--bc-blue-100) 100%);
  padding-block: clamp(72px, 8vw, 112px);
  padding-top: calc(clamp(72px, 8vw, 112px) - 20px);
}
.team-section::before,
.team-section::after {
  content: "";
  position: absolute;
  width: clamp(180px, 27vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bc-pale-blue);
  opacity: 0.42;
  pointer-events: none;
  transform: translateY(18px) scale(0.88);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.team-section::before { top: 24%; left: -10%; }
.team-section::after { right: -10%; bottom: 12%; }
.team-section:has(.team-grid--motion) {
  --team-line: rgba(30,91,198,0.22);
}
.team-section:has(.team-grid--motion)::before,
.team-section:has(.team-grid--motion)::after {
  opacity: 0.56;
  transform: translateY(0) scale(1);
}
.team-heading-row {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  align-items: end;
  margin-bottom: var(--pad-head-row);
}
.team-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
}
.team-grid::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--team-line, rgba(30,91,198,0.18)) 18%, var(--team-line, rgba(30,91,198,0.18)) 82%, transparent);
  opacity: 0.8;
  pointer-events: none;
}
.team-card { min-width: 0; }
.team-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 6px solid var(--bc-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bc-white);
  box-shadow: 12px 12px 0 var(--bc-pale-blue), 0 28px 56px -38px rgba(10,23,51,0.42);
  outline: 1px solid rgba(30,91,198,0.14);
  transition: transform 700ms var(--ease-out), box-shadow 320ms var(--ease-out), clip-path 760ms var(--ease-out);
}
.team-card__media::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(30,91,198,0.62);
  border-left: 2px solid rgba(30,91,198,0.62);
  opacity: 1;
  transition: transform 450ms var(--ease-out), opacity 450ms var(--ease-out);
}
.team-card__media picture { display: contents; }
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.team-card__identity {
  position: absolute;
  left: clamp(24px, 7%, 52px);
  right: clamp(24px, 7%, 52px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding: 11px 16px;
  border: 1px solid rgba(30,91,198,0.16);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow-soft);
  transition: transform 650ms 120ms var(--ease-out), opacity 450ms 120ms var(--ease-out);
}
.team-card__identity h3 {
  margin: 0;
  color: var(--bc-ink);
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.team-card__identity p {
  margin: 0;
  color: var(--bc-bright-blue);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.team-grid--motion .team-card__media {
  clip-path: inset(12% 8% 0 8% round var(--radius-md));
}
.team-grid--motion .team-card__identity {
  opacity: 0;
  transform: translateY(12px);
}
.team-grid--motion .team-card--pending .team-card__media {
  opacity: 0;
  transform: translateY(28px);
}
.team-grid--motion .team-card--pending .team-card__media::before {
  opacity: 0;
  transform: translateY(8px);
}
.team-grid--motion .team-card--pending.is-revealed .team-card__media {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0 round var(--radius-md));
}
.team-grid--motion .team-card--pending.is-revealed .team-card__identity {
  opacity: 1;
  transform: translateY(0);
}
.team-grid--motion .team-card--pending.is-revealed .team-card__media::before {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 760px) {
  .trusted-reel {
    --trusted-logo-gap: clamp(28px, 3vw, 38px);
    --trusted-logo-width: clamp(190px, 17vw, 220px);
  }
  .trusted-reel__header,
  .showreel__header,
  .team-heading-row { grid-template-columns: minmax(0, 1fr) auto; }
  .trusted-reel__meta,
  .showreel__meta { align-items: flex-end; text-align: right; }
}

@media (min-width: 900px) {
  .team-section {
    padding-block: clamp(72px, 8vh, 104px);
    padding-top: calc(clamp(72px, 8vh, 104px) - 20px);
  }
  .team-heading-row { margin-bottom: clamp(40px, 5vh, 52px); }
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 7vw, 104px);
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: clamp(10px, 2vw, 28px);
  }
  .team-card__media {
    width: min(100%, 390px, 54vh);
    margin-inline: auto;
    border-width: 5px;
  }
  .team-card:first-child .team-card__media { transform: translateX(-8px); }
  .team-card:last-child .team-card__media { transform: translateX(8px); }
}

@supports (height: 1svh) {
  .showreel__player { width: min(100%, 94vw, calc(90svh * 16 / 9)); }
}

/* Keep the desktop showreel cinematic without letting it take over the viewport. */
@media (min-width: 768px) {
  .showreel__player { width: min(100%, 94vw, calc(70vh * 16 / 9)); }
}

@supports (height: 1svh) {
  @media (min-width: 768px) {
    .showreel__player { width: min(100%, 94vw, calc(70svh * 16 / 9)); }
  }
}

@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-card__media {
    box-shadow: 16px 16px 0 var(--bc-pale-blue), 0 32px 62px -38px rgba(10,23,51,0.5);
  }
  .team-card:first-child:hover .team-card__media { transform: translate(-12px, -4px); }
  .team-card:last-child:hover .team-card__media { transform: translate(12px, -4px); }
  .team-card:hover .team-card__media img {
    transform: scale(1.018);
    filter: saturate(1.04) contrast(1.02);
  }
}

@media (max-width: 759px) {
  .trusted-reel__meta span:first-child { display: none; }
  .trusted-reel__film {
    padding-block: 20px;
    box-shadow: 5px 5px 0 var(--bc-pale-blue), 0 18px 38px -30px rgba(10,23,51,0.28);
  }
  .showreel__meta,
  .showreel__frame-meta { display: none; }
  .showreel__player {
    border-width: 4px;
    box-shadow: 7px 7px 0 rgba(30,91,198,0.34), 0 24px 64px rgba(0,0,0,0.42);
  }
  .showreel__play-btn { right: 12px; top: 12px; padding: 10px 13px; }
  .showreel__fs-btn { left: 12px; top: 12px; }
  .team-card__media {
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--bc-pale-blue), 0 24px 48px -34px rgba(10,23,51,0.38);
  }
  .team-card__identity { bottom: 12px; padding: 10px 14px; }
  .team-section::before { top: 18%; left: -34%; }
  .team-section::after { right: -34%; bottom: 26%; }
  .team-grid::before { display: none; }
}

@media (max-width: 599px) {
  .reviews-heading { grid-template-columns: 1fr; }
  .reviews-heading__mark { display: none; }
}

/* Homepage mobile roles. Other pages can opt in without inheriting these changes. */
@media (max-width: 767px) {
  body.home-page {
    --pad-section: var(--mobile-space-section);
    --pad-head-row: var(--mobile-space-heading);
  }
  .home-page .trusted-reel { padding-block: var(--mobile-space-compact); }
  .home-page .trusted-reel__header { margin-bottom: var(--mobile-space-heading); }
  .home-page .services-preview { padding-top: var(--mobile-space-compact); }
  .home-page .services-preview .card-grid:has(.service-card) {
    margin-top: var(--mobile-space-compact);
    margin-bottom: var(--mobile-space-heading);
  }
  .home-page .team-section,
  .home-page .cta-band--compact {
    padding-block: var(--mobile-space-section) var(--mobile-space-feature);
  }
  .home-page .who-row__content { gap: var(--mobile-space-content); }
  .home-page .service-card__content { gap: var(--mobile-space-card); }
  .home-page .faq.mt-gap { margin-top: 0; }

  .home-page .trusted-reel__heading,
  .home-page .section-title-wrap h2,
  .home-page .cta-band--compact h2 { font-size: var(--mobile-type-heading); }
  .home-page .service-card h3 { font-size: var(--mobile-type-card-title); }
  .home-page .who-story { font-size: var(--mobile-type-body); }
  .home-page .service-card p,
  .home-page .timeline-card p,
  .home-page .faq details p { font-size: var(--mobile-type-compact-body); }
}

/* ---------- Back-to-top button ---------- */
.site-tools {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 95;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--bc-ink);
}
.site-tools button { color: inherit; font: inherit; cursor: pointer; }
.site-tools,
.back-to-top { right: max(24px, env(safe-area-inset-right)); }
.site-tools__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--bc-white);
  border-radius: var(--radius-pill);
  background: var(--bc-navy);
  color: var(--bc-white) !important;
  box-shadow: 0 4px 16px rgba(0,46,126,.22);
}
.site-tools__trigger:hover,
.site-tools__trigger[aria-expanded="true"] { background: var(--bc-bright-blue); }
.site-tools__trigger svg { width: 26px; height: 26px; }
.site-tools__panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(350px, calc(100vw - 40px));
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bc-white);
  border: 1px solid var(--bc-fine-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,46,126,.2);
}
.site-tools__panel[hidden] { display: none; }
.site-tools__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--bc-navy); color: var(--bc-white); }
.site-tools__header h2 { margin: 0; color: inherit; font-family: var(--font-heading); font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: normal; }
.site-tools__close { width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-size: 28px !important; line-height: 1; }
.site-tools__close:hover { border-color: currentColor; }
.site-tools__content { padding: 4px 18px; }
.site-tools__row { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--bc-fine-border); }
.site-tools__stepper { display: flex; align-items: center; gap: 4px; }
.site-tools__stepper button,
.site-tools__toggle,
.site-tools__reset { min-width: 44px; min-height: 44px; border: 1px solid var(--bc-fine-border); border-radius: var(--radius-sm); background: var(--bc-blue-50); font-weight: 600 !important; }
.site-tools__stepper button:hover:not(:disabled),
.site-tools__toggle:hover,
.site-tools__reset:hover:not(:disabled) { border-color: var(--bc-bright-blue); color: var(--bc-bright-blue); }
.site-tools__stepper button:disabled,
.site-tools__reset:disabled { opacity: .5; cursor: default; }
.site-tools__amount { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.site-tools__toggle { min-width: 58px; }
.site-tools__toggle[aria-pressed="true"] { background: var(--bc-bright-blue); border-color: var(--bc-bright-blue); color: var(--bc-white); }
.site-tools__footer { padding: 14px 18px 18px; }
.site-tools__reset { width: 100%; }
.site-tools__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-tools button:focus-visible { outline: 3px solid var(--bc-bright-blue); outline-offset: 3px; }
.site-tools__header button:focus-visible { outline-color: var(--bc-white); }
html[data-access-text-size="1"] { --access-text-scale: 1.12; font-size: 112%; }
html[data-access-text-size="2"] { --access-text-scale: 1.25; font-size: 125%; }
html[data-access-text-size] {
  --type-body: calc(17px * var(--access-text-scale));
  --type-small: calc(13px * var(--access-text-scale));
  --type-eyebrow: calc(12px * var(--access-text-scale));
  --type-lead: clamp(calc(18px * var(--access-text-scale)), 1.5vw, calc(22px * var(--access-text-scale)));
}
html[data-access-contrast] {
  --bc-ink-soft: #0A1733;
  --bc-mute: #263858;
  --bc-fine-border: #627393;
  --text-mute: #263858;
}
html[data-access-contrast] :is(.text-on-dark, .section--dark, .footer, .site-footer) { --text-mute: var(--bc-white); }
html[data-access-underline-links] a { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: .2em !important; }
html[data-access-reduced-motion],
html[data-access-reduced-motion] *,
html[data-access-reduced-motion] *::before,
html[data-access-reduced-motion] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html[data-access-reduced-motion] :is(.timeline-card--pending, .service-detail--pending, .team-card--pending, .stat-card.is-pending) { opacity: 1 !important; transform: none !important; }
html[data-access-reduced-motion] .team-card__media { clip-path: none !important; opacity: 1 !important; transform: none !important; }
html[data-access-reduced-motion] .team-grid--motion .team-card__identity { opacity: 1 !important; transform: none !important; }
@media (max-width: 480px) {
  .site-tools,
  .back-to-top { right: max(20px, env(safe-area-inset-right)); }
  .site-tools { bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (forced-colors: active) {
  .site-tools__trigger, .site-tools__panel, .site-tools button { border-color: ButtonText; }
}

.back-to-top {
  position: fixed;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 64px));
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bc-navy);
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 4px 16px rgba(0,46,126,0.22);
}
.back-to-top svg { display: block; pointer-events: none; }

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--bc-navy-700);
  box-shadow: 0 6px 20px rgba(0,46,126,0.32);
}

@media (prefers-reduced-motion: reduce) {
  .showreel__announcement,
  .showreel__play-btn,
  .showreel__fs-btn,
  .team-card__media,
  .team-card__media img,
  .team-card__identity,
   .team-card__media::before,
   .team-section::before,
  .team-section::after,
  .site-header__inner,
  .brand img,
  .back-to-top { transition: none; }
  .team-card:hover .team-card__media,
  .team-card:hover .team-card__media img { transform: none; }
  .team-grid--motion .team-card__media,
  .team-grid--motion .team-card--pending .team-card__media {
    clip-path: inset(0 0 0 0 round var(--radius-md));
    opacity: 1;
  }
  .team-grid--motion .team-card__identity,
  .team-grid--motion .team-card--pending .team-card__identity { opacity: 1; transform: none; }
}

/* Product / Commercial portrait poster gallery */
.portfolio-page .portfolio-poster-grid--product {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 1.7vw, 24px);
  width: 100%;
}
.portfolio-page .portfolio-project-poster {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out);
}
.portfolio-page .portfolio-project-poster__image-link {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(30,91,198,0.16);
  border-radius: var(--radius-lg);
  background: var(--bc-navy);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.portfolio-page .portfolio-project-poster__image-link:focus-visible,
.portfolio-page .portfolio-project-poster__title-link:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: 4px;
}
.portfolio-page .portfolio-project-poster__image-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  transition: transform var(--dur-base) var(--ease-out);
}
.portfolio-page .portfolio-project-poster figcaption {
  display: flex;
  flex: 1;
  align-items: flex-start;
  padding: 14px 2px 0;
}
.portfolio-page .portfolio-project-poster h3 {
  margin: 0;
  color: var(--bc-navy);
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.16;
}
.portfolio-page .portfolio-project-poster__title-link {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-page .portfolio-project-poster:hover,
  .portfolio-page .portfolio-project-poster:focus-within { transform: translateY(-5px); }
  .portfolio-page .portfolio-project-poster:hover .portfolio-project-poster__image-link,
  .portfolio-page .portfolio-project-poster:focus-within .portfolio-project-poster__image-link { box-shadow: var(--shadow-lift); }
  .portfolio-page .portfolio-project-poster:hover .portfolio-project-poster__image-link img,
  .portfolio-page .portfolio-project-poster:focus-within .portfolio-project-poster__image-link img { transform: scale(1.035); }
  .portfolio-page .portfolio-project-poster:hover .portfolio-project-poster__title-link,
  .portfolio-page .portfolio-project-poster:focus-within .portfolio-project-poster__title-link {
    color: var(--bc-bright-blue);
    text-decoration-color: currentColor;
  }
}
@media (max-width: 699px) {
  .portfolio-page .portfolio-poster-grid--product { grid-template-columns: 1fr; width: min(100%, 420px); }
  .portfolio-page .portfolio-project-poster figcaption { padding-top: 12px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .portfolio-page .portfolio-poster-grid--product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-page .portfolio-project-poster,
  .portfolio-page .portfolio-project-poster__image-link,
  .portfolio-page .portfolio-project-poster__image-link img,
  .portfolio-page .portfolio-project-poster__title-link { transition: none; }
  .portfolio-page .portfolio-project-poster:hover,
  .portfolio-page .portfolio-project-poster:focus-within { transform: none; }
}

/* Miscellaneous: show the Hospitality YouTube thumbnail without an overlaid poster treatment. */
.portfolio-page #hospitality-showreel {
  width: min(100%, 520px);
  overflow: visible;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.portfolio-page #hospitality-showreel .portfolio-card__media {
  overflow: hidden;
  border: 1px solid rgba(30,91,198,0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.portfolio-page #hospitality-showreel .portfolio-card__caption {
  position: static;
  display: block;
  padding: 14px 2px 0;
  color: var(--bc-navy);
}
.portfolio-page #hospitality-showreel .portfolio-card__caption h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.16;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.portfolio-page #hospitality-showreel .portfolio-card__anchor:focus-visible {
  outline: 3px solid var(--bc-bright-blue);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-page #hospitality-showreel:hover .portfolio-card__media,
  .portfolio-page #hospitality-showreel:focus-within .portfolio-card__media { box-shadow: var(--shadow-lift); }
  .portfolio-page #hospitality-showreel:hover .portfolio-card__media img,
  .portfolio-page #hospitality-showreel:focus-within .portfolio-card__media img { transform: scale(1.035); }
  .portfolio-page #hospitality-showreel:hover .portfolio-card__caption h3,
  .portfolio-page #hospitality-showreel:focus-within .portfolio-card__caption h3 {
    color: var(--bc-bright-blue);
    text-decoration-color: currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-page #hospitality-showreel .portfolio-card__media,
  .portfolio-page #hospitality-showreel .portfolio-card__media img,
  .portfolio-page #hospitality-showreel .portfolio-card__caption h3 { transition: none; }
}