/*
 * Shared styling for the static pages in public/ — welcome, about, careers, contact,
 * privacy-policy, 404.
 *
 * These pages are deliberately outside the React app (see the comment at the top of
 * welcome.html), so they cannot reach Tailwind, app/globals.css or anything else the
 * bundler owns. This file is their whole design system, and it is a plain stylesheet
 * on purpose: a <link> is one cached request shared by every page, where inlining the
 * same 500 lines six times would mean editing the footer in six places and getting it
 * wrong in one.
 *
 * Page-specific rules stay inline in their own page — the hero and collage in welcome,
 * the not-found block in 404. Only what is genuinely shared is here.
 *
 * ── Theming ─────────────────────────────────────────────────────────────────
 * Dark by default, light on request. NOT prefers-color-scheme: this site is the front
 * of a dark video app, so a visitor on a light-mode laptop should still land on the
 * dark page the product actually looks like. The OS setting does not decide it.
 *
 *   1. bare :root                — the complete DARK palette, so no token can ever be
 *                                  undefined and the default needs no media query.
 *   2. :root[data-theme="light"] — the light palette, applied only when the visitor
 *                                  presses the toggle.
 *
 * site.js stamps data-theme on <html> and remembers the choice; a tiny inline snippet
 * in each page's <head> re-applies it before first paint, so someone who chose light
 * never sees a dark flash on the way in.
 *
 * Two things stay dark in BOTH themes, on purpose: the hero, because its text sits
 * over photographs and needs a dark scrim to stay legible whatever the catalogue
 * serves that day, and the video lightbox, because a bright surround around a playing
 * film is unpleasant in any theme.
 */

:root {
  /* ── Dark — the default ── */
  --ink:          #05071a;
  --ink-2:        #0a0e28;
  --line:         rgba(255,255,255,0.10);
  --text:         #ffffff;
  --muted:        rgba(255,255,255,0.62);
  --muted-2:      rgba(255,255,255,0.45);

  --surface:      rgba(255,255,255,0.04);
  --surface-2:    rgba(255,255,255,0.055);
  --surface-hover: rgba(255,255,255,0.075);

  --footer-bg:    #070a1d;
  --nav-solid-bg: rgba(5,7,26,0.92);
  --nav-link:     rgba(255,255,255,0.82);

  --shadow:       0 10px 30px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.045);
  --shadow-sm:    0 4px 14px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-lg:    0 18px 44px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.045);

  --accent-blue:   #8fb0ff;
  --accent-green:  #7ee59a;
  --accent-amber:  #f5cc6b;
  --accent-cyan:   #7fd7e8;
  --accent-red:    #ff9aa8;
  --eyebrow-bg:    rgba(226,73,151,0.14);
  --eyebrow-line:  rgba(226,73,151,0.34);
  --eyebrow-text:  #f5a8ce;

  --brand-a:    #e24997;
  --brand-b:    #2d2ed4;
  --brand:      linear-gradient(135deg, #e24997, #2d2ed4);
  --nav-h:      68px;

  /* Text that sits on a surface which is dark in BOTH themes — the hero's photo scrim
     and the quote band's gradient. These are deliberately absent from the light block
     below, so they never flip.

     This is the trap that caught the quote band: the gradient behind it is fixed, but
     its text was using --text, which turns near-black in light mode. Dark type on a
     purple gradient. Anything painted over a fixed background must take its colour
     from here, not from the theme. */
  --on-dark:       #ffffff;
  --on-dark-mute:  rgba(255,255,255,0.78);
  --on-dark-faint: rgba(255,255,255,0.55);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink:          #ffffff;
  --ink-2:        #f4f6fb;
  --line:         rgba(16,20,40,0.12);
  --text:         #14161f;
  --muted:        rgba(20,22,31,0.70);
  --muted-2:      rgba(20,22,31,0.52);

  --surface:      #ffffff;
  --surface-2:    #f4f6fb;
  --surface-hover: #fbfcff;

  --footer-bg:    #f4f6fb;
  --nav-solid-bg: rgba(255,255,255,0.92);
  --nav-link:     rgba(20,22,31,0.75);

  --shadow:       0 10px 30px rgba(16,20,40,0.10);
  --shadow-sm:    0 4px 14px rgba(16,20,40,0.07);
  --shadow-lg:    0 18px 44px rgba(16,20,40,0.13);

  --accent-blue:   #2f5fd0;
  --accent-green:  #1d8a44;
  --accent-amber:  #9a6a00;
  --accent-cyan:   #0d7490;
  --accent-red:    #c02b46;
  --eyebrow-bg:    rgba(226,73,151,0.10);
  --eyebrow-line:  rgba(226,73,151,0.30);
  --eyebrow-text:  #b62a75;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Poppins at 1rem, as atv-web1 had it. The font is loaded by a <link> in each page's
   head — naming it in the stack without loading it (which is what this file did at
   first) silently fell back to the system UI font and changed the feel of every page. */
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The original's heading weights and Bootstrap's rem scale, so a ported page keeps
   its proportions. Sizes are clamped at the top end only, to stop the largest ones
   overflowing a phone — the desktop value is the original's. */
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text); line-height: 1.3; }

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

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Top bar ───────────────────────────────────────────────────────────────
   On the welcome page the nav floats over the hero collage, Netflix-style, so the
   page opens as one image rather than a bar and a picture. The inner pages have no
   hero to float over, so they add .nav--solid, which gives it a background and takes
   it out of the overlay. */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 20px;
  /* The bar's background spans the window, but its CONTENTS line up with the page
     column beneath them — so the logo sits directly above the left edge of the
     content and Sign In above the right edge, instead of floating off near the glass.
     That is what "bring it towards the centre" actually wants: alignment, not a
     bigger arbitrary gap.

     Three-way, and the cap is the important part. Aligning to the column with nothing
     holding it back looked right at 1440px and absurd beyond it — the half-gutter grows
     with the window, so a 1970px screen put the logo 395px in and an ultrawide 690px,
     which is not a nav bar any more. So the column alignment is capped at 130px, the
     value it reaches at 1440px: up to there the bar lines up with the content beneath
     it exactly, and past there it simply holds that inset. */
  padding: 0 max(
    clamp(20px, 4.5vw, 56px),
    min(calc(((100% - 1180px) / 2 + 50px) * 1.56), 281px)
  );
  background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0));
}
.nav--solid {
  position: sticky;
  background: var(--nav-solid-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 46px; width: auto; display: block; }

/* Which lockup is showing.
   Default (dark theme): the white one, everywhere.
   Light theme: still the white one over the hero — that bar sits on a dark scrim in
   both themes — but the red/black one wherever the bar is a real light surface. */
/* Scoped through .nav__logo on purpose: a bare `.nav__logo-dark` loses to the
   `.nav__logo img` rule above, which is one class plus one element, and both lockups
   render on top of each other. */
.nav__logo .nav__logo-dark { display: none; }
:root[data-theme="light"] .nav--solid .nav__logo-light { display: none; }
:root[data-theme="light"] .nav--solid .nav__logo-dark  { display: block; }

/* Truly centred on the bar, not merely "after the logo".
   The logo and the right-hand cluster are unequal widths, so a plain flex row puts
   the middle child wherever those two happen to leave room — which drifts as soon as
   a menu item is renamed. Absolute centring pins it to the page's centre line and
   keeps it there whatever flanks it. It reverts to a normal stacked block under
   820px, where the menu becomes the burger drawer. */
.nav__menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 30px;
  white-space: nowrap;
}
/* Over the hero the bar is always on a dark scrim, so its links are always white.
   On the inner pages the bar is a real surface and has to follow the theme. */
.nav__menu a {
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82);
  transition: color .16s;
}
.nav__menu a:hover,
.nav__menu a[aria-current='page'] { color: #fff; }
.nav--solid .nav__menu a { color: var(--nav-link); }
.nav--solid .nav__menu a:hover,
.nav--solid .nav__menu a[aria-current='page'] { color: var(--text); }

.nav__spacer { flex: 1; }

/* ── Theme toggle ──────────────────────────────────────────────────────────
   Sits next to Sign In. It shows the theme you would GET by pressing it, not the one
   you are in — a moon means "go dark". site.js swaps the glyph. */
.nav__theme {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  transition: background .16s, border-color .16s;
}
.nav__theme:hover { background: rgba(255,255,255,0.26); }
.nav--solid .nav__theme {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
.nav--solid .nav__theme:hover { background: var(--surface-hover); border-color: var(--text); }

.nav__signin {
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  border: 0; border-radius: 6px; padding: 9px 20px;
  cursor: pointer; font-family: inherit;
  transition: filter .16s;
}
.nav__signin:hover { filter: brightness(1.12); }

.nav__burger {
  display: none;
  background: none; border: 0; padding: 6px; cursor: pointer;
}
.nav__burger span {
  display: block; width: 22px; height: 2px; margin: 4px 0;
  background: #fff; border-radius: 2px;
}
.nav--solid .nav__burger span { background: var(--text); }

/* ── Page header (inner pages) ─────────────────────────────────────────── */
.pagehead {
  padding: clamp(48px, 7vw, 84px) 0 clamp(36px, 5vw, 56px);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(226,73,151,0.13) 0%, rgba(226,73,151,0) 70%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.pagehead h1 {
  font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 900; margin: 0 0 12px;
}
.pagehead p { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--muted); margin: 0; }

/* ── Sections ──────────────────────────────────────────────────────────── */
section.band { padding: clamp(56px, 8vw, 92px) 0; }
section.band--tight { padding: clamp(40px, 5vw, 64px) 0; }
section.band--alt { background: var(--ink-2); }

.eyebrow {
  display: inline-block; margin: 0 auto 14px;
  padding: 6px 16px; border-radius: 999px;
  background: var(--eyebrow-bg);
  border: 1px solid var(--eyebrow-line);
  color: var(--eyebrow-text); font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
}
.band__head { text-align: center; margin-bottom: clamp(32px, 5vw, 52px); }
.band__head h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 800; margin: 0;
}
.band__head .underline {
  width: 120px; height: 3px; margin: 18px auto 0;
  background: var(--brand); border-radius: 2px;
}
.band__lead {
  max-width: 760px; margin: 16px auto 0;
  font-size: 15.5px; line-height: 1.78; color: var(--muted);
}

.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* Four cards in a nine-card grid's columns left one stranded on its own row,
   which reads as a layout bug rather than a fourth benefit. */
.cards--four  { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.cards--three { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, background .18s, transform .18s;
}
.card:hover {
  border-color: rgba(226,73,151,0.42);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.card__icon {
  width: 46px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 21px; margin-bottom: 16px;
}
.card h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.card p  { font-size: 14px; line-height: 1.62; color: var(--muted); margin: 0; }

/* Prose inside a card — the About and Contact pages have paragraphs and lists
   where the landing page only had one line of description. */
.card--prose p { margin: 0 0 12px; }
.card--prose p:last-child { margin-bottom: 0; }
.card--prose ul { margin: 0; padding-left: 18px; }
.card--prose li { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 7px; }
.card--prose strong { color: var(--text); font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag {
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted);
}

/* ── Quote band ────────────────────────────────────────────────────────── */
.quote {
  background: linear-gradient(100deg, #e24997 0%, #7a3bc4 52%, #2d2ed4 100%);
  padding: clamp(56px, 8vw, 96px) 24px;
  text-align: center;
}
.quote p {
  max-width: 900px; margin: 0 auto;
  font-size: clamp(1.25rem, 3vw, 2.05rem);
  font-weight: 800; line-height: 1.42;
  color: var(--on-dark);        /* the band's gradient does not follow the theme */
}
.quote cite {
  display: block; margin-top: 20px;
  font-size: 13.5px; font-style: normal; font-weight: 500;
  color: var(--on-dark-mute); letter-spacing: .08em;
}

/* ── Call to action ────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; margin: 0 0 12px; }
.cta p  { color: var(--muted); font-size: 15.5px; margin: 0 0 26px; }
.cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 1rem 1.5rem; border-radius: .375rem; border: 0;
  font-size: 1rem; font-weight: 500; line-height: 1;
  font-family: inherit; cursor: pointer;
  transition: filter .16s, border-color .16s, background .16s;
}
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { filter: brightness(1.12); }
.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--text); background: var(--surface-2); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 10px;
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 22px; font-weight: 400; color: var(--muted);
  flex-shrink: 0; line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.72; color: var(--muted); }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer { background: var(--footer-bg); border-top: 1px solid var(--line); }
.foot {
  display: grid; gap: 40px; padding: clamp(48px, 6vw, 72px) 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.foot h4 { font-size: 16px; font-weight: 700; margin: 0 0 18px; }
.foot p, .foot li, .foot a { font-size: 14px; line-height: 1.78; color: var(--muted); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot ul a:hover { color: #fff; }
.foot .danger a { color: var(--accent-amber); }
/* ── Store buttons ─────────────────────────────────────────────────────────
   Drawn here rather than using the stores' supplied PNG badges. Note that both
   Apple's and Google's brand guidelines ask for their own artwork and say not to
   recreate it — this is a deliberate choice for visual fit, not an oversight.

   The upside is that they are theme-aware and sharp at any size: the PNGs were fixed
   243x70 black rectangles that sat as two dark blocks on a dark footer and would have
   needed a second pair of files for the light theme. */
.foot__apps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }

.store-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, background .16s, transform .16s;
}
.store-btn:hover {
  border-color: rgba(255,255,255,0.32);
  background: var(--surface-hover);
  transform: translateY(-1px);
}
:root[data-theme="light"] .store-btn:hover { border-color: rgba(16,20,40,0.34); }

.store-btn__mark { flex-shrink: 0; display: block; }
.store-btn__mark path { fill: var(--text); }

.store-btn__text { display: flex; flex-direction: column; line-height: 1.15; }
/* No text-transform: the two stores capitalise their kicker differently — Google's
   badge reads "GET IT ON", Apple's "Download on the" — so the markup decides. */
.store-btn__small {
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted);
}
.store-btn__big {
  font-size: 19px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}

.news { display: flex; gap: 8px; flex-wrap: wrap; }
.news input {
  flex: 1; min-width: 150px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 11px 14px; color: var(--text);
  font-size: 14px; font-family: inherit;
}
.news input::placeholder { color: var(--muted-2); }
.news button {
  background: #f0b429; color: #14161f; border: 0; border-radius: 8px;
  padding: 11px 22px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.foot__bar {
  border-top: 1px solid var(--line);
  padding: 22px 0; text-align: center;
  font-size: 13px; color: var(--muted-2);
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .nav__menu {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    transform: none;               /* undo the desktop centring */
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--nav-solid-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { width: 100%; padding: 13px 24px; font-size: 15px; }
  .nav__burger { display: block; }
  .nav { gap: 10px; }
  .nav__logo img { height: 34px; }
}

/* Phones. Four things share one 360px bar — logo, theme, Sign In, burger — and at the
   desktop sizes they added up to 272px plus gaps, which pushed "Sign In" onto two
   lines and made the bar 60px tall inside a 68px slot. Everything below is that sum
   coming down; `white-space: nowrap` is the belt and braces so it can never wrap again
   however the label changes. */
@media (max-width: 480px) {
  .nav { gap: 8px; padding: 0 16px; }
  .nav__logo img { height: 30px; }
  .nav__theme { width: 32px; height: 32px; font-size: 14px; }
  .nav__signin {
    font-size: 13px; padding: 8px 14px; white-space: nowrap;
  }
  .nav__burger { padding: 4px; }

  .section-heading { margin-bottom: 2.5rem; }
  .btn { padding: .85rem 1.25rem; font-size: .9375rem; }
  .pcard__title { font-size: 1.25rem; }
  .pcard h5 { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ported-page primitives — About, Careers, Contact
   ══════════════════════════════════════════════════════════════════════════
   These three pages are ports of atv-web1's Bootstrap pages, and the brief was to
   keep the layout as close to the originals as possible. So rather than restyle them
   into the landing page's full-width bands, this section reproduces the handful of
   Bootstrap pieces those pages actually used — a narrow centred column, cards with a
   coloured left/accent border, nested "bg-light" sub-cards, coloured alerts, badges,
   and the horizontal media card used for each person and each job — in dark.

   Bootstrap's contextual colours are kept as recognisable accents rather than dropped,
   because on the originals they are how the sections tell themselves apart: Get in
   Touch is blue, partners is green, business is amber. */

/* col-lg-10 inside Bootstrap's 1140px container ≈ 950px. */
.page { max-width: 960px; margin: 0 auto; padding: 0 24px; }
/* The original was `.section-padding-130` (130px top and bottom) plus an inline
   `padding-top: 150px` on each page — and that 150px existed for one reason: its
   header was `position: fixed`, so it sat OUTSIDE the flow and the page had to leave
   a hole for it.

   Our nav is `position: sticky`, which is in the flow and already occupies its 68px.
   Carrying the 150px across meant paying for the header twice — 218px of nothing
   between the bar and the page title. So the top is the original's rhythm minus the
   header it no longer has to clear; the bottom is untouched. */
.page-section { padding: 72px 0 130px; }
@media (max-width: 767px) { .page-section { padding: 44px 0 80px; } }

/* Original: `.section-heading { margin-bottom: 5rem }`, an h2 at Bootstrap's 2rem and
   a 1.25rem lead that drops to 1rem on small screens. */
/* The original's 5rem, trimmed: on those pages the gap sat under a much smaller
   title block, and at our heading sizes it opened a second hole under the subtitle. */
.section-heading { text-align: center; margin-bottom: 3.25rem; }
.section-heading h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin: 0 0 1rem; }
.section-heading p  { font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--muted); margin: 0; }

.h-center { text-align: center; font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 600; margin: 0 0 3rem; }   /* Bootstrap h3 */

/* ── Card ─────────────────────────────────────────────────────────────────
   The original's `.card.border-primary` etc. The accent is a left bar rather than a
   full outline: a 1px coloured ring around a dark card mostly disappears, where a
   4px bar keeps the same "this section is the blue one" signal it had on white. */
.pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 32px);
  margin: 26px 0;
  /* The originals used Bootstrap's shadow-sm / shadow-lg. In light that is a normal
     soft drop; in dark a grey blur does nothing, so the dark token adds a 1px light
     inner edge — that edge is what actually reads as "raised" there. */
  box-shadow: var(--shadow);
}
.pcard--primary { border-left: 4px solid var(--accent-blue); }
.pcard--success { border-left: 4px solid var(--accent-green); }
.pcard--warning { border-left: 4px solid var(--accent-amber); }
.pcard--muted   { background: var(--surface-2); }

.pcard__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.5rem; font-weight: 600; margin: 0 0 1.5rem;   /* Bootstrap h4 */
}
.pcard--primary > .pcard__title { color: var(--accent-blue); }
.pcard--success > .pcard__title { color: var(--accent-green); }
.pcard--warning > .pcard__title { color: var(--accent-amber); }

.pcard p  { font-size: 15px; line-height: 1.78; color: var(--muted); margin: 0 0 14px; }
.pcard p:last-child { margin-bottom: 0; }
.pcard strong { color: var(--text); font-weight: 600; }
.pcard a { color: var(--accent-blue); }
.pcard a:hover { text-decoration: underline; }
.pcard h5 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 1rem; }
.pcard h6 { font-size: 1rem; font-weight: 500; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .02em; color: var(--accent-blue); }
.pcard ul { margin: 0 0 14px; padding-left: 20px; }
.pcard li { font-size: 15px; line-height: 1.78; color: var(--muted); margin-bottom: 6px; }

/* The original's nested `.card.bg-light` — a lighter panel on a white page, so a
   lighter panel on a dark one. */
.subcard {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.subcard h5, .subcard h6 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-weight: 700;
}
.subcard h5 { font-size: 16px; }
.subcard h6 { font-size: 14px; color: var(--muted-2); }
.subcard p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 6px; }
.subcard p:last-child { margin-bottom: 0; }
.subcard strong { color: var(--text); font-weight: 600; }
.subcard a { color: var(--accent-blue); }
.subcard a:hover { text-decoration: underline; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 12px; padding: 18px 20px; margin: 18px 0;
  border: 1px solid;
}
.alert h5 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; margin: 0 0 8px;
}
.alert p { font-size: 14.5px; line-height: 1.72; margin: 0; color: var(--muted); }
.alert strong { color: var(--text); font-weight: 600; }
.alert--success { background: rgba(70,211,105,0.10); border-color: rgba(70,211,105,0.34); }
.alert--success h5 { color: var(--accent-green); }
.alert--info    { background: rgba(91,140,255,0.10); border-color: rgba(91,140,255,0.34); }
.alert--info h5 { color: var(--accent-blue); }
.alert--warning { background: rgba(240,180,41,0.13); border-color: rgba(240,180,41,0.36); }
.alert--warning h5 { color: var(--accent-amber); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badge {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 6px;
  border: 1px solid; background: transparent;
}
.badge--primary { color: var(--accent-blue);  border-color: rgba(91,140,255,0.45); background: rgba(91,140,255,0.12); }
.badge--info    { color: var(--accent-cyan);  border-color: rgba(79,172,254,0.45); background: rgba(79,172,254,0.12); }
.badge--success { color: var(--accent-green); border-color: rgba(70,211,105,0.45); background: rgba(70,211,105,0.12); }
.badge--warning { color: var(--accent-amber); border-color: rgba(240,180,41,0.45); background: rgba(240,180,41,0.14); }
.badge--danger  { color: var(--accent-red);   border-color: rgba(244,40,74,0.45);  background: rgba(244,40,74,0.12); }

/* ── Profile / position card ──────────────────────────────────────────────
   The original's `.row.g-0` with a col-md-4 gradient panel and a col-md-8 body. The
   photo sits at 0.65 opacity over the gradient with the name overlaid at the top,
   which is what gives these cards their character — worth reproducing exactly rather
   than swapping in an avatar. */
.profile {
  display: grid; grid-template-columns: 34% 1fr;
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  margin-bottom: 34px;
  box-shadow: var(--shadow-lg);
}
.profile__panel {
  position: relative; min-height: 400px;
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 20px; text-align: center;
}
/* The original faded the photo to .65 over the gradient. That was tuned on a white
   page; here the gradient reads much stronger, and on the pink/red card in particular
   it washed the whole photograph red. .88 keeps the gradient as a tint at the edges —
   which is what it is for — without recolouring the subject. */
.profile__panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.88;
}
/* The original outlined the name in a solid colour (a 2px + 1px eight-way
   text-shadow, blue for two of the three, red for the other) so it stayed readable
   over the photograph. Reproduced rather than replaced with a soft drop shadow: the
   hard outline is a good part of what these cards look like, and the photos are light
   enough that a blur alone does not hold the text. --outline is set per card. */
.profile__panel h3,
.profile__panel .profile__role {
  position: relative; z-index: 2; color: #fff;
  --outline: #0066ff;
  text-shadow:
    -2px -2px 0 var(--outline),  2px -2px 0 var(--outline),
    -2px  2px 0 var(--outline),  2px  2px 0 var(--outline),
    -1px -1px 0 var(--outline),  1px -1px 0 var(--outline),
    -1px  1px 0 var(--outline),  1px  1px 0 var(--outline);
}
/* The job cards have no photo behind the title, so no outline is needed there. */
.profile__panel--icon h3 { text-shadow: none; }
.profile__panel h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; margin: 0 0 8px;
}
.profile__panel .profile__role { font-size: 1.05rem; font-weight: 500; margin: 0; }

/* Job cards centre their SVG instead of carrying a photo. */
.profile__panel--icon { justify-content: center; min-height: 320px; }
.profile__panel--icon svg { position: relative; z-index: 2; }
.profile__panel--icon h3 { margin-top: 18px; font-size: 1.45rem; }

.profile__body { padding: clamp(24px, 3.4vw, 44px); }
.profile__body p  { font-size: 15px; line-height: 1.78; color: var(--muted); margin: 0 0 14px; }
.profile__body h6 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--accent-blue); margin: 26px 0 8px;
}
.profile__body ul { margin: 8px 0 14px; padding-left: 20px; }
.profile__body li { font-size: 15px; line-height: 1.78; color: var(--muted); margin-bottom: 6px; }
.profile__body strong { color: var(--text); font-weight: 600; }
.profile__note { font-style: italic; color: var(--muted-2) !important; margin-bottom: 0 !important; }

/* ── Vision row ──────────────────────────────────────────────────────────── */
.vision { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vision > div { text-align: center; }
.vision .vision__icon { font-size: 3rem; line-height: 1; margin-bottom: 14px; }
.vision h5 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.vision p  { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }

/* ── Two-column list, as the contact page's "We Are Looking For" ─────────── */
.two-col { display: grid; gap: 0 32px; grid-template-columns: 1fr 1fr; }
.two-col ul { margin-bottom: 0; }

/* ── Info grid — the contact page's 2x2 of sub-cards ─────────────────────── */
.info-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; }
  .profile__panel { min-height: 300px; }
  .two-col, .info-grid { grid-template-columns: 1fr; }
}

/* ── Video lightbox ────────────────────────────────────────────────────────
   atv-web1 opened the intro film with magnificPopup `type: 'iframe'`, so it opens in
   a popup here too rather than replacing the poster in place. No library: the whole
   behaviour is an overlay, an escape key and a click-outside.

   The iframe is still only created when the popup opens and is destroyed when it
   closes — that is what stops the Bunny player bundle loading, and a closed popup
   holding a live video connection. */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(3,4,12,0.88);
  backdrop-filter: blur(4px);
  animation: lb-in .18s ease-out;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox[hidden] { display: none !important; }

.lightbox__frame {
  position: relative;
  width: min(980px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7);
}
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.lightbox__close {
  position: absolute; top: -46px; right: -4px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.14); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s;
}
.lightbox__close:hover { background: rgba(255,255,255,0.3); }

@media (max-width: 700px) {
  .lightbox__close { top: -44px; right: 0; }
}

@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } }

/* ── Scroll animations ─────────────────────────────────────────────────────
   atv-web1 ran WOW.js over animate.css, revealing each block with fadeInUp as it
   scrolled in, staggered by data-wow-delay. Same effect here from an
   IntersectionObserver in site.js — no jQuery, no WOW, no animate.css.

   The rest state is the ANIMATED-IN state, and .wow only overrides it. That ordering
   matters: if JavaScript never runs, or the observer is unsupported, every block is
   simply visible rather than permanently invisible. site.js adds .wow itself for the
   same reason — nothing is hidden until something is able to reveal it again. */
.wow { opacity: 0; transform: translateY(40px); }
.wow.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1),
              transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Scroll to top ─────────────────────────────────────────────────────────
   The original's scrollup.min.js button, in the brand gradient. */
.scrollup {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 8px; border: 0;
  background: var(--brand); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.scrollup.is-shown { opacity: 1; visibility: visible; transform: none; }
.scrollup:hover { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .wow, .wow.is-in { opacity: 1; transform: none; transition: none; }
  .scrollup { transition: none; }
}

/* ── LineIcons ─────────────────────────────────────────────────────────────
   The outline icon set atv-web1 used, font and stylesheet copied across verbatim
   (public/css/lineicons.css + public/fonts/LineIcons.*) rather than swapped for
   emoji. Emoji are the wrong thing here twice over: they render filled and in colour,
   which fights an outline design, and every platform draws them differently, so the
   page looks different on a Mac, a Pixel and a Windows laptop.

   Sizes below are relative to the text they sit in, so an icon tracks its heading
   rather than needing a value per slot. */
[class^="lni-"], [class*=" lni-"] { line-height: 1; }

.pcard__title  [class^="lni-"] { font-size: 1.1em; }
.profile__body [class^="lni-"] { font-size: 1.05em; }
.subcard h5    [class^="lni-"],
.subcard h6    [class^="lni-"] { font-size: 1.05em; opacity: .85; }
.alert h5      [class^="lni-"] { font-size: 1.05em; }

/* In the round tile on the landing cards the icon is the whole content, so it is
   sized absolutely and inherits the tile's accent rather than the body colour. */
.card__icon [class^="lni-"] { font-size: 22px; color: var(--accent-blue); }

.vision .vision__icon [class^="lni-"] { font-size: 3rem; }

.nav__theme [class^="lni-"] { font-size: 15px; }

.foot [class^="lni-"] { font-size: .95em; opacity: .8; }