/* ===== Fonts ===== */
/* woff2 first (≈41% smaller), OTF kept as a fallback for older engines. */
@font-face { font-family: 'Ruberoid'; src: url('assets/fonts/Ruberoid-Light.woff2') format('woff2'), url('assets/fonts/Ruberoid-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Ruberoid'; src: url('assets/fonts/Ruberoid-Regular.woff2') format('woff2'), url('assets/fonts/Ruberoid-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Ruberoid'; src: url('assets/fonts/Ruberoid-Medium.woff2') format('woff2'), url('assets/fonts/Ruberoid-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Ruberoid'; src: url('assets/fonts/Ruberoid-SemiBold.woff2') format('woff2'), url('assets/fonts/Ruberoid-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Ruberoid'; src: url('assets/fonts/Ruberoid-Bold.woff2') format('woff2'), url('assets/fonts/Ruberoid-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Ruberoid'; src: url('assets/fonts/Ruberoid-ExtraBold.woff2') format('woff2'), url('assets/fonts/Ruberoid-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }

/* ===== Tokens ===== */
:root {
  --font-display: 'Ruberoid', system-ui, -apple-system, sans-serif;
  --bv-coral: #ff5e3e;
  --bv-blue: #63b9ec;
  --bv-cream: #ede8df;
  --bv-ink: #10151a;     /* text + buttons , unified to the bluish-black */
  --bv-dark: #10151a;    /* alias , same bluish-black */
  --bv-navy: #10151a;    /* bluish-black , dominant dark across all surfaces */
  --bv-surface: #161b21; /* raised bluish surface for cards/frames (gives depth) */
  /* Content frame , caps how wide content runs on big screens; gutters grow beyond this */
  --content-max: 1850px;
  --gutter: max(40px, 2.6vw, (100% - var(--content-max)) / 2);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  font-family: var(--font-display);
  background: var(--bv-cream);
  color: var(--bv-ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bv-dark); }
::-webkit-scrollbar-thumb { background: var(--bv-coral); border-radius: 4px; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* Honeypot: present in the DOM (so bots fill it) but off-screen and inert for humans. */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Keyboard skip link , off-screen until focused, then slides in over the nav. */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 16px; background: var(--bv-coral); color: var(--bv-ink); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; border-radius: 8px; transform: translateY(-180%); transition: transform 0.2s ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.container { width: min(100% - 40px, 1080px); margin-inline: auto; }

/* Perf , let the browser skip rendering/decoding offscreen sections on this long page */
.intro, .work, .clients, .contact { content-visibility: auto; }
.intro { contain-intrinsic-size: auto 770px; }
.work { contain-intrinsic-size: auto 1140px; }
.clients { contain-intrinsic-size: auto 760px; }
.contact { contain-intrinsic-size: auto 860px; }

/* ===== Nav ===== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--bv-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-nav .logo img { height: 34px; width: auto; }
.menu-btn {
  display: flex; align-items: center; gap: 14px;
  background: var(--bv-coral); border: 2px solid var(--bv-coral); color: var(--bv-ink);
  padding: 13px 22px; border-radius: 100px;
  transition: 0.3s ease;
}
.menu-label { font-weight: 800; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.menu-icon { position: relative; width: 26px; height: 16px; flex-shrink: 0; }
.menu-icon span { position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--bv-ink); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; }
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 7px; }
.menu-icon span:nth-child(3) { top: 14px; }
.menu-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.menu-btn:active { transform: scale(0.94); }
.menu-btn:hover .menu-icon span:nth-child(1) { transform: translateX(5px); }
.menu-btn:hover .menu-icon span:nth-child(3) { transform: translateX(-5px); }
.menu-btn.tapped .menu-icon span:nth-child(1) { transform: translateX(13px); opacity: 0; }
.menu-btn.tapped .menu-icon span:nth-child(3) { transform: translateX(-13px); opacity: 0; }
.menu-btn.tapped .menu-icon span:nth-child(2) { transform: scaleX(1.15); }

/* ===== Hero ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--bv-navy); color: #fff; }
.hero-inner { position: relative; z-index: 1; width: 100%; padding: 80px var(--gutter); display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; }

.hero-title { margin: 0 0 32px; font-weight: 800; font-size: clamp(56px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase; }
.hero-title .ht-accent { color: var(--bv-coral); }
.hero-sub { margin: 0 0 36px; max-width: 510px; font-size: 18px; line-height: 1.3; color: rgba(255,255,255,0.7); }
.hero-sub--mob { display: none; }

.showreel { display: inline-flex; align-items: center; gap: 14px; padding: 13px 26px 13px 13px; background: transparent; border: 2px solid rgba(255,255,255,0.4); border-radius: 100px; transition: background 0.25s ease, border-color 0.25s ease; }
.showreel:hover { background: var(--bv-coral); border-color: var(--bv-coral); }
.showreel:hover .wsr-label { color: var(--bv-ink); }
.wsr-dot { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.wsr-tri { width: 0; height: 0; margin-left: 2px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--bv-dark); }
.wsr-label { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }

.hero-media { position: relative; height: 520px; display: flex; align-items: flex-end; }
.video-card { position: absolute; right: 0; bottom: 0; width: 95%; box-sizing: content-box; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 4px solid #fff; background: #fff; box-shadow: 24px 24px 0 0 var(--bv-blue); transform: rotate(-2deg); transition: box-shadow 0.3s ease; cursor: pointer; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.play { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #fff; border: 2.5px solid rgba(255,255,255,0.4); transition: background 0.3s ease; }
.play-tri { width: 0; height: 0; margin-left: 3px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid var(--bv-ink); transition: border-left-color 0.3s ease; }
.card-showreel { display: none; }
.card-showreel:hover,
.video-card:hover .card-showreel,
.hero-inner:has(.showreel:hover) .card-showreel { background: var(--bv-coral); border-color: var(--bv-coral); color: var(--bv-ink); }

/* Hover , the card and its accents turn coral */
.video-card:hover { box-shadow: 24px 24px 0 0 var(--bv-coral); }
.video-card:hover .play { background: var(--bv-coral); }
.video-card:hover .play-tri { border-left-color: #10151a; }
/* hovering Watch Showreel tints the video card's play button (and accent) */
.hero-inner:has(.showreel:hover) .video-card { box-shadow: 24px 24px 0 0 var(--bv-coral); }
.hero-inner:has(.showreel:hover) .play { background: var(--bv-coral); }
.hero-inner:has(.showreel:hover) .play-tri { border-left-color: #10151a; }

.explore { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; background: none; border: none; }
.explore:hover .explore-label { color: rgba(255,255,255,0.85); }
.explore-label { font-weight: 700; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
/* The arrow now lives outside the zoomed .stage (fixed to the viewport), so the
   bounce renders smoothly at every width , no zoom re-raster, no flicker. */
.explore svg { animation: bvdScrollHint 1.8s ease-in-out infinite; }

/* ===== Intro , Who We Are accordion ===== */
.intro { background: #fff; padding: 180px 0; }
.intro-inner { padding: 0 var(--gutter); }
.accordion { border-top: 1px solid rgba(0, 0, 0, 0.14); }
.acc-item { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.acc-head { width: 100%; display: flex; align-items: center; gap: 28px; padding: 34px 0; background: none; border: none; text-align: left; cursor: pointer; }
.acc-title { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--bv-ink); transition: opacity 0.25s ease; }
/* Subtle chevron on every intro-accordion line (desktop + mobile), flips when open. */
.acc-head::after { content: ''; flex: none; width: 13px; height: 13px; margin-top: -6px; border-right: 2px solid rgba(16, 21, 26, 0.28); border-bottom: 2px solid rgba(16, 21, 26, 0.28); transform: rotate(45deg); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.acc-item.open .acc-head::after { transform: rotate(225deg); margin-top: 6px; }
/* Dim-on-hover only on real pointers. On touch, :hover sticks after a tap, so the
   tapped heading would stay greyed (opacity 0.5) until you tap elsewhere. */
@media (hover: hover) { .acc-head:hover .acc-title { opacity: 0.5; } }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-text { margin: 0; padding: 0 40px 40px 0; max-width: 50%; font-size: 18px; line-height: 1.3; color: rgb(85, 82, 74); }

/* ===== Footer ===== */
/* One divider for EVERY viewport: a 1px pseudo-element (a plain 1px border
   subpixel-vanishes on some phones + gets thinned by the desktop zoom). Same
   mechanism + opacity everywhere; the desktop band divides the height back out
   by the stage zoom so the rendered line stays ~1px there too. */
.site-footer { background: var(--bv-navy); position: relative; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.28); pointer-events: none; }
.footer-desktop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 36px var(--gutter); }
.footer-mobile { display: none; }
.footer-logo-link { display: inline-flex; line-height: 0; }
.footer-logo { height: 22px; opacity: 0.4; transition: opacity 0.25s ease; }
.footer-logo-link:hover .footer-logo { opacity: 0.7; }
.footer-copy { margin: 0; font-size: 12px; letter-spacing: 0.06em; color: rgb(46, 46, 46); text-align: center; white-space: nowrap; }
.footer-right { display: flex; align-items: center; justify-self: end; }
.footer-legal { display: flex; gap: 28px; }
.footer-legal a { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(46, 46, 46); transition: color 0.25s ease; text-decoration: none; }
.footer-legal a:hover { color: rgba(255, 255, 255, 0.75); }
.fm-legal { display: flex; gap: 18px; padding: 16px 0 0; }
.fm-legal a { font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); text-decoration: none; }
/* Narrow desktop: the right group is too wide to keep the copyright centred on one
   line, so drop it onto its own centred row (logo + links stay on the top row). */
@media (min-width: 769px) and (max-width: 1100px) {
  .footer-desktop { grid-template-columns: 1fr 1fr; grid-template-areas: "logo right" "copy copy"; row-gap: 20px; }
  .footer-logo-link { grid-area: logo; }
  .footer-right { grid-area: right; }
  .footer-copy { grid-area: copy; }
}

/* ===== Legal pages (privacy / terms / cookies) , dark accordion design ===== */
.legal-page { background: var(--bv-navy); }
.legal { background: var(--bv-navy); min-height: 100vh; padding: 150px 0 110px; color: #fff; }
.legal-inner { width: 100%; padding: 0 var(--gutter); } /* same frame as the nav + rest of the site */
.legal-hero { position: relative; padding: 0 0 36px; overflow: hidden; }
.legal-hero-title { position: relative; z-index: 1; margin: 0; font-size: clamp(34px, 5vw, 68px); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.legal-hero-title .lh-accent { color: var(--bv-coral); }
.legal-hero-watermark { position: absolute; z-index: 0; top: 50%; right: 0; transform: translateY(-52%); font-size: clamp(64px, 11vw, 168px); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.05); pointer-events: none; user-select: none; white-space: nowrap; }
/* sidebar width = the hero tagline's first-line width, so the card's right edge lines up with "THE FINE PRINT," */
.legal-layout { display: grid; grid-template-columns: 573px minmax(0, 1fr); gap: clamp(40px, 4.5vw, 96px); align-items: start; }
.legal-head { align-self: start; background: #161c22; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 30px; }
.legal-switch { display: flex; gap: 7px; background: #0f141a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; padding: 5px; margin-bottom: 24px; }
.legal-switch a { flex: 1; text-align: center; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); padding: 9px 6px; border-radius: 100px; text-decoration: none; transition: color 0.2s, background 0.2s; }
.legal-switch a:hover { color: #fff; }
.legal-switch a.on { background: var(--bv-coral); color: #fff; }
.legal-title { font-size: clamp(34px, 4vw, 42px); font-weight: 800; line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.legal-updated { font-size: 13px; color: rgba(255, 255, 255, 0.62); margin: 0 0 26px; }
.legal-intro { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.6); margin-bottom: 28px; }
.legal-intro p { margin: 0 0 14px; }
.legal-intro p:last-child { margin-bottom: 0; }
.legal-intro a { color: var(--bv-coral); }
.legal-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.legal-acclist { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.legal-ctrl { background: none; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 100px; padding: 9px 16px; font-family: inherit; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: 0.18s; }
.legal-ctrl:hover { border-color: var(--bv-coral); color: #fff; }
.legal-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.la-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 17px 0; cursor: pointer; text-align: left; font-family: inherit; }
.la-title { font-size: clamp(14px, 1.7vw, 18px); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; }
.la-toggle { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: background 0.25s, border-color 0.25s, color 0.25s; }
.la-toggle svg { transition: transform 0.3s ease; }
.la-head:hover .la-toggle { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.legal-acc.is-open .la-toggle { background: var(--bv-coral); border-color: var(--bv-coral); color: #fff; }
.legal-acc.is-open .la-toggle svg { transform: rotate(180deg); }
.la-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.legal-acc.is-open .la-panel { grid-template-rows: 1fr; }
.la-panel-inner { overflow: hidden; min-height: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.62); max-width: 1000px; }
.la-panel-inner > :first-child { margin-top: 0; }
.la-panel-inner p { margin: 0 0 14px; }
.la-panel-inner p:last-child { margin-bottom: 28px; }
.la-panel-inner h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 18px 0 8px; }
.la-panel-inner ul { margin: 0 0 28px; padding-left: 20px; }
.la-panel-inner li { margin: 0 0 7px; }
.la-panel-inner a { color: var(--bv-coral); text-decoration: underline; text-underline-offset: 2px; }
.la-panel-inner strong { color: #fff; font-weight: 700; }
@media (max-width: 1500px) {
  /* below this the 573px sidebar would crowd the accordion, so stack to one column */
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-head { position: static; margin-bottom: 30px; }
  .legal-intro { max-width: 640px; }
}

/* Hidden until their breakpoint */
.logo-mark { display: none; }
.acc-num { display: none; }
.work-mobile { display: none; }

/* ===== Featured Work ===== */
.work { background: var(--bv-navy); padding: 84px var(--gutter) 104px; }
.work-grid { display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: stretch; }
.work-list-col { display: flex; flex-direction: column; }
.work-badge { display: none; }
.work-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bv-coral); }
.work-title { margin: 20px 0 22px; font-weight: 800; font-size: clamp(44px, 4vw, 62px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.work-title span { color: var(--bv-coral); }
.work-list { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.work-item { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 2px; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: none; cursor: pointer; text-align: left; text-decoration: none; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.work-num { width: 24px; flex: 0 0 auto; font-weight: 800; font-size: 13px; color: rgba(255, 255, 255, 0.6); transition: color 0.25s; }
.work-meta { flex: 1; min-width: 0; }
.work-name { display: block; font-weight: 800; font-size: 19px; color: rgba(255, 255, 255, 0.6); transition: color 0.25s; }
.work-client { display: block; margin-top: 2px; font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.work-arrow { flex: 0 0 auto; font-size: 18px; color: transparent; transition: color 0.25s; }
.work-item.is-active .work-num, .work-item:hover .work-num { color: var(--bv-coral); }
.work-item.is-active .work-name, .work-item:hover .work-name { color: #fff; }
.work-item.is-active .work-arrow, .work-item:hover .work-arrow { color: var(--bv-coral); }
.work-actions { display: flex; gap: 14px; margin-top: 37px; }
.btn-pill { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--bv-ink); border: 2px solid #fff; padding: 14px 26px; border-radius: 100px; font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; transition: 0.25s; }
.btn-pill:hover { background: var(--bv-coral); border-color: var(--bv-coral); color: var(--bv-ink); }
/* Option C , matte-framed plate */
.work-feature { align-self: start; margin-top: 110px; background: var(--bv-surface); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 18px; }
.wf-plate { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 40 / 20; background: var(--bv-navy); } /* trimmed crop, even top/bottom framing */
.work-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 64%; opacity: 0; transition: opacity 0.5s; }
.work-img.is-active { opacity: 1; }
.wf-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 10px 6px; }
.wf-meta { display: flex; align-items: center; gap: 20px; min-width: 0; }
.wf-num { flex: 0 0 auto; font-weight: 800; font-size: 32px; line-height: 1; color: var(--bv-coral); }
.wf-div { flex: 0 0 auto; width: 1px; height: 42px; background: rgba(255, 255, 255, 0.18); }
.wf-text { min-width: 0; }
.wf-client { font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 5px; }
.wf-name { margin: 0; font-weight: 800; font-size: 30px; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
.wf-view { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; background: var(--bv-coral); color: var(--bv-ink); border: none; border-radius: 100px; padding: 13px 22px; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: 0.25s; }
.wf-view:hover { background: #fff; color: var(--bv-ink); }

/* ===== Clients , testimonial + brand grid ===== */
.clients { background: #fff; padding: 180px 0; position: relative; overflow: hidden; }
.clients-inner { padding: 0 var(--gutter); } /* same content frame as the rest of the site */
.clients-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 20px; overflow: hidden; }
.testi { position: relative; padding: 44px 48px; border-right: 1px solid rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; justify-content: flex-start; }
.testi-quote { position: absolute; top: 29px; right: 46px; width: 104px; height: 80px; fill: var(--bv-blue); transition: fill 0.4s; }
.testi-title { display: inline-block; align-self: flex-start; max-width: calc(100% - 160px); margin: 0 0 28px; padding-bottom: 20px; font-weight: 800; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; text-transform: uppercase; color: var(--bv-ink); border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.testi-text { margin: 0 0 30px; max-width: 860px; font-weight: 400; font-size: 30px; line-height: 1.3; color: rgb(46, 46, 46); font-style: oblique 8deg; }
.testi-author { padding-left: 20px; border-left: 4px solid var(--bv-blue); transition: border-color 0.4s; }
.testi-name { font-weight: 800; font-size: 16px; color: var(--bv-ink); }
.testi-role, .testi-co { font-weight: 400; font-size: 13px; color: rgb(136, 136, 136); }
.testi-controls { margin-top: auto; padding-top: 32px; display: flex; align-items: center; justify-content: space-between; }
.testi-dots { display: flex; align-items: center; gap: 8px; }
.testi-dot { position: relative; width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: rgba(0, 0, 0, 0.18); cursor: pointer; transition: width 0.3s, background 0.3s; }
/* Invisible ~28px tall hit area so the 8px dots meet minimum tap-target size. */
.testi-dot::before { content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px; }
.testi-dot.is-active { width: 28px; background: var(--bv-blue); }
.testi-actions { display: flex; align-items: center; gap: 16px; }
.btn-outline-dark { background: transparent; color: var(--bv-ink); border: 1.5px solid rgba(0, 0, 0, 0.25); border-radius: 100px; padding: 14px 26px; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: 0.25s; }
.btn-outline-dark:hover { background: var(--bv-ink); color: #fff; border-color: var(--bv-ink); }
.testi-cta { display: none; }
.testi-nav { display: flex; gap: 12px; }
.testi-nav button { width: 50px; height: 50px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(0, 0, 0, 0.2); color: var(--bv-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.25s; }
.testi-nav button:hover { background: var(--bv-ink); color: #fff; border-color: var(--bv-ink); }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.brand-cell { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 0 10px; border-right: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.brand-cell:nth-child(3n) { border-right: none; }
.brand-cell:nth-child(n+7) { border-bottom: none; }
.brand-cell img { display: block; width: auto; height: auto; max-width: var(--lw, 60%); max-height: var(--lh, 48px); }
/* per-logo optical sizing , order matches the grid */
.brand-cell:nth-child(1) { --lw: 66%; --lh: 40px; } /* Dell Technologies */
.brand-cell:nth-child(2) { --lw: 54%; --lh: 92px; } /* Red Bull */
.brand-cell:nth-child(3) { --lw: 50%; --lh: 96px; } /* Virgin Megastore */
.brand-cell:nth-child(4) { --lw: 74%; --lh: 52px; } /* Alienware */
.brand-cell:nth-child(5) { --lw: 54%; --lh: 70px; } /* Peermont */
.brand-cell:nth-child(6) { --lw: 66%; --lh: 44px; } /* Stargems */
.brand-cell:nth-child(7) { --lw: 42%; --lh: 50px; } /* Intel */
.brand-cell:nth-child(8) { --lw: 50%; --lh: 74px; } /* Reign */
.brand-cell:nth-child(9) { --lw: 54%; --lh: 62px; } /* Axiz */

/* ===== Contact ===== */
.contact { background: var(--bv-navy); }
.contact-inner { padding: 104px var(--gutter) 120px; } /* top 104; bottom 120 so visual gap after the 16px coral shadow = 104, matching Work */
.contact-card { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; overflow: hidden; box-shadow: 16px 16px 0 0 var(--bv-coral); }
.contact-left { background: var(--bv-dark); border-radius: 24px 0 0 24px; padding: 56px; display: flex; flex-direction: column; min-width: 0; }
.contact-eyebrow { margin-bottom: 24px; font-weight: 800; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bv-coral); }
.contact-title { margin: 0 0 24px; font-weight: 800; font-size: clamp(32px, 2.6vw, 44px); line-height: 1; text-transform: uppercase; color: #fff; }
.contact-lead { margin: 0 0 auto; max-width: 320px; font-size: 16px; line-height: 1.3; color: rgba(255, 255, 255, 0.55); }
.contact-details { display: flex; flex-direction: column; gap: 24px; margin: 40px 0 36px; }
.cd-label { margin-bottom: 8px; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.cd-value { font-weight: 700; font-size: 17px; color: #fff; transition: color 0.25s; }
a.cd-value:hover { color: var(--bv-coral); }
.contact-social { display: flex; align-items: center; gap: 14px; }
.cs-circle { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; color: #fff; transition: 0.25s; }
.cs-circle:hover { background: var(--bv-coral); color: var(--bv-ink); border-color: var(--bv-coral); }
.cs-portfolio { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: #fff; border-radius: 100px; white-space: nowrap; transition: 0.25s; }
.cs-portfolio span { font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bv-ink); }
.cs-portfolio:hover { background: var(--bv-coral); }
.contact-form { background: #fff; border-radius: 0 24px 24px 0; padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.cf-title { margin: 0 0 36px; font-weight: 800; font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bv-ink); }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.cf-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.18); outline: none; padding: 14px 2px; font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--bv-ink); transition: border-color 0.2s; }
.cf-input::placeholder { color: rgba(0, 0, 0, 0.4); }
/* Focus = coral underline only. No box/outline around the field. Flag invalid
   only when the field has content (a real format error) , an emptied field just
   returns to neutral on blur instead of staying "highlighted". */
.cf-input:focus { border-color: var(--bv-coral); }
.cf-input:user-invalid:not(:placeholder-shown) { border-color: #e5484d; }
.cf-msg { grid-column: 1 / -1; resize: none; }
.cf-submit { display: flex; justify-content: flex-end; margin-top: 40px; }
.cf-send { background: var(--bv-ink); color: #fff; border: 2px solid var(--bv-ink); border-radius: 100px; padding: 18px 38px; font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: 0.25s; }
.cf-send:hover { background: var(--bv-coral); border-color: var(--bv-coral); color: var(--bv-ink); }

/* ===== Menu drawer ===== */
section[id], .hero { scroll-margin-top: 90px; }
.menu-overlay { position: fixed; inset: 0; z-index: 600; }
.menu-overlay[hidden] { display: none; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.45s ease; }
.menu-overlay.is-open .menu-backdrop { opacity: 1; }
.menu-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 700; width: 560px; max-width: 90vw; background: var(--bv-dark); border-left: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(34px); opacity: 0; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.menu-overlay.is-open .menu-drawer { transform: translateX(0); opacity: 1; }
.md-head { display: flex; align-items: center; justify-content: space-between; padding: 34px 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.md-logo { height: 20px; display: block; position: relative; top: 3px; }
.md-head .md-label { display: block; margin-bottom: 0; line-height: 1; position: relative; top: 3px; } /* MENU label in header (desktop), optically centered with the X */
.md-nav .md-label { display: none; } /* nav label hidden on desktop (lives in header) */
.md-close { position: relative; width: 26px; height: 26px; background: none; border: none; cursor: pointer; }
.md-close span { position: absolute; left: 0; top: 12px; width: 100%; height: 2.5px; background: #fff; border-radius: 2px; transition: background 0.25s; }
.md-close span:nth-child(1) { transform: rotate(45deg); }
.md-close span:nth-child(2) { transform: rotate(-45deg); }
.md-close:hover span { background: var(--bv-coral); }
.md-nav { flex: 1; padding: 44px 56px 30px; }
.md-label { margin-bottom: 28px; font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.md-link { display: flex; align-items: baseline; gap: 22px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.md-num { font-weight: 700; font-size: 13px; color: var(--bv-coral); }
.md-word { font-weight: 800; font-size: 44px; line-height: 1; text-transform: uppercase; color: #fff; transition: color 0.3s, transform 0.3s; }
.md-link:hover .md-word { color: var(--bv-coral); transform: translateX(6px); }
.md-nav .md-link:last-child { border-bottom: none; } /* no divider under the last item (Contact) */
.md-legal { display: flex; justify-content: flex-start; gap: 22px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(16, 21, 26, 0.18); }
.md-legal a { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bv-ink); text-decoration: none; transition: opacity 0.2s ease; }
.md-legal a:hover { opacity: 0.65; }
.md-foot { background: var(--bv-coral); padding: 32px 56px; }
.md-foot-label { margin-bottom: 18px; font-weight: 700; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(16, 21, 26, 0.85); }
.md-contact { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.md-contact--last { border-bottom: none; }
.md-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--bv-ink); display: flex; align-items: center; justify-content: center; color: var(--bv-coral); }
.md-cl { display: block; font-weight: 500; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); }
.md-cval { display: block; font-weight: 800; font-size: 17px; color: var(--bv-ink); }
.md-social { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.md-soc { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; color: var(--bv-ink); transition: 0.25s; }
.md-soc:hover { background: var(--bv-ink); color: #fff; border-color: var(--bv-ink); }
.md-portfolio { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 11px 18px; background: var(--bv-ink); border-radius: 100px; white-space: nowrap; transition: 0.25s; }
.md-portfolio span { font-weight: 800; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.md-portfolio:hover { transform: translateY(-1px); }

/* ===== Modals ===== */
.bv-modal { position: fixed; inset: 0; z-index: 800; display: none; align-items: center; justify-content: center; padding: 24px; }
.bv-modal.is-open { display: flex; }
/* No backdrop-filter: a full-screen blur is re-rasterised by the compositor during
   any in-modal scroll/animation (made the gallery slide very choppy). At 0.9 opacity
   over the dark page the frosted effect was barely visible anyway. */
.bv-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 8, 11, 0.9); opacity: 0; transition: opacity 0.3s ease; }
.bv-modal.is-open .bv-modal__backdrop { opacity: 1; }
.bv-modal__card { position: relative; z-index: 1; max-height: calc(100svh - 48px); overflow: auto; scrollbar-width: none; opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.bv-modal.is-open .bv-modal__card { opacity: 1; transform: none; }
.bv-modal__card::-webkit-scrollbar { width: 0; height: 0; }

/* Feedback + Contact modals , stacked card (dark hero -> colour seam -> white body) */
/* overflow:hidden clips the rounded corners crisply (an overflow:auto scroll
   container leaves a 1px white sliver at the corners). Scrolling moves to the
   inner .bvm-scroll so tall modals still scroll on short screens. */
/* Card bg is transparent (not white) so there is NO white layer behind the dark
   hero to bleed through the rounded corners. The white belongs to the body/form
   only. overflow:hidden clips crisply; scrolling lives on the inner .bvm-scroll. */
.bvm-card { width: min(560px, 100%); background: transparent; border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); color: #111; overflow: hidden; max-height: none; }
.bvm-scroll { max-height: calc(100svh - 48px); overflow-y: auto; scrollbar-width: none; }
.bvm-scroll::-webkit-scrollbar { width: 0; height: 0; }
.bvm-x { position: absolute; top: 16px; right: 16px; z-index: 8; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.bvm-x:hover { background: var(--bv-coral); border-color: var(--bv-coral); transform: rotate(90deg); }
.bvm-x svg { width: 14px; height: 14px; }
.bvm-hero { background: linear-gradient(160deg, #161b21, #0d0d0d); padding: 34px 36px 30px; }
.bvm-hero--thanks { padding: 44px 36px 38px; text-align: center; }
.bvm-ey { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bv-coral); margin-bottom: 14px; }
.bvm-hero--thanks .bvm-ey { margin-bottom: 12px; }
.bvm-htitle { font-weight: 800; font-size: 38px; text-transform: uppercase; color: #fff; letter-spacing: -0.02em; line-height: 0.9; margin: 0; }
.bvm-hero--thanks .bvm-htitle { font-size: 46px; }
.bvm-hsub { font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin: 18px 0 0; max-width: 340px; }
.bvm-check { width: 84px; height: 84px; border-radius: 50%; background: var(--bv-coral); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.bvm-seam { display: flex; height: 6px; }
.bvm-seam i { flex: 1; }
.bvm-seam i:nth-child(1) { background: #63b9ec; }
.bvm-seam i:nth-child(2) { background: #f4d35e; }
.bvm-seam i:nth-child(3) { background: #ff5e3e; }
.bvm-seam i:nth-child(4) { background: #ff92ce; }
.bvm-form { padding: 28px 36px 34px; background: #fff; }
.bvm-ratecard { background: #f4f1ea; border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bvm-rt { font-weight: 800; font-size: 14px; color: #111; text-transform: uppercase; }
.bvm-rs { font-weight: 400; font-size: 12px; color: #999; margin-top: 2px; }
.bvm-stars { display: flex; gap: 6px; flex: none; }
.bvm-star { font-size: 28px; line-height: 1; color: rgba(0, 0, 0, 0.18); cursor: pointer; background: none; border: none; padding: 0; transition: color 0.12s, transform 0.12s; }
.bvm-star.on { color: var(--bv-coral); }
.bvm-star:hover { transform: scale(1.14); }
.bvm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.bvm-field { display: block; }
.bvm-lbl { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 8px; display: block; }
.bvm-inp { width: 100%; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 10px; padding: 13px 14px; font-family: var(--font-display); font-size: 14px; color: #111; background: #fff; outline: none; transition: border-color 0.15s; }
.bvm-inp:focus { border-color: var(--bv-coral); }
.bvm-inp:user-invalid { border-color: #e5484d; }
.bvm-inp::placeholder { color: #aaa; }
textarea.bvm-inp { resize: none; margin-bottom: 22px; }
.bvm-submit { width: 100%; background: var(--bv-coral); color: #fff; border: none; border-radius: 100px; padding: 16px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s, transform 0.2s; }
.bvm-submit:hover { background: #111; transform: translateY(-2px); }
.bvm-body { padding: 32px 40px 38px; text-align: center; background: #fff; }
.bvm-bp { font-weight: 400; font-size: 15px; color: #555; line-height: 1.6; margin: 0 0 14px; }
.bvm-bp.sm { font-size: 14px; color: #888; margin: 0 0 28px; }
.bvm-back { display: inline-flex; align-items: center; gap: 10px; background: var(--bv-coral); color: #fff; border: none; border-radius: 100px; padding: 15px 30px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.bvm-back:hover { background: #111; transform: translateY(-2px); }
/* state toggle: form view by default, thank-you view when .is-thanks is set */
.bvm-hero--thanks, .bvm-body { display: none; }
.bvm-card.is-thanks .bvm-hero--form, .bvm-card.is-thanks .bvm-form { display: none; }
.bvm-card.is-thanks .bvm-hero--thanks { display: block; }
.bvm-card.is-thanks .bvm-body { display: block; }
/* Modal , phones: stack the rate card + form fields, trim padding (matches the design) */
@media (max-width: 560px) {
  .bvm-hero { padding: 30px 24px 26px; }
  .bvm-hero--thanks { padding: 38px 24px 32px; }
  .bvm-htitle { font-size: 32px; }
  .bvm-hero--thanks .bvm-htitle { font-size: 40px; }
  .bvm-form { padding: 24px 24px 28px; }
  .bvm-body { padding: 28px 24px 34px; }
  .bvm-ratecard { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bvm-grid2 { grid-template-columns: 1fr; gap: 14px; }
  .bvm-check { width: 78px; height: 78px; margin-bottom: 20px; }
}
@media (max-width: 380px) {
  .bvm-star { font-size: 25px; }
  .bvm-htitle { font-size: 29px; }
  .bvm-hero--thanks .bvm-htitle { font-size: 36px; }
}

/* Project detail modal */
.pj-card { width: min(1240px, 100%); background: var(--bv-navy); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 40px; color: #fff; }
/* Modal card scrolls vertically (.bv-modal__card overflow:auto); clip the horizontal
   axis so content is constrained to the card width instead of scrolling sideways
   (which was letting the nowrap intro pills drag the title/description wide). */
#projectModal .pj-card { overflow-x: hidden; }
/* Sticky (not absolute) so the close stays pinned to the top-right while the card
   scrolls. margin-left:auto right-aligns it; margin-bottom:-38px collapses its own
   height so it overlays the content below instead of pushing it down. */
.pj-close { position: absolute; top: 14px; right: 14px; z-index: 8; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.2); background: rgba(20, 24, 30, 0.92); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.pj-close:hover { background: rgba(255, 255, 255, 0.16); }
/* 3rd row (empty col 1) soaks up the height the tall media column adds, so the
   left column's intro + scope stay tight together instead of leaving a gap under
   the description. min-content pins rows 1-2 to their content; 1fr absorbs the rest. */
.pj-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "left media" "meta media" ". media"; grid-template-rows: min-content min-content 1fr; gap: 0 56px; align-items: start; }
.pj-left { grid-area: left; display: flex; flex-direction: column; min-width: 0; }
.pj-right { grid-area: media; }
.pj-meta { grid-area: meta; min-width: 0; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pj-pills { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pj-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100px; padding: 8px 16px; }
.pj-pill b { font-weight: 800; font-size: 12px; color: #fff; }
.pj-pill em { font-style: normal; font-weight: 500; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.pj-title { font-weight: 800; font-size: 42px; color: #fff; margin: 0 0 16px; line-height: 0.96; text-transform: uppercase; letter-spacing: -0.02em; }
.pj-desc { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); margin: 0 0 14px; }
.pj-desc:last-child { margin-bottom: 0; }
.pj-readmore { display: none; } /* desktop shows the full copy; the toggle is mobile-only */
.pj-rule { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 28px 0; }
.pj-sub { font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-top: 0; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.pj-tag { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 100px; padding: 9px 16px; font-weight: 700; font-size: 13px; color: #fff; }
.pj-tag i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.pj-stats { display: flex; gap: 12px; margin-top: 14px; }
.pj-stats > div { flex: 1; text-align: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 18px 0; }
.pj-stats b { display: block; font-weight: 800; font-size: 30px; color: #fff; line-height: 1; }
.pj-stats span { display: block; font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-top: 5px; }
.pj-actions { display: flex; gap: 12px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); flex-wrap: wrap; }
.pj-btn { flex: 1 1 auto; min-width: max-content; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 100px; padding: 14px 16px; text-decoration: none; font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: 0.12s; }
.pj-btn--play { background: var(--bv-coral); color: #fff; }
.pj-btn--play:hover { background: #fff; color: #10151a; }
.pj-btn--play:hover .pj-tri { border-left-color: #10151a; }
.pj-tri { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid #fff; }
.pj-btn--ghost { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.pj-btn--ghost:hover { background: #fff; border-color: #fff; color: #10151a; }
.pj-btn--be { background: #1769ff; color: #fff; }
.pj-btn--be:hover { background: #fff; color: #10151a; }
.pj-be { font-weight: 800; font-size: 16px; }
.pj-gic { display: inline-flex; align-items: center; }
.pj-gic svg { display: block; }
.pj-right { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.pj-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.pj-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

/* In-box Vimeo playback (hero showreel + project film). Vimeo's player keeps its
   own fullscreen button, so "enlarge to full screen" is built in. */
.bv-inline-video { position: absolute; inset: 0; z-index: 6; background: #000; border-radius: 20px; overflow: hidden; }
.bv-inline-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card.is-playing { transform: none; cursor: default; }
/* the project video box has a smaller frame radius */
.pj-video .bv-inline-video { border-radius: 12px; }
.pj-video-grad { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.3) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.75) 100%); }
.pj-dur { position: absolute; bottom: 14px; right: 14px; z-index: 3; flex: none; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 100px; }
.pj-play { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; transition: 0.12s; }
.pj-video:hover .pj-play { transform: scale(1.06); border-color: var(--bv-coral); }
.pj-video:hover .pj-play-dot { background: var(--bv-coral); }
.pj-video:hover .pj-play-tri { border-left-color: #10151a; }
.pj-play-dot { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.12s; }
.pj-play-tri { width: 0; height: 0; border-top: 11.5px solid transparent; border-bottom: 11.5px solid transparent; border-left: 18.7px solid var(--bv-ink); margin-left: 4px; transition: border-left-color 0.12s; }
/* hovering the Play Video button tints the video's play button coral */
.pj-card:has(.pj-btn--play:hover) .pj-play-dot { background: var(--bv-coral); }
.pj-card:has(.pj-btn--play:hover) .pj-play-tri { border-left-color: #10151a; }
.pj-card:has(.pj-btn--play:hover) .pj-play { border-color: var(--bv-coral); }
.pj-film { background: transparent; border: 0; border-radius: 0; padding: 0; }
.pj-film-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-bottom: 21px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 16px; gap: 10px 16px; }
.pj-film-meta { display: flex; align-items: center; gap: 10px; position: relative; top: 2px; } /* optical nudge: line-height:1 all-caps title reads high vs the taller button pill */
.pj-video-title { font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; line-height: 1; }
.pj-video-sub { display: none; }
/* Small count badge next to the VIDEOS label showing how many films the project has. */
.pj-vidcount { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; background: rgba(255, 94, 62, 0.16); color: var(--bv-coral); font-weight: 800; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.pj-vidcount[hidden] { display: none; }
.pj-gallery { background: transparent; border: 0; border-radius: 0; padding: 0; }
.pj-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 16px; gap: 12px; }
.pj-gallery-meta { padding-bottom: 5px; }
.pj-gallery-meta { display: flex; align-items: center; gap: 12px; }
.pj-gallery-title { font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; line-height: 1; }
.pj-gallery-count { display: none; }
.pj-gallery-ctrls { display: flex; align-items: center; gap: 12px; }
.pj-gallery-nav { display: flex; gap: 8px; }
.pj-gallery-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); background: transparent; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0; transition: 0.12s; }
.pj-gallery-nav button:hover { background: #fff; border-color: #fff; color: #10151a; }
/* align-items:flex-start is required: with the default stretch, Safari resolves
   each thumb's height from the flex row instead of its aspect-ratio, collapsing
   the box shorter than 4:3 on iOS (over-cropping the photo). flex-start lets
   aspect-ratio drive the height consistently on every engine. */
/* proximity (not mandatory): mandatory snap can bounce off the last image when it
   can't reach its start-alignment, yanking the user back. proximity only snaps
   when already close, so a swipe rests where the finger left it. */
.pj-thumbs { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.pj-thumbs::-webkit-scrollbar { display: none; }
/* translateZ(0) promotes each thumb to its own compositor layer so the strip
   scrolls on the GPU (no per-frame repaint) , keeps the slide smooth. */
.pj-thumb { flex: 0 0 64%; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; scroll-snap-align: start; transform: translateZ(0); }
.pj-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Multi-video , title tabs in the film header (rendered when 2+ videos): a pill
   segmented control, active tab = filled coral. Clicking swaps the player. */
.pj-vidtabs { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px; overflow-x: auto; scrollbar-width: none; }
.pj-vidtabs[hidden] { display: none; } /* class display would otherwise beat the hidden attribute */
.pj-vidtabs::-webkit-scrollbar { display: none; }
.pj-vidtab { display: inline-flex; align-items: center; gap: 7px; flex: none; background: none; border: 0; padding: 9px 18px; border-radius: 100px; font: inherit; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, background 0.15s ease; }
.pj-vidtab:hover { color: #fff; }
.pj-vidtab.is-active { background: var(--bv-coral); color: #fff; }
.pj-vidtab.is-active:hover { color: #fff; }
/* play triangle shows on the active pill only */
.pj-vidtab-tri { display: none; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid currentColor; }
.pj-vidtab.is-active .pj-vidtab-tri { display: block; }
/* In the popup the close (X) sits in the top-right corner, so keep the tabs clear of it. */
#projectModal .pj-vidtabs { margin-right: 18px; }

/* ===== Project standalone page (/projects/<slug>) =====
   Reuses the .pj-card design in normal page flow (not a modal). nav is fixed so
   the page needs top clearance; the card is capped + centred like a content page. */
.project-page { background: var(--bv-ink); }
.pj-page { background: var(--bv-ink); min-height: 100vh; padding: 132px 0 100px; color: #fff; }
.pj-page-inner { width: 100%; padding: 0 var(--gutter); }
.pj-page .pj-card { width: min(1320px, 100%); margin: 0 auto; }
.pj-page .pj-title { font-size: 52px; }
/* Related work , crawlable internal links to other projects at the foot of each
   project page (crawl depth + dwell time). */
.pj-related { width: min(1320px, 100%); margin: 76px auto 0; }
.pj-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pj-related-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 30px; text-transform: uppercase; letter-spacing: -0.01em; color: #fff; }
.pj-related-all { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); white-space: nowrap; transition: color 0.2s; }
.pj-related-all:hover { color: #fff; }
.pj-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pj-rel-card { display: flex; flex-direction: column; gap: 12px; }
.pj-rel-thumb { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #000; }
.pj-rel-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.pj-rel-card:hover .pj-rel-thumb img { transform: scale(1.05); }
.pj-rel-meta { display: flex; flex-direction: column; gap: 2px; }
.pj-rel-name { font-weight: 700; font-size: 16px; line-height: 1.25; color: #fff; }
.pj-rel-client { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 760px) {
  /* Collapse the modal copy to the first paragraph with a Read more toggle */
  #pjDesc:not(.is-expanded) .pj-desc--more { display: none; }
  #pjDesc.is-expanded .pj-readmore { display: none; }
  .pj-readmore { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; padding: 0; background: none; border: 0; color: var(--bv-coral); font: inherit; font-weight: 800; font-size: 14px; letter-spacing: 0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pj-readmore span { font-weight: 700; }
  .pj-related { margin-top: 48px; }
  .pj-related-head { padding-top: 30px; margin-bottom: 18px; }
  .pj-related-title { font-size: 22px; }
  .pj-related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pj-rel-name { font-size: 14px; }
  .pj-rel-client { font-size: 12px; }
}
.pj-desc-wrap { display: flex; flex-direction: column; }
.pj-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 12px; font-weight: 600; margin-bottom: 26px; }
.pj-crumbs a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.18s; }
.pj-crumbs a:hover { color: #fff; }
.pj-crumbs span[aria-hidden] { color: rgba(255, 255, 255, 0.25); }
.pj-crumb-here { color: rgba(255, 255, 255, 0.85); }
/* Project not found */
.pj-404 { max-width: 640px; margin: 0 auto; text-align: center; padding: 30px 0 70px; }
.pj-404-eyebrow { font-weight: 800; font-size: 13px; letter-spacing: 0.28em; color: var(--bv-coral); margin: 0 0 16px; }
.pj-404-title { font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; }
.pj-404-text { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin: 0 0 30px; }
.pj-404 .pj-btn { display: inline-flex; flex: 0 0 auto; padding: 15px 28px; }
/* On the standalone page below the desktop band the left column is narrow, so the
   action buttons stack full-width instead of cramming into one row. */
@media (min-width: 769px) and (max-width: 1100px) {
  .pj-page .pj-actions .pj-btn { flex: 1 1 100%; }
}
/* Desktop , wider card; the extra width goes to the media (right) column, left stays fixed */
@media (min-width: 1100px) {
  .pj-card { width: min(1320px, 100%); }
  .pj-grid { grid-template-columns: 560px 1fr; }
  /* Hero headline scales with the copy column so it always holds the designed
     3-line shape across the desktop band, then caps at 88px (2560 unchanged). */
  .hero-title { font-size: clamp(50px, calc(5.24vw - 19px), 88px); }
}

/* Pulse rings , compositor-only (transform + opacity), no per-frame repaint */
.wsr-dot::after, .play::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55); pointer-events: none; animation: bvdPulseRing 2.4s ease-out infinite; }
@keyframes bvdPulseRing { 0% { transform: scale(0.92); opacity: 0.6; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bvdScrollHint { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(7px); opacity: 1; } }
/* High-density desktops render 1.5-2x the pixels; with the desktop `zoom` scaling
   active, that per-frame load makes the two looping animations stutter on some
   GPUs. Make ONLY those two static there (arrow bounce + play-button pulse);
   everything else is untouched. Standard-density desktops and all phones (no zoom)
   keep the motion. Covers every glitch-prone visitor in any browser. */
@media (min-resolution: 1.5dppx) {
  .scaled .explore svg,
  .scaled .wsr-dot::after,
  .scaled .play::after { animation: none; }
}

/* ===== Tablet / laptop (below the scaled desktop band) ===== */
@media (max-width: 1100px) {
  .work-grid { gap: 48px; }
  .testi-text { font-size: clamp(22px, 2.6vw, 30px); }
}

/* ===== Tablet / small laptop , stack the two-column blocks ===== */
@media (max-width: 1100px) {
  .intro { padding: 160px 0 120px; }
  .work { padding-top: 64px; padding-bottom: 64px; }
  .work-grid { grid-template-columns: 1fr; gap: 40px; }
  .work-feature { margin-top: 0; }
  .clients { padding: 100px 0; }
  .clients-grid { grid-template-columns: 1fr; }
  .testi { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
  .contact-inner { padding-top: 80px; padding-bottom: 80px; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-left { border-bottom: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px 24px 0 0; }
  .contact-form { border-radius: 0 0 24px 24px; }
}

/* ===== Proportional desktop scaling (1101px+ band) =====
   At/above the reference width (REF, set inline in <head>) the page lays out
   naturally, so 2560 stays full-bleed and pixel-identical to the master. Below
   REF the REF-wide .stage is scaled down with `zoom` so smaller desktops fill
   more of the screen (bigger content, tighter gutters) rather than faithfully
   shrinking the full 2560 design (which left laptops looking small). Below 1101
   the responsive/stacked layout takes over. --stage-zoom and --stage-w are
   computed inline in <head>. */
@media (min-width: 1101px) {
  .scaled .stage { width: var(--stage-w, 2100px); margin-inline: auto; zoom: var(--stage-zoom, 1); }
  /* Pin fluid (vw) type to its 2560 value so zoom is the only thing that scales
     it , otherwise vw reads the real viewport and the text shrinks twice. */
  .scaled .hero-title { font-size: 88px; }
  .scaled .acc-title { font-size: 46px; }
  .scaled .work-title { font-size: 62px; }
  .scaled .testi-title { font-size: 30px; }
  .scaled .testi-text { font-size: 25px; font-weight: 300; }
  .scaled .contact-title { font-size: 44px; }
  /* `100vh` is scaled down by zoom, so divide it back out to keep the hero a full
     viewport tall when scaling is active. */
  .scaled .hero { min-height: calc(100vh / var(--stage-zoom, 1)); }
  /* Same trick for the footer divider so it renders ~1px regardless of the zoom
     factor , keeps the line identical to the mobile/tablet band. */
  .scaled .site-footer::before { height: calc(1px / var(--stage-zoom, 1)); }
}

/* ===== Golden-standard mode (?std=1) , A/B alternative to proportional scaling =====
   The classic content-site approach: content caps at --content-max, the SIDES grow
   on big screens, and type stays in a readable band via clamp() (caps at the same
   2560 values, so 2560 looks identical to the scaled mode). On laptops the content
   uses more width with full-size readable text instead of shrinking 1:1. */
@media (min-width: 1101px) {
  /* Gutter grows with the viewport but never lets content exceed --content-max. */
  .standard { --gutter: max((100% - var(--content-max)) / 2, 5vw); }
  /* Beat the desktop hero-title override so laptop headlines stay large/readable. */
  .standard .hero-title { font-size: clamp(56px, 5vw, 88px); }
}

/* ===== Mobile + tablet (shared single-column layout) =====
   Covers phones AND tablets (820 / 1024 / 1024-landscape) , the user wants the
   tablet range to use the same structure as mobile, not the desktop two-column
   grids. The proportional desktop scaling takes over at >=1101px. A separate
   tablet block below centers + sizes this layout up for the wider widths. */
@media (max-width: 1100px) {
  /* Nav */
  .site-nav { height: 64px; padding: 0 24px; }
  .legal { padding: 112px 0 80px; }
  .legal-inner { padding: 0 24px; }
  .legal-head { padding: 20px; margin-bottom: 24px; }
  .legal-switch { margin-bottom: 18px; padding: 4px; }
  .legal-switch a { font-size: 10px; padding: 8px 5px; }
  .legal-title { font-size: 24px; margin-bottom: 12px; }
  .legal-intro { font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }
  .legal-intro p { margin-bottom: 11px; }
  .legal-controls { gap: 10px; }
  .legal-ctrl { padding: 8px 14px; font-size: 10px; }
  .la-panel-inner { font-size: 13.5px; line-height: 1.55; }
  .la-panel-inner h3 { font-size: 13.5px; margin: 14px 0 6px; }
  .la-panel-inner p { margin-bottom: 11px; }
  .la-panel-inner p:last-child { margin-bottom: 20px; }
  .la-panel-inner ul { margin-bottom: 20px; }
  .site-nav .logo img { height: 22px; position: relative; top: 3px; }
  .logo-word { display: block; }
  .logo-mark { display: none; }
  .menu-btn { background: transparent; border: none; padding: 8px; gap: 0; }
  .menu-label { display: none; }
  .menu-icon { width: 24px; height: 19px; }
  .menu-icon span { height: 2.5px; background: var(--bv-coral); }
  .menu-icon span:nth-child(1) { top: 0; }
  .menu-icon span:nth-child(2) { top: 8px; }
  .menu-icon span:nth-child(3) { top: 16px; }

  /* Hero */
  .hero { min-height: auto; flex-direction: column; align-items: stretch; background: var(--bv-navy); padding-bottom: 44px; }
  .hero-inner { display: block; padding: 124px 24px 56px; }
  .hero-title { font-size: clamp(32px, calc(11vw - 3px), 46px); line-height: 0.95; margin: 0 0 20px; }
  .hero-sub--desk { display: none; }
  .hero-sub--mob { display: block; font-size: 16px; margin: 0 0 28px; }
  .showreel { display: none; }
  .hero-media { display: block; height: auto; margin-top: 10px; }
  /* position: relative = the card is the positioning context for the poster/video.
     content-box so the 16:9 ratio is the INNER area (inside the 4px frame), so a 16:9
     video/poster fits exactly , no crop, no letterbox. width reserves border(8)+shadow(14)
     so the blue offset lands on the content gutter, never touching the screen edge. */
  .video-card { position: relative; box-sizing: content-box; width: calc(100% - 22px); aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: 14px 14px 0 0 var(--bv-blue); }
  /* keep the offset block in place on mobile , only the colour shifts blue -> orange */
  .video-card:hover, .video-card.is-playing, .hero-inner:has(.showreel:hover) .video-card { box-shadow: 14px 14px 0 0 var(--bv-coral); }
  /* video sits inside the frame; match the inner radius (20 outer - 4 border = 16) */
  .video-card .bv-inline-video { inset: 0; border-radius: 16px; }
  .play { width: 60px; height: 60px; }
  .play-tri { border-top-width: 7px; border-bottom-width: 7px; border-left: 11px solid #10151a; }
  .card-showreel { position: absolute; top: calc(50% + 46px); left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; padding: 4px 11px; white-space: nowrap; background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.45); border-radius: 100px; font-weight: 700; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
  .explore { display: flex; position: static; transform: none; margin: 0 auto; gap: 8px; }
  .explore-label { font-size: 9.5px; letter-spacing: 0.26em; }

  /* Intro */
  .intro { padding: 60px 0 64px; }
  .intro-inner { padding: 0 24px; }
  .accordion { border-top: none; }
  .acc-item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.14); }
  .acc-head { gap: 14px; padding: 22px 0; }
  .acc-head::after { width: 11px; height: 11px; margin-top: -5px; }
  .acc-item.open .acc-head::after { margin-top: 5px; }
  .acc-title { font-size: 24px; }
  .acc-text { max-width: 100%; padding: 0 0 24px; font-size: 15px; line-height: 1.3; }

  /* Featured Work , swap desktop grid for the card carousel */
  .work { padding: 40px 0 40px; }
  .work-grid { display: none; }
  .work-mobile { display: block; }
  .wm-head { padding: 0 24px; margin-bottom: 26px; }
  .wm-title { margin: 0; font-weight: 800; font-size: 34px; line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
  .wm-title span { color: var(--bv-coral); }
  .wm-meta { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
  .wm-track { flex: 1; height: 2px; background: rgba(255,255,255,0.14); }
  .wm-track-fill { width: 64px; height: 2px; background: var(--bv-coral); }
  .wm-badge { display: inline-flex; align-items: baseline; gap: 6px; flex: none; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); }
  .wm-cur { color: #fff; }
  .wm-sep, .wm-tot { color: rgba(255, 255, 255, 0.4); }
  .wm-rail { display: flex; gap: 16px; overflow-x: auto; padding: 0 24px 4px; scroll-padding-left: 24px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wm-rail::-webkit-scrollbar { display: none; }
  .wm-card { flex: 0 0 64%; scroll-snap-align: center; border-radius: 16px; overflow: hidden; background: var(--bv-surface); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
  .wm-card-img { position: relative; aspect-ratio: 4 / 5; }
  .wm-card-img img { width: 100%; height: 100%; object-fit: cover; }
  .wm-card-body { padding: 14px 14px 16px; }
  .wm-card-name { font-weight: 800; font-size: 13.5px; color: #fff; line-height: 1.1; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wm-card-client { font-weight: 500; font-size: 11px; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
  .wm-card-view { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--bv-ink); font-weight: 700; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border-radius: 100px; transition: background 0.25s ease, color 0.25s ease; }
  .wm-card-view:hover { background: var(--bv-coral); color: var(--bv-ink); }
  .wm-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px; margin-top: 22px; scrollbar-width: none; justify-content: safe center; }
  .wm-thumbs::-webkit-scrollbar { display: none; }
  .wm-thumb { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; border: 2px solid rgba(255,255,255,0.12); opacity: 0.45; transition: 0.25s; background: none; }
  .wm-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .wm-thumb.is-active { border-color: var(--bv-coral); opacity: 1; }

  /* Clients */
  .clients { padding: 64px 0 30px; } /* bottom = the feedback box's top gap, so it sits evenly */
  .clients-inner { padding: 0 24px; }
  .testi { padding: 30px 22px 22px; }
  .testi-quote { width: 60px; height: 46px; top: 12px; right: 18px; opacity: 0.16; }
  .testi-title { display: block; max-width: none; font-size: clamp(22px, 6.8vw, 30px); margin-bottom: 24px; padding-bottom: 24px; }
  .testi-text { font-size: 16px; line-height: 1.45; margin-bottom: 22px; font-style: italic; }
  .testi-controls { margin-top: 0; padding-top: 22px; }
  /* submit feedback becomes a full-width button below the client logos; dots + arrows stay in the row */
  .testi .btn-outline-dark { display: none; }
  .testi-nav { gap: 10px; }
  .testi-nav button { width: 42px; height: 42px; }
  .testi-nav svg { width: 18px; height: 18px; }
  .testi-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 30px; padding: 18px 20px; background: var(--bv-cream); border: 1px solid rgba(16, 21, 26, 0.08); border-radius: 18px; }
  .testi-cta-text { min-width: 0; }
  .testi-cta-title { margin: 0; font-weight: 800; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bv-ink); line-height: 1; white-space: nowrap; }
  .testi-cta-sub { margin: 6px 0 0; font-size: 12.5px; color: rgba(16, 21, 26, 0.5); line-height: 1.2; white-space: nowrap; }
  .testi-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 13px 16px 9px; background: var(--bv-coral); color: #fff; border: none; border-radius: 100px; font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease; }
  .testi-cta-btn span { font-size: 14px; line-height: 1; position: relative; top: -2px; }
  .testi-cta-btn:hover { color: var(--bv-ink); }
  /* Bigger client logos on mobile (more height + a touch more width, less cell padding) */
  .brand-cell { min-height: 104px; padding: 0 6px; }
  .brand-cell img { max-width: calc(var(--lw) * 1.15); max-height: calc(var(--lh) * 0.82); }

  /* Contact */
  .contact-inner { padding: 60px 24px 54px; }
  .contact-card { box-shadow: 12px 12px 0 0 var(--bv-coral); }
  .contact-left { padding: 40px 26px; }
  .contact-title { font-size: 30px; }
  .contact-lead { max-width: none; }
  .contact-details { margin: 26px 0 30px; gap: 22px; }
  .cs-circle { width: 44px; height: 44px; }
  .cs-portfolio { margin-left: auto; padding: 11px 18px; gap: 8px; }
  .cs-portfolio span { font-size: 10px; letter-spacing: 0.08em; }
  .contact-form { padding: 36px 26px; }
  .cf-title { font-size: 20px; margin-bottom: 26px; }
  .cf-grid { grid-template-columns: 1fr; gap: 20px; }
  .cf-submit { justify-content: flex-start; margin-top: 26px; }
  .cf-send { padding: 15px 30px; }

  /* Footer , divider is the shared .site-footer::before (defined once, base level) */
  .footer-desktop { display: none; }
  .footer-mobile { display: block; padding: 22px 24px; }
  .fm-bottom { display: flex; align-items: center; justify-content: space-between; }
  .fm-copy { font-size: 11px; letter-spacing: 0.03em; color: rgba(255,255,255,0.4); }
  .fm-top-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; padding: 0; font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }

  /* Menu drawer */
  section[id], .hero { scroll-margin-top: 64px; }
  .md-head { padding: 22px 26px; justify-content: space-between; }
  .md-logo { height: 18px; }
  .menu-drawer { width: 100vw; max-width: none; border-left: none; overflow: hidden; }
  .md-nav .md-label { display: none; }
  .md-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 28px 26px 10px; }
  .md-link { padding: clamp(9px, 1.7vh, 17px) 0; }
  .md-word { font-size: clamp(27px, 5vh, 46px); }
  .md-foot { margin-top: 0; padding: clamp(16px, 2.4vh, 26px) 26px; }
  .md-foot-label { margin-bottom: clamp(8px, 1.5vh, 18px); }
  .md-contact { padding: clamp(8px, 1.4vh, 12px) 0; }
  .md-social { margin-top: clamp(12px, 2vh, 24px); }
  .md-legal { margin-top: clamp(12px, 1.7vh, 22px); padding-top: clamp(12px, 1.7vh, 22px); }
  .md-cval { font-size: 16px; }

  /* Modals */
  .bv-modal { padding: 14px; }
  .pj-card { padding: 20px; }
  /* mobile order: intro (pills/title/desc) -> media (film/gallery) -> scope/deliverables */
  .pj-grid { display: flex; flex-direction: column; gap: 24px; }
  /* min-width:0 + max-width:100% cap the column to the card width instead of it
     being dragged wide by the nowrap Client/Industry pills (which then
     ellipsis-shrink to fit). */
  .pj-left { background: transparent; border: 0; border-radius: 0; padding: 0; min-width: 0; max-width: 100%; order: 1; }
  /* Same cap as .pj-left: min-width:0 + max-width:100% stop the media column from
     being dragged wide (gallery strip / video head) and overflowing the card,
     which was leaking the cream page background as "white borders". */
  .pj-right { order: 2; min-width: 0; max-width: 100%; }
  .pj-meta { order: 3; margin-top: 0; padding-top: 0; border-top: 0; }
  /* Videos header: keep the "Videos" tagline + the pills on one line, shrunk so both
     fit down to 320px. The close (X) sits by the intro pills here, not the video
     header, so no right clearance is needed. */
  .pj-film-head { flex-wrap: nowrap; gap: 10px; }
  #projectModal .pj-vidtabs { margin-right: 0; }
  /* .pj-film-meta carries the ~2px optical nudge for the all-caps "Videos" label. */
  .pj-video-title { letter-spacing: 0.1em; }
  .pj-film-meta { gap: 8px; }
  .pj-vidcount { min-width: 20px; height: 20px; font-size: 10.5px; }
  .pj-vidtabs { gap: 3px; padding: 3px; }
  .pj-vidtab { padding: 8px 11px; font-size: 9.5px; letter-spacing: 0.03em; gap: 5px; }
  .pj-vidtab-tri { border-left-width: 6px; border-top-width: 3.5px; border-bottom-width: 3.5px; }
  /* Gallery thumbs read as thin strips on phones (base is a wide 16:10 at 64%);
     make them bigger + taller so they look like proper images. Cap the width so
     they don't get oversized on wider tablets. */
  .pj-thumb { flex: 0 0 76%; max-width: 440px; aspect-ratio: 4 / 3; }
  /* Client + Industry pills stay on one line; reserve room on the right for the close button */
  .pj-pills { flex-wrap: nowrap; gap: 8px; padding-right: 52px; min-width: 0; }
  .pj-pill { padding: 7px 12px; gap: 5px; min-width: 0; }
  .pj-pill b { flex: none; }
  .pj-pill b, .pj-pill em { font-size: 10.5px; }
  .pj-pill em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pj-title { font-size: 32px; }
  /* sticky action bar pinned to the bottom of the project modal:
     wide Play Video + two icon circles (gallery + Behance). Fills to the card's
     bottom edge with a translucent blur so content scrolls through behind it. */
  #projectModal .pj-card { padding-bottom: 0; }
  #projectModal .pj-actions {
    position: sticky; bottom: 0; z-index: 6;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    margin: 28px -20px 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0 0 24px 24px;
    background: rgba(18, 22, 28, 0.45); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  }
  #projectModal .pj-actions .pj-btn { margin: 0; height: 48px; }
  #projectModal .pj-btn--play { flex: 1 1 0; min-width: 0; flex-direction: row; gap: 8px; padding: 0 12px; font-size: 11.5px; }
  #projectModal .pj-btn--ghost { flex: 0 0 auto; flex-direction: row; gap: 6px; padding: 0 14px; border-radius: 100px; font-size: 10px; min-width: 0; }
  #projectModal .pj-btn--be { flex: 0 0 auto; width: 48px; padding: 0; border-radius: 50%; min-width: 0; }
  #projectModal .pj-btn--be .pj-btn-tx { display: none; }
  #projectModal .pj-btn--be .pj-be { font-size: 17px; }
  /* standalone project page (not a modal): actions are a normal full-width stack */
  .pj-page .pj-actions .pj-btn { flex: 1 1 100%; }
  .pj-page { padding: 96px 0 64px; }
  .pj-page-inner { padding: 0 24px; }
  .pj-page .pj-title { font-size: 34px; }
  /* breadcrumbs are desktop wayfinding; on mobile the project reads as a popup, so
     hide the visible crumb (the SEO BreadcrumbList JSON-LD in <head> stays) */
  .pj-crumbs { display: none; }
  .pj-404-title { font-size: 30px; }
}

/* ===== Small phones ===== */
@media (max-width: 380px) {
  .wm-card { flex: 0 0 72%; }
  .brand-cell img { max-height: calc(var(--lh) * 0.72); }
  .contact-social { gap: 10px; }
  .cs-circle { width: 40px; height: 40px; }
  .cs-portfolio { padding: 10px 14px; gap: 6px; }
  .cs-portfolio span { font-size: 9.5px; letter-spacing: 0.06em; }
  .md-cval { font-size: 13.5px; }
  .md-foot { padding-left: 20px; padding-right: 20px; }
  .cd-value { font-size: 14px; }
  /* keep the feedback CTA on one row even on the smallest phones , shrink so the
     title never collides with the button (was overlapping at 320) */
  .testi-cta { gap: 9px; padding: 14px 13px; }
  .testi-cta-title { font-size: 12.5px; white-space: normal; }
  .testi-cta-sub { font-size: 11px; white-space: normal; }
  .testi-cta-btn { padding: 11px 12px 7px; font-size: 9.5px; letter-spacing: 0.05em; }
  .testi-cta-btn span { font-size: 12px; top: -1.5px; }
  /* smallest phones: shrink the project-modal action bar so Play Video doesn't clip */
  #projectModal .pj-actions { gap: 7px; padding-left: 12px; padding-right: 12px; }
  #projectModal .pj-btn--play { font-size: 10.5px; padding: 0 10px; gap: 6px; }
  #projectModal .pj-btn--ghost { font-size: 9.5px; padding: 0 12px; gap: 5px; }
  #projectModal .pj-btn--be { width: 44px; }
}

/* Narrow phones (<=374): scale the intro accordion titles fluidly (20px at 320 up
   to 24px) so 3-word headings like "WHO WE WORK WITH" stay on one line while 360
   still gets a decent size. 375+ keeps the normal 24px. */
@media (max-width: 374px) {
  .acc-title { font-size: clamp(20px, 6.2vw, 24px); }
}

/* Menu drawer item size now scales with viewport height via clamp() in the main
   mobile block , no fixed-size tall-phone overrides needed (would clip the foot). */

/* ===== Tablet (700-1100px): the SAME mobile structure, centered in a comfortable
   column and sized up so it reads as an intentional large-mobile design rather
   than phone UI stretched edge-to-edge. Covers 820, 1024 portrait and 1024
   landscape. Desktop scaling takes over at >=1101px. ===== */
@media (min-width: 700px) and (max-width: 1100px) {
  .hero-inner, .intro-inner, .clients-inner, .contact-inner,
  .wm-head, .wm-rail, .wm-thumbs, .wm-count, .footer-mobile { max-width: 760px; margin-inline: auto; }
  /* Hero */
  .hero-inner { padding-top: 150px; padding-bottom: 72px; }
  .hero-title { font-size: clamp(48px, 6.4vw, 62px); margin-bottom: 24px; }
  .hero-sub--mob { font-size: 18px; line-height: 1.35; margin-bottom: 34px; max-width: 560px; }
  .explore { margin-top: 4px; }
  /* Intro accordion */
  .intro { padding: 96px 0; }
  .acc-head { padding: 30px 0; }
  .acc-title { font-size: 34px; }
  .acc-text { font-size: 16.5px; line-height: 1.3; padding-bottom: 28px; }
  /* Featured Work carousel , show ~2 cards */
  .work { padding: 84px 0; }
  .wm-head { margin-bottom: 30px; }
  .wm-title { font-size: 46px; }
  .wm-card { flex: 0 0 46%; }
  .wm-card-name { font-size: 16px; }
  .wm-card-client { font-size: 12px; }
  .wm-card-view { font-size: 9.5px; padding: 8px 15px; }
  .wm-thumb { flex: 0 0 66px; width: 66px; height: 66px; }
  /* Clients */
  .clients { padding: 96px 0 44px; }
  .testi { padding: 42px 44px 34px; }
  .testi-title { font-size: 34px; }
  .testi-text { font-size: 20px; line-height: 1.4; }
  .brand-cell { min-height: 132px; }
  .testi-cta { margin-top: 34px; padding: 22px 26px; }
  .testi-cta-title { font-size: 17px; }
  .testi-cta-sub { font-size: 13px; }
  .testi-cta-btn { font-size: 12px; padding: 15px 22px 11px; }
  /* Contact */
  .contact-inner { padding-top: 96px; padding-bottom: 96px; }
  .contact-left { padding: 48px 44px; }
  .contact-title { font-size: 38px; }
  .contact-lead { font-size: 17px; }
  .cd-value { font-size: 18px; }
  .contact-form { padding: 48px 44px; }
  .cf-title { font-size: 24px; }
  .cf-input { font-size: 16px; }
  /* Footer */
  .footer-mobile { padding-top: 26px; padding-bottom: 26px; }
  .fm-copy { font-size: 12px; }
  .fm-top-btn { font-size: 11px; }
}

/* ===== Landscape phones: compact side-by-side hero for the short height ===== */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 540px) {
  .hero-inner { display: flex; align-items: center; gap: 30px; padding: 84px 32px 40px; }
  .hero-copy { flex: 1 1 0; min-width: 0; }
  .hero-media { flex: 1 1 0; min-width: 0; margin-top: 0; }
  .hero-title { font-size: clamp(28px, 4.4vw, 40px); margin-bottom: 14px; }
  .hero-sub--mob { font-size: 14px; margin-bottom: 0; }
  .video-card { aspect-ratio: 16 / 9; box-shadow: 12px 12px 0 0 var(--bv-blue); }
  .video-card:hover, .video-card.is-playing, .hero-inner:has(.showreel:hover) .video-card { box-shadow: 12px 12px 0 0 var(--bv-coral); }
  /* Work carousel: smaller, landscape-ratio cards */
  .wm-card { flex: 0 0 30%; }
  .wm-card-img { aspect-ratio: 16 / 10; }
  /* Contact: group portfolio with the social icons (wide layout) */
  .cs-portfolio { margin-left: 0; }

  /* Landscape uses the full width (not the tablet centered column). */
  .hero-inner, .clients-inner, .contact-inner, .wm-head, .wm-rail, .wm-thumbs, .wm-count { max-width: none; margin-inline: 0; }
  .clients { padding: 56px 0 28px; }
  .clients-inner { padding: 0 32px; }
  .contact-inner { padding: 48px 32px; }
  .testi { padding: 30px 30px 26px; }
  .testi-title { font-size: 26px; margin-bottom: 20px; padding-bottom: 18px; }
  .testi-text { font-size: 16px; }
  .brand-cell { min-height: 92px; }
  .contact-left { padding: 34px 30px; }
  .contact-form { padding: 34px 30px; }
  .contact-title { font-size: 30px; }
}

/* Wider landscape phones ONLY (844+): desktop-style side-by-side. Narrow
   landscape (e.g. 667) stays stacked , the columns get too cramped below ~760. */
@media (orientation: landscape) and (min-width: 760px) and (max-width: 1024px) and (max-height: 540px) {
  /* Testimonial | client logos */
  .clients-grid { grid-template-columns: 1.05fr 1fr; }
  .testi { border-right: 1px solid rgba(0, 0, 0, 0.14); border-bottom: none; }
  /* Contact info | form */
  .contact-card { grid-template-columns: 1fr 1fr; }
  .contact-left { border-bottom: none; border-right: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px 0 0 24px; }
  .contact-form { border-radius: 0 24px 24px 0; }
  .cf-grid { grid-template-columns: 1fr 1fr; gap: 14px 22px; }
}

/* Laptop readability. A 1080p panel on a small physical screen makes the
   proportionally-scaled body copy tiny. Enlarge the readable text in the desktop
   laptop range (<=1920) ONLY; larger monitors (>=1921, e.g. 2560) are untouched. */
@media (min-width: 1101px) and (max-width: 1920px) {
  /* Paragraph + smaller text only , headings/item titles left as-is */
  .hero-sub { font-size: 23px; max-width: 560px; } /* wider box so the larger copy stays 3 lines */
  .scaled .acc-title { font-size: 52px; } /* .scaled beats the base .acc-title specificity */
  .acc-text { font-size: 23px; }
  .work-name { font-size: 22px; }
  .work-client { font-size: 14.5px; } /* work items left as-is */
  .contact-lead { font-size: 20px; }
  .cf-title { font-size: 25px; }
  .cf-input { font-size: 18px; }
  .cf-send { font-size: 14px; }
  .cd-value { font-size: 20px; }
  .cd-label { font-size: 12px; }
  .testi-text { font-size: 33px; }
  .pj-desc { font-size: 18px; }
  /* Bigger work-list text makes the left column taller, so nudge the featured
     image down to keep it centred against the list (matches the 2560 baseline). */
  .work-feature { margin-top: 138px; }
}