/* PD Mangan case-study lander — shared brand styling.
 *
 * CODIFIED so every future lander inherits it: a new lander links this file
 * and writes only content. Do not restyle per-page.
 *
 * Palette and type are from _reference/brand_guidelines.md (canonical):
 *   #0A212E background · #fbab06 orange accent (CTAs) · #0066AD Rogue Blue
 *   (links) · Oswald display · Source Serif 4 body · Inter UI.
 *
 * DELIBERATELY PLAIN. Prospect-facing pages follow the standing doctrine
 * "design polish triggers AI suspicion; structure does not" — brand colour and
 * typography, but no cards, gradients, shadows, or animation. The proof is the
 * video and the words; decoration only makes a real client story look generated.
 *
 * Typography obeys the Butterick rules in the same guidelines: body 15–25px,
 * line-height 1.2–1.45, line length 45–90 characters (the 34rem measure), one
 * spacing method, headings emphasised by whitespace rather than decoration.
 */

:root {
  --bg: #0A212E;          /* brand background */
  --surface: #0B2540;     /* darkest blue, for the media well */
  --text: #F2F4F6;        /* near-white on dark; body copy */
  --text-muted: #9FB0BD;  /* metadata, fine print */
  --accent: #fbab06;      /* orange — CTAs only */
  --link: #7FC4F5;        /* Rogue Blue lifted for contrast on dark */
  --font-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;              /* inside the 15–25px rule */
  line-height: 1.45;            /* top of the 1.2–1.45 range: long-form comfort */
  padding: 3rem 1.25rem 4rem;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 34rem; margin: 0 auto; }  /* ≈65 characters per line */

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

.sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.4;
  margin-bottom: 2rem;
}

/* Media well: 4:3 matches the source recordings, so no letterboxing. */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2.25rem;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cta { text-align: center; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #0A212E;               /* dark text on orange — contrast, not white */
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 1rem 2.25rem;
  border-radius: 4px;
}
.btn:hover { background: #ffc23d; }
.btn:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

.fine {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 1rem;
}

a { color: var(--link); }

@media (max-width: 30rem) {
  body { font-size: 18px; padding: 2rem 1rem 3rem; }
  h1 { font-size: 1.6rem; }
  .btn { display: block; }      /* full-width tap target on phones */
}