/* ==========================================================================
   New Media Vision — design system
   Tokens first; components below. Swap poster gradients for real key art by
   dropping an <img class="poster__art"> inside any .poster.
   ========================================================================== */

/* Fonts are served from this site, not from Google. Loading them from fonts.googleapis.com
   sends every visitor's IP address to Google before they have agreed to anything, which EU
   courts have found unlawful. Archivo (variable, 400-800) and IBM Plex Mono (400/500/600) are
   both SIL Open Font License, so self-hosting is allowed. Latin and Latin Extended only. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/archivo-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-600-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;
}

/* Dark is the site's default look; light is the option behind the toggle. The bare
   :root is the complete dark palette; the [data-theme="light"] block below redefines
   only tokens. The OS preference is not consulted. */
:root {
  --bg:            #0B0B0D;
  --surface:       #16171A;
  --surface-alt:   #101114;
  --surface-deep:  #08080A;
  --surface-input: #131418;
  --line:          #232429;
  --line-strong:   #2E3037;
  --line-control:  #5E626B;
  --line-bright:   #6B7079;
  --text:          #F4F5F7;
  --text-2:        #B0B3BA;
  --text-3:        #95999F;
  --text-4:        #8B8F96;
  /* #003366 disappears on black, so the accent is the brand hue lifted */
  --accent:        #4A90F0;
  --accent-soft:   rgba(74, 144, 240, 0.14);
  --accent-line:   rgba(74, 144, 240, 0.34);
  --accent-text:   #B9CBFF;
  --on-accent:     #06070A;
  --accent-wash:   rgba(74, 144, 240, 0.10);
  --accent-wash-2: rgba(74, 144, 240, 0.20);
  /* thick enough over black to still read as a white bar carrying the logo, but
     not solid — the page shows faintly through it even at rest */
  --header-glass:  linear-gradient(180deg, rgba(255,255,255,0.93), rgba(249,251,254,0.88));
  --header-edge:   rgba(255, 255, 255, 0.42);
  --header-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.85);

  /* brand navy, sampled from the logo artwork — the origin of every blue here */
  --brand:         #003366;
  /* type */
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* rhythm */
  --gutter: 80px;
  --radius: 3px;
  /* On a wide monitor the page should not run from bezel to bezel: content stops at
     --content-max and the extra width becomes margin, while full-bleed backgrounds (the hero
     video, the alt sections, the footer) still reach the edges. */
  --content-max: 1480px;
  /* measured against the viewport, not the element: inside a grid cell (the stats row) a
     percentage would resolve against the cell and the numbers would fall out of line */
  --edge: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
}

/* Light theme — an explicit choice, stamped on <html> by the theme script. */
:root[data-theme="light"] {
  /* surfaces */
  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --surface-alt:   #EBF0F6;
  --surface-deep:  #E7EDF5;
  --surface-input: #FFFFFF;

  /* lines */
  --line:          #DCE3EC;
  --line-strong:   #C6D0DE;
  --line-control:  #7E8DA5;
  --line-bright:   #8E9CB2;

  /* text — every value below passes WCAG AA on every ground it sits on */
  --text:          #0A1424;
  --text-2:        #3E4C63;
  --text-3:        #52607A;
  --text-4:        #5C6980;

  /* on a light ground the brand navy needs no lifting — mark and accent are one colour */
  --accent:        #003366;
  --accent-soft:   rgba(0, 51, 102, 0.08);
  --accent-line:   rgba(0, 51, 102, 0.28);
  --accent-text:   #003366;
  --on-accent:     #FFFFFF;
  --accent-wash:   rgba(0, 51, 102, 0.05);
  --accent-wash-2: rgba(0, 51, 102, 0.14);
  /* Frosted header bar, thin — the page behind it is already light, so it can
     afford to be see-through. 54% at the low end is the floor: the blur can pick
     up a near-black frame of the showreel, and below that the navy wordmark
     stops clearing 3:1 against the panel. */
  --header-glass:  linear-gradient(180deg, rgba(255,255,255,0.74), rgba(246,249,253,0.62));
  --header-edge:   rgba(255, 255, 255, 0.85);
  --header-shadow: 0 12px 28px -18px rgba(10, 20, 36, 0.30);
}

/* Dark theme only: at rest the bar is an opaque white sheet carrying the logo,
   and it thins out once the page starts moving under it so the content shows
   through. 54% at the low end is the floor — below that the navy wordmark stops
   clearing 3:1 against the panel with a black frame behind it. The light theme
   is already sheer at rest and does not change. */
:root:not([data-theme="light"])[data-scrolled="true"] {
  --header-glass: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(249,251,254,0.64));
  --header-edge:  rgba(255, 255, 255, 0.26);
  --header-shadow: 0 16px 38px -20px rgba(0, 0, 0, 0.95);
}

/* The header keeps the light palette whatever the page theme is, so the logo
   stays in its own colours and needs no reversed variant. Custom properties
   inherit, so re-declaring them here scopes them to the header subtree. */
.site-header {
  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --surface-alt:   #EBF0F6;
  --surface-deep:  #E7EDF5;
  --surface-input: #FFFFFF;
  --line:          #DCE3EC;
  --line-strong:   #C6D0DE;
  --line-control:  #7E8DA5;
  --line-bright:   #8E9CB2;
  --text:          #0A1424;
  /* No tonal steps here: on 54% glass over a black poster only near-black type
     clears AA, so the header's secondaries collapse onto the primary. */
  --text-2:        #0A1424;
  --text-3:        #0A1424;
  --text-4:        #0A1424;
  --accent:        #003366;
  --accent-soft:   rgba(0, 51, 102, 0.08);
  --accent-line:   rgba(0, 51, 102, 0.28);
  --accent-text:   #003366;
  --on-accent:     #FFFFFF;
  --accent-wash:   rgba(0, 51, 102, 0.05);
  --accent-wash-2: rgba(0, 51, 102, 0.14);
}

@media (max-width: 1100px) { :root { --gutter: 48px; } }
@media (max-width: 640px)  { :root { --gutter: 20px; } }


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Jumps to a section (Track record, skip link) stop below the sticky header, not under it */
html { scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; border-radius: var(--radius); font-weight: 700;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

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

.wrap { padding-inline: var(--edge); }

/* ---------- shared type ---------- */

.kicker {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.kicker--muted { color: var(--text-4); }

.h1 {
  font-size: clamp(38px, 5.7vw, 82px);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  margin: 0; color: var(--text); text-wrap: balance;
}
.h2 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;
  margin: 0; text-wrap: balance;
}
.lede {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55;
  color: var(--text-2); margin: 0; max-width: 62ch; text-wrap: pretty;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 700; letter-spacing: 0.005em;
  transition: background .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: #00478F; }
.btn--ghost { border: 1px solid var(--line-bright); color: var(--text); font-weight: 600; }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-wash); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */

/* A full-bleed sheet of glass: edge to edge, pinned to the top, with the page
   sliding underneath it. */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--edge);
  color: var(--text);
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--header-edge);
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
          backdrop-filter: blur(26px) saturate(185%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--header-shadow);
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }


/* The logo is navy artwork carrying the company name inside it. The page is
   light so it sits directly on the background — no chip, no recolouring, and no
   text wordmark beside it. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; opacity: 1; transition: opacity .15s; }
.brand:hover { opacity: 0.78; }
.brand__logo { height: 84px; width: auto; display: block; }

/* the footer carries the same full-colour mark as the header, in both themes (Todd's call) */
.brand--footer .brand__logo { height: 92px; }
/* On a phone the desktop logo eats an eighth of the screen before any content shows, so the
   bar and the mark step down with the viewport. */
@media (max-width: 760px) {
  .brand__logo { height: 68px; }
  .site-header { padding-block: 10px; }
}
@media (max-width: 480px) {
  .brand__logo { height: 56px; }
  .site-header { padding-block: 8px; gap: 12px; }
  .brand--footer .brand__logo { height: 76px; }
  .header__actions { gap: 8px; }
}

/* touch screens have no hover and no pointer precision: give the smaller links a bigger
   target without changing how they look */
@media (hover: none) {
  .breadcrumb a, .footer__col a, .cta__contact a, .footer__legal a, .sort {
    display: inline-block; padding-block: 7px;
  }
  .footer__col ul { gap: 6px; }
}

.header__end { display: flex; align-items: center; gap: 34px; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav__link {
  white-space: nowrap;   /* "Track record" is the one two-word label; keep it on one line */
  font-family: var(--mono);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  /* the height is fixed, so the label must never wrap inside it */
  white-space: nowrap; flex-shrink: 0;
  border: 1px solid var(--line-control); border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em;
  transition: border-color .15s, color .15s;
}
.search-trigger:hover { border-color: var(--line-bright); color: var(--text); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--text-2); transition: color .15s;
}
.nav-toggle:hover { color: var(--text); }

/* the bar is never allowed to break the CTA over two lines */
.header__actions .btn { white-space: nowrap; }

/* the bigger nav type steps back down as the bar runs out of room */
/* The full header row — logo, six links, the labelled search button and the CTA — needs
   about 1346px. Below that the search button drops to its icon; measured, not guessed,
   after Firefox showed the label wrapping inside its own fixed height at ~1200px. */
@media (max-width: 1360px) {
  .header__end { gap: 16px; }
  .nav { gap: 18px; }
  .nav__link { font-size: 12.5px; }
  .search-trigger span { display: none; }
  .search-trigger { padding: 0 12px; }
}
/* just above the drawer breakpoint the six links plus the CTA run 21px into the
   right gutter; tighter gaps give it back */
@media (max-width: 1040px) {
  .header__end { gap: 14px; }
  .nav { gap: 14px; }
  .nav__link { font-size: 12px; letter-spacing: 0.06em; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* backdrop-filter cannot nest: this panel sits inside the header's own
       filter context, so it samples an empty backdrop and the blur never lands.
       The drawer carries solid glass of its own instead. */
    background: linear-gradient(180deg, #FBFCFE, #EDF2F9);
    border-bottom: 1px solid var(--header-edge);
    box-shadow: var(--header-shadow);
    padding: 8px var(--edge) 20px;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link {
    font-size: 16px; padding: 16px 0; min-height: 44px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .header__actions .btn { display: none; }
}

/* ==========================================================================
   Poster — the core catalogue object
   ========================================================================== */

.poster {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(158deg, #1D2739 0%, #0D131E 100%);
}
.poster::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 66% at 26% 6%, rgba(120,160,255,0.24), rgba(0,0,0,0) 62%);
}
/* real key art, when it exists, sits above the placeholder gradient */
.poster__art {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.poster__title {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.025em;
  color: #FFF;
}
.badge {
  position: absolute; z-index: 3; top: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 2px;
}
.badge--rights { background: var(--accent); color: var(--on-accent); }
.badge--outline {
  /* white on a light wash was unreadable over pale key art; a dark pill holds 5.6:1 even
     against a white frame, and still reads as the same glassy label over dark footage */
  color: #FFFFFF; background: rgba(8, 12, 20, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(242,245,250,0.22); padding: 4px 8px;
  /* series badges (Scripted / Unscripted format, NMV original) sit bottom left (Ana,
     28 Oct 2026).
     The rights badge on Production stays top left. */
  top: auto; right: auto; bottom: 14px; left: 14px;
}
/* a placeholder card prints its own title bottom left; lift it above the badge */
.poster--empty .poster__title { bottom: 48px; }

/* placeholder duotones — one per title, cool-neutral so artwork carries colour */
.poster--crime     { background: linear-gradient(158deg, #1D2739 0%, #0D131E 100%); }
.poster--thriller  { background: linear-gradient(158deg, #2B161A 0%, #120A0D 100%); }
.poster--thriller::after  { background: radial-gradient(130% 66% at 68% 10%, rgba(255,120,110,0.22), rgba(0,0,0,0) 62%); }
.poster--auto      { background: linear-gradient(158deg, #2D2214 0%, #14100A 100%); }
.poster--auto::after      { background: radial-gradient(130% 66% at 36% 8%, rgba(255,196,110,0.22), rgba(0,0,0,0) 62%); }
.poster--family    { background: linear-gradient(158deg, #142420 0%, #0A120F 100%); }
.poster--family::after    { background: radial-gradient(130% 66% at 58% 8%, rgba(110,235,200,0.20), rgba(0,0,0,0) 62%); }
.poster--doc       { background: linear-gradient(158deg, #1F1829 0%, #0E0B14 100%); }
.poster--doc::after       { background: radial-gradient(130% 66% at 22% 12%, rgba(170,130,255,0.24), rgba(0,0,0,0) 62%); }
.poster--animals   { background: linear-gradient(158deg, #1C2416 0%, #0D110A 100%); }
.poster--animals::after   { background: radial-gradient(130% 66% at 55% 8%, rgba(190,235,120,0.20), rgba(0,0,0,0) 62%); }
.poster--nature    { background: linear-gradient(158deg, #132225 0%, #0A1113 100%); }
.poster--nature::after    { background: radial-gradient(130% 66% at 30% 10%, rgba(110,205,235,0.22), rgba(0,0,0,0) 62%); }
.poster--sport     { background: linear-gradient(158deg, #291B13 0%, #120C08 100%); }
.poster--sport::after     { background: radial-gradient(130% 66% at 66% 8%, rgba(255,170,110,0.22), rgba(0,0,0,0) 62%); }
.poster--celeb     { background: linear-gradient(158deg, #251522 0%, #110A10 100%); }
.poster--celeb::after     { background: radial-gradient(130% 66% at 40% 10%, rgba(255,140,190,0.20), rgba(0,0,0,0) 62%); }
.poster--cooking   { background: linear-gradient(158deg, #1B2418 0%, #0D110B 100%); }
.poster--cooking::after   { background: radial-gradient(130% 66% at 60% 8%, rgba(170,225,130,0.20), rgba(0,0,0,0) 62%); }
.poster--empty     { background: linear-gradient(158deg, #10233C 0%, #08111F 100%); }
.poster--empty::after     { background: radial-gradient(130% 66% at 78% 6%, rgba(74,144,240,0.28), rgba(0,0,0,0) 62%); }

/* ---------- title card ---------- */

.title-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.title-card .poster { transition: border-color .18s, transform .18s; }
.title-card:hover .poster { border-color: var(--line-bright); transform: translateY(-3px); }
.title-card__body { display: flex; flex-direction: column; gap: 7px; }
.title-card__name {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}
.meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-4); margin: 0;
}
.title-card__note {
  font-size: 14px; line-height: 1.45; color: var(--text-2); margin: 0;
  text-wrap: pretty;
}

/* ==========================================================================
   Hero — the showreel, full-bleed, with the headline over it
   ========================================================================== */

/* Always dark, whatever the theme: it is footage with a dark veil, and white type on it,
   like the reference sites. The tokens are re-scoped here so buttons and rules pick up
   colours that read on video in both themes. */
.hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  /* runs up under the glass header (its height is measured by app.js; the fallback is
     the desktop header: 84px logo + 24px padding + 1px edge) and most of the way down
     the first screen, leaving the numbers row peeking below the fold */
  margin-top: calc(-1 * var(--header-h, 109px));
  min-height: clamp(600px, 90vh, 1000px);
  display: flex; align-items: flex-end;
  background: #0B0B0D; color: #F4F5F7;
  --text: #F4F5F7; --text-2: #D6DAE1; --text-3: #B4B9C3; --text-4: #AEB4BF;
  --accent: #4A90F0; --accent-text: #B9CBFF; --on-accent: #06070A;
  --line-bright: rgba(255, 255, 255, 0.55); --accent-wash: rgba(255, 255, 255, 0.10);
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; background: #0B0B0D;
}
/* darkens the foot of the frame for the headline and the left for the copy, and eases the
   top so the light header sits on something calmer */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.34) 0%, rgba(11,11,13,0.04) 28%, rgba(11,11,13,0.10) 46%, rgba(11,11,13,0.86) 100%),
    linear-gradient(90deg,  rgba(11,11,13,0.58) 0%, rgba(11,11,13,0.30) 42%, rgba(11,11,13,0) 74%);
}
/* a soft shadow under the type so it still reads across a bright frame (a white helmet,
   a lit stage) between one shot and the next */
.hero__eyebrow, .hero .h1, .hero .lede, .hero__now { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }

.hero__inner {
  position: relative; width: 100%;
  padding-block: calc(var(--header-h, 109px) + 56px) clamp(48px, 6vw, 76px);
  display: flex; flex-direction: column; gap: 26px;
}
.hero__inner > * { max-width: 760px; }
.hero__inner .lede { color: var(--text-2); }
.hero__inner .btn--ghost:hover { border-color: #fff; }

.hero__eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4);
  margin: 0;
}
.hero__rule { width: 26px; height: 1px; background: var(--accent); display: block; }
.hero__sep { color: var(--text-4); }

/* the name of the show on screen, bottom right, kept in step with the reel by app.js */
.hero__now {
  position: absolute; right: var(--edge); bottom: clamp(48px, 6vw, 76px);
  margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  text-align: right;
}
.hero__now-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4);
}
.hero__now-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #fff;
  transition: opacity .25s ease;
}
.hero__now-title[data-switching="true"] { opacity: 0; }

@media (max-width: 900px) {
  .hero { min-height: clamp(540px, 82vh, 800px); }
  .hero__inner { padding-top: calc(var(--header-h, 109px) + 40px); gap: 22px; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(11,11,13,0.34) 0%, rgba(11,11,13,0.30) 30%, rgba(11,11,13,0.90) 100%);
  }
  .hero__now { display: none; }
}

/* a phone held sideways is only ~390px tall: a 540px hero would be taller than the screen,
   so on short viewports the hero is measured against the screen instead */
@media (max-height: 560px) and (orientation: landscape) {
  .brand__logo { height: 52px; }
  .site-header { padding-block: 6px; }
  .hero { min-height: 0; }
  .hero__inner { padding-block: calc(var(--header-h, 64px) + 12px) 18px; gap: 10px; }
  .hero .h1 { font-size: clamp(26px, 4.2vw, 36px); }
  .hero .lede { font-size: 14px; max-width: 70ch; }
  .hero .actions { padding-top: 2px; }
  .hero__now { bottom: 16px; }
}

.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
@media (max-width: 560px) {
  .actions { flex-direction: column; align-items: stretch; gap: 11px; }
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 34px 40px; display: flex; flex-direction: column; gap: 7px;
  border-right: 1px solid var(--line);
}
.stat:first-child { padding-left: var(--edge); }
.stat:last-child  { padding-right: var(--edge); border-right: 0; }
.stat__num {
  font-size: clamp(30px, 2.8vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4);
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  /* an odd last figure takes the full row rather than leaving a hole */
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 22px var(--edge); border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-block: clamp(40px, 6vw, 88px) clamp(44px, 6.5vw, 96px); }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(38px, 5vw, 76px) clamp(42px, 5.5vw, 88px); }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: 40px;
}
.section__heading { display: flex; flex-direction: column; gap: 12px; }
.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  padding-bottom: 6px; white-space: nowrap;
}
.link-more:hover { color: var(--text); }

/* ---------- featured titles ---------- */

.titles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1100px) { .titles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  /* horizontal swipe row; the next card peeks to signal the scroll */
  .titles {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--edge) * -1);
    padding-inline: var(--edge); padding-bottom: 4px;
    scrollbar-width: none;
  }
  .titles::-webkit-scrollbar { display: none; }
  .titles > li { flex: 0 0 min(80vw, 320px); scroll-snap-align: start; }
}

/* ---------- genres ---------- */

.genres-layout { display: flex; gap: 80px; }
.genres-layout__intro { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.genres-layout__intro p { font-size: 15px; line-height: 1.6; color: var(--text-3); margin: 0; text-wrap: pretty; }
@media (max-width: 1000px) {
  .genres-layout { flex-direction: column; gap: 24px; }
  .genres-layout__intro { width: auto; }
}

.chips {
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
  list-style: none; margin: 0; padding: 6px 0 0;
}
.chip {
  display: inline-flex; align-items: center;
  min-height: 46px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.chip--accent {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text);
}

/* ---------- services ---------- */

.services {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1000px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .services { grid-template-columns: 1fr; } }

/* six items want three columns, not four with two holes in the second row */
.services--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .services--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .services--three { grid-template-columns: 1fr; } }

.service {
  background: var(--surface);
  padding: 32px 28px 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.service h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.service p { font-size: 14px; line-height: 1.6; color: var(--text-3); margin: 0; text-wrap: pretty; }
.service svg { color: var(--accent); }
/* a route card ends with its own mailto link, pushed to the foot so the three line up */
.service .link-more { margin-top: auto; padding-bottom: 0; color: var(--accent); }
.service .link-more:hover { color: var(--accent-text); }
.service p a { color: var(--accent); text-underline-offset: 3px; text-decoration: underline; }

/* the one line that says all three routes land in the same inbox */
.contact__note {
  margin: clamp(22px, 2.6vw, 30px) 0 0; max-width: 72ch;
  font-size: 14px; line-height: 1.6; color: var(--text-3); text-wrap: pretty;
}
.contact__note a { color: var(--accent); text-underline-offset: 3px; }

/* the one-line explanation under a password-protected reel */
.title-page__reel {
  margin: 0; max-width: 56ch;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  letter-spacing: .04em; color: var(--text-3);
}

/* ---------- track record ---------- */
/* Deals, not news: each row leads with the title and what happened, and the
   year sits with its source at the end, so nothing reads as a dated feed. Only
   the source links out — the row is the fact, the link is the citation. */

.record { list-style: none; margin: 0; padding: 0; }
.record__row {
  /* every row is its own grid, so a content-sized source column would shift the
     deal column a pixel or two per row — fixed, they line up down the list */
  display: grid; grid-template-columns: minmax(180px, 0.8fr) 1.6fr 210px;   /* fits “Digital TV Europe · 2015” */
  gap: 40px; align-items: baseline;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.record li:last-child { border-bottom: 1px solid var(--line); }
.record__title {
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.3; margin: 0; text-wrap: balance;
}
.record__title em { font-style: italic; }
.record__deal { margin: 0; color: var(--text-2); line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.record__source {
  justify-self: end; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
a.record__source { transition: color .15s; }
a.record__source:hover { color: var(--accent-text); }
a.record__source:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.record__press {
  margin: 22px 0 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-4);
}
@media (max-width: 820px) {
  .record__row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .record__source { justify-self: start; margin-top: 6px; }
  .record__press { line-height: 1.9; }
}

/* ---------- CTA ---------- */

.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 80px;
  padding-block: clamp(44px, 7vw, 96px) clamp(48px, 7.5vw, 100px);
  border-top: 1px solid var(--line);
}
.cta__text { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.cta__text h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin: 0; text-wrap: balance; }
.cta__text p { font-size: 17px; line-height: 1.6; color: var(--text-3); margin: 0; text-wrap: pretty; }
.cta__actions { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; min-width: 320px; }
.cta__contact {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--text-2);
}
.cta__contact .placeholder { color: var(--text-4); }
@media (max-width: 900px) {
  .cta { flex-direction: column; align-items: stretch; gap: 24px; }
  .cta__actions { min-width: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Light in both themes, like the header: the page is bookended by two light bands, and the
   navy mark reads on its own ground rather than disappearing into black. Re-declaring the
   light tokens here scopes them to the footer subtree. */
.site-footer {
  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --surface-alt:   #EBF0F6;
  --surface-deep:  #E7EDF5;
  --surface-input: #FFFFFF;
  --line:          #DCE3EC;
  --line-strong:   #C6D0DE;
  --line-control:  #7E8DA5;
  --line-bright:   #8E9CB2;
  --text:          #0A1424;
  /* the band darkens to #A8ACB2 at the bottom, where #3E4C63 was only 3.85:1 —
     measured 27 Oct 2026, tightened to clear AA on the darkest part of the gradient */
  --text-2:        #323B4E;
  /* the grey ground is darker than a white page, so the muted steps tighten to keep AA */
  --text-3:        #343D50;
  --text-4:        #343D50;
  --accent:        #003366;
  --accent-soft:   rgba(0, 51, 102, 0.08);
  --accent-line:   rgba(0, 51, 102, 0.28);
  --accent-text:   #003366;
  --on-accent:     #FFFFFF;
  --accent-wash:   rgba(0, 51, 102, 0.05);
  --accent-wash-2: rgba(0, 51, 102, 0.14);

  padding: 56px var(--edge) 44px;
  /* the light grey the header's glass actually settles to over the dark page (86%/78% white
     over #0B0B0D), so the two bands are the same colour rather than merely both light */
  background: linear-gradient(180deg, #C6C8CC 0%, #A8ACB2 100%);
  color: var(--text);
  /* the header's glass cues, mirrored: a fine light edge with a highlight just inside it */
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* light theme: the header settles near-white there, so the footer follows it */
:root[data-theme="light"] .site-footer,
:root[data-theme="light"] .cat-footer {
  background: linear-gradient(180deg, #FCFCFD 0%, #F2F5FA 100%);
  --text-3: #52607A; --text-4: #5C6980;
}
.footer__top { display: flex; justify-content: space-between; gap: 80px; padding-bottom: 48px; flex-wrap: wrap; }
.footer__about { display: flex; flex-direction: column; gap: 18px; max-width: 300px; }
.footer__about p { font-size: 14px; line-height: 1.6; color: var(--text-4); margin: 0; text-wrap: pretty; }
.footer__cols { display: flex; gap: 72px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin: 0;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.footer__col a, .footer__col li { font-size: 14px; color: var(--text-2); }
.footer__col a:hover { color: var(--text); }
.footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  /* the rule above it, and the line itself, in the site's black — Ana's call */
  padding-top: 26px; border-top: 1px solid var(--text);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text);
}
.footer__legal ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
@media (max-width: 700px) {
  .footer__top { gap: 40px; }
  .footer__cols { gap: 40px; }
}

/* ==========================================================================
   Catalogue page
   ========================================================================== */

.cat-head { padding: 52px var(--edge) 34px; }
.cat-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.cat-head__text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.cat-head__text h1 { font-size: clamp(36px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 0; }
.cat-head__text p { font-size: 16px; line-height: 1.6; color: var(--text-3); margin: 0; text-wrap: pretty; }
.breadcrumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); margin: 0; }
.breadcrumb a:hover { color: var(--text-2); }
@media (max-width: 900px) { .cat-head__row { flex-direction: column; align-items: stretch; gap: 24px; } }

.search-field {
  display: flex; align-items: center; gap: 10px;
  height: 52px; width: 420px; max-width: 100%; padding: 0 18px;
  border: 1px solid var(--line-control); border-radius: var(--radius);
  background: var(--surface-input); flex-shrink: 0;
}
.search-field input {
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: 15px; width: 100%; min-width: 0;
}
.search-field input::placeholder { color: var(--text-4); }
.search-field:focus-within { border-color: var(--line-bright); }

.cat-body { display: flex; gap: 44px; padding: 0 var(--edge) 40px; align-items: flex-start; }

.filters { width: 244px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; padding-top: 4px; }
.filters__head { display: flex; align-items: center; justify-content: space-between; }
.filters__title { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.filters__clear { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.filter-group { display: flex; flex-direction: column; gap: 14px; }
.filter-group > h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin: 0;
}
.filters hr { height: 1px; background: var(--line); border: 0; margin: 0; }

.check { display: flex; align-items: center; gap: 11px; min-height: 28px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 17px; height: 17px; border-radius: 3px; border: 1px solid var(--line-bright);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.check__box svg { opacity: 0; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:checked ~ .check__label { color: var(--text); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check:hover .check__label { color: var(--text); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13px; color: var(--text-2);
}
.pill:hover { border-color: var(--line-bright); color: var(--text); }

.select {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 0 14px; width: 100%;
  border: 1px solid var(--line-control); border-radius: var(--radius);
  background: var(--surface-input); font-size: 14px; color: var(--text-2);
}

.results { flex-grow: 1; display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.toolbar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.count { font-size: 15px; color: var(--text-2); }
.count strong { color: var(--text); font-weight: 600; }
.toolbar__divider { width: 1px; height: 16px; background: var(--line-strong); }

.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 8px 0 12px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 13px; color: var(--accent-text);
}
.filter-chip:hover { background: var(--accent-wash-2); }

.toolbar__right { display: flex; align-items: center; gap: 18px; }
.sort {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-2);
}
.sort .sort__label { color: var(--text-4); }
.viewswitch { display: flex; gap: 1px; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.viewswitch button {
  width: 34px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-input); color: var(--text-4);
}
.viewswitch button[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; }

.results-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1000px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .results-grid { grid-template-columns: 1fr; gap: 20px; } }

.results-grid .poster__title { font-size: clamp(16px, 1.4vw, 20px); left: 14px; right: 14px; bottom: 12px; }
.results-grid .badge { top: auto; right: auto; bottom: 12px; left: 12px; font-size: 9px; padding: 4px 7px; }
.results-grid .poster--empty .poster__title { bottom: 42px; }
.title-card--placeholder .title-card__name { color: var(--text-4); }

/* ----- catalogue filtering ------------------------------------------------
   The filter panel, toolbar and results are driven by app.js reading the data
   attributes on each <li>. Everything below is the state those scripts toggle. */

fieldset.filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }

.check { position: relative; }
.check__label { flex: 1 1 auto; }
.check__count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--text-4); font-variant-numeric: tabular-nums;
}
/* genres with no titles yet are part of the taxonomy but cannot be chosen */
.check--extra { display: none; }
.filters[data-genres="all"] .check--extra { display: flex; }
.check--empty { opacity: .45; cursor: not-allowed; }
.check--empty:hover .check__label { color: var(--text-3); }
.filters__more { text-align: left; padding-top: 2px; }

.sort { gap: 8px; }
.sort__select {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text); background: var(--surface-input);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  min-height: 32px; padding: 0 8px;
}

.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip { cursor: pointer; }

.no-results {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 62ch; padding: 40px 0 20px;
}
/* a class that sets display beats the UA's [hidden] rule, so say it again */
.no-results[hidden] { display: none; }
.no-results p { font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0; }
.no-results__head {
  font-size: clamp(20px, 2vw, 25px); font-weight: 650;
  letter-spacing: -.02em; color: var(--text) !important;
}
.no-results p:last-child { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }

/* list view — the same cards laid on their side */
.results-grid--list { grid-template-columns: 1fr; gap: 0; }
.results-grid--list > li { border-bottom: 1px solid var(--line); }
.results-grid--list > li:first-child { border-top: 1px solid var(--line); }
.results-grid--list .title-card {
  flex-direction: row; align-items: center; gap: 20px; padding: 14px 4px;
}
.results-grid--list .poster { width: 128px; flex: 0 0 128px; }
.results-grid--list .title-card:hover .poster { transform: none; }
.results-grid--list .title-card__body { gap: 5px; }
.results-grid--list .title-card__name { font-size: 17px; }
.results-grid--list .poster__title { font-size: 12px; left: 8px; right: 8px; bottom: 6px; }
.results-grid--list .badge { top: auto; right: auto; bottom: 7px; left: 7px; font-size: 8px; padding: 3px 5px; }
/* the thumbnail is too small to stack two labels at the bottom: the placeholder title goes on top */
.results-grid--list .poster--empty .poster__title { top: 6px; bottom: auto; }
@media (max-width: 620px) {
  .results-grid--list .poster { width: 92px; flex: 0 0 92px; }
  .results-grid--list .title-card { gap: 14px; }
}


.filters-toggle { display: none; }

@media (max-width: 1000px) {
  .cat-body { flex-direction: column; gap: 20px; }
  .filters {
    width: 100%; display: none;
    border: 1px solid var(--line); border-radius: 4px; padding: 24px 20px;
  }
  .filters[data-open="true"] { display: flex; }
  .filters-toggle {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 18px;
    border: 1px solid var(--line-control); border-radius: var(--radius);
    background: var(--surface-input);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  }
}

/* the catalogue's slim footer takes the same light treatment as the main one */
.cat-footer {  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --surface-alt:   #EBF0F6;
  --surface-deep:  #E7EDF5;
  --surface-input: #FFFFFF;
  --line:          #DCE3EC;
  --line-strong:   #C6D0DE;
  --line-control:  #7E8DA5;
  --line-bright:   #8E9CB2;
  --text:          #0A1424;
  --text-2:        #3E4C63;
  /* the grey ground is darker than a white page, so the muted steps tighten to keep AA */
  --text-3:        #343D50;
  --text-4:        #343D50;
  --accent:        #003366;
  --accent-soft:   rgba(0, 51, 102, 0.08);
  --accent-line:   rgba(0, 51, 102, 0.28);
  --accent-text:   #003366;
  --on-accent:     #FFFFFF;
  --accent-wash:   rgba(0, 51, 102, 0.05);
  --accent-wash-2: rgba(0, 51, 102, 0.14);

  padding: 34px var(--edge);
  /* the light grey the header's glass actually settles to over the dark page (86%/78% white
     over #0B0B0D), so the two bands are the same colour rather than merely both light */
  background: linear-gradient(180deg, #C6C8CC 0%, #A8ACB2 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-4);
}
.cat-footer__links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cat-footer a { color: var(--text); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .title-card:hover .poster { transform: none; }
}

/* ==========================================================================
   Inner pages — about, formats, production, consulting
   ========================================================================== */

.page-head { padding: 52px var(--edge) 34px; }
.page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.page-head__text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.page-head__text h1 {
  font-size: clamp(36px, 4.2vw, 52px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1; margin: 0;
}
.page-head__text p { font-size: 16px; line-height: 1.6; color: var(--text-3); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) { .page-head__row { flex-direction: column; align-items: stretch; gap: 24px; } }

/* A page head with no standfirst under the h1 does not need the same air beneath it. */
.page-head--tight { padding-bottom: 6px; }
.page-head--tight + .section { padding-top: clamp(26px, 2.8vw, 38px); }

.prose { display: flex; flex-direction: column; gap: 20px; max-width: 68ch; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--text-2); margin: 0; text-wrap: pretty; }
.prose p.prose__lead { font-size: 20px; line-height: 1.55; color: var(--text); }

/* Legal pages — privacy and terms. A single reading column; the headings are the
   same scale as the rest of the site but quieter, because nobody reads these for pleasure. */
.legal { max-width: 74ch; }
.legal > * + * { margin-top: 18px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.68; color: var(--text-2); margin: 0; text-wrap: pretty; }
.legal p.legal__lead { font-size: 19px; line-height: 1.6; color: var(--text); }
.legal h2 {
  font-size: clamp(19px, 1.7vw, 22px); font-weight: 650; letter-spacing: -.018em;
  color: var(--text); margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.legal li::marker { color: var(--text-4); }
.legal strong { color: var(--text); font-weight: 600; }
.legal code {
  font-family: var(--mono); font-size: .9em; color: var(--text);
  background: var(--accent-wash); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.legal a { color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 620px) { .legal h2 { margin-top: 34px; padding-top: 18px; } }

.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.quote { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.quote p {
  font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; line-height: 1.32;
  letter-spacing: -.022em; color: var(--text); margin: 0; text-wrap: balance;
}
.quote cite {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4); font-style: normal;
}

.person { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; gap: 24px; } .person__portrait { max-width: 460px; } }
.person__portrait {
  aspect-ratio: 3/2; border: 1px solid var(--line-strong); border-radius: 4px;
  overflow: hidden; background: var(--surface-alt);
}
.person__portrait picture, .person__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__body { display: flex; flex-direction: column; gap: 12px; }
.person__body .person__name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.person__body .person__role {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0;
}
.person__body p { font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0; text-wrap: pretty; }

/* placeholder strips for artwork we don't have yet — dashed, so nobody ships them by accident */
.logos { display: flex; flex-wrap: wrap; gap: 14px; }
.logo-slot {
  height: 68px; min-width: 158px; padding: 0 22px;
  border: 1px dashed var(--line-control); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-4);
}

.facts { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.fact { display: flex; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.fact dt {
  flex: 0 0 148px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-4);
}
.fact dd { margin: 0; font-size: 15px; color: var(--text-2); }
@media (max-width: 560px) { .fact { flex-direction: column; gap: 5px; } .fact dt { flex: none; } }



/* Supplied logo strips — organisations we belong to, brands we have worked with */
.logo-strip { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.logo-strip img, .client-grid img {
  max-width: 100%; height: auto; display: block; border-radius: 4px;
  background: #FFFFFF; border: 1px solid var(--line);
}
.logo-strip img { padding: 10px 14px; }
.client-grid img { width: 100%; max-width: 460px; }

.quote--placeholder p {
  color: var(--text-4); font-weight: 500;
  border: 1px dashed var(--line-control); border-radius: 4px; padding: 18px 20px;
}




/* ==========================================================================
   Strip — a full-bleed banner of programming. The frame is taller than the
   banner, and pans vertically through it as the band crosses the viewport.
   ========================================================================== */



/* ---------- client logos ----------
   A grey band in the footer's colour, with room around the marks so they can breathe, and a
   hover that brings one forward: the tile it sits in keeps its size, so nothing reflows — only
   the mark scales, lifts and gains a shadow. */
.logostrip {
  padding: clamp(26px, 3.2vw, 40px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px;
  /* light grey — lighter than the footer's band, still clearly grey rather than white */
  background: linear-gradient(180deg, #ECEEF1 0%, #DDE0E4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.logostrip__label {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #52607A;
}
.logostrip__row {
  display: grid; grid-template-columns: repeat(9, 1fr);
  align-items: center; justify-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  list-style: none; margin: 0; padding: 0;
}
.logostrip__row li {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; padding: 6px 2px;
}
.logostrip__row img {
  /* white grounds are keyed out of the artwork, so the marks keep their own colours */
  max-height: 64px; max-width: 100%; width: auto; object-fit: contain;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), filter .26s ease;
}
/* keyboard gets the same treatment as the mouse, plus a ring to show where focus is */
.logostrip__row li:hover, .logostrip__row li:focus-visible { z-index: 2; }
.logostrip__row li:hover img,
.logostrip__row li:focus-visible img {
  transform: scale(1.35);
  filter: drop-shadow(0 10px 18px rgba(10, 20, 36, 0.35));
}
.logostrip__row li:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px;
}
.logostrip__row li:focus { outline: none; }   /* ring only for keyboard, not after a click */
/* TVzor and Martial Arts TV are drawn white-on-black, so their own black ground stays and
   only the surrounding white is keyed away */
.logostrip__row img.is-framed { border-radius: 4px; max-height: 58px; }
@media (prefers-reduced-motion: reduce) {
  .logostrip__row li:hover img, .logostrip__row li:focus-visible img { transform: none; filter: none; }
}
/* fewer across as the band narrows, so the marks never shrink to nothing */
@media (max-width: 1040px) { .logostrip__row { grid-template-columns: repeat(5, 1fr); gap: 20px 16px; } }
@media (max-width: 680px)  { .logostrip__row { grid-template-columns: repeat(3, 1fr); gap: 22px 14px; } }

/* Details and Memberships are two headings on one line, on the same grid as the content
   below them, so each sits over its own column. */
.split--heads { margin-bottom: 40px; align-items: end; }
@media (max-width: 940px) { .split--heads { gap: 0; } .split--heads h2 + h2 { margin-top: 32px; } }

/* the memberships band owns its column now, so the marks can be bigger: three across,
   the last two centred underneath */
.logostrip--members { padding: clamp(24px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px); }
.logostrip--members .logostrip__row {
  grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 32px) clamp(16px, 1.8vw, 24px);
}
/* RTS is a 5:1 lockup and FRAPA 5:1 too — in a one-third cell they shrink to nothing, so the
   two widest take a double slot and the three squarer marks share the row below */
.logostrip--members .logostrip__row li:nth-child(1) { grid-column: span 2; }
.logostrip--members .logostrip__row img { max-height: 54px; }
.logostrip--members .logostrip__row li:nth-child(1) img { max-height: 44px; }
.logostrip--members .logostrip__row li:nth-child(2) img { max-height: 38px; }
.logostrip--members .logostrip__row li:nth-child(3) img { max-height: 40px; }
@media (max-width: 520px) {
  .logostrip--members .logostrip__row { grid-template-columns: repeat(2, 1fr); }
  .logostrip--members .logostrip__row li:nth-child(1) { grid-column: span 2; }
}
.logostrip--members .logostrip__row li:hover img,
.logostrip--members .logostrip__row li:focus-visible img { transform: scale(1.3); }
/* ==========================================================================
   Title page — one per programme: artwork, synopsis, what it is, how to see it
   ========================================================================== */

.title-page {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px); align-items: start;
  padding-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 880px) { .title-page { grid-template-columns: 1fr; gap: 28px; } }

.title-page__art { position: relative; }
.title-page__img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--line-strong); border-radius: 4px; display: block;
}
.title-page__img--empty { background: linear-gradient(158deg, #10233C 0%, #08111F 100%); }
.title-page__art .badge { top: auto; right: auto; bottom: 14px; left: 14px; }

.title-page__body { display: flex; flex-direction: column; gap: 18px; }
.title-page__body .h1 { font-size: clamp(32px, 3.6vw, 52px); }
.title-page__body .lede { max-width: 56ch; }
.title-page__note {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-3); max-width: 56ch;
  padding-left: 14px; border-left: 2px solid var(--accent-line);
}
.title-page .facts { margin-top: 6px; }
.title-page .actions { padding-top: 2px; }

/* the breadcrumb above it matches the catalogue's */
.breadcrumb.wrap { padding-top: 28px; }

/* ==========================================================================
   Theme toggle. It lives in the header, which is always light, so it takes
   the header's own palette.
   ========================================================================== */

.theme-toggle {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-control); border-radius: var(--radius);
  color: var(--text-2); transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--line-bright); color: var(--text); }

/* the icon shows the theme you would switch TO: the sun by default (dark), the moon in light */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }


/* ==========================================================================
   Sizzle reel player
   ========================================================================== */

/* a solid triangle in the button's own colour, so it inherits both themes */
.btn__play {
  width: 0; height: 0; flex: none;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  margin-right: -2px;
}

/* The player chrome stays dark in both themes. A reel is dark footage with a dark
   player inside it, and a white frame around that read as a mistake rather than as
   the light theme — the same reasoning as the dark badge over pale key art. */
.reel {
  border: 0; padding: 0; background: none;
  max-width: none; max-height: none;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  overflow: hidden;
}
.reel::backdrop {
  background: rgba(6, 7, 10, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.reel:not([open]) { display: none; }

.reel__inner {
  /* sized by whichever runs out first, the width or the height, so a 16:9 reel never
     pushes its own close button off a laptop screen in landscape */
  width: min(1100px, 92vw, calc((100vh - 132px) * 16 / 9));
  display: flex; flex-direction: column; gap: 12px;
  animation: reel-in .18s ease-out;
}
@media (prefers-reduced-motion: reduce) { .reel__inner { animation: none; } }
@keyframes reel-in { from { opacity: 0; transform: translateY(8px); } }

.reel__bar { display: flex; align-items: center; gap: 16px; }
.reel__title {
  flex: 1 1 auto; margin: 0;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #C9CDD4;
}
.reel__close {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(242, 245, 250, 0.26);
  border-radius: var(--radius);
  background: rgba(242, 245, 250, 0.06);
  color: #F4F5F7; font-size: 22px; line-height: 1;
  transition: background .15s, border-color .15s;
}
.reel__close:hover { background: rgba(242, 245, 250, 0.14); border-color: rgba(242, 245, 250, 0.5); }

.reel__frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.reel__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .reel__inner { width: 94vw; }
  .reel__title { font-size: 11px; }
}

/* shown only when the player is not running on nmv.tv — see app.js */
.reel__offsite {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: #C9CDD4;
}
.reel__offsite a { color: #9FC2FF; text-decoration: underline; }

/* The consent notice that stands in for the player until the visitor agrees to load
   Vimeo (see app.js). Same 16:9 box as the player so nothing jumps when the reel
   arrives; overflow stays visible so a phone-width notice can grow taller than 16:9. */
.reel__frame[hidden], .reel__consent[hidden] { display: none; }
.reel__consent {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(22px, 5vw, 56px);
  background: #101114;
  border: 1px solid rgba(242, 245, 250, 0.14);
  border-radius: var(--radius);
  color: #C9CDD4; font-size: 15px; line-height: 1.6;
}
.reel__consent p { margin: 0; max-width: 60ch; }
.reel__consent a { color: #9FC2FF; text-decoration: underline; }
.reel__consent-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #F4F5F7;
}
.reel__consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.reel__remember { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.reel__remember input { width: 18px; height: 18px; margin: 0; accent-color: #9FC2FF; }
@media (max-width: 640px) { .reel__consent { font-size: 14px; } }

/* privacy page: the "forget my choice" control */
.legal__choice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.legal__choice[hidden] { display: none; }
.legal__choice p { margin: 0; }
.legal__choice [data-reels-status]:focus { outline: none; }

/* Member logos on the About page link to each association's site. The tile keeps its
   hover; the link carries keyboard focus (the <li> no longer takes tabindex), so the same
   lift and a focus ring follow the link. */
.logostrip__link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; border-radius: 4px;
}
.logostrip__row li:has(.logostrip__link:focus-visible) { z-index: 2; }
.logostrip__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.logostrip__link:focus:not(:focus-visible) { outline: none; }
.logostrip__link:focus-visible img {
  transform: scale(1.3);
  filter: drop-shadow(0 10px 18px rgba(10, 20, 36, 0.35));
}
@media (prefers-reduced-motion: reduce) {
  .logostrip__link:focus-visible img { transform: none; filter: none; }
}

/* ==========================================================================
   Contact form (contact.html; posts to contact.php on Hostinger)
   ========================================================================== */
.contact-form { display: grid; gap: 18px; align-content: start; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .contact-form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.field__opt { text-transform: none; letter-spacing: 0; color: var(--text-4); margin-left: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--text);
  background: var(--surface-input);
  border: 1px solid var(--line-control); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line);
}
/* only after a send attempt, so an empty form does not start out red */
.contact-form.is-checked :invalid { border-color: #E5484D; }
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.contact-form__foot .btn:disabled { opacity: .6; cursor: progress; }
.contact-form__status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.contact-form__status:empty { display: none; }
.contact-form__status[data-state="ok"] { color: var(--text); }
.contact-form__status[data-state="error"] { color: #F07A7E; }
:root[data-theme="light"] .contact-form__status[data-state="error"] { color: #B4232A; }
.contact-form__aside { font-size: 14.5px; color: var(--text-3); }
/* the select matches the text fields: same padding, its own chevron */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238B8F96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}