/* ============================================================================
   ma - LANDING PAGE SYSTEM
   ============================================================================
   One shared system for campaign landing pages, so a new page is assembled from
   parts rather than hand-rolled.

   WHY THIS EXISTS
   An audit of the live landing pages found the same layout rebuilt under a
   different class prefix each time (ts-, mm-, ou-, ov-, bm-, sk-, tx-, dx-) and
   more than sixty hand-typed hex values, several of which were off-palette or
   failed contrast. The `lp-` classes were already present on most of those
   pages, but only as a hook for the nav script: the actual styling lived in the
   per-page prefix. This file turns `lp-` into the real system it was pretending
   to be.

   HOW TO BUILD A NEW LANDING PAGE
     1. Use the Base layout. This file is already loaded there.
     2. Mark every dark section `data-dark`. That one attribute does three jobs:
        the nav switches to white over it, the reversed logo lockup shows, and
        the accent tokens flip to full-strength cyan and pink. There is no list
        to update anywhere.
     3. Use the classes below. Do not invent a per-page prefix for anything this
        file already covers.
     4. Never type a hex value. Every colour you need is a token in styles.css.
        If you find yourself reaching for a new one, it belongs in the palette
        discussion, not in a page.

   ACCENT COLOUR
   Use var(--accent-cyan) and var(--accent-pink), never var(--cyan)/var(--pink),
   for anything that is TEXT. Both currently resolve to the full-strength brand
   colours on every ground, which is the agreed brand position: cyan stays cyan.
   Routing accent text through these two rather than hard-coding the brand
   colours means the light-ground treatment is a single edit in styles.css if
   that is ever revisited, instead of a sweep across every page again.
   var(--cyan)/var(--pink) remain right for fills, rules and large display type.
   ========================================================================== */

/* ---- WRAP ---------------------------------------------------------------
   Every lp-* page was declaring this identically in its own scoped block.
   It belongs here once. Pages that still declare it locally are harmless:
   Astro scopes theirs, so it simply wins over an identical rule. */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- HERO ---------------------------------------------------------------
   Photographic heroes need the scrim. The nav is transparent over the top of
   the page, so without it white nav links end up sitting on bright billboard
   artwork. The gradient is part of the component for exactly that reason: it
   is not decoration and should not be removed per page. */
.lp-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 200px var(--gutter) clamp(64px, 8vw, 110px);
}
.lp-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 0.5 to 0.85, 4 Sep 2026. Under a scrim that is itself 0.5 to 0.96 opaque, a
     hero photograph at 0.5 was reaching the eye at roughly a fifth of its real
     strength. Survivable on a page selling a taxi livery, fatal on /murals where
     the photograph IS the product. */
  opacity: 0.85;             /* paired with the scrim below; do not raise alone */
  z-index: 0;
}
.lp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* MEASURED, NOT EYEBALLED. The hero content occupies 26 to 86 per cent of the
     hero height (eyebrow 26, h1 31 to 57, lede 61 to 73, buttons 78 to 86) and
     the nav sits at 3 to 8. That leaves ONE window where the picture can be
     bright without anything sitting on it: roughly 9 to 20 per cent. This
     gradient opens that window and keeps everything else heavy.

     Contrast of the worst (brightest) pixel behind each element, composited in
     canvas from the real deployed image and these exact alphas, /murals at
     1522px. Against 4.5 for body text and 3.0 for large display type:
       nav 8.09   h1 white 13.58   h1 cyan 5.65   h1 PINK 3.54   lede 13.85
       eyebrow on its chip 7.26
     The photo window is four times brighter than the old scrim (mean luminance
     0.057 against 0.013).

     THE 28 PER CENT STOP IS 0.82 BECAUSE OF PINK, and this is the whole reason
     to keep the band split. Brand rule says hero H1s carry BOTH accents. Pink
     #FF006E has a luminance of 0.22 against cyan's 0.42, so on a bright
     photograph it is the first thing to fail: at the earlier 0.70 it measured
     2.56, under the 3.0 floor, while cyan sat at a comfortable 4.51. Darkening
     from 28 per cent down fixed it WITHOUT costing anything, because the photo
     window is 9 to 20 per cent and the h1 does not start until 31. Measured
     both ways: the window luminance is identical before and after.
     If you ever lighten this stop, re-measure the PINK word, not the cyan
     one. Cyan will mislead you into thinking there is room. */
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.95) 0%,
    rgba(10, 10, 10, 0.60) 9%,
    rgba(10, 10, 10, 0.44) 20%,
    rgba(10, 10, 10, 0.82) 28%,
    rgba(11, 28, 44, 0.90) 50%,
    rgba(11, 28, 44, 0.92) 75%,
    rgba(11, 28, 44, 0.95) 100%);
}
/* The eyebrow is the one casualty of opening that window: 12px cyan landed at
   2.64 against the brightened photo, and it was already only 4.19 before. Small
   cyan text cannot be fixed by moving the gradient without closing the window
   again, so it gets its own plate. Ink at 0.72 behind it measures 6.61, which
   clears 4.5 properly rather than knowingly failing it. Same device the Skate
   hero already used, promoted here so every photographic hero inherits it. */
.lp-hero .lp-eyebrow {
  display: inline-block;
  background: rgba(10, 10, 10, 0.72);
  padding: 7px 15px;
  border-radius: 999px;
}
.lp-hero-in { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; }
.lp-hero h1 {
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 900; line-height: 0.98; letter-spacing: -0.05em;
  margin-bottom: 26px;
}
/* House style: display headlines carry BOTH accents, as on the home page.
   These sit on the dark hero, where full-strength cyan and pink are correct. */
.lp-hero h1 .cy-em { color: var(--cyan); }
.lp-hero h1 .pk-em { color: var(--pink); }
.lp-hero .lede {
  max-width: 620px; font-size: var(--body-lg);
  color: rgba(255, 255, 255, 0.82); line-height: 1.55;
}
.lp-hero .lede strong { color: var(--cyan); font-weight: 800; }

/* ---- EYEBROW ------------------------------------------------------------
   JetBrains Mono, uppercase, trailing underscore. Ground-aware by default. */
.lp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 16px;
}
.lp-eyebrow.pink { color: var(--accent-pink); }
.lp-eyebrow::after { content: '_'; }

/* ---- CTA BUTTONS --------------------------------------------------------
   Both buttons carry the full-strength brand colours, by decision. Noting the
   measured cost so it is not rediscovered as a bug: paper on #FF006E is
   3.83:1 and ink on it 4.4:1, so the pink button's label does not clear AA at
   these sizes. The cyan button is fine, ink on #03B7D2 is 8.6:1. */
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 18px 32px; border-radius: 99px;
  font-weight: 700; font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lp-btn.cyan { background: var(--cyan); color: var(--ink); }
.lp-btn.cyan:hover { background: var(--cyan-2); transform: translateY(-2px); }
.lp-btn.pink { background: var(--pink); color: var(--paper); }
.lp-btn.pink:hover { background: #c2005a; transform: translateY(-2px); }
.lp-btn.ghost {
  background: none; color: var(--paper);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
}
.lp-btn.ghost:hover { border-color: var(--paper); transform: translateY(-2px); }
/* Ghost on a light ground needs ink, not paper. */
.lp-section:not([data-dark]):not(.dark) .lp-btn.ghost {
  color: var(--ink); border-color: var(--border-strong);
}

/* ---- SPEC BAR ----------------------------------------------------------- */
.lp-spec { background: var(--cyan); color: var(--ink); padding: 22px 0; }
.lp-spec ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.lp-spec li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}

/* ---- INTRO -------------------------------------------------------------- */
.lp-intro { background: var(--paper); color: var(--ink); padding: clamp(64px, 8vw, 110px) 0; }
.lp-intro p { font-size: var(--body-lg); line-height: 1.6; max-width: 66ch; margin-bottom: 18px; }
.lp-intro .small { font-size: 14px; color: var(--muted); }

/* ---- SECTION ------------------------------------------------------------
   `.dark` is the established modifier and still works. `data-dark` is the
   preferred form for new work because it also drives the nav and the accents. */
.lp-section { padding: clamp(72px, 9vw, 130px) 0; background: var(--paper); color: var(--ink); }
.lp-section.dark,
.lp-section[data-dark] { background: var(--navy); color: var(--paper); }
.lp-section h2 {
  font-size: var(--display-3); font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; margin-bottom: 18px;
}
.lp-section h2 .cy-em { color: var(--accent-cyan); }
.lp-section h2 .pk-em { color: var(--accent-pink); }
.lp-section .lede {
  font-size: var(--body-lg); max-width: 62ch; margin-bottom: 48px;
  color: var(--muted); line-height: 1.55;
}
.lp-section.dark .lede,
.lp-section[data-dark] .lede { color: rgba(255, 255, 255, 0.68); }

/* ---- GRID + CARD -------------------------------------------------------- */
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .lp-grid { grid-template-columns: 1fr; } }

.lp-card {
  border-radius: 12px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.lp-section.dark .lp-card,
.lp-section[data-dark] .lp-card { background: #102434; border-color: rgba(255, 255, 255, 0.10); }
.lp-card img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.lp-card-b { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.lp-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }

.lp-price { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.lp-price span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.lp-section.dark .lp-price span,
.lp-section[data-dark] .lp-price span { color: rgba(255, 255, 255, 0.55); }

/* The saving is the reason anyone reads a deal card, so it is a filled chip
   rather than a caption. It used to be 11px cyan text, which made the single
   most persuasive element the smallest thing on the card.

   Note this is a FILL, not accent text, so it does not touch the 25 Aug 2026
   decision to keep full-strength cyan for accent type on light grounds. It is
   the use CLAUDE.md already sanctions for --cyan. Measured, not eyeballed:
   ink on cyan is 8.21:1. The old cyan-on-paper-3 treatment measured 2.21:1. */
.lp-disc {
  display: inline-block; margin: 12px 0 16px;
  padding: 7px 12px; border-radius: 3px;
  background: var(--cyan); color: var(--ink);
  font-size: 13px; font-weight: 900; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.2;
}

.lp-meta { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.lp-meta li { font-size: 15px; line-height: 1.5; color: var(--muted); }
.lp-section.dark .lp-meta li,
.lp-section[data-dark] .lp-meta li { color: rgba(255, 255, 255, 0.66); }
.lp-meta li::before {
  content: ''; display: inline-block; width: 12px; height: 1px;
  background: currentColor; margin-right: 9px; vertical-align: middle; opacity: 0.6;
}

.lp-card-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 22px; border-radius: 99px;
  font-weight: 700; font-size: 14.5px;
  background: var(--cyan); color: var(--ink);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lp-card-cta:hover { background: var(--pink); color: var(--paper); transform: translateY(-2px); }

/* ---- CURRENCY SELECTOR -----------------------------------------------------
   One page serving three markets. Every price is rendered as a `.cur` span
   carrying all three values as data attributes, so switching is a text swap
   with no refetch and no layout shift, and the page still shows a real price
   with JavaScript disabled (the server renders the default currency inline).

   The rates are set by hand from the approved matrix, never derived in the
   browser, so no client ever sees a raw conversion. */
.lp-cur { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); }
.lp-section:not([data-dark]):not(.dark) .lp-cur {
  background: var(--paper-2); border-color: var(--border-strong); }
.lp-cur button {
  appearance: none; border: 0; cursor: pointer; background: none; color: inherit;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  min-height: 40px; padding: 0 18px; border-radius: 99px;
  transition: background 0.18s ease, color 0.18s ease;
}
.lp-cur button[aria-pressed='true'] { background: var(--cyan); color: var(--ink); }
.lp-cur button:not([aria-pressed='true']):hover { background: rgba(255, 255, 255, 0.10); }
.lp-section:not([data-dark]):not(.dark) .lp-cur button:not([aria-pressed='true']):hover {
  background: rgba(0, 0, 0, 0.06); }
/* Four currencies fit a desktop row but not a 360px phone, where $ USD, £ GBP,
   AED and € EUR come to roughly 330px inside a 320px column. Rather than cap the
   selector at three, let it wrap and tighten the buttons. Still 40px tall, so
   the tap target is unaffected. */
@media (max-width: 460px) {
  .lp-cur { flex-wrap: wrap; }
  .lp-cur button { padding: 0 13px; font-size: 12px; letter-spacing: 0.04em; }
}
.lp-fx { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 14px; max-width: 62ch; }
.lp-section[data-dark] .lp-fx, .lp-section.dark .lp-fx { color: rgba(255, 255, 255, 0.55); }

/* ---- PLAYBOOK SERIES -----------------------------------------------------
   Added 2 Sep 2026 for /ooh-growth-playbook, the first of three ma Playbooks.
   These live in the shared file rather than in the page for the same reason
   `lp-read` does: the City/Audience Playbook and the Pilot Campaign Playbook
   are the same three components with different words, and a second private
   prefix is how this stylesheet ended up with eight copies of one layout.

   `lp-stages` is the growth-stage rail, `lp-guide` the directional investment
   grid, `lp-dl` the download module. All three work on light and dark grounds
   and read `[data-dark]` rather than a class list. */
.lp-stages { display: grid; gap: 16px; margin-top: 8px; }
.lp-stage {
  position: relative; padding: 26px 28px 26px 30px;
  background: var(--paper-2); border-radius: 6px;
  border-left: 3px solid var(--cyan);
}
.lp-section[data-dark] .lp-stage, .lp-section.dark .lp-stage {
  background: rgba(255, 255, 255, 0.05);
}
.lp-stage .st {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-cyan); margin: 0 0 6px;
}
.lp-stage h3 {
  font-size: clamp(19px, 2.2vw, 23px); font-weight: 900;
  letter-spacing: -0.02em; margin: 0 0 14px;
}
.lp-stage ul { list-style: none; margin: 0 0 16px; padding: 0; }
.lp-stage li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: 15.5px; line-height: 1.55; color: var(--muted);
}
.lp-section[data-dark] .lp-stage li, .lp-section.dark .lp-stage li {
  color: rgba(255, 255, 255, 0.68);
}
.lp-stage li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}
.lp-stage .role { font-size: 15.5px; font-weight: 800; margin: 0; }
@media (min-width: 860px) { .lp-stages.two { grid-template-columns: 1fr 1fr; } }

/* The escalation bar. Five stages presented as five equal things carry no
   argument: the point of the section is that the job gets bigger, so each card
   shows how far along the ladder it sits. The last one is pink so the top
   lands somewhere, using the two accents the way the ma rule does.
   It is decorative, hence aria-hidden at the markup end and no text. */
.lp-stage-bar {
  margin-top: 18px; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--paper-3);
}
.lp-section[data-dark] .lp-stage-bar, .lp-section.dark .lp-stage-bar {
  background: rgba(255, 255, 255, 0.12);
}
.lp-stage-bar span {
  display: block; height: 100%; border-radius: 99px; background: var(--cyan);
}
.lp-stage-bar span.pk { background: var(--pink); }

/* The investment grid. A real table, not the source deck's flat PNG: that image
   was unreadable on a phone and its text could not be selected or searched. */
.lp-guide-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-guide { width: 100%; min-width: 660px; border-collapse: collapse; margin-top: 8px; }
.lp-guide th {
  background: var(--ink); color: var(--paper); text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 14px 16px; vertical-align: bottom;
}
.lp-guide td {
  padding: 16px; font-size: 15px; line-height: 1.5;
  color: var(--muted); border-bottom: 1px solid var(--border); vertical-align: top;
}
.lp-guide tr:last-child td { border-bottom: 0; }
.lp-guide td:first-child { font-weight: 800; color: var(--ink); white-space: nowrap; }
.lp-guide td.pc { font-weight: 800; color: var(--accent-cyan); white-space: nowrap; }
.lp-guide td.rg { font-weight: 800; color: var(--ink); white-space: nowrap; }
.lp-guide tbody tr:nth-child(even) { background: var(--paper-2); }
.lp-note { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; margin-top: 18px; }

/* Download module. Cover thumbnail beside what the reader actually gets. */
.lp-dl { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 780px) { .lp-dl { grid-template-columns: 1fr; } }
.lp-dl img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.lp-dl ul { list-style: none; margin: 18px 0 26px; padding: 0; }
.lp-dl li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 16px; line-height: 1.55;
}
.lp-dl li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
}
.lp-dl .meta { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* ---- ENQUIRY ------------------------------------------------------------
   Form controls are styled by element inside .lp-enq rather than by a page
   specific form id, so a new page does not have to restate any of this. */
.lp-enq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .lp-enq { grid-template-columns: 1fr; } }
.lp-alt { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.lp-alt a { color: var(--cyan); font-weight: 700; }

.lp-enq label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 14px; color: rgba(255, 255, 255, 0.8); }
.lp-enq .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .lp-enq .fr { grid-template-columns: 1fr; } }
.lp-enq input, .lp-enq select, .lp-enq textarea {
  width: 100%; margin-top: 7px; padding: 14px 15px; border-radius: 9px;
  font: inherit; font-weight: 400; font-size: 15px;
  color: var(--paper); background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.lp-enq select option { color: var(--ink); }
/* A visible focus ring is a keyboard user's only position indicator. */
.lp-enq input:focus, .lp-enq select:focus, .lp-enq textarea:focus {
  outline: 2px solid var(--cyan); outline-offset: 1px;
}
.lp-enq button { margin-top: 10px; min-height: 52px; border: 0; cursor: pointer; }
.lp-enq .hp { display: none !important; }      /* honeypot */
.lp-enq .fnote { margin-top: 14px; font-size: 14px; color: var(--cyan); }

/* ===========================================================================
   LONG-FORM READING
   Added 26 Aug 2026 for /ooh-planning-guide, but deliberately part of the
   shared system rather than that page's own stylesheet. Any page that puts a
   sustained piece of writing on the site (a second guide, a real case study, a
   Latest piece with an argument in it) should use these rather than rebuild
   them under yet another private prefix.

   The measure is capped near 68 characters, which is why this does not reuse
   .lp-section's full-width grid. Accent text routes through --accent-cyan /
   --accent-pink per the note at the top of this file.
   ======================================================================== */
.lp-read { background: var(--bone); padding: var(--pad-block) var(--gutter); }
.lp-read-in { max-width: 720px; margin: 0 auto; }

.lp-sec { padding-top: 8px; scroll-margin-top: 110px; }
.lp-sec + .lp-sec {
  margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--border);
}
.lp-sec-num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--accent-cyan); margin-bottom: 12px;
}
.lp-sec-h {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; line-height: 1.08;
  letter-spacing: -0.03em; color: var(--ink); margin-bottom: 26px;
  scroll-margin-top: 110px;
}

.lp-body { font-size: 18px; line-height: 1.68; color: var(--ink-2); margin-bottom: 22px; }
.lp-body strong { color: var(--ink); font-weight: 700; }
.lp-list { margin: 0 0 24px; padding-left: 22px; }
.lp-list li { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-bottom: 10px; }

/* Pull quote. Pink rule, because the callout below already owns cyan and the
   two need to stay distinguishable when they sit near each other. */
.lp-pull { margin: 40px 0; padding: 0 0 0 26px; border-left: 3px solid var(--pink); }
.lp-pull p {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; line-height: 1.28;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
/* These two were written for /ooh-planning-guide, which is a light reading
   column throughout, so neither had ever been painted on a dark ground. The
   first pull quote inside a [data-dark] section measured ink on navy at 1.15:1,
   which is invisible, not merely low contrast. Anything here that hardcodes
   --ink or --ink-2 without its own background needs a dark counterpart.
   .lp-callout does not, because it paints its own light panel. */
.lp-section[data-dark] .lp-pull p,
.lp-section.dark .lp-pull p { color: var(--paper); }
.lp-section[data-dark] .lp-note,
.lp-section.dark .lp-note { color: var(--paper); }

/* Labelled callout: "ma Insight", "Common mistake", "Planning principle". */
.lp-callout {
  margin: 34px 0; padding: 26px 28px; background: var(--paper);
  border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 4px;
}
.lp-callout-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-cyan); margin-bottom: 10px;
}
.lp-callout p { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 10px; }
.lp-callout p:last-child { margin-bottom: 0; }

.lp-note { font-size: 17px; line-height: 1.6; color: var(--ink); font-weight: 600; margin: 26px 0; }
.lp-sources {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

/* Reading contents list: numbered, jump-linked, generated from the headings. */
.lp-toc { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.lp-toc li {
  display: flex; align-items: baseline; gap: 20px; padding: 24px 0;
  border-top: 1px solid var(--border);
}
.lp-toc .n {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--accent-cyan); letter-spacing: 1px; flex-shrink: 0;
}
.lp-toc a {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  line-height: 1.3; text-decoration: none; transition: color .18s ease;
}
.lp-toc a:hover { color: var(--accent-cyan); }

@media (max-width: 880px) {
  .lp-sec + .lp-sec { margin-top: 44px; padding-top: 40px; }
  .lp-body, .lp-list li { font-size: 17px; }
  .lp-toc { grid-template-columns: 1fr; gap: 0; }
}

/* ---- NUMBERED QUESTION LIST ------------------------------------------------
   A numbered argument, one point per row, oversized numeral carrying the accent.
   Lives here rather than in a page because it is the obvious device for any
   listicle-shaped piece, and the alternative was a tenth private prefix.
   First used by /questions-to-ask-your-media-agency. */
.lp-qa { list-style: none; margin: 0; padding: 0; }
.lp-qa > li { display: grid; grid-template-columns: auto 1fr; gap: 0 28px; padding: 30px 0; }
.lp-qa > li + li { border-top: 1px solid var(--border); }
.lp-section[data-dark] .lp-qa > li + li,
.lp-section.dark .lp-qa > li + li { border-top-color: rgba(255, 255, 255, 0.14); }
.lp-qa .n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1;
  color: var(--accent-cyan); letter-spacing: -0.02em;
}
.lp-qa h3 {
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.2; margin: 0 0 12px;
}
.lp-qa p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; max-width: 62ch; }
/* A question can carry more than one paragraph, so they need to breathe, but the
   last one must not add a gap on top of the row padding. */
.lp-qa > li > div > *:last-child { margin-bottom: 0; }
.lp-section[data-dark] .lp-qa p,
.lp-section.dark .lp-qa p { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 620px) {
  .lp-qa > li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
}

/* ---- FULL-BLEED ACCENT BAND ------------------------------------------------
   A whole-width colour interrupt: a pull quote or a short CTA on a solid brand
   ground. Deliberately NOT built on .lp-spec, which is the cyan strip of
   campaign facts and is left alone for the pages already using it.

   INK ON BOTH GROUNDS, and this is measured, not a preference. Ink on cyan is
   8.21:1 and ink on pink 5.16:1, both clear AA. Paper on pink is 3.83:1 and
   fails for anything under 18.66px bold, so do not reverse the label or the
   supporting line to white on the pink variant. The button inverts instead:
   ink fill, paper label, which is around 18:1 on either ground. */
.lp-band { padding: clamp(52px, 6.5vw, 88px) 0; color: var(--ink); text-align: center; }
.lp-band.cyan { background: var(--cyan); }
.lp-band.pink { background: var(--pink); }
/* `.eyebrow`, NOT `.label`. There is already a global `.label` on the site
   carrying its own `::before` rule, and while it happened to look fine here it
   was styling this component by accident. Caught by reading the computed
   pseudo-element in a browser, not by reading the file. The short rule is kept
   because it reads well, but it is declared here on purpose now. */
.lp-band .eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 0 0 20px;
}
.lp-band .eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 26px; height: 1px; margin-right: 12px; background: currentColor;
}
.lp-band .eyebrow::after { content: '_'; }
.lp-band .q {
  font-size: clamp(25px, 3.6vw, 44px); font-weight: 900; line-height: 1.14;
  letter-spacing: -0.03em; max-width: 26ch; margin: 0 auto;
}
.lp-band .sub { font-size: 17px; line-height: 1.6; max-width: 58ch; margin: 16px auto 0; }
.lp-band .btn {
  display: inline-flex; align-items: center; min-height: 48px;
  margin-top: 26px; padding: 15px 32px; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 15px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lp-band .btn:hover { transform: translateY(-2px); opacity: 0.9; }

/* Cyan rule variant, for when a pull quote sits directly above a pink band and
   the default pink rule would read as the same colour twice. */
.lp-pull.cy { border-left-color: var(--cyan); }

/* Alternating accent on the numerals. Opt-in, because a single accent colour is
   the right default for a short list and the alternation only earns its keep
   over four or more rows. */
.lp-qa.alt > li:nth-child(even) .n { color: var(--accent-pink); }

/* ---- READING COLUMN inside a full-width section --------------------------- */
.lp-col { max-width: 68ch; }
.lp-col p { font-size: 18px; line-height: 1.7; margin: 0 0 20px; }
.lp-col p:last-child { margin-bottom: 0; }
.lp-col ul { margin: 0 0 22px; padding-left: 22px; }
.lp-col li { font-size: 18px; line-height: 1.6; margin-bottom: 9px; }

/* ---- REMUNERATION MODEL EXPLAINER -----------------------------------------
   Four cards explaining how an agency can be paid. First used by
   /questions-to-ask-your-media-agency.

   NEUTRALITY IS LOAD BEARING. Every card is deliberately identical: same size,
   same border, same type scale, same cyan marker on the "where the agency earns"
   line, same visual weight. ma's own model is one of the four on display, so the
   moment one card gets heavier treatment or a warning colour, the page starts
   making an argument the copy carefully does not make, and it undercuts ma at the
   same time. Do not restyle one card in isolation. */
/* grid-auto-rows: 1fr forces all four cards to one height regardless of how
   much copy each carries. Without it the shorter models render as smaller
   cards, which is a visual ranking the copy does not make. */
.lp-models {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
  gap: 20px; margin: 40px 0 48px; list-style: none; padding: 0;
}
@media (max-width: 780px) { .lp-models { grid-template-columns: 1fr; } }
.lp-models > li {
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 26px 24px;
}
.lp-section[data-dark] .lp-models > li,
.lp-section.dark .lp-models > li { background: #102434; border-color: rgba(255, 255, 255, 0.10); }
.lp-models h3 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-cyan); margin: 0 0 16px;
}
.lp-models .flow { list-style: none; margin: 0 0 16px; padding: 0; }
.lp-models .flow li {
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.lp-models .flow li:last-child { border-bottom: 0; }
.lp-section[data-dark] .lp-models .flow li,
.lp-section.dark .lp-models .flow li { color: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(255, 255, 255, 0.10); }
/* The one accented element per card, identical in all four.
   MUST stay `.flow li.earns`. As `.lp-models .earns` it loses to
   `.lp-models .flow li` on specificity (0,2,0 against 0,2,1) and the accent
   silently does not paint at all. Measured in a browser, not read off the
   source, which is the only way that shows up. */
.lp-models .flow li.earns { color: var(--accent-cyan); font-weight: 700; }
/* Pinned explicitly for dark ground. The rule above already wins there on
   source order alone, at identical specificity to the dark .flow li rule, so
   simply moving a block would silently blank the accent. Stated rather than
   inherited. The marker also carries weight 700, so it does not depend on
   colour alone to read. */
.lp-section[data-dark] .lp-models .flow li.earns,
.lp-section.dark .lp-models .flow li.earns { color: var(--accent-cyan); font-weight: 700; }
.lp-models p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.lp-section[data-dark] .lp-models p,
.lp-section.dark .lp-models p { color: rgba(255, 255, 255, 0.62); }

/* ---- MEDIA BAND + SPLIT -------------------------------------------------
   Added 4 Sep 2026 for /murals, and put here rather than in the page because
   any visual capability page will want them. Two components:

   `.lp-media` is a full-bleed image. Murals are a format you sell by showing,
   not describing, so the page needs a way to give a photograph the whole
   viewport width without an inset gutter around it.

   `.lp-split` is the image-and-argument pair. Each "why murals" pillar has to
   be PROVED by a picture sitting next to it: say "made to be shared" and show
   somebody photographing a wall. Alternate sides with `.rev`. */
.lp-media { position: relative; width: 100%; line-height: 0; background: var(--ink); }
.lp-media img { width: 100%; height: auto; display: block; }
.lp-media.tall img { aspect-ratio: 21 / 9; object-fit: cover; }
.lp-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px var(--gutter) 22px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.82) 100%);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86); line-height: 1.5;
}

.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.lp-split + .lp-split { margin-top: clamp(48px, 5vw, 72px); }
/* 3:2 rather than 4:3, measured 4 Sep 2026. At 4:3 and a 1440px container the
   image ran 494px tall against 263px of text, so every pillar carried about
   230px of dead column, and with a 104px gap on top of that the section read as
   a list of things floating apart rather than four arguments. 3:2 brings the
   image to 439 and the wider measure below brings the text up, which closes
   most of it. */
.lp-split img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.lp-split.wide img { aspect-ratio: 16 / 9; }
.lp-split.rev > :first-child { order: 2; }
.lp-split h3 {
  font-size: clamp(27px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.05; margin: 14px 0 18px;
}
.lp-split p { font-size: 17.5px; line-height: 1.65; color: var(--muted); max-width: 54ch; }
.lp-section[data-dark] .lp-split p, .lp-section.dark .lp-split p { color: rgba(255, 255, 255, 0.7); }
.lp-split p + p { margin-top: 14px; }
@media (max-width: 860px) {
  .lp-split { grid-template-columns: 1fr; }
  .lp-split.rev > :first-child { order: 0; }
}

/* Wall cards carry a location and a size, so the card needs a tighter,
   monospaced meta line under the heading. */
.lp-wall { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 8px; }
.lp-dims { font-size: 14.5px; color: var(--muted); margin-top: 10px; }
.lp-section[data-dark] .lp-dims, .lp-section.dark .lp-dims { color: rgba(255, 255, 255, 0.6); }